duck-dev-lib 0.0.24 → 0.0.26

package/fesm2022/{duck-dev-lib-en-Ze3k_kca.mjs → duck-dev-lib-en-4OEFIyu1.mjs}

@@ -1,4 +1,5 @@
 var tabs = {
+	accordion: "Accordion",
 	buttons: "Buttons",
 	loaders: "Loaders",
 	tabs: "Tabs",
@@ -309,6 +310,42 @@ var directivesDoc = {
 	col12: "Column with 12px gap",
 	row1rem: "Row with 1rem gap (string)"
 };
+var accordionDoc = {
+	title: "Duck Dev UI Library - Accordion",
+	required: "required",
+	basic: {
+		title: "Accordion",
+		description: "Reusable accordion component with pleasant open/close animations. Colors use the library palette.",
+		usage: "Usage:",
+		inputs: "Input Parameters:",
+		examples: "Examples:"
+	},
+	inputTitle: "title text",
+	inputContent: "template reference with content",
+	inputColor: "title color from palette: Violet | Orange | White | Gray | Dark (default: White)",
+	examples: {
+		"default": "Default",
+		multiple: "Multiple open",
+		violet: "Violet",
+		orange: "Orange",
+		gray: "Gray",
+		dark: "Dark"
+	},
+	sample: {
+		q1: {
+			title: "What is Duck Dev Accordion?",
+			content: "Reusable accordion component with smooth CSS animations and palette-based theming."
+		},
+		q2: {
+			title: "Is multiple open supported?",
+			content: "Yes. Set [multiple]=\"true\" to allow more than one panel to be open."
+		},
+		q3: {
+			title: "Accessibility",
+			content: "Headers are buttons with the aria-expanded attribute. Focus styles are provided."
+		}
+	}
+};
 var en = {
 	tabs: tabs,
 	notifications: notifications,
@@ -318,8 +355,9 @@ var en = {
 	svgComponent: svgComponent,
 	inputComponent: inputComponent,
 	badgeDoc: badgeDoc,
-	directivesDoc: directivesDoc
+	directivesDoc: directivesDoc,
+	accordionDoc: accordionDoc
 };
 
-export { badgeDoc, buttons, en as default, directivesDoc, inputComponent, loaders, notifications, svgComponent, tabs, tabsComponent };
-//# sourceMappingURL=duck-dev-lib-en-Ze3k_kca.mjs.map
+export { accordionDoc, badgeDoc, buttons, en as default, directivesDoc, inputComponent, loaders, notifications, svgComponent, tabs, tabsComponent };
+//# sourceMappingURL=duck-dev-lib-en-4OEFIyu1.mjs.map

package/fesm2022/{duck-dev-lib-en-Ze3k_kca.mjs.map → duck-dev-lib-en-4OEFIyu1.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"duck-dev-lib-en-Ze3k_kca.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"duck-dev-lib-en-4OEFIyu1.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/fesm2022/{duck-dev-lib-ru-9TH2RJJD.mjs → duck-dev-lib-ru-CcBIFkk3.mjs}

@@ -1,4 +1,5 @@
 var tabs = {
+	accordion: "Аккордеон",
 	buttons: "Кнопки",
 	loaders: "Загрузчики",
 	tabs: "Вкладки",
@@ -309,6 +310,42 @@ var directivesDoc = {
 	col12: "Column с отступом 12px",
 	row1rem: "Row с отступом 1rem (string)"
 };
+var accordionDoc = {
+	title: "Duck Dev UI Library - Аккордеон",
+	required: "обязательный",
+	basic: {
+		title: "Аккордеон",
+		description: "Переиспользуемый компонент аккордеона с приятными анимациями открытия/закрытия. Цвета берутся из палитры библиотеки.",
+		usage: "Использование:",
+		inputs: "Входные параметры:",
+		examples: "Примеры:"
+	},
+	inputTitle: "текст заголовка",
+	inputContent: "ссылка на шаблон с содержимым",
+	inputColor: "цвет заголовка из палитры: Violet | Orange | White | Gray | Dark (по умолчанию: White)",
+	examples: {
+		"default": "По умолчанию",
+		multiple: "Несколько открытых",
+		violet: "Violet",
+		orange: "Orange",
+		gray: "Gray",
+		dark: "Тёмный"
+	},
+	sample: {
+		q1: {
+			title: "Что такое Duck Dev Accordion?",
+			content: "Переиспользуемый компонент аккордеона с плавными CSS-анимациями и палитрой цветов."
+		},
+		q2: {
+			title: "Поддерживается ли одновременное открытие нескольких панелей?",
+			content: "Да. Установите [multiple]=\"true\", чтобы можно было открывать более одной панели."
+		},
+		q3: {
+			title: "Доступность",
+			content: "Заголовки — это кнопки с атрибутом aria-expanded. Добавлены стили для фокуса."
+		}
+	}
+};
 var ru = {
 	tabs: tabs,
 	notifications: notifications,
@@ -318,8 +355,9 @@ var ru = {
 	svgComponent: svgComponent,
 	inputComponent: inputComponent,
 	badgeDoc: badgeDoc,
-	directivesDoc: directivesDoc
+	directivesDoc: directivesDoc,
+	accordionDoc: accordionDoc
 };
 
-export { badgeDoc, buttons, ru as default, directivesDoc, inputComponent, loaders, notifications, svgComponent, tabs, tabsComponent };
-//# sourceMappingURL=duck-dev-lib-ru-9TH2RJJD.mjs.map
+export { accordionDoc, badgeDoc, buttons, ru as default, directivesDoc, inputComponent, loaders, notifications, svgComponent, tabs, tabsComponent };
+//# sourceMappingURL=duck-dev-lib-ru-CcBIFkk3.mjs.map

package/fesm2022/{duck-dev-lib-ru-9TH2RJJD.mjs.map → duck-dev-lib-ru-CcBIFkk3.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"duck-dev-lib-ru-9TH2RJJD.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"duck-dev-lib-ru-CcBIFkk3.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/fesm2022/duck-dev-lib.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef } from '@angular/core';
-import { NgStyle, CommonModule } from '@angular/common';
+import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import * as i1$3 from '@angular/common';
+import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i1$2 from '@jsverse/transloco';
 import { TranslocoPipe, TranslocoModule, TranslocoService } from '@jsverse/transloco';
 import * as i1 from '@angular/forms';
@@ -305,22 +306,22 @@ class ButtonCasper {
         };
     }, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonCasper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonCasper, isStandalone: true, selector: "duck-dev-button-casper", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  class=\"button-default is-casper\"\n  [disabled]=\"isDisabled()\"\n  [ngStyle]=\"buttonStyle()\"\n>\n  <span class=\"content\">\n    {{ text() }}\n  </span>\n</button>\n", styles: [":host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--color-accent, #fff)}}.content{position:relative;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonCasper, isStandalone: true, selector: "duck-dev-button-casper", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  class=\"button-default is-casper\"\n  [disabled]=\"isDisabled()\"\n  [ngStyle]=\"buttonStyle()\"\n>\n  <span class=\"content\">\n    {{ text() }}\n  </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonCasper, decorators: [{
             type: Component,
             args: [{ selector: 'duck-dev-button-casper', standalone: true, imports: [
                         NgStyle
-                    ], template: "<button\n  class=\"button-default is-casper\"\n  [disabled]=\"isDisabled()\"\n  [ngStyle]=\"buttonStyle()\"\n>\n  <span class=\"content\">\n    {{ text() }}\n  </span>\n</button>\n", styles: [":host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--color-accent, #fff)}}.content{position:relative;z-index:1}\n"] }]
+                    ], template: "<button\n  class=\"button-default is-casper\"\n  [disabled]=\"isDisabled()\"\n  [ngStyle]=\"buttonStyle()\"\n>\n  <span class=\"content\">\n    {{ text() }}\n  </span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-block}.button-default{position:relative;overflow:hidden;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid currentColor;background:transparent;cursor:pointer;color:var(--dd-base-600);font:inherit}.button-default.is-casper{--ease: cubic-bezier(.21, 1, .34, 1);--color-ease: cubic-bezier(.215, .61, .355, 1);--color-speed: .2s;--speed: .45s;--speed-fast: .3s;--speed-faster: .15s;transition:transform var(--speed-fast) var(--ease),color var(--color-speed) var(--color-ease)}@media(hover:hover)and (pointer:fine){.button-default.is-casper:before{content:\"\";position:absolute;inset:0;background-color:var(--color, currentColor);clip-path:inset(.75rem .75rem .75rem .75rem round .5rem);opacity:0;transition:clip-path var(--speed) var(--ease),opacity var(--color-speed) var(--color-ease);z-index:0}.button-default.is-casper:hover:before,.button-default.is-casper:focus-visible:before{clip-path:inset(0 0 0 0 round .25rem);opacity:1}.button-default.is-casper:hover,.button-default.is-casper:focus-visible{color:var(--dd-base-200)}}.content{position:relative;z-index:1}\n"] }]
         }], propDecorators: { isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
 
 class LoaderLoadingBubble {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderLoadingBubble, isStandalone: true, selector: "duck-dev-loader-loading-bubble", ngImport: i0, template: "<div class=\"container\">\n  <div class=\"main\">\n    <span class=\"loader\">Load&nbsp;ng</span>\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70px;bottom:10px;height:28px;width:5.15px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderLoadingBubble, isStandalone: true, selector: "duck-dev-loader-loading-bubble", ngImport: i0, template: "<div class=\"container\">\n  <div class=\"main\">\n    <span class=\"loader\">Load&nbsp;ng</span>\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderLoadingBubble, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-loader-loading-bubble', imports: [], template: "<div class=\"container\">\n  <div class=\"main\">\n    <span class=\"loader\">Load&nbsp;ng</span>\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70px;bottom:10px;height:28px;width:5.15px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] }]
+            args: [{ selector: 'duck-dev-loader-loading-bubble', imports: [], template: "<div class=\"container\">\n  <div class=\"main\">\n    <span class=\"loader\">Load&nbsp;ng</span>\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.loader{color:var(--btn-text-color);position:relative;display:inline-block;margin-top:40px;font-family:Arial,Helvetica,sans-serif;font-size:48px;letter-spacing:4px;box-sizing:border-box}.loader:before{content:\"\";position:absolute;right:70.55px;bottom:10px;height:28px;width:4.45px;background:currentColor;box-sizing:border-box;animation:animloader1 1s linear infinite alternate}.loader:after{content:\"\";width:10px;height:10px;position:absolute;left:125px;top:2px;border-radius:50%;background:var(--dd-accent-orange);box-sizing:border-box;animation:animloader 1s linear infinite alternate}@keyframes animloader{0%{transform:translate(0) scaleX(1)}14%{transform:translate(-12px,-16px) scaleX(1.05)}28%{transform:translate(-27px,-28px) scaleX(1.07)}42%{transform:translate(-46px,-35px) scaleX(1.1)}57%{transform:translate(-70px,-37px) scaleX(1.1)}71%{transform:translate(-94px,-32px) scaleX(1.07)}85%{transform:translate(-111px,-22px) scaleX(1.05)}to{transform:translate(-125px,-9px) scaleX(1)}}@keyframes animloader1{0%{box-shadow:0 -6px,-122.9px -8px}25%,75%{box-shadow:0 0,-122.9px -8px}to{box-shadow:0 0,-122.9px -16px}}\n"] }]
         }] });
 
 class LoaderClassic {
@@ -2220,11 +2221,11 @@ class DuckDevNotification {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n  <div\n    [class]=\"'notification notification--' + type() + ' notification--pos-' + position() + ' notification--' + state()\"\n    (click)=\"close()\">\n    <div class=\"notification__icon\">\n      <span>@switch (type()){\n        @case('success'){\n          <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n        }\n        @case ('warning'){\n          <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n        }\n        @case ('error'){\n          <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n        }\n      }</span>\n    </div>\n    <div class=\"notification__content\">\n      <h4 class=\"notification__title\">{{ title() }}</h4>\n      <p class=\"notification__message\">{{ message() }}</p>\n    </div>\n    <button\n      class=\"notification__close\"\n      (click)=\"close()\"\n      type=\"button\"\n      aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n      \u00D7\n    </button>\n  </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;align-items:flex-start;gap:12px;cursor:pointer;z-index:2147483647;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.98)}.notification--pos-bottom{bottom:20px}.notification--enter{opacity:1;visibility:visible}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.98)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px;opacity:.9}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevNotification, isStandalone: true, selector: "duck-dev-notification", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible()) {\n  <div\n    [class]=\"'notification notification--' + type() + ' notification--pos-' + position() + ' notification--' + state()\"\n    (click)=\"close()\">\n    <div class=\"notification__inner\">\n    <div class=\"notification__icon\">\n      <span>@switch (type()){\n        @case('success'){\n          <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n        }\n        @case ('warning'){\n          <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n        }\n        @case ('error'){\n          <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n        }\n      }</span>\n    </div>\n    <div class=\"notification__content\">\n      <h4 class=\"notification__title\">{{ title() }}</h4>\n      <p class=\"notification__message\">{{ message() }}</p>\n    </div>\n    <button\n      class=\"notification__close\"\n      (click)=\"close()\"\n      type=\"button\"\n      aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n      \u00D7\n    </button>\n    </div>\n  </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:block;gap:12px;cursor:pointer;z-index:3;transform:translateY(-8px);transition:transform .3s ease}.notification__inner{display:flex;align-items:flex-start;gap:12px;will-change:transform;transform:scale(.96)}@keyframes dd-spring-pop{0%{transform:scale(.86)}40%{transform:scale(1.1)}65%{transform:scale(.98)}to{transform:scale(1)}}.notification--enter .notification__inner{animation:dd-spring-pop .48s cubic-bezier(.2,.8,.2,1.2) both}@keyframes dd-spring-pop-out{0%{transform:scale(1)}25%{transform:scale(1.04)}55%{transform:scale(.9)}80%{transform:scale(.96)}to{transform:scale(.92)}}.notification--leave .notification__inner{animation:dd-spring-pop-out .32s cubic-bezier(.3,.7,.4,1) both}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.8)}.notification--pos-bottom{bottom:20px}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.8)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"], dependencies: [{ kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevNotification, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n  <div\n    [class]=\"'notification notification--' + type() + ' notification--pos-' + position() + ' notification--' + state()\"\n    (click)=\"close()\">\n    <div class=\"notification__icon\">\n      <span>@switch (type()){\n        @case('success'){\n          <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n        }\n        @case ('warning'){\n          <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n        }\n        @case ('error'){\n          <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n        }\n      }</span>\n    </div>\n    <div class=\"notification__content\">\n      <h4 class=\"notification__title\">{{ title() }}</h4>\n      <p class=\"notification__message\">{{ message() }}</p>\n    </div>\n    <button\n      class=\"notification__close\"\n      (click)=\"close()\"\n      type=\"button\"\n      aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n      \u00D7\n    </button>\n  </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;align-items:flex-start;gap:12px;cursor:pointer;z-index:2147483647;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.98)}.notification--pos-bottom{bottom:20px}.notification--enter{opacity:1;visibility:visible}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.98)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px;opacity:.9}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"] }]
+            args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n  <div\n    [class]=\"'notification notification--' + type() + ' notification--pos-' + position() + ' notification--' + state()\"\n    (click)=\"close()\">\n    <div class=\"notification__inner\">\n    <div class=\"notification__icon\">\n      <span>@switch (type()){\n        @case('success'){\n          <duck-dev-icon name=\"duck-dev-check\"></duck-dev-icon>\n        }\n        @case ('warning'){\n          <duck-dev-icon name=\"duck-dev-alert-triangle\"></duck-dev-icon>\n        }\n        @case ('error'){\n          <duck-dev-icon name=\"duck-dev-alert-circle\"></duck-dev-icon>\n        }\n      }</span>\n    </div>\n    <div class=\"notification__content\">\n      <h4 class=\"notification__title\">{{ title() }}</h4>\n      <p class=\"notification__message\">{{ message() }}</p>\n    </div>\n    <button\n      class=\"notification__close\"\n      (click)=\"close()\"\n      type=\"button\"\n      aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\">\n      \u00D7\n    </button>\n    </div>\n  </div>\n}\n", styles: [".notification{position:fixed;right:20px;min-width:320px;max-width:500px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;display:block;gap:12px;cursor:pointer;z-index:3;transform:translateY(-8px);transition:transform .3s ease}.notification__inner{display:flex;align-items:flex-start;gap:12px;will-change:transform;transform:scale(.96)}@keyframes dd-spring-pop{0%{transform:scale(.86)}40%{transform:scale(1.1)}65%{transform:scale(.98)}to{transform:scale(1)}}.notification--enter .notification__inner{animation:dd-spring-pop .48s cubic-bezier(.2,.8,.2,1.2) both}@keyframes dd-spring-pop-out{0%{transform:scale(1)}25%{transform:scale(1.04)}55%{transform:scale(.9)}80%{transform:scale(.96)}to{transform:scale(.92)}}.notification--leave .notification__inner{animation:dd-spring-pop-out .32s cubic-bezier(.3,.7,.4,1) both}.notification--pos-top{top:20px}.notification--pos-center{left:50%;top:50%;right:auto;transform:translate(-50%,-50%) scale(.8)}.notification--pos-bottom{bottom:20px}.notification--enter.notification--pos-top{transform:translateY(0)}.notification--leave.notification--pos-top{transform:translateY(-8px)}.notification--enter.notification--pos-bottom{transform:translateY(0)}.notification--leave.notification--pos-bottom{transform:translateY(8px)}.notification--enter.notification--pos-center{transform:translate(-50%,-50%) scale(1)}.notification--leave.notification--pos-center{transform:translate(-50%,-50%) scale(.8)}.notification--success{background:var(--dd-base-success)}.notification--warning{background:var(--dd-base-accent-yellow);color:var(--dd-base-600)}.notification--error{background:var(--dd-base-accent-orange);color:var(--dd-base-600)}.notification__icon{font-size:24px;font-weight:700;flex-shrink:0}.notification__content{flex:1}.notification__title{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--dd-base-600)}.notification__message{margin:0;font-size:14px}.notification__close{background:none;border:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;flex-shrink:0;opacity:.7;transition:opacity .2s}.notification__close:hover{opacity:1}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 class DuckDevNotificationContainer {
@@ -2330,10 +2331,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'app-directive-block', standalone: true, imports: [DdFlexDirectionDirective, TranslocoPipe], template: "<div class=\"demo-container\">\n  <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'directivesDoc.ddFlexDescription' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\"&gt;\n  &lt;span&gt;Item 1&lt;/span&gt;\n  &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n        <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n            <span class=\"chip\">A</span>\n            <span class=\"chip\">B</span>\n            <span class=\"chip\">C</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n            <span class=\"chip\">One</span>\n            <span class=\"chip\">Two</span>\n            <span class=\"chip\">Three</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n            <span class=\"chip\">Left</span>\n            <span class=\"chip\">Right</span>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 
+class DuckDevAccordionComponent {
+    content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
+    title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
+    color = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
+    toggle() {
+        this.isOpen.update((prev) => !prev);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionComponent, isStandalone: true, selector: "duck-dev-accordion", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"duck-dev-accordion\">\n  <button\n    type=\"button\"\n    class=\"accordion-header\"\n    [class.open]=\"isOpen()\"\n    [attr.data-color]=\"color()\"\n    (click)=\"toggle()\"\n  >\n    {{ title() }}\n    <duck-dev-icon\n      name=\"duck-dev-chevron-right-medium\"\n      [class.open-chevron]=\"isOpen()\"\n    />\n  </button>\n  @if (isOpen()) {\n    <div\n      class=\"accordion-content\"\n      animate.enter=\"enter-animation\"\n      animate.leave=\"leaving\"\n    >\n      <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-accordion', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        DuckDevIcon
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"duck-dev-accordion\">\n  <button\n    type=\"button\"\n    class=\"accordion-header\"\n    [class.open]=\"isOpen()\"\n    [attr.data-color]=\"color()\"\n    (click)=\"toggle()\"\n  >\n    {{ title() }}\n    <duck-dev-icon\n      name=\"duck-dev-chevron-right-medium\"\n      [class.open-chevron]=\"isOpen()\"\n    />\n  </button>\n  @if (isOpen()) {\n    <div\n      class=\"accordion-content\"\n      animate.enter=\"enter-animation\"\n      animate.leave=\"leaving\"\n    >\n      <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class AccordionBlock {
+    colorViolet = ButtonEnumColor.Violet;
+    colorOrange = ButtonEnumColor.Orange;
+    colorWhite = ButtonEnumColor.White;
+    colorGray = ButtonEnumColor.Gray;
+    colorDark = ButtonEnumColor.Dark;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: AccordionBlock, isStandalone: true, selector: "app-accordion-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-accordion\n  [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n  [content]=\"q1Tpl\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n        <li><strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference with content</li>\n        <li><strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark (default: White)</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" [color]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorDark\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorWhite\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Content templates -->\n    <ng-template #q1Tpl>\n      <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n    </ng-template>\n    <ng-template #q2Tpl>\n      <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n    </ng-template>\n    <ng-template #q3Tpl>\n      <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n    </ng-template>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AccordionBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-accordion-block', standalone: true, imports: [TranslocoPipe, DuckDevAccordionComponent], template: "<div class=\"demo-container\">\n  <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-accordion\n  [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n  [content]=\"q1Tpl\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n        <li><strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference with content</li>\n        <li><strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark (default: White)</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" [color]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorDark\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorWhite\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Content templates -->\n    <ng-template #q1Tpl>\n      <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n    </ng-template>\n    <ng-template #q2Tpl>\n      <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n    </ng-template>\n    <ng-template #q3Tpl>\n      <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n    </ng-template>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+        }] });
+
+class SliderClassic {
+    cdr = inject(ChangeDetectorRef);
+    items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
+    intervalMs = input(3000, { ...(ngDevMode ? { debugName: "intervalMs" } : {}) });
+    autoplay = input(true, { ...(ngDevMode ? { debugName: "autoplay" } : {}) });
+    color = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    currentIndex = 0;
+    previousIndex = null;
+    isAnimating = false;
+    animateIn = false;
+    animationDurationMs = 300;
+    goNext() {
+        const len = this.items().length;
+        if (!len || this.isAnimating)
+            return;
+        const next = (this.currentIndex + 1) % len;
+        this.showSlide(next);
+    }
+    goPrev() {
+        const len = this.items().length;
+        if (!len || this.isAnimating)
+            return;
+        const next = (this.currentIndex - 1 + len) % len;
+        this.showSlide(next);
+    }
+    showSlide(nextIndex) {
+        if (nextIndex === this.currentIndex)
+            return;
+        this.previousIndex = this.currentIndex;
+        this.currentIndex = nextIndex;
+        this.isAnimating = true;
+        this.animateIn = false;
+        this.cdr.detectChanges();
+        requestAnimationFrame(() => {
+            void document.body.offsetWidth;
+            requestAnimationFrame(() => {
+                this.animateIn = true;
+            });
+        });
+        setTimeout(() => this.finishAnimation(), this.animationDurationMs + 60);
+    }
+    onTransitionEnd(evt) {
+        if (!this.isAnimating)
+            return;
+        const prop = evt.propertyName;
+        if (prop === 'opacity' || prop === 'transform' || prop === 'filter') {
+            this.finishAnimation();
+        }
+    }
+    finishAnimation() {
+        if (!this.isAnimating)
+            return;
+        this.isAnimating = false;
+        this.previousIndex = null;
+        this.animateIn = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderClassic, isStandalone: true, selector: "dd-slider-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"slides\">\n    @if(isAnimating && previousIndex !== null){\n      <div class=\"slide blurred\">\n        <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n      </div>\n    }\n    <div class=\"slide\" [class.current]=\"!isAnimating || animateIn\" [class.animate-in]=\"animateIn\" (transitionend)=\"onTransitionEnd($event)\">\n      <ng-container [ngTemplateOutlet]=\"items()[currentIndex]\"></ng-container>\n    </div>\n  </div>\n\n  <!-- Always visible navigation controls placed at the edges -->\n  <duck-dev-icon\n    class=\"dd-slider-btn dd-slider-btn-prev\"\n    name=\"duck-dev-chevron-left-medium\"\n    (click)=\"goPrev()\"\n  />\n  <duck-dev-icon\n    class=\"dd-slider-btn dd-slider-btn-next\"\n    name=\"duck-dev-chevron-right-medium\"\n    (click)=\"goNext()\"\n  />\n</div>\n", styles: [".container{width:min(100%,900px);position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%}.slide{position:relative;width:100%;opacity:0;filter:none;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .15s cubic-bezier(.22,1,.36,1),filter .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}.slide.current{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.animate-in{opacity:1;filter:blur(0);transform:translateZ(0) scale(1) translateY(0)}.slide.blurred{position:absolute;inset:0;opacity:.45;filter:blur(14px) saturate(1.1);transform:translateZ(0) scale(.94) translateY(24px)}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;color:var(--dd-base-0);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--dd-base-300);transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.2}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.slide{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-slider-classic', standalone: true, imports: [CommonModule, DuckDevIcon], host: {
+                        '[style.display]': '"block"'
+                    }, template: "<div class=\"container\">\n  <div class=\"slides\">\n    @if(isAnimating && previousIndex !== null){\n      <div class=\"slide blurred\">\n        <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n      </div>\n    }\n    <div class=\"slide\" [class.current]=\"!isAnimating || animateIn\" [class.animate-in]=\"animateIn\" (transitionend)=\"onTransitionEnd($event)\">\n      <ng-container [ngTemplateOutlet]=\"items()[currentIndex]\"></ng-container>\n    </div>\n  </div>\n\n  <!-- Always visible navigation controls placed at the edges -->\n  <duck-dev-icon\n    class=\"dd-slider-btn dd-slider-btn-prev\"\n    name=\"duck-dev-chevron-left-medium\"\n    (click)=\"goPrev()\"\n  />\n  <duck-dev-icon\n    class=\"dd-slider-btn dd-slider-btn-next\"\n    name=\"duck-dev-chevron-right-medium\"\n    (click)=\"goNext()\"\n  />\n</div>\n", styles: [".container{width:min(100%,900px);position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%}.slide{position:relative;width:100%;opacity:0;filter:none;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .15s cubic-bezier(.22,1,.36,1),filter .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}.slide.current{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.animate-in{opacity:1;filter:blur(0);transform:translateZ(0) scale(1) translateY(0)}.slide.blurred{position:absolute;inset:0;opacity:.45;filter:blur(14px) saturate(1.1);transform:translateZ(0) scale(.94) translateY(24px)}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;color:var(--dd-base-0);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--dd-base-300);transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.2}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.slide{transition:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class SliderBlock {
+    slideTemplates = viewChildren('slide', { ...(ngDevMode ? { debugName: "slideTemplates" } : {}) });
+    slides = signal([], { ...(ngDevMode ? { debugName: "slides" } : {}) });
+    ngAfterViewInit() {
+        this.slides.set([...this.slideTemplates()]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.raindrops.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n  [color]=\"'White'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> ({{ 'slider.required' | transloco }}) - {{ 'slider.raindrops.inputItems' | transloco }}</li>\n        <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n        <li><strong>color</strong> - Button palette color (e.g. 'White'). Used for styling consistency.</li>\n      </ul>\n    </div>\n\n    <!-- Meaningful demo slides -->\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n        <h3 class=\"dd-doc-slide__title\">Build delightful interfaces faster</h3>\n        <p class=\"dd-doc-slide__subtitle\">Duck Dev UI provides accessible, themeable components with sensible defaults so you can ship quickly.</p>\n        <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"Explore components\">Explore components</a>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n        <ul class=\"dd-doc-feature-list\" role=\"list\">\n          <li class=\"dd-doc-feature\">\n            <h4>Accessible</h4>\n            <p>Keyboard-friendly and ARIA\u2011aware out of the box.</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>Themeable</h4>\n            <p>Uses CSS variables to match your brand palette.</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>Lightweight</h4>\n            <p>Small, focused components with zero heavy deps.</p>\n          </li>\n        </ul>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n        <h4 class=\"dd-doc-slide-code__title\">Quick start</h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-classic&gt;</code></pre>\n        <p class=\"dd-doc-note\">Tip: Use templates to pass rich content into each slide.</p>\n      </section>\n    </ng-template>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-slider-block', standalone: true, imports: [TranslocoPipe, SliderClassic], template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.raindrops.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n  [color]=\"'White'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> ({{ 'slider.required' | transloco }}) - {{ 'slider.raindrops.inputItems' | transloco }}</li>\n        <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n        <li><strong>color</strong> - Button palette color (e.g. 'White'). Used for styling consistency.</li>\n      </ul>\n    </div>\n\n    <!-- Meaningful demo slides -->\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n        <h3 class=\"dd-doc-slide__title\">Build delightful interfaces faster</h3>\n        <p class=\"dd-doc-slide__subtitle\">Duck Dev UI provides accessible, themeable components with sensible defaults so you can ship quickly.</p>\n        <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"Explore components\">Explore components</a>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n        <ul class=\"dd-doc-feature-list\" role=\"list\">\n          <li class=\"dd-doc-feature\">\n            <h4>Accessible</h4>\n            <p>Keyboard-friendly and ARIA\u2011aware out of the box.</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>Themeable</h4>\n            <p>Uses CSS variables to match your brand palette.</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>Lightweight</h4>\n            <p>Small, focused components with zero heavy deps.</p>\n          </li>\n        </ul>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n        <h4 class=\"dd-doc-slide-code__title\">Quick start</h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-classic&gt;</code></pre>\n        <p class=\"dd-doc-note\">Tip: Use templates to pass rich content into each slide.</p>\n      </section>\n    </ng-template>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"] }]
+        }], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
+
 class MainDocumentationPage {
     translocoService = inject(TranslocoService);
     title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
     tabs = [
+        { id: 'accordion', label: this.translocoService.translate('tabs.accordion') },
         { id: 'buttons', label: this.translocoService.translate('tabs.buttons') },
         { id: 'loaders', label: this.translocoService.translate('tabs.loaders') },
         { id: 'tabs', label: this.translocoService.translate('tabs.tabs') },
@@ -2341,6 +2456,7 @@ class MainDocumentationPage {
         { id: 'directives', label: this.translocoService.translate('tabs.directives') },
         { id: 'input', label: this.translocoService.translate('tabs.input') },
         { id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
+        { id: 'slider', label: this.translocoService.translate('tabs.slider') },
         { id: 'svg', label: this.translocoService.translate('tabs.svg') }
     ];
     activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
@@ -2348,7 +2464,7 @@ class MainDocumentationPage {
         this.activeTab.set(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @if (activeTab().id === 'buttons') {\n    <app-button-block />\n  }\n  @if (activeTab().id === 'loaders') {\n    <app-loader-block />\n  }\n  @if (activeTab().id === 'tabs') {\n    <app-tabs-block />\n  }\n  @if (activeTab().id === 'badge') {\n    <app-badge-block />\n  }\n  @if (activeTab().id === 'directives') {\n    <app-directive-block />\n  }\n  @if(activeTab().id === 'input'){\n    <app-input-block />\n  }\n  @if(activeTab().id === 'notifications'){\n    <app-notification-block />\n  }\n  @if (activeTab().id === 'svg') {\n    <app-duck-dev-svg-block />\n  }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
             type: Component,
@@ -2362,13 +2478,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         NotificationBlock,
                         DuckDevNotificationContainer,
                         BadgeBlock,
-                        DirectiveBlock
-                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @if (activeTab().id === 'buttons') {\n    <app-button-block />\n  }\n  @if (activeTab().id === 'loaders') {\n    <app-loader-block />\n  }\n  @if (activeTab().id === 'tabs') {\n    <app-tabs-block />\n  }\n  @if (activeTab().id === 'badge') {\n    <app-badge-block />\n  }\n  @if (activeTab().id === 'directives') {\n    <app-directive-block />\n  }\n  @if(activeTab().id === 'input'){\n    <app-input-block />\n  }\n  @if(activeTab().id === 'notifications'){\n    <app-notification-block />\n  }\n  @if (activeTab().id === 'svg') {\n    <app-duck-dev-svg-block />\n  }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
+                        DirectiveBlock,
+                        AccordionBlock,
+                        SliderBlock
+                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-Ze3k_kca.mjs'),
-    ru: import('./duck-dev-lib-ru-9TH2RJJD.mjs')
+    en: import('./duck-dev-lib-en-4OEFIyu1.mjs'),
+    ru: import('./duck-dev-lib-ru-CcBIFkk3.mjs')
 };
 
 /*
@@ -2379,5 +2497,5 @@ const DuckDevLibTranslations = {
  * Generated bundle index. Do not edit.
  */
 
-export { Badge, ButtonBlurLift, ButtonCasper, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
+export { Badge, ButtonBlurLift, ButtonCasper, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
 //# sourceMappingURL=duck-dev-lib.mjs.map