@praxisui/stepper 3.0.0-beta.0 → 3.0.0-beta.10

package/fesm2022/praxisui-stepper.mjs

@@ -9,7 +9,7 @@ import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { IconPickerService, PraxisIconDirective, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, LoggerService, DynamicWidgetLoaderDirective, EmptyStateCardComponent, EDITORIAL_WIDGET_TAG, ComponentMetadataRegistry, createCorporateLoggerConfig, ConsoleLoggerSink, CONFIG_STORAGE } from '@praxisui/core';
+import { providePraxisI18n, PraxisI18nService, IconPickerService, PraxisIconDirective, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, LoggerService, DynamicWidgetLoaderDirective, EmptyStateCardComponent, EDITORIAL_WIDGET_TAG, ComponentMetadataRegistry, createCorporateLoggerConfig, ConsoleLoggerSink, CONFIG_STORAGE } from '@praxisui/core';
 import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PraxisDynamicFormConfigEditor, PraxisDynamicForm } from '@praxisui/dynamic-form';
@@ -508,7 +508,462 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
+const PRAXIS_STEPPER_EN_US = {
+    'praxis.stepper.editor.tabs.general': 'General',
+    'praxis.stepper.editor.tabs.steps': 'Steps',
+    'praxis.stepper.editor.general.eyebrow': 'Foundations',
+    'praxis.stepper.editor.general.title': 'Define the base stepper behavior',
+    'praxis.stepper.editor.general.subtitle': 'Adjust orientation, density, animation and utility classes without mixing structural decisions with advanced customization.',
+    'praxis.stepper.editor.general.layoutTitle': 'Layout and navigation',
+    'praxis.stepper.editor.general.layoutSubtitle': 'Controls how steps appear and how the user moves through the flow.',
+    'praxis.stepper.editor.general.orientation': 'Orientation',
+    'praxis.stepper.editor.general.orientation.horizontal': 'Horizontal',
+    'praxis.stepper.editor.general.orientation.vertical': 'Vertical',
+    'praxis.stepper.editor.general.headerPosition': 'Title position',
+    'praxis.stepper.editor.general.headerPosition.top': 'Above',
+    'praxis.stepper.editor.general.headerPosition.bottom': 'Below',
+    'praxis.stepper.editor.general.labelPosition': 'Label position',
+    'praxis.stepper.editor.general.labelPosition.end': 'Beside',
+    'praxis.stepper.editor.general.labelPosition.bottom': 'Below',
+    'praxis.stepper.editor.general.density': 'Density',
+    'praxis.stepper.editor.general.density.default': 'Default',
+    'praxis.stepper.editor.general.density.comfortable': 'Comfortable',
+    'praxis.stepper.editor.general.density.compact': 'Compact',
+    'praxis.stepper.editor.general.animationDuration': 'Animation duration',
+    'praxis.stepper.editor.general.animationPlaceholder': 'e.g.: 300ms',
+    'praxis.stepper.editor.general.initialStep': 'Initial step',
+    'praxis.stepper.editor.general.linear': 'Respect order (linear)',
+    'praxis.stepper.editor.general.disableRipple': 'Disable click effects',
+    'praxis.stepper.editor.general.visualTitle': 'Classes and visual integration',
+    'praxis.stepper.editor.general.visualSubtitle': 'Use only when you need to apply scoped CSS on the host.',
+    'praxis.stepper.editor.general.stepperClass': 'Stepper class',
+    'praxis.stepper.editor.general.stepperClassPlaceholder': 'e.g.: my-stepper',
+    'praxis.stepper.editor.general.headerClass': 'Header class',
+    'praxis.stepper.editor.general.headerClassPlaceholder': 'e.g.: stepper-header',
+    'praxis.stepper.editor.general.contentClass': 'Content class',
+    'praxis.stepper.editor.general.contentClassPlaceholder': 'e.g.: stepper-content',
+    'praxis.stepper.editor.steps.eyebrow': 'Flow structure',
+    'praxis.stepper.editor.steps.title': 'Define the narrative of each step',
+    'praxis.stepper.editor.steps.subtitle': 'Organize titles, states and step content without mixing technical configuration with assembly actions.',
+    'praxis.stepper.editor.steps.count': 'Steps',
+    'praxis.stepper.editor.steps.mapTitle': 'Step map',
+    'praxis.stepper.editor.steps.mapSubtitle': 'Drag to reorder and select a step to edit its content.',
+    'praxis.stepper.editor.steps.add': 'Add step',
+    'praxis.stepper.editor.steps.listAria': 'Step list',
+    'praxis.stepper.editor.steps.stepN': 'Step {{index}}',
+    'praxis.stepper.editor.steps.untitled': 'Untitled',
+    'praxis.stepper.editor.steps.noId': 'No identifier',
+    'praxis.stepper.editor.steps.optional': 'Optional',
+    'praxis.stepper.editor.steps.completed': 'Completed',
+    'praxis.stepper.editor.steps.error': 'Error',
+    'praxis.stepper.editor.steps.form': 'Form',
+    'praxis.stepper.editor.steps.remove': 'Remove',
+    'praxis.stepper.editor.steps.removeAria': 'Remove step {{label}}',
+    'praxis.stepper.editor.steps.selectedEyebrow': 'Selected step',
+    'praxis.stepper.editor.steps.editing': 'Editing: {{label}}',
+    'praxis.stepper.editor.steps.selectedSubtitle': 'Adjust the main content first. Secondary settings stay collapsed to reduce noise.',
+    'praxis.stepper.editor.steps.mainData': 'Main data',
+    'praxis.stepper.editor.steps.stepTitle': 'Step title',
+    'praxis.stepper.editor.steps.identifier': 'Identifier',
+    'praxis.stepper.editor.steps.iconOrState': 'Icon or state',
+    'praxis.stepper.editor.steps.iconOrStatePlaceholder': 'e.g.: number, done, edit',
+    'praxis.stepper.editor.steps.errorMessage': 'Error message',
+    'praxis.stepper.editor.steps.optionalToggle': 'Optional step',
+    'praxis.stepper.editor.steps.editableToggle': 'Allow going back and editing',
+    'praxis.stepper.editor.steps.completedToggle': 'Mark as completed',
+    'praxis.stepper.editor.steps.errorToggle': 'Mark as error',
+    'praxis.stepper.editor.steps.accessibilityTitle': 'Accessibility and technical details',
+    'praxis.stepper.editor.steps.accessibilitySubtitle': 'Auxiliary labels and less-used metadata.',
+    'praxis.stepper.editor.steps.altText': 'Alternative text',
+    'praxis.stepper.editor.steps.describedBy': 'Described-by ID',
+    'praxis.stepper.editor.steps.editorialTitle': 'Editorial content',
+    'praxis.stepper.editor.steps.editorialSubtitle': 'Use supporting blocks to contextualize the step before or after the form.',
+    'praxis.stepper.editor.steps.zoneBefore': 'Before form',
+    'praxis.stepper.editor.steps.zoneAfter': 'After form',
+    'praxis.stepper.editor.steps.addBlock': 'Add',
+    'praxis.stepper.editor.steps.widgetBenefits': 'Benefits grid',
+    'praxis.stepper.editor.steps.widgetContent': 'Content block',
+    'praxis.stepper.editor.steps.widgetNotice': 'Inline notice',
+    'praxis.stepper.editor.steps.widgetDivider': 'Divider',
+    'praxis.stepper.editor.steps.editBlock': 'Edit block',
+    'praxis.stepper.editor.steps.moveAfter': 'Move after the form',
+    'praxis.stepper.editor.steps.moveBefore': 'Move before the form',
+    'praxis.stepper.editor.steps.duplicateBlock': 'Duplicate block',
+    'praxis.stepper.editor.steps.removeBlock': 'Remove block',
+    'praxis.stepper.editor.steps.emptyZone': 'No blocks in this zone.',
+    'praxis.stepper.editor.steps.formSectionTitle': 'Step form',
+    'praxis.stepper.editor.steps.mainFormTitle': 'Main form',
+    'praxis.stepper.editor.steps.edit': 'Edit',
+    'praxis.stepper.editor.steps.addForm': 'Add form',
+    'praxis.stepper.editor.steps.advancedTitle': 'Advanced components',
+    'praxis.stepper.editor.steps.advancedSubtitle': 'Shortcuts to assemble richer experiences without losing clarity in the flow.',
+    'praxis.stepper.editor.steps.moreComponents': 'More components',
+    'praxis.stepper.editor.steps.treeListTitle': 'Tree list',
+    'praxis.stepper.editor.steps.treeListDesc': 'Hierarchical data with simple selection.',
+    'praxis.stepper.editor.steps.insertTree': 'Insert tree',
+    'praxis.stepper.editor.steps.transferTitle': 'Item transfer',
+    'praxis.stepper.editor.steps.transferDesc': 'Move items between lists for multi-selection.',
+    'praxis.stepper.editor.steps.insertTransfer': 'Insert transfer',
+    'praxis.stepper.editor.steps.searchTitle': 'Searchable selection',
+    'praxis.stepper.editor.steps.searchDesc': 'Selection with local or remote search.',
+    'praxis.stepper.editor.steps.insertSelector': 'Insert selector',
+    'praxis.stepper.editor.steps.uploadTitle': 'File upload',
+    'praxis.stepper.editor.steps.uploadDesc': 'Attachments with validation and upload flow.',
+    'praxis.stepper.editor.steps.insertUpload': 'Insert upload',
+    'praxis.stepper.editor.steps.editComponent': 'Edit component',
+    'praxis.stepper.editor.steps.removeComponent': 'Remove component',
+    'praxis.stepper.editor.steps.emptyAdvanced': 'No advanced components added.',
+    'praxis.stepper.editor.steps.noSteps': 'No steps defined.',
+    'praxis.stepper.editor.navigation.tab': 'Navigation',
+    'praxis.stepper.editor.navigation.eyebrow': 'Default actions',
+    'praxis.stepper.editor.navigation.title': 'Configure navigation between steps',
+    'praxis.stepper.editor.navigation.subtitle': 'Define when default buttons appear and how they present visually in the flow.',
+    'praxis.stepper.editor.navigation.behaviorTitle': 'Button behavior',
+    'praxis.stepper.editor.navigation.behaviorSubtitle': 'Appearance and alignment of the default stepper navigation.',
+    'praxis.stepper.editor.navigation.visible': 'Show default navigation',
+    'praxis.stepper.editor.navigation.variant': 'Button style',
+    'praxis.stepper.editor.navigation.variant.default': 'Default (raised)',
+    'praxis.stepper.editor.navigation.variant.basic': 'Text',
+    'praxis.stepper.editor.navigation.variant.flat': 'Flat',
+    'praxis.stepper.editor.navigation.variant.stroked': 'Stroked',
+    'praxis.stepper.editor.navigation.variant.raised': 'Raised',
+    'praxis.stepper.editor.navigation.color': 'Color',
+    'praxis.stepper.editor.navigation.color.default': 'Default',
+    'praxis.stepper.editor.navigation.color.primary': 'Primary',
+    'praxis.stepper.editor.navigation.color.accent': 'Accent',
+    'praxis.stepper.editor.navigation.color.warn': 'Warn',
+    'praxis.stepper.editor.navigation.align': 'Alignment',
+    'praxis.stepper.editor.navigation.align.default': 'Right',
+    'praxis.stepper.editor.navigation.align.start': 'Left',
+    'praxis.stepper.editor.navigation.align.center': 'Center',
+    'praxis.stepper.editor.navigation.align.spaceBetween': 'Spaced',
+    'praxis.stepper.editor.navigation.align.end': 'Right',
+    'praxis.stepper.editor.navigation.labelsTitle': 'Labels and icons',
+    'praxis.stepper.editor.navigation.labelsSubtitle': 'Adjust the copy and icons used in back and next actions.',
+    'praxis.stepper.editor.navigation.prevLabel': 'Back button text',
+    'praxis.stepper.editor.navigation.prevPlaceholder': 'e.g.: Back',
+    'praxis.stepper.editor.navigation.nextLabel': 'Next button text',
+    'praxis.stepper.editor.navigation.nextPlaceholder': 'e.g.: Next',
+    'praxis.stepper.editor.navigation.prevIcon': 'Back icon',
+    'praxis.stepper.editor.navigation.nextIcon': 'Next icon',
+    'praxis.stepper.editor.navigation.pickPrevIcon': 'Choose the Back button icon',
+    'praxis.stepper.editor.navigation.pickNextIcon': 'Choose the Next button icon',
+    'praxis.stepper.editor.shared.pick': 'Choose',
+    'praxis.stepper.editor.appearance.tab': 'Appearance',
+    'praxis.stepper.editor.appearance.eyebrow': 'Visual theme',
+    'praxis.stepper.editor.appearance.title': 'Customize appearance without losing consistency',
+    'praxis.stepper.editor.appearance.subtitle': 'Start with the quick adjustments. Tokens and the SCSS snippet stay collapsed for advanced scenarios.',
+    'praxis.stepper.editor.appearance.quickTitle': 'Quick adjustments',
+    'praxis.stepper.editor.appearance.quickSubtitle': 'Most common controls for sizing, typography weight and theme.',
+    'praxis.stepper.editor.appearance.headerHeight': 'Header height (px)',
+    'praxis.stepper.editor.appearance.headerHeightPlaceholder': 'e.g.: 48',
+    'praxis.stepper.editor.appearance.textSize': 'Text size (px)',
+    'praxis.stepper.editor.appearance.textSizePlaceholder': 'e.g.: 14',
+    'praxis.stepper.editor.appearance.textWeight': 'Text weight',
+    'praxis.stepper.editor.appearance.textWeight.default': 'Default',
+    'praxis.stepper.editor.appearance.textWeight.400': 'Normal',
+    'praxis.stepper.editor.appearance.textWeight.500': 'Medium',
+    'praxis.stepper.editor.appearance.textWeight.600': 'Semibold',
+    'praxis.stepper.editor.appearance.textWeight.700': 'Bold',
+    'praxis.stepper.editor.appearance.themeClass': 'Theme class',
+    'praxis.stepper.editor.appearance.themeClassPlaceholder': 'e.g.: theme-stepper-custom',
+    'praxis.stepper.editor.appearance.iconSet': 'Icon set',
+    'praxis.stepper.editor.appearance.iconSet.default': 'Material Icons (default)',
+    'praxis.stepper.editor.appearance.iconNumber': 'Number icon',
+    'praxis.stepper.editor.appearance.pickIconNumber': 'Choose the number icon',
+    'praxis.stepper.editor.appearance.iconDone': 'Completed icon',
+    'praxis.stepper.editor.appearance.pickIconDone': 'Choose the completed icon',
+    'praxis.stepper.editor.appearance.iconEdit': 'Edit icon',
+    'praxis.stepper.editor.appearance.pickIconEdit': 'Choose the edit icon',
+    'praxis.stepper.editor.appearance.iconError': 'Error icon',
+    'praxis.stepper.editor.appearance.pickIconError': 'Choose the error icon',
+    'praxis.stepper.editor.appearance.symbolsHint': 'Hint: {{icons}} are Material Symbols icons. Select a Symbols set below or click',
+    'praxis.stepper.editor.appearance.useSymbols': 'Use Material Symbols (Outlined)',
+    'praxis.stepper.editor.appearance.presetNeutral': 'Preset: neutral',
+    'praxis.stepper.editor.appearance.presetPrimary': 'Preset: primary',
+    'praxis.stepper.editor.appearance.presetHighContrast': 'Preset: high contrast',
+    'praxis.stepper.editor.appearance.clearTokens': 'Clear tokens',
+    'praxis.stepper.editor.appearance.advancedTitle': 'Advanced tokens and SCSS snippet',
+    'praxis.stepper.editor.appearance.advancedSubtitle': 'Use when you need to go beyond quick adjustments and control the theme with more granularity.',
+    'praxis.stepper.editor.appearance.tokenPlaceholder': 'CSS value or var(--token)',
+    'praxis.stepper.editor.appearance.scssSnippet': 'SCSS snippet',
+    'praxis.stepper.editor.dialog.configureStepForm': 'Configure Step Form',
+    'praxis.stepper.editor.dialog.configureListSelection': 'Configure List (selection)',
+    'praxis.stepper.editor.dialog.configureFilesUpload': 'Configure File Upload',
+    'praxis.stepper.editor.dialog.addComponentToStep': 'Add component to step',
+    'praxis.stepper.editor.dialog.configureTransfer': 'Configure Item Transfer',
+    'praxis.stepper.editor.defaults.newStep': 'New step',
+    'praxis.stepper.editor.defaults.selection': 'Selection',
+    'praxis.stepper.editor.defaults.items': 'Items',
+    'praxis.stepper.editor.defaults.newBenefit': 'New benefit',
+    'praxis.stepper.editor.widgets.listSelection': 'List (selection)',
+    'praxis.stepper.editor.widgets.searchableSelection': 'Searchable selection',
+    'praxis.stepper.editor.widgets.fileUpload': 'File upload',
+    'praxis.stepper.editor.widgets.form': 'Form',
+    'praxis.stepper.editor.widgets.benefits': 'Benefits grid',
+    'praxis.stepper.editor.widgets.content': 'Content block',
+    'praxis.stepper.editor.widgets.notice': 'Inline notice',
+    'praxis.stepper.editor.widgets.divider': 'Divider',
+    'praxis.stepper.editor.widgets.default': 'Widget',
+    'praxis.stepper.editor.summary.itemsColumns': '{{count}} item(s) • {{cols}} column(s)',
+    'praxis.stepper.editor.summary.noContent': 'No content',
+    'praxis.stepper.editor.summary.labelPrefix': 'Label: {{label}}',
+    'praxis.stepper.editor.summary.dividerNoLabel': 'Divider without label',
+    'praxis.stepper.editor.status.contentLegacy': 'Deprecated legacy: new authoring should prefer widget:rich-text-block. This block remains supported for compatibility in this cycle.',
+    'praxis.stepper.editor.status.noticeCurrent': 'Kept in the current cycle: final semantics are still being defined between legal-notice and info-callout.',
+    'praxis.stepper.editor.status.benefitsTemporary': 'Temporarily kept: still no canonical equivalent in the editorial backlog.',
+    'praxis.stepper.editor.status.dividerTemporary': 'Temporarily kept: legacy separator without a prioritized shared equivalent.',
+    'praxis.stepper.editor.status.editorialWidget': 'Wizard editorial widget.',
+    'praxis.stepper.editor.tone.info': 'Informational',
+    'praxis.stepper.editor.tone.warning': 'Warning',
+    'praxis.stepper.editor.tone.neutral': 'Neutral',
+};
+
+const PRAXIS_STEPPER_PT_BR = {
+    'praxis.stepper.editor.tabs.general': 'Geral',
+    'praxis.stepper.editor.tabs.steps': 'Etapas',
+    'praxis.stepper.editor.general.eyebrow': 'Fundamentos',
+    'praxis.stepper.editor.general.title': 'Defina o comportamento base do stepper',
+    'praxis.stepper.editor.general.subtitle': 'Ajuste orientacao, densidade, animacao e classes utilitarias sem misturar decisoes estruturais com customizacao avancada.',
+    'praxis.stepper.editor.general.layoutTitle': 'Layout e navegacao',
+    'praxis.stepper.editor.general.layoutSubtitle': 'Controla como as etapas aparecem e como o usuario percorre o fluxo.',
+    'praxis.stepper.editor.general.orientation': 'Orientacao',
+    'praxis.stepper.editor.general.orientation.horizontal': 'Horizontal',
+    'praxis.stepper.editor.general.orientation.vertical': 'Vertical',
+    'praxis.stepper.editor.general.headerPosition': 'Posicao dos titulos',
+    'praxis.stepper.editor.general.headerPosition.top': 'Acima',
+    'praxis.stepper.editor.general.headerPosition.bottom': 'Abaixo',
+    'praxis.stepper.editor.general.labelPosition': 'Posicao do rotulo',
+    'praxis.stepper.editor.general.labelPosition.end': 'Ao lado',
+    'praxis.stepper.editor.general.labelPosition.bottom': 'Abaixo',
+    'praxis.stepper.editor.general.density': 'Densidade',
+    'praxis.stepper.editor.general.density.default': 'Padrao',
+    'praxis.stepper.editor.general.density.comfortable': 'Confortavel',
+    'praxis.stepper.editor.general.density.compact': 'Compacta',
+    'praxis.stepper.editor.general.animationDuration': 'Duracao da animacao',
+    'praxis.stepper.editor.general.animationPlaceholder': 'Ex.: 300ms',
+    'praxis.stepper.editor.general.initialStep': 'Etapa inicial',
+    'praxis.stepper.editor.general.linear': 'Respeitar ordem (linear)',
+    'praxis.stepper.editor.general.disableRipple': 'Desativar efeitos de clique',
+    'praxis.stepper.editor.general.visualTitle': 'Classes e integracao visual',
+    'praxis.stepper.editor.general.visualSubtitle': 'Use apenas quando precisar aplicar CSS escopado no host.',
+    'praxis.stepper.editor.general.stepperClass': 'Classe do stepper',
+    'praxis.stepper.editor.general.stepperClassPlaceholder': 'Ex.: meu-stepper',
+    'praxis.stepper.editor.general.headerClass': 'Classe do cabecalho',
+    'praxis.stepper.editor.general.headerClassPlaceholder': 'Ex.: stepper-header',
+    'praxis.stepper.editor.general.contentClass': 'Classe do conteudo',
+    'praxis.stepper.editor.general.contentClassPlaceholder': 'Ex.: stepper-content',
+    'praxis.stepper.editor.steps.eyebrow': 'Estrutura do fluxo',
+    'praxis.stepper.editor.steps.title': 'Defina a narrativa de cada etapa',
+    'praxis.stepper.editor.steps.subtitle': 'Organize titulos, estados e conteudo da etapa sem misturar configuracao tecnica com acoes de montagem.',
+    'praxis.stepper.editor.steps.count': 'Etapas',
+    'praxis.stepper.editor.steps.mapTitle': 'Mapa de etapas',
+    'praxis.stepper.editor.steps.mapSubtitle': 'Arraste para reordenar e selecione uma etapa para editar o conteudo.',
+    'praxis.stepper.editor.steps.add': 'Adicionar etapa',
+    'praxis.stepper.editor.steps.listAria': 'Lista de etapas',
+    'praxis.stepper.editor.steps.stepN': 'Etapa {{index}}',
+    'praxis.stepper.editor.steps.untitled': 'Sem titulo',
+    'praxis.stepper.editor.steps.noId': 'Sem identificador',
+    'praxis.stepper.editor.steps.optional': 'Opcional',
+    'praxis.stepper.editor.steps.completed': 'Concluida',
+    'praxis.stepper.editor.steps.error': 'Erro',
+    'praxis.stepper.editor.steps.form': 'Formulario',
+    'praxis.stepper.editor.steps.remove': 'Remover',
+    'praxis.stepper.editor.steps.removeAria': 'Remover etapa {{label}}',
+    'praxis.stepper.editor.steps.selectedEyebrow': 'Etapa selecionada',
+    'praxis.stepper.editor.steps.editing': 'Editando: {{label}}',
+    'praxis.stepper.editor.steps.selectedSubtitle': 'Ajuste conteudo principal primeiro. Configuracoes secundarias ficam recolhidas para reduzir ruido.',
+    'praxis.stepper.editor.steps.mainData': 'Dados principais',
+    'praxis.stepper.editor.steps.stepTitle': 'Titulo da etapa',
+    'praxis.stepper.editor.steps.identifier': 'Identificador',
+    'praxis.stepper.editor.steps.iconOrState': 'Icone ou estado',
+    'praxis.stepper.editor.steps.iconOrStatePlaceholder': 'Ex.: number, done, edit',
+    'praxis.stepper.editor.steps.errorMessage': 'Mensagem de erro',
+    'praxis.stepper.editor.steps.optionalToggle': 'Etapa opcional',
+    'praxis.stepper.editor.steps.editableToggle': 'Permitir voltar e editar',
+    'praxis.stepper.editor.steps.completedToggle': 'Marcar como concluida',
+    'praxis.stepper.editor.steps.errorToggle': 'Marcar como com erro',
+    'praxis.stepper.editor.steps.accessibilityTitle': 'Acessibilidade e detalhes tecnicos',
+    'praxis.stepper.editor.steps.accessibilitySubtitle': 'Rotulos auxiliares e metadados menos usados.',
+    'praxis.stepper.editor.steps.altText': 'Texto alternativo',
+    'praxis.stepper.editor.steps.describedBy': 'ID que descreve',
+    'praxis.stepper.editor.steps.editorialTitle': 'Conteudo editorial',
+    'praxis.stepper.editor.steps.editorialSubtitle': 'Use blocos de apoio para contextualizar a etapa antes ou depois do formulario.',
+    'praxis.stepper.editor.steps.zoneBefore': 'Antes do formulario',
+    'praxis.stepper.editor.steps.zoneAfter': 'Depois do formulario',
+    'praxis.stepper.editor.steps.addBlock': 'Adicionar',
+    'praxis.stepper.editor.steps.widgetBenefits': 'Grade de beneficios',
+    'praxis.stepper.editor.steps.widgetContent': 'Bloco de conteudo',
+    'praxis.stepper.editor.steps.widgetNotice': 'Aviso inline',
+    'praxis.stepper.editor.steps.widgetDivider': 'Divisor',
+    'praxis.stepper.editor.steps.editBlock': 'Editar bloco',
+    'praxis.stepper.editor.steps.moveAfter': 'Mover para depois do formulario',
+    'praxis.stepper.editor.steps.moveBefore': 'Mover para antes do formulario',
+    'praxis.stepper.editor.steps.duplicateBlock': 'Duplicar bloco',
+    'praxis.stepper.editor.steps.removeBlock': 'Remover bloco',
+    'praxis.stepper.editor.steps.emptyZone': 'Nenhum bloco nesta zona.',
+    'praxis.stepper.editor.steps.formSectionTitle': 'Formulario da etapa',
+    'praxis.stepper.editor.steps.mainFormTitle': 'Formulario principal',
+    'praxis.stepper.editor.steps.edit': 'Editar',
+    'praxis.stepper.editor.steps.addForm': 'Adicionar formulario',
+    'praxis.stepper.editor.steps.advancedTitle': 'Componentes avancados',
+    'praxis.stepper.editor.steps.advancedSubtitle': 'Atalhos para montar experiencias mais ricas sem perder clareza no fluxo.',
+    'praxis.stepper.editor.steps.moreComponents': 'Mais componentes',
+    'praxis.stepper.editor.steps.treeListTitle': 'Lista em arvore',
+    'praxis.stepper.editor.steps.treeListDesc': 'Dados hierarquicos com selecao simples.',
+    'praxis.stepper.editor.steps.insertTree': 'Inserir arvore',
+    'praxis.stepper.editor.steps.transferTitle': 'Transferencia de itens',
+    'praxis.stepper.editor.steps.transferDesc': 'Mover itens entre listas para selecao multipla.',
+    'praxis.stepper.editor.steps.insertTransfer': 'Inserir transferencia',
+    'praxis.stepper.editor.steps.searchTitle': 'Selecao com busca',
+    'praxis.stepper.editor.steps.searchDesc': 'Selecao com busca local ou remota.',
+    'praxis.stepper.editor.steps.insertSelector': 'Inserir seletor',
+    'praxis.stepper.editor.steps.uploadTitle': 'Upload de arquivos',
+    'praxis.stepper.editor.steps.uploadDesc': 'Anexos com validacao e fluxo de upload.',
+    'praxis.stepper.editor.steps.insertUpload': 'Inserir upload',
+    'praxis.stepper.editor.steps.editComponent': 'Editar componente',
+    'praxis.stepper.editor.steps.removeComponent': 'Remover componente',
+    'praxis.stepper.editor.steps.emptyAdvanced': 'Nenhum componente avancado adicionado.',
+    'praxis.stepper.editor.steps.noSteps': 'Nenhuma etapa definida.',
+    'praxis.stepper.editor.navigation.tab': 'Navegacao',
+    'praxis.stepper.editor.navigation.eyebrow': 'Acoes padrao',
+    'praxis.stepper.editor.navigation.title': 'Configure a navegacao entre etapas',
+    'praxis.stepper.editor.navigation.subtitle': 'Defina quando os botoes padrao aparecem e como eles se apresentam visualmente no fluxo.',
+    'praxis.stepper.editor.navigation.behaviorTitle': 'Comportamento dos botoes',
+    'praxis.stepper.editor.navigation.behaviorSubtitle': 'Aparencia e alinhamento da navegacao padrao do stepper.',
+    'praxis.stepper.editor.navigation.visible': 'Mostrar navegacao padrao',
+    'praxis.stepper.editor.navigation.variant': 'Estilo dos botoes',
+    'praxis.stepper.editor.navigation.variant.default': 'Padrao (elevado)',
+    'praxis.stepper.editor.navigation.variant.basic': 'Texto',
+    'praxis.stepper.editor.navigation.variant.flat': 'Plano',
+    'praxis.stepper.editor.navigation.variant.stroked': 'Contornado',
+    'praxis.stepper.editor.navigation.variant.raised': 'Elevado',
+    'praxis.stepper.editor.navigation.color': 'Cor',
+    'praxis.stepper.editor.navigation.color.default': 'Padrao',
+    'praxis.stepper.editor.navigation.color.primary': 'Primaria',
+    'praxis.stepper.editor.navigation.color.accent': 'Acento',
+    'praxis.stepper.editor.navigation.color.warn': 'Alerta',
+    'praxis.stepper.editor.navigation.align': 'Alinhamento',
+    'praxis.stepper.editor.navigation.align.default': 'Direita',
+    'praxis.stepper.editor.navigation.align.start': 'Esquerda',
+    'praxis.stepper.editor.navigation.align.center': 'Centro',
+    'praxis.stepper.editor.navigation.align.spaceBetween': 'Espacado',
+    'praxis.stepper.editor.navigation.align.end': 'Direita',
+    'praxis.stepper.editor.navigation.labelsTitle': 'Rotulos e icones',
+    'praxis.stepper.editor.navigation.labelsSubtitle': 'Ajuste a copia e os icones usados nas acoes de voltar e avancar.',
+    'praxis.stepper.editor.navigation.prevLabel': 'Texto do botao Voltar',
+    'praxis.stepper.editor.navigation.prevPlaceholder': 'Ex.: Voltar',
+    'praxis.stepper.editor.navigation.nextLabel': 'Texto do botao Proximo',
+    'praxis.stepper.editor.navigation.nextPlaceholder': 'Ex.: Proximo',
+    'praxis.stepper.editor.navigation.prevIcon': 'Icone de Voltar',
+    'praxis.stepper.editor.navigation.nextIcon': 'Icone de Proximo',
+    'praxis.stepper.editor.navigation.pickPrevIcon': 'Escolher icone do botao Voltar',
+    'praxis.stepper.editor.navigation.pickNextIcon': 'Escolher icone do botao Proximo',
+    'praxis.stepper.editor.shared.pick': 'Escolher',
+    'praxis.stepper.editor.appearance.tab': 'Aparencia',
+    'praxis.stepper.editor.appearance.eyebrow': 'Tema visual',
+    'praxis.stepper.editor.appearance.title': 'Personalize a aparencia sem perder consistencia',
+    'praxis.stepper.editor.appearance.subtitle': 'Comece pelos ajustes rapidos. Tokens e snippet SCSS ficam recolhidos para cenarios avancados.',
+    'praxis.stepper.editor.appearance.quickTitle': 'Ajustes rapidos',
+    'praxis.stepper.editor.appearance.quickSubtitle': 'Controles mais comuns para tamanho, peso tipografico e tema.',
+    'praxis.stepper.editor.appearance.headerHeight': 'Altura do cabecalho (px)',
+    'praxis.stepper.editor.appearance.headerHeightPlaceholder': 'Ex.: 48',
+    'praxis.stepper.editor.appearance.textSize': 'Tamanho do texto (px)',
+    'praxis.stepper.editor.appearance.textSizePlaceholder': 'Ex.: 14',
+    'praxis.stepper.editor.appearance.textWeight': 'Peso do texto',
+    'praxis.stepper.editor.appearance.textWeight.default': 'Padrao',
+    'praxis.stepper.editor.appearance.textWeight.400': 'Normal',
+    'praxis.stepper.editor.appearance.textWeight.500': 'Medio',
+    'praxis.stepper.editor.appearance.textWeight.600': 'Seminegrito',
+    'praxis.stepper.editor.appearance.textWeight.700': 'Negrito',
+    'praxis.stepper.editor.appearance.themeClass': 'Classe de tema',
+    'praxis.stepper.editor.appearance.themeClassPlaceholder': 'Ex.: theme-stepper-custom',
+    'praxis.stepper.editor.appearance.iconSet': 'Conjunto de icones',
+    'praxis.stepper.editor.appearance.iconSet.default': 'Material Icons (padrao)',
+    'praxis.stepper.editor.appearance.iconNumber': 'Icone do numero',
+    'praxis.stepper.editor.appearance.pickIconNumber': 'Escolher icone do numero',
+    'praxis.stepper.editor.appearance.iconDone': 'Icone concluido',
+    'praxis.stepper.editor.appearance.pickIconDone': 'Escolher icone de concluido',
+    'praxis.stepper.editor.appearance.iconEdit': 'Icone de edicao',
+    'praxis.stepper.editor.appearance.pickIconEdit': 'Escolher icone de edicao',
+    'praxis.stepper.editor.appearance.iconError': 'Icone de erro',
+    'praxis.stepper.editor.appearance.pickIconError': 'Escolher icone de erro',
+    'praxis.stepper.editor.appearance.symbolsHint': 'Dica: {{icons}} sao icones do Material Symbols. Selecione um conjunto Symbols abaixo ou clique em',
+    'praxis.stepper.editor.appearance.useSymbols': 'Usar Material Symbols (Outlined)',
+    'praxis.stepper.editor.appearance.presetNeutral': 'Preset: neutro',
+    'praxis.stepper.editor.appearance.presetPrimary': 'Preset: primario',
+    'praxis.stepper.editor.appearance.presetHighContrast': 'Preset: alto contraste',
+    'praxis.stepper.editor.appearance.clearTokens': 'Limpar tokens',
+    'praxis.stepper.editor.appearance.advancedTitle': 'Tokens avancados e snippet SCSS',
+    'praxis.stepper.editor.appearance.advancedSubtitle': 'Use quando precisar sair do ajuste rapido e controlar o tema com granularidade.',
+    'praxis.stepper.editor.appearance.tokenPlaceholder': 'valor CSS ou var(--token)',
+    'praxis.stepper.editor.appearance.scssSnippet': 'Snippet SCSS',
+    'praxis.stepper.editor.dialog.configureStepForm': 'Configurar Formulario da Etapa',
+    'praxis.stepper.editor.dialog.configureListSelection': 'Configurar Lista (selecao)',
+    'praxis.stepper.editor.dialog.configureFilesUpload': 'Configurar Upload de Arquivos',
+    'praxis.stepper.editor.dialog.addComponentToStep': 'Adicionar componente a etapa',
+    'praxis.stepper.editor.dialog.configureTransfer': 'Configurar Transferencia de Itens',
+    'praxis.stepper.editor.defaults.newStep': 'Novo passo',
+    'praxis.stepper.editor.defaults.selection': 'Selecao',
+    'praxis.stepper.editor.defaults.items': 'Itens',
+    'praxis.stepper.editor.defaults.newBenefit': 'Novo beneficio',
+    'praxis.stepper.editor.widgets.listSelection': 'Lista (selecao)',
+    'praxis.stepper.editor.widgets.searchableSelection': 'Selecao com busca',
+    'praxis.stepper.editor.widgets.fileUpload': 'Upload de arquivos',
+    'praxis.stepper.editor.widgets.form': 'Formulario',
+    'praxis.stepper.editor.widgets.benefits': 'Grade de beneficios',
+    'praxis.stepper.editor.widgets.content': 'Bloco de conteudo',
+    'praxis.stepper.editor.widgets.notice': 'Aviso inline',
+    'praxis.stepper.editor.widgets.divider': 'Divisor',
+    'praxis.stepper.editor.widgets.default': 'Widget',
+    'praxis.stepper.editor.summary.itemsColumns': '{{count}} item(ns) • {{cols}} coluna(s)',
+    'praxis.stepper.editor.summary.noContent': 'Sem conteudo',
+    'praxis.stepper.editor.summary.labelPrefix': 'Rotulo: {{label}}',
+    'praxis.stepper.editor.summary.dividerNoLabel': 'Divisor sem rotulo',
+    'praxis.stepper.editor.status.contentLegacy': 'Legado em deprecacao: novo authoring deve preferir widget:rich-text-block. O bloco continua suportado por compatibilidade neste ciclo.',
+    'praxis.stepper.editor.status.noticeCurrent': 'Mantido no ciclo atual: semantica final ainda em definicao entre legal-notice e info-callout.',
+    'praxis.stepper.editor.status.benefitsTemporary': 'Mantido temporariamente: ainda sem equivalente canonico no backlog editorial.',
+    'praxis.stepper.editor.status.dividerTemporary': 'Mantido temporariamente: separador legado sem equivalente compartilhado priorizado.',
+    'praxis.stepper.editor.status.editorialWidget': 'Widget editorial do wizard.',
+    'praxis.stepper.editor.tone.info': 'Informativo',
+    'praxis.stepper.editor.tone.warning': 'Atencao',
+    'praxis.stepper.editor.tone.neutral': 'Neutro',
+};
+
+function createPraxisStepperI18nConfig(options = {}) {
+    const dictionaries = {
+        'pt-BR': {
+            ...PRAXIS_STEPPER_PT_BR,
+            ...(options.dictionaries?.['pt-BR'] ?? {}),
+        },
+        'en-US': {
+            ...PRAXIS_STEPPER_EN_US,
+            ...(options.dictionaries?.['en-US'] ?? {}),
+        },
+    };
+    for (const [locale, dictionary] of Object.entries(options.dictionaries ?? {})) {
+        if (locale === 'pt-BR' || locale === 'en-US')
+            continue;
+        dictionaries[locale] = { ...(dictionaries[locale] ?? {}), ...dictionary };
+    }
+    return {
+        locale: options.locale,
+        fallbackLocale: options.fallbackLocale ?? 'pt-BR',
+        dictionaries,
+    };
+}
+function providePraxisStepperI18n(options = {}) {
+    return providePraxisI18n(createPraxisStepperI18nConfig(options));
+}
+function resolvePraxisStepperText(i18n, key, fallback) {
+    const namespacedKey = key.startsWith('praxis.stepper.')
+        ? key
+        : `praxis.stepper.${key}`;
+    return i18n.t(namespacedKey, undefined, fallback) || fallback;
+}
+
 class PraxisStepperConfigEditor {
+    i18n = inject(PraxisI18nService);
     config = { steps: [], orientation: 'horizontal', headerPosition: 'top', linear: false };
     activeStepRef = null;
     // SettingsValueProvider observables
@@ -538,11 +993,23 @@ class PraxisStepperConfigEditor {
             }
         }
         else {
-            this.config.steps = [{ id: 'step1', label: 'Novo passo' }];
+            this.config.steps = [{ id: 'step1', label: this.tx('editor.defaults.newStep', 'New step') }];
             this.isDirty$.next(true);
         }
         this.ensureActiveStep();
     }
+    tx(key, fallback) {
+        return resolvePraxisStepperText(this.i18n, key, fallback);
+    }
+    stepIndexLabel(index) {
+        return this.tx('editor.steps.stepN', 'Step {{index}}').replace('{{index}}', `${index + 1}`);
+    }
+    stepRemoveAria(step, index) {
+        return this.tx('editor.steps.removeAria', 'Remove step {{label}}').replace('{{label}}', `${step.label || index + 1}`);
+    }
+    editingStepTitle(step) {
+        return this.tx('editor.steps.editing', 'Editing: {{label}}').replace('{{label}}', `${step.label || ''}`);
+    }
     markDirty() { this.isDirty$.next(true); this.validate(); }
     validate() {
         const valid = Array.isArray(this.config.steps) && this.config.steps.every(s => !!s.label);
@@ -805,15 +1272,15 @@ class PraxisStepperConfigEditor {
         s.widgetsBeforeForm = []; return s.widgetsBeforeForm; }
     displayWidgetName(w) {
         switch (w.id) {
-            case 'praxis-list': return 'Lista (seleção)';
-            case 'pdx-material-searchable-select': return 'Seleção com busca';
-            case 'praxis-files-upload': return 'Upload de arquivos';
-            case 'praxis-dynamic-form': return 'Formulário';
-            case 'praxis-wizard-benefits': return 'Grade de benefícios';
-            case 'praxis-wizard-content': return 'Bloco de conteúdo';
-            case 'praxis-wizard-inline-notice': return 'Aviso inline';
-            case 'praxis-wizard-divider': return 'Divisor';
-            default: return w.inputs?.title || w.inputs?.label || 'Widget';
+            case 'praxis-list': return this.tx('editor.widgets.listSelection', 'List (selection)');
+            case 'pdx-material-searchable-select': return this.tx('editor.widgets.searchableSelection', 'Searchable selection');
+            case 'praxis-files-upload': return this.tx('editor.widgets.fileUpload', 'File upload');
+            case 'praxis-dynamic-form': return this.tx('editor.widgets.form', 'Form');
+            case 'praxis-wizard-benefits': return this.tx('editor.widgets.benefits', 'Benefits grid');
+            case 'praxis-wizard-content': return this.tx('editor.widgets.content', 'Content block');
+            case 'praxis-wizard-inline-notice': return this.tx('editor.widgets.notice', 'Inline notice');
+            case 'praxis-wizard-divider': return this.tx('editor.widgets.divider', 'Divider');
+            default: return w.inputs?.title || w.inputs?.label || this.tx('editor.widgets.default', 'Widget');
         }
     }
     editorialBeforeWidgets(step) {
@@ -835,17 +1302,19 @@ class PraxisStepperConfigEditor {
             const text = (value || '').trim();
             if (!text)
                 return '';
-            return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+            return text.length > max ? `${text.slice(0, max - 3)}...` : text;
         };
         switch (w.id) {
             case 'praxis-wizard-benefits': {
                 const count = Array.isArray(inputs.items) ? inputs.items.length : 0;
                 const cols = Number.isFinite(Number(inputs.columns)) ? Number(inputs.columns) : 4;
-                return `${count} item(ns) • ${cols} coluna(s)`;
+                return this.tx('editor.summary.itemsColumns', '{{count}} item(s) • {{cols}} column(s)')
+                    .replace('{{count}}', `${count}`)
+                    .replace('{{cols}}', `${cols}`);
             }
             case 'praxis-wizard-content': {
                 const text = shorten(inputs.title || inputs.subtitle || inputs.text || inputs.caption, 90);
-                return text || 'Sem conteúdo';
+                return text || this.tx('editor.summary.noContent', 'No content');
             }
             case 'praxis-wizard-inline-notice': {
                 const tone = this.toneLabel(inputs.tone);
@@ -853,7 +1322,9 @@ class PraxisStepperConfigEditor {
                 return text ? `${tone} • ${text}` : tone;
             }
             case 'praxis-wizard-divider':
-                return inputs.label ? `Rótulo: ${inputs.label}` : 'Divisor sem rótulo';
+                return inputs.label
+                    ? this.tx('editor.summary.labelPrefix', 'Label: {{label}}').replace('{{label}}', inputs.label)
+                    : this.tx('editor.summary.dividerNoLabel', 'Divider without label');
             default:
                 return '';
         }
@@ -861,15 +1332,15 @@ class PraxisStepperConfigEditor {
     editorialWidgetStatus(w) {
         switch (w.id) {
             case 'praxis-wizard-content':
-                return 'Legado em deprecação: novo authoring deve preferir widget:rich-text-block. O bloco continua suportado por compatibilidade neste ciclo.';
+                return this.tx('editor.status.contentLegacy', 'Deprecated legacy: new authoring should prefer widget:rich-text-block. This block remains supported for compatibility in this cycle.');
             case 'praxis-wizard-inline-notice':
-                return 'Mantido no ciclo atual: semântica final ainda em definição entre legal-notice e info-callout.';
+                return this.tx('editor.status.noticeCurrent', 'Kept in the current cycle: final semantics are still being defined between legal-notice and info-callout.');
             case 'praxis-wizard-benefits':
-                return 'Mantido temporariamente: ainda sem equivalente canônico no backlog editorial.';
+                return this.tx('editor.status.benefitsTemporary', 'Temporarily kept: still no canonical equivalent in the editorial backlog.');
             case 'praxis-wizard-divider':
-                return 'Mantido temporariamente: separador legado sem equivalente compartilhado priorizado.';
+                return this.tx('editor.status.dividerTemporary', 'Temporarily kept: legacy separator without a prioritized shared equivalent.');
             default:
-                return 'Widget editorial do wizard.';
+                return this.tx('editor.status.editorialWidget', 'Wizard editorial widget.');
         }
     }
     addEditorialWidget(id, zone = 'before') {
@@ -976,7 +1447,7 @@ class PraxisStepperConfigEditor {
                     title: '',
                     columns: 4,
                     boxed: true,
-                    items: [{ icon: '', title: 'Novo benefício', text: '' }],
+                    items: [{ icon: '', title: this.tx('editor.defaults.newBenefit', 'New benefit'), text: '' }],
                 };
             case 'praxis-wizard-content':
                 return {
@@ -1036,9 +1507,9 @@ class PraxisStepperConfigEditor {
     }
     toneLabel(value) {
         switch (value) {
-            case 'info': return 'Informativo';
-            case 'warning': return 'Atenção';
-            default: return 'Neutro';
+            case 'info': return this.tx('editor.tone.info', 'Informational');
+            case 'warning': return this.tx('editor.tone.warning', 'Warning');
+            default: return this.tx('editor.tone.neutral', 'Neutral');
         }
     }
     reorderSubset(list, pick, fromSubsetIndex, toSubsetIndex) {
@@ -1062,7 +1533,7 @@ class PraxisStepperConfigEditor {
         const step = this.activeStep;
         if (!step)
             return;
-        const ref = this.settings.open({ id: `stepper:form:${step.id || this.activeIndex}`, title: 'Configurar Formulário da Etapa', content: { component: PraxisDynamicFormConfigEditor, inputs: { formConfig: step.form?.config || { sections: [] }, formId: step.form?.formId || step.id, mode: step.form?.mode || 'create' } } });
+        const ref = this.settings.open({ id: `stepper:form:${step.id || this.activeIndex}`, title: this.tx('editor.dialog.configureStepForm', 'Configure Step Form'), content: { component: PraxisDynamicFormConfigEditor, inputs: { formConfig: step.form?.config || { sections: [] }, formId: step.form?.formId || step.id, mode: step.form?.mode || 'create' } } });
         const apply = (val) => {
             const v = val || {};
             step.form = {
@@ -1086,7 +1557,7 @@ class PraxisStepperConfigEditor {
         const current = { ...(this.ensureWidgets().find(w => w.id === 'praxis-list')?.inputs?.config || {}) };
         // Ensure minimal selection setup
         current.selection = current.selection || { mode: 'single', return: 'value' };
-        const ref = this.settings.open({ id: `stepper:list:${step.id || this.activeIndex}`, title: 'Configurar Lista (seleção)', content: { component: PraxisListConfigEditor, inputs: { config: current, listId: step.id || 'list' } } });
+        const ref = this.settings.open({ id: `stepper:list:${step.id || this.activeIndex}`, title: this.tx('editor.dialog.configureListSelection', 'Configure List (selection)'), content: { component: PraxisListConfigEditor, inputs: { config: current, listId: step.id || 'list' } } });
         const apply = (val) => {
             const cfg = (val && (val.config || val)) || current;
             const wd = { id: 'praxis-list', inputs: { config: cfg, listId: `${step.id || 'step'}-list-${Date.now()}` } };
@@ -1107,7 +1578,7 @@ class PraxisStepperConfigEditor {
                 return;
             const meta = {
                 name: res.name || 'selection',
-                label: res.label || 'Seleção',
+                label: res.label || this.tx('editor.defaults.selection', 'Selection'),
                 required: !!res.required,
                 searchable: true,
                 multiple: !!res.multiple,
@@ -1125,7 +1596,7 @@ class PraxisStepperConfigEditor {
         const step = this.activeStep;
         if (!step)
             return;
-        const ref = this.settings.open({ id: `stepper:upload:${step.id || this.activeIndex}`, title: 'Configurar Upload de Arquivos', content: { component: PraxisFilesUploadConfigEditor, inputs: {} } });
+        const ref = this.settings.open({ id: `stepper:upload:${step.id || this.activeIndex}`, title: this.tx('editor.dialog.configureFilesUpload', 'Configure File Upload'), content: { component: PraxisFilesUploadConfigEditor, inputs: {} } });
         const apply = (cfg) => {
             const wd = { id: 'praxis-files-upload', inputs: { config: cfg, filesUploadId: `${step.id || 'step'}-upload-${Date.now()}` } };
             this.ensureWidgets().push(wd);
@@ -1135,7 +1606,7 @@ class PraxisStepperConfigEditor {
         ref.saved$.subscribe(apply);
     }
     openMoreComponents() {
-        const dlg = this.dialog.open(ComponentPaletteDialogComponent, { width: '560px', data: { title: 'Adicionar componente à etapa', allowedWidgetIds: ['praxis-dynamic-form', 'praxis-list', 'pdx-material-searchable-select', 'praxis-files-upload'] } });
+        const dlg = this.dialog.open(ComponentPaletteDialogComponent, { width: '560px', data: { title: this.tx('editor.dialog.addComponentToStep', 'Add component to step'), allowedWidgetIds: ['praxis-dynamic-form', 'praxis-list', 'pdx-material-searchable-select', 'praxis-files-upload'] } });
         dlg.afterClosed().subscribe((id) => {
             if (!id)
                 return;
@@ -1176,10 +1647,10 @@ class PraxisStepperConfigEditor {
         // Seed a simple form with a transfer list field
         const formConfig = {
             sections: [
-                { rows: [[{ name: 'items', label: 'Itens', controlType: 'TRANSFER_LIST', transferOptions: { source: [], target: [] } }]] }
+                { rows: [[{ name: 'items', label: this.tx('editor.defaults.items', 'Items'), controlType: 'TRANSFER_LIST', transferOptions: { source: [], target: [] } }]] }
             ]
         };
-        const ref = this.settings.open({ id: `stepper:transfer:${step.id || this.activeIndex}`, title: 'Configurar Transferência de Itens', content: { component: PraxisDynamicFormConfigEditor, inputs: { formConfig, formId: step.id || 'transfer' } } });
+        const ref = this.settings.open({ id: `stepper:transfer:${step.id || this.activeIndex}`, title: this.tx('editor.dialog.configureTransfer', 'Configure Item Transfer'), content: { component: PraxisDynamicFormConfigEditor, inputs: { formConfig, formId: step.id || 'transfer' } } });
         const apply = (val) => {
             const v = val || {};
             step.form = { config: v.formConfig || formConfig, formId: v?.formId || step.id, mode: v?.inputsPatch?.mode || 'create' };
@@ -1199,7 +1670,7 @@ class PraxisStepperConfigEditor {
                 const step = this.activeStep;
                 if (!step)
                     return;
-                const ref = this.settings.open({ id: `stepper:list:${step.id || this.activeIndex}`, title: 'Configurar Lista (seleção)', content: { component: PraxisListConfigEditor, inputs: { config: cfg, listId: step.id || 'list' } } });
+                const ref = this.settings.open({ id: `stepper:list:${step.id || this.activeIndex}`, title: this.tx('editor.dialog.configureListSelection', 'Configure List (selection)'), content: { component: PraxisListConfigEditor, inputs: { config: cfg, listId: step.id || 'list' } } });
                 const apply = (val) => {
                     const next = (val && (val.config || val)) || cfg;
                     w.inputs = { ...(w.inputs || {}), config: next };
@@ -1223,7 +1694,7 @@ class PraxisStepperConfigEditor {
             }
             case 'praxis-files-upload': {
                 const cfg = w.inputs?.config || {};
-                const ref = this.settings.open({ id: `stepper:upload:edit`, title: 'Configurar Upload de Arquivos', content: { component: PraxisFilesUploadConfigEditor, inputs: { ...cfg } } });
+                const ref = this.settings.open({ id: `stepper:upload:edit`, title: this.tx('editor.dialog.configureFilesUpload', 'Configure File Upload'), content: { component: PraxisFilesUploadConfigEditor, inputs: { ...cfg } } });
                 const apply = (val) => { w.inputs = { ...(w.inputs || {}), config: val }; this.markDirty(); };
                 ref.applied$.subscribe(apply);
                 ref.saved$.subscribe(apply);
@@ -1282,101 +1753,101 @@ class PraxisStepperConfigEditor {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisStepperConfigEditor, deps: [{ token: SETTINGS_PANEL_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisStepperConfigEditor, isStandalone: true, selector: "praxis-stepper-config-editor", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisStepperConfigEditor, isStandalone: true, selector: "praxis-stepper-config-editor", providers: [providePraxisStepperI18n()], ngImport: i0, template: `
     <div class="pdx-editor">
       <mat-tab-group>
-        <mat-tab label="Geral">
+        <mat-tab [label]="tx('editor.tabs.general', 'General')">
           <div class="tab-pad">
             <div class="editor-intro">
               <div class="editor-intro-copy">
-                <div class="eyebrow">Fundamentos</div>
-                <div class="editor-title">Defina o comportamento base do stepper</div>
-                <div class="editor-subtitle">Ajuste orientação, densidade, animação e classes utilitárias sem misturar decisões estruturais com customização avançada.</div>
+                <div class="eyebrow">{{ tx('editor.general.eyebrow', 'Foundations') }}</div>
+                <div class="editor-title">{{ tx('editor.general.title', 'Define the base stepper behavior') }}</div>
+                <div class="editor-subtitle">{{ tx('editor.general.subtitle', 'Adjust orientation, density, animation and utility classes without mixing structural decisions with advanced customization.') }}</div>
               </div>
             </div>
             <div class="settings-group">
               <div class="group-head">
-                <div class="section-title">Layout e navegação</div>
-                <div class="section-subtitle">Controla como as etapas aparecem e como o usuário percorre o fluxo.</div>
+                <div class="section-title">{{ tx('editor.general.layoutTitle', 'Layout and navigation') }}</div>
+                <div class="section-subtitle">{{ tx('editor.general.layoutSubtitle', 'Controls how steps appear and how the user moves through the flow.') }}</div>
               </div>
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
-                  <mat-label>Orientação</mat-label>
+                  <mat-label>{{ tx('editor.general.orientation', 'Orientation') }}</mat-label>
                   <select matNativeControl [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
-                    <option value="horizontal">Horizontal</option>
-                    <option value="vertical">Vertical</option>
+                    <option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</option>
+                    <option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Posição dos títulos</mat-label>
+                  <mat-label>{{ tx('editor.general.headerPosition', 'Title position') }}</mat-label>
                   <select matNativeControl [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
-                    <option value="top">Acima</option>
-                    <option value="bottom">Abaixo</option>
+                    <option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</option>
+                    <option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Posição do rótulo</mat-label>
+                  <mat-label>{{ tx('editor.general.labelPosition', 'Label position') }}</mat-label>
                   <select matNativeControl [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
-                    <option value="end">Ao lado</option>
-                    <option value="bottom">Abaixo</option>
+                    <option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</option>
+                    <option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Densidade</mat-label>
+                  <mat-label>{{ tx('editor.general.density', 'Density') }}</mat-label>
                   <select matNativeControl [(ngModel)]="config.density" (ngModelChange)="markDirty()">
-                    <option [ngValue]="undefined">Padrão</option>
-                    <option value="comfortable">Confortável</option>
-                    <option value="compact">Compacta</option>
+                    <option [ngValue]="undefined">{{ tx('editor.general.density.default', 'Default') }}</option>
+                    <option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</option>
+                    <option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Duração da animação</mat-label>
-                  <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" placeholder="Ex.: 300ms" />
+                  <mat-label>{{ tx('editor.general.animationDuration', 'Animation duration') }}</mat-label>
+                  <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.animationPlaceholder', 'e.g.: 300ms')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Etapa inicial</mat-label>
+                  <mat-label>{{ tx('editor.general.initialStep', 'Initial step') }}</mat-label>
                   <input matInput type="number" [(ngModel)]="config.selectedIndex" (ngModelChange)="markDirty()" />
                 </mat-form-field>
               </div>
               <div class="toggle-group">
-                <mat-slide-toggle [(ngModel)]="config.linear" (ngModelChange)="markDirty()">Respeitar ordem (linear)</mat-slide-toggle>
-                <mat-slide-toggle [(ngModel)]="config.disableRipple" (ngModelChange)="markDirty()">Desativar efeitos de clique</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="config.linear" (ngModelChange)="markDirty()">{{ tx('editor.general.linear', 'Respect order (linear)') }}</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="config.disableRipple" (ngModelChange)="markDirty()">{{ tx('editor.general.disableRipple', 'Disable click effects') }}</mat-slide-toggle>
               </div>
             </div>
             <details class="disclosure">
               <summary>
-                <span class="section-title">Classes e integração visual</span>
-                <span class="section-subtitle">Use apenas quando precisar aplicar CSS escopado no host.</span>
+                <span class="section-title">{{ tx('editor.general.visualTitle', 'Classes and visual integration') }}</span>
+                <span class="section-subtitle">{{ tx('editor.general.visualSubtitle', 'Use only when you need to apply scoped CSS on the host.') }}</span>
               </summary>
               <div class="detail-grid disclosure-body">
                 <mat-form-field appearance="outline" class="field-span-2">
-                  <mat-label>Classe do stepper</mat-label>
-                  <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" placeholder="Ex.: meu-stepper" />
+                  <mat-label>{{ tx('editor.general.stepperClass', 'Stepper class') }}</mat-label>
+                  <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.stepperClassPlaceholder', 'e.g.: my-stepper')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Classe do cabeçalho</mat-label>
-                  <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-header" />
+                  <mat-label>{{ tx('editor.general.headerClass', 'Header class') }}</mat-label>
+                  <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.headerClassPlaceholder', 'e.g.: stepper-header')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Classe do conteúdo</mat-label>
-                  <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-content" />
+                  <mat-label>{{ tx('editor.general.contentClass', 'Content class') }}</mat-label>
+                  <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.contentClassPlaceholder', 'e.g.: stepper-content')" />
                 </mat-form-field>
               </div>
             </details>
           </div>
         </mat-tab>
 
-        <mat-tab label="Etapas">
+        <mat-tab [label]="tx('editor.tabs.steps', 'Steps')">
           <div class="tab-pad">
             <div class="editor-intro">
               <div class="editor-intro-copy">
-                <div class="eyebrow">Estrutura do fluxo</div>
-                <div class="editor-title">Defina a narrativa de cada etapa</div>
-                <div class="editor-subtitle">Organize títulos, estados e conteúdo da etapa sem misturar configuração técnica com ações de montagem.</div>
+                <div class="eyebrow">{{ tx('editor.steps.eyebrow', 'Flow structure') }}</div>
+                <div class="editor-title">{{ tx('editor.steps.title', 'Define the narrative of each step') }}</div>
+                <div class="editor-subtitle">{{ tx('editor.steps.subtitle', 'Organize titles, states and step content without mixing technical configuration with assembly actions.') }}</div>
               </div>
               <div class="editor-intro-meta">
                 <div class="meta-pill">
-                  <span class="meta-label">Etapas</span>
+                  <span class="meta-label">{{ tx('editor.steps.count', 'Steps') }}</span>
                   <strong>{{ config.steps.length }}</strong>
                 </div>
               </div>
@@ -1384,16 +1855,16 @@ class PraxisStepperConfigEditor {
             <div class="pdx-steps">
               <div class="pdx-steps-header">
                 <div>
-                  <div class="section-title">Mapa de etapas</div>
-                  <div class="section-subtitle">Arraste para reordenar e selecione uma etapa para editar o conteúdo.</div>
+                  <div class="section-title">{{ tx('editor.steps.mapTitle', 'Step map') }}</div>
+                  <div class="section-subtitle">{{ tx('editor.steps.mapSubtitle', 'Drag to reorder and select a step to edit its content.') }}</div>
                 </div>
-                <button mat-flat-button color="primary" (click)="addStep()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar etapa</button>
+                <button mat-flat-button color="primary" (click)="addStep()"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ tx('editor.steps.add', 'Add step') }}</button>
               </div>
               <div class="steps-workspace" *ngIf="activeStep as step; else noSteps">
                 <div
                   cdkDropList
                   role="listbox"
-                  aria-label="Lista de etapas"
+                  [attr.aria-label]="tx('editor.steps.listAria', 'Step list')"
                   (cdkDropListDropped)="drop($event)"
                   class="pdx-step-list">
                   <div
@@ -1412,19 +1883,19 @@ class PraxisStepperConfigEditor {
                     <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
                     <div class="step-summary">
                       <div class="step-summary-head">
-                        <div class="step-summary-index">Etapa {{ i + 1 }}</div>
-                        <div class="step-summary-title">{{ s.label || 'Sem título' }}</div>
+                        <div class="step-summary-index">{{ stepIndexLabel(i) }}</div>
+                        <div class="step-summary-title">{{ s.label || tx('editor.steps.untitled', 'Untitled') }}</div>
                       </div>
-                      <div class="step-summary-sub">{{ s.id || 'Sem identificador' }}</div>
+                      <div class="step-summary-sub">{{ s.id || tx('editor.steps.noId', 'No identifier') }}</div>
                       <div class="step-summary-flags">
-                        <span class="summary-chip" *ngIf="s.optional">Opcional</span>
-                        <span class="summary-chip" *ngIf="s.completed">Concluída</span>
-                        <span class="summary-chip summary-chip-warn" *ngIf="s.hasError">Erro</span>
-                        <span class="summary-chip" *ngIf="s.form">Formulário</span>
+                        <span class="summary-chip" *ngIf="s.optional">{{ tx('editor.steps.optional', 'Optional') }}</span>
+                        <span class="summary-chip" *ngIf="s.completed">{{ tx('editor.steps.completed', 'Completed') }}</span>
+                        <span class="summary-chip summary-chip-warn" *ngIf="s.hasError">{{ tx('editor.steps.error', 'Error') }}</span>
+                        <span class="summary-chip" *ngIf="s.form">{{ tx('editor.steps.form', 'Form') }}</span>
                       </div>
                     </div>
                     <div class="pdx-actions">
-                      <button mat-icon-button color="warn" (click)="removeStep(i); $event.stopPropagation()" matTooltip="Remover" [attr.aria-label]="'Remover etapa ' + (s.label || (i + 1))">
+                      <button mat-icon-button color="warn" (click)="removeStep(i); $event.stopPropagation()" [matTooltip]="tx('editor.steps.remove', 'Remove')" [attr.aria-label]="stepRemoveAria(s, i)">
                         <mat-icon [praxisIcon]="'delete'"></mat-icon>
                       </button>
                     </div>
@@ -1434,52 +1905,52 @@ class PraxisStepperConfigEditor {
                 <div class="pdx-active-step">
                   <div class="hdr">
                     <div class="active-step-head">
-                      <div class="eyebrow">Etapa selecionada</div>
-                      <div class="title">Editando: {{ step.label }}</div>
-                      <div class="section-subtitle">Ajuste conteúdo principal primeiro. Configurações secundárias ficam recolhidas para reduzir ruído.</div>
+                      <div class="eyebrow">{{ tx('editor.steps.selectedEyebrow', 'Selected step') }}</div>
+                      <div class="title">{{ editingStepTitle(step) }}</div>
+                      <div class="section-subtitle">{{ tx('editor.steps.selectedSubtitle', 'Adjust the main content first. Secondary settings stay collapsed to reduce noise.') }}</div>
                     </div>
                   </div>
 
                   <div class="section">
-                    <div class="section-title">Dados principais</div>
+                    <div class="section-title">{{ tx('editor.steps.mainData', 'Main data') }}</div>
                     <div class="detail-grid">
                       <mat-form-field appearance="outline" class="field-span-2">
-                        <mat-label>Título da etapa</mat-label>
+                        <mat-label>{{ tx('editor.steps.stepTitle', 'Step title') }}</mat-label>
                         <input matInput [(ngModel)]="step.label" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                       <mat-form-field appearance="outline">
-                        <mat-label>Identificador</mat-label>
+                        <mat-label>{{ tx('editor.steps.identifier', 'Identifier') }}</mat-label>
                         <input matInput [(ngModel)]="step.id" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                       <mat-form-field appearance="outline">
-                        <mat-label>Ícone ou estado</mat-label>
-                        <input matInput [(ngModel)]="step.state" (ngModelChange)="markDirty()" placeholder="Ex.: number, done, edit" />
+                        <mat-label>{{ tx('editor.steps.iconOrState', 'Icon or state') }}</mat-label>
+                        <input matInput [(ngModel)]="step.state" (ngModelChange)="markDirty()" [placeholder]="tx('editor.steps.iconOrStatePlaceholder', 'e.g.: number, done, edit')" />
                       </mat-form-field>
                       <mat-form-field appearance="outline" class="field-span-2">
-                        <mat-label>Mensagem de erro</mat-label>
+                        <mat-label>{{ tx('editor.steps.errorMessage', 'Error message') }}</mat-label>
                         <input matInput [(ngModel)]="step.errorMessage" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                     </div>
                     <div class="toggle-group">
-                      <mat-slide-toggle [(ngModel)]="step.optional" (ngModelChange)="markDirty()">Etapa opcional</mat-slide-toggle>
-                      <mat-slide-toggle [(ngModel)]="step.editable" (ngModelChange)="markDirty()">Permitir voltar e editar</mat-slide-toggle>
-                      <mat-slide-toggle [(ngModel)]="step.completed" (ngModelChange)="markDirty()">Marcar como concluída</mat-slide-toggle>
-                      <mat-slide-toggle [(ngModel)]="step.hasError" (ngModelChange)="markDirty()">Marcar como com erro</mat-slide-toggle>
+                      <mat-slide-toggle [(ngModel)]="step.optional" (ngModelChange)="markDirty()">{{ tx('editor.steps.optionalToggle', 'Optional step') }}</mat-slide-toggle>
+                      <mat-slide-toggle [(ngModel)]="step.editable" (ngModelChange)="markDirty()">{{ tx('editor.steps.editableToggle', 'Allow going back and editing') }}</mat-slide-toggle>
+                      <mat-slide-toggle [(ngModel)]="step.completed" (ngModelChange)="markDirty()">{{ tx('editor.steps.completedToggle', 'Mark as completed') }}</mat-slide-toggle>
+                      <mat-slide-toggle [(ngModel)]="step.hasError" (ngModelChange)="markDirty()">{{ tx('editor.steps.errorToggle', 'Mark as error') }}</mat-slide-toggle>
                     </div>
                   </div>
 
                   <details class="disclosure">
                     <summary>
-                      <span class="section-title">Acessibilidade e detalhes técnicos</span>
-                      <span class="section-subtitle">Rótulos auxiliares e metadados menos usados.</span>
+                      <span class="section-title">{{ tx('editor.steps.accessibilityTitle', 'Accessibility and technical details') }}</span>
+                      <span class="section-subtitle">{{ tx('editor.steps.accessibilitySubtitle', 'Auxiliary labels and less-used metadata.') }}</span>
                     </summary>
                     <div class="detail-grid disclosure-body">
                       <mat-form-field appearance="outline">
-                        <mat-label>Texto alternativo</mat-label>
+                        <mat-label>{{ tx('editor.steps.altText', 'Alternative text') }}</mat-label>
                         <input matInput [(ngModel)]="step.ariaLabel" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                       <mat-form-field appearance="outline">
-                        <mat-label>ID que descreve</mat-label>
+                        <mat-label>{{ tx('editor.steps.describedBy', 'Described-by ID') }}</mat-label>
                         <input matInput [(ngModel)]="step.ariaLabelledby" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                     </div>
@@ -1489,37 +1960,37 @@ class PraxisStepperConfigEditor {
                 <div class="section editorial-section">
                   <div class="section-head">
                     <div>
-                      <div class="section-title">Conteúdo editorial</div>
-                      <div class="section-subtitle">Use blocos de apoio para contextualizar a etapa antes ou depois do formulário.</div>
+                      <div class="section-title">{{ tx('editor.steps.editorialTitle', 'Editorial content') }}</div>
+                      <div class="section-subtitle">{{ tx('editor.steps.editorialSubtitle', 'Use supporting blocks to contextualize the step before or after the form.') }}</div>
                     </div>
                   </div>
 
                   <div class="zone-grid">
                     <div class="zone-column">
                       <div class="zone-head">
-                        <div class="zone-title">Antes do formulário</div>
+                        <div class="zone-title">{{ tx('editor.steps.zoneBefore', 'Before form') }}</div>
                         <div class="zone-actions">
                           <span class="zone-count">{{ editorialBeforeWidgets(step).length }}</span>
                           <button mat-stroked-button [matMenuTriggerFor]="beforeEditorialMenu">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Adicionar
+                            {{ tx('editor.steps.addBlock', 'Add') }}
                           </button>
                           <mat-menu #beforeEditorialMenu="matMenu">
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'before')">
                               <mat-icon [praxisIcon]="'view_module'"></mat-icon>
-                              Grade de benefícios
+                              {{ tx('editor.steps.widgetBenefits', 'Benefits grid') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'before')">
                               <mat-icon [praxisIcon]="'article'"></mat-icon>
-                              Bloco de conteúdo
+                              {{ tx('editor.steps.widgetContent', 'Content block') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'before')">
                               <mat-icon [praxisIcon]="'info'"></mat-icon>
-                              Aviso inline
+                              {{ tx('editor.steps.widgetNotice', 'Inline notice') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'before')">
                               <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
-                              Divisor
+                              {{ tx('editor.steps.widgetDivider', 'Divider') }}
                             </button>
                           </mat-menu>
                         </div>
@@ -1534,49 +2005,49 @@ class PraxisStepperConfigEditor {
                             <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
                           </div>
                           <div class="actions">
-                            <button mat-icon-button (click)="editWidget(w)" matTooltip="Editar bloco">
+                            <button mat-icon-button (click)="editWidget(w)" [matTooltip]="tx('editor.steps.editBlock', 'Edit block')">
                               <mat-icon [praxisIcon]="'tune'"></mat-icon>
                             </button>
-                            <button mat-icon-button (click)="moveEditorialWidget(w, 'before', 'after')" matTooltip="Mover para depois do formulário">
+                            <button mat-icon-button (click)="moveEditorialWidget(w, 'before', 'after')" [matTooltip]="tx('editor.steps.moveAfter', 'Move after the form')">
                               <mat-icon [praxisIcon]="'south'"></mat-icon>
                             </button>
-                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'before')" matTooltip="Duplicar bloco">
+                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'before')" [matTooltip]="tx('editor.steps.duplicateBlock', 'Duplicate block')">
                               <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
                             </button>
-                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'before')" matTooltip="Remover bloco">
+                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'before')" [matTooltip]="tx('editor.steps.removeBlock', 'Remove block')">
                               <mat-icon [praxisIcon]="'delete'"></mat-icon>
                             </button>
                           </div>
                         </div>
-                        <div class="empty" *ngIf="!editorialBeforeWidgets(step).length">Nenhum bloco nesta zona.</div>
+                        <div class="empty" *ngIf="!editorialBeforeWidgets(step).length">{{ tx('editor.steps.emptyZone', 'No blocks in this zone.') }}</div>
                       </div>
                     </div>
 
                     <div class="zone-column">
                       <div class="zone-head">
-                        <div class="zone-title">Depois do formulário</div>
+                        <div class="zone-title">{{ tx('editor.steps.zoneAfter', 'After form') }}</div>
                         <div class="zone-actions">
                           <span class="zone-count">{{ editorialAfterWidgets(step).length }}</span>
                           <button mat-stroked-button [matMenuTriggerFor]="afterEditorialMenu">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Adicionar
+                            {{ tx('editor.steps.addBlock', 'Add') }}
                           </button>
                           <mat-menu #afterEditorialMenu="matMenu">
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'after')">
                               <mat-icon [praxisIcon]="'view_module'"></mat-icon>
-                              Grade de benefícios
+                              {{ tx('editor.steps.widgetBenefits', 'Benefits grid') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'after')">
                               <mat-icon [praxisIcon]="'article'"></mat-icon>
-                              Bloco de conteúdo
+                              {{ tx('editor.steps.widgetContent', 'Content block') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'after')">
                               <mat-icon [praxisIcon]="'info'"></mat-icon>
-                              Aviso inline
+                              {{ tx('editor.steps.widgetNotice', 'Inline notice') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'after')">
                               <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
-                              Divisor
+                              {{ tx('editor.steps.widgetDivider', 'Divider') }}
                             </button>
                           </mat-menu>
                         </div>
@@ -1591,46 +2062,46 @@ class PraxisStepperConfigEditor {
                             <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
                           </div>
                           <div class="actions">
-                            <button mat-icon-button (click)="editWidget(w)" matTooltip="Editar bloco">
+                            <button mat-icon-button (click)="editWidget(w)" [matTooltip]="tx('editor.steps.editBlock', 'Edit block')">
                               <mat-icon [praxisIcon]="'tune'"></mat-icon>
                             </button>
-                            <button mat-icon-button (click)="moveEditorialWidget(w, 'after', 'before')" matTooltip="Mover para antes do formulário">
+                            <button mat-icon-button (click)="moveEditorialWidget(w, 'after', 'before')" [matTooltip]="tx('editor.steps.moveBefore', 'Move before the form')">
                               <mat-icon [praxisIcon]="'north'"></mat-icon>
                             </button>
-                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'after')" matTooltip="Duplicar bloco">
+                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'after')" [matTooltip]="tx('editor.steps.duplicateBlock', 'Duplicate block')">
                               <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
                             </button>
-                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'after')" matTooltip="Remover bloco">
+                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'after')" [matTooltip]="tx('editor.steps.removeBlock', 'Remove block')">
                               <mat-icon [praxisIcon]="'delete'"></mat-icon>
                             </button>
                           </div>
                         </div>
-                        <div class="empty" *ngIf="!editorialAfterWidgets(step).length">Nenhum bloco nesta zona.</div>
+                        <div class="empty" *ngIf="!editorialAfterWidgets(step).length">{{ tx('editor.steps.emptyZone', 'No blocks in this zone.') }}</div>
                       </div>
                     </div>
                   </div>
                 </div>
 
                 <div class="section">
-                  <div class="section-title">Formulário da etapa</div>
+                  <div class="section-title">{{ tx('editor.steps.formSectionTitle', 'Step form') }}</div>
                   <div class="section-body">
                     <ng-container *ngIf="step.form; else addFormBtn">
                       <div class="form-row-card">
                         <div class="form-row-main">
                           <mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>
                           <div>
-                            <div class="name">Formulário principal</div>
+                            <div class="name">{{ tx('editor.steps.mainFormTitle', 'Main form') }}</div>
                             <div class="sub">{{ step.form.formId || step.id || '—' }}</div>
                           </div>
                         </div>
                         <div class="form-row-actions">
-                          <button mat-button (click)="editMainForm()"><mat-icon [praxisIcon]="'tune'"></mat-icon> Editar</button>
-                          <button mat-button color="warn" (click)="removeMainForm()"><mat-icon [praxisIcon]="'delete'"></mat-icon> Remover</button>
+                          <button mat-button (click)="editMainForm()"><mat-icon [praxisIcon]="'tune'"></mat-icon>{{ tx('editor.steps.edit', 'Edit') }}</button>
+                          <button mat-button color="warn" (click)="removeMainForm()"><mat-icon [praxisIcon]="'delete'"></mat-icon>{{ tx('editor.steps.remove', 'Remove') }}</button>
                         </div>
                       </div>
                     </ng-container>
                     <ng-template #addFormBtn>
-                      <button mat-stroked-button color="primary" (click)="addMainForm()"><mat-icon [praxisIcon]="'add'"></mat-icon> Adicionar formulário</button>
+                      <button mat-stroked-button color="primary" (click)="addMainForm()"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ tx('editor.steps.addForm', 'Add form') }}</button>
                     </ng-template>
                   </div>
                 </div>
@@ -1638,12 +2109,12 @@ class PraxisStepperConfigEditor {
                 <div class="section">
                   <div class="section-head">
                     <div>
-                      <div class="section-title">Componentes avançados</div>
-                      <div class="section-subtitle">Atalhos para montar experiências mais ricas sem perder clareza no fluxo.</div>
+                      <div class="section-title">{{ tx('editor.steps.advancedTitle', 'Advanced components') }}</div>
+                      <div class="section-subtitle">{{ tx('editor.steps.advancedSubtitle', 'Shortcuts to assemble richer experiences without losing clarity in the flow.') }}</div>
                     </div>
                     <button mat-stroked-button (click)="openMoreComponents()">
                       <mat-icon [praxisIcon]="'add'"></mat-icon>
-                      Mais componentes
+                      {{ tx('editor.steps.moreComponents', 'More components') }}
                     </button>
                   </div>
                   <div class="section-body">
@@ -1652,14 +2123,14 @@ class PraxisStepperConfigEditor {
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'account_tree'"></mat-icon>
                           <div>
-                            <div class="cta-title">Lista em árvore</div>
-                            <div class="cta-desc">Dados hierárquicos com seleção simples.</div>
+                            <div class="cta-title">{{ tx('editor.steps.treeListTitle', 'Tree list') }}</div>
+                            <div class="cta-desc">{{ tx('editor.steps.treeListDesc', 'Hierarchical data with simple selection.') }}</div>
                           </div>
                         </div>
                         <div class="cta-actions">
                           <button mat-stroked-button (click)="addTreeList()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir árvore
+                            {{ tx('editor.steps.insertTree', 'Insert tree') }}
                           </button>
                         </div>
                       </div>
@@ -1667,14 +2138,14 @@ class PraxisStepperConfigEditor {
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'swap_horiz'"></mat-icon>
                           <div>
-                            <div class="cta-title">Transferência de itens</div>
-                            <div class="cta-desc">Mover itens entre listas para seleção múltipla.</div>
+                            <div class="cta-title">{{ tx('editor.steps.transferTitle', 'Item transfer') }}</div>
+                            <div class="cta-desc">{{ tx('editor.steps.transferDesc', 'Move items between lists for multi-selection.') }}</div>
                           </div>
                         </div>
                         <div class="cta-actions">
                           <button mat-stroked-button (click)="addTransferListQuick()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir transferência
+                            {{ tx('editor.steps.insertTransfer', 'Insert transfer') }}
                           </button>
                         </div>
                       </div>
@@ -1682,14 +2153,14 @@ class PraxisStepperConfigEditor {
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'search'"></mat-icon>
                           <div>
-                            <div class="cta-title">Seleção com busca</div>
-                            <div class="cta-desc">Seleção com busca local ou remota.</div>
+                            <div class="cta-title">{{ tx('editor.steps.searchTitle', 'Searchable selection') }}</div>
+                            <div class="cta-desc">{{ tx('editor.steps.searchDesc', 'Selection with local or remote search.') }}</div>
                           </div>
                         </div>
                         <div class="cta-actions">
                           <button mat-stroked-button (click)="addSearchableSelect()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir seletor
+                            {{ tx('editor.steps.insertSelector', 'Insert selector') }}
                           </button>
                         </div>
                       </div>
@@ -1697,14 +2168,14 @@ class PraxisStepperConfigEditor {
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'upload_file'"></mat-icon>
                           <div>
-                            <div class="cta-title">Upload de arquivos</div>
-                            <div class="cta-desc">Anexos com validação e fluxo de upload.</div>
+                            <div class="cta-title">{{ tx('editor.steps.uploadTitle', 'File upload') }}</div>
+                            <div class="cta-desc">{{ tx('editor.steps.uploadDesc', 'Attachments with validation and upload flow.') }}</div>
                           </div>
                         </div>
                         <div class="cta-actions">
                           <button mat-stroked-button (click)="addFilesUpload()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir upload
+                            {{ tx('editor.steps.insertUpload', 'Insert upload') }}
                           </button>
                         </div>
                       </div>
@@ -1718,15 +2189,15 @@ class PraxisStepperConfigEditor {
                           <div class="sub">{{ w.id }}</div>
                         </div>
                         <div class="actions">
-                          <button mat-icon-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)" matTooltip="Editar componente">
+                          <button mat-icon-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)" [matTooltip]="tx('editor.steps.editComponent', 'Edit component')">
                             <mat-icon [praxisIcon]="'tune'"></mat-icon>
                           </button>
-                          <button mat-icon-button color="warn" (click)="removeAdvancedWidget(w)" matTooltip="Remover componente">
+                          <button mat-icon-button color="warn" (click)="removeAdvancedWidget(w)" [matTooltip]="tx('editor.steps.removeComponent', 'Remove component')">
                             <mat-icon [praxisIcon]="'delete'"></mat-icon>
                           </button>
                         </div>
                       </div>
-                      <div class="empty" *ngIf="!advancedWidgets(step).length">Nenhum componente avançado adicionado.</div>
+                      <div class="empty" *ngIf="!advancedWidgets(step).length">{{ tx('editor.steps.emptyAdvanced', 'No advanced components added.') }}</div>
                     </div>
                   </div>
                 </div>
@@ -1735,88 +2206,88 @@ class PraxisStepperConfigEditor {
 		            </div>
 		            </div>
 		            <ng-template #noSteps>
-	              <div class="muted">Nenhuma etapa definida.</div>
+	              <div class="muted">{{ tx('editor.steps.noSteps', 'No steps defined.') }}</div>
 	            </ng-template>
 	          </div>
         </mat-tab>
 
-        <mat-tab label="Navegação">
+        <mat-tab [label]="tx('editor.navigation.tab', 'Navigation')">
           <div class="tab-pad">
             <div class="editor-intro">
               <div class="editor-intro-copy">
-                <div class="eyebrow">Ações padrão</div>
-                <div class="editor-title">Configure a navegação entre etapas</div>
-                <div class="editor-subtitle">Defina quando os botões padrão aparecem e como eles se apresentam visualmente no fluxo.</div>
+                <div class="eyebrow">{{ tx('editor.navigation.eyebrow', 'Default actions') }}</div>
+                <div class="editor-title">{{ tx('editor.navigation.title', 'Configure navigation between steps') }}</div>
+                <div class="editor-subtitle">{{ tx('editor.navigation.subtitle', 'Define when default buttons appear and how they present visually in the flow.') }}</div>
               </div>
             </div>
             <div class="settings-group">
               <div class="group-head">
-                <div class="section-title">Comportamento dos botões</div>
-                <div class="section-subtitle">Aparência e alinhamento da navegação padrão do stepper.</div>
+                <div class="section-title">{{ tx('editor.navigation.behaviorTitle', 'Button behavior') }}</div>
+                <div class="section-subtitle">{{ tx('editor.navigation.behaviorSubtitle', 'Appearance and alignment of the default stepper navigation.') }}</div>
               </div>
               <div class="toggle-group">
-                <mat-slide-toggle [(ngModel)]="navigationCfg.visible" (ngModelChange)="markDirty()">Mostrar navegação padrão</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="navigationCfg.visible" (ngModelChange)="markDirty()">{{ tx('editor.navigation.visible', 'Show default navigation') }}</mat-slide-toggle>
               </div>
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
-                  <mat-label>Estilo dos botões</mat-label>
+                  <mat-label>{{ tx('editor.navigation.variant', 'Button style') }}</mat-label>
                   <select matNativeControl [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">Padrão (elevado)</option>
-                    <option value="basic">Texto</option>
-                    <option value="flat">Plano</option>
-                    <option value="stroked">Contornado</option>
-                    <option value="raised">Elevado</option>
+                    <option [ngValue]="undefined">{{ tx('editor.navigation.variant.default', 'Default (raised)') }}</option>
+                    <option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</option>
+                    <option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</option>
+                    <option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</option>
+                    <option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Cor</mat-label>
+                  <mat-label>{{ tx('editor.navigation.color', 'Color') }}</mat-label>
                   <select matNativeControl [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">Padrão</option>
-                    <option value="primary">Primária</option>
-                    <option value="accent">Acento</option>
-                    <option value="warn">Alerta</option>
+                    <option [ngValue]="undefined">{{ tx('editor.navigation.color.default', 'Default') }}</option>
+                    <option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</option>
+                    <option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</option>
+                    <option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Alinhamento</mat-label>
+                  <mat-label>{{ tx('editor.navigation.align', 'Alignment') }}</mat-label>
                   <select matNativeControl [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">Direita</option>
-                    <option value="start">Esquerda</option>
-                    <option value="center">Centro</option>
-                    <option value="space-between">Espaçado</option>
-                    <option value="end">Direita</option>
+                    <option [ngValue]="undefined">{{ tx('editor.navigation.align.default', 'Right') }}</option>
+                    <option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</option>
+                    <option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</option>
+                    <option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</option>
+                    <option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</option>
                   </select>
                 </mat-form-field>
               </div>
             </div>
             <div class="settings-group">
               <div class="group-head">
-                <div class="section-title">Rótulos e ícones</div>
-                <div class="section-subtitle">Ajuste a cópia e os ícones usados nas ações de voltar e avançar.</div>
+                <div class="section-title">{{ tx('editor.navigation.labelsTitle', 'Labels and icons') }}</div>
+                <div class="section-subtitle">{{ tx('editor.navigation.labelsSubtitle', 'Adjust the copy and icons used in back and next actions.') }}</div>
               </div>
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
-                  <mat-label>Texto do botão Voltar</mat-label>
-                  <input matInput [(ngModel)]="navigationCfg.prevLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Voltar" [disabled]="!navigationCfg.visible" />
+                  <mat-label>{{ tx('editor.navigation.prevLabel', 'Back button text') }}</mat-label>
+                  <input matInput [(ngModel)]="navigationCfg.prevLabel" (ngModelChange)="markDirty()" [placeholder]="tx('editor.navigation.prevPlaceholder', 'e.g.: Back')" [disabled]="!navigationCfg.visible" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Texto do botão Próximo</mat-label>
-                  <input matInput [(ngModel)]="navigationCfg.nextLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Próximo" [disabled]="!navigationCfg.visible" />
+                  <mat-label>{{ tx('editor.navigation.nextLabel', 'Next button text') }}</mat-label>
+                  <input matInput [(ngModel)]="navigationCfg.nextLabel" (ngModelChange)="markDirty()" [placeholder]="tx('editor.navigation.nextPlaceholder', 'e.g.: Next')" [disabled]="!navigationCfg.visible" />
                 </mat-form-field>
               </div>
               <div class="inline-actions-grid">
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone de Voltar</div>
-                  <button mat-stroked-button type="button" (click)="pickNavIcon('prevIcon')" [disabled]="!navigationCfg.visible" aria-label="Escolher ícone do botão Voltar">
+                  <div class="section-title">{{ tx('editor.navigation.prevIcon', 'Back icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickNavIcon('prevIcon')" [disabled]="!navigationCfg.visible" [attr.aria-label]="tx('editor.navigation.pickPrevIcon', 'Choose the Back button icon')">
                     <mat-icon *ngIf="navigationCfg.prevIcon" [fontIcon]="navigationCfg.prevIcon"></mat-icon>
-                    <ng-container *ngIf="!navigationCfg.prevIcon">Escolher</ng-container>
+                    <ng-container *ngIf="!navigationCfg.prevIcon">{{ tx('editor.shared.pick', 'Choose') }}</ng-container>
                   </button>
                 </div>
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone de Próximo</div>
-                  <button mat-stroked-button type="button" (click)="pickNavIcon('nextIcon')" [disabled]="!navigationCfg.visible" aria-label="Escolher ícone do botão Próximo">
+                  <div class="section-title">{{ tx('editor.navigation.nextIcon', 'Next icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickNavIcon('nextIcon')" [disabled]="!navigationCfg.visible" [attr.aria-label]="tx('editor.navigation.pickNextIcon', 'Choose the Next button icon')">
                     <mat-icon *ngIf="navigationCfg.nextIcon" [fontIcon]="navigationCfg.nextIcon"></mat-icon>
-                    <ng-container *ngIf="!navigationCfg.nextIcon">Escolher</ng-container>
+                    <ng-container *ngIf="!navigationCfg.nextIcon">{{ tx('editor.shared.pick', 'Choose') }}</ng-container>
                   </button>
                 </div>
               </div>
@@ -1824,47 +2295,47 @@ class PraxisStepperConfigEditor {
           </div>
         </mat-tab>
 
-        <mat-tab label="Aparência">
+        <mat-tab [label]="tx('editor.appearance.tab', 'Appearance')">
           <div class="tab-pad">
             <div class="editor-intro">
               <div class="editor-intro-copy">
-                <div class="eyebrow">Tema visual</div>
-                <div class="editor-title">Personalize aparência sem perder consistência</div>
-                <div class="editor-subtitle">Comece pelos ajustes rápidos. Tokens e snippet SCSS ficam recolhidos para cenários avançados.</div>
+                <div class="eyebrow">{{ tx('editor.appearance.eyebrow', 'Visual theme') }}</div>
+                <div class="editor-title">{{ tx('editor.appearance.title', 'Customize appearance without losing consistency') }}</div>
+                <div class="editor-subtitle">{{ tx('editor.appearance.subtitle', 'Start with the quick adjustments. Tokens and the SCSS snippet stay collapsed for advanced scenarios.') }}</div>
               </div>
             </div>
             <div class="settings-group">
               <div class="group-head">
-                <div class="section-title">Ajustes rápidos</div>
-                <div class="section-subtitle">Controles mais comuns para tamanho, peso tipográfico e tema.</div>
+                <div class="section-title">{{ tx('editor.appearance.quickTitle', 'Quick adjustments') }}</div>
+                <div class="section-subtitle">{{ tx('editor.appearance.quickSubtitle', 'Most common controls for sizing, typography weight and theme.') }}</div>
               </div>
               <div class="quick-grid">
                 <mat-form-field appearance="outline">
-                  <mat-label>Altura do cabeçalho (px)</mat-label>
-                  <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" placeholder="Ex.: 48" />
+                  <mat-label>{{ tx('editor.appearance.headerHeight', 'Header height (px)') }}</mat-label>
+                  <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" [placeholder]="tx('editor.appearance.headerHeightPlaceholder', 'e.g.: 48')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Tamanho do texto (px)</mat-label>
-                  <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" placeholder="Ex.: 14" />
+                  <mat-label>{{ tx('editor.appearance.textSize', 'Text size (px)') }}</mat-label>
+                  <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" [placeholder]="tx('editor.appearance.textSizePlaceholder', 'e.g.: 14')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Peso do texto</mat-label>
+                  <mat-label>{{ tx('editor.appearance.textWeight', 'Text weight') }}</mat-label>
                   <select matNativeControl [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)">
-                    <option [ngValue]="undefined">Padrão</option>
-                    <option value="400">Normal</option>
-                    <option value="500">Médio</option>
-                    <option value="600">Seminegrito</option>
-                    <option value="700">Negrito</option>
+                    <option [ngValue]="undefined">{{ tx('editor.appearance.textWeight.default', 'Default') }}</option>
+                    <option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</option>
+                    <option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</option>
+                    <option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</option>
+                    <option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline" class="field-span-2">
-                  <mat-label>Classe de tema</mat-label>
-                  <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="Ex.: theme-stepper-custom" />
+                  <mat-label>{{ tx('editor.appearance.themeClass', 'Theme class') }}</mat-label>
+                  <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" [placeholder]="tx('editor.appearance.themeClassPlaceholder', 'e.g.: theme-stepper-custom')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Conjunto de ícones</mat-label>
+                  <mat-label>{{ tx('editor.appearance.iconSet', 'Icon set') }}</mat-label>
                   <select matNativeControl [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()">
-                    <option [ngValue]="undefined">Material Icons (padrão)</option>
+                    <option [ngValue]="undefined">{{ tx('editor.appearance.iconSet.default', 'Material Icons (default)') }}</option>
                     <option value="material-symbols-outlined">Material Symbols (Outlined)</option>
                     <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
                     <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
@@ -1873,63 +2344,63 @@ class PraxisStepperConfigEditor {
               </div>
               <div class="inline-actions-grid icon-picker-grid">
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone do número</div>
-                  <button mat-stroked-button type="button" (click)="pickIcon('number')" aria-label="Escolher ícone do número">
+                  <div class="section-title">{{ tx('editor.appearance.iconNumber', 'Number icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickIcon('number')" [attr.aria-label]="tx('editor.appearance.pickIconNumber', 'Choose the number icon')">
                     <mat-icon *ngIf="icons.number; else pick" [fontIcon]="icons.number"></mat-icon>
-                    <ng-template #pick>Escolher</ng-template>
+                    <ng-template #pick>{{ tx('editor.shared.pick', 'Choose') }}</ng-template>
                   </button>
                 </div>
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone concluído</div>
-                  <button mat-stroked-button type="button" (click)="pickIcon('done')" aria-label="Escolher ícone de concluído">
+                  <div class="section-title">{{ tx('editor.appearance.iconDone', 'Completed icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickIcon('done')" [attr.aria-label]="tx('editor.appearance.pickIconDone', 'Choose the completed icon')">
                     <mat-icon *ngIf="icons.done; else pick2" [fontIcon]="icons.done"></mat-icon>
-                    <ng-template #pick2>Escolher</ng-template>
+                    <ng-template #pick2>{{ tx('editor.shared.pick', 'Choose') }}</ng-template>
                   </button>
                 </div>
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone edição</div>
-                  <button mat-stroked-button type="button" (click)="pickIcon('edit')" aria-label="Escolher ícone de edição">
+                  <div class="section-title">{{ tx('editor.appearance.iconEdit', 'Edit icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickIcon('edit')" [attr.aria-label]="tx('editor.appearance.pickIconEdit', 'Choose the edit icon')">
                     <mat-icon *ngIf="icons.edit; else pick3" [fontIcon]="icons.edit"></mat-icon>
-                    <ng-template #pick3>Escolher</ng-template>
+                    <ng-template #pick3>{{ tx('editor.shared.pick', 'Choose') }}</ng-template>
                   </button>
                 </div>
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone de erro</div>
-                  <button mat-stroked-button type="button" (click)="pickIcon('error')" aria-label="Escolher ícone de erro">
+                  <div class="section-title">{{ tx('editor.appearance.iconError', 'Error icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickIcon('error')" [attr.aria-label]="tx('editor.appearance.pickIconError', 'Choose the error icon')">
                     <mat-icon *ngIf="icons.error; else pick4" [fontIcon]="icons.error"></mat-icon>
-                    <ng-template #pick4>Escolher</ng-template>
+                    <ng-template #pick4>{{ tx('editor.shared.pick', 'Choose') }}</ng-template>
                   </button>
                 </div>
               </div>
               <div class="icons-hint" *ngIf="symbolsLikelySelected.length && !appearance.iconsSet">
                 <div class="muted">
-                  Dica: {{ symbolsLikelySelected.join(', ') }} são ícones do Material Symbols. Selecione um conjunto Symbols abaixo ou clique em
-                  <button mat-button color="primary" type="button" (click)="setIconsSetToSymbols()">Usar Material Symbols (Outlined)</button>.
+                  {{ tx('editor.appearance.symbolsHint', 'Hint: {{icons}} are Material Symbols icons. Select a Symbols set below or click').replace('{{icons}}', symbolsLikelySelected.join(', ')) }}
+                  <button mat-button color="primary" type="button" (click)="setIconsSetToSymbols()">{{ tx('editor.appearance.useSymbols', 'Use Material Symbols (Outlined)') }}</button>.
                 </div>
               </div>
               <div class="pdx-appearance-actions">
-                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('neutral')">Preset: neutro</button>
-                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('primary')">Preset: primário</button>
-                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('high-contrast')">Preset: alto contraste</button>
-                <button mat-button type="button" (click)="clearTokens()">Limpar tokens</button>
+                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('neutral')">{{ tx('editor.appearance.presetNeutral', 'Preset: neutral') }}</button>
+                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('primary')">{{ tx('editor.appearance.presetPrimary', 'Preset: primary') }}</button>
+                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('high-contrast')">{{ tx('editor.appearance.presetHighContrast', 'Preset: high contrast') }}</button>
+                <button mat-button type="button" (click)="clearTokens()">{{ tx('editor.appearance.clearTokens', 'Clear tokens') }}</button>
               </div>
             </div>
             <details class="disclosure">
               <summary>
-                <span class="section-title">Tokens avançados e snippet SCSS</span>
-                <span class="section-subtitle">Use quando precisar sair do ajuste rápido e controlar o tema com granularidade.</span>
+                <span class="section-title">{{ tx('editor.appearance.advancedTitle', 'Advanced tokens and SCSS snippet') }}</span>
+                <span class="section-subtitle">{{ tx('editor.appearance.advancedSubtitle', 'Use when you need to go beyond quick adjustments and control the theme with more granularity.') }}</span>
               </summary>
               <div class="disclosure-body">
                 <div class="tokens-grid">
                   <div class="token-item" *ngFor="let key of stepperTokenKeys">
                     <mat-form-field appearance="outline" class="w-full">
                       <mat-label>{{ key }}</mat-label>
-                      <input matInput [ngModel]="appearance.tokens?.[key]" (ngModelChange)="onTokenChange(key, $event)" placeholder="valor CSS ou var(--token)" />
+                      <input matInput [ngModel]="appearance.tokens?.[key]" (ngModelChange)="onTokenChange(key, $event)" [placeholder]="tx('editor.appearance.tokenPlaceholder', 'CSS value or var(--token)')" />
                     </mat-form-field>
                   </div>
                 </div>
                 <div class="code-card">
-                  <div class="code-head">Snippet SCSS</div>
+                  <div class="code-head">{{ tx('editor.appearance.scssSnippet', 'SCSS snippet') }}</div>
                   <pre class="code"><code>{{ scssSnippet() }}</code></pre>
                 </div>
               </div>
@@ -1956,101 +2427,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         MatDialogModule,
                         MatMenuModule,
                         MatTabsModule,
-                    ], template: `
+                    ], providers: [providePraxisStepperI18n()], template: `
     <div class="pdx-editor">
       <mat-tab-group>
-        <mat-tab label="Geral">
+        <mat-tab [label]="tx('editor.tabs.general', 'General')">
           <div class="tab-pad">
             <div class="editor-intro">
               <div class="editor-intro-copy">
-                <div class="eyebrow">Fundamentos</div>
-                <div class="editor-title">Defina o comportamento base do stepper</div>
-                <div class="editor-subtitle">Ajuste orientação, densidade, animação e classes utilitárias sem misturar decisões estruturais com customização avançada.</div>
+                <div class="eyebrow">{{ tx('editor.general.eyebrow', 'Foundations') }}</div>
+                <div class="editor-title">{{ tx('editor.general.title', 'Define the base stepper behavior') }}</div>
+                <div class="editor-subtitle">{{ tx('editor.general.subtitle', 'Adjust orientation, density, animation and utility classes without mixing structural decisions with advanced customization.') }}</div>
               </div>
             </div>
             <div class="settings-group">
               <div class="group-head">
-                <div class="section-title">Layout e navegação</div>
-                <div class="section-subtitle">Controla como as etapas aparecem e como o usuário percorre o fluxo.</div>
+                <div class="section-title">{{ tx('editor.general.layoutTitle', 'Layout and navigation') }}</div>
+                <div class="section-subtitle">{{ tx('editor.general.layoutSubtitle', 'Controls how steps appear and how the user moves through the flow.') }}</div>
               </div>
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
-                  <mat-label>Orientação</mat-label>
+                  <mat-label>{{ tx('editor.general.orientation', 'Orientation') }}</mat-label>
                   <select matNativeControl [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
-                    <option value="horizontal">Horizontal</option>
-                    <option value="vertical">Vertical</option>
+                    <option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</option>
+                    <option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Posição dos títulos</mat-label>
+                  <mat-label>{{ tx('editor.general.headerPosition', 'Title position') }}</mat-label>
                   <select matNativeControl [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
-                    <option value="top">Acima</option>
-                    <option value="bottom">Abaixo</option>
+                    <option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</option>
+                    <option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Posição do rótulo</mat-label>
+                  <mat-label>{{ tx('editor.general.labelPosition', 'Label position') }}</mat-label>
                   <select matNativeControl [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
-                    <option value="end">Ao lado</option>
-                    <option value="bottom">Abaixo</option>
+                    <option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</option>
+                    <option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Densidade</mat-label>
+                  <mat-label>{{ tx('editor.general.density', 'Density') }}</mat-label>
                   <select matNativeControl [(ngModel)]="config.density" (ngModelChange)="markDirty()">
-                    <option [ngValue]="undefined">Padrão</option>
-                    <option value="comfortable">Confortável</option>
-                    <option value="compact">Compacta</option>
+                    <option [ngValue]="undefined">{{ tx('editor.general.density.default', 'Default') }}</option>
+                    <option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</option>
+                    <option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Duração da animação</mat-label>
-                  <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" placeholder="Ex.: 300ms" />
+                  <mat-label>{{ tx('editor.general.animationDuration', 'Animation duration') }}</mat-label>
+                  <input matInput [(ngModel)]="config.animationDuration" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.animationPlaceholder', 'e.g.: 300ms')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Etapa inicial</mat-label>
+                  <mat-label>{{ tx('editor.general.initialStep', 'Initial step') }}</mat-label>
                   <input matInput type="number" [(ngModel)]="config.selectedIndex" (ngModelChange)="markDirty()" />
                 </mat-form-field>
               </div>
               <div class="toggle-group">
-                <mat-slide-toggle [(ngModel)]="config.linear" (ngModelChange)="markDirty()">Respeitar ordem (linear)</mat-slide-toggle>
-                <mat-slide-toggle [(ngModel)]="config.disableRipple" (ngModelChange)="markDirty()">Desativar efeitos de clique</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="config.linear" (ngModelChange)="markDirty()">{{ tx('editor.general.linear', 'Respect order (linear)') }}</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="config.disableRipple" (ngModelChange)="markDirty()">{{ tx('editor.general.disableRipple', 'Disable click effects') }}</mat-slide-toggle>
               </div>
             </div>
             <details class="disclosure">
               <summary>
-                <span class="section-title">Classes e integração visual</span>
-                <span class="section-subtitle">Use apenas quando precisar aplicar CSS escopado no host.</span>
+                <span class="section-title">{{ tx('editor.general.visualTitle', 'Classes and visual integration') }}</span>
+                <span class="section-subtitle">{{ tx('editor.general.visualSubtitle', 'Use only when you need to apply scoped CSS on the host.') }}</span>
               </summary>
               <div class="detail-grid disclosure-body">
                 <mat-form-field appearance="outline" class="field-span-2">
-                  <mat-label>Classe do stepper</mat-label>
-                  <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" placeholder="Ex.: meu-stepper" />
+                  <mat-label>{{ tx('editor.general.stepperClass', 'Stepper class') }}</mat-label>
+                  <input matInput [(ngModel)]="config.stepperClass" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.stepperClassPlaceholder', 'e.g.: my-stepper')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Classe do cabeçalho</mat-label>
-                  <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-header" />
+                  <mat-label>{{ tx('editor.general.headerClass', 'Header class') }}</mat-label>
+                  <input matInput [(ngModel)]="config.headerClass" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.headerClassPlaceholder', 'e.g.: stepper-header')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Classe do conteúdo</mat-label>
-                  <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" placeholder="Ex.: stepper-content" />
+                  <mat-label>{{ tx('editor.general.contentClass', 'Content class') }}</mat-label>
+                  <input matInput [(ngModel)]="config.contentClass" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.contentClassPlaceholder', 'e.g.: stepper-content')" />
                 </mat-form-field>
               </div>
             </details>
           </div>
         </mat-tab>
 
-        <mat-tab label="Etapas">
+        <mat-tab [label]="tx('editor.tabs.steps', 'Steps')">
           <div class="tab-pad">
             <div class="editor-intro">
               <div class="editor-intro-copy">
-                <div class="eyebrow">Estrutura do fluxo</div>
-                <div class="editor-title">Defina a narrativa de cada etapa</div>
-                <div class="editor-subtitle">Organize títulos, estados e conteúdo da etapa sem misturar configuração técnica com ações de montagem.</div>
+                <div class="eyebrow">{{ tx('editor.steps.eyebrow', 'Flow structure') }}</div>
+                <div class="editor-title">{{ tx('editor.steps.title', 'Define the narrative of each step') }}</div>
+                <div class="editor-subtitle">{{ tx('editor.steps.subtitle', 'Organize titles, states and step content without mixing technical configuration with assembly actions.') }}</div>
               </div>
               <div class="editor-intro-meta">
                 <div class="meta-pill">
-                  <span class="meta-label">Etapas</span>
+                  <span class="meta-label">{{ tx('editor.steps.count', 'Steps') }}</span>
                   <strong>{{ config.steps.length }}</strong>
                 </div>
               </div>
@@ -2058,16 +2529,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             <div class="pdx-steps">
               <div class="pdx-steps-header">
                 <div>
-                  <div class="section-title">Mapa de etapas</div>
-                  <div class="section-subtitle">Arraste para reordenar e selecione uma etapa para editar o conteúdo.</div>
+                  <div class="section-title">{{ tx('editor.steps.mapTitle', 'Step map') }}</div>
+                  <div class="section-subtitle">{{ tx('editor.steps.mapSubtitle', 'Drag to reorder and select a step to edit its content.') }}</div>
                 </div>
-                <button mat-flat-button color="primary" (click)="addStep()"><mat-icon [praxisIcon]="'add'"></mat-icon>Adicionar etapa</button>
+                <button mat-flat-button color="primary" (click)="addStep()"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ tx('editor.steps.add', 'Add step') }}</button>
               </div>
               <div class="steps-workspace" *ngIf="activeStep as step; else noSteps">
                 <div
                   cdkDropList
                   role="listbox"
-                  aria-label="Lista de etapas"
+                  [attr.aria-label]="tx('editor.steps.listAria', 'Step list')"
                   (cdkDropListDropped)="drop($event)"
                   class="pdx-step-list">
                   <div
@@ -2086,19 +2557,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     <div class="drag-handle" cdkDragHandle><mat-icon [praxisIcon]="'drag_indicator'"></mat-icon></div>
                     <div class="step-summary">
                       <div class="step-summary-head">
-                        <div class="step-summary-index">Etapa {{ i + 1 }}</div>
-                        <div class="step-summary-title">{{ s.label || 'Sem título' }}</div>
+                        <div class="step-summary-index">{{ stepIndexLabel(i) }}</div>
+                        <div class="step-summary-title">{{ s.label || tx('editor.steps.untitled', 'Untitled') }}</div>
                       </div>
-                      <div class="step-summary-sub">{{ s.id || 'Sem identificador' }}</div>
+                      <div class="step-summary-sub">{{ s.id || tx('editor.steps.noId', 'No identifier') }}</div>
                       <div class="step-summary-flags">
-                        <span class="summary-chip" *ngIf="s.optional">Opcional</span>
-                        <span class="summary-chip" *ngIf="s.completed">Concluída</span>
-                        <span class="summary-chip summary-chip-warn" *ngIf="s.hasError">Erro</span>
-                        <span class="summary-chip" *ngIf="s.form">Formulário</span>
+                        <span class="summary-chip" *ngIf="s.optional">{{ tx('editor.steps.optional', 'Optional') }}</span>
+                        <span class="summary-chip" *ngIf="s.completed">{{ tx('editor.steps.completed', 'Completed') }}</span>
+                        <span class="summary-chip summary-chip-warn" *ngIf="s.hasError">{{ tx('editor.steps.error', 'Error') }}</span>
+                        <span class="summary-chip" *ngIf="s.form">{{ tx('editor.steps.form', 'Form') }}</span>
                       </div>
                     </div>
                     <div class="pdx-actions">
-                      <button mat-icon-button color="warn" (click)="removeStep(i); $event.stopPropagation()" matTooltip="Remover" [attr.aria-label]="'Remover etapa ' + (s.label || (i + 1))">
+                      <button mat-icon-button color="warn" (click)="removeStep(i); $event.stopPropagation()" [matTooltip]="tx('editor.steps.remove', 'Remove')" [attr.aria-label]="stepRemoveAria(s, i)">
                         <mat-icon [praxisIcon]="'delete'"></mat-icon>
                       </button>
                     </div>
@@ -2108,52 +2579,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <div class="pdx-active-step">
                   <div class="hdr">
                     <div class="active-step-head">
-                      <div class="eyebrow">Etapa selecionada</div>
-                      <div class="title">Editando: {{ step.label }}</div>
-                      <div class="section-subtitle">Ajuste conteúdo principal primeiro. Configurações secundárias ficam recolhidas para reduzir ruído.</div>
+                      <div class="eyebrow">{{ tx('editor.steps.selectedEyebrow', 'Selected step') }}</div>
+                      <div class="title">{{ editingStepTitle(step) }}</div>
+                      <div class="section-subtitle">{{ tx('editor.steps.selectedSubtitle', 'Adjust the main content first. Secondary settings stay collapsed to reduce noise.') }}</div>
                     </div>
                   </div>
 
                   <div class="section">
-                    <div class="section-title">Dados principais</div>
+                    <div class="section-title">{{ tx('editor.steps.mainData', 'Main data') }}</div>
                     <div class="detail-grid">
                       <mat-form-field appearance="outline" class="field-span-2">
-                        <mat-label>Título da etapa</mat-label>
+                        <mat-label>{{ tx('editor.steps.stepTitle', 'Step title') }}</mat-label>
                         <input matInput [(ngModel)]="step.label" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                       <mat-form-field appearance="outline">
-                        <mat-label>Identificador</mat-label>
+                        <mat-label>{{ tx('editor.steps.identifier', 'Identifier') }}</mat-label>
                         <input matInput [(ngModel)]="step.id" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                       <mat-form-field appearance="outline">
-                        <mat-label>Ícone ou estado</mat-label>
-                        <input matInput [(ngModel)]="step.state" (ngModelChange)="markDirty()" placeholder="Ex.: number, done, edit" />
+                        <mat-label>{{ tx('editor.steps.iconOrState', 'Icon or state') }}</mat-label>
+                        <input matInput [(ngModel)]="step.state" (ngModelChange)="markDirty()" [placeholder]="tx('editor.steps.iconOrStatePlaceholder', 'e.g.: number, done, edit')" />
                       </mat-form-field>
                       <mat-form-field appearance="outline" class="field-span-2">
-                        <mat-label>Mensagem de erro</mat-label>
+                        <mat-label>{{ tx('editor.steps.errorMessage', 'Error message') }}</mat-label>
                         <input matInput [(ngModel)]="step.errorMessage" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                     </div>
                     <div class="toggle-group">
-                      <mat-slide-toggle [(ngModel)]="step.optional" (ngModelChange)="markDirty()">Etapa opcional</mat-slide-toggle>
-                      <mat-slide-toggle [(ngModel)]="step.editable" (ngModelChange)="markDirty()">Permitir voltar e editar</mat-slide-toggle>
-                      <mat-slide-toggle [(ngModel)]="step.completed" (ngModelChange)="markDirty()">Marcar como concluída</mat-slide-toggle>
-                      <mat-slide-toggle [(ngModel)]="step.hasError" (ngModelChange)="markDirty()">Marcar como com erro</mat-slide-toggle>
+                      <mat-slide-toggle [(ngModel)]="step.optional" (ngModelChange)="markDirty()">{{ tx('editor.steps.optionalToggle', 'Optional step') }}</mat-slide-toggle>
+                      <mat-slide-toggle [(ngModel)]="step.editable" (ngModelChange)="markDirty()">{{ tx('editor.steps.editableToggle', 'Allow going back and editing') }}</mat-slide-toggle>
+                      <mat-slide-toggle [(ngModel)]="step.completed" (ngModelChange)="markDirty()">{{ tx('editor.steps.completedToggle', 'Mark as completed') }}</mat-slide-toggle>
+                      <mat-slide-toggle [(ngModel)]="step.hasError" (ngModelChange)="markDirty()">{{ tx('editor.steps.errorToggle', 'Mark as error') }}</mat-slide-toggle>
                     </div>
                   </div>
 
                   <details class="disclosure">
                     <summary>
-                      <span class="section-title">Acessibilidade e detalhes técnicos</span>
-                      <span class="section-subtitle">Rótulos auxiliares e metadados menos usados.</span>
+                      <span class="section-title">{{ tx('editor.steps.accessibilityTitle', 'Accessibility and technical details') }}</span>
+                      <span class="section-subtitle">{{ tx('editor.steps.accessibilitySubtitle', 'Auxiliary labels and less-used metadata.') }}</span>
                     </summary>
                     <div class="detail-grid disclosure-body">
                       <mat-form-field appearance="outline">
-                        <mat-label>Texto alternativo</mat-label>
+                        <mat-label>{{ tx('editor.steps.altText', 'Alternative text') }}</mat-label>
                         <input matInput [(ngModel)]="step.ariaLabel" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                       <mat-form-field appearance="outline">
-                        <mat-label>ID que descreve</mat-label>
+                        <mat-label>{{ tx('editor.steps.describedBy', 'Described-by ID') }}</mat-label>
                         <input matInput [(ngModel)]="step.ariaLabelledby" (ngModelChange)="markDirty()" />
                       </mat-form-field>
                     </div>
@@ -2163,37 +2634,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <div class="section editorial-section">
                   <div class="section-head">
                     <div>
-                      <div class="section-title">Conteúdo editorial</div>
-                      <div class="section-subtitle">Use blocos de apoio para contextualizar a etapa antes ou depois do formulário.</div>
+                      <div class="section-title">{{ tx('editor.steps.editorialTitle', 'Editorial content') }}</div>
+                      <div class="section-subtitle">{{ tx('editor.steps.editorialSubtitle', 'Use supporting blocks to contextualize the step before or after the form.') }}</div>
                     </div>
                   </div>
 
                   <div class="zone-grid">
                     <div class="zone-column">
                       <div class="zone-head">
-                        <div class="zone-title">Antes do formulário</div>
+                        <div class="zone-title">{{ tx('editor.steps.zoneBefore', 'Before form') }}</div>
                         <div class="zone-actions">
                           <span class="zone-count">{{ editorialBeforeWidgets(step).length }}</span>
                           <button mat-stroked-button [matMenuTriggerFor]="beforeEditorialMenu">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Adicionar
+                            {{ tx('editor.steps.addBlock', 'Add') }}
                           </button>
                           <mat-menu #beforeEditorialMenu="matMenu">
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'before')">
                               <mat-icon [praxisIcon]="'view_module'"></mat-icon>
-                              Grade de benefícios
+                              {{ tx('editor.steps.widgetBenefits', 'Benefits grid') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'before')">
                               <mat-icon [praxisIcon]="'article'"></mat-icon>
-                              Bloco de conteúdo
+                              {{ tx('editor.steps.widgetContent', 'Content block') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'before')">
                               <mat-icon [praxisIcon]="'info'"></mat-icon>
-                              Aviso inline
+                              {{ tx('editor.steps.widgetNotice', 'Inline notice') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'before')">
                               <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
-                              Divisor
+                              {{ tx('editor.steps.widgetDivider', 'Divider') }}
                             </button>
                           </mat-menu>
                         </div>
@@ -2208,49 +2679,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
                           </div>
                           <div class="actions">
-                            <button mat-icon-button (click)="editWidget(w)" matTooltip="Editar bloco">
+                            <button mat-icon-button (click)="editWidget(w)" [matTooltip]="tx('editor.steps.editBlock', 'Edit block')">
                               <mat-icon [praxisIcon]="'tune'"></mat-icon>
                             </button>
-                            <button mat-icon-button (click)="moveEditorialWidget(w, 'before', 'after')" matTooltip="Mover para depois do formulário">
+                            <button mat-icon-button (click)="moveEditorialWidget(w, 'before', 'after')" [matTooltip]="tx('editor.steps.moveAfter', 'Move after the form')">
                               <mat-icon [praxisIcon]="'south'"></mat-icon>
                             </button>
-                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'before')" matTooltip="Duplicar bloco">
+                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'before')" [matTooltip]="tx('editor.steps.duplicateBlock', 'Duplicate block')">
                               <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
                             </button>
-                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'before')" matTooltip="Remover bloco">
+                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'before')" [matTooltip]="tx('editor.steps.removeBlock', 'Remove block')">
                               <mat-icon [praxisIcon]="'delete'"></mat-icon>
                             </button>
                           </div>
                         </div>
-                        <div class="empty" *ngIf="!editorialBeforeWidgets(step).length">Nenhum bloco nesta zona.</div>
+                        <div class="empty" *ngIf="!editorialBeforeWidgets(step).length">{{ tx('editor.steps.emptyZone', 'No blocks in this zone.') }}</div>
                       </div>
                     </div>
 
                     <div class="zone-column">
                       <div class="zone-head">
-                        <div class="zone-title">Depois do formulário</div>
+                        <div class="zone-title">{{ tx('editor.steps.zoneAfter', 'After form') }}</div>
                         <div class="zone-actions">
                           <span class="zone-count">{{ editorialAfterWidgets(step).length }}</span>
                           <button mat-stroked-button [matMenuTriggerFor]="afterEditorialMenu">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Adicionar
+                            {{ tx('editor.steps.addBlock', 'Add') }}
                           </button>
                           <mat-menu #afterEditorialMenu="matMenu">
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-benefits', 'after')">
                               <mat-icon [praxisIcon]="'view_module'"></mat-icon>
-                              Grade de benefícios
+                              {{ tx('editor.steps.widgetBenefits', 'Benefits grid') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-content', 'after')">
                               <mat-icon [praxisIcon]="'article'"></mat-icon>
-                              Bloco de conteúdo
+                              {{ tx('editor.steps.widgetContent', 'Content block') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-inline-notice', 'after')">
                               <mat-icon [praxisIcon]="'info'"></mat-icon>
-                              Aviso inline
+                              {{ tx('editor.steps.widgetNotice', 'Inline notice') }}
                             </button>
                             <button mat-menu-item (click)="addEditorialWidget('praxis-wizard-divider', 'after')">
                               <mat-icon [praxisIcon]="'horizontal_rule'"></mat-icon>
-                              Divisor
+                              {{ tx('editor.steps.widgetDivider', 'Divider') }}
                             </button>
                           </mat-menu>
                         </div>
@@ -2265,46 +2736,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             <div class="meta" *ngIf="widgetBlockId(w) as blockId">ID: {{ blockId }}</div>
                           </div>
                           <div class="actions">
-                            <button mat-icon-button (click)="editWidget(w)" matTooltip="Editar bloco">
+                            <button mat-icon-button (click)="editWidget(w)" [matTooltip]="tx('editor.steps.editBlock', 'Edit block')">
                               <mat-icon [praxisIcon]="'tune'"></mat-icon>
                             </button>
-                            <button mat-icon-button (click)="moveEditorialWidget(w, 'after', 'before')" matTooltip="Mover para antes do formulário">
+                            <button mat-icon-button (click)="moveEditorialWidget(w, 'after', 'before')" [matTooltip]="tx('editor.steps.moveBefore', 'Move before the form')">
                               <mat-icon [praxisIcon]="'north'"></mat-icon>
                             </button>
-                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'after')" matTooltip="Duplicar bloco">
+                            <button mat-icon-button (click)="duplicateEditorialWidget(w, 'after')" [matTooltip]="tx('editor.steps.duplicateBlock', 'Duplicate block')">
                               <mat-icon [praxisIcon]="'content_copy'"></mat-icon>
                             </button>
-                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'after')" matTooltip="Remover bloco">
+                            <button mat-icon-button color="warn" (click)="removeEditorialWidget(w, 'after')" [matTooltip]="tx('editor.steps.removeBlock', 'Remove block')">
                               <mat-icon [praxisIcon]="'delete'"></mat-icon>
                             </button>
                           </div>
                         </div>
-                        <div class="empty" *ngIf="!editorialAfterWidgets(step).length">Nenhum bloco nesta zona.</div>
+                        <div class="empty" *ngIf="!editorialAfterWidgets(step).length">{{ tx('editor.steps.emptyZone', 'No blocks in this zone.') }}</div>
                       </div>
                     </div>
                   </div>
                 </div>
 
                 <div class="section">
-                  <div class="section-title">Formulário da etapa</div>
+                  <div class="section-title">{{ tx('editor.steps.formSectionTitle', 'Step form') }}</div>
                   <div class="section-body">
                     <ng-container *ngIf="step.form; else addFormBtn">
                       <div class="form-row-card">
                         <div class="form-row-main">
                           <mat-icon [praxisIcon]="'dynamic_form'"></mat-icon>
                           <div>
-                            <div class="name">Formulário principal</div>
+                            <div class="name">{{ tx('editor.steps.mainFormTitle', 'Main form') }}</div>
                             <div class="sub">{{ step.form.formId || step.id || '—' }}</div>
                           </div>
                         </div>
                         <div class="form-row-actions">
-                          <button mat-button (click)="editMainForm()"><mat-icon [praxisIcon]="'tune'"></mat-icon> Editar</button>
-                          <button mat-button color="warn" (click)="removeMainForm()"><mat-icon [praxisIcon]="'delete'"></mat-icon> Remover</button>
+                          <button mat-button (click)="editMainForm()"><mat-icon [praxisIcon]="'tune'"></mat-icon>{{ tx('editor.steps.edit', 'Edit') }}</button>
+                          <button mat-button color="warn" (click)="removeMainForm()"><mat-icon [praxisIcon]="'delete'"></mat-icon>{{ tx('editor.steps.remove', 'Remove') }}</button>
                         </div>
                       </div>
                     </ng-container>
                     <ng-template #addFormBtn>
-                      <button mat-stroked-button color="primary" (click)="addMainForm()"><mat-icon [praxisIcon]="'add'"></mat-icon> Adicionar formulário</button>
+                      <button mat-stroked-button color="primary" (click)="addMainForm()"><mat-icon [praxisIcon]="'add'"></mat-icon>{{ tx('editor.steps.addForm', 'Add form') }}</button>
                     </ng-template>
                   </div>
                 </div>
@@ -2312,12 +2783,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <div class="section">
                   <div class="section-head">
                     <div>
-                      <div class="section-title">Componentes avançados</div>
-                      <div class="section-subtitle">Atalhos para montar experiências mais ricas sem perder clareza no fluxo.</div>
+                      <div class="section-title">{{ tx('editor.steps.advancedTitle', 'Advanced components') }}</div>
+                      <div class="section-subtitle">{{ tx('editor.steps.advancedSubtitle', 'Shortcuts to assemble richer experiences without losing clarity in the flow.') }}</div>
                     </div>
                     <button mat-stroked-button (click)="openMoreComponents()">
                       <mat-icon [praxisIcon]="'add'"></mat-icon>
-                      Mais componentes
+                      {{ tx('editor.steps.moreComponents', 'More components') }}
                     </button>
                   </div>
                   <div class="section-body">
@@ -2326,14 +2797,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'account_tree'"></mat-icon>
                           <div>
-                            <div class="cta-title">Lista em árvore</div>
-                            <div class="cta-desc">Dados hierárquicos com seleção simples.</div>
+                            <div class="cta-title">{{ tx('editor.steps.treeListTitle', 'Tree list') }}</div>
+                            <div class="cta-desc">{{ tx('editor.steps.treeListDesc', 'Hierarchical data with simple selection.') }}</div>
                           </div>
                         </div>
                         <div class="cta-actions">
                           <button mat-stroked-button (click)="addTreeList()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir árvore
+                            {{ tx('editor.steps.insertTree', 'Insert tree') }}
                           </button>
                         </div>
                       </div>
@@ -2341,14 +2812,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'swap_horiz'"></mat-icon>
                           <div>
-                            <div class="cta-title">Transferência de itens</div>
-                            <div class="cta-desc">Mover itens entre listas para seleção múltipla.</div>
+                            <div class="cta-title">{{ tx('editor.steps.transferTitle', 'Item transfer') }}</div>
+                            <div class="cta-desc">{{ tx('editor.steps.transferDesc', 'Move items between lists for multi-selection.') }}</div>
                           </div>
                         </div>
                         <div class="cta-actions">
                           <button mat-stroked-button (click)="addTransferListQuick()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir transferência
+                            {{ tx('editor.steps.insertTransfer', 'Insert transfer') }}
                           </button>
                         </div>
                       </div>
@@ -2356,14 +2827,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'search'"></mat-icon>
                           <div>
-                            <div class="cta-title">Seleção com busca</div>
-                            <div class="cta-desc">Seleção com busca local ou remota.</div>
+                            <div class="cta-title">{{ tx('editor.steps.searchTitle', 'Searchable selection') }}</div>
+                            <div class="cta-desc">{{ tx('editor.steps.searchDesc', 'Selection with local or remote search.') }}</div>
                           </div>
                         </div>
                         <div class="cta-actions">
                           <button mat-stroked-button (click)="addSearchableSelect()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir seletor
+                            {{ tx('editor.steps.insertSelector', 'Insert selector') }}
                           </button>
                         </div>
                       </div>
@@ -2371,14 +2842,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         <div class="cta-head">
                           <mat-icon [praxisIcon]="'upload_file'"></mat-icon>
                           <div>
-                            <div class="cta-title">Upload de arquivos</div>
-                            <div class="cta-desc">Anexos com validação e fluxo de upload.</div>
+                            <div class="cta-title">{{ tx('editor.steps.uploadTitle', 'File upload') }}</div>
+                            <div class="cta-desc">{{ tx('editor.steps.uploadDesc', 'Attachments with validation and upload flow.') }}</div>
                           </div>
                         </div>
                         <div class="cta-actions">
                           <button mat-stroked-button (click)="addFilesUpload()">
                             <mat-icon [praxisIcon]="'add'"></mat-icon>
-                            Inserir upload
+                            {{ tx('editor.steps.insertUpload', 'Insert upload') }}
                           </button>
                         </div>
                       </div>
@@ -2392,15 +2863,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                           <div class="sub">{{ w.id }}</div>
                         </div>
                         <div class="actions">
-                          <button mat-icon-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)" matTooltip="Editar componente">
+                          <button mat-icon-button (click)="editWidget(w)" [disabled]="!canEditWidget(w)" [matTooltip]="tx('editor.steps.editComponent', 'Edit component')">
                             <mat-icon [praxisIcon]="'tune'"></mat-icon>
                           </button>
-                          <button mat-icon-button color="warn" (click)="removeAdvancedWidget(w)" matTooltip="Remover componente">
+                          <button mat-icon-button color="warn" (click)="removeAdvancedWidget(w)" [matTooltip]="tx('editor.steps.removeComponent', 'Remove component')">
                             <mat-icon [praxisIcon]="'delete'"></mat-icon>
                           </button>
                         </div>
                       </div>
-                      <div class="empty" *ngIf="!advancedWidgets(step).length">Nenhum componente avançado adicionado.</div>
+                      <div class="empty" *ngIf="!advancedWidgets(step).length">{{ tx('editor.steps.emptyAdvanced', 'No advanced components added.') }}</div>
                     </div>
                   </div>
                 </div>
@@ -2409,88 +2880,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 		            </div>
 		            </div>
 		            <ng-template #noSteps>
-	              <div class="muted">Nenhuma etapa definida.</div>
+	              <div class="muted">{{ tx('editor.steps.noSteps', 'No steps defined.') }}</div>
 	            </ng-template>
 	          </div>
         </mat-tab>
 
-        <mat-tab label="Navegação">
+        <mat-tab [label]="tx('editor.navigation.tab', 'Navigation')">
           <div class="tab-pad">
             <div class="editor-intro">
               <div class="editor-intro-copy">
-                <div class="eyebrow">Ações padrão</div>
-                <div class="editor-title">Configure a navegação entre etapas</div>
-                <div class="editor-subtitle">Defina quando os botões padrão aparecem e como eles se apresentam visualmente no fluxo.</div>
+                <div class="eyebrow">{{ tx('editor.navigation.eyebrow', 'Default actions') }}</div>
+                <div class="editor-title">{{ tx('editor.navigation.title', 'Configure navigation between steps') }}</div>
+                <div class="editor-subtitle">{{ tx('editor.navigation.subtitle', 'Define when default buttons appear and how they present visually in the flow.') }}</div>
               </div>
             </div>
             <div class="settings-group">
               <div class="group-head">
-                <div class="section-title">Comportamento dos botões</div>
-                <div class="section-subtitle">Aparência e alinhamento da navegação padrão do stepper.</div>
+                <div class="section-title">{{ tx('editor.navigation.behaviorTitle', 'Button behavior') }}</div>
+                <div class="section-subtitle">{{ tx('editor.navigation.behaviorSubtitle', 'Appearance and alignment of the default stepper navigation.') }}</div>
               </div>
               <div class="toggle-group">
-                <mat-slide-toggle [(ngModel)]="navigationCfg.visible" (ngModelChange)="markDirty()">Mostrar navegação padrão</mat-slide-toggle>
+                <mat-slide-toggle [(ngModel)]="navigationCfg.visible" (ngModelChange)="markDirty()">{{ tx('editor.navigation.visible', 'Show default navigation') }}</mat-slide-toggle>
               </div>
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
-                  <mat-label>Estilo dos botões</mat-label>
+                  <mat-label>{{ tx('editor.navigation.variant', 'Button style') }}</mat-label>
                   <select matNativeControl [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">Padrão (elevado)</option>
-                    <option value="basic">Texto</option>
-                    <option value="flat">Plano</option>
-                    <option value="stroked">Contornado</option>
-                    <option value="raised">Elevado</option>
+                    <option [ngValue]="undefined">{{ tx('editor.navigation.variant.default', 'Default (raised)') }}</option>
+                    <option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</option>
+                    <option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</option>
+                    <option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</option>
+                    <option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Cor</mat-label>
+                  <mat-label>{{ tx('editor.navigation.color', 'Color') }}</mat-label>
                   <select matNativeControl [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">Padrão</option>
-                    <option value="primary">Primária</option>
-                    <option value="accent">Acento</option>
-                    <option value="warn">Alerta</option>
+                    <option [ngValue]="undefined">{{ tx('editor.navigation.color.default', 'Default') }}</option>
+                    <option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</option>
+                    <option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</option>
+                    <option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Alinhamento</mat-label>
+                  <mat-label>{{ tx('editor.navigation.align', 'Alignment') }}</mat-label>
                   <select matNativeControl [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">Direita</option>
-                    <option value="start">Esquerda</option>
-                    <option value="center">Centro</option>
-                    <option value="space-between">Espaçado</option>
-                    <option value="end">Direita</option>
+                    <option [ngValue]="undefined">{{ tx('editor.navigation.align.default', 'Right') }}</option>
+                    <option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</option>
+                    <option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</option>
+                    <option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</option>
+                    <option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</option>
                   </select>
                 </mat-form-field>
               </div>
             </div>
             <div class="settings-group">
               <div class="group-head">
-                <div class="section-title">Rótulos e ícones</div>
-                <div class="section-subtitle">Ajuste a cópia e os ícones usados nas ações de voltar e avançar.</div>
+                <div class="section-title">{{ tx('editor.navigation.labelsTitle', 'Labels and icons') }}</div>
+                <div class="section-subtitle">{{ tx('editor.navigation.labelsSubtitle', 'Adjust the copy and icons used in back and next actions.') }}</div>
               </div>
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
-                  <mat-label>Texto do botão Voltar</mat-label>
-                  <input matInput [(ngModel)]="navigationCfg.prevLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Voltar" [disabled]="!navigationCfg.visible" />
+                  <mat-label>{{ tx('editor.navigation.prevLabel', 'Back button text') }}</mat-label>
+                  <input matInput [(ngModel)]="navigationCfg.prevLabel" (ngModelChange)="markDirty()" [placeholder]="tx('editor.navigation.prevPlaceholder', 'e.g.: Back')" [disabled]="!navigationCfg.visible" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Texto do botão Próximo</mat-label>
-                  <input matInput [(ngModel)]="navigationCfg.nextLabel" (ngModelChange)="markDirty()" placeholder="Ex.: Próximo" [disabled]="!navigationCfg.visible" />
+                  <mat-label>{{ tx('editor.navigation.nextLabel', 'Next button text') }}</mat-label>
+                  <input matInput [(ngModel)]="navigationCfg.nextLabel" (ngModelChange)="markDirty()" [placeholder]="tx('editor.navigation.nextPlaceholder', 'e.g.: Next')" [disabled]="!navigationCfg.visible" />
                 </mat-form-field>
               </div>
               <div class="inline-actions-grid">
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone de Voltar</div>
-                  <button mat-stroked-button type="button" (click)="pickNavIcon('prevIcon')" [disabled]="!navigationCfg.visible" aria-label="Escolher ícone do botão Voltar">
+                  <div class="section-title">{{ tx('editor.navigation.prevIcon', 'Back icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickNavIcon('prevIcon')" [disabled]="!navigationCfg.visible" [attr.aria-label]="tx('editor.navigation.pickPrevIcon', 'Choose the Back button icon')">
                     <mat-icon *ngIf="navigationCfg.prevIcon" [fontIcon]="navigationCfg.prevIcon"></mat-icon>
-                    <ng-container *ngIf="!navigationCfg.prevIcon">Escolher</ng-container>
+                    <ng-container *ngIf="!navigationCfg.prevIcon">{{ tx('editor.shared.pick', 'Choose') }}</ng-container>
                   </button>
                 </div>
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone de Próximo</div>
-                  <button mat-stroked-button type="button" (click)="pickNavIcon('nextIcon')" [disabled]="!navigationCfg.visible" aria-label="Escolher ícone do botão Próximo">
+                  <div class="section-title">{{ tx('editor.navigation.nextIcon', 'Next icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickNavIcon('nextIcon')" [disabled]="!navigationCfg.visible" [attr.aria-label]="tx('editor.navigation.pickNextIcon', 'Choose the Next button icon')">
                     <mat-icon *ngIf="navigationCfg.nextIcon" [fontIcon]="navigationCfg.nextIcon"></mat-icon>
-                    <ng-container *ngIf="!navigationCfg.nextIcon">Escolher</ng-container>
+                    <ng-container *ngIf="!navigationCfg.nextIcon">{{ tx('editor.shared.pick', 'Choose') }}</ng-container>
                   </button>
                 </div>
               </div>
@@ -2498,47 +2969,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           </div>
         </mat-tab>
 
-        <mat-tab label="Aparência">
+        <mat-tab [label]="tx('editor.appearance.tab', 'Appearance')">
           <div class="tab-pad">
             <div class="editor-intro">
               <div class="editor-intro-copy">
-                <div class="eyebrow">Tema visual</div>
-                <div class="editor-title">Personalize aparência sem perder consistência</div>
-                <div class="editor-subtitle">Comece pelos ajustes rápidos. Tokens e snippet SCSS ficam recolhidos para cenários avançados.</div>
+                <div class="eyebrow">{{ tx('editor.appearance.eyebrow', 'Visual theme') }}</div>
+                <div class="editor-title">{{ tx('editor.appearance.title', 'Customize appearance without losing consistency') }}</div>
+                <div class="editor-subtitle">{{ tx('editor.appearance.subtitle', 'Start with the quick adjustments. Tokens and the SCSS snippet stay collapsed for advanced scenarios.') }}</div>
               </div>
             </div>
             <div class="settings-group">
               <div class="group-head">
-                <div class="section-title">Ajustes rápidos</div>
-                <div class="section-subtitle">Controles mais comuns para tamanho, peso tipográfico e tema.</div>
+                <div class="section-title">{{ tx('editor.appearance.quickTitle', 'Quick adjustments') }}</div>
+                <div class="section-subtitle">{{ tx('editor.appearance.quickSubtitle', 'Most common controls for sizing, typography weight and theme.') }}</div>
               </div>
               <div class="quick-grid">
                 <mat-form-field appearance="outline">
-                  <mat-label>Altura do cabeçalho (px)</mat-label>
-                  <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" placeholder="Ex.: 48" />
+                  <mat-label>{{ tx('editor.appearance.headerHeight', 'Header height (px)') }}</mat-label>
+                  <input matInput type="number" [ngModel]="headerHeightPx" (ngModelChange)="setHeaderHeightPx($event)" [placeholder]="tx('editor.appearance.headerHeightPlaceholder', 'e.g.: 48')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Tamanho do texto (px)</mat-label>
-                  <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" placeholder="Ex.: 14" />
+                  <mat-label>{{ tx('editor.appearance.textSize', 'Text size (px)') }}</mat-label>
+                  <input matInput type="number" [ngModel]="headerLabelTextSizePx" (ngModelChange)="setHeaderLabelTextSizePx($event)" [placeholder]="tx('editor.appearance.textSizePlaceholder', 'e.g.: 14')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Peso do texto</mat-label>
+                  <mat-label>{{ tx('editor.appearance.textWeight', 'Text weight') }}</mat-label>
                   <select matNativeControl [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)">
-                    <option [ngValue]="undefined">Padrão</option>
-                    <option value="400">Normal</option>
-                    <option value="500">Médio</option>
-                    <option value="600">Seminegrito</option>
-                    <option value="700">Negrito</option>
+                    <option [ngValue]="undefined">{{ tx('editor.appearance.textWeight.default', 'Default') }}</option>
+                    <option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</option>
+                    <option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</option>
+                    <option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</option>
+                    <option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</option>
                   </select>
                 </mat-form-field>
                 <mat-form-field appearance="outline" class="field-span-2">
-                  <mat-label>Classe de tema</mat-label>
-                  <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" placeholder="Ex.: theme-stepper-custom" />
+                  <mat-label>{{ tx('editor.appearance.themeClass', 'Theme class') }}</mat-label>
+                  <input matInput [(ngModel)]="appearance.themeClass" (ngModelChange)="onAppearanceChange()" [placeholder]="tx('editor.appearance.themeClassPlaceholder', 'e.g.: theme-stepper-custom')" />
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                  <mat-label>Conjunto de ícones</mat-label>
+                  <mat-label>{{ tx('editor.appearance.iconSet', 'Icon set') }}</mat-label>
                   <select matNativeControl [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()">
-                    <option [ngValue]="undefined">Material Icons (padrão)</option>
+                    <option [ngValue]="undefined">{{ tx('editor.appearance.iconSet.default', 'Material Icons (default)') }}</option>
                     <option value="material-symbols-outlined">Material Symbols (Outlined)</option>
                     <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
                     <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
@@ -2547,63 +3018,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
               </div>
               <div class="inline-actions-grid icon-picker-grid">
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone do número</div>
-                  <button mat-stroked-button type="button" (click)="pickIcon('number')" aria-label="Escolher ícone do número">
+                  <div class="section-title">{{ tx('editor.appearance.iconNumber', 'Number icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickIcon('number')" [attr.aria-label]="tx('editor.appearance.pickIconNumber', 'Choose the number icon')">
                     <mat-icon *ngIf="icons.number; else pick" [fontIcon]="icons.number"></mat-icon>
-                    <ng-template #pick>Escolher</ng-template>
+                    <ng-template #pick>{{ tx('editor.shared.pick', 'Choose') }}</ng-template>
                   </button>
                 </div>
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone concluído</div>
-                  <button mat-stroked-button type="button" (click)="pickIcon('done')" aria-label="Escolher ícone de concluído">
+                  <div class="section-title">{{ tx('editor.appearance.iconDone', 'Completed icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickIcon('done')" [attr.aria-label]="tx('editor.appearance.pickIconDone', 'Choose the completed icon')">
                     <mat-icon *ngIf="icons.done; else pick2" [fontIcon]="icons.done"></mat-icon>
-                    <ng-template #pick2>Escolher</ng-template>
+                    <ng-template #pick2>{{ tx('editor.shared.pick', 'Choose') }}</ng-template>
                   </button>
                 </div>
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone edição</div>
-                  <button mat-stroked-button type="button" (click)="pickIcon('edit')" aria-label="Escolher ícone de edição">
+                  <div class="section-title">{{ tx('editor.appearance.iconEdit', 'Edit icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickIcon('edit')" [attr.aria-label]="tx('editor.appearance.pickIconEdit', 'Choose the edit icon')">
                     <mat-icon *ngIf="icons.edit; else pick3" [fontIcon]="icons.edit"></mat-icon>
-                    <ng-template #pick3>Escolher</ng-template>
+                    <ng-template #pick3>{{ tx('editor.shared.pick', 'Choose') }}</ng-template>
                   </button>
                 </div>
                 <div class="inline-action-item">
-                  <div class="section-title">Ícone de erro</div>
-                  <button mat-stroked-button type="button" (click)="pickIcon('error')" aria-label="Escolher ícone de erro">
+                  <div class="section-title">{{ tx('editor.appearance.iconError', 'Error icon') }}</div>
+                  <button mat-stroked-button type="button" (click)="pickIcon('error')" [attr.aria-label]="tx('editor.appearance.pickIconError', 'Choose the error icon')">
                     <mat-icon *ngIf="icons.error; else pick4" [fontIcon]="icons.error"></mat-icon>
-                    <ng-template #pick4>Escolher</ng-template>
+                    <ng-template #pick4>{{ tx('editor.shared.pick', 'Choose') }}</ng-template>
                   </button>
                 </div>
               </div>
               <div class="icons-hint" *ngIf="symbolsLikelySelected.length && !appearance.iconsSet">
                 <div class="muted">
-                  Dica: {{ symbolsLikelySelected.join(', ') }} são ícones do Material Symbols. Selecione um conjunto Symbols abaixo ou clique em
-                  <button mat-button color="primary" type="button" (click)="setIconsSetToSymbols()">Usar Material Symbols (Outlined)</button>.
+                  {{ tx('editor.appearance.symbolsHint', 'Hint: {{icons}} are Material Symbols icons. Select a Symbols set below or click').replace('{{icons}}', symbolsLikelySelected.join(', ')) }}
+                  <button mat-button color="primary" type="button" (click)="setIconsSetToSymbols()">{{ tx('editor.appearance.useSymbols', 'Use Material Symbols (Outlined)') }}</button>.
                 </div>
               </div>
               <div class="pdx-appearance-actions">
-                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('neutral')">Preset: neutro</button>
-                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('primary')">Preset: primário</button>
-                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('high-contrast')">Preset: alto contraste</button>
-                <button mat-button type="button" (click)="clearTokens()">Limpar tokens</button>
+                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('neutral')">{{ tx('editor.appearance.presetNeutral', 'Preset: neutral') }}</button>
+                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('primary')">{{ tx('editor.appearance.presetPrimary', 'Preset: primary') }}</button>
+                <button mat-stroked-button color="primary" type="button" (click)="applyPreset('high-contrast')">{{ tx('editor.appearance.presetHighContrast', 'Preset: high contrast') }}</button>
+                <button mat-button type="button" (click)="clearTokens()">{{ tx('editor.appearance.clearTokens', 'Clear tokens') }}</button>
               </div>
             </div>
             <details class="disclosure">
               <summary>
-                <span class="section-title">Tokens avançados e snippet SCSS</span>
-                <span class="section-subtitle">Use quando precisar sair do ajuste rápido e controlar o tema com granularidade.</span>
+                <span class="section-title">{{ tx('editor.appearance.advancedTitle', 'Advanced tokens and SCSS snippet') }}</span>
+                <span class="section-subtitle">{{ tx('editor.appearance.advancedSubtitle', 'Use when you need to go beyond quick adjustments and control the theme with more granularity.') }}</span>
               </summary>
               <div class="disclosure-body">
                 <div class="tokens-grid">
                   <div class="token-item" *ngFor="let key of stepperTokenKeys">
                     <mat-form-field appearance="outline" class="w-full">
                       <mat-label>{{ key }}</mat-label>
-                      <input matInput [ngModel]="appearance.tokens?.[key]" (ngModelChange)="onTokenChange(key, $event)" placeholder="valor CSS ou var(--token)" />
+                      <input matInput [ngModel]="appearance.tokens?.[key]" (ngModelChange)="onTokenChange(key, $event)" [placeholder]="tx('editor.appearance.tokenPlaceholder', 'CSS value or var(--token)')" />
                     </mat-form-field>
                   </div>
                 </div>
                 <div class="code-card">
-                  <div class="code-head">Snippet SCSS</div>
+                  <div class="code-head">{{ tx('editor.appearance.scssSnippet', 'SCSS snippet') }}</div>
                   <pre class="code"><code>{{ scssSnippet() }}</code></pre>
                 </div>
               </div>
@@ -3037,7 +3508,14 @@ class PraxisStepper {
         return v === false;
     }
     onChildWidgetEvent(stepIndex, wd, e) {
-        this.widgetEvent.emit({ stepIndex, stepId: this.steps()[stepIndex]?.id, sourceId: e.sourceId, output: e.output, payload: e.payload });
+        this.widgetEvent.emit({
+            ...e,
+            path: [
+                { kind: 'stepper', id: this.stepperId },
+                { kind: 'step', id: this.steps()[stepIndex]?.id, index: stepIndex },
+                ...(e.path || []),
+            ],
+        });
     }
     isStepEmpty(step) {
         const hasForm = !!step.form;
@@ -3403,7 +3881,7 @@ class PraxisStepper {
     >
       <mat-icon fontIcon="edit"></mat-icon>
     </button>
-  `, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$1.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "editorialContext", "mode", "config", "schemaSource", "enableCustomization", "formId", "componentInstanceId", "layout", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "widgetEvent"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2$1.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "editorialContext", "mode", "config", "schemaSource", "enableCustomization", "formId", "componentInstanceId", "layout", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "widgetEvent"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisStepper, decorators: [{
             type: Component,
@@ -3803,7 +4281,7 @@ const PRAXIS_STEPPER_COMPONENT_METADATA = {
         { name: 'selectionChange', type: 'any', label: 'Troca de seleção' },
         { name: 'selectedIndexChange', type: 'number', label: 'Índice selecionado (change)' },
         { name: 'animationDone', type: 'void', label: 'Animação concluída' },
-        { name: 'widgetEvent', type: '{ stepId?: string; stepIndex?: number; sourceId: string; output?: string; payload?: any }', label: 'Evento interno' },
+        { name: 'widgetEvent', type: 'WidgetEventEnvelope', label: 'Evento interno' },
         { name: 'stepFormReady', type: '{ stepId?: string; stepIndex: number; event: FormReadyEvent }', label: 'Form ready (por etapa)' },
         { name: 'stepFormValueChange', type: '{ stepId?: string; stepIndex: number; event: FormValueChangeEvent }', label: 'Form value change (por etapa)' },
     ],
@@ -4541,6 +5019,7 @@ class PraxisWizardFormComponent {
         this._config.set(validateWizardConfig(cfg));
     }
     submit = new EventEmitter();
+    completed = this.submit;
     customAction = new EventEmitter();
     _config = signal(null, ...(ngDevMode ? [{ debugName: "_config" }] : []));
     persistedState = signal(null, ...(ngDevMode ? [{ debugName: "persistedState" }] : []));
@@ -4700,7 +5179,7 @@ class PraxisWizardFormComponent {
         el?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisWizardFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisWizardFormComponent, isStandalone: true, selector: "praxis-wizard-form", inputs: { wizardId: "wizardId", enableCustomization: "enableCustomization", config: "config" }, outputs: { submit: "submit", customAction: "customAction" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisWizardFormComponent, isStandalone: true, selector: "praxis-wizard-form", inputs: { wizardId: "wizardId", enableCustomization: "enableCustomization", config: "config" }, outputs: { submit: "submit", completed: "completed", customAction: "customAction" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: `
     <section class="ft-wizard-shell" [attr.data-wizard-id]="wizardId">
       <div class="ft-wizard-header">
         <div class="ft-brand">{{ wizardBrand() }}</div>
@@ -4793,6 +5272,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], submit: [{
                 type: Output
+            }], completed: [{
+                type: Output
             }], customAction: [{
                 type: Output
             }] } });
@@ -4842,4 +5323,3 @@ function applyPreferenceDefaults(cfg, values) {
  */
 
 export { FT_WIZARD_CONFIG, FT_WIZARD_JSON, PRAXIS_STEPPER_COMPONENT_METADATA, PRAXIS_WIZARD_BENEFITS_METADATA, PRAXIS_WIZARD_CONTENT_METADATA, PRAXIS_WIZARD_DIVIDER_METADATA, PRAXIS_WIZARD_NOTICE_METADATA, PraxisStepper, PraxisStepperConfigEditor, PraxisWizardFormComponent, STEPPER_AI_CAPABILITIES, providePraxisStepperMetadata };
-//# sourceMappingURL=praxisui-stepper.mjs.map