From ca863018dc6c6f472444cf7651d5001eec3ad020 Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Thu, 9 Apr 2026 11:31:19 +0700
Subject: [PATCH 1/7] =?UTF-8?q?dialog:=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B7=D0=B0=D1=86=D0=B8=D1=8F,=20=D1=81=D1=82=D0=BE=D1=80?=
 =?UTF-8?q?=D0=B8=D1=81=D1=8B,=20=D0=BE=D0=B1=D1=91=D1=80=D1=82=D0=BA?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/dialog/dialog.component.ts |  53 +++++
 src/prime-preset/map-tokens.ts                |   5 +
 src/prime-preset/tokens/components/dialog.ts  |  53 +++++
 .../components/dialog/dialog.stories.ts       | 210 ++++++++++++++++++
 .../examples/dialog-default.component.ts      |  31 +++
 .../examples/dialog-extra-large.component.ts  |  32 +++
 .../dialog/examples/dialog-large.component.ts |  32 +++
 .../examples/dialog-no-header.component.ts    |  33 +++
 .../examples/dialog-no-modal.component.ts     |  32 +++
 .../dialog/examples/dialog-small.component.ts |  32 +++
 10 files changed, 513 insertions(+)
 create mode 100644 src/lib/components/dialog/dialog.component.ts
 create mode 100644 src/prime-preset/tokens/components/dialog.ts
 create mode 100644 src/stories/components/dialog/dialog.stories.ts
 create mode 100644 src/stories/components/dialog/examples/dialog-default.component.ts
 create mode 100644 src/stories/components/dialog/examples/dialog-extra-large.component.ts
 create mode 100644 src/stories/components/dialog/examples/dialog-large.component.ts
 create mode 100644 src/stories/components/dialog/examples/dialog-no-header.component.ts
 create mode 100644 src/stories/components/dialog/examples/dialog-no-modal.component.ts
 create mode 100644 src/stories/components/dialog/examples/dialog-small.component.ts

diff --git a/src/lib/components/dialog/dialog.component.ts b/src/lib/components/dialog/dialog.component.ts
new file mode 100644
index 0000000..09429fb
--- /dev/null
+++ b/src/lib/components/dialog/dialog.component.ts
@@ -0,0 +1,53 @@
+import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Dialog } from 'primeng/dialog';
+
+export type DialogSize = 'sm' | 'default' | 'lg' | 'xlg';
+
+@Component({
+  selector: 'dialog',
+  host: { style: 'display: contents' },
+  standalone: true,
+  imports: [Dialog, NgTemplateOutlet],
+  template: `
+    <p-dialog
+      [header]="header"
+      [visible]="visible"
+      (visibleChange)="visibleChange.emit($event)"
+      [modal]="modal"
+      [dismissableMask]="dismissableMask"
+      [closeOnEscape]="closeOnEscape"
+      [showHeader]="showHeader"
+      [focusOnShow]="focusOnShow"
+      [styleClass]="sizeClass"
+      appendTo="body"
+    >
+      <ng-content></ng-content>
+      <ng-template pTemplate="footer">
+        @if (footerTemplate) {
+          <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
+        }
+      </ng-template>
+    </p-dialog>
+  `,
+})
+export class DialogComponent {
+  @Input() header = '';
+  @Input() visible = false;
+  @Input() modal = true;
+  @Input() size: DialogSize = 'default';
+  @Input() dismissableMask = false;
+  @Input() closeOnEscape = true;
+  @Input() showHeader = true;
+  @Input() focusOnShow = false;
+  @Output() visibleChange = new EventEmitter<boolean>();
+
+  @ContentChild('dialogFooter') footerTemplate?: TemplateRef<any>;
+
+  get sizeClass(): string {
+    if (this.size === 'sm') return 'p-dialog-sm';
+    if (this.size === 'lg') return 'p-dialog-lg';
+    if (this.size === 'xlg') return 'p-dialog-xlg';
+    return '';
+  }
+}
diff --git a/src/prime-preset/map-tokens.ts b/src/prime-preset/map-tokens.ts
index 3962758..6f2975f 100644
--- a/src/prime-preset/map-tokens.ts
+++ b/src/prime-preset/map-tokens.ts
@@ -4,6 +4,7 @@ import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
 
 import tokens from './tokens/tokens.json';
 import { buttonCss } from './tokens/components/button';
+import { dialogCss } from './tokens/components/dialog';
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -14,6 +15,10 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
       css: buttonCss,
     },
+    dialog: {
+      ...(tokens.components.dialog as unknown as ComponentsDesignTokens['dialog']),
+      css: dialogCss,
+    },
   } as ComponentsDesignTokens,
 };
 
diff --git a/src/prime-preset/tokens/components/dialog.ts b/src/prime-preset/tokens/components/dialog.ts
new file mode 100644
index 0000000..c157e61
--- /dev/null
+++ b/src/prime-preset/tokens/components/dialog.ts
@@ -0,0 +1,53 @@
+export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => `
+  .p-dialog .p-dialog-title {
+    font-family: ${dt('fonts.fontFamily.heading')};
+    font-size: ${dt('dialog.title.fontSize')};
+    font-weight: ${dt('dialog.title.fontWeight')};
+    line-height: ${dt('fonts.lineHeight.550')};
+  }
+
+  .p-dialog .p-dialog-content {
+    font-family: ${dt('fonts.fontFamily.base')};
+    font-size: ${dt('fonts.fontSize.300')};
+    font-weight: ${dt('fonts.fontWeight.regular')};
+    line-height: ${dt('fonts.lineHeight.500')};
+  }
+
+  .p-dialog .p-dialog-header {
+    border-bottom: ${dt('borderWidth.100')} solid ${dt('dialog.root.borderColor')};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .p-dialog .p-dialog-header-actions {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .p-dialog .p-dialog-header-actions .p-dialog-close-button.p-button-text:focus-visible,
+  .p-dialog .p-dialog-header-actions .p-dialog-close-button.p-button:focus-visible,
+  .p-dialog .p-button-text:focus-visible,
+  .p-dialog .p-button:focus-visible {
+    outline: 0 none;
+    outline-color: transparent;
+    box-shadow: none;
+  }
+
+  .p-dialog {
+    width: ${dt('sizing.80x')};
+  }
+
+  .p-dialog.p-component.p-dialog-sm {
+    width: ${dt('overlay.sm.width')};
+  }
+
+  .p-dialog.p-component.p-dialog-lg {
+    width: ${dt('overlay.lg.width')};
+  }
+
+  .p-dialog.p-component.p-dialog-xlg {
+    width: ${dt('overlay.xlg.width')};
+  }
+`;
diff --git a/src/stories/components/dialog/dialog.stories.ts b/src/stories/components/dialog/dialog.stories.ts
new file mode 100644
index 0000000..8861328
--- /dev/null
+++ b/src/stories/components/dialog/dialog.stories.ts
@@ -0,0 +1,210 @@
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { DialogComponent } from '../../../lib/components/dialog/dialog.component';
+import { DialogDefaultComponent } from './examples/dialog-default.component';
+import { DialogSmallComponent } from './examples/dialog-small.component';
+import { DialogLargeComponent } from './examples/dialog-large.component';
+import { DialogExtraLargeComponent } from './examples/dialog-extra-large.component';
+import { DialogNoModalComponent } from './examples/dialog-no-modal.component';
+import { DialogNoHeaderComponent } from './examples/dialog-no-header.component';
+
+const meta: Meta<DialogComponent> = {
+  title: 'Components/Overlay/Dialog',
+  component: DialogComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Dialog (модальное окно) — это контейнер, который отображается поверх основного содержимого страницы.
+
+\`\`\`typescript
+import { DialogComponent } from '@your-lib/dialog';
+\`\`\``,
+      },
+    },
+    designTokens: { prefix: '--p-dialog' },
+  },
+  argTypes: {
+    header: {
+      control: 'text',
+      description: 'Заголовок окна',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: '' },
+        type: { summary: 'string' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg', 'xlg'],
+      description: 'Размер диалога',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'default' },
+        type: { summary: "'sm' | 'default' | 'lg' | 'xlg'" },
+      },
+    },
+    modal: {
+      control: 'boolean',
+      description: 'Должно ли окно быть модальным (блокировать фон)',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
+      },
+    },
+    dismissableMask: {
+      control: 'boolean',
+      description: 'Закрывать ли окно при клике на маску',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+    closeOnEscape: {
+      control: 'boolean',
+      description: 'Закрывать ли окно по нажатию Escape',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
+      },
+    },
+    showHeader: {
+      control: 'boolean',
+      description: 'Отображать ли заголовок',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'true' },
+        type: { summary: 'boolean' },
+      },
+    },
+    focusOnShow: {
+      control: 'boolean',
+      description: 'Фокус на первый элемент при открытии',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
+    visibleChange: {
+      control: false,
+      description: 'Изменение видимости диалога',
+      table: {
+        category: 'Events',
+        type: { summary: 'EventEmitter<boolean>' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DialogComponent>;
+
+// ── Basic ─────────────────────────────────────────────────────────────────────
+
+export const Basic: Story = {
+  name: 'Basic',
+  decorators: [moduleMetadata({ imports: [DialogDefaultComponent] })],
+  render: () => ({ template: `<app-dialog-default></app-dialog-default>` }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Базовый пример диалогового окна с заголовком, текстом и кнопками.',
+      },
+      source: {
+        code: `
+<p-button (onClick)="visible = true" label="Open Dialog"></p-button>
+
+<dialog header="Dialog Header" [visible]="visible" (visibleChange)="visible = $event">
+  <p>Lorem ipsum dolor sit amet...</p>
+  <ng-template #dialogFooter>
+    <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+    <p-button label="Сохранить" (onClick)="visible = false"></p-button>
+  </ng-template>
+</dialog>`,
+      },
+    },
+  },
+};
+
+// ── Small ─────────────────────────────────────────────────────────────────────
+
+export const Small: Story = {
+  name: 'Small',
+  decorators: [moduleMetadata({ imports: [DialogSmallComponent] })],
+  render: () => ({ template: `<app-dialog-small></app-dialog-small>` }),
+  parameters: {
+    docs: {
+      description: { story: 'Уменьшенный размер диалога (SM).' },
+      source: {
+        code: `<dialog header="Small Dialog" size="sm" [visible]="visible" (visibleChange)="visible = $event">...</dialog>`,
+      },
+    },
+  },
+};
+
+// ── Large ─────────────────────────────────────────────────────────────────────
+
+export const Large: Story = {
+  name: 'Large',
+  decorators: [moduleMetadata({ imports: [DialogLargeComponent] })],
+  render: () => ({ template: `<app-dialog-large></app-dialog-large>` }),
+  parameters: {
+    docs: {
+      description: { story: 'Увеличенный размер диалога (LG).' },
+      source: {
+        code: `<dialog header="Large Dialog" size="lg" [visible]="visible" (visibleChange)="visible = $event">...</dialog>`,
+      },
+    },
+  },
+};
+
+// ── Extra Large ───────────────────────────────────────────────────────────────
+
+export const ExtraLarge: Story = {
+  name: 'Extra Large',
+  decorators: [moduleMetadata({ imports: [DialogExtraLargeComponent] })],
+  render: () => ({ template: `<app-dialog-extra-large></app-dialog-extra-large>` }),
+  parameters: {
+    docs: {
+      description: { story: 'Максимальный размер диалога (XLG).' },
+      source: {
+        code: `<dialog header="Extra Large Dialog" size="xlg" [visible]="visible" (visibleChange)="visible = $event">...</dialog>`,
+      },
+    },
+  },
+};
+
+// ── No Modal ──────────────────────────────────────────────────────────────────
+
+export const NoModal: Story = {
+  name: 'No Modal',
+  decorators: [moduleMetadata({ imports: [DialogNoModalComponent] })],
+  render: () => ({ template: `<app-dialog-no-modal></app-dialog-no-modal>` }),
+  parameters: {
+    docs: {
+      description: { story: 'Окно не блокирует фон страницы.' },
+      source: {
+        code: `<dialog header="No Modal Dialog" [modal]="false" [visible]="visible" (visibleChange)="visible = $event">...</dialog>`,
+      },
+    },
+  },
+};
+
+// ── No Header ─────────────────────────────────────────────────────────────────
+
+export const NoHeader: Story = {
+  name: 'No Header',
+  decorators: [moduleMetadata({ imports: [DialogNoHeaderComponent] })],
+  render: () => ({ template: `<app-dialog-no-header></app-dialog-no-header>` }),
+  parameters: {
+    docs: {
+      description: { story: 'Диалог без заголовка и кнопки закрытия.' },
+      source: {
+        code: `<dialog [visible]="visible" (visibleChange)="visible = $event" [showHeader]="false" [dismissableMask]="true">...</dialog>`,
+      },
+    },
+  },
+};
diff --git a/src/stories/components/dialog/examples/dialog-default.component.ts b/src/stories/components/dialog/examples/dialog-default.component.ts
new file mode 100644
index 0000000..d0a1e28
--- /dev/null
+++ b/src/stories/components/dialog/examples/dialog-default.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
+
+@Component({
+  selector: 'app-dialog-default',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: `
+    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
+
+    <dialog
+      header="Dialog Header"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [focusOnShow]="false"
+    >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <ng-template #dialogFooter>
+        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
+      </ng-template>
+    </dialog>
+  `,
+})
+export class DialogDefaultComponent {
+  visible = false;
+}
diff --git a/src/stories/components/dialog/examples/dialog-extra-large.component.ts b/src/stories/components/dialog/examples/dialog-extra-large.component.ts
new file mode 100644
index 0000000..8ea027e
--- /dev/null
+++ b/src/stories/components/dialog/examples/dialog-extra-large.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
+
+@Component({
+  selector: 'app-dialog-extra-large',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: `
+    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
+
+    <dialog
+      header="Extra Large Dialog"
+      size="xlg"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [focusOnShow]="false"
+    >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <ng-template #dialogFooter>
+        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
+      </ng-template>
+    </dialog>
+  `,
+})
+export class DialogExtraLargeComponent {
+  visible = false;
+}
diff --git a/src/stories/components/dialog/examples/dialog-large.component.ts b/src/stories/components/dialog/examples/dialog-large.component.ts
new file mode 100644
index 0000000..dcf7245
--- /dev/null
+++ b/src/stories/components/dialog/examples/dialog-large.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
+
+@Component({
+  selector: 'app-dialog-large',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: `
+    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
+
+    <dialog
+      header="Large Dialog"
+      size="lg"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [focusOnShow]="false"
+    >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <ng-template #dialogFooter>
+        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
+      </ng-template>
+    </dialog>
+  `,
+})
+export class DialogLargeComponent {
+  visible = false;
+}
diff --git a/src/stories/components/dialog/examples/dialog-no-header.component.ts b/src/stories/components/dialog/examples/dialog-no-header.component.ts
new file mode 100644
index 0000000..94121aa
--- /dev/null
+++ b/src/stories/components/dialog/examples/dialog-no-header.component.ts
@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
+
+@Component({
+  selector: 'app-dialog-no-header',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: `
+    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
+
+    <dialog
+      [showHeader]="false"
+      [dismissableMask]="true"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [focusOnShow]="false"
+    >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <ng-template #dialogFooter>
+        <div style="display: flex; justify-content: flex-end; width: 100%">
+          <p-button label="Закрыть" (onClick)="visible = false"></p-button>
+        </div>
+      </ng-template>
+    </dialog>
+  `,
+})
+export class DialogNoHeaderComponent {
+  visible = false;
+}
diff --git a/src/stories/components/dialog/examples/dialog-no-modal.component.ts b/src/stories/components/dialog/examples/dialog-no-modal.component.ts
new file mode 100644
index 0000000..e8d752f
--- /dev/null
+++ b/src/stories/components/dialog/examples/dialog-no-modal.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
+
+@Component({
+  selector: 'app-dialog-no-modal',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: `
+    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
+
+    <dialog
+      header="No Modal Dialog"
+      [modal]="false"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [focusOnShow]="false"
+    >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <ng-template #dialogFooter>
+        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
+      </ng-template>
+    </dialog>
+  `,
+})
+export class DialogNoModalComponent {
+  visible = false;
+}
diff --git a/src/stories/components/dialog/examples/dialog-small.component.ts b/src/stories/components/dialog/examples/dialog-small.component.ts
new file mode 100644
index 0000000..401f873
--- /dev/null
+++ b/src/stories/components/dialog/examples/dialog-small.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
+
+@Component({
+  selector: 'app-dialog-small',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: `
+    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
+
+    <dialog
+      header="Small Dialog"
+      size="sm"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [focusOnShow]="false"
+    >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <ng-template #dialogFooter>
+        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
+      </ng-template>
+    </dialog>
+  `,
+})
+export class DialogSmallComponent {
+  visible = false;
+}

From 8ad1cc23496e243a1f62f7175ba608c1108d632a Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Thu, 9 Apr 2026 13:29:38 +0700
Subject: [PATCH 2/7] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80=D0=B8=D1=81=D0=BE=D0=B2=20=D1=81=D0=BE=D0=B3=D0=BB?=
 =?UTF-8?q?=D0=B0=D1=81=D0=BD=D0=BE=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/dialog/dialog.component.ts |  12 +-
 src/prime-preset/tokens/tokens.json           |   2 +-
 .../components/dialog/dialog.stories.ts       | 199 ++++++++++++++++--
 .../examples/dialog-default.component.ts      |  45 ++--
 .../examples/dialog-extra-large.component.ts  |  45 ++--
 .../dialog/examples/dialog-large.component.ts |  45 ++--
 .../examples/dialog-no-header.component.ts    |  47 +++--
 .../examples/dialog-no-modal.component.ts     |  45 ++--
 .../dialog/examples/dialog-small.component.ts |  45 ++--
 9 files changed, 330 insertions(+), 155 deletions(-)

diff --git a/src/lib/components/dialog/dialog.component.ts b/src/lib/components/dialog/dialog.component.ts
index 09429fb..a3d71a3 100644
--- a/src/lib/components/dialog/dialog.component.ts
+++ b/src/lib/components/dialog/dialog.component.ts
@@ -1,6 +1,7 @@
-import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { Dialog } from 'primeng/dialog';
+import { PrimeTemplate } from 'primeng/api';
 
 export type DialogSize = 'sm' | 'default' | 'lg' | 'xlg';
 
@@ -8,7 +9,7 @@ export type DialogSize = 'sm' | 'default' | 'lg' | 'xlg';
   selector: 'dialog',
   host: { style: 'display: contents' },
   standalone: true,
-  imports: [Dialog, NgTemplateOutlet],
+  imports: [Dialog, NgTemplateOutlet, PrimeTemplate],
   template: `
     <p-dialog
       [header]="header"
@@ -24,9 +25,7 @@ export type DialogSize = 'sm' | 'default' | 'lg' | 'xlg';
     >
       <ng-content></ng-content>
       <ng-template pTemplate="footer">
-        @if (footerTemplate) {
-          <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
-        }
+        <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
       </ng-template>
     </p-dialog>
   `,
@@ -40,10 +39,9 @@ export class DialogComponent {
   @Input() closeOnEscape = true;
   @Input() showHeader = true;
   @Input() focusOnShow = false;
+  @Input() footerTemplate: TemplateRef<any> | null = null;
   @Output() visibleChange = new EventEmitter<boolean>();
 
-  @ContentChild('dialogFooter') footerTemplate?: TemplateRef<any>;
-
   get sizeClass(): string {
     if (this.size === 'sm') return 'p-dialog-sm';
     if (this.size === 'lg') return 'p-dialog-lg';
diff --git a/src/prime-preset/tokens/tokens.json b/src/prime-preset/tokens/tokens.json
index f9ea56a..a982782 100644
--- a/src/prime-preset/tokens/tokens.json
+++ b/src/prime-preset/tokens/tokens.json
@@ -2753,7 +2753,7 @@
         "padding": "{content.padding.400}"
       },
       "footer": {
-        "padding": "0 {overlay.modal.padding.md} {overlay.modal.padding.md} {overlay.modal.padding.md}",
+        "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}",
         "gap": "{content.gap.200}"
       }
     },
diff --git a/src/stories/components/dialog/dialog.stories.ts b/src/stories/components/dialog/dialog.stories.ts
index 8861328..3d84c04 100644
--- a/src/stories/components/dialog/dialog.stories.ts
+++ b/src/stories/components/dialog/dialog.stories.ts
@@ -14,10 +14,10 @@ const meta: Meta<DialogComponent> = {
   parameters: {
     docs: {
       description: {
-        component: `Dialog (модальное окно) — это контейнер, который отображается поверх основного содержимого страницы.
+        component: `Dialog (модальное окно) — контейнер, отображающийся поверх основного содержимого страницы.
 
 \`\`\`typescript
-import { DialogComponent } from '@your-lib/dialog';
+import { DialogComponent } from '@cdek-it/angular-ui-kit';
 \`\`\``,
       },
     },
@@ -107,23 +107,46 @@ type Story = StoryObj<DialogComponent>;
 export const Basic: Story = {
   name: 'Basic',
   decorators: [moduleMetadata({ imports: [DialogDefaultComponent] })],
-  render: () => ({ template: `<app-dialog-default></app-dialog-default>` }),
+  render: () => ({ template: `<app-dialog-basic></app-dialog-basic>` }),
   parameters: {
     docs: {
       description: {
-        story: 'Базовый пример диалогового окна с заголовком, текстом и кнопками.',
+        story: 'Базовый пример диалогового окна с заголовком, контентом и кнопками действий.',
       },
       source: {
+        language: 'ts',
         code: `
-<p-button (onClick)="visible = true" label="Open Dialog"></p-button>
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '@cdek-it/angular-ui-kit';
 
-<dialog header="Dialog Header" [visible]="visible" (visibleChange)="visible = $event">
-  <p>Lorem ipsum dolor sit amet...</p>
-  <ng-template #dialogFooter>
-    <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
-    <p-button label="Сохранить" (onClick)="visible = false"></p-button>
-  </ng-template>
-</dialog>`,
+@Component({
+  selector: 'app-dialog-basic',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: \`
+    <p-button (onClick)="visible = true" label="Создать заявку"></p-button>
+
+    <ng-template #footer>
+      <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+      <p-button label="Подтвердить" (onClick)="visible = false"></p-button>
+    </ng-template>
+
+    <dialog
+      header="Подтверждение заявки"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [footerTemplate]="footer"
+    >
+      <p>Заявка на доставку груза №CDEK-2025-00478312 готова к оформлению.</p>
+    </dialog>
+  \`,
+})
+export class DialogBasicComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
+  visible = false;
+}
+        `,
       },
     },
   },
@@ -139,7 +162,33 @@ export const Small: Story = {
     docs: {
       description: { story: 'Уменьшенный размер диалога (SM).' },
       source: {
-        code: `<dialog header="Small Dialog" size="sm" [visible]="visible" (visibleChange)="visible = $event">...</dialog>`,
+        language: 'ts',
+        code: `
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-dialog-small',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: \`
+    <dialog
+      header="Статус отправления"
+      size="sm"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [footerTemplate]="footer"
+    >
+      <p>Отправление CDEK-2025-00478312 прибыло на сортировочный центр.</p>
+    </dialog>
+  \`,
+})
+export class DialogSmallComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
+  visible = false;
+}
+        `,
       },
     },
   },
@@ -155,7 +204,33 @@ export const Large: Story = {
     docs: {
       description: { story: 'Увеличенный размер диалога (LG).' },
       source: {
-        code: `<dialog header="Large Dialog" size="lg" [visible]="visible" (visibleChange)="visible = $event">...</dialog>`,
+        language: 'ts',
+        code: `
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-dialog-large',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: \`
+    <dialog
+      header="Детали отправления"
+      size="lg"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [footerTemplate]="footer"
+    >
+      <p>Отправление CDEK-2025-00478312 передано курьеру. Адрес: г. Новосибирск, ул. Ленина, 42.</p>
+    </dialog>
+  \`,
+})
+export class DialogLargeComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
+  visible = false;
+}
+        `,
       },
     },
   },
@@ -171,7 +246,33 @@ export const ExtraLarge: Story = {
     docs: {
       description: { story: 'Максимальный размер диалога (XLG).' },
       source: {
-        code: `<dialog header="Extra Large Dialog" size="xlg" [visible]="visible" (visibleChange)="visible = $event">...</dialog>`,
+        language: 'ts',
+        code: `
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-dialog-extra-large',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: \`
+    <dialog
+      header="Отчёт по доставкам за апрель 2025"
+      size="xlg"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [footerTemplate]="footer"
+    >
+      <p>За апрель 2025 обработано 4 872 отправления. Успешно доставлено — 4 641 (95,3%).</p>
+    </dialog>
+  \`,
+})
+export class DialogExtraLargeComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
+  visible = false;
+}
+        `,
       },
     },
   },
@@ -187,23 +288,81 @@ export const NoModal: Story = {
     docs: {
       description: { story: 'Окно не блокирует фон страницы.' },
       source: {
-        code: `<dialog header="No Modal Dialog" [modal]="false" [visible]="visible" (visibleChange)="visible = $event">...</dialog>`,
+        language: 'ts',
+        code: `
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-dialog-no-modal',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: \`
+    <dialog
+      header="Маршрут доставки"
+      [modal]="false"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [footerTemplate]="footer"
+    >
+      <p>Маршрут: Москва → Новосибирск → пункт выдачи.</p>
+    </dialog>
+  \`,
+})
+export class DialogNoModalComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
+  visible = false;
+}
+        `,
       },
     },
   },
 };
 
-// ── No Header ─────────────────────────────────────────────────────────────────
+// ── Show Header ───────────────────────────────────────────────────────────────
 
 export const NoHeader: Story = {
-  name: 'No Header',
+  name: 'Show Header',
   decorators: [moduleMetadata({ imports: [DialogNoHeaderComponent] })],
   render: () => ({ template: `<app-dialog-no-header></app-dialog-no-header>` }),
   parameters: {
     docs: {
-      description: { story: 'Диалог без заголовка и кнопки закрытия.' },
+      description: { story: 'Заголовок можно скрыть с помощью пропса showHeader: false.' },
       source: {
-        code: `<dialog [visible]="visible" (visibleChange)="visible = $event" [showHeader]="false" [dismissableMask]="true">...</dialog>`,
+        language: 'ts',
+        code: `
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogComponent } from '@cdek-it/angular-ui-kit';
+
+@Component({
+  selector: 'app-dialog-no-header',
+  standalone: true,
+  imports: [DialogComponent, Button],
+  template: \`
+    <ng-template #footer>
+      <div class="flex justify-end w-full">
+        <p-button label="Закрыть" (onClick)="visible = false"></p-button>
+      </div>
+    </ng-template>
+
+    <dialog
+      [showHeader]="false"
+      [dismissableMask]="true"
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [footerTemplate]="footer"
+    >
+      <p>Заявка на доставку принята в обработку. Трек-номер будет присвоен в течение 15 минут.</p>
+    </dialog>
+  \`,
+})
+export class DialogNoHeaderComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
+  visible = false;
+}
+        `,
       },
     },
   },
diff --git a/src/stories/components/dialog/examples/dialog-default.component.ts b/src/stories/components/dialog/examples/dialog-default.component.ts
index d0a1e28..b4db18a 100644
--- a/src/stories/components/dialog/examples/dialog-default.component.ts
+++ b/src/stories/components/dialog/examples/dialog-default.component.ts
@@ -1,31 +1,34 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
+const template = `
+<div class="bg-surface-ground">
+  <p-button (onClick)="visible = true" label="Создать заявку"></p-button>
+
+  <ng-template #footer>
+    <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+    <p-button label="Подтвердить" (onClick)="visible = false"></p-button>
+  </ng-template>
+
+  <dialog
+    header="Подтверждение заявки"
+    [visible]="visible"
+    (visibleChange)="visible = $event"
+    [footerTemplate]="footer"
+  >
+    <p>Заявка на доставку груза №CDEK-2025-00478312 готова к оформлению. Вес отправления: 3,5 кг, габариты: 40×30×20 см. Ориентировочный срок доставки — 3 рабочих дня.</p>
+  </dialog>
+</div>
+`;
+
 @Component({
-  selector: 'app-dialog-default',
+  selector: 'app-dialog-basic',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: `
-    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
-
-    <dialog
-      header="Dialog Header"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [focusOnShow]="false"
-    >
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </p>
-      <ng-template #dialogFooter>
-        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
-        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
-      </ng-template>
-    </dialog>
-  `,
+  template,
 })
 export class DialogDefaultComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
   visible = false;
 }
diff --git a/src/stories/components/dialog/examples/dialog-extra-large.component.ts b/src/stories/components/dialog/examples/dialog-extra-large.component.ts
index 8ea027e..0fd70e2 100644
--- a/src/stories/components/dialog/examples/dialog-extra-large.component.ts
+++ b/src/stories/components/dialog/examples/dialog-extra-large.component.ts
@@ -1,32 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
+const template = `
+<div class="bg-surface-ground">
+  <p-button (onClick)="visible = true" label="Открыть отчёт"></p-button>
+
+  <ng-template #footer>
+    <p-button variant="text" label="Закрыть" (onClick)="visible = false"></p-button>
+    <p-button label="Экспортировать" (onClick)="visible = false"></p-button>
+  </ng-template>
+
+  <dialog
+    header="Отчёт по доставкам за апрель 2025"
+    size="xlg"
+    [visible]="visible"
+    (visibleChange)="visible = $event"
+    [footerTemplate]="footer"
+  >
+    <p>За апрель 2025 года обработано 4 872 отправления. Успешно доставлено — 4 641 (95,3%). Возвраты — 112 (2,3%). В пути — 119 (2,4%). Средний срок доставки по России составил 2,7 рабочего дня. Наиболее загруженные направления: Москва — Санкт-Петербург, Москва — Новосибирск, Москва — Екатеринбург.</p>
+  </dialog>
+</div>
+`;
+
 @Component({
   selector: 'app-dialog-extra-large',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: `
-    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
-
-    <dialog
-      header="Extra Large Dialog"
-      size="xlg"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [focusOnShow]="false"
-    >
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </p>
-      <ng-template #dialogFooter>
-        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
-        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
-      </ng-template>
-    </dialog>
-  `,
+  template,
 })
 export class DialogExtraLargeComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
   visible = false;
 }
diff --git a/src/stories/components/dialog/examples/dialog-large.component.ts b/src/stories/components/dialog/examples/dialog-large.component.ts
index dcf7245..c70f9b5 100644
--- a/src/stories/components/dialog/examples/dialog-large.component.ts
+++ b/src/stories/components/dialog/examples/dialog-large.component.ts
@@ -1,32 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
+const template = `
+<div class="bg-surface-ground">
+  <p-button (onClick)="visible = true" label="Детали отправления"></p-button>
+
+  <ng-template #footer>
+    <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+    <p-button label="Сохранить" (onClick)="visible = false"></p-button>
+  </ng-template>
+
+  <dialog
+    header="Детали отправления"
+    size="lg"
+    [visible]="visible"
+    (visibleChange)="visible = $event"
+    [footerTemplate]="footer"
+  >
+    <p>Отправление CDEK-2025-00478312 передано курьеру для доставки до двери получателя. Последнее обновление: 09.04.2025, 14:35. Адрес доставки: г. Новосибирск, ул. Ленина, 42, кв. 8. Получатель: Иванов И.И., +7 913 000-00-00.</p>
+  </dialog>
+</div>
+`;
+
 @Component({
   selector: 'app-dialog-large',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: `
-    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
-
-    <dialog
-      header="Large Dialog"
-      size="lg"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [focusOnShow]="false"
-    >
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </p>
-      <ng-template #dialogFooter>
-        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
-        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
-      </ng-template>
-    </dialog>
-  `,
+  template,
 })
 export class DialogLargeComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
   visible = false;
 }
diff --git a/src/stories/components/dialog/examples/dialog-no-header.component.ts b/src/stories/components/dialog/examples/dialog-no-header.component.ts
index 94121aa..4049eb8 100644
--- a/src/stories/components/dialog/examples/dialog-no-header.component.ts
+++ b/src/stories/components/dialog/examples/dialog-no-header.component.ts
@@ -1,33 +1,36 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
+const template = `
+<div class="bg-surface-ground">
+  <p-button (onClick)="visible = true" label="Открыть диалог"></p-button>
+
+  <ng-template #footer>
+    <div class="flex justify-end w-full">
+      <p-button label="Закрыть" (onClick)="visible = false"></p-button>
+    </div>
+  </ng-template>
+
+  <dialog
+    [showHeader]="false"
+    [dismissableMask]="true"
+    [visible]="visible"
+    (visibleChange)="visible = $event"
+    [footerTemplate]="footer"
+  >
+    <p>Заявка на доставку принята в обработку. Трек-номер будет присвоен в течение 15 минут и отправлен на указанный email.</p>
+  </dialog>
+</div>
+`;
+
 @Component({
   selector: 'app-dialog-no-header',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: `
-    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
-
-    <dialog
-      [showHeader]="false"
-      [dismissableMask]="true"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [focusOnShow]="false"
-    >
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </p>
-      <ng-template #dialogFooter>
-        <div style="display: flex; justify-content: flex-end; width: 100%">
-          <p-button label="Закрыть" (onClick)="visible = false"></p-button>
-        </div>
-      </ng-template>
-    </dialog>
-  `,
+  template,
 })
 export class DialogNoHeaderComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
   visible = false;
 }
diff --git a/src/stories/components/dialog/examples/dialog-no-modal.component.ts b/src/stories/components/dialog/examples/dialog-no-modal.component.ts
index e8d752f..df0fa96 100644
--- a/src/stories/components/dialog/examples/dialog-no-modal.component.ts
+++ b/src/stories/components/dialog/examples/dialog-no-modal.component.ts
@@ -1,32 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
+const template = `
+<div class="bg-surface-ground">
+  <p-button (onClick)="visible = true" label="Показать маршрут"></p-button>
+
+  <ng-template #footer>
+    <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+    <p-button label="Сохранить" (onClick)="visible = false"></p-button>
+  </ng-template>
+
+  <dialog
+    header="Маршрут доставки"
+    [modal]="false"
+    [visible]="visible"
+    (visibleChange)="visible = $event"
+    [footerTemplate]="footer"
+  >
+    <p>Маршрут отправления CDEK-2025-00478312: Москва (склад) → Новосибирск (сортировочный центр) → Новосибирск (пункт выдачи). Это окно не блокирует основной контент страницы.</p>
+  </dialog>
+</div>
+`;
+
 @Component({
   selector: 'app-dialog-no-modal',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: `
-    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
-
-    <dialog
-      header="No Modal Dialog"
-      [modal]="false"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [focusOnShow]="false"
-    >
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </p>
-      <ng-template #dialogFooter>
-        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
-        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
-      </ng-template>
-    </dialog>
-  `,
+  template,
 })
 export class DialogNoModalComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
   visible = false;
 }
diff --git a/src/stories/components/dialog/examples/dialog-small.component.ts b/src/stories/components/dialog/examples/dialog-small.component.ts
index 401f873..b976ca6 100644
--- a/src/stories/components/dialog/examples/dialog-small.component.ts
+++ b/src/stories/components/dialog/examples/dialog-small.component.ts
@@ -1,32 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
+const template = `
+<div class="bg-surface-ground">
+  <p-button (onClick)="visible = true" label="Посмотреть статус"></p-button>
+
+  <ng-template #footer>
+    <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
+    <p-button label="Подтвердить" (onClick)="visible = false"></p-button>
+  </ng-template>
+
+  <dialog
+    header="Статус отправления"
+    size="sm"
+    [visible]="visible"
+    (visibleChange)="visible = $event"
+    [footerTemplate]="footer"
+  >
+    <p>Отправление CDEK-2025-00478312 прибыло на сортировочный центр г. Новосибирск и готово к передаче курьеру.</p>
+  </dialog>
+</div>
+`;
+
 @Component({
   selector: 'app-dialog-small',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: `
-    <p-button (onClick)="visible = true" label="Open Dialog"></p-button>
-
-    <dialog
-      header="Small Dialog"
-      size="sm"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [focusOnShow]="false"
-    >
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      </p>
-      <ng-template #dialogFooter>
-        <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
-        <p-button label="Сохранить" (onClick)="visible = false"></p-button>
-      </ng-template>
-    </dialog>
-  `,
+  template,
 })
 export class DialogSmallComponent {
+  @ViewChild('footer') footer!: TemplateRef<any>;
   visible = false;
 }

From f8d18ecfd3f7336c919206879bc0cbebb094fbed Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 13 Apr 2026 17:34:23 +0700
Subject: [PATCH 3/7] =?UTF-8?q?stories.ts=20=D0=B2=20argTypes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/dialog/dialog.component.ts   | 3 ++-
 src/stories/components/dialog/dialog.stories.ts | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/dialog/dialog.component.ts b/src/lib/components/dialog/dialog.component.ts
index a3d71a3..666ec03 100644
--- a/src/lib/components/dialog/dialog.component.ts
+++ b/src/lib/components/dialog/dialog.component.ts
@@ -21,7 +21,7 @@ export type DialogSize = 'sm' | 'default' | 'lg' | 'xlg';
       [showHeader]="showHeader"
       [focusOnShow]="focusOnShow"
       [styleClass]="sizeClass"
-      appendTo="body"
+      [appendTo]="appendTo"
     >
       <ng-content></ng-content>
       <ng-template pTemplate="footer">
@@ -39,6 +39,7 @@ export class DialogComponent {
   @Input() closeOnEscape = true;
   @Input() showHeader = true;
   @Input() focusOnShow = false;
+  @Input() appendTo: string = 'body';
   @Input() footerTemplate: TemplateRef<any> | null = null;
   @Output() visibleChange = new EventEmitter<boolean>();
 
diff --git a/src/stories/components/dialog/dialog.stories.ts b/src/stories/components/dialog/dialog.stories.ts
index 3d84c04..9c5261e 100644
--- a/src/stories/components/dialog/dialog.stories.ts
+++ b/src/stories/components/dialog/dialog.stories.ts
@@ -88,6 +88,15 @@ import { DialogComponent } from '@cdek-it/angular-ui-kit';
         type: { summary: 'boolean' },
       },
     },
+    appendTo: {
+      control: 'text',
+      description: 'Элемент, к которому прикрепляется диалог (например body или CSS-селектор)',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: "'body'" },
+        type: { summary: 'string' },
+      },
+    },
     visibleChange: {
       control: false,
       description: 'Изменение видимости диалога',

From ecd07ee5ea7855370f608eba03d22c4cb50f1069 Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 13 Apr 2026 17:36:44 +0700
Subject: [PATCH 4/7] =?UTF-8?q?=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=20@Input()=20headerTemplate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/dialog/dialog.component.ts   | 6 ++++++
 src/stories/components/dialog/dialog.stories.ts | 9 +++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/lib/components/dialog/dialog.component.ts b/src/lib/components/dialog/dialog.component.ts
index 666ec03..aa5722a 100644
--- a/src/lib/components/dialog/dialog.component.ts
+++ b/src/lib/components/dialog/dialog.component.ts
@@ -23,6 +23,11 @@ export type DialogSize = 'sm' | 'default' | 'lg' | 'xlg';
       [styleClass]="sizeClass"
       [appendTo]="appendTo"
     >
+      @if (headerTemplate) {
+        <ng-template pTemplate="header">
+          <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
+        </ng-template>
+      }
       <ng-content></ng-content>
       <ng-template pTemplate="footer">
         <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
@@ -40,6 +45,7 @@ export class DialogComponent {
   @Input() showHeader = true;
   @Input() focusOnShow = false;
   @Input() appendTo: string = 'body';
+  @Input() headerTemplate: TemplateRef<any> | null = null;
   @Input() footerTemplate: TemplateRef<any> | null = null;
   @Output() visibleChange = new EventEmitter<boolean>();
 
diff --git a/src/stories/components/dialog/dialog.stories.ts b/src/stories/components/dialog/dialog.stories.ts
index 9c5261e..a9d63b9 100644
--- a/src/stories/components/dialog/dialog.stories.ts
+++ b/src/stories/components/dialog/dialog.stories.ts
@@ -33,6 +33,15 @@ import { DialogComponent } from '@cdek-it/angular-ui-kit';
         type: { summary: 'string' },
       },
     },
+    headerTemplate: {
+      control: false,
+      description: 'Кастомный шаблон заголовка. При наличии заменяет строковый header',
+      table: {
+        category: 'Props',
+        defaultValue: { summary: 'null' },
+        type: { summary: 'TemplateRef<any> | null' },
+      },
+    },
     size: {
       control: 'select',
       options: ['sm', 'default', 'lg', 'xlg'],

From bd0772c35de01d7822dbd596d08502f4ff1b1ef3 Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 13 Apr 2026 17:58:44 +0700
Subject: [PATCH 5/7] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20DynamicDialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dialog/dialog-open.service.ts  | 34 ++++++++++
 .../components/dialog/dialog.stories.ts       | 62 +++++++++++++++++++
 .../examples/dialog-dynamic.component.ts      | 49 +++++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 src/lib/components/dialog/dialog-open.service.ts
 create mode 100644 src/stories/components/dialog/examples/dialog-dynamic.component.ts

diff --git a/src/lib/components/dialog/dialog-open.service.ts b/src/lib/components/dialog/dialog-open.service.ts
new file mode 100644
index 0000000..f82d0c3
--- /dev/null
+++ b/src/lib/components/dialog/dialog-open.service.ts
@@ -0,0 +1,34 @@
+import { Injectable, Type } from '@angular/core';
+import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DialogSize } from './dialog.component';
+
+export type UiDynamicDialogConfig<DataType = any> = Omit<DynamicDialogConfig<DataType>, 'styleClass'> & {
+  size?: DialogSize;
+  styleClass?: string;
+};
+
+export { DynamicDialogRef, DynamicDialogConfig };
+
+@Injectable()
+export class UiDialogService {
+  constructor(private readonly primengDialogService: DialogService) {}
+
+  open<T>(componentType: Type<T>, config: UiDynamicDialogConfig = {}): DynamicDialogRef<T> | null {
+    const { size, styleClass, ...rest } = config;
+    const sizeClass = this.toSizeClass(size);
+    const mergedStyleClass = [sizeClass, styleClass].filter(Boolean).join(' ');
+
+    return this.primengDialogService.open(componentType, {
+      ...rest,
+      ...(mergedStyleClass && { styleClass: mergedStyleClass }),
+      appendTo: rest.appendTo ?? 'body',
+    });
+  }
+
+  private toSizeClass(size?: DialogSize): string {
+    if (size === 'sm') return 'p-dialog-sm';
+    if (size === 'lg') return 'p-dialog-lg';
+    if (size === 'xlg') return 'p-dialog-xlg';
+    return '';
+  }
+}
diff --git a/src/stories/components/dialog/dialog.stories.ts b/src/stories/components/dialog/dialog.stories.ts
index a9d63b9..02e04b9 100644
--- a/src/stories/components/dialog/dialog.stories.ts
+++ b/src/stories/components/dialog/dialog.stories.ts
@@ -6,6 +6,7 @@ import { DialogLargeComponent } from './examples/dialog-large.component';
 import { DialogExtraLargeComponent } from './examples/dialog-extra-large.component';
 import { DialogNoModalComponent } from './examples/dialog-no-modal.component';
 import { DialogNoHeaderComponent } from './examples/dialog-no-header.component';
+import { DialogDynamicComponent } from './examples/dialog-dynamic.component';
 
 const meta: Meta<DialogComponent> = {
   title: 'Components/Overlay/Dialog',
@@ -385,3 +386,64 @@ export class DialogNoHeaderComponent {
     },
   },
 };
+
+// ── Dynamic ───────────────────────────────────────────────────────────────────
+
+export const Dynamic: Story = {
+  name: 'Dynamic',
+  decorators: [moduleMetadata({ imports: [DialogDynamicComponent] })],
+  render: () => ({ template: `<app-dialog-dynamic></app-dialog-dynamic>` }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Программное открытие диалога через `UiDialogService`. Содержимое — любой Angular-компонент, получающий `DynamicDialogRef` для закрытия.',
+      },
+      source: {
+        language: 'ts',
+        code: `
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { UiDialogService } from '@cdek-it/angular-ui-kit';
+
+// Содержимое диалога
+@Component({
+  selector: 'app-dialog-dynamic-content',
+  standalone: true,
+  imports: [Button],
+  template: \`
+    <p>Заявка на доставку груза №CDEK-2025-00478312 готова к оформлению.</p>
+    <div class="flex justify-end gap-2 mt-4">
+      <p-button variant="text" label="Отмена" (onClick)="ref.close()"></p-button>
+      <p-button label="Подтвердить" (onClick)="ref.close(true)"></p-button>
+    </div>
+  \`,
+})
+export class DialogDynamicContentComponent {
+  constructor(readonly ref: DynamicDialogRef) {}
+}
+
+// Компонент-триггер
+@Component({
+  selector: 'app-dialog-dynamic',
+  standalone: true,
+  imports: [Button],
+  providers: [DialogService, UiDialogService],
+  template: \`
+    <p-button (onClick)="open()" label="Создать заявку"></p-button>
+  \`,
+})
+export class DialogDynamicComponent {
+  constructor(private readonly dialogService: UiDialogService) {}
+
+  open(): void {
+    this.dialogService.open(DialogDynamicContentComponent, {
+      header: 'Подтверждение заявки',
+      modal: true,
+    });
+  }
+}`,
+      },
+    },
+  },
+};
diff --git a/src/stories/components/dialog/examples/dialog-dynamic.component.ts b/src/stories/components/dialog/examples/dialog-dynamic.component.ts
new file mode 100644
index 0000000..32cb4bd
--- /dev/null
+++ b/src/stories/components/dialog/examples/dialog-dynamic.component.ts
@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { UiDialogService } from '../../../../lib/components/dialog/dialog-open.service';
+
+// ── Содержимое диалога ────────────────────────────────────────────────────────
+
+@Component({
+  selector: 'app-dialog-dynamic-content',
+  standalone: true,
+  imports: [Button],
+  template: `
+    <p>Заявка на доставку груза №CDEK-2025-00478312 готова к оформлению.</p>
+    <p>Вес отправления: 3,5 кг, габариты: 40×30×20 см. Ориентировочный срок — 3 рабочих дня.</p>
+    <div class="flex justify-end gap-2 mt-4">
+      <p-button variant="text" label="Отмена" (onClick)="ref.close()"></p-button>
+      <p-button label="Подтвердить" (onClick)="ref.close(true)"></p-button>
+    </div>
+  `,
+})
+export class DialogDynamicContentComponent {
+  constructor(readonly ref: DynamicDialogRef) {}
+}
+
+// ── Компонент-триггер ─────────────────────────────────────────────────────────
+
+export const template = `
+<div class="bg-surface-ground">
+  <p-button (onClick)="open()" label="Создать заявку"></p-button>
+</div>
+`;
+
+@Component({
+  selector: 'app-dialog-dynamic',
+  standalone: true,
+  imports: [Button],
+  providers: [DialogService, UiDialogService],
+  template,
+})
+export class DialogDynamicComponent {
+  constructor(private readonly dialogService: UiDialogService) {}
+
+  open(): void {
+    this.dialogService.open(DialogDynamicContentComponent, {
+      header: 'Подтверждение заявки',
+      modal: true,
+    });
+  }
+}

From 25a2cbeff9f393760f1c7a0dc9fcf36943663c5e Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 13 Apr 2026 18:08:24 +0700
Subject: [PATCH 6/7] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20export=20=D0=B2=20const=20template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dialog/dialog.stories.ts       | 96 +++----------------
 .../examples/dialog-default.component.ts      |  2 +-
 .../examples/dialog-extra-large.component.ts  |  2 +-
 .../dialog/examples/dialog-large.component.ts |  2 +-
 .../examples/dialog-no-header.component.ts    |  2 +-
 .../examples/dialog-no-modal.component.ts     |  2 +-
 .../dialog/examples/dialog-small.component.ts |  2 +-
 7 files changed, 18 insertions(+), 90 deletions(-)

diff --git a/src/stories/components/dialog/dialog.stories.ts b/src/stories/components/dialog/dialog.stories.ts
index 02e04b9..208fc2c 100644
--- a/src/stories/components/dialog/dialog.stories.ts
+++ b/src/stories/components/dialog/dialog.stories.ts
@@ -1,11 +1,11 @@
 import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 import { DialogComponent } from '../../../lib/components/dialog/dialog.component';
-import { DialogDefaultComponent } from './examples/dialog-default.component';
-import { DialogSmallComponent } from './examples/dialog-small.component';
-import { DialogLargeComponent } from './examples/dialog-large.component';
-import { DialogExtraLargeComponent } from './examples/dialog-extra-large.component';
-import { DialogNoModalComponent } from './examples/dialog-no-modal.component';
-import { DialogNoHeaderComponent } from './examples/dialog-no-header.component';
+import { DialogDefaultComponent, template as dialogDefaultTemplate } from './examples/dialog-default.component';
+import { DialogSmallComponent, template as dialogSmallTemplate } from './examples/dialog-small.component';
+import { DialogLargeComponent, template as dialogLargeTemplate } from './examples/dialog-large.component';
+import { DialogExtraLargeComponent, template as dialogExtraLargeTemplate } from './examples/dialog-extra-large.component';
+import { DialogNoModalComponent, template as dialogNoModalTemplate } from './examples/dialog-no-modal.component';
+import { DialogNoHeaderComponent, template as dialogNoHeaderTemplate } from './examples/dialog-no-header.component';
 import { DialogDynamicComponent } from './examples/dialog-dynamic.component';
 
 const meta: Meta<DialogComponent> = {
@@ -143,23 +143,7 @@ import { DialogComponent } from '@cdek-it/angular-ui-kit';
   selector: 'app-dialog-basic',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: \`
-    <p-button (onClick)="visible = true" label="Создать заявку"></p-button>
-
-    <ng-template #footer>
-      <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button>
-      <p-button label="Подтвердить" (onClick)="visible = false"></p-button>
-    </ng-template>
-
-    <dialog
-      header="Подтверждение заявки"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [footerTemplate]="footer"
-    >
-      <p>Заявка на доставку груза №CDEK-2025-00478312 готова к оформлению.</p>
-    </dialog>
-  \`,
+  template: \`${dialogDefaultTemplate}\`,
 })
 export class DialogBasicComponent {
   @ViewChild('footer') footer!: TemplateRef<any>;
@@ -191,17 +175,7 @@ import { DialogComponent } from '@cdek-it/angular-ui-kit';
   selector: 'app-dialog-small',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: \`
-    <dialog
-      header="Статус отправления"
-      size="sm"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [footerTemplate]="footer"
-    >
-      <p>Отправление CDEK-2025-00478312 прибыло на сортировочный центр.</p>
-    </dialog>
-  \`,
+  template: \`${dialogSmallTemplate}\`,
 })
 export class DialogSmallComponent {
   @ViewChild('footer') footer!: TemplateRef<any>;
@@ -233,17 +207,7 @@ import { DialogComponent } from '@cdek-it/angular-ui-kit';
   selector: 'app-dialog-large',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: \`
-    <dialog
-      header="Детали отправления"
-      size="lg"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [footerTemplate]="footer"
-    >
-      <p>Отправление CDEK-2025-00478312 передано курьеру. Адрес: г. Новосибирск, ул. Ленина, 42.</p>
-    </dialog>
-  \`,
+  template: \`${dialogLargeTemplate}\`,
 })
 export class DialogLargeComponent {
   @ViewChild('footer') footer!: TemplateRef<any>;
@@ -275,17 +239,7 @@ import { DialogComponent } from '@cdek-it/angular-ui-kit';
   selector: 'app-dialog-extra-large',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: \`
-    <dialog
-      header="Отчёт по доставкам за апрель 2025"
-      size="xlg"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [footerTemplate]="footer"
-    >
-      <p>За апрель 2025 обработано 4 872 отправления. Успешно доставлено — 4 641 (95,3%).</p>
-    </dialog>
-  \`,
+  template: \`${dialogExtraLargeTemplate}\`,
 })
 export class DialogExtraLargeComponent {
   @ViewChild('footer') footer!: TemplateRef<any>;
@@ -317,17 +271,7 @@ import { DialogComponent } from '@cdek-it/angular-ui-kit';
   selector: 'app-dialog-no-modal',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: \`
-    <dialog
-      header="Маршрут доставки"
-      [modal]="false"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [footerTemplate]="footer"
-    >
-      <p>Маршрут: Москва → Новосибирск → пункт выдачи.</p>
-    </dialog>
-  \`,
+  template: \`${dialogNoModalTemplate}\`,
 })
 export class DialogNoModalComponent {
   @ViewChild('footer') footer!: TemplateRef<any>;
@@ -359,23 +303,7 @@ import { DialogComponent } from '@cdek-it/angular-ui-kit';
   selector: 'app-dialog-no-header',
   standalone: true,
   imports: [DialogComponent, Button],
-  template: \`
-    <ng-template #footer>
-      <div class="flex justify-end w-full">
-        <p-button label="Закрыть" (onClick)="visible = false"></p-button>
-      </div>
-    </ng-template>
-
-    <dialog
-      [showHeader]="false"
-      [dismissableMask]="true"
-      [visible]="visible"
-      (visibleChange)="visible = $event"
-      [footerTemplate]="footer"
-    >
-      <p>Заявка на доставку принята в обработку. Трек-номер будет присвоен в течение 15 минут.</p>
-    </dialog>
-  \`,
+  template: \`${dialogNoHeaderTemplate}\`,
 })
 export class DialogNoHeaderComponent {
   @ViewChild('footer') footer!: TemplateRef<any>;
diff --git a/src/stories/components/dialog/examples/dialog-default.component.ts b/src/stories/components/dialog/examples/dialog-default.component.ts
index b4db18a..faa6326 100644
--- a/src/stories/components/dialog/examples/dialog-default.component.ts
+++ b/src/stories/components/dialog/examples/dialog-default.component.ts
@@ -2,7 +2,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
-const template = `
+export const template = `
 <div class="bg-surface-ground">
   <p-button (onClick)="visible = true" label="Создать заявку"></p-button>
 
diff --git a/src/stories/components/dialog/examples/dialog-extra-large.component.ts b/src/stories/components/dialog/examples/dialog-extra-large.component.ts
index 0fd70e2..88c43fa 100644
--- a/src/stories/components/dialog/examples/dialog-extra-large.component.ts
+++ b/src/stories/components/dialog/examples/dialog-extra-large.component.ts
@@ -2,7 +2,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
-const template = `
+export const template = `
 <div class="bg-surface-ground">
   <p-button (onClick)="visible = true" label="Открыть отчёт"></p-button>
 
diff --git a/src/stories/components/dialog/examples/dialog-large.component.ts b/src/stories/components/dialog/examples/dialog-large.component.ts
index c70f9b5..3cd061a 100644
--- a/src/stories/components/dialog/examples/dialog-large.component.ts
+++ b/src/stories/components/dialog/examples/dialog-large.component.ts
@@ -2,7 +2,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
-const template = `
+export const template = `
 <div class="bg-surface-ground">
   <p-button (onClick)="visible = true" label="Детали отправления"></p-button>
 
diff --git a/src/stories/components/dialog/examples/dialog-no-header.component.ts b/src/stories/components/dialog/examples/dialog-no-header.component.ts
index 4049eb8..6cdd7c4 100644
--- a/src/stories/components/dialog/examples/dialog-no-header.component.ts
+++ b/src/stories/components/dialog/examples/dialog-no-header.component.ts
@@ -2,7 +2,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
-const template = `
+export const template = `
 <div class="bg-surface-ground">
   <p-button (onClick)="visible = true" label="Открыть диалог"></p-button>
 
diff --git a/src/stories/components/dialog/examples/dialog-no-modal.component.ts b/src/stories/components/dialog/examples/dialog-no-modal.component.ts
index df0fa96..6c9c523 100644
--- a/src/stories/components/dialog/examples/dialog-no-modal.component.ts
+++ b/src/stories/components/dialog/examples/dialog-no-modal.component.ts
@@ -2,7 +2,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
-const template = `
+export const template = `
 <div class="bg-surface-ground">
   <p-button (onClick)="visible = true" label="Показать маршрут"></p-button>
 
diff --git a/src/stories/components/dialog/examples/dialog-small.component.ts b/src/stories/components/dialog/examples/dialog-small.component.ts
index b976ca6..06fed64 100644
--- a/src/stories/components/dialog/examples/dialog-small.component.ts
+++ b/src/stories/components/dialog/examples/dialog-small.component.ts
@@ -2,7 +2,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { Button } from 'primeng/button';
 import { DialogComponent } from '../../../../lib/components/dialog/dialog.component';
 
-const template = `
+export const template = `
 <div class="bg-surface-ground">
   <p-button (onClick)="visible = true" label="Посмотреть статус"></p-button>
 

From f123f8a72dccc938a2d10f3b27e1901c46fe9da2 Mon Sep 17 00:00:00 2001
From: Danil Khaliulin <danielooneilie@gmail.com>
Date: Mon, 13 Apr 2026 18:12:39 +0700
Subject: [PATCH 7/7] =?UTF-8?q?=D1=80=D0=B5=D0=B7=D0=BE=D0=BB=D0=B2=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BD=D1=84=D0=BB=D0=B8=D0=BA=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/prime-preset/map-tokens.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/prime-preset/map-tokens.ts b/src/prime-preset/map-tokens.ts
index 318c7bd..40f0f06 100644
--- a/src/prime-preset/map-tokens.ts
+++ b/src/prime-preset/map-tokens.ts
@@ -4,11 +4,8 @@ import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
 
 import tokens from './tokens/tokens.json';
 import { buttonCss } from './tokens/components/button';
-<<<<<<< overlay.dialog
 import { dialogCss } from './tokens/components/dialog';
-=======
 import { radiobuttonCss } from './tokens/components/radiobutton';
->>>>>>> feature/styles-debug
 
 const presetTokens: Preset<AuraBaseDesignTokens> = {
   primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'],
@@ -19,15 +16,13 @@ const presetTokens: Preset<AuraBaseDesignTokens> = {
       ...(tokens.components.button as unknown as ComponentsDesignTokens['button']),
       css: buttonCss,
     },
-<<<<<<< overlay.dialog
     dialog: {
       ...(tokens.components.dialog as unknown as ComponentsDesignTokens['dialog']),
       css: dialogCss,
-=======
+    },
     radiobutton: {
       ...(tokens.components.radiobutton as unknown as ComponentsDesignTokens['radiobutton']),
       css: radiobuttonCss,
->>>>>>> feature/styles-debug
     },
   } as ComponentsDesignTokens,
 };