@praxisui/charts 9.0.51 → 9.0.53

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; empty uses localized runtime copy by default while an authored `emptyState` keeps precedence;
+- 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-31T16:32:43.469Z",
+  "generatedAt": "2026-08-31T21:15:24.814Z",
   "packageName": "@praxisui/charts",
-  "packageVersion": "9.0.51",
+  "packageVersion": "9.0.53",
   "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(() => {
@@ -2052,8 +2053,10 @@ class PraxisChartComponent {
         }
         return this.transformedData().diagnostic ?? null;
     }, ...(ngDevMode ? [{ debugName: "dataDiagnostic" }] : /* istanbul ignore next */ []));
-    emptyTitle = computed(() => this.i18n.resolve(this.renderConfig().emptyState?.title), ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
-    emptyDescription = computed(() => this.i18n.resolve(this.renderConfig().emptyState?.description), ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
+    emptyTitle = computed(() => this.i18n.resolve(this.renderConfig().emptyState?.title)
+        || this.t('praxis.charts.runtime.emptyTitle', 'No chart data available'), ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
+    emptyDescription = computed(() => this.i18n.resolve(this.renderConfig().emptyState?.description)
+        || this.t('praxis.charts.runtime.emptyDescription', 'The query completed but returned no buckets for this visualization.'), ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
     errorTitle = computed(() => this.chartDocumentMappingError()
         ? this.t('praxis.charts.runtime.invalidDocumentTitle', 'Chart configuration is invalid')
         : this.dataDiagnostic()
@@ -2865,6 +2868,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
@@ -2898,7 +2902,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>
@@ -2917,12 +2925,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>
           }
@@ -2931,7 +2943,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>
           }
@@ -3007,6 +3023,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
@@ -3040,7 +3057,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>
@@ -3059,12 +3080,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>
           }
@@ -3073,7 +3098,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>
           }
@@ -5886,6 +5915,9 @@ 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.emptyTitle': 'No chart data available',
+    'praxis.charts.runtime.emptyDescription': 'The query completed but returned no buckets for this visualization.',
     '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',
@@ -6148,6 +6180,9 @@ 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.emptyTitle': 'Nenhum dado disponível para o gráfico',
+    'praxis.charts.runtime.emptyDescription': 'A consulta foi concluída, mas não retornou buckets para esta visualização.',
     '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.51",
+  "version": "9.0.53",
   "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.51",
+    "@praxisui/core": "^9.0.53",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^9.0.51",
+    "@praxisui/table": "^9.0.53",
     "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>;