AxyIX · Oct 21, 2026 · Oct 12, 2026 · Oct 20, 2026
diff --git a/docs/components-api/metergroup.md b/docs/components-api/metergroup.md
@@ -2,6 +2,8 @@
 
 # ExtraMeterGroup
 
+> ✅ **Реализован**: `ExtraMeterGroupComponent` (`@cdek-it/angular-ui-kit`) соответствует спецификации.
+
 Отображение массива данных в виде группы измерителей (сегментов).
 
 | Свойство            | Описание                 | Типизация                |

diff --git a/src/lib/components/metergroup/metergroup.component.ts b/src/lib/components/metergroup/metergroup.component.ts
@@ -1,32 +1,41 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
-import { MeterGroup, MeterItem } from 'primeng/metergroup';
-import { MultiSelect } from 'primeng/multiselect';
+import { MeterGroup } from 'primeng/metergroup';
 
 export type ExtraMeterGroupOrientation = 'horizontal' | 'vertical';
 export type ExtraMeterGroupLabelPosition = 'start' | 'end';
 export type ExtraMeterGroupLabelOrientation = 'horizontal' | 'vertical';
-export type ExtraMeterItem = MeterItem;
+
+export interface ExtraMeterItem {
+  label?: string;
+  value?: number;
+  color?: string;
+  icon?: string;
+}
 
 @Component({
   selector: 'extra-metergroup',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MeterGroup, MultiSelect],
+  imports: [MeterGroup],
   template: `
     <p-metergroup
       [value]="value"
       [orientation]="orientation"
       [labelPosition]="labelPosition"
       [labelOrientation]="labelOrientation"
+      [attr.aria-label]="ariaLabel || null"
+      [attr.aria-labelledby]="ariaLabelledBy || null"
     ></p-metergroup>
-    <p-multiselect></p-multiselect>
   `
 })
 export class ExtraMeterGroupComponent {
   @Input() value: ExtraMeterItem[] = [];
   @Input() orientation: ExtraMeterGroupOrientation = 'horizontal';
   @Input() labelPosition: ExtraMeterGroupLabelPosition = 'end';
   @Input() labelOrientation: ExtraMeterGroupLabelOrientation = 'horizontal';
+  /** Доступное имя: у корня role="meter", без имени его не прочитает скринридер. */
+  @Input() ariaLabel: string | undefined = undefined;
+  @Input() ariaLabelledBy: string | undefined = undefined;
 
   @HostBinding('style.display') get hostDisplay() {
     return this.orientation === 'vertical' ? 'flex' : null;

diff --git a/src/lib/components/metergroup/metergroup.figma.md b/src/lib/components/metergroup/metergroup.figma.md
@@ -28,7 +28,11 @@ updated: '2026-06-22'
 | `labelPosition` | `'start' \| 'end'` | `'end'` | Позиция блока подписей относительно шкалы — соответствует Figma-свойству `label-position` |
 | `labelOrientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Раскладка списка подписей — соответствует Figma-свойству `label-orientation` |
 
-Тип `ExtraMeterItem` реэкспортирует PrimeNG `MeterItem`: поле `value` (число) обязательно, поля `label`, `color` и `icon` опциональны. CSS-классы иконок берутся из справочника [icons.md](../../figma-code-connect/icons.md), цвета сегментов — из токенов [tokens.md](../../figma-code-connect/tokens.md).
+Тип `ExtraMeterItem` — собственный интерфейс (поля `label`, `value`, `color`, `icon`, структурно
+совпадает с PrimeNG `MeterItem`, но не реэкспортирует его напрямую — публичное API не должно течь
+из PrimeNG, см. раздел «Общее направление проекта» в корневом `CLAUDE.md`). CSS-классы иконок
+берутся из справочника [icons.md](../../figma-code-connect/icons.md), цвета сегментов — из токенов
+[tokens.md](../../figma-code-connect/tokens.md).
 
 ## Variants
 

diff --git a/src/lib/components/metergroup/public_api.ts b/src/lib/components/metergroup/public_api.ts
@@ -1,4 +1 @@
 export * from './metergroup.component';
-
-
-
diff --git a/src/stories/components/metergroup/examples/metergroup-basic.component.ts b/src/stories/components/metergroup/examples/metergroup-basic.component.ts
diff --git a/src/stories/components/metergroup/examples/metergroup-horizontal.component.ts b/src/stories/components/metergroup/examples/metergroup-horizontal.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
-import { ExtraMeterGroupComponent } from '../../../../lib/components/metergroup/metergroup.component';
-import { MeterItem } from 'primeng/metergroup';
+import { ExtraMeterGroupComponent, ExtraMeterItem } from '../../../../lib/components/metergroup/metergroup.component';
 import { defaultValue } from '../metergroup.data';
 
 @Component({
@@ -11,17 +10,17 @@ import { defaultValue } from '../metergroup.data';
   imports: [ExtraMeterGroupComponent],
   template: `
     <div class="bg-surface-ground">
-      <extra-metergroup [value]="value" orientation="horizontal"></extra-metergroup>
+      <extra-metergroup ariaLabel="Использование диска" [value]="value" orientation="horizontal"></extra-metergroup>
     </div>
   `
 })
 export class MeterGroupHorizontalComponent {
-  value: MeterItem[] = defaultValue;
+  value: ExtraMeterItem[] = defaultValue;
 }
 
 export const Horizontal: StoryObj = {
   render: () => ({
-    template: `<app-metergroup-horizontal></app-metergroup-horizontal>`,
+    template: `<app-metergroup-horizontal></app-metergroup-horizontal>`
   }),
   parameters: {
     docs: {
@@ -30,26 +29,26 @@ export const Horizontal: StoryObj = {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
-import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-metergroup-horizontal',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ExtraMeterGroupComponent],
   template: \`
-    <extra-metergroup [value]="value" orientation="horizontal"></extra-metergroup>
+    <extra-metergroup ariaLabel="Использование диска" [value]="value" orientation="horizontal"></extra-metergroup>
   \`,
 })
 export class MeterGroupHorizontalComponent {
-  value: MeterItem[] = [
+  value: ExtraMeterItem[] = [
     { label: 'Space used', color: '#34d399', value: 16 },
     { label: 'Unused', color: '#fbbf24', value: 8 },
     { label: 'System', color: '#60a5fa', value: 24 },
   ];
 }
-        `,
-      },
-    },
-  },
+        `
+      }
+    }
+  }
 };
diff --git a/src/stories/components/metergroup/examples/metergroup-icon.component.ts b/src/stories/components/metergroup/examples/metergroup-icon.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
-import { ExtraMeterGroupComponent } from '../../../../lib/components/metergroup/metergroup.component';
-import { MeterItem } from 'primeng/metergroup';
+import { ExtraMeterGroupComponent, ExtraMeterItem } from '../../../../lib/components/metergroup/metergroup.component';
 import { iconValue } from '../metergroup.data';
 
 @Component({
@@ -11,17 +10,17 @@ import { iconValue } from '../metergroup.data';
   imports: [ExtraMeterGroupComponent],
   template: `
     <div class="bg-surface-ground">
-      <extra-metergroup [value]="value"></extra-metergroup>
+      <extra-metergroup ariaLabel="Использование диска" [value]="value"></extra-metergroup>
     </div>
   `
 })
 export class MeterGroupIconComponent {
-  value: MeterItem[] = iconValue;
+  value: ExtraMeterItem[] = iconValue;
 }
 
 export const Icon: StoryObj = {
   render: () => ({
-    template: `<app-metergroup-icon></app-metergroup-icon>`,
+    template: `<app-metergroup-icon></app-metergroup-icon>`
   }),
   parameters: {
     docs: {
@@ -30,26 +29,26 @@ export const Icon: StoryObj = {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
-import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-metergroup-icon',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ExtraMeterGroupComponent],
   template: \`
-    <extra-metergroup [value]="value"></extra-metergroup>
+    <extra-metergroup ariaLabel="Использование диска" [value]="value"></extra-metergroup>
   \`,
 })
 export class MeterGroupIconComponent {
-  value: MeterItem[] = [
+  value: ExtraMeterItem[] = [
     { label: 'Apps', color: '#34d399', value: 16, icon: 'ti ti-apps' },
     { label: 'Messages', color: '#fbbf24', value: 8, icon: 'ti ti-message' },
     { label: 'System', color: '#60a5fa', value: 24, icon: 'ti ti-cpu' },
   ];
 }
-        `,
-      },
-    },
-  },
+        `
+      }
+    }
+  }
 };
diff --git a/src/stories/components/metergroup/examples/metergroup-label-start.component.ts b/src/stories/components/metergroup/examples/metergroup-label-start.component.ts
@@ -1,27 +1,26 @@
-import { Component, ChangeDetectionStrategy} from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
-import { ExtraMeterGroupComponent } from '../../../../lib/components/metergroup/metergroup.component';
-import { MeterItem } from 'primeng/metergroup';
+import { ExtraMeterGroupComponent, ExtraMeterItem } from '../../../../lib/components/metergroup/metergroup.component';
 import { defaultValue } from '../metergroup.data';
-// todo написать extrameteritem
+
 @Component({
   selector: 'app-metergroup-label-start',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ExtraMeterGroupComponent],
   template: `
     <div class="bg-surface-ground">
-      <extra-metergroup [value]="value" labelPosition="start"></extra-metergroup>
+      <extra-metergroup ariaLabel="Использование диска" [value]="value" labelPosition="start"></extra-metergroup>
     </div>
   `
 })
 export class MeterGroupLabelStartComponent {
-  value: MeterItem[] = defaultValue;
+  value: ExtraMeterItem[] = defaultValue;
 }
 
 export const LabelStart: StoryObj = {
   render: () => ({
-    template: `<app-metergroup-label-start></app-metergroup-label-start>`,
+    template: `<app-metergroup-label-start></app-metergroup-label-start>`
   }),
   parameters: {
     docs: {
@@ -30,26 +29,26 @@ export const LabelStart: StoryObj = {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
-import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
-// todo проверить meter item
+import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-kit';
+
 @Component({
   selector: 'app-metergroup-label-start',
   standalone: true,
   imports: [ExtraMeterGroupComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: \`
-    <extra-metergroup [value]="value" labelPosition="start"></extra-metergroup>
+    <extra-metergroup ariaLabel="Использование диска" [value]="value" labelPosition="start"></extra-metergroup>
   \`,
 })
 export class MeterGroupLabelStartComponent {
-  value: MeterItem[] = [
+  value: ExtraMeterItem[] = [
     { label: 'Space used', color: '#34d399', value: 16 },
     { label: 'Unused', color: '#fbbf24', value: 8 },
     { label: 'System', color: '#60a5fa', value: 24 },
   ];
 }
-        `,
-      },
-    },
-  },
+        `
+      }
+    }
+  }
 };
diff --git a/src/stories/components/metergroup/examples/metergroup-label-vertical.component.ts b/src/stories/components/metergroup/examples/metergroup-label-vertical.component.ts
@@ -1,7 +1,6 @@
-import { Component, ChangeDetectionStrategy} from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
-import { ExtraMeterGroupComponent } from '../../../../lib/components/metergroup/metergroup.component';
-import { MeterItem } from 'primeng/metergroup';
+import { ExtraMeterGroupComponent, ExtraMeterItem } from '../../../../lib/components/metergroup/metergroup.component';
 import { defaultValue } from '../metergroup.data';
 
 @Component({
@@ -11,17 +10,17 @@ import { defaultValue } from '../metergroup.data';
   imports: [ExtraMeterGroupComponent],
   template: `
     <div class="bg-surface-ground">
-      <extra-metergroup [value]="value" labelOrientation="vertical"></extra-metergroup>
+      <extra-metergroup ariaLabel="Использование диска" [value]="value" labelOrientation="vertical"></extra-metergroup>
     </div>
-  `,
+  `
 })
 export class MeterGroupLabelVerticalComponent {
-  value: MeterItem[] = defaultValue;
+  value: ExtraMeterItem[] = defaultValue;
 }
 
 export const LabelVertical: StoryObj = {
   render: () => ({
-    template: `<app-metergroup-label-vertical></app-metergroup-label-vertical>`,
+    template: `<app-metergroup-label-vertical></app-metergroup-label-vertical>`
   }),
   parameters: {
     docs: {
@@ -30,26 +29,26 @@ export const LabelVertical: StoryObj = {
         language: 'ts',
         code: `
 import { Component } from '@angular/core';
-import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-kit';
 
 @Component({
   selector: 'app-metergroup-label-vertical',
   standalone: true,
   imports: [ExtraMeterGroupComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: \`
-    <extra-metergroup [value]="value" labelOrientation="vertical"></extra-metergroup>
+    <extra-metergroup ariaLabel="Использование диска" [value]="value" labelOrientation="vertical"></extra-metergroup>
   \`,
 })
 export class MeterGroupLabelVerticalComponent {
-  value: MeterItem[] = [
+  value: ExtraMeterItem[] = [
     { label: 'Space used', color: '#34d399', value: 16 },
     { label: 'Unused', color: '#fbbf24', value: 8 },
     { label: 'System', color: '#60a5fa', value: 24 },
   ];
 }
-        `,
-      },
-    },
-  },
+        `
+      }
+    }
+  }
 };