@caribeng/ui 22.1.1 → 22.4.0

package/fesm2022/caribeng-ui-menubar.mjs

@@ -1,14 +1,21 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, Injector, input, computed, output, signal, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation, cbVisibleItems, cbRunCommand } from '@caribeng/ui';
 
 /** Horizontal navigation bar with optional one-level dropdown menus. */
 class CbMenubar {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.host = inject((ElementRef));
+        this.injector = inject(Injector);
         this.items = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.ariaLabel = input('Main navigation', /* @ts-ignore */
+        /** Items sin los de `visible: false`. */
+        this.visibleItems = computed(() => cbVisibleItems(this.items()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.itemSelect = output();
         this.openIndex = signal(null, /* @ts-ignore */
@@ -22,6 +29,7 @@ class CbMenubar {
             event.preventDefault();
             return;
         }
+        cbRunCommand(item);
         this.itemSelect.emit(item);
         if (parentIndex !== undefined)
             this.openIndex.set(null);
@@ -53,10 +61,11 @@ class CbMenubar {
             this.openIndex.set(null);
             return;
         }
-        if (event.key === 'ArrowDown' && root && this.items()[rootIndex]?.items?.length) {
+        if (event.key === 'ArrowDown' && root && this.visibleItems()[rootIndex]?.items?.length) {
             event.preventDefault();
             this.openIndex.set(rootIndex);
-            queueMicrotask(() => this.host.nativeElement.querySelector('.cb-menubar__submenu [role="menuitem"]:not([aria-disabled="true"]):not(:disabled)')?.focus());
+            // El submenú se pinta en el siguiente render (zoneless): se enfoca después.
+            afterNextRender(() => this.host.nativeElement.querySelector('.cb-menubar__submenu [role="menuitem"]:not([aria-disabled="true"]):not(:disabled)')?.focus(), { injector: this.injector });
         }
         if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && target.closest('.cb-menubar__submenu')) {
             const children = Array.from(target.closest('.cb-menubar__submenu').querySelectorAll('[role="menuitem"]:not([aria-disabled="true"]):not(:disabled)'));
@@ -68,9 +77,9 @@ class CbMenubar {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMenubar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMenubar, isStandalone: true, selector: "cb-menubar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "keydown": "onKeydown($event)", "document:click": "onDocumentClick($event)" }, classAttribute: "cb-menubar" }, ngImport: i0, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().mainNavigation)">
       <ul class="cb-menubar__list" role="menubar">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-menubar__entry" role="none">
             @if (item.items?.length) {
               <button
@@ -129,9 +138,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(keydown)': 'onKeydown($event)',
                         '(document:click)': 'onDocumentClick($event)',
                     }, template: `
-    <nav [attr.aria-label]="ariaLabel()">
+    <nav [attr.aria-label]="(ariaLabel() ?? t().mainNavigation)">
       <ul class="cb-menubar__list" role="menubar">
-        @for (item of items(); track $index; let i = $index) {
+        @for (item of visibleItems(); track $index; let i = $index) {
           <li class="cb-menubar__entry" role="none">
             @if (item.items?.length) {
               <button

package/fesm2022/caribeng-ui-message.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, model, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, model, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
+import { injectCbTranslation } from '@caribeng/ui';
 
 const SEVERITY_ICON = {
     success: 'circle-check',
@@ -23,6 +24,8 @@ const SEVERITY_ICON = {
  */
 class CbMessage {
     constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
         this.severity = input('info', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
         /** Muestra el botón de cerrar. */
@@ -33,6 +36,9 @@ class CbMessage {
         /** Visibilidad (two-way). */
         this.visible = model(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** danger y warning se anuncian al momento (`alert`); el resto, sin interrumpir (`status`). */
+        this.urgent = computed(() => this.severity() === 'danger' || this.severity() === 'warning', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "urgent" }] : /* istanbul ignore next */ []));
         /** Se emite al cerrar. */
         this.closed = output();
         this.iconName = computed(() => {
@@ -50,37 +56,37 @@ class CbMessage {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMessage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMessage, isStandalone: true, selector: "cb-message", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", closed: "closed" }, host: { classAttribute: "cb-message-host" }, ngImport: i0, template: `
     @if (visible()) {
-      <div class="cb-message" [class]="'cb-message--' + severity()" role="alert">
+      <div class="cb-message" [class]="'cb-message--' + severity()" [attr.role]="urgent() ? 'alert' : 'status'">
         @if (iconName()) {
           <cb-icon class="cb-message__icon" [name]="iconName()" [size]="18" aria-hidden="true" />
         }
         <div class="cb-message__content"><ng-content /></div>
         @if (closable()) {
-          <button type="button" class="cb-message__close" aria-label="Cerrar" (click)="close()">
+          <button type="button" class="cb-message__close" [attr.aria-label]="t().close" (click)="close()">
             <cb-icon name="x" [size]="16" aria-hidden="true" />
           </button>
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:block}.cb-message{display:flex;align-items:flex-start;gap:var(--cb-space-2);padding:var(--cb-space-3) var(--cb-space-4);border-radius:var(--cb-radius-md);border:var(--cb-border-width) solid transparent;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal);color:var(--_fg);background-color:var(--_bg);border-color:var(--_border)}.cb-message__icon{flex:none;margin-top:1px;color:var(--_accent)}.cb-message__content{flex:1 1 auto;min-width:0}.cb-message__close{flex:none;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-sm);cursor:pointer;opacity:.7}.cb-message__close:hover{opacity:1}.cb-message--primary{--_accent: var(--cb-color-primary-500);--_bg: var(--cb-color-primary-50);--_fg: var(--cb-color-primary-500);--_border: var(--cb-color-primary-100)}.cb-message--secondary{--_accent: var(--cb-color-text-muted);--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text);--_border: var(--cb-color-border)}.cb-message--success{--_accent: var(--cb-color-success-500);--_bg: var(--cb-color-success-50);--_fg: var(--cb-color-success-500);--_border: var(--cb-color-success-100)}.cb-message--info{--_accent: var(--cb-color-info-500);--_bg: var(--cb-color-info-50);--_fg: var(--cb-color-info-500);--_border: var(--cb-color-info-100)}.cb-message--warning{--_accent: var(--cb-color-warning-500);--_bg: var(--cb-color-warning-50);--_fg: var(--cb-color-warning-500);--_border: var(--cb-color-warning-100)}.cb-message--danger{--_accent: var(--cb-color-danger-500);--_bg: var(--cb-color-danger-50);--_fg: var(--cb-color-danger-500);--_border: var(--cb-color-danger-100)}.cb-message--help{--_accent: var(--cb-color-help-500);--_bg: var(--cb-color-help-50);--_fg: var(--cb-color-help-500);--_border: var(--cb-color-help-100)}.cb-message--contrast{--_accent: var(--cb-color-text);--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text);--_border: var(--cb-color-border-strong)}:host-context([data-theme=\"dark\"]) .cb-message{--_bg: color-mix(in srgb, var(--_accent) 16%, transparent);--_fg: var(--cb-color-text);--_border: color-mix(in srgb, var(--_accent) 35%, transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.cb-message{display:flex;align-items:flex-start;gap:var(--cb-space-2);padding:var(--cb-space-3) var(--cb-space-4);border-radius:var(--cb-radius-md);border:var(--cb-border-width) solid transparent;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal);color:var(--_fg);background-color:var(--_bg);border-color:var(--_border)}.cb-message__icon{flex:none;margin-top:1px;color:var(--_accent)}.cb-message__content{flex:1 1 auto;min-width:0}.cb-message__close{flex:none;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-sm);cursor:pointer;opacity:.7}.cb-message__close:hover{opacity:1}.cb-message--primary{--_accent: var(--cb-color-primary-500);--_bg: var(--cb-color-primary-50);--_fg: var(--cb-color-primary-500);--_border: var(--cb-color-primary-100)}.cb-message--secondary{--_accent: var(--cb-color-text-muted);--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text);--_border: var(--cb-color-border)}.cb-message--success{--_accent: var(--cb-color-success-500);--_bg: var(--cb-color-success-50);--_fg: var(--cb-color-success-500);--_border: var(--cb-color-success-100)}.cb-message--info{--_accent: var(--cb-color-info-500);--_bg: var(--cb-color-info-50);--_fg: var(--cb-color-info-500);--_border: var(--cb-color-info-100)}.cb-message--warning{--_accent: var(--cb-color-warning-500);--_bg: var(--cb-color-warning-50);--_fg: var(--cb-color-warning-500);--_border: var(--cb-color-warning-100)}.cb-message--danger{--_accent: var(--cb-color-danger-500);--_bg: var(--cb-color-danger-50);--_fg: var(--cb-color-danger-500);--_border: var(--cb-color-danger-100)}.cb-message--help{--_accent: var(--cb-color-help-500);--_bg: var(--cb-color-help-50);--_fg: var(--cb-color-help-500);--_border: var(--cb-color-help-100)}.cb-message--contrast{--_accent: var(--cb-color-text);--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text);--_border: var(--cb-color-border-strong)}:host-context([data-theme=\"dark\"]) .cb-message{--_bg: color-mix(in srgb, var(--_accent) 16%, transparent);--_fg: var(--cb-color-text);--_border: color-mix(in srgb, var(--_accent) 35%, transparent)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMessage, decorators: [{
             type: Component,
             args: [{ selector: 'cb-message', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: { class: 'cb-message-host' }, template: `
     @if (visible()) {
-      <div class="cb-message" [class]="'cb-message--' + severity()" role="alert">
+      <div class="cb-message" [class]="'cb-message--' + severity()" [attr.role]="urgent() ? 'alert' : 'status'">
         @if (iconName()) {
           <cb-icon class="cb-message__icon" [name]="iconName()" [size]="18" aria-hidden="true" />
         }
         <div class="cb-message__content"><ng-content /></div>
         @if (closable()) {
-          <button type="button" class="cb-message__close" aria-label="Cerrar" (click)="close()">
+          <button type="button" class="cb-message__close" [attr.aria-label]="t().close" (click)="close()">
             <cb-icon name="x" [size]="16" aria-hidden="true" />
           </button>
         }
       </div>
     }
-  `, styles: [":host{display:block}.cb-message{display:flex;align-items:flex-start;gap:var(--cb-space-2);padding:var(--cb-space-3) var(--cb-space-4);border-radius:var(--cb-radius-md);border:var(--cb-border-width) solid transparent;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal);color:var(--_fg);background-color:var(--_bg);border-color:var(--_border)}.cb-message__icon{flex:none;margin-top:1px;color:var(--_accent)}.cb-message__content{flex:1 1 auto;min-width:0}.cb-message__close{flex:none;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-sm);cursor:pointer;opacity:.7}.cb-message__close:hover{opacity:1}.cb-message--primary{--_accent: var(--cb-color-primary-500);--_bg: var(--cb-color-primary-50);--_fg: var(--cb-color-primary-500);--_border: var(--cb-color-primary-100)}.cb-message--secondary{--_accent: var(--cb-color-text-muted);--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text);--_border: var(--cb-color-border)}.cb-message--success{--_accent: var(--cb-color-success-500);--_bg: var(--cb-color-success-50);--_fg: var(--cb-color-success-500);--_border: var(--cb-color-success-100)}.cb-message--info{--_accent: var(--cb-color-info-500);--_bg: var(--cb-color-info-50);--_fg: var(--cb-color-info-500);--_border: var(--cb-color-info-100)}.cb-message--warning{--_accent: var(--cb-color-warning-500);--_bg: var(--cb-color-warning-50);--_fg: var(--cb-color-warning-500);--_border: var(--cb-color-warning-100)}.cb-message--danger{--_accent: var(--cb-color-danger-500);--_bg: var(--cb-color-danger-50);--_fg: var(--cb-color-danger-500);--_border: var(--cb-color-danger-100)}.cb-message--help{--_accent: var(--cb-color-help-500);--_bg: var(--cb-color-help-50);--_fg: var(--cb-color-help-500);--_border: var(--cb-color-help-100)}.cb-message--contrast{--_accent: var(--cb-color-text);--_bg: var(--cb-color-surface-100);--_fg: var(--cb-color-text);--_border: var(--cb-color-border-strong)}:host-context([data-theme=\"dark\"]) .cb-message{--_bg: color-mix(in srgb, var(--_accent) 16%, transparent);--_fg: var(--cb-color-text);--_border: color-mix(in srgb, var(--_accent) 35%, transparent)}\n"] }]
+  `, styles: [":host{display:block}.cb-message{display:flex;align-items:flex-start;gap:var(--cb-space-2);padding:var(--cb-space-3) var(--cb-space-4);border-radius:var(--cb-radius-md);border:var(--cb-border-width) solid transparent;font-family:var(--cb-font-sans);font-size:var(--cb-text-sm);line-height:var(--cb-line-height-normal);color:var(--_fg);background-color:var(--_bg);border-color:var(--_border)}.cb-message__icon{flex:none;margin-top:1px;color:var(--_accent)}.cb-message__content{flex:1 1 auto;min-width:0}.cb-message__close{flex:none;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:none;background:transparent;color:inherit;border-radius:var(--cb-radius-sm);cursor:pointer;opacity:.7}.cb-message__close:hover{opacity:1}.cb-message--primary{--_accent: var(--cb-color-primary-500);--_bg: var(--cb-color-primary-50);--_fg: var(--cb-color-primary-500);--_border: var(--cb-color-primary-100)}.cb-message--secondary{--_accent: var(--cb-color-text-muted);--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text);--_border: var(--cb-color-border)}.cb-message--success{--_accent: var(--cb-color-success-500);--_bg: var(--cb-color-success-50);--_fg: var(--cb-color-success-500);--_border: var(--cb-color-success-100)}.cb-message--info{--_accent: var(--cb-color-info-500);--_bg: var(--cb-color-info-50);--_fg: var(--cb-color-info-500);--_border: var(--cb-color-info-100)}.cb-message--warning{--_accent: var(--cb-color-warning-500);--_bg: var(--cb-color-warning-50);--_fg: var(--cb-color-warning-500);--_border: var(--cb-color-warning-100)}.cb-message--danger{--_accent: var(--cb-color-danger-500);--_bg: var(--cb-color-danger-50);--_fg: var(--cb-color-danger-500);--_border: var(--cb-color-danger-100)}.cb-message--help{--_accent: var(--cb-color-help-500);--_bg: var(--cb-color-help-50);--_fg: var(--cb-color-help-500);--_border: var(--cb-color-help-100)}.cb-message--contrast{--_accent: var(--cb-color-text);--_bg: var(--cb-color-surface-hover);--_fg: var(--cb-color-text);--_border: var(--cb-color-border-strong)}:host-context([data-theme=\"dark\"]) .cb-message{--_bg: color-mix(in srgb, var(--_accent) 16%, transparent);--_fg: var(--cb-color-text);--_border: color-mix(in srgb, var(--_accent) 35%, transparent)}\n"] }]
         }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 function toBoolean(value) {
     return value !== false && value != null && `${value}` !== 'false';

package/fesm2022/caribeng-ui-metergroup.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { CbIcon } from '@caribeng/ui/icon';
 
 /**
@@ -11,6 +11,17 @@ class CbMeterGroup {
         ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
         this.max = input(100, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Nombre accesible del medidor (p. ej. "Almacenamiento"). */
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Suma de los valores (valor actual del `role="meter"`). */
+        this.total = computed(() => this.values().reduce((sum, v) => sum + v.value, 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        /** Desglose legible para el lector de pantalla ("Apps 16 %, Fotos 8 %"). */
+        this.valueText = computed(() => this.values()
+            .map((v) => `${v.label} ${this.format(v.value)}%`)
+            .join(', '), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
         this.palette = [
             'var(--cb-color-primary-500)',
             'var(--cb-color-info-500)',
@@ -22,13 +33,17 @@ class CbMeterGroup {
         const m = Math.max(1, this.max());
         return Math.min(100, Math.max(0, (val / m) * 100));
     }
+    /** Porcentaje respecto a `max`, redondeado a un decimal. */
+    format(val) {
+        return Math.round(this.percent(val) * 10) / 10;
+    }
     defaultColor(idx) {
         return this.palette[idx % this.palette.length];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMeterGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMeterGroup, isStandalone: true, selector: "cb-meter-group", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()" }, classAttribute: "cb-meter-group" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMeterGroup, isStandalone: true, selector: "cb-meter-group", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "total()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "cb-meter-group" }, ngImport: i0, template: `
     <div class="cb-meter-group__track">
-      @for (item of values(); track item.label; let idx = $index) {
+      @for (item of values(); track $index; let idx = $index) {
         <span
           class="cb-meter-group__bar"
           [style.width.%]="percent(item.value)"
@@ -36,8 +51,8 @@ class CbMeterGroup {
         ></span>
       }
     </div>
-    <ol class="cb-meter-group__legend">
-      @for (item of values(); track item.label; let idx = $index) {
+    <ol class="cb-meter-group__legend" aria-hidden="true">
+      @for (item of values(); track $index; let idx = $index) {
         <li class="cb-meter-group__item">
           <span
             class="cb-meter-group__dot"
@@ -47,7 +62,7 @@ class CbMeterGroup {
             <cb-icon [name]="item.icon" [size]="14" aria-hidden="true" />
           }
           <span class="cb-meter-group__label">{{ item.label }}</span>
-          <span class="cb-meter-group__value">({{ item.value }}%)</span>
+          <span class="cb-meter-group__value">({{ format(item.value) }}%)</span>
         </li>
       }
     </ol>
@@ -60,9 +75,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         role: 'meter',
                         '[attr.aria-valuemin]': '0',
                         '[attr.aria-valuemax]': 'max()',
+                        '[attr.aria-valuenow]': 'total()',
+                        '[attr.aria-valuetext]': 'valueText()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
                     }, template: `
     <div class="cb-meter-group__track">
-      @for (item of values(); track item.label; let idx = $index) {
+      @for (item of values(); track $index; let idx = $index) {
         <span
           class="cb-meter-group__bar"
           [style.width.%]="percent(item.value)"
@@ -70,8 +88,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         ></span>
       }
     </div>
-    <ol class="cb-meter-group__legend">
-      @for (item of values(); track item.label; let idx = $index) {
+    <ol class="cb-meter-group__legend" aria-hidden="true">
+      @for (item of values(); track $index; let idx = $index) {
         <li class="cb-meter-group__item">
           <span
             class="cb-meter-group__dot"
@@ -81,12 +99,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             <cb-icon [name]="item.icon" [size]="14" aria-hidden="true" />
           }
           <span class="cb-meter-group__label">{{ item.label }}</span>
-          <span class="cb-meter-group__value">({{ item.value }}%)</span>
+          <span class="cb-meter-group__value">({{ format(item.value) }}%)</span>
         </li>
       }
     </ol>
   `, styles: [":host{display:block;width:100%;font-family:var(--cb-font-sans)}.cb-meter-group__track{display:flex;width:100%;height:.65rem;border-radius:999px;background:var(--cb-color-border);overflow:hidden;gap:2px}.cb-meter-group__bar{display:block;height:100%;transition:width .2s ease}.cb-meter-group__legend{list-style:none;margin:var(--cb-space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--cb-space-4)}.cb-meter-group__item{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--cb-text-sm);color:var(--cb-color-text)}.cb-meter-group__dot{width:.6rem;height:.6rem;border-radius:999px}.cb-meter-group__value{color:var(--cb-color-text-muted)}\n"] }]
-        }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+        }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.