voa-ds-core 1.0.36 → 1.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements/{p-Dto9R8Te.js → p-BlenktuI.js} +2 -3
- package/dist/custom-elements/p-BlenktuI.js.map +1 -0
- package/dist/custom-elements/{p-DPyVgztA.js → p-Cxg5Go80.js} +2 -3
- package/dist/custom-elements/p-Cxg5Go80.js.map +1 -0
- package/dist/custom-elements/{p-B2P7cgN3.js → p-DMYAUbr3.js} +2 -3
- package/dist/custom-elements/p-DMYAUbr3.js.map +1 -0
- package/dist/custom-elements/{p-DKnM_Ozb.js → p-Rm77U17w.js} +2 -3
- package/dist/custom-elements/p-Rm77U17w.js.map +1 -0
- package/dist/custom-elements/{p-CQr0ZKZZ.js → p-yFSrlSbm.js} +2 -3
- package/dist/custom-elements/p-yFSrlSbm.js.map +1 -0
- package/dist/custom-elements/voa-accordion.js +0 -1
- package/dist/custom-elements/voa-accordion.js.map +1 -1
- package/dist/custom-elements/voa-alert.js +1 -2
- package/dist/custom-elements/voa-alert.js.map +1 -1
- package/dist/custom-elements/voa-avatar.js +0 -1
- package/dist/custom-elements/voa-avatar.js.map +1 -1
- package/dist/custom-elements/voa-badge.js +1 -1
- package/dist/custom-elements/voa-breadcrumbs-divider.js +0 -1
- package/dist/custom-elements/voa-breadcrumbs-divider.js.map +1 -1
- package/dist/custom-elements/voa-breadcrumbs-item.js +0 -1
- package/dist/custom-elements/voa-breadcrumbs-item.js.map +1 -1
- package/dist/custom-elements/voa-breadcrumbs.js +0 -1
- package/dist/custom-elements/voa-breadcrumbs.js.map +1 -1
- package/dist/custom-elements/voa-button.js +1 -1
- package/dist/custom-elements/voa-card.js +0 -1
- package/dist/custom-elements/voa-card.js.map +1 -1
- package/dist/custom-elements/voa-checkbox.js +0 -1
- package/dist/custom-elements/voa-checkbox.js.map +1 -1
- package/dist/custom-elements/voa-container-multi-select.js +1 -2
- package/dist/custom-elements/voa-container-multi-select.js.map +1 -1
- package/dist/custom-elements/voa-datepicker.js +0 -1
- package/dist/custom-elements/voa-datepicker.js.map +1 -1
- package/dist/custom-elements/voa-drawer.js +0 -1
- package/dist/custom-elements/voa-drawer.js.map +1 -1
- package/dist/custom-elements/voa-dropdown.js +0 -1
- package/dist/custom-elements/voa-dropdown.js.map +1 -1
- package/dist/custom-elements/voa-input-addon.js +1 -2
- package/dist/custom-elements/voa-input-addon.js.map +1 -1
- package/dist/custom-elements/voa-input.js +0 -1
- package/dist/custom-elements/voa-input.js.map +1 -1
- package/dist/custom-elements/voa-keybinding.js +1 -1
- package/dist/custom-elements/voa-link.js +0 -1
- package/dist/custom-elements/voa-link.js.map +1 -1
- package/dist/custom-elements/voa-list.js +0 -1
- package/dist/custom-elements/voa-list.js.map +1 -1
- package/dist/custom-elements/voa-modal.js +0 -1
- package/dist/custom-elements/voa-modal.js.map +1 -1
- package/dist/custom-elements/voa-option.js +0 -1
- package/dist/custom-elements/voa-option.js.map +1 -1
- package/dist/custom-elements/voa-pagination-item.js +1 -1
- package/dist/custom-elements/voa-pagination.js +1 -2
- package/dist/custom-elements/voa-pagination.js.map +1 -1
- package/dist/custom-elements/voa-progress.js +0 -1
- package/dist/custom-elements/voa-progress.js.map +1 -1
- package/dist/custom-elements/voa-radio.js +0 -1
- package/dist/custom-elements/voa-radio.js.map +1 -1
- package/dist/custom-elements/voa-select-base.js +1 -1
- package/dist/custom-elements/voa-select.js +1 -2
- package/dist/custom-elements/voa-select.js.map +1 -1
- package/dist/custom-elements/voa-skeleton.js +0 -1
- package/dist/custom-elements/voa-skeleton.js.map +1 -1
- package/dist/custom-elements/voa-stepper.js +0 -1
- package/dist/custom-elements/voa-stepper.js.map +1 -1
- package/dist/custom-elements/voa-switch.js +0 -1
- package/dist/custom-elements/voa-switch.js.map +1 -1
- package/dist/custom-elements/voa-tab-item.js +0 -1
- package/dist/custom-elements/voa-tab-item.js.map +1 -1
- package/dist/custom-elements/voa-tab.js +0 -1
- package/dist/custom-elements/voa-tab.js.map +1 -1
- package/dist/custom-elements/voa-table.js +0 -1
- package/dist/custom-elements/voa-table.js.map +1 -1
- package/dist/custom-elements/voa-tag.js +0 -1
- package/dist/custom-elements/voa-tag.js.map +1 -1
- package/dist/custom-elements/voa-text-area.js +0 -1
- package/dist/custom-elements/voa-text-area.js.map +1 -1
- package/dist/custom-elements/voa-timepicker.js +0 -1
- package/dist/custom-elements/voa-timepicker.js.map +1 -1
- package/dist/custom-elements/voa-tooltip-arrow.js +0 -1
- package/dist/custom-elements/voa-tooltip-arrow.js.map +1 -1
- package/dist/custom-elements/voa-tooltip.js +0 -1
- package/dist/custom-elements/voa-tooltip.js.map +1 -1
- package/dist/custom-elements/voa-upload.js +0 -1
- package/dist/custom-elements/voa-upload.js.map +1 -1
- package/dist/styles/voa-components.css +2 -2
- package/package.json +1 -1
- package/dist/custom-elements/p-B2P7cgN3.js.map +0 -1
- package/dist/custom-elements/p-CQr0ZKZZ.js.map +0 -1
- package/dist/custom-elements/p-DKnM_Ozb.js.map +0 -1
- package/dist/custom-elements/p-DPyVgztA.js.map +0 -1
- package/dist/custom-elements/p-Dto9R8Te.js.map +0 -1
|
@@ -109,9 +109,8 @@ function defineCustomElement() {
|
|
|
109
109
|
break;
|
|
110
110
|
} });
|
|
111
111
|
}
|
|
112
|
-
defineCustomElement();
|
|
113
112
|
|
|
114
113
|
export { VoaButton as V, defineCustomElement as d };
|
|
115
|
-
//# sourceMappingURL=p-
|
|
114
|
+
//# sourceMappingURL=p-BlenktuI.js.map
|
|
116
115
|
|
|
117
|
-
//# sourceMappingURL=p-
|
|
116
|
+
//# sourceMappingURL=p-BlenktuI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-BlenktuI.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}
|
|
@@ -43,9 +43,8 @@ function defineCustomElement() {
|
|
|
43
43
|
break;
|
|
44
44
|
} });
|
|
45
45
|
}
|
|
46
|
-
defineCustomElement();
|
|
47
46
|
|
|
48
47
|
export { VoaKeybinding as V, defineCustomElement as d };
|
|
49
|
-
//# sourceMappingURL=p-
|
|
48
|
+
//# sourceMappingURL=p-Cxg5Go80.js.map
|
|
50
49
|
|
|
51
|
-
//# sourceMappingURL=p-
|
|
50
|
+
//# sourceMappingURL=p-Cxg5Go80.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-Cxg5Go80.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,uPAAuP;;MCkBnQ,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,GAAG;AAE9B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkB,KAAK;AAyCxC;IAvCC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,CAAC,mBAAmB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;aAC3C,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,EAAA,EAC9C,IAAI,CAAC,QAAQ,KAAK,KAAK,IACtB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,4IAA4I,EAC9I,IAAI,EAAC,cAAc,EACN,cAAA,EAAA,KAAK,EAClB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,uBAAuB,EACzB,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,KAAK,EAAA,gBAAA,EACH,OAAO,EACtB,CAAA,CACE,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAc,cAAA,EAAA,KAAK,EAAG,CAAA,EACzF,CAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,iBAAa,QAAQ,EAAA,WAAA,EAAW,GAAG,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,KAAK,EAEpF,EAAA,MAAA,CAAA,CACH,CACP,CACG,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,sBAAsB,EAC/C,EAAA,IAAI,CAAC,QAAQ,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-keybinding/voa-keybinding.css?tag=voa-keybinding&encapsulation=shadow","src/components/voa-keybinding/voa-keybinding.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 box-sizing: border-box;\r\n}\r\n\r\n.voa-keybinding__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-keybinding__text {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente Keybinding para exibir atalhos de teclado.\r\n * \r\n * Baseado no design do Figma, usado como subcomponente do input-addon.\r\n * Segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * \r\n * @part base - O elemento raiz do keybinding\r\n * @part key-icon - O ícone da tecla modificadora (⌘ ou Ctrl)\r\n * @part key-text - O texto da tecla\r\n */\r\n@Component({\r\n tag: 'voa-keybinding',\r\n styleUrl: 'voa-keybinding.css',\r\n shadow: true,\r\n scoped: false,\r\n})\r\nexport class VoaKeybinding {\r\n @Element() host: HTMLElement;\r\n\r\n /**\r\n * A tecla do atalho (ex: \"S\", \"K\", \"Enter\")\r\n */\r\n @Prop() shortcut: string = 'S';\r\n\r\n /**\r\n * Plataforma do atalho (mac ou win)\r\n */\r\n @Prop() platform: 'mac' | 'win' = 'mac';\r\n\r\n render() {\r\n return (\r\n <Host\r\n part=\"base\"\r\n class={{\r\n 'voa-keybinding': true,\r\n [`voa-keybinding--${this.platform}`]: true,\r\n }}\r\n >\r\n <div part=\"key-icon\" class=\"voa-keybinding__icon\">\r\n {this.platform === 'mac' ? (\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M12.5 2C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V3.5C2 2.67157 2.67157 2 3.5 2H12.5Z\"\r\n fill=\"currentColor\"\r\n fill-opacity=\"0.1\"\r\n />\r\n <path\r\n d=\"M4 4H12M4 8H12M4 12H8\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n />\r\n </svg>\r\n ) : (\r\n <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0\" y=\"0\" width=\"20\" height=\"10\" rx=\"2\" fill=\"currentColor\" fill-opacity=\"0.1\" />\r\n <text x=\"10\" y=\"7\" text-anchor=\"middle\" font-size=\"8\" fill=\"currentColor\" font-weight=\"600\">\r\n Ctrl\r\n </text>\r\n </svg>\r\n )}\r\n </div>\r\n <span part=\"key-text\" class=\"voa-keybinding__text\">\r\n {this.shortcut}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}
|
|
@@ -117,9 +117,8 @@ function defineCustomElement() {
|
|
|
117
117
|
break;
|
|
118
118
|
} });
|
|
119
119
|
}
|
|
120
|
-
defineCustomElement();
|
|
121
120
|
|
|
122
121
|
export { VoaBadgeComponent as V, defineCustomElement as d };
|
|
123
|
-
//# sourceMappingURL=p-
|
|
122
|
+
//# sourceMappingURL=p-DMYAUbr3.js.map
|
|
124
123
|
|
|
125
|
-
//# sourceMappingURL=p-
|
|
124
|
+
//# sourceMappingURL=p-DMYAUbr3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-DMYAUbr3.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}
|
|
@@ -199,9 +199,8 @@ function defineCustomElement() {
|
|
|
199
199
|
break;
|
|
200
200
|
} });
|
|
201
201
|
}
|
|
202
|
-
defineCustomElement();
|
|
203
202
|
|
|
204
203
|
export { VoaSelectBase as V, defineCustomElement as d };
|
|
205
|
-
//# sourceMappingURL=p-
|
|
204
|
+
//# sourceMappingURL=p-Rm77U17w.js.map
|
|
206
205
|
|
|
207
|
-
//# sourceMappingURL=p-
|
|
206
|
+
//# sourceMappingURL=p-Rm77U17w.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-Rm77U17w.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-select/voa-select-base.css?tag=voa-select-base&encapsulation=shadow","src/components/voa-select/voa-select-base.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: block;\r\n width: 100%;\r\n position: relative;\r\n box-sizing: border-box;\r\n /* Garantir que o dropdown possa aparecer fora do container */\r\n overflow: visible;\r\n}\r\n\r\n.voa-select {\r\n position: relative;\r\n width: 100%;\r\n min-height: 48px;\r\n box-sizing: border-box;\r\n /* Garantir que o dropdown possa aparecer fora do container */\r\n overflow: visible;\r\n}\r\n\r\n.voa-select__control {\r\n /* Structural styles only - Reset button defaults */\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n min-height: 48px;\r\n height: 100%;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n \r\n /* Reset button defaults */\r\n border: none;\r\n outline: none;\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n font: inherit;\r\n color: inherit;\r\n text-align: inherit;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n}\r\n\r\n.voa-select--disabled .voa-select__control {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.voa-select__value {\r\n /* Structural styles only */\r\n flex: 1;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-select__indicator {\r\n /* Structural styles only */\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n transition: transform 0.2s ease;\r\n}\r\n\r\n.voa-select--open .voa-select__indicator {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.voa-select__dropdown-icon {\r\n pointer-events: none;\r\n display: block;\r\n}\r\n\r\n.voa-select__dropdown {\r\n /* Structural styles only */\r\n position: absolute;\r\n top: calc(100% + 4px); /* Posicionado logo abaixo do control com 4px de espaço */\r\n left: 0;\r\n right: 0;\r\n z-index: 1000;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n box-sizing: border-box;\r\n display: block;\r\n\r\n /* Visual styles - White background */\r\n background-color: var(--colors-structure-bg-base, #ffffff);\r\n \r\n /* Outline - border using same token as input field */\r\n border: 1.125px solid var(--colors-structure-border-color, #adb5bd);\r\n border-radius: 15.75px;\r\n\r\n /* Shadow for elevation */\r\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15), \r\n 0px 0px 0px 0.5px var(--colors-structure-border-color, #adb5bd),\r\n inset 0px 0px 0px 1px var(--colors-structure-border-color, #adb5bd);\r\n\r\n /* Padding inside dropdown - vertical only */\r\n padding: 8px 0;\r\n\r\n /* Animation - entrance effect */\r\n animation: dropdownEnter 0.2s ease-out forwards;\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n@keyframes dropdownEnter {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes dropdownExit {\r\n from {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n to {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n}\r\n\r\n/* Toggle logic handled by class in TSX */\r\n.voa-select__dropdown--hidden {\r\n animation: dropdownExit 0.15s ease-in forwards;\r\n display: none;\r\n pointer-events: none;\r\n}\r\n\r\n.voa-select__option {\r\n /* Structural styles only */\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n /* Padding to prevent text from touching borders */\r\n padding: 8px 12px;\r\n}\r\n\r\n.voa-select__option--disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n/* Active state (keyboard navigation highlight) */\r\n.voa-select__option--active {\r\n /* Minimal visual feedback for keyboard navigation - external CSS will enhance */\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n/* Selected state */\r\n.voa-select__option--selected {\r\n /* Minimal visual feedback for selected state - external CSS will enhance */\r\n background-color: rgba(0, 100, 203, 0.1);\r\n} ","import { Component, Prop, Event, EventEmitter, Method, Element, h, State, Watch, Listen } from '@stencil/core';\r\n\r\n/**\r\n * Componente Base para Select do Voa Design System, baseado no design do Figma.\r\n * \r\n * @part base - The root select element\r\n * @part control - The select control button\r\n * @part value - The displayed value text\r\n * @part indicator - The dropdown indicator icon\r\n * @part dropdown - The dropdown menu container\r\n * @part option - Individual option element\r\n */\r\n@Component({\r\n tag: 'voa-select-base',\r\n styleUrl: 'voa-select-base.css',\r\n shadow: true,\r\n scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaSelectBase {\r\n @Element() host: HTMLElement;\r\n /**\r\n * Lista de opções para seleção\r\n */\r\n @Prop() options: Array<{ value: string, label: string, disabled?: boolean }> = [];\r\n\r\n /**\r\n * Texto de placeholder quando não há item selecionado\r\n */\r\n @Prop() placeholder: string = 'Select an option';\r\n\r\n /**\r\n * Se verdadeiro, o select estará desabilitado.\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /**\r\n * Se verdadeiro, o select terá estado de erro.\r\n */\r\n @Prop({ reflect: true }) error: boolean = false;\r\n\r\n /**\r\n * THE TRUTH. Read-only from parent.\r\n */\r\n @Prop() value?: string;\r\n\r\n /**\r\n * Internal Reality.\r\n */\r\n @State() innerValue?: string;\r\n\r\n /**\r\n * Se verdadeiro, o select mostrará as opções.\r\n */\r\n @State() isOpen: boolean = false;\r\n\r\n /**\r\n * Track which option is currently \"highlighted\" by the keyboard\r\n * (Not necessarily selected yet).\r\n */\r\n @State() activeIndex: number = -1;\r\n\r\n /**\r\n * Evento emitido quando o valor é alterado\r\n */\r\n @Event() voaChange: EventEmitter<string>;\r\n\r\n private listboxId = `voa-listbox-${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n componentWillLoad() {\r\n this.innerValue = this.value;\r\n }\r\n\r\n @Watch('value')\r\n syncValue(val: string) {\r\n this.innerValue = val;\r\n }\r\n\r\n @Listen('click', { target: 'window' })\r\n handleOutsideClick(ev: MouseEvent) {\r\n const path = ev.composedPath();\r\n if (this.isOpen && !path.includes(this.host)) {\r\n this.closeDropdown();\r\n }\r\n }\r\n\r\n private toggleDropdown = () => {\r\n if (this.disabled) return;\r\n if (this.isOpen) {\r\n this.closeDropdown();\r\n } else {\r\n this.openDropdown();\r\n }\r\n };\r\n\r\n private openDropdown() {\r\n this.isOpen = true;\r\n // Find the index of the currently selected value to highlight it\r\n const index = this.options.findIndex(o => o.value === this.innerValue);\r\n this.activeIndex = index >= 0 ? index : 0;\r\n }\r\n\r\n private closeDropdown() {\r\n this.isOpen = false;\r\n this.activeIndex = -1;\r\n }\r\n\r\n private handleSelect = (val: string) => {\r\n if (this.disabled) return;\r\n this.innerValue = val;\r\n this.voaChange.emit(val);\r\n this.closeDropdown();\r\n };\r\n\r\n /**\r\n * THE KEYBOARD BRAIN\r\n * This is what makes a Select a Select.\r\n */\r\n private handleKeyDown = (ev: KeyboardEvent) => {\r\n if (this.disabled) return;\r\n\r\n switch (ev.key) {\r\n case 'Enter':\r\n case ' ':\r\n ev.preventDefault();\r\n if (this.isOpen) {\r\n if (this.activeIndex >= 0 && this.options[this.activeIndex]) {\r\n this.handleSelect(this.options[this.activeIndex].value);\r\n }\r\n } else {\r\n this.openDropdown();\r\n }\r\n break;\r\n case 'ArrowDown':\r\n ev.preventDefault();\r\n if (!this.isOpen) {\r\n this.openDropdown();\r\n } else {\r\n this.activeIndex = Math.min(this.activeIndex + 1, this.options.length - 1);\r\n this.scrollToActive();\r\n }\r\n break;\r\n case 'ArrowUp':\r\n ev.preventDefault();\r\n if (this.isOpen) {\r\n this.activeIndex = Math.max(this.activeIndex - 1, 0);\r\n this.scrollToActive();\r\n }\r\n break;\r\n case 'Escape':\r\n if (this.isOpen) {\r\n ev.preventDefault();\r\n this.closeDropdown();\r\n }\r\n break;\r\n case 'Tab':\r\n // If user tabs away, close it.\r\n if (this.isOpen) {\r\n this.closeDropdown();\r\n }\r\n break;\r\n }\r\n };\r\n\r\n private scrollToActive() {\r\n // Logic to scroll the dropdown container to keep the active item in view\r\n // Implementation omitted for brevity, but vital for production\r\n }\r\n\r\n private getDisplayText(): string {\r\n const selected = this.options.find(o => o.value === this.innerValue);\r\n return selected ? selected.label : this.placeholder;\r\n }\r\n\r\n /**\r\n * Método para delegar foco ao elemento interno do select.\r\n * Requerido para acessibilidade WCAG 2.2 AA.\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const control = this.host.shadowRoot?.querySelector('[part=\"control\"]') as HTMLElement;\r\n if (control) {\r\n control.focus();\r\n }\r\n }\r\n\r\n render() {\r\n const activeId = this.activeIndex >= 0 ? `${this.listboxId}-opt-${this.activeIndex}` : undefined;\r\n\r\n return (\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'voa-select': true,\r\n 'voa-select--open': this.isOpen,\r\n 'voa-select--disabled': this.disabled,\r\n }}\r\n // The container handles keydown\r\n onKeyDown={this.handleKeyDown}\r\n >\r\n {/* CONTROL (The Trigger) */}\r\n <button\r\n part=\"control\"\r\n type=\"button\"\r\n class=\"voa-select__control\"\r\n onClick={this.toggleDropdown}\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={this.isOpen ? 'true' : 'false'}\r\n aria-controls={this.listboxId}\r\n aria-activedescendant={this.isOpen ? activeId : undefined}\r\n disabled={this.disabled}\r\n >\r\n <span part=\"value\" class=\"voa-select__value\">\r\n {this.getDisplayText()}\r\n </span>\r\n <span part=\"indicator\" class=\"voa-select__indicator\">\r\n <slot name=\"indicator\">\r\n {/* Default Chevron */}\r\n <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" stroke=\"currentColor\">\r\n <path d=\"M1 1L5 5L9 1\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </slot>\r\n </span>\r\n </button>\r\n\r\n {/* DROPDOWN (The Listbox) */}\r\n <div\r\n id={this.listboxId}\r\n part=\"dropdown\"\r\n class={{\r\n 'voa-select__dropdown': true,\r\n 'voa-select__dropdown--hidden': !this.isOpen,\r\n }}\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n aria-hidden={!this.isOpen ? 'true' : undefined}\r\n >\r\n {this.options.map((option, index) => {\r\n const isSelected = option.value === this.innerValue;\r\n const isActive = index === this.activeIndex;\r\n\r\n return (\r\n <div\r\n id={`${this.listboxId}-opt-${index}`}\r\n part=\"option\"\r\n class={{\r\n 'voa-select__option': true,\r\n 'voa-select__option--selected': isSelected,\r\n 'voa-select__option--active': isActive, // Highlighted by keyboard\r\n 'voa-select__option--disabled': !!option.disabled,\r\n }}\r\n role=\"option\"\r\n aria-selected={isSelected ? 'true' : 'false'}\r\n onClick={() => !option.disabled && this.handleSelect(option.value)}\r\n onMouseEnter={() => (this.activeIndex = index)} // Mouse syncs with keyboard\r\n >\r\n {option.label}\r\n </div>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
@@ -67,9 +67,8 @@ function defineCustomElement() {
|
|
|
67
67
|
break;
|
|
68
68
|
} });
|
|
69
69
|
}
|
|
70
|
-
defineCustomElement();
|
|
71
70
|
|
|
72
71
|
export { VoaPaginationItem as V, defineCustomElement as d };
|
|
73
|
-
//# sourceMappingURL=p-
|
|
72
|
+
//# sourceMappingURL=p-yFSrlSbm.js.map
|
|
74
73
|
|
|
75
|
-
//# sourceMappingURL=p-
|
|
74
|
+
//# sourceMappingURL=p-yFSrlSbm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-yFSrlSbm.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,6bAA6b;;MCO7c,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQE;;;;;AAKG;AACsB,QAAA,IAAI,CAAA,IAAA,GAA0C,MAAM;AAE7E;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEhD;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAI1C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC9C,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;AAEzB,SAAC;AAwDF;IAtDS,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACxB,YAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAgB,gBAAA,EAAA,OAAO,qBAAiB,OAAO,EAAA,EACxH,CAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAY,CAAA,CAC1C;;AAGV,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACxB,YAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,GAAG,EAAgB,gBAAA,EAAA,OAAO,qBAAiB,OAAO,EAAA,EACxH,CAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,gBAAgB,EAAY,CAAA,CACzC;;AAGV,QAAA,OAAO,IAAI;;IAGb,MAAM,GAAA;;AAEJ,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC5B,YAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,aAAA,EAAa,MAAM,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EAAA,EAAA,KAAA,CAAU,CACxC;;AAIX,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,OAAO,EAAE,IAAI,CAAC,WAAW,EACX,cAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAAA,eAAA,EAC/B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,EAEjD,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,EACjC,EAAA,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,KAC5C,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,EACnC,IAAI,CAAC,UAAU,EAAE,CACb,KAEP,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACT,CACI,CACA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-pagination/voa-pagination-item.css?tag=voa-pagination-item&encapsulation=shadow","src/components/voa-pagination/voa-pagination-item.tsx"],"sourcesContent":[":host {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.base-button {\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 background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0;\r\n margin: 0;\r\n min-width: 32px;\r\n /* Structural minimums */\r\n height: 32px;\r\n}\r\n\r\n:host([type=\"ellipsis\"]) .content {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n}\r\n\r\n.icon-wrapper {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}","import { Component, Prop, h, Host, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-pagination-item',\r\n styleUrl: 'voa-pagination-item.css',\r\n shadow: true,\r\n})\r\nexport class VoaPaginationItem {\r\n @Element() host: HTMLElement;\r\n\r\n /**\r\n * The type of item to render.\r\n * - page: A standard page number\r\n * - ellipsis: The \"...\" separator\r\n * - prev/next: Navigation arrows\r\n */\r\n @Prop({ reflect: true }) type: 'page' | 'ellipsis' | 'prev' | 'next' = 'page';\r\n\r\n /**\r\n * Is this the current active page?\r\n */\r\n @Prop({ reflect: true }) active: boolean = false;\r\n\r\n /**\r\n * Is this item disabled?\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n @Event() itemClick: EventEmitter<void>;\r\n\r\n private handleClick = () => {\r\n if (!this.disabled && this.type !== 'ellipsis') {\r\n this.itemClick.emit();\r\n }\r\n };\r\n\r\n private renderIcon() {\r\n if (this.type === 'prev') {\r\n return (\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"15 18 9 12 15 6\"></polyline>\r\n </svg>\r\n );\r\n }\r\n if (this.type === 'next') {\r\n return (\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n </svg>\r\n );\r\n }\r\n return null;\r\n }\r\n\r\n render() {\r\n // Ellipsis are not interactive\r\n if (this.type === 'ellipsis') {\r\n return (\r\n <Host aria-hidden=\"true\">\r\n <div part=\"content\" class=\"content\">...</div>\r\n </Host>\r\n );\r\n }\r\n\r\n return (\r\n <Host\r\n onClick={this.handleClick}\r\n aria-current={this.active ? 'page' : undefined}\r\n aria-disabled={this.disabled ? 'true' : undefined}\r\n >\r\n <button\r\n type=\"button\"\r\n part=\"base\"\r\n class=\"base-button\"\r\n disabled={this.disabled}\r\n tabIndex={this.disabled ? -1 : 0}\r\n >\r\n <span part=\"content\" class=\"content\">\r\n {(this.type === 'prev' || this.type === 'next') ? (\r\n <span part=\"icon\" class=\"icon-wrapper\">\r\n {this.renderIcon()}\r\n </span>\r\n ) : (\r\n <slot />\r\n )}\r\n </span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"voa-accordion.js","mappings":"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","names":["VoaAccordion","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-accordion/voa-accordion.css?tag=voa-accordion&encapsulation=shadow","src/components/voa-accordion/voa-accordion.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.voa-accordion {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.voa-accordion__trigger {\r\n appearance: none;\r\n background: transparent;\r\n border: none;\r\n width: 100%;\r\n padding: 0;\r\n cursor: pointer;\r\n text-align: left;\r\n}\r\n\r\n.voa-accordion__header-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n}\r\n\r\n.voa-accordion__title {\r\n flex-grow: 1;\r\n}\r\n\r\n.voa-accordion__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n /* Removed fixed width/height. Let the SVG or the Part define it. */\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ============================================\r\n ANIMATION ARCHITECTURE\r\n ============================================\r\n \r\n This component uses CSS Grid to enable smooth height animations.\r\n \r\n STRUCTURAL (Internal CSS):\r\n - Sets up grid context: display: grid; grid-template-rows: 1fr;\r\n - Provides .voa-accordion__content-inner wrapper for height calculation\r\n \r\n ANIMATION (External CSS):\r\n - Consumer controls transition timing via ::part(content)\r\n - Consumer defines closed state: grid-template-rows: 0fr;\r\n - Consumer handles prefers-reduced-motion\r\n \r\n Why? Performance, Accessibility, and Brand Flexibility.\r\n ============================================ */\r\n\r\n.voa-accordion__content {\r\n /* STRUCTURAL PREP FOR ANIMATION */\r\n display: grid;\r\n \r\n /* Default state is open structurally to allow the 'fr' transition to work.\r\n We control the 'closed' state via the grid-template-rows property. */\r\n grid-template-rows: 1fr;\r\n \r\n /* IMPORTANT: We do NOT use display: none here.\r\n If we did, the external CSS couldn't animate the opening. */\r\n}\r\n\r\n.voa-accordion__content-inner {\r\n /* This inner wrapper is required for the grid trick to work.\r\n The parent animates the grid track, this container calculates the height. */\r\n overflow: hidden;\r\n min-height: 0;\r\n}","import { Component, h, Prop, State, Event, EventEmitter, Method, Element, Host, Watch } from '@stencil/core';\r\n\r\n// Helper for unique IDs\r\nlet accordionIds = 0;\r\n\r\n@Component({\r\n tag: 'voa-accordion',\r\n styleUrl: 'voa-accordion.css',\r\n shadow: true,\r\n})\r\nexport class VoaAccordion {\r\n @Element() host: HTMLVoaAccordionElement;\r\n\r\n private componentId = `voa-accordion-${accordionIds++}`;\r\n\r\n /**\r\n * If true, the accordion is expanded.\r\n */\r\n @Prop({ reflect: true }) open: boolean = false;\r\n\r\n /**\r\n * Size variant.\r\n */\r\n @Prop({ reflect: true }) size: 'md' | 'lg' = 'md';\r\n\r\n /**\r\n * Shows the top divider.\r\n */\r\n @Prop({ reflect: true }) divider: boolean = true;\r\n\r\n /**\r\n * Emitted when the user interacts with the header.\r\n * Payload: the requested new state (boolean).\r\n */\r\n @Event() voaToggle: EventEmitter<boolean>;\r\n\r\n // Internal state ensures the component works even if the parent doesn't update the prop immediately\r\n @State() isExpanded: boolean = false;\r\n\r\n @Watch('open')\r\n watchOpenHandler(newValue: boolean) {\r\n this.isExpanded = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.isExpanded = this.open;\r\n }\r\n\r\n private handleToggle = () => {\r\n // Invert internal state immediately for UI responsiveness\r\n this.isExpanded = !this.isExpanded;\r\n // Update the open prop to reflect in the DOM attribute (for CSS selectors)\r\n this.open = this.isExpanded;\r\n // Tell the world what happened\r\n this.voaToggle.emit(this.isExpanded);\r\n };\r\n\r\n private handleKeyDown = (ev: KeyboardEvent) => {\r\n if (ev.key === 'Enter' || ev.key === ' ') {\r\n ev.preventDefault();\r\n this.handleToggle();\r\n }\r\n };\r\n\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const button = this.host.shadowRoot?.querySelector('button');\r\n button?.focus();\r\n }\r\n\r\n render() {\r\n const headerId = `${this.componentId}-header`;\r\n const contentId = `${this.componentId}-content`;\r\n\r\n return (\r\n <Host>\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'voa-accordion': true,\r\n [`voa-accordion--${this.size}`]: true,\r\n 'voa-accordion--open': this.isExpanded,\r\n 'voa-accordion--closed': !this.isExpanded,\r\n 'voa-accordion--divider': this.divider,\r\n }}\r\n >\r\n {/* Header wraps a button for semantics */}\r\n <div class=\"voa-accordion__header-wrapper\">\r\n <button\r\n part=\"header\"\r\n id={headerId}\r\n class=\"voa-accordion__trigger\"\r\n onClick={this.handleToggle}\r\n onKeyDown={this.handleKeyDown}\r\n aria-expanded={this.isExpanded ? 'true' : 'false'}\r\n aria-controls={contentId}\r\n >\r\n <div part=\"header-content\" class=\"voa-accordion__header-content\">\r\n <span part=\"title\" class=\"voa-accordion__title\">\r\n <slot name=\"header\">Title</slot>\r\n </span>\r\n\r\n {/* ICON SLOT: Allows external replacement */}\r\n <span part=\"icon\" class=\"voa-accordion__icon\">\r\n <slot name=\"icon\">\r\n {/* Default Fallback Icon (Chevron) */}\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n style={{\r\n transform: this.isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'\r\n }}\r\n >\r\n <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </slot>\r\n </span>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n {/* CONTENT: Kept in DOM for animation support via CSS Grid Trick */}\r\n <div\r\n part=\"content\"\r\n id={contentId}\r\n class=\"voa-accordion__content\"\r\n role=\"region\"\r\n aria-labelledby={headerId}\r\n aria-hidden={!this.isExpanded ? 'true' : 'false'}\r\n >\r\n <div class=\"voa-accordion__content-inner\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}
|
|
1
|
+
{"file":"voa-accordion.js","mappings":"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","names":["VoaAccordion","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-accordion/voa-accordion.css?tag=voa-accordion&encapsulation=shadow","src/components/voa-accordion/voa-accordion.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.voa-accordion {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.voa-accordion__trigger {\r\n appearance: none;\r\n background: transparent;\r\n border: none;\r\n width: 100%;\r\n padding: 0;\r\n cursor: pointer;\r\n text-align: left;\r\n}\r\n\r\n.voa-accordion__header-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n}\r\n\r\n.voa-accordion__title {\r\n flex-grow: 1;\r\n}\r\n\r\n.voa-accordion__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n /* Removed fixed width/height. Let the SVG or the Part define it. */\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ============================================\r\n ANIMATION ARCHITECTURE\r\n ============================================\r\n \r\n This component uses CSS Grid to enable smooth height animations.\r\n \r\n STRUCTURAL (Internal CSS):\r\n - Sets up grid context: display: grid; grid-template-rows: 1fr;\r\n - Provides .voa-accordion__content-inner wrapper for height calculation\r\n \r\n ANIMATION (External CSS):\r\n - Consumer controls transition timing via ::part(content)\r\n - Consumer defines closed state: grid-template-rows: 0fr;\r\n - Consumer handles prefers-reduced-motion\r\n \r\n Why? Performance, Accessibility, and Brand Flexibility.\r\n ============================================ */\r\n\r\n.voa-accordion__content {\r\n /* STRUCTURAL PREP FOR ANIMATION */\r\n display: grid;\r\n \r\n /* Default state is open structurally to allow the 'fr' transition to work.\r\n We control the 'closed' state via the grid-template-rows property. */\r\n grid-template-rows: 1fr;\r\n \r\n /* IMPORTANT: We do NOT use display: none here.\r\n If we did, the external CSS couldn't animate the opening. */\r\n}\r\n\r\n.voa-accordion__content-inner {\r\n /* This inner wrapper is required for the grid trick to work.\r\n The parent animates the grid track, this container calculates the height. */\r\n overflow: hidden;\r\n min-height: 0;\r\n}","import { Component, h, Prop, State, Event, EventEmitter, Method, Element, Host, Watch } from '@stencil/core';\r\n\r\n// Helper for unique IDs\r\nlet accordionIds = 0;\r\n\r\n@Component({\r\n tag: 'voa-accordion',\r\n styleUrl: 'voa-accordion.css',\r\n shadow: true,\r\n})\r\nexport class VoaAccordion {\r\n @Element() host: HTMLVoaAccordionElement;\r\n\r\n private componentId = `voa-accordion-${accordionIds++}`;\r\n\r\n /**\r\n * If true, the accordion is expanded.\r\n */\r\n @Prop({ reflect: true }) open: boolean = false;\r\n\r\n /**\r\n * Size variant.\r\n */\r\n @Prop({ reflect: true }) size: 'md' | 'lg' = 'md';\r\n\r\n /**\r\n * Shows the top divider.\r\n */\r\n @Prop({ reflect: true }) divider: boolean = true;\r\n\r\n /**\r\n * Emitted when the user interacts with the header.\r\n * Payload: the requested new state (boolean).\r\n */\r\n @Event() voaToggle: EventEmitter<boolean>;\r\n\r\n // Internal state ensures the component works even if the parent doesn't update the prop immediately\r\n @State() isExpanded: boolean = false;\r\n\r\n @Watch('open')\r\n watchOpenHandler(newValue: boolean) {\r\n this.isExpanded = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.isExpanded = this.open;\r\n }\r\n\r\n private handleToggle = () => {\r\n // Invert internal state immediately for UI responsiveness\r\n this.isExpanded = !this.isExpanded;\r\n // Update the open prop to reflect in the DOM attribute (for CSS selectors)\r\n this.open = this.isExpanded;\r\n // Tell the world what happened\r\n this.voaToggle.emit(this.isExpanded);\r\n };\r\n\r\n private handleKeyDown = (ev: KeyboardEvent) => {\r\n if (ev.key === 'Enter' || ev.key === ' ') {\r\n ev.preventDefault();\r\n this.handleToggle();\r\n }\r\n };\r\n\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const button = this.host.shadowRoot?.querySelector('button');\r\n button?.focus();\r\n }\r\n\r\n render() {\r\n const headerId = `${this.componentId}-header`;\r\n const contentId = `${this.componentId}-content`;\r\n\r\n return (\r\n <Host>\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'voa-accordion': true,\r\n [`voa-accordion--${this.size}`]: true,\r\n 'voa-accordion--open': this.isExpanded,\r\n 'voa-accordion--closed': !this.isExpanded,\r\n 'voa-accordion--divider': this.divider,\r\n }}\r\n >\r\n {/* Header wraps a button for semantics */}\r\n <div class=\"voa-accordion__header-wrapper\">\r\n <button\r\n part=\"header\"\r\n id={headerId}\r\n class=\"voa-accordion__trigger\"\r\n onClick={this.handleToggle}\r\n onKeyDown={this.handleKeyDown}\r\n aria-expanded={this.isExpanded ? 'true' : 'false'}\r\n aria-controls={contentId}\r\n >\r\n <div part=\"header-content\" class=\"voa-accordion__header-content\">\r\n <span part=\"title\" class=\"voa-accordion__title\">\r\n <slot name=\"header\">Title</slot>\r\n </span>\r\n\r\n {/* ICON SLOT: Allows external replacement */}\r\n <span part=\"icon\" class=\"voa-accordion__icon\">\r\n <slot name=\"icon\">\r\n {/* Default Fallback Icon (Chevron) */}\r\n <svg\r\n width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n style={{\r\n transform: this.isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'\r\n }}\r\n >\r\n <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </slot>\r\n </span>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n {/* CONTENT: Kept in DOM for animation support via CSS Grid Trick */}\r\n <div\r\n part=\"content\"\r\n id={contentId}\r\n class=\"voa-accordion__content\"\r\n role=\"region\"\r\n aria-labelledby={headerId}\r\n aria-hidden={!this.isExpanded ? 'true' : 'false'}\r\n >\r\n <div class=\"voa-accordion__content-inner\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
|
|
2
2
|
import { g as getAlertIcon } from './p-Cp28eWhS.js';
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-BlenktuI.js';
|
|
4
4
|
|
|
5
5
|
const voaAlertCss = ":host{display:block;box-sizing:border-box;width:100%}.alert-container{display:flex;flex-direction:column;position:relative;box-sizing:border-box;width:100%}.alert-inline{flex-direction:row;align-items:center}.content-wrapper{display:flex;align-items:flex-start;flex:1;width:100%;box-sizing:border-box}.alert-inline .content-wrapper{align-items:center}.alert-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.content{flex:1;display:flex;flex-direction:column;box-sizing:border-box;min-width:0;}.alert-inline .content{flex-direction:row;align-items:center}.text-group{display:flex;flex-direction:column}.close-button{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;margin:0;flex-shrink:0}.actions-wrapper{display:flex;justify-content:flex-end;align-items:center;width:100%;box-sizing:border-box;flex-wrap:wrap}";
|
|
6
6
|
|
|
@@ -100,7 +100,6 @@ function defineCustomElement$1() {
|
|
|
100
100
|
break;
|
|
101
101
|
} });
|
|
102
102
|
}
|
|
103
|
-
defineCustomElement$1();
|
|
104
103
|
|
|
105
104
|
const VoaAlert = VoaAlert$1;
|
|
106
105
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"voa-alert.js","mappings":"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","names":["VoaAlert","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-alert/voa-alert.css?tag=voa-alert&encapsulation=shadow","src/components/voa-alert/voa-alert.tsx"],"sourcesContent":["/* UNSTYLED PATTERN: Structural Only */\r\n\r\n:host {\r\n display: block;\r\n box-sizing: border-box;\r\n width: 100%;\r\n}\r\n\r\n.alert-container {\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n box-sizing: border-box;\r\n width: 100%;\r\n}\r\n\r\n.alert-inline {\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.content-wrapper {\r\n display: flex;\r\n align-items: flex-start;\r\n flex: 1;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.alert-inline .content-wrapper {\r\n align-items: center;\r\n}\r\n\r\n.alert-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.content {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n min-width: 0; /* Prevents text overflow issues */\r\n}\r\n\r\n.alert-inline .content {\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.text-group {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.close-button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0;\r\n margin: 0;\r\n flex-shrink: 0;\r\n}\r\n\r\n.actions-wrapper {\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n width: 100%;\r\n box-sizing: border-box;\r\n flex-wrap: wrap;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, Element, Method, Host } from '@stencil/core';\r\nimport { getAlertIcon } from '../../utils/icons';\r\n\r\n/**\r\n * O componente voa-alert é usado para exibir mensagens importantes para o usuário.\r\n * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.\r\n * Suporta variantes default (layout vertical) e inline (layout horizontal).\r\n * \r\n * @part base - O elemento raiz do alerta\r\n * @part content-wrapper - Wrapper do conteúdo principal\r\n * @part icon - Container do ícone\r\n * @part content - Container do conteúdo (slot padrão)\r\n * @part title - Container do título\r\n * @part description - Container da descrição\r\n * @part close-button - Botão de fechar\r\n * @part actions - Container dos botões de ação\r\n * @part primary-btn-base - Expõe o part \"base\" do botão primário para estilização externa\r\n * @part secondary-btn-base - Expõe o part \"base\" do botão secundário para estilização externa\r\n */\r\n@Component({\r\n tag: 'voa-alert',\r\n styleUrl: 'voa-alert.css',\r\n shadow: true,\r\n})\r\nexport class VoaAlert {\r\n @Element() host: HTMLVoaAlertElement;\r\n\r\n /**\r\n * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal).\r\n * Padrão é 'default'.\r\n */\r\n @Prop({ reflect: true }) variant: 'default' | 'inline' = 'default';\r\n\r\n /**\r\n * O tipo de alerta a ser exibido. Influencia a cor e o ícone.\r\n * Padrão é 'info'.\r\n */\r\n @Prop({ reflect: true }) type: 'basic' | 'success' | 'warning' | 'warning-inline' | 'error' | 'info' = 'info';\r\n\r\n /**\r\n * Determina se o alerta pode ser fechado pelo usuário.\r\n */\r\n @Prop() closable: boolean = false;\r\n\r\n /**\r\n * Texto do rótulo para o botão de fechar, para acessibilidade.\r\n * Padrão é \"Fechar alerta\".\r\n */\r\n @Prop() closeButtonLabel: string = 'Fechar alerta';\r\n\r\n /**\r\n * Título do alerta. Quando fornecido, será exibido como título principal.\r\n * Para variant inline, apenas o título é exibido.\r\n */\r\n @Prop() alertTitle?: string;\r\n\r\n /**\r\n * Descrição do alerta. Apenas exibida na variante default.\r\n */\r\n @Prop() description?: string;\r\n\r\n /**\r\n * Determina se os botões devem ser exibidos.\r\n * Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido).\r\n * Se false, os botões não serão exibidos, independente das outras props.\r\n */\r\n @Prop() showButtons: boolean = false;\r\n\r\n /**\r\n * Texto do botão primário. Só será exibido se showButtons for true.\r\n */\r\n @Prop() primaryButtonText?: string;\r\n\r\n /**\r\n * Texto do botão secundário. Só será exibido se showButtons for true e primaryButtonText também for fornecido.\r\n */\r\n @Prop() secondaryButtonText?: string;\r\n\r\n /**\r\n * Evento emitido quando o alerta é dispensado (fechado).\r\n */\r\n @Event() voaDismiss: EventEmitter<void>;\r\n\r\n /**\r\n * Evento emitido quando o botão primário é clicado.\r\n */\r\n @Event() voaPrimaryClick: EventEmitter<void>;\r\n\r\n /**\r\n * Evento emitido quando o botão secundário é clicado.\r\n */\r\n @Event() voaSecondaryClick: EventEmitter<void>;\r\n\r\n /**\r\n * Método para acessibilidade WCAG 2.2 AA\r\n * Delega foco ao botão de fechar se existir\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const closeBtn = this.host.shadowRoot?.querySelector('[part=\"close-button\"]') as HTMLElement;\r\n if (closeBtn) {\r\n closeBtn.focus();\r\n }\r\n }\r\n\r\n private handleClose = (e: Event) => {\r\n e.stopPropagation();\r\n this.voaDismiss.emit();\r\n };\r\n\r\n private renderIcon() {\r\n const iconType = this.variant === 'inline' && this.type === 'warning' ? 'warning-inline' : this.type;\r\n const IconComponent = getAlertIcon(iconType, this.variant);\r\n \r\n return (\r\n <div part=\"icon\" class=\"alert-icon\">\r\n <IconComponent />\r\n </div>\r\n );\r\n }\r\n\r\n render() {\r\n const hasButtons = this.variant === 'default' && this.showButtons && !!this.primaryButtonText;\r\n\r\n return (\r\n <Host \r\n role=\"alert\" \r\n aria-hidden={!this.closable ? null : \"false\"}\r\n >\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'alert-container': true,\r\n [`alert-${this.variant}`]: true,\r\n [`alert-type-${this.type}`]: true\r\n }}\r\n >\r\n <div part=\"content-wrapper\" class=\"content-wrapper\">\r\n {this.renderIcon()}\r\n \r\n <div part=\"content\" class=\"content\">\r\n {(this.alertTitle || this.description) ? (\r\n <div class=\"text-group\">\r\n {this.alertTitle && <div part=\"title\" class=\"title\">{this.alertTitle}</div>}\r\n {this.variant === 'default' && this.description && (\r\n <div part=\"description\" class=\"description\">{this.description}</div>\r\n )}\r\n </div>\r\n ) : (\r\n <slot />\r\n )}\r\n </div>\r\n\r\n {this.closable && (\r\n <button\r\n part=\"close-button\"\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={this.handleClose}\r\n aria-label={this.closeButtonLabel}\r\n >\r\n {getAlertIcon('close', this.variant)()}\r\n </button>\r\n )}\r\n </div>\r\n\r\n {/* Action Buttons */}\r\n {hasButtons && (\r\n <div part=\"actions\" class=\"actions-wrapper\">\r\n {this.secondaryButtonText && (\r\n <voa-button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onDsClick={() => this.voaSecondaryClick.emit()}\r\n exportparts=\"base: secondary-btn-base\" \r\n >\r\n {this.secondaryButtonText}\r\n </voa-button>\r\n )}\r\n \r\n <voa-button\r\n variant=\"primary\"\r\n size=\"sm\"\r\n onDsClick={() => this.voaPrimaryClick.emit()}\r\n exportparts=\"base: primary-btn-base\"\r\n >\r\n {this.primaryButtonText}\r\n </voa-button>\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n} "],"version":3}
|
|
1
|
+
{"file":"voa-alert.js","mappings":"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","names":["VoaAlert","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-alert/voa-alert.css?tag=voa-alert&encapsulation=shadow","src/components/voa-alert/voa-alert.tsx"],"sourcesContent":["/* UNSTYLED PATTERN: Structural Only */\r\n\r\n:host {\r\n display: block;\r\n box-sizing: border-box;\r\n width: 100%;\r\n}\r\n\r\n.alert-container {\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n box-sizing: border-box;\r\n width: 100%;\r\n}\r\n\r\n.alert-inline {\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.content-wrapper {\r\n display: flex;\r\n align-items: flex-start;\r\n flex: 1;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n.alert-inline .content-wrapper {\r\n align-items: center;\r\n}\r\n\r\n.alert-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.content {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n min-width: 0; /* Prevents text overflow issues */\r\n}\r\n\r\n.alert-inline .content {\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.text-group {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.close-button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0;\r\n margin: 0;\r\n flex-shrink: 0;\r\n}\r\n\r\n.actions-wrapper {\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n width: 100%;\r\n box-sizing: border-box;\r\n flex-wrap: wrap;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, Element, Method, Host } from '@stencil/core';\r\nimport { getAlertIcon } from '../../utils/icons';\r\n\r\n/**\r\n * O componente voa-alert é usado para exibir mensagens importantes para o usuário.\r\n * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.\r\n * Suporta variantes default (layout vertical) e inline (layout horizontal).\r\n * \r\n * @part base - O elemento raiz do alerta\r\n * @part content-wrapper - Wrapper do conteúdo principal\r\n * @part icon - Container do ícone\r\n * @part content - Container do conteúdo (slot padrão)\r\n * @part title - Container do título\r\n * @part description - Container da descrição\r\n * @part close-button - Botão de fechar\r\n * @part actions - Container dos botões de ação\r\n * @part primary-btn-base - Expõe o part \"base\" do botão primário para estilização externa\r\n * @part secondary-btn-base - Expõe o part \"base\" do botão secundário para estilização externa\r\n */\r\n@Component({\r\n tag: 'voa-alert',\r\n styleUrl: 'voa-alert.css',\r\n shadow: true,\r\n})\r\nexport class VoaAlert {\r\n @Element() host: HTMLVoaAlertElement;\r\n\r\n /**\r\n * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal).\r\n * Padrão é 'default'.\r\n */\r\n @Prop({ reflect: true }) variant: 'default' | 'inline' = 'default';\r\n\r\n /**\r\n * O tipo de alerta a ser exibido. Influencia a cor e o ícone.\r\n * Padrão é 'info'.\r\n */\r\n @Prop({ reflect: true }) type: 'basic' | 'success' | 'warning' | 'warning-inline' | 'error' | 'info' = 'info';\r\n\r\n /**\r\n * Determina se o alerta pode ser fechado pelo usuário.\r\n */\r\n @Prop() closable: boolean = false;\r\n\r\n /**\r\n * Texto do rótulo para o botão de fechar, para acessibilidade.\r\n * Padrão é \"Fechar alerta\".\r\n */\r\n @Prop() closeButtonLabel: string = 'Fechar alerta';\r\n\r\n /**\r\n * Título do alerta. Quando fornecido, será exibido como título principal.\r\n * Para variant inline, apenas o título é exibido.\r\n */\r\n @Prop() alertTitle?: string;\r\n\r\n /**\r\n * Descrição do alerta. Apenas exibida na variante default.\r\n */\r\n @Prop() description?: string;\r\n\r\n /**\r\n * Determina se os botões devem ser exibidos.\r\n * Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido).\r\n * Se false, os botões não serão exibidos, independente das outras props.\r\n */\r\n @Prop() showButtons: boolean = false;\r\n\r\n /**\r\n * Texto do botão primário. Só será exibido se showButtons for true.\r\n */\r\n @Prop() primaryButtonText?: string;\r\n\r\n /**\r\n * Texto do botão secundário. Só será exibido se showButtons for true e primaryButtonText também for fornecido.\r\n */\r\n @Prop() secondaryButtonText?: string;\r\n\r\n /**\r\n * Evento emitido quando o alerta é dispensado (fechado).\r\n */\r\n @Event() voaDismiss: EventEmitter<void>;\r\n\r\n /**\r\n * Evento emitido quando o botão primário é clicado.\r\n */\r\n @Event() voaPrimaryClick: EventEmitter<void>;\r\n\r\n /**\r\n * Evento emitido quando o botão secundário é clicado.\r\n */\r\n @Event() voaSecondaryClick: EventEmitter<void>;\r\n\r\n /**\r\n * Método para acessibilidade WCAG 2.2 AA\r\n * Delega foco ao botão de fechar se existir\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const closeBtn = this.host.shadowRoot?.querySelector('[part=\"close-button\"]') as HTMLElement;\r\n if (closeBtn) {\r\n closeBtn.focus();\r\n }\r\n }\r\n\r\n private handleClose = (e: Event) => {\r\n e.stopPropagation();\r\n this.voaDismiss.emit();\r\n };\r\n\r\n private renderIcon() {\r\n const iconType = this.variant === 'inline' && this.type === 'warning' ? 'warning-inline' : this.type;\r\n const IconComponent = getAlertIcon(iconType, this.variant);\r\n \r\n return (\r\n <div part=\"icon\" class=\"alert-icon\">\r\n <IconComponent />\r\n </div>\r\n );\r\n }\r\n\r\n render() {\r\n const hasButtons = this.variant === 'default' && this.showButtons && !!this.primaryButtonText;\r\n\r\n return (\r\n <Host \r\n role=\"alert\" \r\n aria-hidden={!this.closable ? null : \"false\"}\r\n >\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'alert-container': true,\r\n [`alert-${this.variant}`]: true,\r\n [`alert-type-${this.type}`]: true\r\n }}\r\n >\r\n <div part=\"content-wrapper\" class=\"content-wrapper\">\r\n {this.renderIcon()}\r\n \r\n <div part=\"content\" class=\"content\">\r\n {(this.alertTitle || this.description) ? (\r\n <div class=\"text-group\">\r\n {this.alertTitle && <div part=\"title\" class=\"title\">{this.alertTitle}</div>}\r\n {this.variant === 'default' && this.description && (\r\n <div part=\"description\" class=\"description\">{this.description}</div>\r\n )}\r\n </div>\r\n ) : (\r\n <slot />\r\n )}\r\n </div>\r\n\r\n {this.closable && (\r\n <button\r\n part=\"close-button\"\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={this.handleClose}\r\n aria-label={this.closeButtonLabel}\r\n >\r\n {getAlertIcon('close', this.variant)()}\r\n </button>\r\n )}\r\n </div>\r\n\r\n {/* Action Buttons */}\r\n {hasButtons && (\r\n <div part=\"actions\" class=\"actions-wrapper\">\r\n {this.secondaryButtonText && (\r\n <voa-button\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n onDsClick={() => this.voaSecondaryClick.emit()}\r\n exportparts=\"base: secondary-btn-base\" \r\n >\r\n {this.secondaryButtonText}\r\n </voa-button>\r\n )}\r\n \r\n <voa-button\r\n variant=\"primary\"\r\n size=\"sm\"\r\n onDsClick={() => this.voaPrimaryClick.emit()}\r\n exportparts=\"base: primary-btn-base\"\r\n >\r\n {this.primaryButtonText}\r\n </voa-button>\r\n </div>\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n} "],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"voa-avatar.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ugCAAugC;;MCoB/gCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,MAAM;AAEpD;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAqC,IAAI;AA2FtD;AA1EC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;;AACZ,QAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,eAAe,CAAgB;QACrF,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,EAAE;;;IAIb,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,OAAO,IAAI,CAAC,GAAG;;QAEjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AAC7C,YAAA,OAAO,CAAuB,oBAAA,EAAA,IAAI,CAAC,QAAQ,EAAE;;QAE/C,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE;AACrC,YAAA,OAAO,2BAA2B;;AAEpC,QAAA,OAAO,mBAAmB;;IAGpB,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,OAAO;AACV,gBAAA,IAAI,IAAI,CAAC,GAAG,EAAE;oBACZ,OAAO,WAAK,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,QAAQ,GAAI;;;AAGvE,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAE1B,YAAA,KAAK,UAAU;AACb,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,oBAAA,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,UAAU,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAQ;;;AAG7E,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAE1B,YAAA,KAAK,MAAM;AACX,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;;;IAItB,UAAU,GAAA;AAChB,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,EAAA,EAC7F,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,+GAA+G,EAAE,CAAA,CACrH;;IAIV,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EACE,YAAA,EAAA,IAAI,CAAC,YAAY,EAAE,EAAA,EAE/B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAClC,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;aACnC,EAAA,EAEA,IAAI,CAAC,aAAa,EAAE,CACjB,CACD
|
|
1
|
+
{"file":"voa-avatar.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ugCAAugC;;MCoB/gCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,MAAM;AAEpD;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAqC,IAAI;AA2FtD;AA1EC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;;AACZ,QAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,eAAe,CAAgB;QACrF,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,EAAE;;;IAIb,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,OAAO,IAAI,CAAC,GAAG;;QAEjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,EAAE;AAC7C,YAAA,OAAO,CAAuB,oBAAA,EAAA,IAAI,CAAC,QAAQ,EAAE;;QAE/C,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE;AACrC,YAAA,OAAO,2BAA2B;;AAEpC,QAAA,OAAO,mBAAmB;;IAGpB,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,OAAO;AACV,gBAAA,IAAI,IAAI,CAAC,GAAG,EAAE;oBACZ,OAAO,WAAK,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,QAAQ,GAAI;;;AAGvE,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAE1B,YAAA,KAAK,UAAU;AACb,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,oBAAA,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,UAAU,EAAE,EAAA,IAAI,CAAC,QAAQ,CAAQ;;;AAG7E,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAE1B,YAAA,KAAK,MAAM;AACX,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;;;IAItB,UAAU,GAAA;AAChB,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,iBAAa,MAAM,EAAA,EAC7F,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,+GAA+G,EAAE,CAAA,CACrH;;IAIV,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EACH,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EACE,YAAA,EAAA,IAAI,CAAC,YAAY,EAAE,EAAA,EAE/B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAClC,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;aACnC,EAAA,EAEA,IAAI,CAAC,aAAa,EAAE,CACjB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaAvatar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-avatar/voa-avatar.css?tag=voa-avatar&encapsulation=shadow","src/components/voa-avatar/voa-avatar.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 * Design Tokens utilizados (aplicados externamente):\r\n * - --structure-colors-bg-elevated: Background do avatar (✅ existe em voa-tokens.css)\r\n * - --text-primary: Cor do texto/iniciais (✅ existe em voa-tokens.css, valor: #0b1215)\r\n * - --spacing-spacing-md: 16px (xs) (✅ existe em voa-tokens.css)\r\n * - --spacing-spacing-lg: 24px (sm) (✅ existe em voa-tokens.css)\r\n * - --spacing-spacing-xl: 32px (md) (✅ existe em voa-tokens.css)\r\n * - --spacing-spacing-xxl: 48px (lg) (✅ existe em voa-tokens.css)\r\n * - --spacing-spacing-xxxl: 56px (xl) (✅ existe em voa-tokens.css)\r\n * - --radius-round: Border-radius circular (✅ existe em voa-tokens.css, valor: 64rem)\r\n * \r\n * Exemplo de estilização externa:\r\n * voa-avatar::part(base) {\r\n * background-color: var(--structure-colors-bg-elevated);\r\n * border-radius: var(--radius-round);\r\n * }\r\n * voa-avatar::part(initials) {\r\n * color: var(--text-primary);\r\n * font-family: var(--font-family-body);\r\n * font-weight: var(--font-weight-semibold);\r\n * }\r\n */\r\n\r\n:host {\r\n display: inline-block;\r\n \r\n /* Definir variáveis CSS para tamanhos usando tokens semânticos */\r\n --avatar-size-xs: var(--spacing-spacing-md); /* 16px */\r\n --avatar-size-sm: var(--spacing-spacing-lg); /* 24px */\r\n --avatar-size-md: var(--spacing-spacing-xl); /* 32px */\r\n --avatar-size-lg: var(--spacing-spacing-xxl); /* 48px */\r\n --avatar-size-xl: var(--spacing-spacing-xxxl); /* 56px */\r\n}\r\n\r\n.voa-avatar {\r\n /* APENAS estilos estruturais */\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n box-sizing: border-box;\r\n /* Border-radius será aplicado externamente via tokens */\r\n}\r\n\r\n/* Tamanhos do Avatar - usando tokens semânticos */\r\n.voa-avatar--xs {\r\n width: var(--avatar-size-xs);\r\n height: var(--avatar-size-xs);\r\n}\r\n\r\n.voa-avatar--sm {\r\n width: var(--avatar-size-sm);\r\n height: var(--avatar-size-sm);\r\n}\r\n\r\n.voa-avatar--md {\r\n width: var(--avatar-size-md);\r\n height: var(--avatar-size-md);\r\n}\r\n\r\n.voa-avatar--lg {\r\n width: var(--avatar-size-lg);\r\n height: var(--avatar-size-lg);\r\n}\r\n\r\n.voa-avatar--xl {\r\n width: var(--avatar-size-xl);\r\n height: var(--avatar-size-xl);\r\n}\r\n\r\n/* Estilos estruturais para imagem */\r\n.voa-avatar img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Estilos estruturais para iniciais */\r\n.avatar-initials {\r\n display: inline-block;\r\n text-transform: uppercase;\r\n user-select: none;\r\n line-height: 1;\r\n box-sizing: border-box;\r\n /* Font-size, color, font-weight serão aplicados externamente via tokens */\r\n}\r\n\r\n/* Estilos estruturais para ícone */\r\n.avatar-icon {\r\n width: 60%;\r\n height: 60%;\r\n display: block;\r\n box-sizing: border-box;\r\n /* Color será aplicado externamente via tokens */\r\n} ","import { Component, Host, Prop, Element, Method, h } from '@stencil/core';\r\n\r\n/**\r\n * Componente Avatar do Voa Design System, baseado no design do Figma.\r\n * Suporta exibição de ícone, iniciais ou imagem de perfil.\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 elemento raiz do avatar (container circular)\r\n * @part image - O elemento de imagem (quando type=\"photo\" e src é fornecido)\r\n * @part initials - O wrapper do texto de iniciais (quando type=\"initials\")\r\n * @part icon - O wrapper do ícone SVG padrão (quando type=\"icon\")\r\n */\r\n@Component({\r\n tag: 'voa-avatar',\r\n styleUrl: 'voa-avatar.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaAvatar {\r\n @Element() host: HTMLVoaAvatarElement;\r\n\r\n /**\r\n * Tipo de avatar a ser exibido.\r\n * - 'icon': Exibe um ícone de usuário padrão\r\n * - 'photo': Exibe uma imagem (requer prop src)\r\n * - 'initials': Exibe iniciais de texto (requer prop initials)\r\n */\r\n @Prop() type: 'icon' | 'photo' | 'initials' = 'icon';\r\n\r\n /**\r\n * Tamanho do avatar.\r\n * Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)\r\n */\r\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\r\n\r\n /**\r\n * As iniciais a serem exibidas quando type=\"initials\".\r\n */\r\n @Prop() initials?: string;\r\n\r\n /**\r\n * URL da imagem do avatar quando type=\"photo\".\r\n */\r\n @Prop() src?: string;\r\n\r\n /**\r\n * Texto alternativo para a imagem do avatar.\r\n */\r\n @Prop() alt?: string;\r\n\r\n /**\r\n * Método para acessibilidade WCAG 2.2 AA.\r\n * Delega foco ao elemento interno do avatar.\r\n */\r\n @Method()\r\n async setFocus(): Promise<void> {\r\n const focusable = this.host.shadowRoot?.querySelector('[part=\"base\"]') as HTMLElement;\r\n if (focusable) {\r\n focusable.focus();\r\n }\r\n }\r\n\r\n private getAriaLabel(): string {\r\n if (this.alt) {\r\n return this.alt;\r\n }\r\n if (this.type === 'initials' && this.initials) {\r\n return `Avatar com iniciais ${this.initials}`;\r\n }\r\n if (this.type === 'photo' && this.src) {\r\n return 'Avatar com foto de perfil';\r\n }\r\n return 'Avatar de usuário';\r\n }\r\n\r\n private renderContent() {\r\n switch (this.type) {\r\n case 'photo':\r\n if (this.src) {\r\n return <img part=\"image\" src={this.src} alt={this.alt || 'Avatar'} />;\r\n }\r\n // Fallback para icon se src não fornecido\r\n return this.renderIcon();\r\n \r\n case 'initials':\r\n if (this.initials) {\r\n return <span class=\"avatar-initials\" part=\"initials\">{this.initials}</span>;\r\n }\r\n // Fallback para icon se initials não fornecido\r\n return this.renderIcon();\r\n \r\n case 'icon':\r\n default:\r\n return this.renderIcon();\r\n }\r\n }\r\n\r\n private renderIcon() {\r\n return (\r\n <svg class=\"avatar-icon\" part=\"icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/>\r\n </svg>\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n <Host\r\n role=\"img\"\r\n aria-label={this.getAriaLabel()}\r\n >\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'voa-avatar': true,\r\n [`voa-avatar--${this.size}`]: true,\r\n [`voa-avatar--${this.type}`]: true,\r\n }}\r\n >\r\n {this.renderContent()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n} "],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"voa-breadcrumbs-divider.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,kYAAkY;;MCmBtZA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AANlC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOE;;;AAGG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAsC,SAAS;AAqC7E;IAnCS,gBAAgB,GAAA;AACtB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,KAAK,CAAC,eAAe,CAAC;AAC/B,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,KAAK,CAAC,aAAa,CAAC;AAC7B,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,KAAK,CAAC,iBAAiB,CAAC;AACjC,YAAA;AACE,gBAAA,OAAO,KAAK,CAAC,eAAe,CAAC;;;IAInC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE;AAE7C,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,WAAW,iBACJ,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,CAAC,4BAA4B,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAChD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,+BAA+B,EAAA,EACrD,CAAA,CAAC,aAAa,EAAG,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACZ,CACH,CACD
|
|
1
|
+
{"file":"voa-breadcrumbs-divider.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,kYAAkY;;MCmBtZA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AANlC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOE;;;AAGG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAsC,SAAS;AAqC7E;IAnCS,gBAAgB,GAAA;AACtB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,KAAK,CAAC,eAAe,CAAC;AAC/B,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,KAAK,CAAC,aAAa,CAAC;AAC7B,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,KAAK,CAAC,iBAAiB,CAAC;AACjC,YAAA;AACE,gBAAA,OAAO,KAAK,CAAC,eAAe,CAAC;;;IAInC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE;AAE7C,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,WAAW,iBACJ,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,CAAC,4BAA4B,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAChD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,+BAA+B,EAAA,EACrD,CAAA,CAAC,aAAa,EAAG,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACZ,CACH,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbsDivider","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-breadcrumbs-divider/voa-breadcrumbs-divider.css?tag=voa-breadcrumbs-divider&encapsulation=shadow","src/components/voa-breadcrumbs-divider/voa-breadcrumbs-divider.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-flex;\r\n box-sizing: border-box;\r\n}\r\n\r\n.voa-breadcrumbs-divider {\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}\r\n\r\n.voa-breadcrumbs-divider__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n overflow: hidden;\r\n}\r\n\r\n/* Layout para o SVG interno */\r\n.voa-breadcrumbs-divider__icon svg {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n flex-shrink: 0;\r\n}\r\n\r\n","import { Component, Prop, h, Host } from '@stencil/core';\r\nimport { Icons } from '../../utils/icons';\r\n\r\n/**\r\n * Componente de divisor para breadcrumbs.\r\n * Baseado no design do Figma (node-id: 443-9825).\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 divisor\r\n * @part icon - O container do ícone SVG\r\n */\r\n@Component({\r\n tag: 'voa-breadcrumbs-divider',\r\n styleUrl: 'voa-breadcrumbs-divider.css',\r\n shadow: true,\r\n scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaBreadcrumbsDivider {\r\n /**\r\n * Tipo de ícone a ser exibido como divisor.\r\n * Mapeia as variantes do Figma: chevron, arrow, arrow-alt.\r\n */\r\n @Prop({ reflect: true }) icon: 'chevron' | 'arrow' | 'arrow-alt' = 'chevron';\r\n\r\n private getIconComponent() {\r\n switch (this.icon) {\r\n case 'chevron':\r\n return Icons['chevron-right'];\r\n case 'arrow':\r\n return Icons['arrow-right'];\r\n case 'arrow-alt':\r\n return Icons['arrow-right-alt'];\r\n default:\r\n return Icons['chevron-right'];\r\n }\r\n }\r\n\r\n render() {\r\n const IconComponent = this.getIconComponent();\r\n\r\n return (\r\n <Host\r\n role=\"separator\"\r\n aria-hidden=\"true\"\r\n >\r\n <div\r\n part=\"base\"\r\n class={{\r\n 'voa-breadcrumbs-divider': true,\r\n [`voa-breadcrumbs-divider--${this.icon}`]: true,\r\n }}\r\n >\r\n <span part=\"icon\" class=\"voa-breadcrumbs-divider__icon\">\r\n <IconComponent />\r\n </span>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"voa-breadcrumbs-item.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,woBAAwoB;;MCOzpBA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAmBE;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAyCjD;IAvCC,MAAM,GAAA;;AAEJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,MAAM;;AAGpD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS;AAEpD,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAGlC,CAAC,CAAA,GAAG,qDACF,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,cAAA,EACL,WAAW,EAAA,EAEzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAMN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,uBAAuB,iBAAa,MAAM,EAAA,EACpE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,EAEpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,EAC/I,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,gBAAgB,EAAY,CAAA,CACzC,CACD,CACH,CAEJ,CACA
|
|
1
|
+
{"file":"voa-breadcrumbs-item.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,woBAAwoB;;MCOzpBA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAmBE;;AAEG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAyCjD;IAvCC,MAAM,GAAA;;AAEJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,MAAM;;AAGpD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS;AAEpD,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAGlC,CAAC,CAAA,GAAG,qDACF,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,cAAA,EACL,WAAW,EAAA,EAEzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAMN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,uBAAuB,iBAAa,MAAM,EAAA,EACpE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAA,EAEpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,EAC/I,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,gBAAgB,EAAY,CAAA,CACzC,CACD,CACH,CAEJ,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbsItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-breadcrumbs-item/voa-breadcrumbs-item.css?tag=voa-breadcrumbs-item&encapsulation=shadow","src/components/voa-breadcrumbs-item/voa-breadcrumbs-item.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-flex;\r\n align-items: center;\r\n}\r\n\r\n.breadcrumbs-item-wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n.breadcrumbs-content {\r\n display: inline-flex;\r\n align-items: center;\r\n text-decoration: none;\r\n color: inherit;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n}\r\n\r\n/* Remove pointer events/cursor for active (current) item */\r\n.breadcrumbs-content[aria-current=\"page\"] {\r\n cursor: default;\r\n pointer-events: none; \r\n}\r\n\r\n.breadcrumbs-separator {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-inline: 0; /* Spacing handled via CSS Parts */\r\n user-select: none;\r\n}\r\n\r\n/* * CRITICAL: Hide separator on the last item.\r\n * Since we are inside Shadow DOM, :host(:last-child) refers to the \r\n * custom element itself within the parent's light DOM/slot context.\r\n */\r\n:host(:last-of-type) .breadcrumbs-separator {\r\n display: none;\r\n}\r\n\r\n/* Layout para o SVG interno do ícone */\r\n.voa-breadcrumbs-item__icon svg {\r\n display: block;\r\n width: 16px;\r\n height: 16px;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n flex-shrink: 0;\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-breadcrumbs-item',\r\n styleUrl: 'voa-breadcrumbs-item.css',\r\n shadow: true,\r\n})\r\nexport class VoaBreadcrumbsItem {\r\n @Element() host: HTMLElement;\r\n\r\n /**\r\n * HREF destination. If provided, renders an anchor tag.\r\n * If missing, renders a span (current page or static item).\r\n */\r\n @Prop() href?: string;\r\n\r\n /**\r\n * Target for the link (e.g., _blank)\r\n */\r\n @Prop() target?: string;\r\n\r\n /**\r\n * Is this the current/active page?\r\n */\r\n @Prop({ reflect: true }) active: boolean = false;\r\n\r\n render() {\r\n // Determine the tag type\r\n const Tag = this.href && !this.active ? 'a' : 'span';\r\n \r\n // Accessibility: Current page should rely on aria-current\r\n const ariaCurrent = this.active ? 'page' : undefined;\r\n\r\n return (\r\n <Host>\r\n <li class=\"breadcrumbs-item-wrapper\">\r\n \r\n {/* 1. The Content Part */}\r\n <Tag \r\n part=\"content\" \r\n class=\"breadcrumbs-content\"\r\n href={this.href}\r\n target={this.target}\r\n aria-current={ariaCurrent}\r\n >\r\n <slot />\r\n </Tag>\r\n\r\n {/* 2. The Separator Part \r\n We render it always, and hide it via CSS for the last item.\r\n This is much more robust than JS logic.\r\n */}\r\n <span part=\"separator\" class=\"breadcrumbs-separator\" aria-hidden=\"true\">\r\n <slot name=\"separator\">\r\n {/* Default Icon: Chevron Right */}\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n </svg>\r\n </slot>\r\n </span>\r\n\r\n </li>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"voa-breadcrumbs.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0NAA0N;;MCYvOA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAoC,SAAS;AAuB3E;IArBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAIH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,gBACA,YAAY,EACvB,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACxC,aAAA,EAAA,EAED,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACV,CACD,CACD
|
|
1
|
+
{"file":"voa-breadcrumbs.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0NAA0N;;MCYvOA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAoC,SAAS;AAuB3E;IArBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAIH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,gBACA,YAAY,EACvB,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACxC,aAAA,EAAA,EAED,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACV,CACD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaBreadcrumbs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-breadcrumbs/voa-breadcrumbs.css?tag=voa-breadcrumbs&encapsulation=shadow","src/components/voa-breadcrumbs/voa-breadcrumbs.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.voa-breadcrumbs {\r\n display: inline-block;\r\n box-sizing: border-box;\r\n}\r\n\r\n.breadcrumbs-list {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap; /* Breadcrumbs should wrap on small screens */\r\n margin: 0;\r\n padding: 0;\r\n list-style: none; /* Remove default list numbers */\r\n gap: 0; /* Gaps handled by items */\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n/**\r\n * Componente de breadcrumbs (navegação estrutural).\r\n * Baseado no design do Figma (node-id: 443-10022).\r\n * * @slot default - Items do breadcrumb (voa-breadcrumbs-item)\r\n */\r\n@Component({\r\n tag: 'voa-breadcrumbs',\r\n styleUrl: 'voa-breadcrumbs.css',\r\n shadow: true,\r\n})\r\nexport class VoaBreadcrumbs {\r\n @Element() host: HTMLVoaBreadcrumbsElement;\r\n\r\n /**\r\n * Variante visual do breadcrumb.\r\n */\r\n @Prop({ reflect: true }) type: 'default' | 'round' | 'outline' = 'default';\r\n\r\n render() {\r\n return (\r\n <Host>\r\n {/* Using <nav> and <ol> is the Semantic Standard for Breadcrumbs. \r\n Screen readers will announce \"Navigation, list, X items\".\r\n */}\r\n <nav\r\n part=\"base\"\r\n aria-label=\"Breadcrumb\"\r\n class={{\r\n 'voa-breadcrumbs': true,\r\n [`voa-breadcrumbs--${this.type}`]: true,\r\n }}\r\n >\r\n <ol part=\"list\" class=\"breadcrumbs-list\">\r\n <slot></slot>\r\n </ol>\r\n </nav>\r\n </Host>\r\n );\r\n }\r\n}\r\n\r\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"voa-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,8LAA8L;;MCOpMA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD
|
|
1
|
+
{"file":"voa-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,8LAA8L;;MCOpMA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;IAClB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACd,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,EAChB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACvB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["VoaCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-card/voa-card.css?tag=voa-card&encapsulation=shadow","src/components/voa-card/voa-card.tsx"],"sourcesContent":[":host {\r\n display: block;\r\n}\r\n\r\n[part=\"base\"] {\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n[part=\"header\"] {\r\n display: block;\r\n}\r\n\r\n[part=\"body\"] {\r\n flex: 1;\r\n display: block;\r\n}\r\n\r\n[part=\"footer\"] {\r\n display: block;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'voa-card',\r\n styleUrl: 'voa-card.css',\r\n shadow: true,\r\n})\r\nexport class VoaCard {\r\n render() {\r\n return (\r\n <Host>\r\n <div part=\"base\">\r\n <div part=\"header\">\r\n <slot name=\"header\"></slot>\r\n </div>\r\n <div part=\"body\">\r\n <slot></slot>\r\n </div>\r\n <div part=\"footer\">\r\n <slot name=\"footer\"></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|