@praxisui/charts 9.0.50 → 9.0.52

package/README.md

@@ -150,7 +150,8 @@ The public contract is `PraxisChartConfig` or the canonical `PraxisXUiChartContr
 - every ready chart offers a localized `Show chart data` / `Exibir dados do gráfico` control with a structured HTML table;
 - each table point is a native button, so Enter and Space follow browser keyboard conventions and activate the same renderer-neutral `pointClick` path as the visual point;
 - when single selection is configured, the point button publishes `aria-pressed` and preserves the existing select/deselect and cross-filter payloads;
-- loading, empty and error states remove the data controls, preventing stale chart values from remaining available to assistive technology.
+- loading and empty are exposed as atomic status messages, error is exposed as an alert, and the chart shell reports `aria-busy` only while loading;
+- all non-ready states remove the data controls, preventing stale chart values from remaining available to assistive technology.
 
 The structured alternative is automatic. It does not add an accessibility field to `PraxisChartConfig` or `x-ui.chart`, and custom engines remain responsible for an accessible visual rendering while the component-level data alternative remains renderer-neutral.
 

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-08-31T15:53:16.439Z",
+  "generatedAt": "2026-08-31T20:42:03.904Z",
   "packageName": "@praxisui/charts",
-  "packageVersion": "9.0.50",
+  "packageVersion": "9.0.52",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 3,

package/fesm2022/praxisui-charts.mjs

@@ -2040,6 +2040,7 @@ class PraxisChartComponent {
         return config;
     }, ...(ngDevMode ? [{ debugName: "renderConfig" }] : /* istanbul ignore next */ []));
     loadingLabel = computed(() => this.i18n.resolve(this.renderConfig().state?.loadingLabel), ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
+    loadingDescription = computed(() => this.t('praxis.charts.runtime.loadingDescription', 'Publishing the analytics slice and preparing visual buckets.'), ...(ngDevMode ? [{ debugName: "loadingDescription" }] : /* istanbul ignore next */ []));
     transformedData = computed(() => this.transformer.transform(this.renderConfig(), this.resolvedData()), ...(ngDevMode ? [{ debugName: "transformedData" }] : /* istanbul ignore next */ []));
     accessiblePoints = computed(() => buildAccessibleChartPoints(this.renderConfig(), this.transformedData(), (value) => this.formatAccessibleValue(value), (index) => this.t('praxis.charts.runtime.accessibility.pointFallback', `Point ${index + 1}`, { index: index + 1 }), () => this.t('praxis.charts.runtime.accessibility.seriesFallback', 'Series')), ...(ngDevMode ? [{ debugName: "accessiblePoints" }] : /* istanbul ignore next */ []));
     dataDiagnostic = computed(() => {
@@ -2315,6 +2316,7 @@ class PraxisChartComponent {
         if (!document) {
             return;
         }
+        const focusReturnTarget = this.captureFocusReturnTarget();
         this.configEditorContextPending.set(true);
         try {
             const resolvedContext = await this.resolveConfigEditorContext(document);
@@ -2354,7 +2356,14 @@ class PraxisChartComponent {
                 this.runtimeChartDocument.set(clone);
                 this.chartDocumentSaved.emit(clone);
             });
-            this.editorSessionSubscriptions = [appliedSubscription, savedSubscription];
+            const closedSubscription = ref.closed$?.subscribe(() => {
+                this.restoreFocus(focusReturnTarget);
+            });
+            this.editorSessionSubscriptions = [
+                appliedSubscription,
+                savedSubscription,
+                ...(closedSubscription ? [closedSubscription] : []),
+            ];
         }
         finally {
             this.configEditorContextPending.set(false);
@@ -2391,6 +2400,24 @@ class PraxisChartComponent {
         }
         return Array.isArray(resolvedOptions) ? resolvedOptions : [];
     }
+    captureFocusReturnTarget() {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        const activeElement = document.activeElement;
+        return activeElement instanceof HTMLElement && activeElement !== document.body
+            ? activeElement
+            : null;
+    }
+    restoreFocus(target) {
+        queueMicrotask(() => {
+            if (target?.isConnected
+                && !target.hasAttribute('disabled')
+                && target.getAttribute('aria-disabled') !== 'true') {
+                target.focus();
+            }
+        });
+    }
     isConfigEditorContextResult(value) {
         const record = this.asRecord(value);
         return !!record && ('context' in record || 'diagnostics' in record);
@@ -2839,6 +2866,7 @@ class PraxisChartComponent {
       [style.--praxis-chart-config-surface-border-width]="surfaceBorderWidth()"
       [style.--praxis-chart-config-surface-radius]="surfaceBorderRadius()"
       [style.--praxis-chart-config-text-color]="surfaceTextColor()"
+      [attr.aria-busy]="loadState() === 'loading' ? 'true' : null"
     >
       @if (canOpenConfigEditor()) {
         <button
@@ -2872,7 +2900,11 @@ class PraxisChartComponent {
       }
 
       @if (loadState() === 'loading') {
-        <div class="praxis-chart-state praxis-chart-state-loading">
+        <div
+          class="praxis-chart-state praxis-chart-state-loading"
+          role="status"
+          aria-atomic="true"
+        >
           <div class="praxis-chart-loading-hero" aria-hidden="true">
             <div class="praxis-chart-loading-summary">
               <span class="praxis-chart-loading-chip"></span>
@@ -2891,12 +2923,16 @@ class PraxisChartComponent {
               <div class="praxis-chart-state-title">{{ loadingLabel() }}</div>
             }
             <div class="praxis-chart-state-description">
-              Publicando o recorte analitico e preparando os buckets visuais.
+              {{ loadingDescription() }}
             </div>
           </div>
         </div>
       } @else if (loadState() === 'error') {
-        <div class="praxis-chart-state praxis-chart-state-error">
+        <div
+          class="praxis-chart-state praxis-chart-state-error"
+          role="alert"
+          aria-atomic="true"
+        >
           @if (errorTitle()) {
             <div class="praxis-chart-state-title">{{ errorTitle() }}</div>
           }
@@ -2905,7 +2941,11 @@ class PraxisChartComponent {
           }
         </div>
       } @else if (loadState() === 'empty') {
-        <div class="praxis-chart-state praxis-chart-state-empty">
+        <div
+          class="praxis-chart-state praxis-chart-state-empty"
+          role="status"
+          aria-atomic="true"
+        >
           @if (emptyTitle()) {
             <div class="praxis-chart-state-title">{{ emptyTitle() }}</div>
           }
@@ -2981,6 +3021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       [style.--praxis-chart-config-surface-border-width]="surfaceBorderWidth()"
       [style.--praxis-chart-config-surface-radius]="surfaceBorderRadius()"
       [style.--praxis-chart-config-text-color]="surfaceTextColor()"
+      [attr.aria-busy]="loadState() === 'loading' ? 'true' : null"
     >
       @if (canOpenConfigEditor()) {
         <button
@@ -3014,7 +3055,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       }
 
       @if (loadState() === 'loading') {
-        <div class="praxis-chart-state praxis-chart-state-loading">
+        <div
+          class="praxis-chart-state praxis-chart-state-loading"
+          role="status"
+          aria-atomic="true"
+        >
           <div class="praxis-chart-loading-hero" aria-hidden="true">
             <div class="praxis-chart-loading-summary">
               <span class="praxis-chart-loading-chip"></span>
@@ -3033,12 +3078,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <div class="praxis-chart-state-title">{{ loadingLabel() }}</div>
             }
             <div class="praxis-chart-state-description">
-              Publicando o recorte analitico e preparando os buckets visuais.
+              {{ loadingDescription() }}
             </div>
           </div>
         </div>
       } @else if (loadState() === 'error') {
-        <div class="praxis-chart-state praxis-chart-state-error">
+        <div
+          class="praxis-chart-state praxis-chart-state-error"
+          role="alert"
+          aria-atomic="true"
+        >
           @if (errorTitle()) {
             <div class="praxis-chart-state-title">{{ errorTitle() }}</div>
           }
@@ -3047,7 +3096,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           }
         </div>
       } @else if (loadState() === 'empty') {
-        <div class="praxis-chart-state praxis-chart-state-empty">
+        <div
+          class="praxis-chart-state praxis-chart-state-empty"
+          role="status"
+          aria-atomic="true"
+        >
           @if (emptyTitle()) {
             <div class="praxis-chart-state-title">{{ emptyTitle() }}</div>
           }
@@ -5860,6 +5913,7 @@ function pointData(category, value) {
 
 const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.runtime.editChart': 'Edit chart settings',
+    'praxis.charts.runtime.loadingDescription': 'Publishing the analytics slice and preparing visual buckets.',
     'praxis.charts.runtime.invalidDocumentTitle': 'Invalid canonical configuration',
     'praxis.charts.runtime.invalidDocumentDescription': 'The canonical chart document could not be mapped by Praxis Charts. Review the chart contract before continuing.',
     'praxis.charts.runtime.remoteErrorTitle': 'Chart data could not be loaded',
@@ -6122,6 +6176,7 @@ const PRAXIS_CHARTS_EN_US = {
 
 const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.runtime.editChart': 'Editar configurações do gráfico',
+    'praxis.charts.runtime.loadingDescription': 'Publicando o recorte analítico e preparando os buckets visuais.',
     'praxis.charts.runtime.invalidDocumentTitle': 'Configuração canônica inválida',
     'praxis.charts.runtime.invalidDocumentDescription': 'O documento canônico do gráfico não pode ser mapeado pelo Praxis Charts. Revise o contrato do gráfico antes de continuar.',
     'praxis.charts.runtime.remoteErrorTitle': 'Não foi possível carregar os dados do gráfico',

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@praxisui/charts",
-  "version": "9.0.50",
+  "version": "9.0.52",
   "description": "Metadata-driven charts library for Praxis UI Angular with engine adapters and Apache ECharts as the initial renderer.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^9.0.50",
+    "@praxisui/core": "^9.0.52",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^9.0.50",
+    "@praxisui/table": "^9.0.52",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-charts.d.ts

@@ -630,6 +630,7 @@ declare class PraxisChartComponent {
     readonly surfaceTextColor: _angular_core.Signal<string | null>;
     readonly renderConfig: _angular_core.Signal<PraxisChartConfig>;
     readonly loadingLabel: _angular_core.Signal<string>;
+    readonly loadingDescription: _angular_core.Signal<string>;
     readonly transformedData: _angular_core.Signal<PraxisChartTransformedData>;
     readonly accessiblePoints: _angular_core.Signal<PraxisChartAccessiblePoint[]>;
     readonly dataDiagnostic: _angular_core.Signal<PraxisChartDataDiagnostic | null>;
@@ -653,6 +654,8 @@ declare class PraxisChartComponent {
     openConfigEditor(): Promise<void>;
     private resolveConfigEditorContext;
     private resolveEditorOptions;
+    private captureFocusReturnTarget;
+    private restoreFocus;
     private isConfigEditorContextResult;
     private asRecord;
     private handlePointClick;