From 5bcc01e622c6c5a80e91399d2e561d91b1826a7b Mon Sep 17 00:00:00 2001
From: "ak.dmitriev" <ak.dmitriev@cdek.ru>
Date: Mon, 12 Oct 2026 10:36:44 +0700
Subject: [PATCH 1/2] API.metergroup

---
 docs/components-api/metergroup.md             |  2 ++
 .../metergroup/metergroup.component.ts        | 14 +++++++++-----
 .../components/metergroup/metergroup.figma.md |  6 +++++-
 .../examples/metergroup-basic.component.ts    | 19 -------------------
 .../metergroup-horizontal.component.ts        |  9 ++++-----
 .../examples/metergroup-icon.component.ts     |  9 ++++-----
 .../metergroup-label-start.component.ts       | 13 ++++++-------
 .../metergroup-label-vertical.component.ts    |  9 ++++-----
 .../examples/metergroup-vertical.component.ts |  9 ++++-----
 .../components/metergroup/metergroup.data.ts  |  6 +++---
 .../metergroup/metergroup.stories.ts          | 12 ++++++------
 11 files changed, 47 insertions(+), 61 deletions(-)
 delete mode 100644 src/stories/components/metergroup/examples/metergroup-basic.component.ts

diff --git a/docs/components-api/metergroup.md b/docs/components-api/metergroup.md
index af6384cb..9359a59c 100644
--- 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
index b68c71cd..ed451009 100644
--- a/src/lib/components/metergroup/metergroup.component.ts
+++ b/src/lib/components/metergroup/metergroup.component.ts
@@ -1,17 +1,22 @@
 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"
@@ -19,7 +24,6 @@ export type ExtraMeterItem = MeterItem;
       [labelPosition]="labelPosition"
       [labelOrientation]="labelOrientation"
     ></p-metergroup>
-    <p-multiselect></p-multiselect>
   `
 })
 export class ExtraMeterGroupComponent {
diff --git a/src/lib/components/metergroup/metergroup.figma.md b/src/lib/components/metergroup/metergroup.figma.md
index a0ee4c4d..41251aa5 100644
--- 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/stories/components/metergroup/examples/metergroup-basic.component.ts b/src/stories/components/metergroup/examples/metergroup-basic.component.ts
deleted file mode 100644
index 698f7639..00000000
--- a/src/stories/components/metergroup/examples/metergroup-basic.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ExtraMeterGroupComponent } from '../../../../lib/components/metergroup/metergroup.component';
-import { MeterItem } from 'primeng/metergroup';
-import { defaultValue } from '../metergroup.data';
-
-@Component({
-  selector: 'app-metergroup-basic',
-  standalone: true,
-  imports: [ExtraMeterGroupComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="bg-surface-ground">
-      <extra-metergroup [value]="value"></extra-metergroup>
-    </div>
-  `
-})
-export class MeterGroupBasicComponent {
-  value: MeterItem[] = defaultValue;
-}
diff --git a/src/stories/components/metergroup/examples/metergroup-horizontal.component.ts b/src/stories/components/metergroup/examples/metergroup-horizontal.component.ts
index 014be3c3..f8b4f6b1 100644
--- 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({
@@ -16,7 +15,7 @@ import { defaultValue } from '../metergroup.data';
   `
 })
 export class MeterGroupHorizontalComponent {
-  value: MeterItem[] = defaultValue;
+  value: ExtraMeterItem[] = defaultValue;
 }
 
 export const Horizontal: StoryObj = {
@@ -30,7 +29,7 @@ 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',
@@ -42,7 +41,7 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
   \`,
 })
 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
index 1f7e1779..0f764e2c 100644
--- 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({
@@ -16,7 +15,7 @@ import { iconValue } from '../metergroup.data';
   `
 })
 export class MeterGroupIconComponent {
-  value: MeterItem[] = iconValue;
+  value: ExtraMeterItem[] = iconValue;
 }
 
 export const Icon: StoryObj = {
@@ -30,7 +29,7 @@ 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',
@@ -42,7 +41,7 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
   \`,
 })
 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
index 7997b9d6..b1150b69 100644
--- a/src/stories/components/metergroup/examples/metergroup-label-start.component.ts
+++ b/src/stories/components/metergroup/examples/metergroup-label-start.component.ts
@@ -1,9 +1,8 @@
 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,
@@ -16,7 +15,7 @@ import { defaultValue } from '../metergroup.data';
   `
 })
 export class MeterGroupLabelStartComponent {
-  value: MeterItem[] = defaultValue;
+  value: ExtraMeterItem[] = defaultValue;
 }
 
 export const LabelStart: StoryObj = {
@@ -30,8 +29,8 @@ 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,
@@ -42,7 +41,7 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
   \`,
 })
 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
index 0886639b..699e5d63 100644
--- 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 { 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({
@@ -16,7 +15,7 @@ import { defaultValue } from '../metergroup.data';
   `,
 })
 export class MeterGroupLabelVerticalComponent {
-  value: MeterItem[] = defaultValue;
+  value: ExtraMeterItem[] = defaultValue;
 }
 
 export const LabelVertical: StoryObj = {
@@ -30,7 +29,7 @@ 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',
@@ -42,7 +41,7 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
   \`,
 })
 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 },
diff --git a/src/stories/components/metergroup/examples/metergroup-vertical.component.ts b/src/stories/components/metergroup/examples/metergroup-vertical.component.ts
index 5ba664d6..e3aefc91 100644
--- a/src/stories/components/metergroup/examples/metergroup-vertical.component.ts
+++ b/src/stories/components/metergroup/examples/metergroup-vertical.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({
@@ -18,7 +17,7 @@ import { defaultValue } from '../metergroup.data';
   `
 })
 export class MeterGroupVerticalComponent {
-  value: MeterItem[] = defaultValue;
+  value: ExtraMeterItem[] = defaultValue;
 }
 
 export const Vertical: StoryObj = {
@@ -32,7 +31,7 @@ export const Vertical: 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-vertical',
@@ -46,7 +45,7 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
   \`,
 })
 export class MeterGroupVerticalComponent {
-  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/metergroup.data.ts b/src/stories/components/metergroup/metergroup.data.ts
index 3c13fd5b..856b219a 100644
--- a/src/stories/components/metergroup/metergroup.data.ts
+++ b/src/stories/components/metergroup/metergroup.data.ts
@@ -1,12 +1,12 @@
-import { MeterItem } from 'primeng/metergroup';
+import { ExtraMeterItem } from '../../../lib/components/metergroup/metergroup.component';
 
-export const defaultValue: MeterItem[] = [
+export const defaultValue: ExtraMeterItem[] = [
   { label: 'Space used', color: '#34d399', value: 16 },
   { label: 'Unused', color: '#fbbf24', value: 8 },
   { label: 'System', color: '#60a5fa', value: 24 },
 ];
 
-export const iconValue: MeterItem[] = [
+export const iconValue: 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/metergroup.stories.ts b/src/stories/components/metergroup/metergroup.stories.ts
index f4eb03d2..bad5c894 100644
--- a/src/stories/components/metergroup/metergroup.stories.ts
+++ b/src/stories/components/metergroup/metergroup.stories.ts
@@ -31,7 +31,7 @@ const meta: Meta<MeterGroupArgs> = {
         component: `Визуализирует несколько числовых значений в виде единой полосы прогресса с подписями.
 
 \`\`\`typescript
-import { ExtraMeterGroupComponent as MeterGroupComponent } from '@cdek-it/angular-ui-kit';
+import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
 \`\`\``,
       },
     },
@@ -44,8 +44,8 @@ import { ExtraMeterGroupComponent as MeterGroupComponent } from '@cdek-it/angula
       control: false,
       description: 'Массив элементов с полями label, color, value и опционально icon',
       table: {
-        category: 'Props',
-        type: { summary: 'MeterItem[]' },
+        category: 'Свойства',
+        type: { summary: 'ExtraMeterItem[]' },
       },
     },
     orientation: {
@@ -53,7 +53,7 @@ import { ExtraMeterGroupComponent as MeterGroupComponent } from '@cdek-it/angula
       options: ['horizontal', 'vertical'],
       description: 'Ориентация полосы',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'horizontal' },
         type: { summary: "'horizontal' | 'vertical'" },
       },
@@ -63,7 +63,7 @@ import { ExtraMeterGroupComponent as MeterGroupComponent } from '@cdek-it/angula
       options: ['start', 'end'],
       description: 'Позиция списка меток относительно полосы',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'end' },
         type: { summary: "'start' | 'end'" },
       },
@@ -73,7 +73,7 @@ import { ExtraMeterGroupComponent as MeterGroupComponent } from '@cdek-it/angula
       options: ['horizontal', 'vertical'],
       description: 'Ориентация списка меток',
       table: {
-        category: 'Props',
+        category: 'Свойства',
         defaultValue: { summary: 'horizontal' },
         type: { summary: "'horizontal' | 'vertical'" },
       },

From a1570284b777fa61016e2055b5078cb11b621d7a Mon Sep 17 00:00:00 2001
From: ichiesov <i.chiesov@gmail.com>
Date: Tue, 20 Oct 2026 17:43:21 +0700
Subject: [PATCH 2/2] =?UTF-8?q?metergroup:=20=D0=B4=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=83=D0=BF=D0=BD=D0=BE=D0=B5=20=D0=B8=D0=BC=D1=8F=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20role=3D"meter"=20+=20=D1=84=D0=BE=D1=80=D0=BC?=
 =?UTF-8?q?=D0=B0=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ariaLabel/ariaLabelledBy пробрасываются на p-metergroup:
  у корня role="meter" и aria-valuenow, но имени не было — axe давал
  Serious aria-meter-name
- ariaLabel выведен в Controls и задан во всех сторисах
- путь импорта в шапке Docs → @cdek-it/angular-ui-kit/components/metergroup
- prettier по файлам компонента и сторисов

Контраст подписей легенды (3.55:1) не трогал — это цветовой токен.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../metergroup/metergroup.component.ts        |  5 ++
 src/lib/components/metergroup/public_api.ts   |  3 -
 .../metergroup-horizontal.component.ts        | 14 ++---
 .../examples/metergroup-icon.component.ts     | 14 ++---
 .../metergroup-label-start.component.ts       | 16 +++---
 .../metergroup-label-vertical.component.ts    | 18 +++---
 .../examples/metergroup-vertical.component.ts | 14 ++---
 .../components/metergroup/metergroup.data.ts  |  4 +-
 .../metergroup/metergroup.stories.ts          | 55 ++++++++++---------
 9 files changed, 74 insertions(+), 69 deletions(-)

diff --git a/src/lib/components/metergroup/metergroup.component.ts b/src/lib/components/metergroup/metergroup.component.ts
index ed451009..23382635 100644
--- a/src/lib/components/metergroup/metergroup.component.ts
+++ b/src/lib/components/metergroup/metergroup.component.ts
@@ -23,6 +23,8 @@ export interface ExtraMeterItem {
       [orientation]="orientation"
       [labelPosition]="labelPosition"
       [labelOrientation]="labelOrientation"
+      [attr.aria-label]="ariaLabel || null"
+      [attr.aria-labelledby]="ariaLabelledBy || null"
     ></p-metergroup>
   `
 })
@@ -31,6 +33,9 @@ export class ExtraMeterGroupComponent {
   @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/public_api.ts b/src/lib/components/metergroup/public_api.ts
index 810d4058..ed5d5b5b 100644
--- 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-horizontal.component.ts b/src/stories/components/metergroup/examples/metergroup-horizontal.component.ts
index f8b4f6b1..09878056 100644
--- a/src/stories/components/metergroup/examples/metergroup-horizontal.component.ts
+++ b/src/stories/components/metergroup/examples/metergroup-horizontal.component.ts
@@ -10,7 +10,7 @@ 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>
   `
 })
@@ -20,7 +20,7 @@ export class MeterGroupHorizontalComponent {
 
 export const Horizontal: StoryObj = {
   render: () => ({
-    template: `<app-metergroup-horizontal></app-metergroup-horizontal>`,
+    template: `<app-metergroup-horizontal></app-metergroup-horizontal>`
   }),
   parameters: {
     docs: {
@@ -37,7 +37,7 @@ import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-ki
   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 {
@@ -47,8 +47,8 @@ export class MeterGroupHorizontalComponent {
     { 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
index 0f764e2c..fcc4f9bb 100644
--- a/src/stories/components/metergroup/examples/metergroup-icon.component.ts
+++ b/src/stories/components/metergroup/examples/metergroup-icon.component.ts
@@ -10,7 +10,7 @@ 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>
   `
 })
@@ -20,7 +20,7 @@ export class MeterGroupIconComponent {
 
 export const Icon: StoryObj = {
   render: () => ({
-    template: `<app-metergroup-icon></app-metergroup-icon>`,
+    template: `<app-metergroup-icon></app-metergroup-icon>`
   }),
   parameters: {
     docs: {
@@ -37,7 +37,7 @@ import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-ki
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ExtraMeterGroupComponent],
   template: \`
-    <extra-metergroup [value]="value"></extra-metergroup>
+    <extra-metergroup ariaLabel="Использование диска" [value]="value"></extra-metergroup>
   \`,
 })
 export class MeterGroupIconComponent {
@@ -47,8 +47,8 @@ export class MeterGroupIconComponent {
     { 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
index b1150b69..6702aec4 100644
--- a/src/stories/components/metergroup/examples/metergroup-label-start.component.ts
+++ b/src/stories/components/metergroup/examples/metergroup-label-start.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy} from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
 import { ExtraMeterGroupComponent, ExtraMeterItem } from '../../../../lib/components/metergroup/metergroup.component';
 import { defaultValue } from '../metergroup.data';
@@ -10,7 +10,7 @@ import { defaultValue } from '../metergroup.data';
   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>
   `
 })
@@ -20,7 +20,7 @@ export class MeterGroupLabelStartComponent {
 
 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: {
@@ -37,7 +37,7 @@ import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-ki
   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 {
@@ -47,8 +47,8 @@ export class MeterGroupLabelStartComponent {
     { 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
index 699e5d63..92b71cec 100644
--- a/src/stories/components/metergroup/examples/metergroup-label-vertical.component.ts
+++ b/src/stories/components/metergroup/examples/metergroup-label-vertical.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy} from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { StoryObj } from '@storybook/angular';
 import { ExtraMeterGroupComponent, ExtraMeterItem } from '../../../../lib/components/metergroup/metergroup.component';
 import { defaultValue } from '../metergroup.data';
@@ -10,9 +10,9 @@ 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: ExtraMeterItem[] = defaultValue;
@@ -20,7 +20,7 @@ export class MeterGroupLabelVerticalComponent {
 
 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: {
@@ -37,7 +37,7 @@ import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-ki
   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 {
@@ -47,8 +47,8 @@ export class MeterGroupLabelVerticalComponent {
     { label: 'System', color: '#60a5fa', value: 24 },
   ];
 }
-        `,
-      },
-    },
-  },
+        `
+      }
+    }
+  }
 };
diff --git a/src/stories/components/metergroup/examples/metergroup-vertical.component.ts b/src/stories/components/metergroup/examples/metergroup-vertical.component.ts
index e3aefc91..884e295c 100644
--- a/src/stories/components/metergroup/examples/metergroup-vertical.component.ts
+++ b/src/stories/components/metergroup/examples/metergroup-vertical.component.ts
@@ -11,7 +11,7 @@ import { defaultValue } from '../metergroup.data';
   template: `
     <div class="bg-surface-ground">
       <div style="height: 300px; display: flex">
-        <extra-metergroup [value]="value" orientation="vertical"></extra-metergroup>
+        <extra-metergroup ariaLabel="Использование диска" [value]="value" orientation="vertical"></extra-metergroup>
       </div>
     </div>
   `
@@ -22,7 +22,7 @@ export class MeterGroupVerticalComponent {
 
 export const Vertical: StoryObj = {
   render: () => ({
-    template: `<app-metergroup-vertical></app-metergroup-vertical>`,
+    template: `<app-metergroup-vertical></app-metergroup-vertical>`
   }),
   parameters: {
     docs: {
@@ -40,7 +40,7 @@ import { ExtraMeterGroupComponent, ExtraMeterItem } from '@cdek-it/angular-ui-ki
   imports: [ExtraMeterGroupComponent],
   template: \`
     <div style="height: 300px; display: flex">
-      <extra-metergroup [value]="value" orientation="vertical"></extra-metergroup>
+      <extra-metergroup ariaLabel="Использование диска" [value]="value" orientation="vertical"></extra-metergroup>
     </div>
   \`,
 })
@@ -51,8 +51,8 @@ export class MeterGroupVerticalComponent {
     { label: 'System', color: '#60a5fa', value: 24 },
   ];
 }
-        `,
-      },
-    },
-  },
+        `
+      }
+    }
+  }
 };
diff --git a/src/stories/components/metergroup/metergroup.data.ts b/src/stories/components/metergroup/metergroup.data.ts
index 856b219a..f59a7aae 100644
--- a/src/stories/components/metergroup/metergroup.data.ts
+++ b/src/stories/components/metergroup/metergroup.data.ts
@@ -3,11 +3,11 @@ import { ExtraMeterItem } from '../../../lib/components/metergroup/metergroup.co
 export const defaultValue: ExtraMeterItem[] = [
   { label: 'Space used', color: '#34d399', value: 16 },
   { label: 'Unused', color: '#fbbf24', value: 8 },
-  { label: 'System', color: '#60a5fa', value: 24 },
+  { label: 'System', color: '#60a5fa', value: 24 }
 ];
 
 export const iconValue: 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' },
+  { label: 'System', color: '#60a5fa', value: 24, icon: 'ti ti-cpu' }
 ];
diff --git a/src/stories/components/metergroup/metergroup.stories.ts b/src/stories/components/metergroup/metergroup.stories.ts
index bad5c894..afc6e110 100644
--- a/src/stories/components/metergroup/metergroup.stories.ts
+++ b/src/stories/components/metergroup/metergroup.stories.ts
@@ -21,9 +21,9 @@ const meta: Meta<MeterGroupArgs> = {
         MeterGroupVerticalComponent,
         MeterGroupIconComponent,
         MeterGroupLabelStartComponent,
-        MeterGroupLabelVerticalComponent,
-      ],
-    }),
+        MeterGroupLabelVerticalComponent
+      ]
+    })
   ],
   parameters: {
     docs: {
@@ -31,13 +31,13 @@ const meta: Meta<MeterGroupArgs> = {
         component: `Визуализирует несколько числовых значений в виде единой полосы прогресса с подписями.
 
 \`\`\`typescript
-import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
-\`\`\``,
-      },
+import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit/components/metergroup';
+\`\`\``
+      }
     },
     designTokens: {
-      prefix: '--p-metergroup',
-    },
+      prefix: '--p-metergroup'
+    }
   },
   argTypes: {
     value: {
@@ -45,8 +45,8 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
       description: 'Массив элементов с полями label, color, value и опционально icon',
       table: {
         category: 'Свойства',
-        type: { summary: 'ExtraMeterItem[]' },
-      },
+        type: { summary: 'ExtraMeterItem[]' }
+      }
     },
     orientation: {
       control: 'select',
@@ -55,8 +55,8 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
       table: {
         category: 'Свойства',
         defaultValue: { summary: 'horizontal' },
-        type: { summary: "'horizontal' | 'vertical'" },
-      },
+        type: { summary: "'horizontal' | 'vertical'" }
+      }
     },
     labelPosition: {
       control: 'select',
@@ -65,8 +65,8 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
       table: {
         category: 'Свойства',
         defaultValue: { summary: 'end' },
-        type: { summary: "'start' | 'end'" },
-      },
+        type: { summary: "'start' | 'end'" }
+      }
     },
     labelOrientation: {
       control: 'select',
@@ -75,10 +75,10 @@ import { ExtraMeterGroupComponent } from '@cdek-it/angular-ui-kit';
       table: {
         category: 'Свойства',
         defaultValue: { summary: 'horizontal' },
-        type: { summary: "'horizontal' | 'vertical'" },
-      },
-    },
-  },
+        type: { summary: "'horizontal' | 'vertical'" }
+      }
+    }
+  }
 };
 
 const commonTemplate = `<extra-metergroup
@@ -86,6 +86,7 @@ const commonTemplate = `<extra-metergroup
   [orientation]="orientation"
   [labelPosition]="labelPosition"
   [labelOrientation]="labelOrientation"
+  [ariaLabel]="ariaLabel"
 ></extra-metergroup>`;
 
 export default meta;
@@ -97,22 +98,24 @@ export const Default: Story = {
   name: 'Default',
   render: (args) => ({
     props: { ...args, value: defaultValue },
-    template: args.orientation === 'vertical'
-      ? `<div style="height: 300px; display: flex">${commonTemplate}</div>`
-      : commonTemplate,
+    template:
+      args.orientation === 'vertical'
+        ? `<div style="height: 300px; display: flex">${commonTemplate}</div>`
+        : commonTemplate
   }),
   args: {
+    ariaLabel: 'Использование диска',
     orientation: 'horizontal',
     labelPosition: 'end',
-    labelOrientation: 'horizontal',
+    labelOrientation: 'horizontal'
   },
   parameters: {
     docs: {
       description: {
-        story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.',
-      },
-    },
-  },
+        story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.'
+      }
+    }
+  }
 };
 
 // ── Re-exports from example components ────────────────────────────────────