duck-dev-lib 0.0.36 → 0.0.43

package/fesm2022/duck-dev-lib.mjs

@@ -1,15 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, viewChild, afterNextRender, ContentChildren } from '@angular/core';
-import * as i1$3 from '@angular/common';
-import { NgStyle, CommonModule, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
-import * as i1$2 from '@jsverse/transloco';
-import { TranslocoPipe, TranslocoModule, TranslocoService } from '@jsverse/transloco';
-import * as i1 from '@angular/forms';
+import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, inject, Injectable, afterNextRender, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, viewChild, ContentChildren } from '@angular/core';
+import * as i1 from '@angular/common';
+import { NgStyle, CommonModule, JsonPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import * as i1$3 from '@jsverse/transloco';
+import { TranslocoPipe, TranslocoService, TranslocoModule } from '@jsverse/transloco';
+import * as i1$1 from '@angular/forms';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
-import { MaskitoDirective } from '@maskito/angular';
-import * as i1$1 from '@angular/platform-browser';
-import { maskitoUpdateElement } from '@maskito/core';
-import { maskitoWithPlaceholder, maskitoEventHandler, maskitoPrefixPostprocessorGenerator } from '@maskito/kit';
+import * as i1$2 from '@angular/platform-browser';
 
 var AccentEnumColor;
 (function (AccentEnumColor) {
@@ -322,6 +319,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'duck-dev-button-casper', standalone: true, imports: [NgStyle], template: "<button class=\"button-default is-casper\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\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 }] }] } });
 
+function getNeobrutalButtonStyle(color) {
+    switch (color) {
+        case AccentEnumColor.Violet:
+            return {
+                '--neo-surface': 'var(--dd-base-secondary)',
+                '--neo-text': 'var(--dd-base-0)',
+                '--neo-shadow': 'var(--dd-base-accent-blue)',
+                '--neo-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.Orange:
+            return {
+                '--neo-surface': 'var(--dd-base-accent-orange)',
+                '--neo-text': 'var(--dd-base-600)',
+                '--neo-shadow': 'var(--dd-base-accent-pink)',
+                '--neo-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.Gray:
+            return {
+                '--neo-surface': 'var(--dd-base-200)',
+                '--neo-text': 'var(--dd-base-600)',
+                '--neo-shadow': 'var(--dd-base-400)',
+                '--neo-accent': 'var(--dd-base-accent-blue)',
+            };
+        case AccentEnumColor.Dark:
+            return {
+                '--neo-surface': 'var(--dd-base-600)',
+                '--neo-text': 'var(--dd-base-0)',
+                '--neo-shadow': 'var(--dd-base-accent-orange)',
+                '--neo-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.White:
+        default:
+            return {
+                '--neo-surface': 'var(--dd-base-0)',
+                '--neo-text': 'var(--dd-base-600)',
+                '--neo-shadow': 'var(--dd-base-accent-blue)',
+                '--neo-accent': 'var(--dd-base-accent-orange)',
+            };
+    }
+}
+
+class ButtonNeobrutalBurst {
+    text = input('Launch', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    subtext = input('HOT DROP', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
+    colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
+    buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalBurst, isStandalone: true, selector: "duck-dev-button-neobrutal-burst", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n  <span class=\"burst-pill\">{{ subtext() }}</span>\n  <span class=\"burst-text\">{{ text() }}</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}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:64px;padding:.95rem 1.35rem;border:3px solid var(--dd-base-600);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-burst:hover,.neo-burst:focus-visible{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}.neo-burst:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:3px 3px 0 var(--dd-base-300)}.burst-pill{position:absolute;top:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBurst, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-button-neobrutal-burst', standalone: true, imports: [NgStyle], template: "<button class=\"neo-burst\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n  <span class=\"burst-pill\">{{ subtext() }}</span>\n  <span class=\"burst-text\">{{ text() }}</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}.neo-burst{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:64px;padding:.95rem 1.35rem;border:3px solid var(--dd-base-600);border-radius:20px 8px 18px 10px;background:var(--neo-surface);box-shadow:6px 6px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-burst:hover,.neo-burst:focus-visible{transform:translate(3px,3px) rotate(-1deg);box-shadow:3px 3px 0 var(--neo-shadow)}.neo-burst:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--neo-shadow)}.neo-burst:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:3px 3px 0 var(--dd-base-300)}.burst-pill{position:absolute;top:-14px;right:12px;padding:.2rem .55rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--neo-accent);color:var(--dd-base-600);font-size:.72rem;line-height:1;transform:rotate(8deg)}.burst-text{display:inline-block;max-width:100%;text-align:center}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
+
+class ButtonNeobrutalSlab {
+    text = input('Drop Zone', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    helperText = input('ready to ship', { ...(ngDevMode ? { debugName: "helperText" } : {}) });
+    isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
+    colorButton = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
+    buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalSlab, isStandalone: true, selector: "duck-dev-button-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n  <span class=\"slab-text\">{{ text() }}</span>\n  <span class=\"slab-helper\">{{ helperText() }}</span>\n  <span class=\"slab-corner\" aria-hidden=\"true\"></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}.neo-slab{position:relative;display:grid;gap:.15rem;min-width:220px;padding:1rem 1.2rem .95rem;border:3px solid var(--dd-base-600);border-radius:10px;background:linear-gradient(135deg,transparent 0 18px,var(--neo-surface) 18px 100%);box-shadow:0 0 0 3px var(--dd-base-600),8px 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-2px,-2px);box-shadow:0 0 0 3px var(--dd-base-600),11px 11px 0 var(--neo-shadow)}.neo-slab:active{transform:translate(4px,4px);box-shadow:0 0 0 3px var(--dd-base-600),4px 4px 0 var(--neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6}.slab-text{position:relative;z-index:1;font-size:1rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.slab-helper{position:relative;z-index:1;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.78}.slab-corner{position:absolute;top:-3px;left:-3px;width:26px;height:26px;border-right:3px solid var(--dd-base-600);border-bottom:3px solid var(--dd-base-600);background:var(--neo-accent)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalSlab, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-button-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<button class=\"neo-slab\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n  <span class=\"slab-text\">{{ text() }}</span>\n  <span class=\"slab-helper\">{{ helperText() }}</span>\n  <span class=\"slab-corner\" aria-hidden=\"true\"></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}.neo-slab{position:relative;display:grid;gap:.15rem;min-width:220px;padding:1rem 1.2rem .95rem;border:3px solid var(--dd-base-600);border-radius:10px;background:linear-gradient(135deg,transparent 0 18px,var(--neo-surface) 18px 100%);box-shadow:0 0 0 3px var(--dd-base-600),8px 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;text-align:left;font:inherit;transition:transform .18s ease,box-shadow .18s ease}.neo-slab:hover,.neo-slab:focus-visible{transform:translate(-2px,-2px);box-shadow:0 0 0 3px var(--dd-base-600),11px 11px 0 var(--neo-shadow)}.neo-slab:active{transform:translate(4px,4px);box-shadow:0 0 0 3px var(--dd-base-600),4px 4px 0 var(--neo-shadow)}.neo-slab:disabled{cursor:not-allowed;opacity:.6}.slab-text{position:relative;z-index:1;font-size:1rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.slab-helper{position:relative;z-index:1;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.78}.slab-corner{position:absolute;top:-3px;left:-3px;width:26px;height:26px;border-right:3px solid var(--dd-base-600);border-bottom:3px solid var(--dd-base-600);background:var(--neo-accent)}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }] } });
+
+class ButtonNeobrutalTag {
+    text = input('Buy now', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    tag = input('01', { ...(ngDevMode ? { debugName: "tag" } : {}) });
+    isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : {}) });
+    colorButton = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
+    buttonStyle = computed(() => getNeobrutalButtonStyle(this.colorButton()), { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ButtonNeobrutalTag, isStandalone: true, selector: "duck-dev-button-neobrutal-tag", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n  <span class=\"tag-chip\">{{ tag() }}</span>\n  <span class=\"tag-text\">{{ text() }}</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}.neo-tag{position:relative;display:inline-flex;align-items:stretch;min-width:210px;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease,border-radius .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow);border-radius:24px}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-base-600);background:var(--neo-accent);color:var(--dd-base-600);font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalTag, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-button-neobrutal-tag', standalone: true, imports: [NgStyle], template: "<button class=\"neo-tag\" type=\"button\" [disabled]=\"isDisabled()\" [ngStyle]=\"buttonStyle()\">\n  <span class=\"tag-chip\">{{ tag() }}</span>\n  <span class=\"tag-text\">{{ text() }}</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}.neo-tag{position:relative;display:inline-flex;align-items:stretch;min-width:210px;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--neo-surface);box-shadow:0 8px 0 var(--neo-shadow);color:var(--neo-text);cursor:pointer;overflow:hidden;font:inherit;transition:transform .18s ease,box-shadow .18s ease,border-radius .18s ease}.neo-tag:hover,.neo-tag:focus-visible{transform:translateY(-3px);box-shadow:0 11px 0 var(--neo-shadow);border-radius:24px}.neo-tag:active{transform:translateY(4px);box-shadow:0 4px 0 var(--neo-shadow)}.neo-tag:disabled{cursor:not-allowed;opacity:.6}.tag-chip{display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:.9rem .75rem;border-right:3px solid var(--dd-base-600);background:var(--neo-accent);color:var(--dd-base-600);font-size:.88rem;font-weight:900;letter-spacing:.08em}.tag-text{display:inline-flex;align-items:center;justify-content:center;flex:1;padding:.9rem 1.15rem;font-size:.95rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", 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: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"] });
@@ -349,6 +429,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'duck-dev-loader-three-dots', imports: [], template: "<span class=\"loader\"></span>\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)}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;animation-fill-mode:both;animation:bblFadInOut 1.8s infinite ease-in-out}.loader{color:var(--dd-base-600);font-size:7px;position:relative;text-indent:-9999em;transform:translateZ(0);animation-delay:-.16s}.loader:before,.loader:after{content:\"\";position:absolute;top:0}.loader:before{left:-3.5em;animation-delay:-.32s}.loader:after{left:3.5em}@keyframes bblFadInOut{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}\n"] }]
         }] });
 
+class LoaderNeobrutalStamp {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalStamp, isStandalone: true, selector: "duck-dev-loader-neobrutal-stamp", ngImport: i0, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"stamp-plate\"></span>\n  <span class=\"stamp-center\"></span>\n  <span class=\"stamp-text\">LOAD</span>\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)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-base-600);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-base-600)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-base-0);animation:stamp-pulse 1.05s ease-in-out infinite}.stamp-text{position:absolute;bottom:10px;left:50%;z-index:1;padding:.1rem .45rem;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:.62rem;font-weight:900;letter-spacing:.18em;transform:translate(-50%) rotate(-4deg)}@keyframes stamp-spin{0%,20%{transform:rotate(0) scale(1)}30%,50%{transform:rotate(90deg) scale(1.08)}60%,80%{transform:rotate(180deg) scale(.94)}to{transform:rotate(270deg) scale(1)}}@keyframes stamp-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.2)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-loader-neobrutal-stamp', standalone: true, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"stamp-plate\"></span>\n  <span class=\"stamp-center\"></span>\n  <span class=\"stamp-text\">LOAD</span>\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)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-base-600);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-base-600)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-base-0);animation:stamp-pulse 1.05s ease-in-out infinite}.stamp-text{position:absolute;bottom:10px;left:50%;z-index:1;padding:.1rem .45rem;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:.62rem;font-weight:900;letter-spacing:.18em;transform:translate(-50%) rotate(-4deg)}@keyframes stamp-spin{0%,20%{transform:rotate(0) scale(1)}30%,50%{transform:rotate(90deg) scale(1.08)}60%,80%{transform:rotate(180deg) scale(.94)}to{transform:rotate(270deg) scale(1)}}@keyframes stamp-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.2)}}\n"] }]
+        }] });
+
+class LoaderNeobrutalBars {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalBars, isStandalone: true, selector: "duck-dev-loader-neobrutal-bars", ngImport: i0, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"bars-label\">WAIT</span>\n  <span class=\"bars-track\">\n    <span class=\"bar bar-one\"></span>\n    <span class=\"bar bar-two\"></span>\n    <span class=\"bar bar-three\"></span>\n    <span class=\"bar bar-four\"></span>\n  </span>\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)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-base-600);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-orange);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-base-600);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-loader-neobrutal-bars', standalone: true, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"bars-label\">WAIT</span>\n  <span class=\"bars-track\">\n    <span class=\"bar bar-one\"></span>\n    <span class=\"bar bar-two\"></span>\n    <span class=\"bar bar-three\"></span>\n    <span class=\"bar bar-four\"></span>\n  </span>\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)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-base-600);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-orange);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-base-600);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] }]
+        }] });
+
+class LoaderNeobrutalMarquee {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalMarquee, isStandalone: true, selector: "duck-dev-loader-neobrutal-marquee", ngImport: i0, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"marquee-chip\">SYNC</span>\n  <span class=\"marquee-window\">\n    <span class=\"marquee-ribbon\">\n      <span>LOADING</span>\n      <span>LOADING</span>\n      <span>LOADING</span>\n    </span>\n  </span>\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)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-base-600);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-base-0) 50% 100%)}.marquee-ribbon{display:inline-flex;align-items:center;gap:1.1rem;padding:.65rem 1rem;min-width:max-content;color:var(--dd-base-600);font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;animation:marquee-slide 1.15s linear infinite}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-33.333%)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-loader-neobrutal-marquee', standalone: true, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"marquee-chip\">SYNC</span>\n  <span class=\"marquee-window\">\n    <span class=\"marquee-ribbon\">\n      <span>LOADING</span>\n      <span>LOADING</span>\n      <span>LOADING</span>\n    </span>\n  </span>\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)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-base-600);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-base-0) 50% 100%)}.marquee-ribbon{display:inline-flex;align-items:center;gap:1.1rem;padding:.65rem 1rem;min-width:max-content;color:var(--dd-base-600);font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;animation:marquee-slide 1.15s linear infinite}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-33.333%)}}\n"] }]
+        }] });
+
 class DuckDevTab {
     tabs = input([], { ...(ngDevMode ? { debugName: "tabs" } : {}) });
     tabChange = output();
@@ -430,14 +537,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'dd-card-section', standalone: true, imports: [], template: "<section class=\"component-section\">\n  <ng-content />\n</section>\n", styles: [".component-section{background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}\n"] }]
         }] });
 
+class ButtonNeobrutalBlock {
+    colorViolet = AccentEnumColor.Violet;
+    colorOrange = AccentEnumColor.Orange;
+    colorWhite = AccentEnumColor.White;
+    colorGray = AccentEnumColor.Gray;
+    colorDark = AccentEnumColor.Dark;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonNeobrutalBlock, isStandalone: true, selector: "app-button-neobrutal-block", ngImport: i0, template: "<dd-card-section>\n  <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n  <p class=\"description\">\n    {{ 'buttons.neobrutal.description' | transloco }}\n  </p>\n\n  <div class=\"usage-block\">\n    <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n    <pre><code>&lt;duck-dev-button-neobrutal-burst\n  [text]=\"'Launch'\"\n  [subtext]=\"'HOT DROP'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-slab\n  [text]=\"'Drop Zone'\"\n  [helperText]=\"'ready to ship'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tag\n  [text]=\"'Buy now'\"\n  [tag]=\"'01'\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n  </div>\n\n  <div class=\"inputs-block\">\n    <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n    <ul>\n      <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n      <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n      <li>\n        <strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}\n      </li>\n      <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n      <li>\n        <strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}\n      </li>\n      <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n    </ul>\n  </div>\n\n  <div class=\"examples-block\">\n    <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Open beta'\"\n          [subtext]=\"'Beta'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Night mode'\"\n          [subtext]=\"'Sharp'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Drop zone'\"\n          [helperText]=\"'ready to ship'\"\n          [colorButton]=\"colorGray\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Fast lane'\"\n          [helperText]=\"'priority queue'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Read only'\"\n          [helperText]=\"'disabled'\"\n          [isDisabled]=\"true\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Buy now'\"\n          [tag]=\"'01'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Join crew'\"\n          [tag]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Pay later'\"\n          [tag]=\"'02'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n  </div>\n</dd-card-section>\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)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-base-600);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-base-600);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-600);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonNeobrutalBurst, selector: "duck-dev-button-neobrutal-burst", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTag, selector: "duck-dev-button-neobrutal-tag", inputs: ["text", "tag", "isDisabled", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-button-neobrutal-block', imports: [
+                        ButtonNeobrutalBurst,
+                        ButtonNeobrutalSlab,
+                        ButtonNeobrutalTag,
+                        DuckDevCardSection,
+                        TranslocoPipe,
+                    ], template: "<dd-card-section>\n  <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n  <p class=\"description\">\n    {{ 'buttons.neobrutal.description' | transloco }}\n  </p>\n\n  <div class=\"usage-block\">\n    <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n    <pre><code>&lt;duck-dev-button-neobrutal-burst\n  [text]=\"'Launch'\"\n  [subtext]=\"'HOT DROP'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-slab\n  [text]=\"'Drop Zone'\"\n  [helperText]=\"'ready to ship'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tag\n  [text]=\"'Buy now'\"\n  [tag]=\"'01'\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n  </div>\n\n  <div class=\"inputs-block\">\n    <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n    <ul>\n      <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n      <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n      <li>\n        <strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}\n      </li>\n      <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n      <li>\n        <strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}\n      </li>\n      <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n    </ul>\n  </div>\n\n  <div class=\"examples-block\">\n    <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Open beta'\"\n          [subtext]=\"'Beta'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Night mode'\"\n          [subtext]=\"'Sharp'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Drop zone'\"\n          [helperText]=\"'ready to ship'\"\n          [colorButton]=\"colorGray\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Fast lane'\"\n          [helperText]=\"'priority queue'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Read only'\"\n          [helperText]=\"'disabled'\"\n          [isDisabled]=\"true\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Buy now'\"\n          [tag]=\"'01'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Join crew'\"\n          [tag]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Pay later'\"\n          [tag]=\"'02'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n  </div>\n</dd-card-section>\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)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-base-600);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-base-600);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-600);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"] }]
+        }] });
+
 class ButtonBlock {
+    t = inject(TranslocoService);
     colorViolet = AccentEnumColor.Violet;
     colorOrange = AccentEnumColor.Orange;
     colorWhite = AccentEnumColor.White;
     colorGray = AccentEnumColor.Gray;
     colorDark = AccentEnumColor.Dark;
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'buttons.title' | transloco }}</h1>\n\n  <!-- Button Glide Over -->\n  <dd-card-section>\n    <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.glideOver.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-glide-over\n  textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n          {{ 'buttons.glideOver.inputTextButton' | transloco }}\n        </li>\n        <li>\n          <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n        </li>\n        <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Button Blur Lift -->\n  <dd-card-section>\n    <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.blurLift.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-blur-lift\n  textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n  [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n          {{ 'buttons.blurLift.inputTextButton' | transloco }}\n        </li>\n        <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n        <li>\n          <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n        </li>\n        <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Click Me\"\n            [hoverText]=\"'Action!'\"\n            [colorButton]=\"colorViolet\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Hover\"\n            [hoverText]=\"'Orange!'\"\n            [colorButton]=\"colorOrange\"\n          />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Gray Button\"\n            [hoverText]=\"'Hover'\"\n            [colorButton]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Dark Button\"\n            [hoverText]=\"'Magic!'\"\n            [colorButton]=\"colorDark\"\n          />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Button Color Flip -->\n  <dd-card-section>\n    <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.flip.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-flip\n  [text]=\"'Text'\"\n  [colorButton]=\"buttonColor\"\n  [disabled]=\"false\"\n  [direction]=\"'next'\"\n  [arrowIndex]=\"0\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n        <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n        <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n        <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Click me'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n          <duck-dev-button-flip\n            [text]=\"'Prev'\"\n            [direction]=\"'previous'\"\n            [colorButton]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n  <!-- Button Casper -->\n  <dd-card-section>\n    <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.casper.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-casper\n  [text]=\"'Text'\"\n  [isDisabled]=\"false\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n        <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n        <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@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: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlock, isStandalone: true, selector: "app-button-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'buttons.title' | transloco }}</h1>\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n\n      <!-- Button Glide Over -->\n      <dd-card-section>\n        <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n        <p class=\"description\">\n          {{ 'buttons.glideOver.description' | transloco }}\n        </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-glide-over\n  textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n          {{ 'buttons.glideOver.inputTextButton' | transloco }}\n        </li>\n        <li>\n          <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n        </li>\n        <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Button Blur Lift -->\n  <dd-card-section>\n    <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.blurLift.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-blur-lift\n  textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n  [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n          {{ 'buttons.blurLift.inputTextButton' | transloco }}\n        </li>\n        <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n        <li>\n          <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n        </li>\n        <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Click Me\"\n            [hoverText]=\"'Action!'\"\n            [colorButton]=\"colorViolet\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Hover\"\n            [hoverText]=\"'Orange!'\"\n            [colorButton]=\"colorOrange\"\n          />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Gray Button\"\n            [hoverText]=\"'Hover'\"\n            [colorButton]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Dark Button\"\n            [hoverText]=\"'Magic!'\"\n            [colorButton]=\"colorDark\"\n          />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Button Color Flip -->\n  <dd-card-section>\n    <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.flip.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-flip\n  [text]=\"'Text'\"\n  [colorButton]=\"buttonColor\"\n  [disabled]=\"false\"\n  [direction]=\"'next'\"\n  [arrowIndex]=\"0\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n        <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n        <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n        <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Click me'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n          <duck-dev-button-flip\n            [text]=\"'Prev'\"\n            [direction]=\"'previous'\"\n            [colorButton]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n  <!-- Button Casper -->\n  <dd-card-section>\n    <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.casper.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-casper\n  [text]=\"'Text'\"\n  [isDisabled]=\"false\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n        <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n        <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n      </dd-card-section>\n    } @else {\n      <app-button-neobrutal-block />\n    }\n  </duck-dev-tab>\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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@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: ButtonBlurLift, selector: "duck-dev-button-blur-lift", inputs: ["textButton", "colorButton", "padding", "hoverText"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: ButtonNeobrutalBlock, selector: "app-button-neobrutal-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlock, decorators: [{
             type: Component,
@@ -448,16 +584,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         ButtonFlip,
                         ButtonCasper,
                         DuckDevCardSection,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'buttons.title' | transloco }}</h1>\n\n  <!-- Button Glide Over -->\n  <dd-card-section>\n    <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.glideOver.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-glide-over\n  textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n          {{ 'buttons.glideOver.inputTextButton' | transloco }}\n        </li>\n        <li>\n          <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n        </li>\n        <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Button Blur Lift -->\n  <dd-card-section>\n    <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.blurLift.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-blur-lift\n  textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n  [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n          {{ 'buttons.blurLift.inputTextButton' | transloco }}\n        </li>\n        <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n        <li>\n          <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n        </li>\n        <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Click Me\"\n            [hoverText]=\"'Action!'\"\n            [colorButton]=\"colorViolet\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Hover\"\n            [hoverText]=\"'Orange!'\"\n            [colorButton]=\"colorOrange\"\n          />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Gray Button\"\n            [hoverText]=\"'Hover'\"\n            [colorButton]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Dark Button\"\n            [hoverText]=\"'Magic!'\"\n            [colorButton]=\"colorDark\"\n          />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Button Color Flip -->\n  <dd-card-section>\n    <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.flip.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-flip\n  [text]=\"'Text'\"\n  [colorButton]=\"buttonColor\"\n  [disabled]=\"false\"\n  [direction]=\"'next'\"\n  [arrowIndex]=\"0\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n        <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n        <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n        <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Click me'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n          <duck-dev-button-flip\n            [text]=\"'Prev'\"\n            [direction]=\"'previous'\"\n            [colorButton]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n  <!-- Button Casper -->\n  <dd-card-section>\n    <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.casper.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-casper\n  [text]=\"'Text'\"\n  [isDisabled]=\"false\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n        <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n        <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@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"] }]
+                        ButtonNeobrutalBlock,
+                        DuckDevTab,
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'buttons.title' | transloco }}</h1>\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n\n      <!-- Button Glide Over -->\n      <dd-card-section>\n        <h2>{{ 'buttons.glideOver.title' | transloco }}</h2>\n        <p class=\"description\">\n          {{ 'buttons.glideOver.description' | transloco }}\n        </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.glideOver.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-glide-over\n  textButton=\"\u0422\u0435\u043A\u0441\u0442 \u043A\u043D\u043E\u043F\u043A\u0438\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.glideOver.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>textButton</strong> ({{ 'buttons.glideOver.required' | transloco }}) -\n          {{ 'buttons.glideOver.inputTextButton' | transloco }}\n        </li>\n        <li>\n          <strong>colorButton</strong> - {{ 'buttons.glideOver.inputColorButton' | transloco }}\n        </li>\n        <li><strong>padding</strong> - {{ 'buttons.glideOver.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.glideOver.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleWhite' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"\u041D\u0430\u0436\u043C\u0438 \u043C\u0435\u043D\u044F\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleViolet' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Violet Button\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleOrange' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Orange Button\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleGray' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Gray Button\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.glideOver.exampleDark' | transloco }}</p>\n          <duck-dev-button-glide-over textButton=\"Dark Button\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Button Blur Lift -->\n  <dd-card-section>\n    <h2>{{ 'buttons.blurLift.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.blurLift.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.blurLift.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-blur-lift\n  textButton=\"\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0442\u0435\u043A\u0441\u0442\"\n  [hoverText]=\"'\u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438'\"\n  [colorButton]=\"buttonColor\"\n  [padding]=\"'10px 24px'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.blurLift.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>textButton</strong> ({{ 'buttons.blurLift.required' | transloco }}) -\n          {{ 'buttons.blurLift.inputTextButton' | transloco }}\n        </li>\n        <li><strong>hoverText</strong> - {{ 'buttons.blurLift.inputHoverText' | transloco }}</li>\n        <li>\n          <strong>colorButton</strong> - {{ 'buttons.blurLift.inputColorButton' | transloco }}\n        </li>\n        <li><strong>padding</strong> - {{ 'buttons.blurLift.inputPadding' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.blurLift.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleWhiteHover' | transloco }}</p>\n          <duck-dev-button-blur-lift textButton=\"\u041D\u0430\u0432\u0435\u0434\u0438 \u043D\u0430 \u043C\u0435\u043D\u044F\" [hoverText]=\"'\u041F\u0440\u0438\u0432\u0435\u0442!'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleViolet' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Click Me\"\n            [hoverText]=\"'Action!'\"\n            [colorButton]=\"colorViolet\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleOrange' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Hover\"\n            [hoverText]=\"'Orange!'\"\n            [colorButton]=\"colorOrange\"\n          />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleGray' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Gray Button\"\n            [hoverText]=\"'Hover'\"\n            [colorButton]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.blurLift.exampleDark' | transloco }}</p>\n          <duck-dev-button-blur-lift\n            textButton=\"Dark Button\"\n            [hoverText]=\"'Magic!'\"\n            [colorButton]=\"colorDark\"\n          />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Button Color Flip -->\n  <dd-card-section>\n    <h2>{{ 'buttons.flip.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.flip.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.flip.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-flip\n  [text]=\"'Text'\"\n  [colorButton]=\"buttonColor\"\n  [disabled]=\"false\"\n  [direction]=\"'next'\"\n  [arrowIndex]=\"0\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.flip.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> - {{ 'buttons.flip.inputText' | transloco }}</li>\n        <li><strong>colorButton</strong> - {{ 'buttons.flip.inputColorButton' | transloco }}</li>\n        <li><strong>disabled</strong> - {{ 'buttons.flip.inputDisabled' | transloco }}</li>\n        <li><strong>direction</strong> - {{ 'buttons.flip.inputDirection' | transloco }}</li>\n        <li><strong>arrowIndex</strong> - {{ 'buttons.flip.inputArrowIndex' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.flip.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleWhite' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Click me'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleViolet' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Violet Button'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleOrange' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Orange Button'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleGray' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Gray Button'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleDark' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Dark Button'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.examplePrev' | transloco }}</p>\n          <duck-dev-button-flip\n            [text]=\"'Prev'\"\n            [direction]=\"'previous'\"\n            [colorButton]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.flip.exampleNext' | transloco }}</p>\n          <duck-dev-button-flip [text]=\"'Next'\" [direction]=\"'next'\" [colorButton]=\"colorViolet\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n  <!-- Button Casper -->\n  <dd-card-section>\n    <h2>{{ 'buttons.casper.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'buttons.casper.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'buttons.casper.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-button-casper\n  [text]=\"'Text'\"\n  [isDisabled]=\"false\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'buttons.casper.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>text</strong> \u2014 {{ 'buttons.casper.inputText' | transloco }}</li>\n        <li><strong>isDisabled</strong> \u2014 {{ 'buttons.casper.inputIsDisabled' | transloco }}</li>\n        <li><strong>colorButton</strong> \u2014 {{ 'buttons.casper.inputColorButton' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'buttons.casper.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleWhite' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleViolet' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleOrange' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleGray' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'buttons.casper.exampleDark' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorDark\" />\n        </div>\n      </div>\n    </div>\n      </dd-card-section>\n    } @else {\n      <app-button-neobrutal-block />\n    }\n  </duck-dev-tab>\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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item duck-dev-button-glide-over,.demo-container .examples-block .example-row .example-item duck-dev-button-blur-lift{width:100%;max-width:300px}@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 LoaderBlock {
+    t = inject(TranslocoService);
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'loaders.title' | transloco }}</h1>\n\n  <!-- Loader Classic -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.classic.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n          <duck-dev-loader-classic />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Loader Text Bubble -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.textBubble.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n        <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n          <duck-dev-loader-loading-bubble />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Loader Three Dots -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.threeDots.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n      <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <duck-dev-loader-three-dots />\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:40px;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;min-height:150px;justify-content:center}.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-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items: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%}}\n"], dependencies: [{ kind: "component", type: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: LoaderBlock, isStandalone: true, selector: "app-loader-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'loaders.title' | transloco }}</h1>\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n\n      <!-- Loader Classic -->\n      <section class=\"component-section\">\n        <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n        <p class=\"description\">\n          {{ 'loaders.classic.description' | transloco }}\n        </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n          <duck-dev-loader-classic />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Loader Text Bubble -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.textBubble.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n        <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n          <duck-dev-loader-loading-bubble />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Loader Three Dots -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.threeDots.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n      <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <duck-dev-loader-three-dots />\n        </div>\n      </div>\n    </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section-neobrutal\">\n        <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n        <p class=\"description\">\n          {{ 'loaders.neobrutal.description' | transloco }}\n        </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-neobrutal-stamp /&gt;\n&lt;duck-dev-loader-neobrutal-bars /&gt;\n&lt;duck-dev-loader-neobrutal-marquee /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item example-item-neobrutal\">\n          <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n          <duck-dev-loader-neobrutal-stamp />\n        </div>\n        <div class=\"example-item example-item-neobrutal\">\n          <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n          <duck-dev-loader-neobrutal-bars />\n        </div>\n        <div class=\"example-item example-item-neobrutal\">\n          <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n          <duck-dev-loader-neobrutal-marquee />\n        </div>\n      </div>\n    </div>\n      </section>\n    }\n  </duck-dev-tab>\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:40px;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;min-height:150px;justify-content:center}.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-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@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: LoaderClassic, selector: "duck-dev-loader-classic" }, { kind: "component", type: LoaderLoadingBubble, selector: "duck-dev-loader-loading-bubble" }, { kind: "component", type: LoaderThreeDots, selector: "duck-dev-loader-three-dots" }, { kind: "component", type: LoaderNeobrutalStamp, selector: "duck-dev-loader-neobrutal-stamp" }, { kind: "component", type: LoaderNeobrutalBars, selector: "duck-dev-loader-neobrutal-bars" }, { kind: "component", type: LoaderNeobrutalMarquee, selector: "duck-dev-loader-neobrutal-marquee" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loader-block', imports: [LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, TranslocoPipe], template: "<div class=\"demo-container\">\n  <h1>{{ 'loaders.title' | transloco }}</h1>\n\n  <!-- Loader Classic -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.classic.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n          <duck-dev-loader-classic />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Loader Text Bubble -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.textBubble.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n        <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n          <duck-dev-loader-loading-bubble />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Loader Three Dots -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.threeDots.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n      <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <duck-dev-loader-three-dots />\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:40px;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;min-height:150px;justify-content:center}.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-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item lib-loader-three-dots{display:flex;justify-content:center;align-items: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%}}\n"] }]
+            args: [{ selector: 'app-loader-block', imports: [
+                        LoaderClassic,
+                        LoaderLoadingBubble,
+                        LoaderThreeDots,
+                        LoaderNeobrutalStamp,
+                        LoaderNeobrutalBars,
+                        LoaderNeobrutalMarquee,
+                        TranslocoPipe,
+                        DuckDevTab,
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'loaders.title' | transloco }}</h1>\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n\n      <!-- Loader Classic -->\n      <section class=\"component-section\">\n        <h2>{{ 'loaders.classic.title' | transloco }}</h2>\n        <p class=\"description\">\n          {{ 'loaders.classic.description' | transloco }}\n        </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-classic /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.classic.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.classic.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'loaders.classic.exampleStandard' | transloco }}</p>\n          <duck-dev-loader-classic />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Loader Text Bubble -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.textBubble.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.textBubble.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.textBubble.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-loading-bubble /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.textBubble.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.textBubble.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.textBubble.inputFixed' | transloco }}</li>\n        <li>{{ 'loaders.textBubble.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.textBubble.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'loaders.textBubble.exampleStandard' | transloco }}</p>\n          <duck-dev-loader-loading-bubble />\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <!-- Loader Three Dots -->\n  <section class=\"component-section\">\n    <h2>{{ 'loaders.threeDots.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'loaders.threeDots.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.threeDots.usage' | transloco }}</h3>\n      <pre><code>&lt;lib-loader-three-dots /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.threeDots.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.threeDots.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.threeDots.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.threeDots.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <duck-dev-loader-three-dots />\n        </div>\n      </div>\n    </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section-neobrutal\">\n        <h2>{{ 'loaders.neobrutal.title' | transloco }}</h2>\n        <p class=\"description\">\n          {{ 'loaders.neobrutal.description' | transloco }}\n        </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'loaders.neobrutal.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-loader-neobrutal-stamp /&gt;\n&lt;duck-dev-loader-neobrutal-bars /&gt;\n&lt;duck-dev-loader-neobrutal-marquee /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'loaders.neobrutal.inputs' | transloco }}</h3>\n      <ul>\n        <li>{{ 'loaders.neobrutal.inputNone' | transloco }}</li>\n        <li>{{ 'loaders.neobrutal.inputCss' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'loaders.neobrutal.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item example-item-neobrutal\">\n          <p class=\"example-label\">{{ 'loaders.neobrutal.exampleStamp' | transloco }}</p>\n          <duck-dev-loader-neobrutal-stamp />\n        </div>\n        <div class=\"example-item example-item-neobrutal\">\n          <p class=\"example-label\">{{ 'loaders.neobrutal.exampleBars' | transloco }}</p>\n          <duck-dev-loader-neobrutal-bars />\n        </div>\n        <div class=\"example-item example-item-neobrutal\">\n          <p class=\"example-label\">{{ 'loaders.neobrutal.exampleMarquee' | transloco }}</p>\n          <duck-dev-loader-neobrutal-marquee />\n        </div>\n      </div>\n    </div>\n      </section>\n    }\n  </duck-dev-tab>\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:40px;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;min-height:150px;justify-content:center}.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-loader-classic,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-loading-bubble,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-three-dots,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-stamp,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-bars,.demo-container .component-section .examples-block .example-row .example-item duck-dev-loader-neobrutal-marquee{display:flex;justify-content:center;align-items:center}.demo-container .component-section .examples-block .example-row .example-item.example-item-neobrutal{background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 35%,var(--dd-base-0) 35% 100%);border-width:3px;border-color:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}@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 DuckDevCardAccent {
@@ -494,13 +650,364 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'dd-card-accent', standalone: true, imports: [NgStyle], template: "<div class=\"dd-card-accent\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-accent__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [".dd-card-accent{padding:12px 15px;border-radius:6px;border-left:3px solid var(--dd-card-accent-color);line-height:1.5}.dd-card-accent__content{display:block}.dd-card-accent strong{color:var(--dd-card-accent-color);font-weight:600}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
+class DuckDevCardMinimal {
+    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    cardStyle = computed(() => {
+        const color = this.color();
+        let accent = 'var(--dd-base-300)';
+        let background = 'linear-gradient(180deg, var(--dd-base-0) 0%, var(--dd-base-100) 100%)';
+        let panel = 'color-mix(in srgb, var(--dd-base-0) 88%, var(--dd-base-100))';
+        let title = 'var(--dd-base-600)';
+        let text = 'var(--dd-base-400)';
+        let border = 'color-mix(in srgb, var(--dd-base-300) 72%, transparent)';
+        let shadow = '0 28px 60px -42px color-mix(in srgb, var(--dd-base-600) 28%, transparent)';
+        let glow = 'color-mix(in srgb, var(--dd-base-300) 40%, transparent)';
+        switch (color) {
+            case AccentEnumColor.Violet:
+                accent = 'var(--dd-base-secondary)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-secondary) 8%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+                panel = 'color-mix(in srgb, var(--dd-base-secondary) 4%, var(--dd-base-0))';
+                border = 'color-mix(in srgb, var(--dd-base-secondary) 18%, transparent)';
+                glow = 'color-mix(in srgb, var(--dd-base-secondary) 30%, transparent)';
+                shadow = '0 30px 65px -42px color-mix(in srgb, var(--dd-base-secondary) 32%, transparent)';
+                break;
+            case AccentEnumColor.Orange:
+                accent = 'var(--dd-base-accent-orange)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-accent-orange) 10%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+                panel = 'color-mix(in srgb, var(--dd-base-accent-orange) 5%, var(--dd-base-0))';
+                border = 'color-mix(in srgb, var(--dd-base-accent-orange) 18%, transparent)';
+                glow = 'color-mix(in srgb, var(--dd-base-accent-orange) 32%, transparent)';
+                shadow =
+                    '0 30px 65px -42px color-mix(in srgb, var(--dd-base-accent-orange) 34%, transparent)';
+                break;
+            case AccentEnumColor.Gray:
+                accent = 'var(--dd-base-500)';
+                background = 'linear-gradient(180deg, var(--dd-base-100) 0%, var(--dd-base-0) 100%)';
+                panel = 'color-mix(in srgb, var(--dd-base-100) 82%, var(--dd-base-0))';
+                border = 'color-mix(in srgb, var(--dd-base-400) 24%, transparent)';
+                glow = 'color-mix(in srgb, var(--dd-base-400) 22%, transparent)';
+                break;
+            case AccentEnumColor.Dark:
+                accent = 'var(--dd-base-0)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-600) 94%, black) 0%, var(--dd-base-600) 100%)';
+                panel = 'color-mix(in srgb, var(--dd-base-500) 92%, black)';
+                title = 'var(--dd-base-0)';
+                text = 'var(--dd-base-200)';
+                border = 'color-mix(in srgb, var(--dd-base-200) 14%, transparent)';
+                glow = 'color-mix(in srgb, var(--dd-base-0) 16%, transparent)';
+                shadow = '0 34px 80px -46px color-mix(in srgb, black 56%, transparent)';
+                break;
+            case AccentEnumColor.White:
+                break;
+        }
+        return {
+            '--dd-card-minimal-accent': accent,
+            '--dd-card-minimal-background': background,
+            '--dd-card-minimal-panel': panel,
+            '--dd-card-minimal-title': title,
+            '--dd-card-minimal-text': text,
+            '--dd-card-minimal-border': border,
+            '--dd-card-minimal-shadow': shadow,
+            '--dd-card-minimal-glow': glow,
+        };
+    }, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardMinimal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardMinimal, isStandalone: true, selector: "dd-card-minimal", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-minimal\" [ngStyle]=\"cardStyle()\">\n  <span class=\"dd-card-minimal__halo\" aria-hidden=\"true\"></span>\n  <span class=\"dd-card-minimal__corner\" aria-hidden=\"true\"></span>\n\n  <div class=\"dd-card-minimal__panel\">\n    <div class=\"dd-card-minimal__rail\" aria-hidden=\"true\">\n      <span class=\"dd-card-minimal__dot\"></span>\n      <span class=\"dd-card-minimal__line\"></span>\n    </div>\n\n    <div class=\"dd-card-minimal__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-minimal{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border:1px solid var(--dd-card-minimal-border);border-radius:24px;background:var(--dd-card-minimal-background);box-shadow:var(--dd-card-minimal-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.dd-card-minimal:hover{transform:translateY(-4px);box-shadow:var(--dd-card-minimal-shadow),0 0 0 1px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent);border-color:color-mix(in srgb,var(--dd-card-minimal-accent) 28%,transparent)}.dd-card-minimal__halo,.dd-card-minimal__corner{position:absolute;pointer-events:none}.dd-card-minimal__halo{top:-72px;right:-52px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--dd-card-minimal-glow) 0%,transparent 72%);opacity:.9;z-index:0}.dd-card-minimal__corner{top:16px;right:16px;width:42px;height:42px;border-top:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-right:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-radius:0 16px 0 0;opacity:.9;z-index:2}.dd-card-minimal__panel{position:relative;z-index:1;display:grid;grid-template-columns:26px minmax(0,1fr);gap:18px;min-height:100%;padding:22px 22px 22px 20px;border-radius:23px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-minimal-panel) 96%,var(--dd-base-0)) 0%,var(--dd-card-minimal-panel) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-card-minimal__rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}.dd-card-minimal__dot{width:8px;height:8px;border-radius:50%;background:var(--dd-card-minimal-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent)}.dd-card-minimal__line{width:1px;flex:1;min-height:76px;border-radius:999px;background:linear-gradient(180deg,var(--dd-card-minimal-accent) 0%,color-mix(in srgb,var(--dd-card-minimal-accent) 16%,transparent) 100%)}.dd-card-minimal__content{min-width:0;max-width:100%;color:var(--dd-card-minimal-text);line-height:1.65;padding-right:28px;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-minimal__content>:first-child{margin-top:0}.dd-card-minimal__content>:last-child{margin-bottom:0}.dd-card-minimal strong,.dd-card-minimal h3,.dd-card-minimal h4{display:inline-block;color:var(--dd-card-minimal-title);font-weight:600;letter-spacing:-.03em}.dd-card-minimal h3,.dd-card-minimal h4{margin:0 0 8px;font-size:18px;line-height:1.2}.dd-card-minimal p{margin:0}.dd-card-minimal small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-minimal-accent) 72%,var(--dd-card-minimal-text));font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.dd-card-minimal a{color:var(--dd-card-minimal-title);text-decoration-color:color-mix(in srgb,var(--dd-card-minimal-accent) 40%,transparent);text-underline-offset:.18em}.dd-card-minimal p,.dd-card-minimal small,.dd-card-minimal a,.dd-card-minimal span,.dd-card-minimal div{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}@media(max-width:640px){.dd-card-minimal{border-radius:20px}.dd-card-minimal__panel{grid-template-columns:18px minmax(0,1fr);gap:14px;padding:18px 16px;border-radius:19px}.dd-card-minimal__content{padding-right:10px}.dd-card-minimal__corner{top:12px;right:12px;width:30px;height:30px;border-radius:0 12px 0 0}.dd-card-minimal__halo{top:-82px;right:-84px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardMinimal, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-card-minimal', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-minimal\" [ngStyle]=\"cardStyle()\">\n  <span class=\"dd-card-minimal__halo\" aria-hidden=\"true\"></span>\n  <span class=\"dd-card-minimal__corner\" aria-hidden=\"true\"></span>\n\n  <div class=\"dd-card-minimal__panel\">\n    <div class=\"dd-card-minimal__rail\" aria-hidden=\"true\">\n      <span class=\"dd-card-minimal__dot\"></span>\n      <span class=\"dd-card-minimal__line\"></span>\n    </div>\n\n    <div class=\"dd-card-minimal__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-minimal{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border:1px solid var(--dd-card-minimal-border);border-radius:24px;background:var(--dd-card-minimal-background);box-shadow:var(--dd-card-minimal-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.dd-card-minimal:hover{transform:translateY(-4px);box-shadow:var(--dd-card-minimal-shadow),0 0 0 1px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent);border-color:color-mix(in srgb,var(--dd-card-minimal-accent) 28%,transparent)}.dd-card-minimal__halo,.dd-card-minimal__corner{position:absolute;pointer-events:none}.dd-card-minimal__halo{top:-72px;right:-52px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--dd-card-minimal-glow) 0%,transparent 72%);opacity:.9;z-index:0}.dd-card-minimal__corner{top:16px;right:16px;width:42px;height:42px;border-top:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-right:1px solid color-mix(in srgb,var(--dd-card-minimal-accent) 38%,transparent);border-radius:0 16px 0 0;opacity:.9;z-index:2}.dd-card-minimal__panel{position:relative;z-index:1;display:grid;grid-template-columns:26px minmax(0,1fr);gap:18px;min-height:100%;padding:22px 22px 22px 20px;border-radius:23px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-minimal-panel) 96%,var(--dd-base-0)) 0%,var(--dd-card-minimal-panel) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-card-minimal__rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:2px}.dd-card-minimal__dot{width:8px;height:8px;border-radius:50%;background:var(--dd-card-minimal-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--dd-card-minimal-accent) 12%,transparent)}.dd-card-minimal__line{width:1px;flex:1;min-height:76px;border-radius:999px;background:linear-gradient(180deg,var(--dd-card-minimal-accent) 0%,color-mix(in srgb,var(--dd-card-minimal-accent) 16%,transparent) 100%)}.dd-card-minimal__content{min-width:0;max-width:100%;color:var(--dd-card-minimal-text);line-height:1.65;padding-right:28px;letter-spacing:-.01em;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-minimal__content>:first-child{margin-top:0}.dd-card-minimal__content>:last-child{margin-bottom:0}.dd-card-minimal strong,.dd-card-minimal h3,.dd-card-minimal h4{display:inline-block;color:var(--dd-card-minimal-title);font-weight:600;letter-spacing:-.03em}.dd-card-minimal h3,.dd-card-minimal h4{margin:0 0 8px;font-size:18px;line-height:1.2}.dd-card-minimal p{margin:0}.dd-card-minimal small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-minimal-accent) 72%,var(--dd-card-minimal-text));font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.dd-card-minimal a{color:var(--dd-card-minimal-title);text-decoration-color:color-mix(in srgb,var(--dd-card-minimal-accent) 40%,transparent);text-underline-offset:.18em}.dd-card-minimal p,.dd-card-minimal small,.dd-card-minimal a,.dd-card-minimal span,.dd-card-minimal div{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}@media(max-width:640px){.dd-card-minimal{border-radius:20px}.dd-card-minimal__panel{grid-template-columns:18px minmax(0,1fr);gap:14px;padding:18px 16px;border-radius:19px}.dd-card-minimal__content{padding-right:10px}.dd-card-minimal__corner{top:12px;right:12px;width:30px;height:30px;border-radius:0 12px 0 0}.dd-card-minimal__halo{top:-82px;right:-84px}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+function getNeobrutalCardStyle(color) {
+    switch (color) {
+        case AccentEnumColor.Violet:
+            return {
+                '--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-base-accent-blue) 16%, var(--dd-base-0))',
+                '--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-base-accent-blue) 8%, var(--dd-base-0))',
+                '--dd-neo-card-text': 'var(--dd-base-600)',
+                '--dd-neo-card-border': 'var(--dd-base-600)',
+                '--dd-neo-card-shadow': 'var(--dd-base-accent-blue)',
+                '--dd-neo-card-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.Orange:
+            return {
+                '--dd-neo-card-surface': 'color-mix(in srgb, var(--dd-base-accent-orange) 18%, var(--dd-base-0))',
+                '--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-base-accent-yellow) 18%, var(--dd-base-0))',
+                '--dd-neo-card-text': 'var(--dd-base-600)',
+                '--dd-neo-card-border': 'var(--dd-base-600)',
+                '--dd-neo-card-shadow': 'var(--dd-base-accent-orange)',
+                '--dd-neo-card-accent': 'var(--dd-base-accent-pink)',
+            };
+        case AccentEnumColor.Gray:
+            return {
+                '--dd-neo-card-surface': 'var(--dd-base-100)',
+                '--dd-neo-card-panel': 'var(--dd-base-0)',
+                '--dd-neo-card-text': 'var(--dd-base-600)',
+                '--dd-neo-card-border': 'var(--dd-base-600)',
+                '--dd-neo-card-shadow': 'var(--dd-base-400)',
+                '--dd-neo-card-accent': 'var(--dd-base-accent-blue)',
+            };
+        case AccentEnumColor.Dark:
+            return {
+                '--dd-neo-card-surface': 'var(--dd-base-600)',
+                '--dd-neo-card-panel': 'color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500))',
+                '--dd-neo-card-text': 'var(--dd-base-0)',
+                '--dd-neo-card-border': 'var(--dd-base-0)',
+                '--dd-neo-card-shadow': 'var(--dd-base-accent-orange)',
+                '--dd-neo-card-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.White:
+        default:
+            return {
+                '--dd-neo-card-surface': 'var(--dd-base-0)',
+                '--dd-neo-card-panel': 'var(--dd-base-100)',
+                '--dd-neo-card-text': 'var(--dd-base-600)',
+                '--dd-neo-card-border': 'var(--dd-base-600)',
+                '--dd-neo-card-shadow': 'var(--dd-base-accent-blue)',
+                '--dd-neo-card-accent': 'var(--dd-base-accent-orange)',
+            };
+    }
+}
+
+class DuckDevCardNeobrutalPoster {
+    color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    railTop = input.required({ ...(ngDevMode ? { debugName: "railTop" } : {}) });
+    railMiddle = input.required({ ...(ngDevMode ? { debugName: "railMiddle" } : {}) });
+    railBottom = input.required({ ...(ngDevMode ? { debugName: "railBottom" } : {}) });
+    eyebrow = input.required({ ...(ngDevMode ? { debugName: "eyebrow" } : {}) });
+    title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
+    description = input.required({ ...(ngDevMode ? { debugName: "description" } : {}) });
+    badge = input.required({ ...(ngDevMode ? { debugName: "badge" } : {}) });
+    metricLabel = input.required({ ...(ngDevMode ? { debugName: "metricLabel" } : {}) });
+    metric = input.required({ ...(ngDevMode ? { debugName: "metric" } : {}) });
+    cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalPoster, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalPoster, isStandalone: true, selector: "dd-card-neobrutal-poster", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, railTop: { classPropertyName: "railTop", publicName: "railTop", isSignal: true, isRequired: true, transformFunction: null }, railMiddle: { classPropertyName: "railMiddle", publicName: "railMiddle", isSignal: true, isRequired: true, transformFunction: null }, railBottom: { classPropertyName: "railBottom", publicName: "railBottom", isSignal: true, isRequired: true, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: true, transformFunction: null }, metricLabel: { classPropertyName: "metricLabel", publicName: "metricLabel", isSignal: true, isRequired: true, transformFunction: null }, metric: { classPropertyName: "metric", publicName: "metric", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-poster\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-poster__panel\">\n    <div class=\"dd-card-neo-poster__meta\">\n      <p class=\"dd-card-neo-poster__eyebrow\">{{ eyebrow() }}</p>\n      <p class=\"dd-card-neo-poster__badge\">{{ badge() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__content\">\n      <h3 class=\"dd-card-neo-poster__title\">{{ title() }}</h3>\n      <p class=\"dd-card-neo-poster__description\">{{ description() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__metric\">\n      <span class=\"dd-card-neo-poster__metric-label\">{{ metricLabel() }}</span>\n      <strong class=\"dd-card-neo-poster__metric-value\">{{ metric() }}</strong>\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;display:grid;gap:18px;padding:24px 24px 24px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 20%,transparent) 0 17%,transparent 17% 100%),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dd-neo-card-border) 9%,transparent) 0 10px,transparent 10px 22px),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{display:grid;gap:10px}.dd-card-neo-poster__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__badge,.dd-card-neo-poster__title,.dd-card-neo-poster__description,.dd-card-neo-poster__metric-label,.dd-card-neo-poster__metric-value{margin:0}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__metric-label{font-size:12px;font-weight:900;letter-spacing:.18em;line-height:1.1;text-transform:uppercase}.dd-card-neo-poster__badge{padding:7px 10px 5px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;text-transform:uppercase}.dd-card-neo-poster__title{max-width:11ch;font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}.dd-card-neo-poster__description{max-width:38ch;font-size:15px;line-height:1.5;font-weight:800}.dd-card-neo-poster__metric{display:grid;justify-items:start;gap:6px;width:fit-content;padding:12px 14px 10px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-surface);box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__metric-value{font-size:clamp(28px,5vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.07em}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{min-height:auto;writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}.dd-card-neo-poster__panel{padding:20px 20px 20px 24px}.dd-card-neo-poster__meta{flex-direction:column;align-items:flex-start}.dd-card-neo-poster__title{max-width:none}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalPoster, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-card-neobrutal-poster', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-poster\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-poster__panel\">\n    <div class=\"dd-card-neo-poster__meta\">\n      <p class=\"dd-card-neo-poster__eyebrow\">{{ eyebrow() }}</p>\n      <p class=\"dd-card-neo-poster__badge\">{{ badge() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__content\">\n      <h3 class=\"dd-card-neo-poster__title\">{{ title() }}</h3>\n      <p class=\"dd-card-neo-poster__description\">{{ description() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__metric\">\n      <span class=\"dd-card-neo-poster__metric-label\">{{ metricLabel() }}</span>\n      <strong class=\"dd-card-neo-poster__metric-value\">{{ metric() }}</strong>\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;display:grid;gap:18px;padding:24px 24px 24px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 20%,transparent) 0 17%,transparent 17% 100%),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dd-neo-card-border) 9%,transparent) 0 10px,transparent 10px 22px),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{display:grid;gap:10px}.dd-card-neo-poster__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__badge,.dd-card-neo-poster__title,.dd-card-neo-poster__description,.dd-card-neo-poster__metric-label,.dd-card-neo-poster__metric-value{margin:0}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__metric-label{font-size:12px;font-weight:900;letter-spacing:.18em;line-height:1.1;text-transform:uppercase}.dd-card-neo-poster__badge{padding:7px 10px 5px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;text-transform:uppercase}.dd-card-neo-poster__title{max-width:11ch;font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}.dd-card-neo-poster__description{max-width:38ch;font-size:15px;line-height:1.5;font-weight:800}.dd-card-neo-poster__metric{display:grid;justify-items:start;gap:6px;width:fit-content;padding:12px 14px 10px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-surface);box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__metric-value{font-size:clamp(28px,5vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.07em}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{min-height:auto;writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}.dd-card-neo-poster__panel{padding:20px 20px 20px 24px}.dd-card-neo-poster__meta{flex-direction:column;align-items:flex-start}.dd-card-neo-poster__title{max-width:none}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], railTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "railTop", required: true }] }], railMiddle: [{ type: i0.Input, args: [{ isSignal: true, alias: "railMiddle", required: true }] }], railBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "railBottom", required: true }] }], eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: true }] }], metricLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricLabel", required: true }] }], metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: true }] }] } });
+
+class DuckDevCardNeobrutalSlab {
+    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    strapLabel = input.required({ ...(ngDevMode ? { debugName: "strapLabel" } : {}) });
+    cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-slab\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text)}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-slab\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text)}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strapLabel", required: true }] }] } });
+
+class DuckDevCardNeobrutalStamp {
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    chromeStart = input.required({ ...(ngDevMode ? { debugName: "chromeStart" } : {}) });
+    chromeEnd = input.required({ ...(ngDevMode ? { debugName: "chromeEnd" } : {}) });
+    sealLabel = input.required({ ...(ngDevMode ? { debugName: "sealLabel" } : {}) });
+    cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalStamp, isStandalone: true, selector: "dd-card-neobrutal-stamp", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, chromeStart: { classPropertyName: "chromeStart", publicName: "chromeStart", isSignal: true, isRequired: true, transformFunction: null }, chromeEnd: { classPropertyName: "chromeEnd", publicName: "chromeEnd", isSignal: true, isRequired: true, transformFunction: null }, sealLabel: { classPropertyName: "sealLabel", publicName: "sealLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n    <span>{{ chromeStart() }}</span>\n    <span>{{ chromeEnd() }}</span>\n  </div>\n\n  <div class=\"dd-card-neo-stamp__body\">\n    <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n    <div class=\"dd-card-neo-stamp__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-border);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-border)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalStamp, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-card-neobrutal-stamp', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n    <span>{{ chromeStart() }}</span>\n    <span>{{ chromeEnd() }}</span>\n  </div>\n\n  <div class=\"dd-card-neo-stamp__body\">\n    <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n    <div class=\"dd-card-neo-stamp__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-border);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-border)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], chromeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeStart", required: true }] }], chromeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeEnd", required: true }] }], sealLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sealLabel", required: true }] }] } });
+
+class DuckDevCardNeobrutalTicket {
+    color = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    flashLabel = input.required({ ...(ngDevMode ? { debugName: "flashLabel" } : {}) });
+    stubTop = input.required({ ...(ngDevMode ? { debugName: "stubTop" } : {}) });
+    stubMiddle = input.required({ ...(ngDevMode ? { debugName: "stubMiddle" } : {}) });
+    stubBottom = input.required({ ...(ngDevMode ? { debugName: "stubBottom" } : {}) });
+    cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalTicket, isStandalone: true, selector: "dd-card-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, flashLabel: { classPropertyName: "flashLabel", publicName: "flashLabel", isSignal: true, isRequired: true, transformFunction: null }, stubTop: { classPropertyName: "stubTop", publicName: "stubTop", isSignal: true, isRequired: true, transformFunction: null }, stubMiddle: { classPropertyName: "stubMiddle", publicName: "stubMiddle", isSignal: true, isRequired: true, transformFunction: null }, stubBottom: { classPropertyName: "stubBottom", publicName: "stubBottom", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-ticket\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-ticket__body\">\n    <div class=\"dd-card-neo-ticket__flash\" aria-hidden=\"true\">{{ flashLabel() }}</div>\n    <div class=\"dd-card-neo-ticket__content\">\n      <ng-content />\n    </div>\n  </div>\n\n  <div class=\"dd-card-neo-ticket__stub\" aria-hidden=\"true\">\n    <span>{{ stubTop() }}</span>\n    <span>{{ stubMiddle() }}</span>\n    <span>{{ stubBottom() }}</span>\n  </div>\n</article>\n", styles: [".dd-card-neo-ticket{display:grid;grid-template-columns:minmax(0,1fr) 92px;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-ticket__body{position:relative;padding:24px 26px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 22%,transparent) 0 18%,transparent 18% 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-neo-card-border) 8%,transparent) 14px 16px),var(--dd-neo-card-panel)}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{content:\"\";position:absolute;right:-16px;width:28px;height:28px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface)}.dd-card-neo-ticket__body:before{top:18px}.dd-card-neo-ticket__body:after{bottom:18px}.dd-card-neo-ticket__flash{position:absolute;top:16px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px 5px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-6deg)}.dd-card-neo-ticket__content{padding-top:34px;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-ticket__content :first-child{margin-top:0}.dd-card-neo-ticket__content :last-child{margin-bottom:0}.dd-card-neo-ticket__stub{display:grid;align-content:center;justify-items:center;gap:10px;padding:18px 10px;border-left:4px dashed var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-ticket__stub span{font-size:12px;font-weight:1000;letter-spacing:.18em;line-height:1;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}@media(max-width:640px){.dd-card-neo-ticket{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-ticket__body{padding:22px 22px 20px}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{right:auto;left:24px;width:24px;height:24px}.dd-card-neo-ticket__body:before{top:auto;bottom:-16px}.dd-card-neo-ticket__body:after{left:auto;right:24px;bottom:-16px}.dd-card-neo-ticket__stub{grid-template-columns:repeat(3,1fr);align-items:center;gap:0;padding:14px 12px;border-left:0;border-top:4px dashed var(--dd-neo-card-border)}.dd-card-neo-ticket__stub span{writing-mode:horizontal-tb;transform:none;text-align:center}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalTicket, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-card-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-ticket\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-ticket__body\">\n    <div class=\"dd-card-neo-ticket__flash\" aria-hidden=\"true\">{{ flashLabel() }}</div>\n    <div class=\"dd-card-neo-ticket__content\">\n      <ng-content />\n    </div>\n  </div>\n\n  <div class=\"dd-card-neo-ticket__stub\" aria-hidden=\"true\">\n    <span>{{ stubTop() }}</span>\n    <span>{{ stubMiddle() }}</span>\n    <span>{{ stubBottom() }}</span>\n  </div>\n</article>\n", styles: [".dd-card-neo-ticket{display:grid;grid-template-columns:minmax(0,1fr) 92px;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-ticket__body{position:relative;padding:24px 26px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 22%,transparent) 0 18%,transparent 18% 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-neo-card-border) 8%,transparent) 14px 16px),var(--dd-neo-card-panel)}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{content:\"\";position:absolute;right:-16px;width:28px;height:28px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface)}.dd-card-neo-ticket__body:before{top:18px}.dd-card-neo-ticket__body:after{bottom:18px}.dd-card-neo-ticket__flash{position:absolute;top:16px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px 5px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-6deg)}.dd-card-neo-ticket__content{padding-top:34px;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-ticket__content :first-child{margin-top:0}.dd-card-neo-ticket__content :last-child{margin-bottom:0}.dd-card-neo-ticket__stub{display:grid;align-content:center;justify-items:center;gap:10px;padding:18px 10px;border-left:4px dashed var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-ticket__stub span{font-size:12px;font-weight:1000;letter-spacing:.18em;line-height:1;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}@media(max-width:640px){.dd-card-neo-ticket{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-ticket__body{padding:22px 22px 20px}.dd-card-neo-ticket__body:before,.dd-card-neo-ticket__body:after{right:auto;left:24px;width:24px;height:24px}.dd-card-neo-ticket__body:before{top:auto;bottom:-16px}.dd-card-neo-ticket__body:after{left:auto;right:24px;bottom:-16px}.dd-card-neo-ticket__stub{grid-template-columns:repeat(3,1fr);align-items:center;gap:0;padding:14px 12px;border-left:0;border-top:4px dashed var(--dd-neo-card-border)}.dd-card-neo-ticket__stub span{writing-mode:horizontal-tb;transform:none;text-align:center}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], flashLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "flashLabel", required: true }] }], stubTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubTop", required: true }] }], stubMiddle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubMiddle", required: true }] }], stubBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "stubBottom", required: true }] }] } });
+
+class DuckDevCardOutline {
+    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    cardStyle = computed(() => {
+        const color = this.color();
+        let accent = 'var(--dd-base-accent-blue)';
+        let border = 'color-mix(in srgb, var(--dd-base-300) 78%, transparent)';
+        let background = 'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-0) 96%, var(--dd-base-100)) 0%, var(--dd-base-0) 100%)';
+        let panel = 'color-mix(in srgb, var(--dd-base-0) 94%, var(--dd-base-100))';
+        let text = 'var(--dd-base-400)';
+        let title = 'var(--dd-base-600)';
+        let shadow = '0 28px 56px -42px color-mix(in srgb, var(--dd-base-600) 22%, transparent)';
+        switch (color) {
+            case AccentEnumColor.Violet:
+                accent = 'var(--dd-base-secondary)';
+                border = 'color-mix(in srgb, var(--dd-base-secondary) 22%, transparent)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-secondary) 8%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+                panel = 'color-mix(in srgb, var(--dd-base-secondary) 4%, var(--dd-base-0))';
+                shadow = '0 28px 56px -42px color-mix(in srgb, var(--dd-base-secondary) 26%, transparent)';
+                break;
+            case AccentEnumColor.Orange:
+                accent = 'var(--dd-base-accent-orange)';
+                border = 'color-mix(in srgb, var(--dd-base-accent-orange) 22%, transparent)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-accent-orange) 10%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+                panel = 'color-mix(in srgb, var(--dd-base-accent-orange) 5%, var(--dd-base-0))';
+                shadow =
+                    '0 28px 56px -42px color-mix(in srgb, var(--dd-base-accent-orange) 28%, transparent)';
+                break;
+            case AccentEnumColor.Gray:
+                accent = 'var(--dd-base-500)';
+                border = 'color-mix(in srgb, var(--dd-base-400) 28%, transparent)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-100) 88%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+                panel = 'color-mix(in srgb, var(--dd-base-100) 84%, var(--dd-base-0))';
+                break;
+            case AccentEnumColor.Dark:
+                accent = 'var(--dd-base-0)';
+                border = 'color-mix(in srgb, var(--dd-base-200) 18%, transparent)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-600) 94%, black) 0%, var(--dd-base-600) 100%)';
+                panel = 'color-mix(in srgb, var(--dd-base-500) 90%, black)';
+                text = 'var(--dd-base-200)';
+                title = 'var(--dd-base-0)';
+                shadow = '0 32px 72px -46px color-mix(in srgb, black 52%, transparent)';
+                break;
+            case AccentEnumColor.White:
+                accent = 'var(--dd-base-accent-blue)';
+                break;
+        }
+        return {
+            '--dd-card-outline-accent': accent,
+            '--dd-card-outline-border': border,
+            '--dd-card-outline-background': background,
+            '--dd-card-outline-panel': panel,
+            '--dd-card-outline-text': text,
+            '--dd-card-outline-title': title,
+            '--dd-card-outline-shadow': shadow,
+        };
+    }, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardOutline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardOutline, isStandalone: true, selector: "dd-card-outline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-outline\" [ngStyle]=\"cardStyle()\">\n  <span class=\"dd-card-outline__frame\" aria-hidden=\"true\"></span>\n  <div class=\"dd-card-outline__surface\">\n    <div class=\"dd-card-outline__eyebrow\"></div>\n    <div class=\"dd-card-outline__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-outline{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border-radius:26px;border:1px solid var(--dd-card-outline-border);background:var(--dd-card-outline-background);box-shadow:var(--dd-card-outline-shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.dd-card-outline:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dd-card-outline-accent) 28%,transparent)}.dd-card-outline__frame{position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--dd-card-outline-accent) 18%,transparent);border-radius:18px;opacity:.9;pointer-events:none}.dd-card-outline__surface{position:relative;display:grid;gap:16px;min-width:0;padding:24px;border-radius:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-outline-panel) 98%,var(--dd-base-0)) 0%,var(--dd-card-outline-panel) 100%)}.dd-card-outline__eyebrow{width:72px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--dd-card-outline-accent) 0%,color-mix(in srgb,var(--dd-card-outline-accent) 16%,transparent) 100%);box-shadow:0 0 0 8px color-mix(in srgb,var(--dd-card-outline-accent) 8%,transparent)}.dd-card-outline__content{min-width:0;max-width:100%;color:var(--dd-card-outline-text);line-height:1.68;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-outline__content>:first-child{margin-top:0}.dd-card-outline__content>:last-child{margin-bottom:0}.dd-card-outline h3,.dd-card-outline h4,.dd-card-outline strong{color:var(--dd-card-outline-title);letter-spacing:-.03em}.dd-card-outline h3,.dd-card-outline h4{margin:0 0 10px;font-size:20px;line-height:1.15;text-wrap:balance}.dd-card-outline small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-outline-accent) 76%,var(--dd-card-outline-text));font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow-wrap:anywhere}.dd-card-outline p,.dd-card-outline span,.dd-card-outline div,.dd-card-outline a{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}.dd-card-outline a{text-decoration-color:color-mix(in srgb,var(--dd-card-outline-accent) 42%,transparent);text-underline-offset:.18em}@media(max-width:640px){.dd-card-outline{border-radius:22px}.dd-card-outline__frame{inset:10px;border-radius:14px}.dd-card-outline__surface{padding:18px;border-radius:21px}.dd-card-outline__eyebrow{width:56px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardOutline, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-card-outline', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-outline\" [ngStyle]=\"cardStyle()\">\n  <span class=\"dd-card-outline__frame\" aria-hidden=\"true\"></span>\n  <div class=\"dd-card-outline__surface\">\n    <div class=\"dd-card-outline__eyebrow\"></div>\n    <div class=\"dd-card-outline__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-outline{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:1px;border-radius:26px;border:1px solid var(--dd-card-outline-border);background:var(--dd-card-outline-background);box-shadow:var(--dd-card-outline-shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.dd-card-outline:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dd-card-outline-accent) 28%,transparent)}.dd-card-outline__frame{position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--dd-card-outline-accent) 18%,transparent);border-radius:18px;opacity:.9;pointer-events:none}.dd-card-outline__surface{position:relative;display:grid;gap:16px;min-width:0;padding:24px;border-radius:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-card-outline-panel) 98%,var(--dd-base-0)) 0%,var(--dd-card-outline-panel) 100%)}.dd-card-outline__eyebrow{width:72px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--dd-card-outline-accent) 0%,color-mix(in srgb,var(--dd-card-outline-accent) 16%,transparent) 100%);box-shadow:0 0 0 8px color-mix(in srgb,var(--dd-card-outline-accent) 8%,transparent)}.dd-card-outline__content{min-width:0;max-width:100%;color:var(--dd-card-outline-text);line-height:1.68;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-outline__content>:first-child{margin-top:0}.dd-card-outline__content>:last-child{margin-bottom:0}.dd-card-outline h3,.dd-card-outline h4,.dd-card-outline strong{color:var(--dd-card-outline-title);letter-spacing:-.03em}.dd-card-outline h3,.dd-card-outline h4{margin:0 0 10px;font-size:20px;line-height:1.15;text-wrap:balance}.dd-card-outline small{display:inline-block;margin-bottom:10px;color:color-mix(in srgb,var(--dd-card-outline-accent) 76%,var(--dd-card-outline-text));font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow-wrap:anywhere}.dd-card-outline p,.dd-card-outline span,.dd-card-outline div,.dd-card-outline a{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}.dd-card-outline a{text-decoration-color:color-mix(in srgb,var(--dd-card-outline-accent) 42%,transparent);text-underline-offset:.18em}@media(max-width:640px){.dd-card-outline{border-radius:22px}.dd-card-outline__frame{inset:10px;border-radius:14px}.dd-card-outline__surface{padding:18px;border-radius:21px}.dd-card-outline__eyebrow{width:56px}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class DuckDevCardSignal {
+    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    cardStyle = computed(() => {
+        const color = this.color();
+        let accent = 'var(--dd-base-accent-blue)';
+        let border = 'color-mix(in srgb, var(--dd-base-300) 76%, transparent)';
+        let background = 'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-100) 76%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+        let mesh = 'linear-gradient(135deg, color-mix(in srgb, var(--dd-base-accent-blue) 10%, transparent) 0%, transparent 58%)';
+        let title = 'var(--dd-base-600)';
+        let text = 'var(--dd-base-400)';
+        let shadow = '0 26px 54px -40px color-mix(in srgb, var(--dd-base-600) 20%, transparent)';
+        switch (color) {
+            case AccentEnumColor.Violet:
+                accent = 'var(--dd-base-secondary)';
+                border = 'color-mix(in srgb, var(--dd-base-secondary) 22%, transparent)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-secondary) 9%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+                mesh =
+                    'linear-gradient(135deg, color-mix(in srgb, var(--dd-base-secondary) 14%, transparent) 0%, transparent 58%)';
+                shadow = '0 28px 58px -42px color-mix(in srgb, var(--dd-base-secondary) 26%, transparent)';
+                break;
+            case AccentEnumColor.Orange:
+                accent = 'var(--dd-base-accent-orange)';
+                border = 'color-mix(in srgb, var(--dd-base-accent-orange) 22%, transparent)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-accent-orange) 10%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+                mesh =
+                    'linear-gradient(135deg, color-mix(in srgb, var(--dd-base-accent-orange) 16%, transparent) 0%, transparent 58%)';
+                shadow =
+                    '0 28px 58px -42px color-mix(in srgb, var(--dd-base-accent-orange) 28%, transparent)';
+                break;
+            case AccentEnumColor.Gray:
+                accent = 'var(--dd-base-500)';
+                border = 'color-mix(in srgb, var(--dd-base-400) 28%, transparent)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-100) 90%, var(--dd-base-0)) 0%, var(--dd-base-0) 100%)';
+                mesh =
+                    'linear-gradient(135deg, color-mix(in srgb, var(--dd-base-400) 12%, transparent) 0%, transparent 58%)';
+                break;
+            case AccentEnumColor.Dark:
+                accent = 'var(--dd-base-0)';
+                border = 'color-mix(in srgb, var(--dd-base-200) 18%, transparent)';
+                background =
+                    'linear-gradient(180deg, color-mix(in srgb, var(--dd-base-600) 94%, black) 0%, var(--dd-base-600) 100%)';
+                mesh =
+                    'linear-gradient(135deg, color-mix(in srgb, var(--dd-base-0) 9%, transparent) 0%, transparent 58%)';
+                title = 'var(--dd-base-0)';
+                text = 'var(--dd-base-200)';
+                shadow = '0 32px 70px -44px color-mix(in srgb, black 54%, transparent)';
+                break;
+            case AccentEnumColor.White:
+                accent = 'var(--dd-base-accent-blue)';
+                break;
+        }
+        return {
+            '--dd-card-signal-accent': accent,
+            '--dd-card-signal-border': border,
+            '--dd-card-signal-background': background,
+            '--dd-card-signal-mesh': mesh,
+            '--dd-card-signal-title': title,
+            '--dd-card-signal-text': text,
+            '--dd-card-signal-shadow': shadow,
+        };
+    }, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardSignal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardSignal, isStandalone: true, selector: "dd-card-signal", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-signal\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-signal__topline\" aria-hidden=\"true\"></div>\n  <div class=\"dd-card-signal__grid\" aria-hidden=\"true\"></div>\n  <div class=\"dd-card-signal__content\">\n    <ng-content />\n  </div>\n</article>\n", styles: [".dd-card-signal{position:relative;isolation:isolate;min-width:0;overflow:hidden;display:grid;gap:18px;padding:22px;border-radius:24px;border:1px solid var(--dd-card-signal-border);background:var(--dd-card-signal-background);box-shadow:var(--dd-card-signal-shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.dd-card-signal:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dd-card-signal-accent) 26%,transparent)}.dd-card-signal:before{content:\"\";position:absolute;inset:0;background:var(--dd-card-signal-mesh);pointer-events:none;z-index:0}.dd-card-signal__topline{position:relative;z-index:1;width:min(112px,40%);height:3px;border-radius:999px;background:linear-gradient(90deg,var(--dd-card-signal-accent) 0%,color-mix(in srgb,var(--dd-card-signal-accent) 14%,transparent) 100%);box-shadow:0 0 0 10px color-mix(in srgb,var(--dd-card-signal-accent) 6%,transparent)}.dd-card-signal__grid{position:absolute;inset:0;background-image:linear-gradient(90deg,color-mix(in srgb,var(--dd-card-signal-accent) 7%,transparent) 1px,transparent 1px),linear-gradient(180deg,color-mix(in srgb,var(--dd-card-signal-accent) 7%,transparent) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3),transparent 72%);mask-image:linear-gradient(180deg,rgba(0,0,0,.3),transparent 72%);pointer-events:none;z-index:0}.dd-card-signal__content{position:relative;z-index:1;min-width:0;max-width:100%;color:var(--dd-card-signal-text);line-height:1.68;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-signal__content>:first-child{margin-top:0}.dd-card-signal__content>:last-child{margin-bottom:0}.dd-card-signal h3,.dd-card-signal h4,.dd-card-signal strong{color:var(--dd-card-signal-title);letter-spacing:-.03em}.dd-card-signal h3,.dd-card-signal h4{margin:0 0 10px;font-size:19px;line-height:1.16;text-wrap:balance}.dd-card-signal small{display:inline-block;margin-bottom:8px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--dd-card-signal-accent) 10%,transparent);color:color-mix(in srgb,var(--dd-card-signal-accent) 78%,var(--dd-card-signal-text));font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;overflow-wrap:anywhere}.dd-card-signal p,.dd-card-signal span,.dd-card-signal div,.dd-card-signal a{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}.dd-card-signal a{text-decoration-color:color-mix(in srgb,var(--dd-card-signal-accent) 42%,transparent);text-underline-offset:.18em}@media(max-width:640px){.dd-card-signal{gap:14px;padding:18px;border-radius:20px}.dd-card-signal__grid{background-size:22px 22px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardSignal, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-card-signal', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-signal\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-signal__topline\" aria-hidden=\"true\"></div>\n  <div class=\"dd-card-signal__grid\" aria-hidden=\"true\"></div>\n  <div class=\"dd-card-signal__content\">\n    <ng-content />\n  </div>\n</article>\n", styles: [".dd-card-signal{position:relative;isolation:isolate;min-width:0;overflow:hidden;display:grid;gap:18px;padding:22px;border-radius:24px;border:1px solid var(--dd-card-signal-border);background:var(--dd-card-signal-background);box-shadow:var(--dd-card-signal-shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}.dd-card-signal:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--dd-card-signal-accent) 26%,transparent)}.dd-card-signal:before{content:\"\";position:absolute;inset:0;background:var(--dd-card-signal-mesh);pointer-events:none;z-index:0}.dd-card-signal__topline{position:relative;z-index:1;width:min(112px,40%);height:3px;border-radius:999px;background:linear-gradient(90deg,var(--dd-card-signal-accent) 0%,color-mix(in srgb,var(--dd-card-signal-accent) 14%,transparent) 100%);box-shadow:0 0 0 10px color-mix(in srgb,var(--dd-card-signal-accent) 6%,transparent)}.dd-card-signal__grid{position:absolute;inset:0;background-image:linear-gradient(90deg,color-mix(in srgb,var(--dd-card-signal-accent) 7%,transparent) 1px,transparent 1px),linear-gradient(180deg,color-mix(in srgb,var(--dd-card-signal-accent) 7%,transparent) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3),transparent 72%);mask-image:linear-gradient(180deg,rgba(0,0,0,.3),transparent 72%);pointer-events:none;z-index:0}.dd-card-signal__content{position:relative;z-index:1;min-width:0;max-width:100%;color:var(--dd-card-signal-text);line-height:1.68;overflow-wrap:anywhere;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.dd-card-signal__content>:first-child{margin-top:0}.dd-card-signal__content>:last-child{margin-bottom:0}.dd-card-signal h3,.dd-card-signal h4,.dd-card-signal strong{color:var(--dd-card-signal-title);letter-spacing:-.03em}.dd-card-signal h3,.dd-card-signal h4{margin:0 0 10px;font-size:19px;line-height:1.16;text-wrap:balance}.dd-card-signal small{display:inline-block;margin-bottom:8px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--dd-card-signal-accent) 10%,transparent);color:color-mix(in srgb,var(--dd-card-signal-accent) 78%,var(--dd-card-signal-text));font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;overflow-wrap:anywhere}.dd-card-signal p,.dd-card-signal span,.dd-card-signal div,.dd-card-signal a{max-width:100%;color:inherit;overflow-wrap:anywhere;word-break:break-word}.dd-card-signal a{text-decoration-color:color-mix(in srgb,var(--dd-card-signal-accent) 42%,transparent);text-underline-offset:.18em}@media(max-width:640px){.dd-card-signal{gap:14px;padding:18px;border-radius:20px}.dd-card-signal__grid{background-size:22px 22px}}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
 class TabsBlock {
+    t = inject(TranslocoService);
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    neoHorizontalTabs = [
+        { id: 'rush', label: 'Rush lane' },
+        { id: 'drop', label: 'Drop room' },
+        { id: 'review', label: 'Review desk' },
+    ];
+    neoVerticalTabs = [
+        { id: 'pulse', label: 'Pulse' },
+        { id: 'stack', label: 'Stack' },
+        { id: 'blast', label: 'Blast' },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
+    activeHorizontalTab = signal(this.neoHorizontalTabs[0], { ...(ngDevMode ? { debugName: "activeHorizontalTab" } : {}) });
+    activeVerticalTab = signal(this.neoVerticalTabs[0], { ...(ngDevMode ? { debugName: "activeVerticalTab" } : {}) });
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
+    onHorizontalTabChange(tab) {
+        this.activeHorizontalTab.set(tab);
+    }
+    onVerticalTabChange(tab) {
+        this.activeVerticalTab.set(tab);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n  <!-- Duck Dev Tab -->\n  <dd-card-section>\n    <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'tabsComponent.tab.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n      <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n      <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n      <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n          {{ 'tabsComponent.tab.inputTabs' | transloco }}\n          <ul>\n            <li>\n              <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n            </li>\n            <li>\n              <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n            </li>\n            <li>\n              <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n              {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"outputs-block\">\n      <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n      <ul>\n        <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"features-block\">\n      <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n      <ul>\n        <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"api-block\">\n      <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n      <ul>\n        <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n        <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n        <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n      <ul>\n        <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n      </ul>\n    </div>\n  </dd-card-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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@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}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n        <p class=\"description\">\n          {{ 'tabsComponent.tab.description' | transloco }}\n        </p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n          <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n          <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n          <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n          <ul>\n            <li>\n              <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n              {{ 'tabsComponent.tab.inputTabs' | transloco }}\n              <ul>\n                <li>\n                  <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n                </li>\n                <li>\n                  <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n                </li>\n                <li>\n                  <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n                  {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"outputs-block\">\n          <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n          <ul>\n            <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n          </ul>\n        </div>\n\n        <div class=\"features-block\">\n          <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n          <ul>\n            <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n          </ul>\n        </div>\n\n        <div class=\"api-block\">\n          <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n          <ul>\n            <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n            <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n            <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n          </ul>\n        </div>\n\n        <div class=\"implementation-block\">\n          <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n          <ul>\n            <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n          </ul>\n        </div>\n      } @else {\n        <h2>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h2>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'tabsComponent.neobrutal.usage' | transloco }}</h3>\n          <p>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n          <p>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h3>\n\n          <div class=\"example-shell\">\n            <p class=\"example-label\">{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n            <div class=\"neo-demo-tabs\">\n              <div class=\"neo-demo-tabs__header\">\n                <button\n                  *ngFor=\"let tab of neoHorizontalTabs; let i = index\"\n                  class=\"neo-demo-tab-button\"\n                  [class.active]=\"activeHorizontalTab().id === tab.id\"\n                  (click)=\"onHorizontalTabChange(tab)\"\n                  type=\"button\"\n                >\n                  <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n                  <span>{{ tab.label }}</span>\n                </button>\n              </div>\n\n              <div class=\"neo-demo-tabs__content\">\n                <article *ngIf=\"activeHorizontalTab().id === 'rush'\" class=\"neo-panel\">\n                  <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n                </article>\n                <article *ngIf=\"activeHorizontalTab().id === 'drop'\" class=\"neo-panel neo-panel-alt\">\n                  <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n                </article>\n                <article *ngIf=\"activeHorizontalTab().id === 'review'\" class=\"neo-panel neo-panel-dark\">\n                  <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n                </article>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"example-shell\">\n            <p class=\"example-label\">{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                <button\n                  *ngFor=\"let tab of neoVerticalTabs; let i = index\"\n                  class=\"neo-demo-vertical-button\"\n                  [class.active]=\"activeVerticalTab().id === tab.id\"\n                  (click)=\"onVerticalTabChange(tab)\"\n                  type=\"button\"\n                >\n                  <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n                  <span>{{ tab.label }}</span>\n                </button>\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                <article *ngIf=\"activeVerticalTab().id === 'pulse'\" class=\"neo-story\">\n                  <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n                </article>\n                <article *ngIf=\"activeVerticalTab().id === 'stack'\" class=\"neo-story neo-story-alt\">\n                  <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n                </article>\n                <article *ngIf=\"activeVerticalTab().id === 'blast'\" class=\"neo-story neo-story-dark\">\n                  <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n                </article>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .examples-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .examples-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .examples-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .examples-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .examples-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .examples-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .examples-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.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 .examples-block .example-shell{margin-bottom:24px;padding:24px;border:3px solid var(--dd-base-600);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.demo-container .component-section .examples-block .example-label{margin:0 0 18px;color:var(--dd-base-600);font-size:.92rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-content-grid,.neo-story{min-height:180px}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-base-600);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical-icon{display:flex;width:20px;height:20px;flex-shrink:0}.neo-demo-vertical-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-base-600);border-radius:22px;background:var(--dd-base-0)}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@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-shell{padding:18px}.neo-demo-vertical{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tabs-block', imports: [TranslocoPipe, DuckDevCardSection], template: "<div class=\"demo-container\">\n  <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n  <!-- Duck Dev Tab -->\n  <dd-card-section>\n    <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'tabsComponent.tab.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n      <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n      <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n      <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n          {{ 'tabsComponent.tab.inputTabs' | transloco }}\n          <ul>\n            <li>\n              <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n            </li>\n            <li>\n              <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n            </li>\n            <li>\n              <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n              {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n            </li>\n          </ul>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"outputs-block\">\n      <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n      <ul>\n        <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"features-block\">\n      <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n      <ul>\n        <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"api-block\">\n      <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n      <ul>\n        <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n        <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n        <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n      <ul>\n        <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n        <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n      </ul>\n    </div>\n  </dd-card-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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}@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}}\n"] }]
+            args: [{ selector: 'app-tabs-block', imports: [CommonModule, TranslocoPipe, DuckDevCardSection, DuckDevTab], template: "<div class=\"demo-container\">\n  <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n        <p class=\"description\">\n          {{ 'tabsComponent.tab.description' | transloco }}\n        </p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'tabsComponent.tab.usage' | transloco }}</h3>\n          <p>{{ 'tabsComponent.tab.usageText1' | transloco }}</p>\n          <p>{{ 'tabsComponent.tab.usageText2' | transloco }}</p>\n          <p>{{ 'tabsComponent.tab.usageText3' | transloco }}</p>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tabsComponent.tab.inputs' | transloco }}</h3>\n          <ul>\n            <li>\n              <strong>tabs</strong> ({{ 'tabsComponent.tab.required' | transloco }}) -\n              {{ 'tabsComponent.tab.inputTabs' | transloco }}\n              <ul>\n                <li>\n                  <strong>id</strong> (string) - {{ 'tabsComponent.tab.inputTabsId' | transloco }}\n                </li>\n                <li>\n                  <strong>label</strong> (string) - {{ 'tabsComponent.tab.inputTabsLabel' | transloco }}\n                </li>\n                <li>\n                  <strong>content</strong> (any, {{ 'tabsComponent.tab.optional' | transloco }}) -\n                  {{ 'tabsComponent.tab.inputTabsContent' | transloco }}\n                </li>\n              </ul>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"outputs-block\">\n          <h3>{{ 'tabsComponent.tab.outputs' | transloco }}</h3>\n          <ul>\n            <li><strong>tabChange</strong> - {{ 'tabsComponent.tab.outputTabChange' | transloco }}</li>\n          </ul>\n        </div>\n\n        <div class=\"features-block\">\n          <h3>{{ 'tabsComponent.tab.features' | transloco }}</h3>\n          <ul>\n            <li>{{ 'tabsComponent.tab.feature1' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature2' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature3' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature4' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature5' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature6' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.feature7' | transloco }}</li>\n          </ul>\n        </div>\n\n        <div class=\"api-block\">\n          <h3>{{ 'tabsComponent.tab.api' | transloco }}</h3>\n          <ul>\n            <li><strong>id: string</strong> - {{ 'tabsComponent.tab.apiId' | transloco }}</li>\n            <li><strong>label: string</strong> - {{ 'tabsComponent.tab.apiLabel' | transloco }}</li>\n            <li><strong>content?: any</strong> - {{ 'tabsComponent.tab.apiContent' | transloco }}</li>\n          </ul>\n        </div>\n\n        <div class=\"implementation-block\">\n          <h3>{{ 'tabsComponent.tab.implementation' | transloco }}</h3>\n          <ul>\n            <li>{{ 'tabsComponent.tab.implementation1' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.implementation2' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.implementation3' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.implementation4' | transloco }}</li>\n            <li>{{ 'tabsComponent.tab.implementation5' | transloco }}</li>\n          </ul>\n        </div>\n      } @else {\n        <h2>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h2>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'tabsComponent.neobrutal.usage' | transloco }}</h3>\n          <p>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n          <p>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tabsComponent.neobrutal.examples' | transloco }}</h3>\n\n          <div class=\"example-shell\">\n            <p class=\"example-label\">{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</p>\n            <div class=\"neo-demo-tabs\">\n              <div class=\"neo-demo-tabs__header\">\n                <button\n                  *ngFor=\"let tab of neoHorizontalTabs; let i = index\"\n                  class=\"neo-demo-tab-button\"\n                  [class.active]=\"activeHorizontalTab().id === tab.id\"\n                  (click)=\"onHorizontalTabChange(tab)\"\n                  type=\"button\"\n                >\n                  <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n                  <span>{{ tab.label }}</span>\n                </button>\n              </div>\n\n              <div class=\"neo-demo-tabs__content\">\n                <article *ngIf=\"activeHorizontalTab().id === 'rush'\" class=\"neo-panel\">\n                  <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerRush' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n                </article>\n                <article *ngIf=\"activeHorizontalTab().id === 'drop'\" class=\"neo-panel neo-panel-alt\">\n                  <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerDrop' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n                </article>\n                <article *ngIf=\"activeHorizontalTab().id === 'review'\" class=\"neo-panel neo-panel-dark\">\n                  <span class=\"neo-kicker\">{{ 'tabsComponent.neobrutal.kickerReview' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n                </article>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"example-shell\">\n            <p class=\"example-label\">{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</p>\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                <button\n                  *ngFor=\"let tab of neoVerticalTabs; let i = index\"\n                  class=\"neo-demo-vertical-button\"\n                  [class.active]=\"activeVerticalTab().id === tab.id\"\n                  (click)=\"onVerticalTabChange(tab)\"\n                  type=\"button\"\n                >\n                  <span class=\"neo-demo-tab-number\">{{ i + 1 < 10 ? '0' + (i + 1) : i + 1 }}</span>\n                  <span>{{ tab.label }}</span>\n                </button>\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                <article *ngIf=\"activeVerticalTab().id === 'pulse'\" class=\"neo-story\">\n                  <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyPulseChip' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n                </article>\n                <article *ngIf=\"activeVerticalTab().id === 'stack'\" class=\"neo-story neo-story-alt\">\n                  <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyStackChip' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n                </article>\n                <article *ngIf=\"activeVerticalTab().id === 'blast'\" class=\"neo-story neo-story-dark\">\n                  <span class=\"neo-chip\">{{ 'tabsComponent.neobrutal.storyBlastChip' | transloco }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n                </article>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .examples-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .examples-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .examples-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .examples-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .examples-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .examples-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .examples-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.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 .examples-block .example-shell{margin-bottom:24px;padding:24px;border:3px solid var(--dd-base-600);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.demo-container .component-section .examples-block .example-label{margin:0 0 18px;color:var(--dd-base-600);font-size:.92rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-content-grid,.neo-story{min-height:180px}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-base-600);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-base-600);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical-icon{display:flex;width:20px;height:20px;flex-shrink:0}.neo-demo-vertical-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-base-600);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-base-600);border-radius:22px;background:var(--dd-base-0)}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@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-shell{padding:18px}.neo-demo-vertical{grid-template-columns:1fr}}\n"] }]
         }] });
 
 const duckDevDockMedium = `
@@ -2000,15 +2507,97 @@ class DuckDevInput {
     placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
     type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
     formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
+    options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
     errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
-    mask = input(null, { ...(ngDevMode ? { debugName: "mask" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let inputMask = mask();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n  {{ label() }}\n</label>\n\n<div\n  class=\"form-field\"\n  [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"checkbox-wrapper\">\n        <input\n          class=\"inp-cbx\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"cbx\" [for]=\"control\">\n          <span>\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"form-input form-input_textarea\"\n        [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n        [maskito]=\"inputMask\"\n      ></textarea>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"form-input\"\n        [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n        [maskito]=\"inputMask\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"error-message\">\n      {{ erMessage }}\n    </div>\n  }\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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n  {{ label() }}\n</label>\n\n<div\n  class=\"form-field\"\n  [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"checkbox-wrapper\">\n        <input\n          class=\"inp-cbx\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"cbx\" [for]=\"control\">\n          <span>\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"form-input form-input_textarea\"\n        [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"select-wrapper\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"form-input form-input_select\"\n          [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n              {{ option.label }}\n            </option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"form-input\"\n        [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"error-message\">\n      {{ erMessage }}\n    </div>\n  }\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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;min-height:132px;resize:none;border-radius:24px}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.select-wrapper{position:relative}.select-wrapper:after{content:\"\";position:absolute;top:50%;right:20px;width:10px;height:10px;border-right:2px solid var(--dd-base-400);border-bottom:2px solid var(--dd-base-400);transform:translateY(-65%) rotate(45deg);pointer-events:none}.form-input_select{appearance:none;padding-right:52px;cursor:pointer}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-inout-field{padding-bottom:24px}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px;color:var(--dd-base-500);line-height:1.45}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}@media(max-width:768px){.form-input,.form-input_textarea{border-radius:18px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-input', imports: [ReactiveFormsModule, MaskitoDirective], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let inputMask = mask();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n  {{ label() }}\n</label>\n\n<div\n  class=\"form-field\"\n  [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"checkbox-wrapper\">\n        <input\n          class=\"inp-cbx\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"cbx\" [for]=\"control\">\n          <span>\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"form-input form-input_textarea\"\n        [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n        [maskito]=\"inputMask\"\n      ></textarea>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"form-input\"\n        [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n        [maskito]=\"inputMask\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"error-message\">\n      {{ erMessage }}\n    </div>\n  }\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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"] }]
-        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }] } });
+            args: [{ selector: 'duck-dev-input', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n  {{ label() }}\n</label>\n\n<div\n  class=\"form-field\"\n  [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"checkbox-wrapper\">\n        <input\n          class=\"inp-cbx\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"cbx\" [for]=\"control\">\n          <span>\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"form-input form-input_textarea\"\n        [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"select-wrapper\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"form-input form-input_select\"\n          [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n              {{ option.label }}\n            </option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"form-input\"\n        [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"error-message\">\n      {{ erMessage }}\n    </div>\n  }\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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;min-height:132px;resize:none;border-radius:24px}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.select-wrapper{position:relative}.select-wrapper:after{content:\"\";position:absolute;top:50%;right:20px;width:10px;height:10px;border-right:2px solid var(--dd-base-400);border-bottom:2px solid var(--dd-base-400);transform:translateY(-65%) rotate(45deg);pointer-events:none}.form-input_select{appearance:none;padding-right:52px;cursor:pointer}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-inout-field{padding-bottom:24px}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px;color:var(--dd-base-500);line-height:1.45}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}@media(max-width:768px){.form-input,.form-input_textarea{border-radius:18px}}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
+
+class DuckDevInputNeobrutalPoster {
+    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
+    controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
+    formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
+    options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
+    errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalPoster, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalPoster, isStandalone: true, selector: "duck-dev-input-neobrutal-poster", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n  <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n  <div class=\"neo-poster__field\" [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n    @switch (inputType) {\n      @case ('checkbox') {\n        <div class=\"neo-poster-check\">\n          <input class=\"neo-poster-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n          <label class=\"neo-poster-check__label\" [for]=\"control\">\n            <span class=\"neo-poster-check__box\">\n              <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n                <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n              </svg>\n            </span>\n            <span class=\"neo-poster-check__text\"><ng-content /></span>\n          </label>\n        </div>\n      }\n      @case ('textarea') {\n        <textarea\n          [id]=\"control\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input neo-poster__input_textarea\"\n          [class.neo-poster__input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n          [placeholder]=\"inputPlaceholder\"\n        ></textarea>\n      }\n      @case ('select') {\n        <div class=\"neo-poster-select\">\n          <select\n            [id]=\"controlName()\"\n            formControlName=\"{{ controlName() }}\"\n            class=\"neo-poster__input neo-poster__input_select\"\n            [class.neo-poster__input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n          >\n            @if (placeholder()) {\n              <option value=\"\" disabled>{{ placeholder() }}</option>\n            }\n            @for (option of options(); track option.value) {\n              <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n            }\n          </select>\n        </div>\n      }\n      @default {\n        <input\n          [id]=\"control\"\n          [type]=\"type()\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input\"\n          [class.neo-poster__input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n          [placeholder]=\"inputPlaceholder\"\n        />\n      }\n    }\n\n    @if (erMessage) {\n      <div class=\"neo-poster__error\">{{ erMessage }}</div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-base-0)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-base-600);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-base-600)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalPoster, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-input-neobrutal-poster', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n  <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n  <div class=\"neo-poster__field\" [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n    @switch (inputType) {\n      @case ('checkbox') {\n        <div class=\"neo-poster-check\">\n          <input class=\"neo-poster-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n          <label class=\"neo-poster-check__label\" [for]=\"control\">\n            <span class=\"neo-poster-check__box\">\n              <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n                <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n              </svg>\n            </span>\n            <span class=\"neo-poster-check__text\"><ng-content /></span>\n          </label>\n        </div>\n      }\n      @case ('textarea') {\n        <textarea\n          [id]=\"control\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input neo-poster__input_textarea\"\n          [class.neo-poster__input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n          [placeholder]=\"inputPlaceholder\"\n        ></textarea>\n      }\n      @case ('select') {\n        <div class=\"neo-poster-select\">\n          <select\n            [id]=\"controlName()\"\n            formControlName=\"{{ controlName() }}\"\n            class=\"neo-poster__input neo-poster__input_select\"\n            [class.neo-poster__input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n          >\n            @if (placeholder()) {\n              <option value=\"\" disabled>{{ placeholder() }}</option>\n            }\n            @for (option of options(); track option.value) {\n              <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n            }\n          </select>\n        </div>\n      }\n      @default {\n        <input\n          [id]=\"control\"\n          [type]=\"type()\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input\"\n          [class.neo-poster__input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n          [placeholder]=\"inputPlaceholder\"\n        />\n      }\n    }\n\n    @if (erMessage) {\n      <div class=\"neo-poster__error\">{{ erMessage }}</div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-base-0)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-base-600);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-base-600)}}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
+
+class DuckDevInputNeobrutalRadio {
+    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
+    controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    description = input('', { ...(ngDevMode ? { debugName: "description" } : {}) });
+    options = input.required({ ...(ngDevMode ? { debugName: "options" } : {}) });
+    errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n  <div class=\"neo-radio__copy\">\n    <label class=\"neo-radio__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n    }\n  </div>\n\n  <div\n    class=\"neo-radio__group\"\n    [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n    role=\"radiogroup\"\n    [attr.aria-describedby]=\"describedBy\"\n  >\n    @for (option of options(); track option.value; let index = $index) {\n      <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n        <input\n          class=\"neo-radio__input\"\n          type=\"radio\"\n          [id]=\"control + '-' + index\"\n          [value]=\"option.value\"\n          [disabled]=\"option.disabled ?? false\"\n          formControlName=\"{{ control }}\"\n        />\n        <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n        <span class=\"neo-radio__text\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n\n  @if (erMessage) {\n    <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,white);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n  <div class=\"neo-radio__copy\">\n    <label class=\"neo-radio__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n    }\n  </div>\n\n  <div\n    class=\"neo-radio__group\"\n    [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n    role=\"radiogroup\"\n    [attr.aria-describedby]=\"describedBy\"\n  >\n    @for (option of options(); track option.value; let index = $index) {\n      <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n        <input\n          class=\"neo-radio__input\"\n          type=\"radio\"\n          [id]=\"control + '-' + index\"\n          [value]=\"option.value\"\n          [disabled]=\"option.disabled ?? false\"\n          formControlName=\"{{ control }}\"\n        />\n        <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n        <span class=\"neo-radio__text\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n\n  @if (erMessage) {\n    <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-base-600);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,white);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
+
+class DuckDevInputNeobrutalSlab {
+    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
+    controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
+    formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
+    options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
+    errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n  <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-check\">\n        <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n        <label class=\"neo-check__label\" [for]=\"control\">\n          <span class=\"neo-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input neo-input_textarea\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-input neo-input_select\"\n          [class.neo-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n              {{ option.label }}\n            </option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-600);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-base-600);border-bottom:4px solid var(--dd-base-600);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-base-600))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n  <span>{{ label() }}</span>\n</label>\n\n<div class=\"neo-field neo-field_slab\" [class.neo-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-check\">\n        <input class=\"neo-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n        <label class=\"neo-check__label\" [for]=\"control\">\n          <span class=\"neo-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input neo-input_textarea\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-input neo-input_select\"\n          [class.neo-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n              {{ option.label }}\n            </option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-600);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-base-600);border-bottom:4px solid var(--dd-base-600);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-base-600))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
+
+class DuckDevInputNeobrutalStrip {
+    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
+    controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
+    formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
+    options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
+    errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n  <span>{{ label() }}</span>\n  <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div class=\"neo-strip-field\" [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-strip-check\">\n        <input class=\"neo-strip-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n        <label class=\"neo-strip-check__label\" [for]=\"control\">\n          <span class=\"neo-strip-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-strip-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input neo-strip-input_textarea\"\n        [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-strip-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-strip-input neo-strip-input_select\"\n          [class.neo-strip-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input\"\n        [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-strip-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-base-600)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-base-600);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-600)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n  <span>{{ label() }}</span>\n  <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div class=\"neo-strip-field\" [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\" [formGroup]=\"formName\">\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-strip-check\">\n        <input class=\"neo-strip-check__input\" [id]=\"control\" type=\"checkbox\" formControlName=\"{{ control }}\" />\n        <label class=\"neo-strip-check__label\" [for]=\"control\">\n          <span class=\"neo-strip-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-strip-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input neo-strip-input_textarea\"\n        [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-strip-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-strip-input neo-strip-input_select\"\n          [class.neo-strip-input_error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input\"\n        [class.neo-strip-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-strip-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-base-600)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-base-600);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-600)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
+
+class DuckDevInputNeobrutalToggle {
+    form = input.required({ ...(ngDevMode ? { debugName: "form" } : {}) });
+    controlName = input.required({ ...(ngDevMode ? { debugName: "controlName" } : {}) });
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    description = input('', { ...(ngDevMode ? { debugName: "description" } : {}) });
+    offLabel = input.required({ ...(ngDevMode ? { debugName: "offLabel" } : {}) });
+    onLabel = input.required({ ...(ngDevMode ? { debugName: "onLabel" } : {}) });
+    errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalToggle, isStandalone: true, selector: "duck-dev-input-neobrutal-toggle", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: true, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n  <div class=\"neo-toggle__copy\">\n    <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n        {{ description() }}\n      </p>\n    }\n  </div>\n\n  <label\n    class=\"neo-toggle__switch\"\n    [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n    [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n    [for]=\"control\"\n  >\n    <input\n      class=\"neo-toggle__input\"\n      [id]=\"control\"\n      type=\"checkbox\"\n      formControlName=\"{{ control }}\"\n      [attr.aria-describedby]=\"describedBy\"\n    />\n\n    <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n      <span class=\"neo-toggle__thumb\"></span>\n    </span>\n\n    <span class=\"neo-toggle__state\">\n      <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n      <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n    </span>\n  </label>\n\n  @if (erMessage) {\n    <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-base-600);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-base-0)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-input-neobrutal-toggle', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : (description() ? control + '-description' : null);\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n  <div class=\"neo-toggle__copy\">\n    <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n        {{ description() }}\n      </p>\n    }\n  </div>\n\n  <label\n    class=\"neo-toggle__switch\"\n    [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n    [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n    [for]=\"control\"\n  >\n    <input\n      class=\"neo-toggle__input\"\n      [id]=\"control\"\n      type=\"checkbox\"\n      formControlName=\"{{ control }}\"\n      [attr.aria-describedby]=\"describedBy\"\n    />\n\n    <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n      <span class=\"neo-toggle__thumb\"></span>\n    </span>\n\n    <span class=\"neo-toggle__state\">\n      <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n      <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n    </span>\n  </label>\n\n  @if (erMessage) {\n    <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-base-600);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-base-0)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: true }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
 
 class DuckDevNotificationService {
     seq = 1;
@@ -2153,75 +2742,163 @@ class DuckDevSvgBlock {
         if (p < max)
             this.page.set(p + 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, deps: [{ token: i1$1.DomSanitizer }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'svgComponent.description' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'svgComponent.descriptionText' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n      <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n      <div class=\"icons-toolbar\">\n        <duck-dev-input\n          [form]=\"searchForm\"\n          controlName=\"search\"\n          [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n          type=\"text\"\n        />\n        <div class=\"icons-stats\">\n          Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n          {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n          {{ (page() - 1) * pageSize + paginatedIcons().length }}\n          of {{ filteredIcons().length }}\n        </div>\n      </div>\n\n      @if (filteredIcons().length === 0) {\n        <p>No icons found.</p>\n      } @else {\n        <div class=\"icons-showcase\">\n          @for (icon of paginatedIcons(); track icon.id) {\n            <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n              <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n              <div class=\"icon-name\">{{ icon.name }}</div>\n              <div class=\"icon-id\">{{ icon.id }}</div>\n              <code\n                class=\"icon-tag\"\n                [title]=\"\n                  copiedId() === icon.id\n                    ? ('svgComponent.copied' | transloco)\n                    : ('svgComponent.clickToCopy' | transloco)\n                \"\n                >&lt;{{ icon.id }}&gt;</code\n              >\n              <div class=\"copy-hint\">\n                {{\n                  copiedId() === icon.id\n                    ? ('svgComponent.copied' | transloco)\n                    : ('svgComponent.clickToCopy' | transloco)\n                }}\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"pagination-controls\">\n          <duck-dev-button-flip\n            [text]=\"'Prev'\"\n            (click)=\"prevPage()\"\n            [direction]=\"'previous'\"\n          ></duck-dev-button-flip>\n          <span>Page {{ page() }} of {{ totalPages() }}</span>\n          <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n        </div>\n      }\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n      <ol>\n        <li>{{ 'svgComponent.step1' | transloco }}</li>\n        <li>{{ 'svgComponent.step2' | transloco }}</li>\n        <li>{{ 'svgComponent.step3' | transloco }}</li>\n      </ol>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage", "mask"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, deps: [{ token: i1$2.DomSanitizer }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'svgComponent.description' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'svgComponent.descriptionText' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n      <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n      <div class=\"icons-toolbar\">\n        <duck-dev-input\n          [form]=\"searchForm\"\n          controlName=\"search\"\n          [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n          type=\"text\"\n        />\n        <div class=\"icons-stats\">\n          Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n          {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n          {{ (page() - 1) * pageSize + paginatedIcons().length }}\n          of {{ filteredIcons().length }}\n        </div>\n      </div>\n\n      @if (filteredIcons().length === 0) {\n        <p>No icons found.</p>\n      } @else {\n        <div class=\"icons-showcase\">\n          @for (icon of paginatedIcons(); track icon.id) {\n            <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n              <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n              <div class=\"icon-name\">{{ icon.name }}</div>\n              <div class=\"icon-id\">{{ icon.id }}</div>\n              <code\n                class=\"icon-tag\"\n                [title]=\"\n                  copiedId() === icon.id\n                    ? ('svgComponent.copied' | transloco)\n                    : ('svgComponent.clickToCopy' | transloco)\n                \"\n                >&lt;{{ icon.id }}&gt;</code\n              >\n              <div class=\"copy-hint\">\n                {{\n                  copiedId() === icon.id\n                    ? ('svgComponent.copied' | transloco)\n                    : ('svgComponent.clickToCopy' | transloco)\n                }}\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"pagination-controls\">\n          <duck-dev-button-flip\n            [text]=\"'Prev'\"\n            (click)=\"prevPage()\"\n            [direction]=\"'previous'\"\n          ></duck-dev-button-flip>\n          <span>Page {{ page() }} of {{ totalPages() }}</span>\n          <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n        </div>\n      }\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n      <ol>\n        <li>{{ 'svgComponent.step1' | transloco }}</li>\n        <li>{{ 'svgComponent.step2' | transloco }}</li>\n        <li>{{ 'svgComponent.step3' | transloco }}</li>\n      </ol>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, decorators: [{
             type: Component,
             args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip, DuckDevCardSection], template: "<div class=\"demo-container\">\n  <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'svgComponent.description' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'svgComponent.descriptionText' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n      <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n      <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n      <div class=\"icons-toolbar\">\n        <duck-dev-input\n          [form]=\"searchForm\"\n          controlName=\"search\"\n          [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n          type=\"text\"\n        />\n        <div class=\"icons-stats\">\n          Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n          {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n          {{ (page() - 1) * pageSize + paginatedIcons().length }}\n          of {{ filteredIcons().length }}\n        </div>\n      </div>\n\n      @if (filteredIcons().length === 0) {\n        <p>No icons found.</p>\n      } @else {\n        <div class=\"icons-showcase\">\n          @for (icon of paginatedIcons(); track icon.id) {\n            <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n              <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n              <div class=\"icon-name\">{{ icon.name }}</div>\n              <div class=\"icon-id\">{{ icon.id }}</div>\n              <code\n                class=\"icon-tag\"\n                [title]=\"\n                  copiedId() === icon.id\n                    ? ('svgComponent.copied' | transloco)\n                    : ('svgComponent.clickToCopy' | transloco)\n                \"\n                >&lt;{{ icon.id }}&gt;</code\n              >\n              <div class=\"copy-hint\">\n                {{\n                  copiedId() === icon.id\n                    ? ('svgComponent.copied' | transloco)\n                    : ('svgComponent.clickToCopy' | transloco)\n                }}\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"pagination-controls\">\n          <duck-dev-button-flip\n            [text]=\"'Prev'\"\n            (click)=\"prevPage()\"\n            [direction]=\"'previous'\"\n          ></duck-dev-button-flip>\n          <span>Page {{ page() }} of {{ totalPages() }}</span>\n          <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n        </div>\n      }\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n      <ol>\n        <li>{{ 'svgComponent.step1' | transloco }}</li>\n        <li>{{ 'svgComponent.step2' | transloco }}</li>\n        <li>{{ 'svgComponent.step3' | transloco }}</li>\n      </ol>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1.FormBuilder }] });
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: i1$1.FormBuilder }] });
 
-const PLACEHOLDER = '+375 (хх) ххх-хх-хх';
-const { removePlaceholder, plugins, ...placeholderOptions } = maskitoWithPlaceholder(PLACEHOLDER);
 class InputBlock {
     fb = inject(FormBuilder);
-    form;
-    phoneMaskOptions = {
-        preprocessors: placeholderOptions.preprocessors,
-        postprocessors: [
-            maskitoPrefixPostprocessorGenerator('+375'),
-            ...placeholderOptions.postprocessors,
-        ],
-        mask: [
-            '+',
-            '3',
-            '7',
-            '5',
-            ' ',
-            '(',
-            /\d/,
-            /\d/,
-            ')',
-            ' ',
-            /\d/,
-            /\d/,
-            /\d/,
-            '-',
-            /\d/,
-            /\d/,
-            '-',
-            /\d/,
-            /\d/,
-        ],
-        plugins: [
-            ...plugins,
-            maskitoEventHandler('focus', (element) => {
-                const initialValue = element.value || '+375 (';
-                maskitoUpdateElement(element, initialValue + PLACEHOLDER.slice(initialValue.length));
-            }),
-            maskitoEventHandler('blur', (element) => {
-                const cleanValue = removePlaceholder(element.value);
-                maskitoUpdateElement(element, cleanValue === '+375' ? '' : cleanValue);
-            }),
-        ],
-    };
-    constructor() {
-        this.initForm();
-    }
-    initForm() {
-        this.form = this.fb.group({
-            name: ['', [Validators.required, Validators.minLength(2)]],
-            phone: ['', [Validators.required, Validators.pattern(/^\+?[0-9\s\-()]{10,}$/)]],
-            description: ['', [Validators.required, Validators.minLength(5)]]
-        });
+    t = inject(TranslocoService);
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    accountTypeOptions = [
+        { value: 'designer', label: 'Designer' },
+        { value: 'developer', label: 'Developer' },
+        { value: 'manager', label: 'Product Manager' },
+        { value: 'founder', label: 'Founder' },
+    ];
+    workspaceModeOptions = [
+        { value: 'focus', label: 'Focus mode' },
+        { value: 'review', label: 'Review mode' },
+        { value: 'launch', label: 'Launch mode' },
+    ];
+    textExampleForm = this.fb.group({
+        fullName: ['', [Validators.required, Validators.minLength(3)]],
+    });
+    selectExampleForm = this.fb.group({
+        role: ['', Validators.required],
+    });
+    textareaExampleForm = this.fb.group({
+        bio: [''],
+    });
+    demoForm = this.fb.group({
+        fullName: ['', [Validators.required, Validators.minLength(3)]],
+        email: ['', [Validators.required, Validators.email]],
+        role: ['', Validators.required],
+        bio: [''],
+        agreement: [false, Validators.requiredTrue],
+        launchMode: ['focus', Validators.required],
+        instantSync: [true],
+    });
+    exampleMarkup = `<form [formGroup]="profileForm" class="profile-form">
+  <duck-dev-input
+    [form]="profileForm"
+    controlName="fullName"
+    label="Full name"
+    placeholder="Jane Cooper"
+    [errorMessage]="getError('fullName')"
+  />
+
+  <duck-dev-input
+    [form]="profileForm"
+    controlName="email"
+    label="Work email"
+    type="email"
+    placeholder="jane@duckdev.dev"
+    [errorMessage]="getError('email')"
+  />
+
+  <duck-dev-input
+    [form]="profileForm"
+    controlName="role"
+    label="Role"
+    formInputType="select"
+    placeholder="Choose a role"
+    [options]="roleOptions"
+    [errorMessage]="getError('role')"
+  />
+
+  <duck-dev-input
+    [form]="profileForm"
+    controlName="bio"
+    label="Short bio"
+    formInputType="textarea"
+    placeholder="A few words about your team or project"
+  />
+
+  <duck-dev-input
+    [form]="profileForm"
+    controlName="agreement"
+    formInputType="checkbox"
+    [errorMessage]="getError('agreement')"
+  >
+    I agree to the processing of my data
+  </duck-dev-input>
+</form>`;
+    exampleLogic = `readonly roleOptions: DuckDevInputOption[] = [
+  { value: 'designer', label: 'Designer' },
+  { value: 'developer', label: 'Developer' },
+  { value: 'manager', label: 'Product Manager' },
+];
+
+readonly profileForm = this.fb.group({
+  fullName: ['', [Validators.required, Validators.minLength(3)]],
+  email: ['', [Validators.required, Validators.email]],
+  role: ['', Validators.required],
+  bio: [''],
+  agreement: [false, Validators.requiredTrue],
+});
+
+getError(controlName: string): string {
+  const control = this.profileForm.get(controlName);
+  if (!control || !control.touched || !control.invalid) {
+    return '';
+  }
+
+  if (control.hasError('required')) return 'Field is required';
+  if (control.hasError('email')) return 'Enter a valid email';
+  if (control.hasError('minlength')) return 'Minimum 3 characters';
+
+  return 'Check the field value';
+}`;
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
+    getError(controlName, form = this.demoForm) {
+        const control = form.get(controlName);
+        if (!control || !control.touched || !control.invalid) {
+            return '';
+        }
+        if (control.hasError('required')) {
+            return this.t.translate('inputComponent.demo.errors.required');
+        }
+        if (control.hasError('email')) {
+            return this.t.translate('inputComponent.demo.errors.email');
+        }
+        if (control.hasError('minlength')) {
+            return this.t.translate('inputComponent.demo.errors.minlength');
+        }
+        if (control.hasError('requiredTrue')) {
+            return this.t.translate('inputComponent.demo.errors.requiredTrue');
+        }
+        return this.t.translate('inputComponent.demo.errors.invalid');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n  <!-- Input Field Component -->\n  <dd-card-section>\n\n    <form\n      (click)=\"$event.stopPropagation()\"\n      [formGroup]=\"form\"\n      class=\"popup-form\"\n    >\n      <duck-dev-input\n        [form]=\"form\"\n        controlName=\"name\"\n        [label]=\"'NAME' | transloco\"\n        [placeholder]=\"'ENTER_NAME' | transloco\"/>\n\n      <duck-dev-input\n        #phone\n        [form]=\"form\"\n        controlName=\"phone\"\n        type=\"tel\"\n        [label]=\"'PHONE' | transloco\"\n        [placeholder]=\"'ENTER_PHONE' | transloco\"\n        [mask]=\"phoneMaskOptions\"\n      />\n\n      <duck-dev-input\n        [form]=\"form\"\n        [formInputType]=\"'textarea'\"\n        controlName=\"description\"\n        type=\"text\"\n        [label]=\"'DESCRIPTION' | transloco\"\n        [placeholder]=\"'ENTER_DESCRIPTION' | transloco\"\n      />\n    </form>\n\n\n    <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'inputComponent.inputField.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n      <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n      <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n      <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n          {{ 'inputComponent.inputField.inputForm' | transloco }}\n        </li>\n        <li>\n          <strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n          {{ 'inputComponent.inputField.inputControlName' | transloco }}\n        </li>\n        <li>\n          <strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputLabel' | transloco }}\n        </li>\n        <li>\n          <strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}\n        </li>\n        <li>\n          <strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputType' | transloco }}\n        </li>\n        <li>\n          <strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n          <ul>\n            <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n            <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n            <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n          </ul>\n        </li>\n        <li>\n          <strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"features-block\">\n      <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n      <ul>\n        <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"api-block\">\n      <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}\n        </li>\n        <li>\n          <strong>controlName: string</strong> -\n          {{ 'inputComponent.inputField.apiControlName' | transloco }}\n        </li>\n        <li>\n          <strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}\n        </li>\n        <li>\n          <strong>placeholder?: string</strong> -\n          {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}\n        </li>\n        <li>\n          <strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}\n        </li>\n        <li>\n          <strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> -\n          {{ 'inputComponent.inputField.apiFormInputType' | transloco }}\n        </li>\n        <li>\n          <strong>errorMessage?: string</strong> -\n          {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n      <ul>\n        <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n      <div class=\"example-wrapper\">\n        <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n        <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n          &#64;Component(&#123;\n  selector: 'app-example',\n  imports: [InputFieldComponent],\n  template: `\n    &lt;form [formGroup]=\"exampleForm\"&gt;\n      &lt;!-- Text Input --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"username\"\n        label=\"Username\"\n        placeholder=\"Enter your username\"\n        [errorMessage]=\"getUsernameError()\"\n      /&gt;\n\n      &lt;!-- Email Input --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"email\"\n        label=\"Email\"\n        type=\"email\"\n        placeholder=\"example&#64;mail.com\"\n        [errorMessage]=\"getEmailError()\"\n      /&gt;\n\n      &lt;!-- Password Input --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"password\"\n        label=\"Password\"\n        type=\"password\"\n        placeholder=\"Enter password\"\n        [errorMessage]=\"getPasswordError()\"\n      /&gt;\n\n      &lt;!-- Textarea --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"description\"\n        label=\"Description\"\n        formInputType=\"textarea\"\n        placeholder=\"Enter description\"\n      /&gt;\n\n      &lt;!-- Checkbox --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"agree\"\n        label=\"Agreement\"\n        formInputType=\"checkbox\"\n      &gt;\n        I agree to the terms and conditions\n      &lt;/dd-input-field&gt;\n    &lt;/form&gt;\n  `\n&#125;)\nexport class ExampleComponent &#123;\n  exampleForm: FormGroup;\n\n  constructor(private fb: FormBuilder) &#123;\n    this.exampleForm = this.fb.group(&#123;\n      username: ['', [Validators.required, Validators.minLength(3)]],\n      email: ['', [Validators.required, Validators.email]],\n      password: ['', [Validators.required, Validators.minLength(8)]],\n      description: [''],\n      agree: [false, Validators.requiredTrue]\n    &#125;);\n  &#125;\n\n  getUsernameError(): string &#123;\n    const control = this.exampleForm.get('username');\n    if (control?.hasError('required') && control?.touched) &#123;\n      return 'Username is required';\n    &#125;\n    if (control?.hasError('minlength') && control?.touched) &#123;\n      return 'Username must be at least 3 characters';\n    &#125;\n    return '';\n  &#125;\n\n  getEmailError(): string &#123;\n    const control = this.exampleForm.get('email');\n    if (control?.hasError('required') && control?.touched) &#123;\n      return 'Email is required';\n    &#125;\n    if (control?.hasError('email') && control?.touched) &#123;\n      return 'Invalid email format';\n    &#125;\n    return '';\n  &#125;\n\n  getPasswordError(): string &#123;\n    const control = this.exampleForm.get('password');\n    if (control?.hasError('required') && control?.touched) &#123;\n      return 'Password is required';\n    &#125;\n    if (control?.hasError('minlength') && control?.touched) &#123;\n      return 'Password must be at least 8 characters';\n    &#125;\n    return '';\n  &#125;\n&#125;</code></pre>\n      </div>\n    </div>\n  </dd-card-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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@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 .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage", "mask"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <section class=\"hero\">\n    <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n    <h1>{{ 'inputComponent.title' | transloco }}</h1>\n    <p class=\"hero-description\">\n      {{ 'inputComponent.description' | transloco }}\n    </p>\n\n    <div class=\"hero-points\">\n      <div class=\"hero-point\">\n        <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n        <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n      </div>\n      <div class=\"hero-point\">\n        <span class=\"hero-point-label\">{{\n          'inputComponent.heroPointIntegration' | transloco\n        }}</span>\n        <span class=\"hero-point-value\">{{\n          'inputComponent.heroPointIntegrationValue' | transloco\n        }}</span>\n      </div>\n      <div class=\"hero-point\">\n        <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n        <span class=\"hero-point-value\">{{\n          'inputComponent.heroPointUseCaseValue' | transloco\n        }}</span>\n      </div>\n    </div>\n  </section>\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <div class=\"overview-grid\">\n        <dd-card-section class=\"content-card\">\n          <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n          <p class=\"description\">\n            {{ 'inputComponent.overviewDescription' | transloco }}\n          </p>\n        </dd-card-section>\n\n        <dd-card-section class=\"content-card\">\n          <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n          <ul class=\"feature-list\">\n            <li>{{ 'inputComponent.feature1' | transloco }}</li>\n            <li>{{ 'inputComponent.feature2' | transloco }}</li>\n            <li>{{ 'inputComponent.feature3' | transloco }}</li>\n            <li>{{ 'inputComponent.feature4' | transloco }}</li>\n            <li>{{ 'inputComponent.feature5' | transloco }}</li>\n          </ul>\n        </dd-card-section>\n      </div>\n\n      <div class=\"examples-grid\">\n        <dd-card-section class=\"example-card\">\n          <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n          <div class=\"example-preview\">\n            <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n            <duck-dev-input\n              [form]=\"textExampleForm\"\n              controlName=\"fullName\"\n              [label]=\"'inputComponent.demo.fullName' | transloco\"\n              [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n              [errorMessage]=\"getError('fullName', textExampleForm)\"\n            />\n            <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n          </div>\n\n          <div class=\"example-preview\">\n            <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n            <duck-dev-input\n              [form]=\"selectExampleForm\"\n              controlName=\"role\"\n              [label]=\"'inputComponent.demo.role' | transloco\"\n              formInputType=\"select\"\n              [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n              [options]=\"accountTypeOptions\"\n              [errorMessage]=\"getError('role', selectExampleForm)\"\n            />\n            <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n          </div>\n\n          <div class=\"example-preview\">\n            <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n            <duck-dev-input\n              [form]=\"textareaExampleForm\"\n              controlName=\"bio\"\n              [label]=\"'inputComponent.demo.bio' | transloco\"\n              formInputType=\"textarea\"\n              [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n            />\n            <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n          </div>\n        </dd-card-section>\n\n        <dd-card-section class=\"api-card\">\n          <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n          <ul class=\"api-list\">\n            <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n            <li><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n            <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n            <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</li>\n            <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n            <li>\n              <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n            </li>\n            <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n            <li><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</li>\n          </ul>\n        </dd-card-section>\n      </div>\n\n      <dd-card-section class=\"showcase-card\">\n        <div class=\"showcase-head\">\n          <div>\n            <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n            <p class=\"showcase-caption\">\n              {{ 'inputComponent.showcaseDescription' | transloco }}\n            </p>\n          </div>\n          <div class=\"showcase-value\">\n            {{ 'inputComponent.showcaseValue' | transloco }}:\n            {{ demoForm.value | json }}\n          </div>\n        </div>\n\n        <form class=\"demo-form\" [formGroup]=\"demoForm\">\n          <div class=\"showcase-grid\">\n            <div class=\"showcase-item\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n              <duck-dev-input\n                [form]=\"demoForm\"\n                controlName=\"fullName\"\n                [label]=\"'inputComponent.demo.fullName' | transloco\"\n                [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n                [errorMessage]=\"getError('fullName')\"\n              />\n            </div>\n\n            <div class=\"showcase-item\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n              <duck-dev-input\n                [form]=\"demoForm\"\n                controlName=\"role\"\n                [label]=\"'inputComponent.demo.role' | transloco\"\n                formInputType=\"select\"\n                [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n                [options]=\"accountTypeOptions\"\n                [errorMessage]=\"getError('role')\"\n              />\n            </div>\n\n            <div class=\"showcase-item showcase-item_wide\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n              <duck-dev-input\n                [form]=\"demoForm\"\n                controlName=\"bio\"\n                [label]=\"'inputComponent.demo.bio' | transloco\"\n                formInputType=\"textarea\"\n                [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n              />\n            </div>\n\n            <div class=\"showcase-item\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n              <duck-dev-input\n                [form]=\"demoForm\"\n                controlName=\"email\"\n                [label]=\"'inputComponent.demo.email' | transloco\"\n                [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n                type=\"email\"\n                [errorMessage]=\"getError('email')\"\n              />\n            </div>\n\n            <div class=\"showcase-item\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n              <div class=\"showcase-inline\">\n                <duck-dev-input\n                  [form]=\"demoForm\"\n                  controlName=\"agreement\"\n                  formInputType=\"checkbox\"\n                  [errorMessage]=\"getError('agreement')\"\n                >\n                  {{ 'inputComponent.demo.agreement' | transloco }}\n                </duck-dev-input>\n              </div>\n            </div>\n          </div>\n        </form>\n      </dd-card-section>\n    } @else {\n      <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n        <div class=\"showcase-head\">\n          <div>\n            <h2>Neobrutalism Inputs</h2>\n            <p class=\"showcase-caption\">\n              Extra brutal variants for promo forms, loud dashboards and expressive settings screens.\n            </p>\n          </div>\n        </div>\n\n        <div class=\"showcase-grid showcase-grid--neobrutal\">\n          <div class=\"showcase-item showcase-item--neobrutal\">\n            <p class=\"showcase-label\">Slab / Text</p>\n            <duck-dev-input-neobrutal-slab\n              [form]=\"demoForm\"\n              controlName=\"fullName\"\n              [label]=\"'inputComponent.demo.fullName' | transloco\"\n              [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n              [errorMessage]=\"getError('fullName')\"\n            />\n          </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal\">\n        <p class=\"showcase-label\">Strip / Select</p>\n        <duck-dev-input-neobrutal-strip\n          [form]=\"demoForm\"\n          controlName=\"role\"\n          [label]=\"'inputComponent.demo.role' | transloco\"\n          formInputType=\"select\"\n          [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n          [options]=\"accountTypeOptions\"\n          [errorMessage]=\"getError('role')\"\n        />\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n        <p class=\"showcase-label\">Poster / Textarea</p>\n        <duck-dev-input-neobrutal-poster\n          [form]=\"demoForm\"\n          controlName=\"bio\"\n          [label]=\"'inputComponent.demo.bio' | transloco\"\n          formInputType=\"textarea\"\n          [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n        />\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal\">\n        <p class=\"showcase-label\">Strip / Email</p>\n        <duck-dev-input-neobrutal-strip\n          [form]=\"demoForm\"\n          controlName=\"email\"\n          [label]=\"'inputComponent.demo.email' | transloco\"\n          [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n          type=\"email\"\n          [errorMessage]=\"getError('email')\"\n        />\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal\">\n        <p class=\"showcase-label\">Slab / Checkbox</p>\n        <duck-dev-input-neobrutal-slab\n          [form]=\"demoForm\"\n          controlName=\"agreement\"\n          formInputType=\"checkbox\"\n          [errorMessage]=\"getError('agreement')\"\n        >\n          {{ 'inputComponent.demo.agreement' | transloco }}\n        </duck-dev-input-neobrutal-slab>\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal\">\n        <p class=\"showcase-label\">Toggle / Boolean</p>\n        <duck-dev-input-neobrutal-toggle\n          [form]=\"demoForm\"\n          controlName=\"instantSync\"\n          label=\"Instant sync\"\n          description=\"Push UI changes to the preview canvas the moment a control changes.\"\n          offLabel=\"Paused\"\n          onLabel=\"Live\"\n        />\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n        <p class=\"showcase-label\">Radio / Mode</p>\n        <duck-dev-input-neobrutal-radio\n          [form]=\"demoForm\"\n          controlName=\"launchMode\"\n          label=\"Workspace mode\"\n          description=\"Pick the brutal layout state the team sees first.\"\n          [options]=\"workspaceModeOptions\"\n          [errorMessage]=\"getError('launchMode')\"\n        />\n      </div>\n        </div>\n      </dd-card-section>\n    }\n\n    <div class=\"code-grid\">\n      <dd-card-section class=\"code-card\">\n        <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n        <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n        <pre><code>{{ exampleMarkup }}</code></pre>\n      </dd-card-section>\n\n      <dd-card-section class=\"code-card\">\n        <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n        <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n        <pre><code>{{ exampleLogic }}</code></pre>\n      </dd-card-section>\n    </div>\n  </duck-dev-tab>\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 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-base-600);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalPoster, selector: "duck-dev-input-neobrutal-poster", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalRadio, selector: "duck-dev-input-neobrutal-radio", inputs: ["form", "controlName", "label", "description", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalSlab, selector: "duck-dev-input-neobrutal-slab", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalStrip, selector: "duck-dev-input-neobrutal-strip", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "options", "errorMessage"] }, { kind: "component", type: DuckDevInputNeobrutalToggle, selector: "duck-dev-input-neobrutal-toggle", inputs: ["form", "controlName", "label", "description", "offLabel", "onLabel", "errorMessage"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevInput, ReactiveFormsModule], template: "<div class=\"demo-container\">\n  <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n  <!-- Input Field Component -->\n  <dd-card-section>\n\n    <form\n      (click)=\"$event.stopPropagation()\"\n      [formGroup]=\"form\"\n      class=\"popup-form\"\n    >\n      <duck-dev-input\n        [form]=\"form\"\n        controlName=\"name\"\n        [label]=\"'NAME' | transloco\"\n        [placeholder]=\"'ENTER_NAME' | transloco\"/>\n\n      <duck-dev-input\n        #phone\n        [form]=\"form\"\n        controlName=\"phone\"\n        type=\"tel\"\n        [label]=\"'PHONE' | transloco\"\n        [placeholder]=\"'ENTER_PHONE' | transloco\"\n        [mask]=\"phoneMaskOptions\"\n      />\n\n      <duck-dev-input\n        [form]=\"form\"\n        [formInputType]=\"'textarea'\"\n        controlName=\"description\"\n        type=\"text\"\n        [label]=\"'DESCRIPTION' | transloco\"\n        [placeholder]=\"'ENTER_DESCRIPTION' | transloco\"\n      />\n    </form>\n\n\n    <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'inputComponent.inputField.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n      <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n      <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n      <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n          {{ 'inputComponent.inputField.inputForm' | transloco }}\n        </li>\n        <li>\n          <strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n          {{ 'inputComponent.inputField.inputControlName' | transloco }}\n        </li>\n        <li>\n          <strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputLabel' | transloco }}\n        </li>\n        <li>\n          <strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}\n        </li>\n        <li>\n          <strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputType' | transloco }}\n        </li>\n        <li>\n          <strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n          <ul>\n            <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n            <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n            <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n          </ul>\n        </li>\n        <li>\n          <strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n          {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"features-block\">\n      <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n      <ul>\n        <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"api-block\">\n      <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}\n        </li>\n        <li>\n          <strong>controlName: string</strong> -\n          {{ 'inputComponent.inputField.apiControlName' | transloco }}\n        </li>\n        <li>\n          <strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}\n        </li>\n        <li>\n          <strong>placeholder?: string</strong> -\n          {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}\n        </li>\n        <li>\n          <strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}\n        </li>\n        <li>\n          <strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> -\n          {{ 'inputComponent.inputField.apiFormInputType' | transloco }}\n        </li>\n        <li>\n          <strong>errorMessage?: string</strong> -\n          {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"implementation-block\">\n      <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n      <ul>\n        <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n        <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"example-block\">\n      <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n      <div class=\"example-wrapper\">\n        <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n        <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n          &#64;Component(&#123;\n  selector: 'app-example',\n  imports: [InputFieldComponent],\n  template: `\n    &lt;form [formGroup]=\"exampleForm\"&gt;\n      &lt;!-- Text Input --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"username\"\n        label=\"Username\"\n        placeholder=\"Enter your username\"\n        [errorMessage]=\"getUsernameError()\"\n      /&gt;\n\n      &lt;!-- Email Input --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"email\"\n        label=\"Email\"\n        type=\"email\"\n        placeholder=\"example&#64;mail.com\"\n        [errorMessage]=\"getEmailError()\"\n      /&gt;\n\n      &lt;!-- Password Input --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"password\"\n        label=\"Password\"\n        type=\"password\"\n        placeholder=\"Enter password\"\n        [errorMessage]=\"getPasswordError()\"\n      /&gt;\n\n      &lt;!-- Textarea --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"description\"\n        label=\"Description\"\n        formInputType=\"textarea\"\n        placeholder=\"Enter description\"\n      /&gt;\n\n      &lt;!-- Checkbox --&gt;\n      &lt;dd-input-field\n        [form]=\"exampleForm\"\n        controlName=\"agree\"\n        label=\"Agreement\"\n        formInputType=\"checkbox\"\n      &gt;\n        I agree to the terms and conditions\n      &lt;/dd-input-field&gt;\n    &lt;/form&gt;\n  `\n&#125;)\nexport class ExampleComponent &#123;\n  exampleForm: FormGroup;\n\n  constructor(private fb: FormBuilder) &#123;\n    this.exampleForm = this.fb.group(&#123;\n      username: ['', [Validators.required, Validators.minLength(3)]],\n      email: ['', [Validators.required, Validators.email]],\n      password: ['', [Validators.required, Validators.minLength(8)]],\n      description: [''],\n      agree: [false, Validators.requiredTrue]\n    &#125;);\n  &#125;\n\n  getUsernameError(): string &#123;\n    const control = this.exampleForm.get('username');\n    if (control?.hasError('required') && control?.touched) &#123;\n      return 'Username is required';\n    &#125;\n    if (control?.hasError('minlength') && control?.touched) &#123;\n      return 'Username must be at least 3 characters';\n    &#125;\n    return '';\n  &#125;\n\n  getEmailError(): string &#123;\n    const control = this.exampleForm.get('email');\n    if (control?.hasError('required') && control?.touched) &#123;\n      return 'Email is required';\n    &#125;\n    if (control?.hasError('email') && control?.touched) &#123;\n      return 'Invalid email format';\n    &#125;\n    return '';\n  &#125;\n\n  getPasswordError(): string &#123;\n    const control = this.exampleForm.get('password');\n    if (control?.hasError('required') && control?.touched) &#123;\n      return 'Password is required';\n    &#125;\n    if (control?.hasError('minlength') && control?.touched) &#123;\n      return 'Password must be at least 8 characters';\n    &#125;\n    return '';\n  &#125;\n&#125;</code></pre>\n      </div>\n    </div>\n  </dd-card-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,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@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 .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'app-input-block', imports: [
+                        TranslocoPipe,
+                        DuckDevCardSection,
+                        DuckDevInput,
+                        DuckDevInputNeobrutalPoster,
+                        DuckDevInputNeobrutalRadio,
+                        DuckDevInputNeobrutalSlab,
+                        DuckDevInputNeobrutalStrip,
+                        DuckDevInputNeobrutalToggle,
+                        ReactiveFormsModule,
+                        JsonPipe,
+                        DuckDevTab,
+                    ], template: "<div class=\"demo-container\">\n  <section class=\"hero\">\n    <span class=\"eyebrow\">{{ 'inputComponent.eyebrow' | transloco }}</span>\n    <h1>{{ 'inputComponent.title' | transloco }}</h1>\n    <p class=\"hero-description\">\n      {{ 'inputComponent.description' | transloco }}\n    </p>\n\n    <div class=\"hero-points\">\n      <div class=\"hero-point\">\n        <span class=\"hero-point-label\">{{ 'inputComponent.heroPointType' | transloco }}</span>\n        <span class=\"hero-point-value\">{{ 'inputComponent.heroPointTypeValue' | transloco }}</span>\n      </div>\n      <div class=\"hero-point\">\n        <span class=\"hero-point-label\">{{\n          'inputComponent.heroPointIntegration' | transloco\n        }}</span>\n        <span class=\"hero-point-value\">{{\n          'inputComponent.heroPointIntegrationValue' | transloco\n        }}</span>\n      </div>\n      <div class=\"hero-point\">\n        <span class=\"hero-point-label\">{{ 'inputComponent.heroPointUseCase' | transloco }}</span>\n        <span class=\"hero-point-value\">{{\n          'inputComponent.heroPointUseCaseValue' | transloco\n        }}</span>\n      </div>\n    </div>\n  </section>\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <div class=\"overview-grid\">\n        <dd-card-section class=\"content-card\">\n          <h2>{{ 'inputComponent.overviewTitle' | transloco }}</h2>\n          <p class=\"description\">\n            {{ 'inputComponent.overviewDescription' | transloco }}\n          </p>\n        </dd-card-section>\n\n        <dd-card-section class=\"content-card\">\n          <h2>{{ 'inputComponent.featuresTitle' | transloco }}</h2>\n          <ul class=\"feature-list\">\n            <li>{{ 'inputComponent.feature1' | transloco }}</li>\n            <li>{{ 'inputComponent.feature2' | transloco }}</li>\n            <li>{{ 'inputComponent.feature3' | transloco }}</li>\n            <li>{{ 'inputComponent.feature4' | transloco }}</li>\n            <li>{{ 'inputComponent.feature5' | transloco }}</li>\n          </ul>\n        </dd-card-section>\n      </div>\n\n      <div class=\"examples-grid\">\n        <dd-card-section class=\"example-card\">\n          <h2>{{ 'inputComponent.examplesTitle' | transloco }}</h2>\n\n          <div class=\"example-preview\">\n            <h3>{{ 'inputComponent.exampleText' | transloco }}</h3>\n            <duck-dev-input\n              [form]=\"textExampleForm\"\n              controlName=\"fullName\"\n              [label]=\"'inputComponent.demo.fullName' | transloco\"\n              [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n              [errorMessage]=\"getError('fullName', textExampleForm)\"\n            />\n            <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextCaption' | transloco }}</p>\n          </div>\n\n          <div class=\"example-preview\">\n            <h3>{{ 'inputComponent.exampleSelect' | transloco }}</h3>\n            <duck-dev-input\n              [form]=\"selectExampleForm\"\n              controlName=\"role\"\n              [label]=\"'inputComponent.demo.role' | transloco\"\n              formInputType=\"select\"\n              [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n              [options]=\"accountTypeOptions\"\n              [errorMessage]=\"getError('role', selectExampleForm)\"\n            />\n            <p class=\"checkbox-note\">{{ 'inputComponent.exampleSelectCaption' | transloco }}</p>\n          </div>\n\n          <div class=\"example-preview\">\n            <h3>{{ 'inputComponent.exampleTextarea' | transloco }}</h3>\n            <duck-dev-input\n              [form]=\"textareaExampleForm\"\n              controlName=\"bio\"\n              [label]=\"'inputComponent.demo.bio' | transloco\"\n              formInputType=\"textarea\"\n              [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n            />\n            <p class=\"checkbox-note\">{{ 'inputComponent.exampleTextareaCaption' | transloco }}</p>\n          </div>\n        </dd-card-section>\n\n        <dd-card-section class=\"api-card\">\n          <h2>{{ 'inputComponent.apiTitle' | transloco }}</h2>\n          <ul class=\"api-list\">\n            <li><strong>form</strong> - {{ 'inputComponent.apiForm' | transloco }}</li>\n            <li><strong>controlName</strong> - {{ 'inputComponent.apiControlName' | transloco }}</li>\n            <li><strong>label</strong> - {{ 'inputComponent.apiLabel' | transloco }}</li>\n            <li><strong>placeholder</strong> - {{ 'inputComponent.apiPlaceholder' | transloco }}</li>\n            <li><strong>type</strong> - {{ 'inputComponent.apiType' | transloco }}</li>\n            <li>\n              <strong>formInputType</strong> - {{ 'inputComponent.apiFormInputType' | transloco }}\n            </li>\n            <li><strong>options</strong> - {{ 'inputComponent.apiOptions' | transloco }}</li>\n            <li><strong>errorMessage</strong> - {{ 'inputComponent.apiErrorMessage' | transloco }}</li>\n          </ul>\n        </dd-card-section>\n      </div>\n\n      <dd-card-section class=\"showcase-card\">\n        <div class=\"showcase-head\">\n          <div>\n            <h2>{{ 'inputComponent.showcaseTitle' | transloco }}</h2>\n            <p class=\"showcase-caption\">\n              {{ 'inputComponent.showcaseDescription' | transloco }}\n            </p>\n          </div>\n          <div class=\"showcase-value\">\n            {{ 'inputComponent.showcaseValue' | transloco }}:\n            {{ demoForm.value | json }}\n          </div>\n        </div>\n\n        <form class=\"demo-form\" [formGroup]=\"demoForm\">\n          <div class=\"showcase-grid\">\n            <div class=\"showcase-item\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n              <duck-dev-input\n                [form]=\"demoForm\"\n                controlName=\"fullName\"\n                [label]=\"'inputComponent.demo.fullName' | transloco\"\n                [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n                [errorMessage]=\"getError('fullName')\"\n              />\n            </div>\n\n            <div class=\"showcase-item\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseSelect' | transloco }}</p>\n              <duck-dev-input\n                [form]=\"demoForm\"\n                controlName=\"role\"\n                [label]=\"'inputComponent.demo.role' | transloco\"\n                formInputType=\"select\"\n                [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n                [options]=\"accountTypeOptions\"\n                [errorMessage]=\"getError('role')\"\n              />\n            </div>\n\n            <div class=\"showcase-item showcase-item_wide\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseTextarea' | transloco }}</p>\n              <duck-dev-input\n                [form]=\"demoForm\"\n                controlName=\"bio\"\n                [label]=\"'inputComponent.demo.bio' | transloco\"\n                formInputType=\"textarea\"\n                [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n              />\n            </div>\n\n            <div class=\"showcase-item\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseText' | transloco }}</p>\n              <duck-dev-input\n                [form]=\"demoForm\"\n                controlName=\"email\"\n                [label]=\"'inputComponent.demo.email' | transloco\"\n                [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n                type=\"email\"\n                [errorMessage]=\"getError('email')\"\n              />\n            </div>\n\n            <div class=\"showcase-item\">\n              <p class=\"showcase-label\">{{ 'inputComponent.showcaseCheckbox' | transloco }}</p>\n              <div class=\"showcase-inline\">\n                <duck-dev-input\n                  [form]=\"demoForm\"\n                  controlName=\"agreement\"\n                  formInputType=\"checkbox\"\n                  [errorMessage]=\"getError('agreement')\"\n                >\n                  {{ 'inputComponent.demo.agreement' | transloco }}\n                </duck-dev-input>\n              </div>\n            </div>\n          </div>\n        </form>\n      </dd-card-section>\n    } @else {\n      <dd-card-section class=\"showcase-card showcase-card--neobrutal\">\n        <div class=\"showcase-head\">\n          <div>\n            <h2>Neobrutalism Inputs</h2>\n            <p class=\"showcase-caption\">\n              Extra brutal variants for promo forms, loud dashboards and expressive settings screens.\n            </p>\n          </div>\n        </div>\n\n        <div class=\"showcase-grid showcase-grid--neobrutal\">\n          <div class=\"showcase-item showcase-item--neobrutal\">\n            <p class=\"showcase-label\">Slab / Text</p>\n            <duck-dev-input-neobrutal-slab\n              [form]=\"demoForm\"\n              controlName=\"fullName\"\n              [label]=\"'inputComponent.demo.fullName' | transloco\"\n              [placeholder]=\"'inputComponent.demo.fullNamePlaceholder' | transloco\"\n              [errorMessage]=\"getError('fullName')\"\n            />\n          </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal\">\n        <p class=\"showcase-label\">Strip / Select</p>\n        <duck-dev-input-neobrutal-strip\n          [form]=\"demoForm\"\n          controlName=\"role\"\n          [label]=\"'inputComponent.demo.role' | transloco\"\n          formInputType=\"select\"\n          [placeholder]=\"'inputComponent.demo.rolePlaceholder' | transloco\"\n          [options]=\"accountTypeOptions\"\n          [errorMessage]=\"getError('role')\"\n        />\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n        <p class=\"showcase-label\">Poster / Textarea</p>\n        <duck-dev-input-neobrutal-poster\n          [form]=\"demoForm\"\n          controlName=\"bio\"\n          [label]=\"'inputComponent.demo.bio' | transloco\"\n          formInputType=\"textarea\"\n          [placeholder]=\"'inputComponent.demo.bioPlaceholder' | transloco\"\n        />\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal\">\n        <p class=\"showcase-label\">Strip / Email</p>\n        <duck-dev-input-neobrutal-strip\n          [form]=\"demoForm\"\n          controlName=\"email\"\n          [label]=\"'inputComponent.demo.email' | transloco\"\n          [placeholder]=\"'inputComponent.demo.emailPlaceholder' | transloco\"\n          type=\"email\"\n          [errorMessage]=\"getError('email')\"\n        />\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal\">\n        <p class=\"showcase-label\">Slab / Checkbox</p>\n        <duck-dev-input-neobrutal-slab\n          [form]=\"demoForm\"\n          controlName=\"agreement\"\n          formInputType=\"checkbox\"\n          [errorMessage]=\"getError('agreement')\"\n        >\n          {{ 'inputComponent.demo.agreement' | transloco }}\n        </duck-dev-input-neobrutal-slab>\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal\">\n        <p class=\"showcase-label\">Toggle / Boolean</p>\n        <duck-dev-input-neobrutal-toggle\n          [form]=\"demoForm\"\n          controlName=\"instantSync\"\n          label=\"Instant sync\"\n          description=\"Push UI changes to the preview canvas the moment a control changes.\"\n          offLabel=\"Paused\"\n          onLabel=\"Live\"\n        />\n      </div>\n\n      <div class=\"showcase-item showcase-item--neobrutal showcase-item_wide\">\n        <p class=\"showcase-label\">Radio / Mode</p>\n        <duck-dev-input-neobrutal-radio\n          [form]=\"demoForm\"\n          controlName=\"launchMode\"\n          label=\"Workspace mode\"\n          description=\"Pick the brutal layout state the team sees first.\"\n          [options]=\"workspaceModeOptions\"\n          [errorMessage]=\"getError('launchMode')\"\n        />\n      </div>\n        </div>\n      </dd-card-section>\n    }\n\n    <div class=\"code-grid\">\n      <dd-card-section class=\"code-card\">\n        <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n        <h3>{{ 'inputComponent.codeTemplate' | transloco }}</h3>\n        <pre><code>{{ exampleMarkup }}</code></pre>\n      </dd-card-section>\n\n      <dd-card-section class=\"code-card\">\n        <h2>{{ 'inputComponent.codeTitle' | transloco }}</h2>\n        <h3>{{ 'inputComponent.codeLogic' | transloco }}</h3>\n        <pre><code>{{ exampleLogic }}</code></pre>\n      </dd-card-section>\n    </div>\n  </duck-dev-tab>\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 72px;display:grid;gap:28px;color:var(--dd-base-600)}.demo-container h1{font-size:40px;font-weight:700;color:var(--dd-base-600);margin:0;text-align:left}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin:0 0 12px}.demo-container h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin:0 0 14px}.demo-container p{margin:0}.hero{padding:36px;border-radius:32px;background:radial-gradient(circle at top left,rgba(125,92,255,.18),transparent 34%),radial-gradient(circle at bottom right,rgba(255,146,43,.18),transparent 30%),linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid rgba(125,92,255,.12);box-shadow:0 28px 60px #12121714}.eyebrow{display:inline-flex;margin-bottom:16px;padding:8px 14px;border-radius:999px;background:#7d5cff1f;color:var(--dd-base-accent-blue);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-description{max-width:720px;margin-top:12px;font-size:17px;line-height:1.7;color:var(--dd-base-400)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.hero-point{padding:18px 20px;border-radius:22px;background:#ffffffc2;border:1px solid rgba(18,18,23,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-point-label{display:block;margin-bottom:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dd-base-accent-blue)}.hero-point-value{font-size:15px;line-height:1.5;color:var(--dd-base-500)}.overview-grid,.examples-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:26px;border-radius:28px;background:var(--dd-base-0);border:1px solid rgba(18,18,23,.08);box-shadow:0 20px 40px #1212170f}.description{font-size:15px;line-height:1.7;color:var(--dd-base-400)}.feature-list,.api-list{display:grid;gap:12px;margin:18px 0 0;padding:0;list-style:none}.feature-list li,.api-list li{padding:16px 18px;border-radius:18px;background:var(--dd-base-100);border:1px solid rgba(18,18,23,.04);line-height:1.6;color:var(--dd-base-500)}.api-list strong{color:var(--dd-base-accent-blue)}.examples-grid{align-items:start}.example-card{display:grid;gap:16px}.example-preview{padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(125,92,255,.08),transparent),var(--dd-base-100);border:1px solid rgba(125,92,255,.08)}.demo-form{display:grid;gap:18px}.checkbox-note{font-size:14px;line-height:1.5;color:var(--dd-base-400)}.showcase-card{background:radial-gradient(circle at top right,rgba(255,146,43,.12),transparent 26%),var(--dd-base-0)}.showcase-card--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 22%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.showcase-head{display:flex;justify-content:space-between;gap:16px;align-items:end;margin-bottom:22px}.showcase-caption{font-size:14px;line-height:1.6;color:var(--dd-base-400)}.showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-item{padding:20px;border-radius:24px;background:linear-gradient(180deg,var(--dd-base-100),rgba(255,255,255,.92));border:1px solid rgba(18,18,23,.05)}.showcase-item--neobrutal{border:4px solid var(--dd-base-600);border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 16%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-yellow)}.showcase-item_wide{grid-column:1/-1}.showcase-label{margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dd-base-400)}.showcase-inline{display:flex;align-items:center;gap:14px}.showcase-value{margin-top:12px;font-size:14px;color:var(--dd-base-accent-blue)}.code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.showcase-grid--neobrutal{align-items:start}.code-card pre{margin:0;padding:20px;overflow-x:auto;border-radius:22px;background:#141821}.code-card code{color:#f6f7fb;font-size:13px;line-height:1.7}@media(max-width:900px){.hero-points,.overview-grid,.examples-grid,.showcase-grid,.code-grid{grid-template-columns:1fr}}@media(max-width:768px){.demo-container{padding:24px 14px 56px}.demo-container h1{font-size:30px}.hero,.content-card,.example-card,.api-card,.showcase-card,.code-card{padding:20px;border-radius:22px}.showcase-head,.showcase-inline{flex-direction:column;align-items:stretch}}\n"] }]
+        }] });
 
 class DuckDevIcon {
     sanitizer;
@@ -2235,13 +2912,13 @@ class DuckDevIcon {
         const svg = DuckDevIcon.iconMap.get(n) ?? '';
         return this.sanitizer.bypassSecurityTrustHtml(svg);
     }, { ...(ngDevMode ? { debugName: "svgHtml" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevIcon, isStandalone: true, selector: "duck-dev-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `, isInline: true, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevIcon, decorators: [{
             type: Component,
             args: [{ selector: 'duck-dev-icon', standalone: true, template: ` <span class="duck-dev-icon" [innerHTML]="svgHtml()"></span> `, styles: [":host{display:inline-flex;line-height:0}.duck-dev-icon{display:inline-flex}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
 
 class DuckDevNotification {
     type = input('success', { ...(ngDevMode ? { debugName: "type" } : {}) });
@@ -2251,14 +2928,14 @@ class DuckDevNotification {
     position = input('top', { ...(ngDevMode ? { debugName: "position" } : {}) });
     closed = output();
     isVisible = signal(false, { ...(ngDevMode ? { debugName: "isVisible" } : {}) });
-    state = signal('enter', { ...(ngDevMode ? { debugName: "state" } : {}) });
+    isClosing = signal(false, { ...(ngDevMode ? { debugName: "isClosing" } : {}) });
     timer;
-    ngOnInit() {
-        // Start visible with CSS-only transition
-        setTimeout(() => {
+    constructor() {
+        afterNextRender(() => {
             this.isVisible.set(true);
-            this.state.set('enter');
-        }, 10);
+        });
+    }
+    ngOnInit() {
         if (this.duration() > 0) {
             this.timer = window.setTimeout(() => {
                 this.close();
@@ -2266,24 +2943,37 @@ class DuckDevNotification {
         }
     }
     close() {
-        this.state.set('leave');
-        setTimeout(() => {
-            this.isVisible.set(false);
-            this.closed.emit();
-        }, 300);
+        if (this.isClosing()) {
+            return;
+        }
+        this.isClosing.set(true);
+        this.isVisible.set(false);
+        this.clearTimer();
+    }
+    handleAnimationEnd(event) {
+        if (!this.isClosing() || event.animationName !== 'dd-notification-leave') {
+            return;
+        }
+        this.isClosing.set(false);
+        this.closed.emit();
     }
     ngOnDestroy() {
-        if (this.timer) {
-            clearTimeout(this.timer);
+        this.clearTimer();
+    }
+    clearTimer() {
+        if (!this.timer) {
+            return;
         }
+        clearTimeout(this.timer);
+        this.timer = undefined;
     }
     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]=\"\n      'notification notification--' +\n      type() +\n      ' notification--pos-' +\n      position() +\n      ' notification--' +\n      state()\n    \"\n    (click)=\"close()\"\n  >\n    <div class=\"notification__inner\">\n      <div class=\"notification__icon\">\n        <span>\n          @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          }\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 class=\"notification__close\" (click)=\"close()\" type=\"button\" 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"] }] });
+    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()\"\n    animate.enter=\"notification-enter\"\n    animate.leave=\"notification-leave\"\n    (animationend)=\"handleAnimationEnd($event)\"\n    (click)=\"close()\"\n  >\n    <div class=\"notification__inner\">\n      <div class=\"notification__icon\">\n        <span>\n          @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          }\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)=\"$event.stopPropagation(); close()\"\n        type=\"button\"\n        aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n      >\n        <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n      </button>\n    </div>\n  </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-base-600);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\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]=\"\n      'notification notification--' +\n      type() +\n      ' notification--pos-' +\n      position() +\n      ' notification--' +\n      state()\n    \"\n    (click)=\"close()\"\n  >\n    <div class=\"notification__inner\">\n      <div class=\"notification__icon\">\n        <span>\n          @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          }\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 class=\"notification__close\" (click)=\"close()\" type=\"button\" 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"] }] } });
+            args: [{ selector: 'duck-dev-notification', imports: [DuckDevIcon], template: "@if (isVisible()) {\n  <div\n    [class]=\"'notification notification--' + type() + ' notification--pos-' + position()\"\n    animate.enter=\"notification-enter\"\n    animate.leave=\"notification-leave\"\n    (animationend)=\"handleAnimationEnd($event)\"\n    (click)=\"close()\"\n  >\n    <div class=\"notification__inner\">\n      <div class=\"notification__icon\">\n        <span>\n          @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          }\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)=\"$event.stopPropagation(); close()\"\n        type=\"button\"\n        aria-label=\"\u0417\u0430\u043A\u0440\u044B\u0442\u044C\"\n      >\n        <duck-dev-icon name=\"duck-dev-x-medium\"></duck-dev-icon>\n      </button>\n    </div>\n  </div>\n}\n", styles: [".notification{--dd-notification-shadow-x: 10px;--dd-notification-shadow-y: 10px;--dd-notification-bg: var(--dd-base-0);--dd-notification-accent: var(--dd-base-accent-blue);--dd-notification-text: var(--dd-base-600);--dd-notification-border: var(--dd-base-600);--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg);position:fixed;right:20px;min-width:min(360px,100vw - 32px);max-width:min(420px,100vw - 32px);padding:0;display:block;cursor:pointer;z-index:3;color:var(--dd-notification-text);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-0) 72%,transparent) 0 14%,transparent 14% 100%),var(--dd-notification-bg);border:4px solid var(--dd-notification-border);border-radius:0;box-shadow:var(--dd-notification-shadow-x) var(--dd-notification-shadow-y) 0 var(--dd-notification-border);transform:var(--dd-notification-rest-transform);transform-origin:top right;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)}.notification:hover{transform:var(--dd-notification-hover-transform);box-shadow:14px 14px 0 var(--dd-notification-border)}.notification__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:18px 20px 18px 18px;overflow:hidden;will-change:transform,opacity}.notification__inner:before{content:\"\";position:absolute;inset:10px 10px auto auto;width:72px;height:10px;background:var(--dd-notification-border)}.notification__icon{display:grid;place-items:center;width:54px;height:54px;margin-top:2px;background:var(--dd-notification-accent);border:4px solid var(--dd-notification-border);box-shadow:4px 4px 0 var(--dd-notification-border);font-size:26px;font-weight:900;line-height:1;flex-shrink:0;transform:rotate(-6deg)}.notification__content{display:grid;gap:8px;min-width:0;padding-top:2px}.notification__title{margin:0;padding:4px 10px;display:inline-flex;width:fit-content;max-width:100%;background:var(--dd-notification-border);color:var(--dd-base-0);font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;word-break:break-word}.notification__message{margin:0;max-width:32ch;font-size:15px;line-height:1.35;font-weight:700}.notification__close{display:grid;place-items:center;width:34px;height:34px;margin-top:-4px;padding:0;color:var(--dd-notification-border);background:var(--dd-base-0);border:3px solid var(--dd-notification-border);border-radius:0;box-shadow:3px 3px 0 var(--dd-notification-border);line-height:1;cursor:pointer;flex-shrink:0;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease}.notification__close duck-dev-icon{display:inline-flex}.notification__close:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--dd-notification-border)}.notification__close:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dd-notification-border)}@keyframes dd-notification-content-enter{0%{opacity:0;transform:translate3d(0,10px,0) scale(.965)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes dd-notification-content-leave{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(0,-6px,0) scale(.985)}}@keyframes dd-notification-enter-top{0%{opacity:0;transform:translate3d(0,-18px,0) scale(.94) rotate(-2.2deg)}60%{opacity:1;transform:translate3d(0,2px,0) scale(1.01) rotate(-.8deg)}to{opacity:1;transform:rotate(-1.2deg)}}@keyframes dd-notification-leave-top{0%{opacity:1;transform:rotate(-1.2deg)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.96) rotate(-2.4deg)}}@keyframes dd-notification-enter-bottom{0%{opacity:0;transform:translate3d(0,18px,0) scale(.94) rotate(2deg)}60%{opacity:1;transform:translate3d(0,-2px,0) scale(1.01) rotate(.8deg)}to{opacity:1;transform:rotate(1deg)}}@keyframes dd-notification-leave-bottom{0%{opacity:1;transform:rotate(1deg)}to{opacity:0;transform:translate3d(0,14px,0) scale(.96) rotate(2.2deg)}}@keyframes dd-notification-enter-center{0%{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.94) rotate(-1.6deg)}65%{opacity:1;transform:translate(-50%,calc(-50% + 2px)) scale(1.01) rotate(-.6deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}}@keyframes dd-notification-leave-center{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1deg)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.965) rotate(1deg)}}.notification-enter .notification__inner{animation:dd-notification-content-enter .36s cubic-bezier(.16,1,.3,1) both}.notification-leave .notification__inner{animation:dd-notification-content-leave .22s cubic-bezier(.4,0,1,1) both}.notification--pos-top{top:20px;--dd-notification-rest-transform: rotate(-1.2deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(-1.2deg)}.notification--pos-center{left:50%;top:50%;right:auto;--dd-notification-rest-transform: translate(-50%, -50%) rotate(-1deg);--dd-notification-hover-transform: translate( calc(-50% - 4px) , calc(-50% - 4px) ) rotate(-1deg)}.notification--pos-bottom{bottom:20px;--dd-notification-rest-transform: rotate(1deg);--dd-notification-hover-transform: translate(-4px, -4px) rotate(1deg);transform-origin:bottom right}.notification-enter.notification--pos-top{animation:dd-notification-enter-top .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-top{animation:dd-notification-leave-top .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-bottom{animation:dd-notification-enter-bottom .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-bottom{animation:dd-notification-leave-bottom .24s cubic-bezier(.4,0,1,1) both}.notification-enter.notification--pos-center{animation:dd-notification-enter-center .42s cubic-bezier(.16,1,.3,1) both}.notification-leave.notification--pos-center{animation:dd-notification-leave-center .24s cubic-bezier(.4,0,1,1) both}.notification--success{--dd-notification-bg: color-mix(in srgb, var(--dd-base-success) 86%, var(--dd-base-0));--dd-notification-accent: var(--dd-base-0)}.notification--warning{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-yellow) 82%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-accent-orange)}.notification--error{--dd-notification-bg: color-mix( in srgb, var(--dd-base-accent-orange) 78%, var(--dd-base-0) );--dd-notification-accent: var(--dd-base-0)}@media(max-width:640px){.notification{left:16px;right:16px;min-width:0;max-width:none;box-shadow:7px 7px 0 var(--dd-notification-border)}.notification:hover{transform:var(--dd-notification-rest-transform);box-shadow:7px 7px 0 var(--dd-notification-border)}.notification__inner{grid-template-columns:auto 1fr;padding:16px}.notification__close{position:absolute;top:12px;right:12px;margin-top:0}.notification__message{max-width:none;padding-right:44px}.notification--pos-center{width:calc(100vw - 32px)}}\n"] }]
+        }], ctorParameters: () => [], 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 {
     service = inject(DuckDevNotificationService);
@@ -2397,7 +3087,7 @@ class NotificationBlock {
         this.notify.clear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'notifications.title' | transloco }}</h1>\n\n  <!-- Quick demo -->\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"showSample()\">\n      {{ 'notifications.quickDemo' | transloco }}\n    </button>\n    <button class=\"demo-btn\" (click)=\"clearAll()\">\n      {{ 'notifications.clearAll' | transloco }}\n    </button>\n  </div>\n\n  <!-- Basics -->\n  <dd-card-section>\n    <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'notifications.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'notifications.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-notification-container /&gt;\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nonSave() &#123;\n  this.notify.success('Saved successfully', &#123; title: 'Done', position: 'top', duration: 3000 &#125;);\n&#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'notifications.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>type</strong> - {{ 'notifications.basic.inputType' | transloco }}</li>\n        <li><strong>title</strong> - {{ 'notifications.basic.inputTitle' | transloco }}</li>\n        <li><strong>message</strong> - {{ 'notifications.basic.inputMessage' | transloco }}</li>\n        <li><strong>duration</strong> - {{ 'notifications.basic.inputDuration' | transloco }}</li>\n        <li><strong>position</strong> - {{ 'notifications.basic.inputPosition' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'notifications.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"successTop()\">\n          {{ 'notifications.examples.successTop' | transloco }}\n        </button>\n        <button class=\"demo-btn\" (click)=\"warningCenter()\">\n          {{ 'notifications.examples.warningCenter' | transloco }}\n        </button>\n        <button class=\"demo-btn\" (click)=\"errorBottom()\">\n          {{ 'notifications.examples.errorBottom' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Service and Container -->\n  <dd-card-section>\n    <h2>{{ 'notifications.service.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'notifications.service.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'notifications.service.install' | transloco }}</h3>\n      <pre><code>// 1) Place container once in app layout (e.g., AppComponent template)\n&lt;duck-dev-notification-container /&gt;\n\n// 2) Inject and use the service in any component\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nthis.notify.show(&#123;\n  type: 'success',\n  title: '{{ 'notifications.snippets.titleSuccess' | transloco }}',\n  message: '{{ 'notifications.snippets.sampleMessage' | transloco }}',\n  position: 'top',\n  duration: 3000\n&#125;);\n</code></pre>\n    </div>\n\n    <div class=\"api-block\">\n      <h3>{{ 'notifications.api.title' | transloco }}</h3>\n      <ul class=\"api-list\">\n        <li>\n          <code>show(options: NotificationOptions)</code> \u2014\n          {{ 'notifications.api.show' | transloco }}\n        </li>\n        <li>\n          <code>success(message, options?)</code> \u2014 {{ 'notifications.api.success' | transloco }}\n        </li>\n        <li>\n          <code>warning(message, options?)</code> \u2014 {{ 'notifications.api.warning' | transloco }}\n        </li>\n        <li><code>error(message, options?)</code> \u2014 {{ 'notifications.api.error' | transloco }}</li>\n        <li><code>remove(id)</code> \u2014 {{ 'notifications.api.remove' | transloco }}</li>\n        <li><code>clear()</code> \u2014 {{ 'notifications.api.clear' | transloco }}</li>\n      </ul>\n      <h4>{{ 'notifications.api.optionsTitle' | transloco }}</h4>\n      <pre><code>interface NotificationOptions &#123;\n  type?: 'success' | 'warning' | 'error';\n  title?: string;\n  message: string;\n  position?: 'top' | 'center' | 'bottom';\n  duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n&#125;</code></pre>\n    </div>\n  </dd-card-section>\n\n  <!-- Positions & duration examples -->\n  <section class=\"component-section\">\n    <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'notifications.positions.description' | transloco }}</p>\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"showTop()\">\n          {{ 'notifications.positions.top' | transloco }}\n        </button>\n        <button class=\"demo-btn\" (click)=\"showCenterNoAuto()\">\n          {{ 'notifications.positions.centerNoAuto' | transloco }}\n        </button>\n        <button class=\"demo-btn\" (click)=\"showBottomLong()\">\n          {{ 'notifications.positions.bottomLong' | transloco }}\n        </button>\n      </div>\n    </div>\n    <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n  </section>\n\n  <!-- Advanced -->\n  <section class=\"component-section\">\n    <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n    <ul>\n      <li>{{ 'notifications.advanced.cssOnly' | transloco }}</li>\n      <li>{{ 'notifications.advanced.palette' | transloco }}</li>\n      <li>{{ 'notifications.advanced.stacking' | transloco }}</li>\n      <li>{{ 'notifications.advanced.accessibility' | transloco }}</li>\n    </ul>\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 .api-block{margin-bottom:25px}.demo-container .component-section .api-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 .api-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .api-block .api-list{list-style:none;padding:0;margin:0 0 12px}.demo-container .component-section .api-block .api-list li{padding:8px 12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:6px;color:var(--dd-base-500);font-size:14px}.demo-container .component-section .api-block .api-list li+li{margin-top:8px}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .tip{margin-top:8px;color:var(--dd-base-400)}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}@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}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotificationBlock, isStandalone: true, selector: "app-notification-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'notifications.title' | transloco }}</h1>\n\n  <!-- Quick demo -->\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"showSample()\">\n      {{ 'notifications.quickDemo' | transloco }}\n    </button>\n    <button class=\"demo-btn\" (click)=\"clearAll()\">\n      {{ 'notifications.clearAll' | transloco }}\n    </button>\n  </div>\n\n  <!-- Basics -->\n  <dd-card-section>\n    <h2>{{ 'notifications.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'notifications.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'notifications.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-notification-container /&gt;\n\n// In your component:\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nonSave() &#123;\n  this.notify.success('Saved successfully', &#123; title: 'Done', position: 'top', duration: 3000 &#125;);\n&#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'notifications.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>type</strong> - {{ 'notifications.basic.inputType' | transloco }}</li>\n        <li><strong>title</strong> - {{ 'notifications.basic.inputTitle' | transloco }}</li>\n        <li><strong>message</strong> - {{ 'notifications.basic.inputMessage' | transloco }}</li>\n        <li><strong>duration</strong> - {{ 'notifications.basic.inputDuration' | transloco }}</li>\n        <li><strong>position</strong> - {{ 'notifications.basic.inputPosition' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'notifications.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"successTop()\">\n          {{ 'notifications.examples.successTop' | transloco }}\n        </button>\n        <button class=\"demo-btn\" (click)=\"warningCenter()\">\n          {{ 'notifications.examples.warningCenter' | transloco }}\n        </button>\n        <button class=\"demo-btn\" (click)=\"errorBottom()\">\n          {{ 'notifications.examples.errorBottom' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <!-- Service and Container -->\n  <dd-card-section>\n    <h2>{{ 'notifications.service.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'notifications.service.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'notifications.service.install' | transloco }}</h3>\n      <pre><code>// 1) Place container once in app layout (e.g., AppComponent template)\n&lt;duck-dev-notification-container /&gt;\n\n// 2) Inject and use the service in any component\nconstructor(private notify: DuckDevNotificationService) &#123;&#125;\n\nthis.notify.show(&#123;\n  type: 'success',\n  title: '{{ 'notifications.snippets.titleSuccess' | transloco }}',\n  message: '{{ 'notifications.snippets.sampleMessage' | transloco }}',\n  position: 'top',\n  duration: 3000\n&#125;);\n</code></pre>\n    </div>\n\n    <div class=\"api-block\">\n      <h3>{{ 'notifications.api.title' | transloco }}</h3>\n      <ul class=\"api-list\">\n        <li>\n          <code>show(options: NotificationOptions)</code> \u2014\n          {{ 'notifications.api.show' | transloco }}\n        </li>\n        <li>\n          <code>success(message, options?)</code> \u2014 {{ 'notifications.api.success' | transloco }}\n        </li>\n        <li>\n          <code>warning(message, options?)</code> \u2014 {{ 'notifications.api.warning' | transloco }}\n        </li>\n        <li><code>error(message, options?)</code> \u2014 {{ 'notifications.api.error' | transloco }}</li>\n        <li><code>remove(id)</code> \u2014 {{ 'notifications.api.remove' | transloco }}</li>\n        <li><code>clear()</code> \u2014 {{ 'notifications.api.clear' | transloco }}</li>\n      </ul>\n      <h4>{{ 'notifications.api.optionsTitle' | transloco }}</h4>\n      <pre><code>interface NotificationOptions &#123;\n  type?: 'success' | 'warning' | 'error';\n  title?: string;\n  message: string;\n  position?: 'top' | 'center' | 'bottom';\n  duration?: number; // {{ 'notifications.api.durationHint' | transloco }}\n&#125;</code></pre>\n    </div>\n  </dd-card-section>\n\n  <!-- Positions & duration examples -->\n  <section class=\"component-section\">\n    <h2>{{ 'notifications.positions.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'notifications.positions.description' | transloco }}</p>\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"showTop()\">\n          {{ 'notifications.positions.top' | transloco }}\n        </button>\n        <button class=\"demo-btn\" (click)=\"showCenterNoAuto()\">\n          {{ 'notifications.positions.centerNoAuto' | transloco }}\n        </button>\n        <button class=\"demo-btn\" (click)=\"showBottomLong()\">\n          {{ 'notifications.positions.bottomLong' | transloco }}\n        </button>\n      </div>\n    </div>\n    <p class=\"tip\">{{ 'notifications.tip.clickToClose' | transloco }}</p>\n  </section>\n\n  <!-- Advanced -->\n  <section class=\"component-section\">\n    <h2>{{ 'notifications.advanced.title' | transloco }}</h2>\n    <ul>\n      <li>{{ 'notifications.advanced.cssOnly' | transloco }}</li>\n      <li>{{ 'notifications.advanced.palette' | transloco }}</li>\n      <li>{{ 'notifications.advanced.stacking' | transloco }}</li>\n      <li>{{ 'notifications.advanced.accessibility' | transloco }}</li>\n    </ul>\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 .api-block{margin-bottom:25px}.demo-container .component-section .api-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 .api-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .api-block .api-list{list-style:none;padding:0;margin:0 0 12px}.demo-container .component-section .api-block .api-list li{padding:8px 12px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:6px;color:var(--dd-base-500);font-size:14px}.demo-container .component-section .api-block .api-list li+li{margin-top:8px}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .tip{margin-top:8px;color:var(--dd-base-400)}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}@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}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotificationBlock, decorators: [{
             type: Component,
@@ -2417,6 +3107,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'dd-badge', standalone: true, imports: [DdFlexDirectionDirective], template: "<div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n  <span\n    class=\"dd-badge\"\n    [attr.data-variant]=\"variant()\"\n    [attr.data-color]=\"color()\"\n    [attr.data-size]=\"size()\"\n  >\n    {{ text() }}\n  </span>\n</div>\n", styles: [":host{display:block}.dd-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:9999px;line-height:1;border:1px solid transparent;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.dd-badge[data-size=sm]{font-size:12px;padding:4px 8px;gap:6px}.dd-badge[data-size=md]{font-size:14px;padding:6px 10px;gap:8px}.dd-badge[data-variant=solid][data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-600)}.dd-badge[data-variant=solid][data-color=dark]{background:var(--dd-base-700);color:var(--dd-base-0)}.dd-badge[data-variant=solid][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue);border-color:color-mix(in srgb,var(--dd-base-accent-blue) 30%,transparent)}.dd-badge[data-variant=soft][data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange);border-color:color-mix(in srgb,var(--dd-base-accent-orange) 30%,transparent)}.dd-badge[data-variant=soft][data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=soft][data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-badge[data-variant=soft][data-color=white]{background:var(--dd-base-0);color:var(--dd-base-600);border-color:var(--dd-base-300)}.dd-badge[data-variant=outline]{background:transparent}.dd-badge[data-variant=outline][data-color=violet]{color:var(--dd-base-accent-blue);border-color:var(--dd-base-accent-blue)}.dd-badge[data-variant=outline][data-color=orange]{color:var(--dd-base-accent-orange);border-color:var(--dd-base-accent-orange)}.dd-badge[data-variant=outline][data-color=gray]{color:var(--dd-base-600);border-color:var(--dd-base-400)}.dd-badge[data-variant=outline][data-color=dark]{color:var(--dd-base-700);border-color:var(--dd-base-600)}.dd-badge[data-variant=outline][data-color=white]{color:var(--dd-base-600);border-color:var(--dd-base-300)}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+function getNeobrutalBadgeStyle(color) {
+    switch (color) {
+        case AccentEnumColor.Violet:
+            return {
+                '--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))',
+                '--dd-neo-badge-text': 'var(--dd-base-600)',
+                '--dd-neo-badge-border': 'var(--dd-base-600)',
+                '--dd-neo-badge-shadow': 'var(--dd-base-accent-blue)',
+                '--dd-neo-badge-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.Orange:
+            return {
+                '--dd-neo-badge-surface': 'color-mix(in srgb, var(--dd-base-accent-orange) 18%, var(--dd-base-0))',
+                '--dd-neo-badge-text': 'var(--dd-base-600)',
+                '--dd-neo-badge-border': 'var(--dd-base-600)',
+                '--dd-neo-badge-shadow': 'var(--dd-base-accent-orange)',
+                '--dd-neo-badge-accent': 'var(--dd-base-accent-pink)',
+            };
+        case AccentEnumColor.Gray:
+            return {
+                '--dd-neo-badge-surface': 'var(--dd-base-100)',
+                '--dd-neo-badge-text': 'var(--dd-base-600)',
+                '--dd-neo-badge-border': 'var(--dd-base-600)',
+                '--dd-neo-badge-shadow': 'var(--dd-base-400)',
+                '--dd-neo-badge-accent': 'var(--dd-base-accent-blue)',
+            };
+        case AccentEnumColor.Dark:
+            return {
+                '--dd-neo-badge-surface': 'var(--dd-base-600)',
+                '--dd-neo-badge-text': 'var(--dd-base-0)',
+                '--dd-neo-badge-border': 'var(--dd-base-0)',
+                '--dd-neo-badge-shadow': 'var(--dd-base-accent-orange)',
+                '--dd-neo-badge-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.White:
+        default:
+            return {
+                '--dd-neo-badge-surface': 'var(--dd-base-0)',
+                '--dd-neo-badge-text': 'var(--dd-base-600)',
+                '--dd-neo-badge-border': 'var(--dd-base-600)',
+                '--dd-neo-badge-shadow': 'var(--dd-base-accent-blue)',
+                '--dd-neo-badge-accent': 'var(--dd-base-accent-orange)',
+            };
+    }
+}
+
+class BadgeNeobrutalSlab {
+    text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
+    badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalSlab, isStandalone: true, selector: "dd-badge-neobrutal-slab", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-slab\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-slab__dot\" aria-hidden=\"true\"></span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-slab{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-slab[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-slab[data-size=md]{padding:8px 12px;font-size:12px}.dd-badge-neo-slab__dot{width:9px;height:9px;background:var(--dd-neo-badge-accent);border:2px solid var(--dd-neo-badge-border)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalSlab, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-badge-neobrutal-slab', standalone: true, template: "<span class=\"dd-badge-neo-slab\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-slab__dot\" aria-hidden=\"true\"></span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-slab{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);box-shadow:4px 4px 0 var(--dd-neo-badge-shadow);color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-slab[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-slab[data-size=md]{padding:8px 12px;font-size:12px}.dd-badge-neo-slab__dot{width:9px;height:9px;background:var(--dd-neo-badge-accent);border:2px solid var(--dd-neo-badge-border)}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class BadgeNeobrutalStamp {
+    text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
+    badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalStamp, isStandalone: true, selector: "dd-badge-neobrutal-stamp", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-stamp__kicker\">Duck Dev</span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-border);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);letter-spacing:.12em;text-transform:uppercase}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalStamp, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-badge-neobrutal-stamp', standalone: true, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-stamp__kicker\">Duck Dev</span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-border);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);letter-spacing:.12em;text-transform:uppercase}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class BadgeNeobrutalTicket {
+    text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
+    badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalTicket, isStandalone: true, selector: "dd-badge-neobrutal-ticket", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-ticket\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-ticket__stub\" aria-hidden=\"true\"></span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-ticket{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-badge-accent) 26%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-ticket[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-ticket[data-size=md]{padding:8px 12px;font-size:12px}.dd-badge-neo-ticket__stub{width:12px;height:18px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);box-shadow:3px 3px 0 var(--dd-neo-badge-shadow)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalTicket, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-badge-neobrutal-ticket', standalone: true, template: "<span class=\"dd-badge-neo-ticket\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-ticket__stub\" aria-hidden=\"true\"></span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-ticket{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-badge-accent) 26%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}.dd-badge-neo-ticket[data-size=sm]{padding:6px 9px;font-size:11px}.dd-badge-neo-ticket[data-size=md]{padding:8px 12px;font-size:12px}.dd-badge-neo-ticket__stub{width:12px;height:18px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);box-shadow:3px 3px 0 var(--dd-neo-badge-shadow)}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 class BadgeBlock {
     t = inject(TranslocoService);
     colorViolet = AccentEnumColor.Violet;
@@ -2424,6 +3199,11 @@ class BadgeBlock {
     colorWhite = AccentEnumColor.White;
     colorGray = AccentEnumColor.Gray;
     colorDark = AccentEnumColor.Dark;
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
     // Card content elements
     descEl;
     inputTextEl;
@@ -2437,17 +3217,30 @@ class BadgeBlock {
         this.inputVariantEl = this.createEl(this.t.translate('badgeDoc.inputsDesc.variant'));
         this.inputSizeEl = this.createEl(this.t.translate('badgeDoc.inputsDesc.size'));
     }
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
     createEl(html) {
         const el = document.createElement('div');
         el.innerHTML = html;
         return el;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n  <!-- Badge Component -->\n  <dd-card-section>\n    <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div [innerHTML]=\"descEl.innerHTML\"></div>\n    </dd-card-accent>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-badge\n        [text]=\"'New'\"\n        [color]=\"colorViolet\"\n        [variant]=\"'solid'\"\n        [size]=\"'md'\"\n      /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n      <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorViolet\">\n          <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorOrange\">\n          <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorGray\">\n          <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n        </dd-card-accent>\n      </div>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n          <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n          <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n          <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n          <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n          <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n          <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n          <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n          <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n          <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n  <!-- Badge Component -->\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-badge\n        [text]=\"'New'\"\n        [color]=\"colorViolet\"\n        [variant]=\"'solid'\"\n        [size]=\"'md'\"\n      /&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n              <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n              <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n              <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n              <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Badge</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;dd-badge-neobrutal-slab\n  [text]=\"'Hot drop'\"\n  [color]=\"colorOrange\"\n  [size]=\"'md'\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Slab</p>\n              <dd-badge-neobrutal-slab [text]=\"'Hot drop'\" [color]=\"colorOrange\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Stamp</p>\n              <dd-badge-neobrutal-stamp [text]=\"'Duck verified'\" [color]=\"colorViolet\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"'Night mode'\" [color]=\"colorDark\" />\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .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 .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-badge-block', standalone: true, imports: [Badge, TranslocoPipe, DuckDevCardAccent, DdFlexDirectionDirective, DuckDevCardSection], template: "<div class=\"demo-container\">\n  <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n  <!-- Badge Component -->\n  <dd-card-section>\n    <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div [innerHTML]=\"descEl.innerHTML\"></div>\n    </dd-card-accent>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-badge\n        [text]=\"'New'\"\n        [color]=\"colorViolet\"\n        [variant]=\"'solid'\"\n        [size]=\"'md'\"\n      /&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n      <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorViolet\">\n          <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorOrange\">\n          <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorGray\">\n          <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n        </dd-card-accent>\n      </div>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n          <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n          <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n          <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n          <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n          <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n          <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n          <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n          <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n          <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+            args: [{ selector: 'app-badge-block', standalone: true, imports: [
+                        Badge,
+                        BadgeNeobrutalSlab,
+                        BadgeNeobrutalStamp,
+                        BadgeNeobrutalTicket,
+                        TranslocoPipe,
+                        DuckDevCardAccent,
+                        DdFlexDirectionDirective,
+                        DuckDevCardSection,
+                        DuckDevTab,
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n  <!-- Badge Component -->\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-badge\n        [text]=\"'New'\"\n        [color]=\"colorViolet\"\n        [variant]=\"'solid'\"\n        [size]=\"'md'\"\n      /&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n              <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n              <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n              <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n              <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Badge</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;dd-badge-neobrutal-slab\n  [text]=\"'Hot drop'\"\n  [color]=\"colorOrange\"\n  [size]=\"'md'\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Slab</p>\n              <dd-badge-neobrutal-slab [text]=\"'Hot drop'\" [color]=\"colorOrange\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Stamp</p>\n              <dd-badge-neobrutal-stamp [text]=\"'Duck verified'\" [color]=\"colorViolet\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"'Night mode'\" [color]=\"colorDark\" />\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .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 .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }], ctorParameters: () => [] });
 
 class DirectiveBlock {
@@ -2475,18 +3268,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             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 name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n  </button>\n  @if (isOpen()) {\n    <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\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 DuckDevAccordionNeobrutalComponent {
+    content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
+    title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
+    stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
+    toggle() {
+        this.isOpen.update((prev) => !prev);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", 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=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-brutal__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-brutal__stamp\">Duck Dev</span>\n\n    <span class=\"dd-accordion-brutal__headline\">\n      <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n    </span>\n\n    <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n      <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n    </span>\n  </button>\n\n  <div class=\"dd-accordion-brutal__body-shell\" [class.is-open]=\"isOpen()\" [attr.aria-hidden]=\"!isOpen()\">\n    <div class=\"dd-accordion-brutal__body-frame\">\n      <div class=\"dd-accordion-brutal__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-border: var(--dd-base-600);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-accordion-brutal-border);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-accent-blue) 16%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-blue) 10%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 18%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-yellow) 22%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-orange)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-400)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-base-0);--dd-accordion-brutal-text: var(--dd-base-0)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-accordion-brutal-border);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-base-0));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-accordion-brutal-border);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-base-0));box-shadow:2px 2px 0 var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:7px 7px 0 var(--dd-accordion-brutal-border)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\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: DuckDevAccordionNeobrutalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-brutal__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-brutal__stamp\">Duck Dev</span>\n\n    <span class=\"dd-accordion-brutal__headline\">\n      <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n    </span>\n\n    <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n      <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n    </span>\n  </button>\n\n  <div class=\"dd-accordion-brutal__body-shell\" [class.is-open]=\"isOpen()\" [attr.aria-hidden]=\"!isOpen()\">\n    <div class=\"dd-accordion-brutal__body-frame\">\n      <div class=\"dd-accordion-brutal__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-border: var(--dd-base-600);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-accordion-brutal-border);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-accent-blue) 16%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-blue) 10%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 18%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-yellow) 22%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-orange)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-400)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-base-0);--dd-accordion-brutal-text: var(--dd-base-0)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-accordion-brutal-border);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-base-0));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-accordion-brutal-border);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-base-0));box-shadow:2px 2px 0 var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:7px 7px 0 var(--dd-accordion-brutal-border)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\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 {
+    t = inject(TranslocoService);
     colorViolet = AccentEnumColor.Violet;
     colorOrange = AccentEnumColor.Orange;
     colorWhite = AccentEnumColor.White;
     colorGray = AccentEnumColor.Gray;
     colorDark = AccentEnumColor.Dark;
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
     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  <dd-card-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>\n          <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n          with content\n        </li>\n        <li>\n          <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n          (default: White)\n        </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\n            [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n            [content]=\"q1Tpl\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n            [content]=\"q2Tpl\"\n            [color]=\"colorViolet\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n            [content]=\"q3Tpl\"\n            [color]=\"colorOrange\"\n          />\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\n            [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n            [content]=\"q1Tpl\"\n            [color]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n            [content]=\"q2Tpl\"\n            [color]=\"colorDark\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n            [content]=\"q3Tpl\"\n            [color]=\"colorWhite\"\n          />\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  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .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: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\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>\n              <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n              with content\n            </li>\n            <li>\n              <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n              (default: White)\n            </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\n                [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n                [content]=\"q1Tpl\"\n              />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n              <duck-dev-accordion\n                [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n                [content]=\"q2Tpl\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n              <duck-dev-accordion\n                [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n                [content]=\"q3Tpl\"\n                [color]=\"colorOrange\"\n              />\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\n                [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n                [content]=\"q1Tpl\"\n                [color]=\"colorGray\"\n              />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n              <duck-dev-accordion\n                [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n                [content]=\"q2Tpl\"\n                [color]=\"colorDark\"\n              />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n              <duck-dev-accordion\n                [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n                [content]=\"q3Tpl\"\n                [color]=\"colorWhite\"\n              />\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Accordion</h2>\n        <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;duck-dev-accordion-neobrutal\n  [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n  [content]=\"q2Tpl\"\n  [color]=\"colorOrange\"\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>\n              <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n              with content\n            </li>\n            <li>\n              <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n              (default: White)\n            </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 example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Violet</p>\n              <duck-dev-accordion-neobrutal\n                [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n                [content]=\"q1Tpl\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Orange</p>\n              <duck-dev-accordion-neobrutal\n                [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n                [content]=\"q2Tpl\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\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  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@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: "component", type: DuckDevAccordionNeobrutalComponent, selector: "duck-dev-accordion-neobrutal", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { 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, DuckDevCardSection], template: "<div class=\"demo-container\">\n  <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n  <dd-card-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>\n          <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n          with content\n        </li>\n        <li>\n          <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n          (default: White)\n        </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\n            [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n            [content]=\"q1Tpl\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n            [content]=\"q2Tpl\"\n            [color]=\"colorViolet\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n            [content]=\"q3Tpl\"\n            [color]=\"colorOrange\"\n          />\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\n            [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n            [content]=\"q1Tpl\"\n            [color]=\"colorGray\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n            [content]=\"q2Tpl\"\n            [color]=\"colorDark\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n            [content]=\"q3Tpl\"\n            [color]=\"colorWhite\"\n          />\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  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .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"] }]
+            args: [{ selector: 'app-accordion-block', standalone: true, imports: [
+                        TranslocoPipe,
+                        DuckDevAccordionComponent,
+                        DuckDevAccordionNeobrutalComponent,
+                        DuckDevCardSection,
+                        DuckDevTab,
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\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>\n              <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n              with content\n            </li>\n            <li>\n              <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n              (default: White)\n            </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\n                [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n                [content]=\"q1Tpl\"\n              />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n              <duck-dev-accordion\n                [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n                [content]=\"q2Tpl\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n              <duck-dev-accordion\n                [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n                [content]=\"q3Tpl\"\n                [color]=\"colorOrange\"\n              />\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\n                [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n                [content]=\"q1Tpl\"\n                [color]=\"colorGray\"\n              />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n              <duck-dev-accordion\n                [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n                [content]=\"q2Tpl\"\n                [color]=\"colorDark\"\n              />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n              <duck-dev-accordion\n                [title]=\"'accordionDoc.sample.q3.title' | transloco\"\n                [content]=\"q3Tpl\"\n                [color]=\"colorWhite\"\n              />\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Accordion</h2>\n        <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;duck-dev-accordion-neobrutal\n  [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n  [content]=\"q2Tpl\"\n  [color]=\"colorOrange\"\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>\n              <strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference\n              with content\n            </li>\n            <li>\n              <strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark\n              (default: White)\n            </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 example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Violet</p>\n              <duck-dev-accordion-neobrutal\n                [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n                [content]=\"q1Tpl\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Orange</p>\n              <duck-dev-accordion-neobrutal\n                [title]=\"'accordionDoc.sample.q2.title' | transloco\"\n                [content]=\"q2Tpl\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\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  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item duck-dev-accordion-neobrutal{width:100%;max-width:600px}.demo-container .examples-block .example-row .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 28%,transparent),transparent 56%),var(--dd-base-0);border-color:var(--dd-base-600);box-shadow:8px 8px color-mix(in srgb,var(--dd-base-600) 24%,transparent);align-items:stretch}.demo-container .examples-block .example-row .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px color-mix(in srgb,var(--dd-base-600) 28%,transparent)}.demo-container .examples-block .example-row .example-item--neobrutal .example-label{color:var(--dd-base-600);font-weight:800;letter-spacing:.08em;text-transform:uppercase}@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 SliderFlip {
@@ -2546,7 +3371,7 @@ class SliderFlip {
         this.animateIn = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderFlip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderFlip, isStandalone: true, selector: "dd-slider-flip", 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\n      class=\"slide\"\n      [class.current]=\"!isAnimating || animateIn\"\n      [class.animate-in]=\"animateIn\"\n      (transitionend)=\"onTransitionEnd($event)\"\n    >\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);aspect-ratio:16/9;position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%;display:grid;min-height:1px;height:100%;justify-items:stretch;align-items:stretch}.slide{position:relative;width:100%;height:100%;grid-area:1/1;opacity:0;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}.slide.current,.slide.animate-in{opacity:1;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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderFlip, isStandalone: true, selector: "dd-slider-flip", 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\n      class=\"slide\"\n      [class.current]=\"!isAnimating || animateIn\"\n      [class.animate-in]=\"animateIn\"\n      (transitionend)=\"onTransitionEnd($event)\"\n    >\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);aspect-ratio:16/9;position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%;display:grid;min-height:1px;height:100%;justify-items:stretch;align-items:stretch}.slide{position:relative;width:100%;height:100%;grid-area:1/1;opacity:0;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}.slide.current,.slide.animate-in{opacity:1;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.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: SliderFlip, decorators: [{
             type: Component,
@@ -2608,6 +3433,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'app-slider-block', standalone: true, imports: [TranslocoPipe, SliderFlip, SliderClassic, DuckDevCardSection], template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <dd-card-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-flip\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>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.raindrops.inputItems' | transloco }}\n        </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> - {{ 'slider.colorDescription' | transloco }}</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\">{{ 'slider.demo.heroTitle' | transloco }}</h3>\n        <p class=\"dd-doc-slide__subtitle\">\n          {{ 'slider.demo.heroSubtitle' | transloco }}\n        </p>\n        <a\n          class=\"dd-doc-slide__cta\"\n          href=\"#components\"\n          aria-label=\"{{ 'slider.demo.heroCta' | transloco }}\"\n          >{{ 'slider.demo.heroCta' | transloco }}</a\n        >\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>{{ 'slider.demo.features.accessibleTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.accessibleDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.themeableTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.themeableDesc' | transloco }}</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>{{ 'slider.demo.features.lightweightTitle' | transloco }}</h4>\n            <p>{{ 'slider.demo.features.lightweightDesc' | transloco }}</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\">\n          {{ 'slider.demo.code.quickStartTitle' | transloco }}\n        </h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-flip\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-flip&gt;</code></pre>\n        <p class=\"dd-doc-note\">{{ 'slider.demo.code.tip' | transloco }}</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-flip [items]=\"slides()\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'slider.classic.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.classic.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.classic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.classic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <strong>items</strong> ({{ 'slider.required' | transloco }}) -\n          {{ 'slider.classic.inputItems' | transloco }}\n        </li>\n        <li><strong>intervalMs</strong> - {{ 'slider.classic.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.classic.inputAutoplay' | transloco }}</li>\n        <li><strong>color</strong> - {{ 'slider.colorDescription' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.classic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.classic.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100)}.demo-container .examples-block .example-row .example-item dd-slider-flip,.demo-container .examples-block .example-row .example-item dd-slider-classic{display:block;width:100%;aspect-ratio:16/9;max-height:min(60vh,420px)}.demo-container .examples-block .example-row .example-item :host ::ng-deep dd-slider-flip .container,.demo-container .examples-block .example-row .example-item :host ::ng-deep dd-slider-classic .container{height:100%}.demo-container .examples-block .example-row .example-item{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 .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 .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 NeobrutalTicketCardBlock {
+    colorGray = AccentEnumColor.Gray;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NeobrutalTicketCardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NeobrutalTicketCardBlock, isStandalone: true, selector: "app-neobrutal-ticket-card-block", host: { styleAttribute: "display: contents;" }, ngImport: i0, template: "<div class=\"example-item example-item--neobrutal\">\n  <p class=\"example-label\">Ticket / Gray</p>\n  <dd-card-neobrutal-ticket\n    [color]=\"colorGray\"\n    flashLabel=\"Hot drop\"\n    stubTop=\"Admit\"\n    stubMiddle=\"Duck\"\n    stubBottom=\"Dev\"\n  >\n    <h4>Beta access</h4>\n    <p>Priority invite is open for teams shipping a bold UI refresh this sprint.</p>\n  </dd-card-neobrutal-ticket>\n</div>\n", dependencies: [{ kind: "component", type: DuckDevCardNeobrutalTicket, selector: "dd-card-neobrutal-ticket", inputs: ["color", "flashLabel", "stubTop", "stubMiddle", "stubBottom"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NeobrutalTicketCardBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-neobrutal-ticket-card-block', standalone: true, imports: [DuckDevCardNeobrutalTicket], host: { style: 'display: contents;' }, template: "<div class=\"example-item example-item--neobrutal\">\n  <p class=\"example-label\">Ticket / Gray</p>\n  <dd-card-neobrutal-ticket\n    [color]=\"colorGray\"\n    flashLabel=\"Hot drop\"\n    stubTop=\"Admit\"\n    stubMiddle=\"Duck\"\n    stubBottom=\"Dev\"\n  >\n    <h4>Beta access</h4>\n    <p>Priority invite is open for teams shipping a bold UI refresh this sprint.</p>\n  </dd-card-neobrutal-ticket>\n</div>\n" }]
+        }] });
+
 class CardBlock {
     t = inject(TranslocoService);
     colorViolet = AccentEnumColor.Violet;
@@ -2615,6 +3450,11 @@ class CardBlock {
     colorWhite = AccentEnumColor.White;
     colorGray = AccentEnumColor.Gray;
     colorDark = AccentEnumColor.Dark;
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
     // Inputs list content elements
     inputContentEl;
     inputColorEl;
@@ -2624,6 +3464,21 @@ class CardBlock {
     exampleOrange;
     exampleGray;
     exampleDark;
+    minimalExampleDefault;
+    minimalExampleViolet;
+    minimalExampleOrange;
+    minimalExampleGray;
+    minimalExampleDark;
+    outlineExampleDefault;
+    outlineExampleViolet;
+    outlineExampleOrange;
+    outlineExampleGray;
+    outlineExampleDark;
+    signalExampleDefault;
+    signalExampleViolet;
+    signalExampleOrange;
+    signalExampleGray;
+    signalExampleDark;
     constructor() {
         this.inputContentEl = this.createEl(this.t.translate('cardDoc.inputsDesc.content'));
         this.inputColorEl = this.createEl(this.t.translate('cardDoc.inputsDesc.color'));
@@ -2632,6 +3487,24 @@ class CardBlock {
         this.exampleOrange = this.createEl(this.t.translate('cardDoc.examplesDesc.orange'));
         this.exampleGray = this.createEl(this.t.translate('cardDoc.examplesDesc.gray'));
         this.exampleDark = this.createEl(this.t.translate('cardDoc.examplesDesc.dark'));
+        this.minimalExampleDefault = this.createEl(this.t.translate('cardDoc.minimal.examplesDesc.default'));
+        this.minimalExampleViolet = this.createEl(this.t.translate('cardDoc.minimal.examplesDesc.violet'));
+        this.minimalExampleOrange = this.createEl(this.t.translate('cardDoc.minimal.examplesDesc.orange'));
+        this.minimalExampleGray = this.createEl(this.t.translate('cardDoc.minimal.examplesDesc.gray'));
+        this.minimalExampleDark = this.createEl(this.t.translate('cardDoc.minimal.examplesDesc.dark'));
+        this.outlineExampleDefault = this.createEl(this.t.translate('cardDoc.outline.examplesDesc.default'));
+        this.outlineExampleViolet = this.createEl(this.t.translate('cardDoc.outline.examplesDesc.violet'));
+        this.outlineExampleOrange = this.createEl(this.t.translate('cardDoc.outline.examplesDesc.orange'));
+        this.outlineExampleGray = this.createEl(this.t.translate('cardDoc.outline.examplesDesc.gray'));
+        this.outlineExampleDark = this.createEl(this.t.translate('cardDoc.outline.examplesDesc.dark'));
+        this.signalExampleDefault = this.createEl(this.t.translate('cardDoc.signal.examplesDesc.default'));
+        this.signalExampleViolet = this.createEl(this.t.translate('cardDoc.signal.examplesDesc.violet'));
+        this.signalExampleOrange = this.createEl(this.t.translate('cardDoc.signal.examplesDesc.orange'));
+        this.signalExampleGray = this.createEl(this.t.translate('cardDoc.signal.examplesDesc.gray'));
+        this.signalExampleDark = this.createEl(this.t.translate('cardDoc.signal.examplesDesc.dark'));
+    }
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
     }
     createEl(html) {
         const el = document.createElement('div');
@@ -2639,11 +3512,23 @@ class CardBlock {
         return el;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CardBlock, isStandalone: true, selector: "app-card-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-accent [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"exampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-accent&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-accent [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-accent>\n        </li>\n        <li>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-accent>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-accent [color]=\"colorWhite\">\n            <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-accent [color]=\"colorOrange\">\n            <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-accent [color]=\"colorGray\">\n            <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-accent [color]=\"colorDark\">\n            <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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:stretch;gap:15px;transition:all .3s ease}.demo-container .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 .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: CardBlock, isStandalone: true, selector: "app-card-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'cardDoc.title' | transloco }}</h1>\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n\n      <dd-card-section>\n        <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-accent [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"exampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-accent&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-accent [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-accent>\n        </li>\n        <li>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-accent>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-accent [color]=\"colorWhite\">\n            <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-accent [color]=\"colorOrange\">\n            <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-accent [color]=\"colorGray\">\n            <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-accent [color]=\"colorDark\">\n            <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'cardDoc.minimal.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'cardDoc.minimal.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.minimal.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-minimal [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"minimalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-minimal&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.minimal.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-minimal [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-minimal>\n        </li>\n        <li>\n          <dd-card-minimal [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-minimal>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.minimal.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorWhite\">\n            <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorViolet\">\n            <div [innerHTML]=\"minimalExampleViolet.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorOrange\">\n            <div [innerHTML]=\"minimalExampleOrange.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorGray\">\n            <div [innerHTML]=\"minimalExampleGray.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorDark\">\n            <div [innerHTML]=\"minimalExampleDark.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'cardDoc.outline.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'cardDoc.outline.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.outline.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-outline [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"outlineExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-outline&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.outline.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-outline [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-outline>\n        </li>\n        <li>\n          <dd-card-outline [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-outline>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.outline.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-outline [color]=\"colorWhite\">\n            <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-outline [color]=\"colorViolet\">\n            <div [innerHTML]=\"outlineExampleViolet.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-outline [color]=\"colorOrange\">\n            <div [innerHTML]=\"outlineExampleOrange.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-outline [color]=\"colorGray\">\n            <div [innerHTML]=\"outlineExampleGray.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-outline [color]=\"colorDark\">\n            <div [innerHTML]=\"outlineExampleDark.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'cardDoc.signal.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'cardDoc.signal.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.signal.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-signal [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"signalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-signal&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.signal.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-signal [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-signal>\n        </li>\n        <li>\n          <dd-card-signal [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-signal>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.signal.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-signal [color]=\"colorWhite\">\n            <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-signal [color]=\"colorViolet\">\n            <div [innerHTML]=\"signalExampleViolet.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-signal [color]=\"colorOrange\">\n            <div [innerHTML]=\"signalExampleOrange.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-signal [color]=\"colorGray\">\n            <div [innerHTML]=\"signalExampleGray.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-signal [color]=\"colorDark\">\n            <div [innerHTML]=\"signalExampleDark.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n      </div>\n    </div>\n      </dd-card-section>\n    } @else {\n      <dd-card-section>\n        <h2>Neobrutalism Cards</h2>\n        <p class=\"description\">\n          Bold card variants with hard borders, loud shadows and poster-like composition. They keep the\n          same simple API: pass `[color]` and project any content through `ng-content`.\n        </p>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\"&gt;\n  &lt;h4&gt;Launch queue&lt;/h4&gt;\n  &lt;p&gt;Three releases are waiting for approval.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>Neobrutalism examples</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Slab / Orange</p>\n              <dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\">\n                <h4>Launch queue</h4>\n                <p>Three releases are waiting for approval and one build is blocked by QA.</p>\n              </dd-card-neobrutal-slab>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Stamp / Violet</p>\n              <dd-card-neobrutal-stamp\n                [color]=\"colorViolet\"\n                chromeStart=\"Fresh UI\"\n                chromeEnd=\"Duck Dev\"\n                sealLabel=\"Seal\"\n              >\n                <h4>Design drop</h4>\n                <p>Fresh visual assets landed in the library and need review before sync.</p>\n              </dd-card-neobrutal-stamp>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Poster / Dark</p>\n              <dd-card-neobrutal-poster\n                [color]=\"colorDark\"\n                railTop=\"Neo\"\n                railMiddle=\"Brut\"\n                railBottom=\"Alert\"\n                eyebrow=\"Ops bulletin\"\n                badge=\"Live\"\n                title=\"System pulse\"\n                description=\"Telemetry is clean, rate limits are stable and the service window is open.\"\n                metricLabel=\"Signal\"\n                metric=\"99%\"\n              />\n            </div>\n            <app-neobrutal-ticket-card-block />\n          </div>\n        </div>\n      </dd-card-section>\n    }\n  </duck-dev-tab>\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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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:stretch;gap:15px;transition:all .3s ease}.demo-container .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevCardNeobrutalPoster, selector: "dd-card-neobrutal-poster", inputs: ["color", "railTop", "railMiddle", "railBottom", "eyebrow", "title", "description", "badge", "metricLabel", "metric"] }, { kind: "component", type: DuckDevCardNeobrutalSlab, selector: "dd-card-neobrutal-slab", inputs: ["color", "strapLabel"] }, { kind: "component", type: DuckDevCardNeobrutalStamp, selector: "dd-card-neobrutal-stamp", inputs: ["color", "chromeStart", "chromeEnd", "sealLabel"] }, { kind: "component", type: DuckDevCardOutline, selector: "dd-card-outline", inputs: ["color"] }, { kind: "component", type: DuckDevCardSignal, selector: "dd-card-signal", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: NeobrutalTicketCardBlock, selector: "app-neobrutal-ticket-card-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe, DuckDevCardSection], template: "<div class=\"demo-container\">\n  <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-accent [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"exampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-accent&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-accent [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-accent>\n        </li>\n        <li>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-accent>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-accent [color]=\"colorWhite\">\n            <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-accent [color]=\"colorOrange\">\n            <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-accent [color]=\"colorGray\">\n            <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-accent [color]=\"colorDark\">\n            <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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:stretch;gap:15px;transition:all .3s ease}.demo-container .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 .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"] }]
+            args: [{ selector: 'app-card-block', standalone: true, imports: [
+                        DuckDevCardAccent,
+                        DuckDevCardMinimal,
+                        DuckDevCardNeobrutalPoster,
+                        DuckDevCardNeobrutalSlab,
+                        DuckDevCardNeobrutalStamp,
+                        DuckDevCardOutline,
+                        DuckDevCardSignal,
+                        TranslocoPipe,
+                        DuckDevCardSection,
+                        NeobrutalTicketCardBlock,
+                        DuckDevTab,
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'cardDoc.title' | transloco }}</h1>\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n\n      <dd-card-section>\n        <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-accent [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"exampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-accent&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-accent [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-accent>\n        </li>\n        <li>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-accent>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-accent [color]=\"colorWhite\">\n            <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-accent [color]=\"colorOrange\">\n            <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-accent [color]=\"colorGray\">\n            <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-accent [color]=\"colorDark\">\n            <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n          </dd-card-accent>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'cardDoc.minimal.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'cardDoc.minimal.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.minimal.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-minimal [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"minimalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-minimal&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.minimal.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-minimal [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-minimal>\n        </li>\n        <li>\n          <dd-card-minimal [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-minimal>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.minimal.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorWhite\">\n            <div [innerHTML]=\"minimalExampleDefault.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorViolet\">\n            <div [innerHTML]=\"minimalExampleViolet.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorOrange\">\n            <div [innerHTML]=\"minimalExampleOrange.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorGray\">\n            <div [innerHTML]=\"minimalExampleGray.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-minimal [color]=\"colorDark\">\n            <div [innerHTML]=\"minimalExampleDark.innerHTML\"></div>\n          </dd-card-minimal>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'cardDoc.outline.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'cardDoc.outline.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.outline.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-outline [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"outlineExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-outline&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.outline.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-outline [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-outline>\n        </li>\n        <li>\n          <dd-card-outline [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-outline>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.outline.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-outline [color]=\"colorWhite\">\n            <div [innerHTML]=\"outlineExampleDefault.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-outline [color]=\"colorViolet\">\n            <div [innerHTML]=\"outlineExampleViolet.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-outline [color]=\"colorOrange\">\n            <div [innerHTML]=\"outlineExampleOrange.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-outline [color]=\"colorGray\">\n            <div [innerHTML]=\"outlineExampleGray.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-outline [color]=\"colorDark\">\n            <div [innerHTML]=\"outlineExampleDark.innerHTML\"></div>\n          </dd-card-outline>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'cardDoc.signal.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'cardDoc.signal.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'cardDoc.signal.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-card-signal [color]=\"colorWhite\"&gt;\n                &lt;div [innerHTML]=\"signalExampleDefault.innerHTML\"&gt;&lt;/div&gt;\n                &lt;/dd-card-signal&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'cardDoc.signal.inputs' | transloco }}</h3>\n      <ul>\n        <li>\n          <dd-card-signal [color]=\"colorWhite\">\n            <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n          </dd-card-signal>\n        </li>\n        <li>\n          <dd-card-signal [color]=\"colorViolet\">\n            <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n          </dd-card-signal>\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'cardDoc.signal.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n          <dd-card-signal [color]=\"colorWhite\">\n            <div [innerHTML]=\"signalExampleDefault.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n          <dd-card-signal [color]=\"colorViolet\">\n            <div [innerHTML]=\"signalExampleViolet.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n          <dd-card-signal [color]=\"colorOrange\">\n            <div [innerHTML]=\"signalExampleOrange.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n          <dd-card-signal [color]=\"colorGray\">\n            <div [innerHTML]=\"signalExampleGray.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n          <dd-card-signal [color]=\"colorDark\">\n            <div [innerHTML]=\"signalExampleDark.innerHTML\"></div>\n          </dd-card-signal>\n        </div>\n      </div>\n    </div>\n      </dd-card-section>\n    } @else {\n      <dd-card-section>\n        <h2>Neobrutalism Cards</h2>\n        <p class=\"description\">\n          Bold card variants with hard borders, loud shadows and poster-like composition. They keep the\n          same simple API: pass `[color]` and project any content through `ng-content`.\n        </p>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\"&gt;\n  &lt;h4&gt;Launch queue&lt;/h4&gt;\n  &lt;p&gt;Three releases are waiting for approval.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>Neobrutalism examples</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Slab / Orange</p>\n              <dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\">\n                <h4>Launch queue</h4>\n                <p>Three releases are waiting for approval and one build is blocked by QA.</p>\n              </dd-card-neobrutal-slab>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Stamp / Violet</p>\n              <dd-card-neobrutal-stamp\n                [color]=\"colorViolet\"\n                chromeStart=\"Fresh UI\"\n                chromeEnd=\"Duck Dev\"\n                sealLabel=\"Seal\"\n              >\n                <h4>Design drop</h4>\n                <p>Fresh visual assets landed in the library and need review before sync.</p>\n              </dd-card-neobrutal-stamp>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Poster / Dark</p>\n              <dd-card-neobrutal-poster\n                [color]=\"colorDark\"\n                railTop=\"Neo\"\n                railMiddle=\"Brut\"\n                railBottom=\"Alert\"\n                eyebrow=\"Ops bulletin\"\n                badge=\"Live\"\n                title=\"System pulse\"\n                description=\"Telemetry is clean, rate limits are stable and the service window is open.\"\n                metricLabel=\"Signal\"\n                metric=\"99%\"\n              />\n            </div>\n            <app-neobrutal-ticket-card-block />\n          </div>\n        </div>\n      </dd-card-section>\n    }\n  </duck-dev-tab>\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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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:stretch;gap:15px;transition:all .3s ease}.demo-container .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"] }]
         }], ctorParameters: () => [] });
 
 class DuckDevTooltip {
@@ -2675,14 +3560,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'dd-tooltip', standalone: true, imports: [], template: "<div\n  class=\"dd-tooltip\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (focusin)=\"handleEnter()\"\n  (focusout)=\"handleLeave()\"\n>\n  <div class=\"dd-tooltip__trigger\">\n    <ng-content />\n  </div>\n\n  @if (open()) {\n    <div\n      class=\"dd-tooltip__bubble\"\n      animate.enter=\"enterAnimation\"\n      animate.leave=\"leaveAnimation\"\n      [style.--dd-tooltip-anim-ms.ms]=\"delayCloseMs()\"\n      [attr.data-placement]=\"placement()\"\n      [attr.data-color]=\"color()\"\n    >\n      <div class=\"dd-tooltip__arrow\" aria-hidden=\"true\"></div>\n      <span class=\"dd-tooltip__text\">{{ text() }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip{position:relative;display:inline-block}.dd-tooltip__bubble{position:absolute;z-index:5;max-width:280px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.3;border:1px solid transparent;box-shadow:0 6px 24px #0000001f;background:var(--dd-base-800);color:var(--dd-base-0);pointer-events:none;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-tooltip__bubble[data-color=dark]{background:var(--dd-base-800);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=white]{background:var(--dd-base-0);color:var(--dd-base-700);border-color:var(--dd-base-300)}.dd-tooltip__bubble[data-placement=top],.dd-tooltip__bubble[data-placement=top-start],.dd-tooltip__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-placement=top-start]{left:0;transform:translateY(-8px)}.dd-tooltip__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-8px)}.dd-tooltip__bubble[data-placement=bottom],.dd-tooltip__bubble[data-placement=bottom-start],.dd-tooltip__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,8px)}.dd-tooltip__bubble[data-placement=bottom-start]{left:0;transform:translateY(8px)}.dd-tooltip__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,8px)}.dd-tooltip__bubble[data-placement=left],.dd-tooltip__bubble[data-placement=left-start],.dd-tooltip__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-8px,-50%)}.dd-tooltip__bubble[data-placement=left-start]{top:0;transform:translate(-8px)}.dd-tooltip__bubble[data-placement=left-end]{top:100%;transform:translate(-8px,-100%)}.dd-tooltip__bubble[data-placement=right],.dd-tooltip__bubble[data-placement=right-start],.dd-tooltip__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(8px,-50%)}.dd-tooltip__bubble[data-placement=right-start]{top:0;transform:translate(8px)}.dd-tooltip__bubble[data-placement=right-end]{top:100%;transform:translate(8px,-100%)}.dd-tooltip__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg)}.dd-tooltip__arrow:before,.dd-tooltip__arrow:after{content:\"\";position:absolute;inset:0;transform:none}.dd-tooltip__arrow:before{background:inherit}.dd-tooltip__arrow:after{inset:-1px;background:transparent;border:inherit}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{bottom:-4px}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{top:-4px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{right:-4px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{bottom:8px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{left:-4px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{bottom:8px}.enterAnimation{animation:enter-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes enter-animation{0%{opacity:0}to{opacity:1}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delayCloseMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayCloseMs", required: false }] }] } });
 
+class DuckDevTooltipNeobrutalComponent {
+    text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : {}) });
+    delayCloseMs = input(120, { ...(ngDevMode ? { debugName: "delayCloseMs" } : {}) });
+    open = signal(false, { ...(ngDevMode ? { debugName: "open" } : {}) });
+    closeTimer = null;
+    handleEnter() {
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+        this.open.set(true);
+    }
+    handleLeave() {
+        const delay = Math.max(0, this.delayCloseMs());
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+        }
+        this.closeTimer = setTimeout(() => this.open.set(false), delay);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltipNeobrutalComponent, isStandalone: true, selector: "duck-dev-tooltip-neobrutal", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-tooltip-brutal\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (focusin)=\"handleEnter()\"\n  (focusout)=\"handleLeave()\"\n>\n  <div class=\"dd-tooltip-brutal__trigger\">\n    <ng-content />\n  </div>\n\n  @if (open()) {\n    <div\n      class=\"dd-tooltip-brutal__bubble\"\n      animate.enter=\"enterAnimation\"\n      animate.leave=\"leaveAnimation\"\n      [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n      [attr.data-placement]=\"placement()\"\n      [attr.data-color]=\"color()\"\n    >\n      <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n      <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n      <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-base-600);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-accent-blue) 16%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix( in srgb, var(--dd-base-accent-orange) 22%, var(--dd-base-0) );--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-400)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-tooltip-brutal-border);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-tooltip-neobrutal', standalone: true, imports: [], template: "<div\n  class=\"dd-tooltip-brutal\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (focusin)=\"handleEnter()\"\n  (focusout)=\"handleLeave()\"\n>\n  <div class=\"dd-tooltip-brutal__trigger\">\n    <ng-content />\n  </div>\n\n  @if (open()) {\n    <div\n      class=\"dd-tooltip-brutal__bubble\"\n      animate.enter=\"enterAnimation\"\n      animate.leave=\"leaveAnimation\"\n      [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n      [attr.data-placement]=\"placement()\"\n      [attr.data-color]=\"color()\"\n    >\n      <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n      <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n      <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-base-600);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-accent-blue) 16%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix( in srgb, var(--dd-base-accent-orange) 22%, var(--dd-base-0) );--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-400)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-tooltip-brutal-border);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delayCloseMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayCloseMs", required: false }] }] } });
+
 class TooltipBlock {
+    t = inject(TranslocoService);
     colorViolet = AccentEnumColor.Violet;
     colorOrange = AccentEnumColor.Orange;
     colorWhite = AccentEnumColor.White;
     colorGray = AccentEnumColor.Gray;
     colorDark = AccentEnumColor.Dark;
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n    </dd-card-accent>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-tooltip\n  [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n  [color]=\"colorViolet\"\n  [placement]=\"'top'\"\n  [delayCloseMs]=\"120\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n      <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorViolet\">\n          <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorOrange\">\n          <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorGray\">\n          <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n        </dd-card-accent>\n      </div>\n\n      <!-- Filled maps for quick reference -->\n      <ul>\n        <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n        <li>\n          <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n          White.\n        </li>\n        <li>\n          <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n          top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n        </li>\n        <li>\n          <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n          leave (default: 120).\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n          <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n          <dd-tooltip\n            [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n            [color]=\"colorViolet\"\n            [placement]=\"'top'\"\n          >\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n          <dd-tooltip\n            [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n            [color]=\"colorOrange\"\n            [placement]=\"'right'\"\n          >\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n          <dd-tooltip\n            [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n            [color]=\"colorGray\"\n            [placement]=\"'left-start'\"\n          >\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n          <dd-tooltip\n            [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n            [color]=\"colorWhite\"\n            [placement]=\"'bottom-end'\"\n          >\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}@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: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevTooltip, selector: "dd-tooltip", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-tooltip\n  [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n  [color]=\"colorViolet\"\n  [placement]=\"'top'\"\n  [delayCloseMs]=\"120\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n            </dd-card-accent>\n          </div>\n\n          <ul>\n            <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n            <li>\n              <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n              White.\n            </li>\n            <li>\n              <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n              top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n            </li>\n            <li>\n              <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n              leave (default: 120).\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n              <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n                [color]=\"colorViolet\"\n                [placement]=\"'top'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n                [color]=\"colorOrange\"\n                [placement]=\"'right'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n                [color]=\"colorGray\"\n                [placement]=\"'left-start'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n                [color]=\"colorWhite\"\n                [placement]=\"'bottom-end'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Tooltip</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;duck-dev-tooltip-neobrutal\n  [text]=\"'Hot take inside brutal shell'\"\n  [color]=\"colorOrange\"\n  [placement]=\"'right'\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/duck-dev-tooltip-neobrutal&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Violet</p>\n              <duck-dev-tooltip-neobrutal\n                [text]=\"'Loud UI hint with brutal edge'\"\n                [color]=\"colorViolet\"\n                [placement]=\"'top'\"\n              >\n                <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n              </duck-dev-tooltip-neobrutal>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Orange</p>\n              <duck-dev-tooltip-neobrutal\n                [text]=\"'Quick signal for actions and shortcuts'\"\n                [color]=\"colorOrange\"\n                [placement]=\"'right'\"\n              >\n                <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n              </duck-dev-tooltip-neobrutal>\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .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 .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@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: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevTooltip, selector: "dd-tooltip", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "component", type: DuckDevTooltipNeobrutalComponent, selector: "duck-dev-tooltip-neobrutal", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, decorators: [{
             type: Component,
@@ -2690,9 +3613,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         DuckDevCardAccent,
                         TranslocoPipe,
                         DuckDevTooltip,
+                        DuckDevTooltipNeobrutalComponent,
                         DdFlexDirectionDirective,
                         DuckDevCardSection,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n    </dd-card-accent>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-tooltip\n  [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n  [color]=\"colorViolet\"\n  [placement]=\"'top'\"\n  [delayCloseMs]=\"120\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n      <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorViolet\">\n          <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorOrange\">\n          <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorGray\">\n          <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n        </dd-card-accent>\n      </div>\n\n      <!-- Filled maps for quick reference -->\n      <ul>\n        <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n        <li>\n          <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n          White.\n        </li>\n        <li>\n          <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n          top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n        </li>\n        <li>\n          <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n          leave (default: 120).\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n          <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n          <dd-tooltip\n            [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n            [color]=\"colorViolet\"\n            [placement]=\"'top'\"\n          >\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n          <dd-tooltip\n            [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n            [color]=\"colorOrange\"\n            [placement]=\"'right'\"\n          >\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n          <dd-tooltip\n            [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n            [color]=\"colorGray\"\n            [placement]=\"'left-start'\"\n          >\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n          <dd-tooltip\n            [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n            [color]=\"colorWhite\"\n            [placement]=\"'bottom-end'\"\n          >\n            <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n          </dd-tooltip>\n        </div>\n      </div>\n    </div>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .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 .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}@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"] }]
+                        DuckDevTab,
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-tooltip\n  [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n  [color]=\"colorViolet\"\n  [placement]=\"'top'\"\n  [delayCloseMs]=\"120\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n            </dd-card-accent>\n          </div>\n\n          <ul>\n            <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n            <li>\n              <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n              White.\n            </li>\n            <li>\n              <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n              top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n            </li>\n            <li>\n              <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n              leave (default: 120).\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n              <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n                [color]=\"colorViolet\"\n                [placement]=\"'top'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n                [color]=\"colorOrange\"\n                [placement]=\"'right'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n                [color]=\"colorGray\"\n                [placement]=\"'left-start'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n                [color]=\"colorWhite\"\n                [placement]=\"'bottom-end'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Tooltip</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;duck-dev-tooltip-neobrutal\n  [text]=\"'Hot take inside brutal shell'\"\n  [color]=\"colorOrange\"\n  [placement]=\"'right'\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/duck-dev-tooltip-neobrutal&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Violet</p>\n              <duck-dev-tooltip-neobrutal\n                [text]=\"'Loud UI hint with brutal edge'\"\n                [color]=\"colorViolet\"\n                [placement]=\"'top'\"\n              >\n                <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n              </duck-dev-tooltip-neobrutal>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Orange</p>\n              <duck-dev-tooltip-neobrutal\n                [text]=\"'Quick signal for actions and shortcuts'\"\n                [color]=\"colorOrange\"\n                [placement]=\"'right'\"\n              >\n                <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n              </duck-dev-tooltip-neobrutal>\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .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 .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .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 .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 .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .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 .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@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 QuickStartBlock {
@@ -2741,7 +3666,7 @@ class ModalBlock {
         this.isOpen.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ModalBlock, isStandalone: true, selector: "app-modal-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.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,.demo-container dd-card-section{display:block;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,.demo-container dd-card-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,.demo-container dd-card-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,.demo-container dd-card-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,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-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,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-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,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevModalClassic, selector: "dd-duck-dev-modal-classic", inputs: ["isOpen"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "pipe", type: i1$2.TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ModalBlock, isStandalone: true, selector: "app-modal-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.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,.demo-container dd-card-section{display:block;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,.demo-container dd-card-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,.demo-container dd-card-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,.demo-container dd-card-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,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-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,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-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,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevModalClassic, selector: "dd-duck-dev-modal-classic", inputs: ["isOpen"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, decorators: [{
             type: Component,
@@ -2894,8 +3819,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-CvMpinpr.mjs'),
-    ru: import('./duck-dev-lib-ru-JQ83ztjM.mjs'),
+    en: import('./duck-dev-lib-en-Co6vywqB.mjs'),
+    ru: import('./duck-dev-lib-ru-39r_p4Cd.mjs'),
 };
 
 /*
@@ -2906,5 +3831,5 @@ const DuckDevLibTranslations = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccentEnumColor, Badge, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevCardAccent, DuckDevCardSection, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
+export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
 //# sourceMappingURL=duck-dev-lib.mjs.map