npm - duck-dev-lib - Versions diffs - 0.0.59 → 0.0.60 - Mend

duck-dev-lib 0.0.59 → 0.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/fesm2022/duck-dev-lib.mjs +28 -28
package/fesm2022/duck-dev-lib.mjs.map +1 -1
package/package.json +1 -1

package/fesm2022/duck-dev-lib.mjs CHANGED Viewed

@@ -111,7 +111,7 @@ class ButtonBlurLift {
                 activeColor = 'var(--dd-base-300)';
                 textColor = 'var(--dd-base-0)';
                 focusShadow = '0 0 0 3px rgba(18, 19, 21, 0.3)';
-                borderColor = 'var(--dd-base-600)';
+                borderColor = 'var(--dd-neo-ink)';
                 break;
             default:
                 bgColor = 'var(--dd-base-0)';
@@ -195,7 +195,7 @@ class ButtonGlideOver {
                 activeColor = 'var(--dd-base-300)';
                 textColor = 'var(--dd-base-0)';
                 focusShadow = '0 0 0 3px rgba(18, 19, 21, 0.3)';
-                borderColor = 'var(--dd-base-600)';
+                borderColor = 'var(--dd-neo-ink)';
                 break;
             default:
                 bgColor = 'var(--dd-base-0)';
@@ -585,11 +585,11 @@ class Badge {
     variant = input('solid', { ...(ngDevMode ? { debugName: "variant" } : {}) });
     size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: Badge, isStandalone: true, selector: "dd-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: Badge, isStandalone: true, selector: "dd-badge", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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-neo-ink)}.dd-badge[data-variant=outline][data-color=white]{color:var(--dd-base-600);border-color:var(--dd-base-300)}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Badge, decorators: [{
             type: Component,
-            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"] }]
+            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-neo-ink)}.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) {
@@ -3760,7 +3760,7 @@ class LoaderBlock {
         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: "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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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" }] });
+    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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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,
@@ -3773,7 +3773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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"] }]
+                    ], 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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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 DuckDevCardMinimal {
@@ -3893,7 +3893,7 @@ class TabsBlock {
         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: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"page-header\">\n    <div class=\"page-header__badges\">\n      <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n  </header>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    @if (activeStyleTab().id === 'classic') {\n\n      <!-- Description -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <div>\n              <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n              <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n            </div>\n          </div>\n\n          <div class=\"feature-cards\">\n            <dd-card-minimal [color]=\"colorViolet\">\n              <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorOrange\">\n              <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorGray\">\n              <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n            </dd-card-minimal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- API -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n          </div>\n\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>tabs</strong>\n              <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>tabChange</strong>\n              <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n            </div>\n          </div>\n\n          <h3 class=\"sub-title\">DuckDevTabItem</h3>\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>id</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>label</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>content</strong>\n              <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Code -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n          </div>\n\n          <ng-template #tabsUsageTemplate>\n            <pre class=\"accordion-code\"><code>&lt;duck-dev-tab\n  [tabs]=\"tabs\"\n  (tabChange)=\"onTabChange($event)\"\n&gt;\n  &#64;if (activeTab().id === 'first') {{ '{' }}\n    &lt;p&gt;First tab content&lt;/p&gt;\n  {{ '}' }}\n  &#64;if (activeTab().id === 'second') {{ '{' }}\n    &lt;p&gt;Second tab content&lt;/p&gt;\n  {{ '}' }}\n&lt;/duck-dev-tab&gt;</code></pre>\n          </ng-template>\n\n          <ng-template #tabsUsageComponent>\n            <pre class=\"accordion-code\"><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '&#64;jsverse/transloco';\n\n&#64;Component({{ '{' }}\n  imports: [DuckDevTab],\n  // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n  private readonly t = inject(TranslocoService);\n\n  tabs: DuckDevTabItem[] = [\n    {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n    {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n  ];\n\n  activeTab = signal&lt;DuckDevTabItem&gt;(this.tabs[0]);\n\n  onTabChange(tab: DuckDevTabItem) {{ '{' }}\n    this.activeTab.set(tab);\n  {{ '}' }}\n{{ '}' }}</code></pre>\n          </ng-template>\n\n          <div class=\"accordion-row\">\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n              [content]=\"tabsUsageTemplate\"\n              [color]=\"colorOrange\"\n            />\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n              [content]=\"tabsUsageComponent\"\n              [color]=\"colorViolet\"\n            />\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Live demo -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n          </div>\n\n          <div class=\"live-demo\">\n            <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n              @if (activeDemoTab().id === 'overview') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'features') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'api') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n                </div>\n              }\n            </duck-dev-tab>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Tip -->\n      <section class=\"tab-section\">\n        <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n          <p><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n        </dd-speaker-bubble-soft>\n      </section>\n\n    } @else {\n\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-tabs\">\n              <div class=\"neo-demo-tabs__header\">\n                @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n                  <button\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                }\n              </div>\n\n              <div class=\"neo-demo-tabs__content\">\n                @if (activeHorizontalTab().id === 'rush') {\n                  <article 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                }\n                @if (activeHorizontalTab().id === 'drop') {\n                  <article 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                }\n                @if (activeHorizontalTab().id === 'review') {\n                  <article 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                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n                  <button\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                }\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                @if (activeVerticalTab().id === 'pulse') {\n                  <article 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                }\n                @if (activeVerticalTab().id === 'stack') {\n                  <article 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                }\n                @if (activeVerticalTab().id === 'blast') {\n                  <article 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                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{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)}.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__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);min-height:180px}.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){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { 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=\"tabs-page\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"page-header\">\n    <div class=\"page-header__badges\">\n      <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n  </header>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    @if (activeStyleTab().id === 'classic') {\n\n      <!-- Description -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <div>\n              <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n              <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n            </div>\n          </div>\n\n          <div class=\"feature-cards\">\n            <dd-card-minimal [color]=\"colorViolet\">\n              <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorOrange\">\n              <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorGray\">\n              <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n            </dd-card-minimal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- API -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n          </div>\n\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>tabs</strong>\n              <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>tabChange</strong>\n              <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n            </div>\n          </div>\n\n          <h3 class=\"sub-title\">DuckDevTabItem</h3>\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>id</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>label</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>content</strong>\n              <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Code -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n          </div>\n\n          <ng-template #tabsUsageTemplate>\n            <pre class=\"accordion-code\"><code>&lt;duck-dev-tab\n  [tabs]=\"tabs\"\n  (tabChange)=\"onTabChange($event)\"\n&gt;\n  &#64;if (activeTab().id === 'first') {{ '{' }}\n    &lt;p&gt;First tab content&lt;/p&gt;\n  {{ '}' }}\n  &#64;if (activeTab().id === 'second') {{ '{' }}\n    &lt;p&gt;Second tab content&lt;/p&gt;\n  {{ '}' }}\n&lt;/duck-dev-tab&gt;</code></pre>\n          </ng-template>\n\n          <ng-template #tabsUsageComponent>\n            <pre class=\"accordion-code\"><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '&#64;jsverse/transloco';\n\n&#64;Component({{ '{' }}\n  imports: [DuckDevTab],\n  // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n  private readonly t = inject(TranslocoService);\n\n  tabs: DuckDevTabItem[] = [\n    {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n    {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n  ];\n\n  activeTab = signal&lt;DuckDevTabItem&gt;(this.tabs[0]);\n\n  onTabChange(tab: DuckDevTabItem) {{ '{' }}\n    this.activeTab.set(tab);\n  {{ '}' }}\n{{ '}' }}</code></pre>\n          </ng-template>\n\n          <div class=\"accordion-row\">\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n              [content]=\"tabsUsageTemplate\"\n              [color]=\"colorOrange\"\n            />\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n              [content]=\"tabsUsageComponent\"\n              [color]=\"colorViolet\"\n            />\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Live demo -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n          </div>\n\n          <div class=\"live-demo\">\n            <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n              @if (activeDemoTab().id === 'overview') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'features') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'api') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n                </div>\n              }\n            </duck-dev-tab>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Tip -->\n      <section class=\"tab-section\">\n        <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n          <p><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n        </dd-speaker-bubble-soft>\n      </section>\n\n    } @else {\n\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-tabs\">\n              <div class=\"neo-demo-tabs__header\">\n                @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n                  <button\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                }\n              </div>\n\n              <div class=\"neo-demo-tabs__content\">\n                @if (activeHorizontalTab().id === 'rush') {\n                  <article 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                }\n                @if (activeHorizontalTab().id === 'drop') {\n                  <article 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                }\n                @if (activeHorizontalTab().id === 'review') {\n                  <article 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                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n                  <button\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                }\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                @if (activeVerticalTab().id === 'pulse') {\n                  <article 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                }\n                @if (activeVerticalTab().id === 'stack') {\n                  <article 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                }\n                @if (activeVerticalTab().id === 'blast') {\n                  <article 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                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);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)}.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-neo-ink);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-neo-ink);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-neo-ink);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__content{overflow:hidden;border:3px solid var(--dd-neo-ink);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-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.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-neo-ink);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){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
             type: Component,
@@ -3905,7 +3905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         Badge,
                         DuckDevAccordionComponent,
                         DuckDevSpeakerBubbleSoft,
-                    ], template: "<div class=\"tabs-page\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"page-header\">\n    <div class=\"page-header__badges\">\n      <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n  </header>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    @if (activeStyleTab().id === 'classic') {\n\n      <!-- Description -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <div>\n              <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n              <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n            </div>\n          </div>\n\n          <div class=\"feature-cards\">\n            <dd-card-minimal [color]=\"colorViolet\">\n              <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorOrange\">\n              <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorGray\">\n              <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n            </dd-card-minimal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- API -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n          </div>\n\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>tabs</strong>\n              <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>tabChange</strong>\n              <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n            </div>\n          </div>\n\n          <h3 class=\"sub-title\">DuckDevTabItem</h3>\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>id</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>label</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>content</strong>\n              <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Code -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n          </div>\n\n          <ng-template #tabsUsageTemplate>\n            <pre class=\"accordion-code\"><code>&lt;duck-dev-tab\n  [tabs]=\"tabs\"\n  (tabChange)=\"onTabChange($event)\"\n&gt;\n  &#64;if (activeTab().id === 'first') {{ '{' }}\n    &lt;p&gt;First tab content&lt;/p&gt;\n  {{ '}' }}\n  &#64;if (activeTab().id === 'second') {{ '{' }}\n    &lt;p&gt;Second tab content&lt;/p&gt;\n  {{ '}' }}\n&lt;/duck-dev-tab&gt;</code></pre>\n          </ng-template>\n\n          <ng-template #tabsUsageComponent>\n            <pre class=\"accordion-code\"><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '&#64;jsverse/transloco';\n\n&#64;Component({{ '{' }}\n  imports: [DuckDevTab],\n  // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n  private readonly t = inject(TranslocoService);\n\n  tabs: DuckDevTabItem[] = [\n    {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n    {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n  ];\n\n  activeTab = signal&lt;DuckDevTabItem&gt;(this.tabs[0]);\n\n  onTabChange(tab: DuckDevTabItem) {{ '{' }}\n    this.activeTab.set(tab);\n  {{ '}' }}\n{{ '}' }}</code></pre>\n          </ng-template>\n\n          <div class=\"accordion-row\">\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n              [content]=\"tabsUsageTemplate\"\n              [color]=\"colorOrange\"\n            />\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n              [content]=\"tabsUsageComponent\"\n              [color]=\"colorViolet\"\n            />\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Live demo -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n          </div>\n\n          <div class=\"live-demo\">\n            <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n              @if (activeDemoTab().id === 'overview') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'features') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'api') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n                </div>\n              }\n            </duck-dev-tab>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Tip -->\n      <section class=\"tab-section\">\n        <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n          <p><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n        </dd-speaker-bubble-soft>\n      </section>\n\n    } @else {\n\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-tabs\">\n              <div class=\"neo-demo-tabs__header\">\n                @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n                  <button\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                }\n              </div>\n\n              <div class=\"neo-demo-tabs__content\">\n                @if (activeHorizontalTab().id === 'rush') {\n                  <article 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                }\n                @if (activeHorizontalTab().id === 'drop') {\n                  <article 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                }\n                @if (activeHorizontalTab().id === 'review') {\n                  <article 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                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n                  <button\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                }\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                @if (activeVerticalTab().id === 'pulse') {\n                  <article 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                }\n                @if (activeVerticalTab().id === 'stack') {\n                  <article 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                }\n                @if (activeVerticalTab().id === 'blast') {\n                  <article 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                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{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)}.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__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);min-height:180px}.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){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"] }]
+                    ], template: "<div class=\"tabs-page\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"page-header\">\n    <div class=\"page-header__badges\">\n      <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n  </header>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    @if (activeStyleTab().id === 'classic') {\n\n      <!-- Description -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <div>\n              <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n              <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n            </div>\n          </div>\n\n          <div class=\"feature-cards\">\n            <dd-card-minimal [color]=\"colorViolet\">\n              <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorOrange\">\n              <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorGray\">\n              <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n            </dd-card-minimal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- API -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n          </div>\n\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>tabs</strong>\n              <dd-badge [text]=\"'required'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>tabChange</strong>\n              <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n            </div>\n          </div>\n\n          <h3 class=\"sub-title\">DuckDevTabItem</h3>\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>id</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>label</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>content</strong>\n              <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Code -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n          </div>\n\n          <ng-template #tabsUsageTemplate>\n            <pre class=\"accordion-code\"><code>&lt;duck-dev-tab\n  [tabs]=\"tabs\"\n  (tabChange)=\"onTabChange($event)\"\n&gt;\n  &#64;if (activeTab().id === 'first') {{ '{' }}\n    &lt;p&gt;First tab content&lt;/p&gt;\n  {{ '}' }}\n  &#64;if (activeTab().id === 'second') {{ '{' }}\n    &lt;p&gt;Second tab content&lt;/p&gt;\n  {{ '}' }}\n&lt;/duck-dev-tab&gt;</code></pre>\n          </ng-template>\n\n          <ng-template #tabsUsageComponent>\n            <pre class=\"accordion-code\"><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '&#64;jsverse/transloco';\n\n&#64;Component({{ '{' }}\n  imports: [DuckDevTab],\n  // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n  private readonly t = inject(TranslocoService);\n\n  tabs: DuckDevTabItem[] = [\n    {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n    {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n  ];\n\n  activeTab = signal&lt;DuckDevTabItem&gt;(this.tabs[0]);\n\n  onTabChange(tab: DuckDevTabItem) {{ '{' }}\n    this.activeTab.set(tab);\n  {{ '}' }}\n{{ '}' }}</code></pre>\n          </ng-template>\n\n          <div class=\"accordion-row\">\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n              [content]=\"tabsUsageTemplate\"\n              [color]=\"colorOrange\"\n            />\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n              [content]=\"tabsUsageComponent\"\n              [color]=\"colorViolet\"\n            />\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Live demo -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n          </div>\n\n          <div class=\"live-demo\">\n            <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n              @if (activeDemoTab().id === 'overview') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'features') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'api') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n                </div>\n              }\n            </duck-dev-tab>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Tip -->\n      <section class=\"tab-section\">\n        <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n          <p><strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong> {{ 'tabsComponent.classicTip.text' | transloco }}</p>\n        </dd-speaker-bubble-soft>\n      </section>\n\n    } @else {\n\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-tabs\">\n              <div class=\"neo-demo-tabs__header\">\n                @for (tab of neoHorizontalTabs; track tab.id; let i = $index) {\n                  <button\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                }\n              </div>\n\n              <div class=\"neo-demo-tabs__content\">\n                @if (activeHorizontalTab().id === 'rush') {\n                  <article 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                }\n                @if (activeHorizontalTab().id === 'drop') {\n                  <article 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                }\n                @if (activeHorizontalTab().id === 'review') {\n                  <article 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                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n                  <button\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                }\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                @if (activeVerticalTab().id === 'pulse') {\n                  <article 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                }\n                @if (activeVerticalTab().id === 'stack') {\n                  <article 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                }\n                @if (activeVerticalTab().id === 'blast') {\n                  <article 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                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);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)}.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-neo-ink);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-neo-ink);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-neo-ink);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__content{overflow:hidden;border:3px solid var(--dd-neo-ink);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-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.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-neo-ink);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){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"] }]
         }] });
 class DuckDevInput {
@@ -4821,7 +4821,7 @@ getError(controlName: string): string {
         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: "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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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" }] });
+    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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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-neo-ink);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,
@@ -4837,7 +4837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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"] }]
+                    ], 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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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-neo-ink);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 DuckDevNotification {
@@ -4888,11 +4888,11 @@ class DuckDevNotification {
         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]=\"'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);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);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"] }] });
+    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-neo-ink);--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);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);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]=\"'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);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);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"] }]
+            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-neo-ink);--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);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);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 {
@@ -5052,7 +5052,7 @@ class BadgeBlock {
         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: "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]=\"slabBadgeText\" [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\n                [kicker]=\"stampBadgeKicker\"\n                [text]=\"stampBadgeText\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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: ["kicker", "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" }] });
+    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]=\"slabBadgeText\" [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\n                [kicker]=\"stampBadgeKicker\"\n                [text]=\"stampBadgeText\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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-neo-ink);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: ["kicker", "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,
@@ -5066,7 +5066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         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]=\"slabBadgeText\" [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\n                [kicker]=\"stampBadgeKicker\"\n                [text]=\"stampBadgeText\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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"] }]
+                    ], 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]=\"slabBadgeText\" [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\n                [kicker]=\"stampBadgeKicker\"\n                [text]=\"stampBadgeText\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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-neo-ink);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 {
@@ -5112,7 +5112,7 @@ class AccordionBlock {
         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: "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  stampLabel=\"Duck Dev\"\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>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n              text rendered in the header\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                stampLabel=\"Duck Dev\"\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                stampLabel=\"Duck Dev\"\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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", "stampLabel", "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" }] });
+    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  stampLabel=\"Duck Dev\"\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>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n              text rendered in the header\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                stampLabel=\"Duck Dev\"\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                stampLabel=\"Duck Dev\"\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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-neo-ink);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", "stampLabel", "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,
@@ -5122,7 +5122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         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  stampLabel=\"Duck Dev\"\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>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n              text rendered in the header\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                stampLabel=\"Duck Dev\"\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                stampLabel=\"Duck Dev\"\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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"] }]
+                    ], 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  stampLabel=\"Duck Dev\"\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>stampLabel</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 brand stamp\n              text rendered in the header\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                stampLabel=\"Duck Dev\"\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                stampLabel=\"Duck Dev\"\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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-neo-ink);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 {
@@ -5427,7 +5427,7 @@ 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: "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\n  [color]=\"colorOrange\"\n  strapLabel=\"Swipe deck\"\n  [swipeable]=\"true\"\n  [swipeThreshold]=\"112\"\n  (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n  (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n&gt;\n  &lt;h4&gt;Launch queue&lt;/h4&gt;\n  &lt;p&gt;Swipe right to keep the card, swipe left to skip it.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n          <pre><code>&lt;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=\"Swipe right to keep this card in the active deck.\"\n  metricLabel=\"Signal\"\n  metric=\"99%\"\n  [swipeable]=\"true\"\n  [swipeThreshold]=\"112\"\n  (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n  (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n/&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 / Swipe</p>\n              @if (neobrutalSwipeVisible()) {\n                <dd-card-neobrutal-slab\n                  [color]=\"colorOrange\"\n                  [swipeable]=\"true\"\n                  [swipeThreshold]=\"112\"\n                  [strapLabel]=\"neobrutalSwipeCard().strapLabel\"\n                  (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n                  (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n                >\n                  <h4>{{ neobrutalSwipeCard().title }}</h4>\n                  <p>{{ neobrutalSwipeCard().description }}</p>\n                </dd-card-neobrutal-slab>\n              }\n              <p class=\"example-note\">{{ neobrutalSwipeStatus() }}</p>\n            </div>\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 / Swipe</p>\n              @if (neobrutalPosterSwipeVisible()) {\n                <dd-card-neobrutal-poster\n                  [color]=\"colorDark\"\n                  [railTop]=\"neobrutalPosterSwipeCard().railTop\"\n                  [railMiddle]=\"neobrutalPosterSwipeCard().railMiddle\"\n                  [railBottom]=\"neobrutalPosterSwipeCard().railBottom\"\n                  [eyebrow]=\"neobrutalPosterSwipeCard().eyebrow\"\n                  [badge]=\"neobrutalPosterSwipeCard().badge\"\n                  [title]=\"neobrutalPosterSwipeCard().title\"\n                  [description]=\"neobrutalPosterSwipeCard().description\"\n                  [metricLabel]=\"neobrutalPosterSwipeCard().metricLabel\"\n                  [metric]=\"neobrutalPosterSwipeCard().metric\"\n                  [swipeable]=\"true\"\n                  [swipeThreshold]=\"112\"\n                  (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n                  (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n                />\n              }\n              <p class=\"example-note\">{{ neobrutalPosterSwipeStatus() }}</p>\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}.demo-container .examples-block .example-row .example-item .example-note{margin:0;padding:10px 12px;border:2px solid var(--dd-base-600);background:color-mix(in srgb,var(--dd-base-accent-yellow) 20%,var(--dd-base-0));font-size:13px;font-weight:700;line-height:1.4;color:var(--dd-base-600)}@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", "swipeable", "swipeThreshold"], outputs: ["swipedLeft", "swipedRight"] }, { kind: "component", type: DuckDevCardNeobrutalSlab, selector: "dd-card-neobrutal-slab", inputs: ["color", "strapLabel", "swipeable", "swipeThreshold"], outputs: ["swipedLeft", "swipedRight"] }, { 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" }] });
+    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\n  [color]=\"colorOrange\"\n  strapLabel=\"Swipe deck\"\n  [swipeable]=\"true\"\n  [swipeThreshold]=\"112\"\n  (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n  (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n&gt;\n  &lt;h4&gt;Launch queue&lt;/h4&gt;\n  &lt;p&gt;Swipe right to keep the card, swipe left to skip it.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n          <pre><code>&lt;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=\"Swipe right to keep this card in the active deck.\"\n  metricLabel=\"Signal\"\n  metric=\"99%\"\n  [swipeable]=\"true\"\n  [swipeThreshold]=\"112\"\n  (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n  (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n/&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 / Swipe</p>\n              @if (neobrutalSwipeVisible()) {\n                <dd-card-neobrutal-slab\n                  [color]=\"colorOrange\"\n                  [swipeable]=\"true\"\n                  [swipeThreshold]=\"112\"\n                  [strapLabel]=\"neobrutalSwipeCard().strapLabel\"\n                  (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n                  (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n                >\n                  <h4>{{ neobrutalSwipeCard().title }}</h4>\n                  <p>{{ neobrutalSwipeCard().description }}</p>\n                </dd-card-neobrutal-slab>\n              }\n              <p class=\"example-note\">{{ neobrutalSwipeStatus() }}</p>\n            </div>\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 / Swipe</p>\n              @if (neobrutalPosterSwipeVisible()) {\n                <dd-card-neobrutal-poster\n                  [color]=\"colorDark\"\n                  [railTop]=\"neobrutalPosterSwipeCard().railTop\"\n                  [railMiddle]=\"neobrutalPosterSwipeCard().railMiddle\"\n                  [railBottom]=\"neobrutalPosterSwipeCard().railBottom\"\n                  [eyebrow]=\"neobrutalPosterSwipeCard().eyebrow\"\n                  [badge]=\"neobrutalPosterSwipeCard().badge\"\n                  [title]=\"neobrutalPosterSwipeCard().title\"\n                  [description]=\"neobrutalPosterSwipeCard().description\"\n                  [metricLabel]=\"neobrutalPosterSwipeCard().metricLabel\"\n                  [metric]=\"neobrutalPosterSwipeCard().metric\"\n                  [swipeable]=\"true\"\n                  [swipeThreshold]=\"112\"\n                  (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n                  (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n                />\n              }\n              <p class=\"example-note\">{{ neobrutalPosterSwipeStatus() }}</p>\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-neo-ink);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-neo-ink);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}.demo-container .examples-block .example-row .example-item .example-note{margin:0;padding:10px 12px;border:2px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-base-accent-yellow) 20%,var(--dd-base-0));font-size:13px;font-weight:700;line-height:1.4;color:var(--dd-base-600)}@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", "swipeable", "swipeThreshold"], outputs: ["swipedLeft", "swipedRight"] }, { kind: "component", type: DuckDevCardNeobrutalSlab, selector: "dd-card-neobrutal-slab", inputs: ["color", "strapLabel", "swipeable", "swipeThreshold"], outputs: ["swipedLeft", "swipedRight"] }, { 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,
@@ -5443,7 +5443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         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\n  [color]=\"colorOrange\"\n  strapLabel=\"Swipe deck\"\n  [swipeable]=\"true\"\n  [swipeThreshold]=\"112\"\n  (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n  (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n&gt;\n  &lt;h4&gt;Launch queue&lt;/h4&gt;\n  &lt;p&gt;Swipe right to keep the card, swipe left to skip it.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n          <pre><code>&lt;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=\"Swipe right to keep this card in the active deck.\"\n  metricLabel=\"Signal\"\n  metric=\"99%\"\n  [swipeable]=\"true\"\n  [swipeThreshold]=\"112\"\n  (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n  (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n/&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 / Swipe</p>\n              @if (neobrutalSwipeVisible()) {\n                <dd-card-neobrutal-slab\n                  [color]=\"colorOrange\"\n                  [swipeable]=\"true\"\n                  [swipeThreshold]=\"112\"\n                  [strapLabel]=\"neobrutalSwipeCard().strapLabel\"\n                  (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n                  (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n                >\n                  <h4>{{ neobrutalSwipeCard().title }}</h4>\n                  <p>{{ neobrutalSwipeCard().description }}</p>\n                </dd-card-neobrutal-slab>\n              }\n              <p class=\"example-note\">{{ neobrutalSwipeStatus() }}</p>\n            </div>\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 / Swipe</p>\n              @if (neobrutalPosterSwipeVisible()) {\n                <dd-card-neobrutal-poster\n                  [color]=\"colorDark\"\n                  [railTop]=\"neobrutalPosterSwipeCard().railTop\"\n                  [railMiddle]=\"neobrutalPosterSwipeCard().railMiddle\"\n                  [railBottom]=\"neobrutalPosterSwipeCard().railBottom\"\n                  [eyebrow]=\"neobrutalPosterSwipeCard().eyebrow\"\n                  [badge]=\"neobrutalPosterSwipeCard().badge\"\n                  [title]=\"neobrutalPosterSwipeCard().title\"\n                  [description]=\"neobrutalPosterSwipeCard().description\"\n                  [metricLabel]=\"neobrutalPosterSwipeCard().metricLabel\"\n                  [metric]=\"neobrutalPosterSwipeCard().metric\"\n                  [swipeable]=\"true\"\n                  [swipeThreshold]=\"112\"\n                  (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n                  (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n                />\n              }\n              <p class=\"example-note\">{{ neobrutalPosterSwipeStatus() }}</p>\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}.demo-container .examples-block .example-row .example-item .example-note{margin:0;padding:10px 12px;border:2px solid var(--dd-base-600);background:color-mix(in srgb,var(--dd-base-accent-yellow) 20%,var(--dd-base-0));font-size:13px;font-weight:700;line-height:1.4;color:var(--dd-base-600)}@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"] }]
+                    ], 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\n  [color]=\"colorOrange\"\n  strapLabel=\"Swipe deck\"\n  [swipeable]=\"true\"\n  [swipeThreshold]=\"112\"\n  (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n  (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n&gt;\n  &lt;h4&gt;Launch queue&lt;/h4&gt;\n  &lt;p&gt;Swipe right to keep the card, swipe left to skip it.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n          <pre><code>&lt;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=\"Swipe right to keep this card in the active deck.\"\n  metricLabel=\"Signal\"\n  metric=\"99%\"\n  [swipeable]=\"true\"\n  [swipeThreshold]=\"112\"\n  (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n  (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n/&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 / Swipe</p>\n              @if (neobrutalSwipeVisible()) {\n                <dd-card-neobrutal-slab\n                  [color]=\"colorOrange\"\n                  [swipeable]=\"true\"\n                  [swipeThreshold]=\"112\"\n                  [strapLabel]=\"neobrutalSwipeCard().strapLabel\"\n                  (swipedLeft)=\"onNeobrutalSlabSwipe('left')\"\n                  (swipedRight)=\"onNeobrutalSlabSwipe('right')\"\n                >\n                  <h4>{{ neobrutalSwipeCard().title }}</h4>\n                  <p>{{ neobrutalSwipeCard().description }}</p>\n                </dd-card-neobrutal-slab>\n              }\n              <p class=\"example-note\">{{ neobrutalSwipeStatus() }}</p>\n            </div>\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 / Swipe</p>\n              @if (neobrutalPosterSwipeVisible()) {\n                <dd-card-neobrutal-poster\n                  [color]=\"colorDark\"\n                  [railTop]=\"neobrutalPosterSwipeCard().railTop\"\n                  [railMiddle]=\"neobrutalPosterSwipeCard().railMiddle\"\n                  [railBottom]=\"neobrutalPosterSwipeCard().railBottom\"\n                  [eyebrow]=\"neobrutalPosterSwipeCard().eyebrow\"\n                  [badge]=\"neobrutalPosterSwipeCard().badge\"\n                  [title]=\"neobrutalPosterSwipeCard().title\"\n                  [description]=\"neobrutalPosterSwipeCard().description\"\n                  [metricLabel]=\"neobrutalPosterSwipeCard().metricLabel\"\n                  [metric]=\"neobrutalPosterSwipeCard().metric\"\n                  [swipeable]=\"true\"\n                  [swipeThreshold]=\"112\"\n                  (swipedLeft)=\"onNeobrutalPosterSwipe('left')\"\n                  (swipedRight)=\"onNeobrutalPosterSwipe('right')\"\n                />\n              }\n              <p class=\"example-note\">{{ neobrutalPosterSwipeStatus() }}</p>\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-neo-ink);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-neo-ink);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}.demo-container .examples-block .example-row .example-item .example-note{margin:0;padding:10px 12px;border:2px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-base-accent-yellow) 20%,var(--dd-base-0));font-size:13px;font-weight:700;line-height:1.4;color:var(--dd-base-600)}@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 {
@@ -5520,7 +5520,7 @@ class TooltipBlock {
         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: "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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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" }] });
+    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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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-neo-ink);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-neo-ink);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,
@@ -5532,7 +5532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         DdFlexDirectionDirective,
                         DuckDevCardSection,
                         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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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"] }]
+                    ], 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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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-neo-ink);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-neo-ink);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-neo-ink);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"] }]
         }] });
 function clampProgress(value) {
@@ -5920,11 +5920,11 @@ class SegmentBlock {
         this.lastEvent.set(e.detail.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n          <duck-dev-segment-neobrutal\n            [value]=\"neobrutalSelected()\"\n            [color]=\"colorViolet\"\n            (valueChange)=\"neobrutalSelected.set($event)\"\n          >\n            <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ neobrutalSelected() }}</b>\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n          <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n            <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\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}.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:280px;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}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.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: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "component", type: DuckDevSegmentNeobrutal, selector: "duck-dev-segment-neobrutal", inputs: ["value", "color"], outputs: ["valueChange", "ionChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n          <duck-dev-segment-neobrutal\n            [value]=\"neobrutalSelected()\"\n            [color]=\"colorViolet\"\n            (valueChange)=\"neobrutalSelected.set($event)\"\n          >\n            <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ neobrutalSelected() }}</b>\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n          <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n            <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\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}.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:280px;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}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.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: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "component", type: DuckDevSegmentNeobrutal, selector: "duck-dev-segment-neobrutal", inputs: ["value", "color"], outputs: ["valueChange", "ionChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton, DuckDevSegmentNeobrutal], template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n          <duck-dev-segment-neobrutal\n            [value]=\"neobrutalSelected()\"\n            [color]=\"colorViolet\"\n            (valueChange)=\"neobrutalSelected.set($event)\"\n          >\n            <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ neobrutalSelected() }}</b>\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n          <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n            <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\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}.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:280px;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}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+            args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton, DuckDevSegmentNeobrutal], template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n          <duck-dev-segment-neobrutal\n            [value]=\"neobrutalSelected()\"\n            [color]=\"colorViolet\"\n            (valueChange)=\"neobrutalSelected.set($event)\"\n          >\n            <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ neobrutalSelected() }}</b>\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n          <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n            <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\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}.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:280px;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}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 class ProgressBarBlock {
@@ -5949,7 +5949,7 @@ class ProgressBarBlock {
         this.activeStyleTab.set(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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 .component-section{margin-bottom:40px}.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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .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-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@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-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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 .component-section{margin-bottom:40px}.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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .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-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@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-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, decorators: [{
             type: Component,
@@ -5962,7 +5962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         DuckDevProgressNeobrutalSlab,
                         DuckDevProgressNeobrutalStamp,
                         DuckDevProgressNeobrutalTicket,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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 .component-section{margin-bottom:40px}.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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .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-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@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-item{min-width:100%}}\n"] }]
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\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);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[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);--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[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 .component-section{margin-bottom:40px}.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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .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-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@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-item{min-width:100%}}\n"] }]
         }] });
 class SpeakerBubbleBlock {
@@ -5996,7 +5996,7 @@ class SpeakerBubbleBlock {
         return el;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SpeakerBubbleBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SpeakerBubbleBlock, isStandalone: true, selector: "app-speaker-bubble-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n  <dd-card-accent [color]=\"colorWhite\">\n    <div [innerHTML]=\"introEl.innerHTML\"></div>\n  </dd-card-accent>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;Product team&lt;/small&gt;\n  &lt;p&gt;Can we move the onboarding review to Thursday?&lt;/p&gt;\n&lt;/dd-speaker-bubble-classic&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-classic\n                  [color]=\"colorWhite\"\n                  [tail]=\"'left'\"\n                  [target]=\"classicLeftTarget\"\n                >\n                  <small>Design sync</small>\n                  <p>Can we keep the hero copy shorter on mobile?</p>\n                </dd-speaker-bubble-classic>\n                <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-classic\n                  [color]=\"colorViolet\"\n                  [tail]=\"'right'\"\n                  [target]=\"classicRightTarget\"\n                >\n                  <small>Frontend</small>\n                  <p><strong>Yes</strong>, the block can keep a CTA and badge inside projected content.</p>\n                </dd-speaker-bubble-classic>\n                <span\n                  class=\"bubble-target bubble-target--violet\"\n                  #classicRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\"&gt;\n  &lt;small&gt;Assistant&lt;/small&gt;\n  &lt;p&gt;Projected markup can include &lt;strong&gt;inline emphasis&lt;/strong&gt; and metadata.&lt;/p&gt;\n&lt;/dd-speaker-bubble-soft&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-soft\n                  [color]=\"colorOrange\"\n                  [tail]=\"'left'\"\n                  [target]=\"softLeftTarget\"\n                >\n                  <small>Release note</small>\n                  <p>Bubble keeps a softer glassy surface for editorial comments and gentle callouts.</p>\n                </dd-speaker-bubble-soft>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #softLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-soft\n                  [color]=\"colorDark\"\n                  [tail]=\"'right'\"\n                  [target]=\"softRightTarget\"\n                >\n                  <small>Night queue</small>\n                  <p>Rich content can stay readable even on dark palette variants.</p>\n                </dd-speaker-bubble-soft>\n                <span\n                  class=\"bubble-target bubble-target--dark\"\n                  #softRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;System&lt;/small&gt;\n  &lt;p&gt;Outline variants work well for neutral hints and documentation notes.&lt;/p&gt;\n&lt;/dd-speaker-bubble-outline&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-outline\n                  [color]=\"colorGray\"\n                  [tail]=\"'left'\"\n                  [target]=\"outlineLeftTarget\"\n                >\n                  <small>Documentation</small>\n                  <p>Outlined speaker bubbles are useful for neutral side notes in dense layouts.</p>\n                </dd-speaker-bubble-outline>\n                <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-outline\n                  [color]=\"colorWhite\"\n                  [tail]=\"'right'\"\n                  [target]=\"outlineRightTarget\"\n                >\n                  <small>QA</small>\n                  <p>Tail position still flips while content remains projected markup.</p>\n                </dd-speaker-bubble-outline>\n                <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n    } @else {\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;Live drop&lt;/small&gt;\n  &lt;p&gt;Use ng-content for bold labels, paragraphs and inline status chips.&lt;/p&gt;\n&lt;/dd-speaker-bubble-neobrutal-slab&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-neobrutal-slab\n                  [color]=\"colorOrange\"\n                  [tail]=\"'left'\"\n                  [target]=\"slabLeftTarget\"\n                >\n                  <small>Queue A</small>\n                  <p><strong>Live</strong> release banner for dashboards, status walls and loud interface narration.</p>\n                </dd-speaker-bubble-neobrutal-slab>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #slabLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--neobrutal example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-neobrutal-slab\n                  [color]=\"colorViolet\"\n                  [tail]=\"'right'\"\n                  [target]=\"slabRightTarget\"\n                >\n                  <small>Ops</small>\n                  <p>The slab version keeps a heavy tail and rigid geometry for louder chat layouts.</p>\n                </dd-speaker-bubble-neobrutal-slab>\n                <span\n                  class=\"bubble-target bubble-target--violet\"\n                  #slabRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\"&gt;\n  &lt;small&gt;Alert feed&lt;/small&gt;\n  &lt;p&gt;Projected content stays flexible while the component provides the ticket shell.&lt;/p&gt;\n&lt;/dd-speaker-bubble-neobrutal-ticket&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-neobrutal-ticket\n                  [color]=\"colorDark\"\n                  [tail]=\"'left'\"\n                  [target]=\"ticketLeftTarget\"\n                >\n                  <small>Alert feed</small>\n                  <p>Ticket framing works for warning streams, operations chatter and serialized event logs.</p>\n                </dd-speaker-bubble-neobrutal-ticket>\n                <span\n                  class=\"bubble-target bubble-target--dark\"\n                  #ticketLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--neobrutal example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-neobrutal-ticket\n                  [color]=\"colorWhite\"\n                  [tail]=\"'right'\"\n                  [target]=\"ticketRightTarget\"\n                >\n                  <small>Review</small>\n                  <p><strong>Approved</strong> for launch preview, keep the counter-note visible in the timeline.</p>\n                </dd-speaker-bubble-neobrutal-ticket>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #ticketRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\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:30px;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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--right .example-label{text-align:right}.demo-container .examples-block .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-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-base-600);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@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: "component", type: DuckDevSpeakerBubbleClassic, selector: "dd-speaker-bubble-classic", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleOutline, selector: "dd-speaker-bubble-outline", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleNeobrutalSlab, selector: "dd-speaker-bubble-neobrutal-slab", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleNeobrutalTicket, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SpeakerBubbleBlock, isStandalone: true, selector: "app-speaker-bubble-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n  <dd-card-accent [color]=\"colorWhite\">\n    <div [innerHTML]=\"introEl.innerHTML\"></div>\n  </dd-card-accent>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;Product team&lt;/small&gt;\n  &lt;p&gt;Can we move the onboarding review to Thursday?&lt;/p&gt;\n&lt;/dd-speaker-bubble-classic&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-classic\n                  [color]=\"colorWhite\"\n                  [tail]=\"'left'\"\n                  [target]=\"classicLeftTarget\"\n                >\n                  <small>Design sync</small>\n                  <p>Can we keep the hero copy shorter on mobile?</p>\n                </dd-speaker-bubble-classic>\n                <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-classic\n                  [color]=\"colorViolet\"\n                  [tail]=\"'right'\"\n                  [target]=\"classicRightTarget\"\n                >\n                  <small>Frontend</small>\n                  <p><strong>Yes</strong>, the block can keep a CTA and badge inside projected content.</p>\n                </dd-speaker-bubble-classic>\n                <span\n                  class=\"bubble-target bubble-target--violet\"\n                  #classicRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\"&gt;\n  &lt;small&gt;Assistant&lt;/small&gt;\n  &lt;p&gt;Projected markup can include &lt;strong&gt;inline emphasis&lt;/strong&gt; and metadata.&lt;/p&gt;\n&lt;/dd-speaker-bubble-soft&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-soft\n                  [color]=\"colorOrange\"\n                  [tail]=\"'left'\"\n                  [target]=\"softLeftTarget\"\n                >\n                  <small>Release note</small>\n                  <p>Bubble keeps a softer glassy surface for editorial comments and gentle callouts.</p>\n                </dd-speaker-bubble-soft>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #softLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-soft\n                  [color]=\"colorDark\"\n                  [tail]=\"'right'\"\n                  [target]=\"softRightTarget\"\n                >\n                  <small>Night queue</small>\n                  <p>Rich content can stay readable even on dark palette variants.</p>\n                </dd-speaker-bubble-soft>\n                <span\n                  class=\"bubble-target bubble-target--dark\"\n                  #softRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;System&lt;/small&gt;\n  &lt;p&gt;Outline variants work well for neutral hints and documentation notes.&lt;/p&gt;\n&lt;/dd-speaker-bubble-outline&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-outline\n                  [color]=\"colorGray\"\n                  [tail]=\"'left'\"\n                  [target]=\"outlineLeftTarget\"\n                >\n                  <small>Documentation</small>\n                  <p>Outlined speaker bubbles are useful for neutral side notes in dense layouts.</p>\n                </dd-speaker-bubble-outline>\n                <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-outline\n                  [color]=\"colorWhite\"\n                  [tail]=\"'right'\"\n                  [target]=\"outlineRightTarget\"\n                >\n                  <small>QA</small>\n                  <p>Tail position still flips while content remains projected markup.</p>\n                </dd-speaker-bubble-outline>\n                <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n    } @else {\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;Live drop&lt;/small&gt;\n  &lt;p&gt;Use ng-content for bold labels, paragraphs and inline status chips.&lt;/p&gt;\n&lt;/dd-speaker-bubble-neobrutal-slab&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-neobrutal-slab\n                  [color]=\"colorOrange\"\n                  [tail]=\"'left'\"\n                  [target]=\"slabLeftTarget\"\n                >\n                  <small>Queue A</small>\n                  <p><strong>Live</strong> release banner for dashboards, status walls and loud interface narration.</p>\n                </dd-speaker-bubble-neobrutal-slab>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #slabLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--neobrutal example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-neobrutal-slab\n                  [color]=\"colorViolet\"\n                  [tail]=\"'right'\"\n                  [target]=\"slabRightTarget\"\n                >\n                  <small>Ops</small>\n                  <p>The slab version keeps a heavy tail and rigid geometry for louder chat layouts.</p>\n                </dd-speaker-bubble-neobrutal-slab>\n                <span\n                  class=\"bubble-target bubble-target--violet\"\n                  #slabRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\"&gt;\n  &lt;small&gt;Alert feed&lt;/small&gt;\n  &lt;p&gt;Projected content stays flexible while the component provides the ticket shell.&lt;/p&gt;\n&lt;/dd-speaker-bubble-neobrutal-ticket&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-neobrutal-ticket\n                  [color]=\"colorDark\"\n                  [tail]=\"'left'\"\n                  [target]=\"ticketLeftTarget\"\n                >\n                  <small>Alert feed</small>\n                  <p>Ticket framing works for warning streams, operations chatter and serialized event logs.</p>\n                </dd-speaker-bubble-neobrutal-ticket>\n                <span\n                  class=\"bubble-target bubble-target--dark\"\n                  #ticketLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--neobrutal example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-neobrutal-ticket\n                  [color]=\"colorWhite\"\n                  [tail]=\"'right'\"\n                  [target]=\"ticketRightTarget\"\n                >\n                  <small>Review</small>\n                  <p><strong>Approved</strong> for launch preview, keep the counter-note visible in the timeline.</p>\n                </dd-speaker-bubble-neobrutal-ticket>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #ticketRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\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:30px;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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--right .example-label{text-align:right}.demo-container .examples-block .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-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-neo-ink);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@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: "component", type: DuckDevSpeakerBubbleClassic, selector: "dd-speaker-bubble-classic", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleOutline, selector: "dd-speaker-bubble-outline", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleNeobrutalSlab, selector: "dd-speaker-bubble-neobrutal-slab", inputs: ["color", "tail", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleNeobrutalTicket, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: ["color", "tail", "target"] }, { 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: SpeakerBubbleBlock, decorators: [{
             type: Component,
@@ -6010,7 +6010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         DuckDevSpeakerBubbleNeobrutalSlab,
                         DuckDevSpeakerBubbleNeobrutalTicket,
                         DuckDevTab,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n  <dd-card-accent [color]=\"colorWhite\">\n    <div [innerHTML]=\"introEl.innerHTML\"></div>\n  </dd-card-accent>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;Product team&lt;/small&gt;\n  &lt;p&gt;Can we move the onboarding review to Thursday?&lt;/p&gt;\n&lt;/dd-speaker-bubble-classic&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-classic\n                  [color]=\"colorWhite\"\n                  [tail]=\"'left'\"\n                  [target]=\"classicLeftTarget\"\n                >\n                  <small>Design sync</small>\n                  <p>Can we keep the hero copy shorter on mobile?</p>\n                </dd-speaker-bubble-classic>\n                <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-classic\n                  [color]=\"colorViolet\"\n                  [tail]=\"'right'\"\n                  [target]=\"classicRightTarget\"\n                >\n                  <small>Frontend</small>\n                  <p><strong>Yes</strong>, the block can keep a CTA and badge inside projected content.</p>\n                </dd-speaker-bubble-classic>\n                <span\n                  class=\"bubble-target bubble-target--violet\"\n                  #classicRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\"&gt;\n  &lt;small&gt;Assistant&lt;/small&gt;\n  &lt;p&gt;Projected markup can include &lt;strong&gt;inline emphasis&lt;/strong&gt; and metadata.&lt;/p&gt;\n&lt;/dd-speaker-bubble-soft&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-soft\n                  [color]=\"colorOrange\"\n                  [tail]=\"'left'\"\n                  [target]=\"softLeftTarget\"\n                >\n                  <small>Release note</small>\n                  <p>Bubble keeps a softer glassy surface for editorial comments and gentle callouts.</p>\n                </dd-speaker-bubble-soft>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #softLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-soft\n                  [color]=\"colorDark\"\n                  [tail]=\"'right'\"\n                  [target]=\"softRightTarget\"\n                >\n                  <small>Night queue</small>\n                  <p>Rich content can stay readable even on dark palette variants.</p>\n                </dd-speaker-bubble-soft>\n                <span\n                  class=\"bubble-target bubble-target--dark\"\n                  #softRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;System&lt;/small&gt;\n  &lt;p&gt;Outline variants work well for neutral hints and documentation notes.&lt;/p&gt;\n&lt;/dd-speaker-bubble-outline&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-outline\n                  [color]=\"colorGray\"\n                  [tail]=\"'left'\"\n                  [target]=\"outlineLeftTarget\"\n                >\n                  <small>Documentation</small>\n                  <p>Outlined speaker bubbles are useful for neutral side notes in dense layouts.</p>\n                </dd-speaker-bubble-outline>\n                <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-outline\n                  [color]=\"colorWhite\"\n                  [tail]=\"'right'\"\n                  [target]=\"outlineRightTarget\"\n                >\n                  <small>QA</small>\n                  <p>Tail position still flips while content remains projected markup.</p>\n                </dd-speaker-bubble-outline>\n                <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n    } @else {\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;Live drop&lt;/small&gt;\n  &lt;p&gt;Use ng-content for bold labels, paragraphs and inline status chips.&lt;/p&gt;\n&lt;/dd-speaker-bubble-neobrutal-slab&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-neobrutal-slab\n                  [color]=\"colorOrange\"\n                  [tail]=\"'left'\"\n                  [target]=\"slabLeftTarget\"\n                >\n                  <small>Queue A</small>\n                  <p><strong>Live</strong> release banner for dashboards, status walls and loud interface narration.</p>\n                </dd-speaker-bubble-neobrutal-slab>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #slabLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--neobrutal example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-neobrutal-slab\n                  [color]=\"colorViolet\"\n                  [tail]=\"'right'\"\n                  [target]=\"slabRightTarget\"\n                >\n                  <small>Ops</small>\n                  <p>The slab version keeps a heavy tail and rigid geometry for louder chat layouts.</p>\n                </dd-speaker-bubble-neobrutal-slab>\n                <span\n                  class=\"bubble-target bubble-target--violet\"\n                  #slabRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\"&gt;\n  &lt;small&gt;Alert feed&lt;/small&gt;\n  &lt;p&gt;Projected content stays flexible while the component provides the ticket shell.&lt;/p&gt;\n&lt;/dd-speaker-bubble-neobrutal-ticket&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-neobrutal-ticket\n                  [color]=\"colorDark\"\n                  [tail]=\"'left'\"\n                  [target]=\"ticketLeftTarget\"\n                >\n                  <small>Alert feed</small>\n                  <p>Ticket framing works for warning streams, operations chatter and serialized event logs.</p>\n                </dd-speaker-bubble-neobrutal-ticket>\n                <span\n                  class=\"bubble-target bubble-target--dark\"\n                  #ticketLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--neobrutal example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-neobrutal-ticket\n                  [color]=\"colorWhite\"\n                  [tail]=\"'right'\"\n                  [target]=\"ticketRightTarget\"\n                >\n                  <small>Review</small>\n                  <p><strong>Approved</strong> for launch preview, keep the counter-note visible in the timeline.</p>\n                </dd-speaker-bubble-neobrutal-ticket>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #ticketRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\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:30px;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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--right .example-label{text-align:right}.demo-container .examples-block .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-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-base-600);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@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"] }]
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'speakerBubbleDoc.title' | transloco }}</h1>\n\n  <dd-card-accent [color]=\"colorWhite\">\n    <div [innerHTML]=\"introEl.innerHTML\"></div>\n  </dd-card-accent>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.bubbleTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.bubbleDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-classic [color]=\"colorWhite\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;Product team&lt;/small&gt;\n  &lt;p&gt;Can we move the onboarding review to Thursday?&lt;/p&gt;\n&lt;/dd-speaker-bubble-classic&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.leftTail' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-classic\n                  [color]=\"colorWhite\"\n                  [tail]=\"'left'\"\n                  [target]=\"classicLeftTarget\"\n                >\n                  <small>Design sync</small>\n                  <p>Can we keep the hero copy shorter on mobile?</p>\n                </dd-speaker-bubble-classic>\n                <span class=\"bubble-target\" #classicLeftTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.rightTail' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-classic\n                  [color]=\"colorViolet\"\n                  [tail]=\"'right'\"\n                  [target]=\"classicRightTarget\"\n                >\n                  <small>Frontend</small>\n                  <p><strong>Yes</strong>, the block can keep a CTA and badge inside projected content.</p>\n                </dd-speaker-bubble-classic>\n                <span\n                  class=\"bubble-target bubble-target--violet\"\n                  #classicRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.softTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.softDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\"&gt;\n  &lt;small&gt;Assistant&lt;/small&gt;\n  &lt;p&gt;Projected markup can include &lt;strong&gt;inline emphasis&lt;/strong&gt; and metadata.&lt;/p&gt;\n&lt;/dd-speaker-bubble-soft&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.richContent' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-soft\n                  [color]=\"colorOrange\"\n                  [tail]=\"'left'\"\n                  [target]=\"softLeftTarget\"\n                >\n                  <small>Release note</small>\n                  <p>Bubble keeps a softer glassy surface for editorial comments and gentle callouts.</p>\n                </dd-speaker-bubble-soft>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #softLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.darkMode' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-soft\n                  [color]=\"colorDark\"\n                  [tail]=\"'right'\"\n                  [target]=\"softRightTarget\"\n                >\n                  <small>Night queue</small>\n                  <p>Rich content can stay readable even on dark palette variants.</p>\n                </dd-speaker-bubble-soft>\n                <span\n                  class=\"bubble-target bubble-target--dark\"\n                  #softRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.classic.outlineTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.classic.outlineDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-outline [color]=\"colorGray\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;System&lt;/small&gt;\n  &lt;p&gt;Outline variants work well for neutral hints and documentation notes.&lt;/p&gt;\n&lt;/dd-speaker-bubble-outline&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.note' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-outline\n                  [color]=\"colorGray\"\n                  [tail]=\"'left'\"\n                  [target]=\"outlineLeftTarget\"\n                >\n                  <small>Documentation</small>\n                  <p>Outlined speaker bubbles are useful for neutral side notes in dense layouts.</p>\n                </dd-speaker-bubble-outline>\n                <span class=\"bubble-target\" #outlineLeftTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.replyRight' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-outline\n                  [color]=\"colorWhite\"\n                  [tail]=\"'right'\"\n                  [target]=\"outlineRightTarget\"\n                >\n                  <small>QA</small>\n                  <p>Tail position still flips while content remains projected markup.</p>\n                </dd-speaker-bubble-outline>\n                <span class=\"bubble-target\" #outlineRightTarget aria-hidden=\"true\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n    } @else {\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.neobrutal.slabTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.slabDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-neobrutal-slab [color]=\"colorOrange\" [tail]=\"'left'\"&gt;\n  &lt;small&gt;Live drop&lt;/small&gt;\n  &lt;p&gt;Use ng-content for bold labels, paragraphs and inline status chips.&lt;/p&gt;\n&lt;/dd-speaker-bubble-neobrutal-slab&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.livePanel' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-neobrutal-slab\n                  [color]=\"colorOrange\"\n                  [tail]=\"'left'\"\n                  [target]=\"slabLeftTarget\"\n                >\n                  <small>Queue A</small>\n                  <p><strong>Live</strong> release banner for dashboards, status walls and loud interface narration.</p>\n                </dd-speaker-bubble-neobrutal-slab>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #slabLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--neobrutal example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.hotReply' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-neobrutal-slab\n                  [color]=\"colorViolet\"\n                  [tail]=\"'right'\"\n                  [target]=\"slabRightTarget\"\n                >\n                  <small>Ops</small>\n                  <p>The slab version keeps a heavy tail and rigid geometry for louder chat layouts.</p>\n                </dd-speaker-bubble-neobrutal-slab>\n                <span\n                  class=\"bubble-target bubble-target--violet\"\n                  #slabRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </dd-card-section>\n\n      <dd-card-section>\n        <h2>{{ 'speakerBubbleDoc.neobrutal.ticketTitle' | transloco }}</h2>\n        <p class=\"description\">{{ 'speakerBubbleDoc.neobrutal.ticketDescription' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'speakerBubbleDoc.common.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-speaker-bubble-neobrutal-ticket [color]=\"colorDark\" [tail]=\"'right'\"&gt;\n  &lt;small&gt;Alert feed&lt;/small&gt;\n  &lt;p&gt;Projected content stays flexible while the component provides the ticket shell.&lt;/p&gt;\n&lt;/dd-speaker-bubble-neobrutal-ticket&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'speakerBubbleDoc.common.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            <li>\n              <dd-card-accent [color]=\"colorOrange\">\n                <div [innerHTML]=\"inputTailEl.innerHTML\"></div>\n              </dd-card-accent>\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'speakerBubbleDoc.common.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.alertTicket' | transloco }}</p>\n              <div class=\"bubble-preview\">\n                <dd-speaker-bubble-neobrutal-ticket\n                  [color]=\"colorDark\"\n                  [tail]=\"'left'\"\n                  [target]=\"ticketLeftTarget\"\n                >\n                  <small>Alert feed</small>\n                  <p>Ticket framing works for warning streams, operations chatter and serialized event logs.</p>\n                </dd-speaker-bubble-neobrutal-ticket>\n                <span\n                  class=\"bubble-target bubble-target--dark\"\n                  #ticketLeftTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\n\n            <div class=\"example-item example-item--neobrutal example-item--right\">\n              <p class=\"example-label\">{{ 'speakerBubbleDoc.labels.ticketReply' | transloco }}</p>\n              <div class=\"bubble-preview bubble-preview--end\">\n                <dd-speaker-bubble-neobrutal-ticket\n                  [color]=\"colorWhite\"\n                  [tail]=\"'right'\"\n                  [target]=\"ticketRightTarget\"\n                >\n                  <small>Review</small>\n                  <p><strong>Approved</strong> for launch preview, keep the counter-note visible in the timeline.</p>\n                </dd-speaker-bubble-neobrutal-ticket>\n                <span\n                  class=\"bubble-target bubble-target--orange\"\n                  #ticketRightTarget\n                  aria-hidden=\"true\"\n                ></span>\n              </div>\n            </div>\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:30px;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{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--right .example-label{text-align:right}.demo-container .examples-block .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-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .bubble-preview{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:16px;overflow:visible}.demo-container .bubble-preview--end{align-items:flex-end}.demo-container .example-item{overflow:visible}.demo-container .bubble-target{position:relative;width:54px;height:54px;border:2px solid var(--dd-base-300);border-radius:18px;background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-blue) 16%,transparent) 0,transparent 52%),var(--dd-base-100);box-shadow:0 10px 18px color-mix(in srgb,var(--dd-base-400) 24%,transparent);flex:0 0 auto}.demo-container .bubble-target:before{content:\"\";position:absolute;inset:11px 13px 17px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-accent-blue) 22%,var(--dd-base-0))}.demo-container .bubble-target:after{content:\"\";position:absolute;left:17px;right:17px;bottom:10px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--dd-base-300) 85%,var(--dd-base-0))}.demo-container .bubble-target--violet{border-color:color-mix(in srgb,var(--dd-base-secondary) 42%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-secondary) 18%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-secondary) 10%,var(--dd-base-0))}.demo-container .bubble-target--orange{border-color:color-mix(in srgb,var(--dd-base-accent-orange) 46%,var(--dd-base-300));background:radial-gradient(circle at 34% 34%,var(--dd-base-0) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-orange) 22%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark{border-color:var(--dd-base-500);background:radial-gradient(circle at 34% 34%,color-mix(in srgb,var(--dd-base-0) 88%,transparent) 0 18%,transparent 18% 100%),linear-gradient(145deg,color-mix(in srgb,var(--dd-base-accent-yellow) 16%,transparent) 0,transparent 52%),color-mix(in srgb,var(--dd-base-600) 92%,var(--dd-base-500))}.demo-container .bubble-target--dark:before{background:color-mix(in srgb,var(--dd-base-accent-yellow) 18%,var(--dd-base-0))}.demo-container .bubble-target--dark:after{background:color-mix(in srgb,var(--dd-base-400) 80%,var(--dd-base-600))}.demo-container .example-item--neobrutal .bubble-target{border-width:4px;border-color:var(--dd-neo-ink);border-radius:0;box-shadow:6px 6px 0 var(--dd-base-600)}@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 DuckDevBreadcrumbClassic {
@@ -6109,11 +6109,11 @@ class BreadcrumbBlock {
         this.lastNavigated.set(item.label);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-breadcrumb-classic\n  [items]=\"breadcrumbs\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;\n\n&lt;dd-breadcrumb-neobrutal\n  [items]=\"breadcrumbs\"\n  [color]=\"colorViolet\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n        <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"basicItems\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"longItems\"\n            separator=\">\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorViolet\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"longItems\"\n            [color]=\"colorOrange\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorDark\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      @if (lastNavigated()) {\n        <div class=\"state-hint state-hint--neobrutal\">\n          <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n          <b>{{ lastNavigated() }}</b>\n        </div>\n      }\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.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:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;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}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.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: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevBreadcrumbClassic, selector: "dd-breadcrumb-classic", inputs: ["items", "separator"], outputs: ["navigate"] }, { kind: "component", type: DuckDevBreadcrumbNeobrutal, selector: "dd-breadcrumb-neobrutal", inputs: ["items", "color"], outputs: ["navigate"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-breadcrumb-classic\n  [items]=\"breadcrumbs\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;\n\n&lt;dd-breadcrumb-neobrutal\n  [items]=\"breadcrumbs\"\n  [color]=\"colorViolet\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n        <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"basicItems\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"longItems\"\n            separator=\">\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorViolet\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"longItems\"\n            [color]=\"colorOrange\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorDark\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      @if (lastNavigated()) {\n        <div class=\"state-hint state-hint--neobrutal\">\n          <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n          <b>{{ lastNavigated() }}</b>\n        </div>\n      }\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.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:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;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}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.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: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevBreadcrumbClassic, selector: "dd-breadcrumb-classic", inputs: ["items", "separator"], outputs: ["navigate"] }, { kind: "component", type: DuckDevBreadcrumbNeobrutal, selector: "dd-breadcrumb-neobrutal", inputs: ["items", "color"], outputs: ["navigate"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-breadcrumb-block', standalone: true, imports: [TranslocoPipe, DuckDevCardSection, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal], template: "<div class=\"demo-container\">\n  <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-breadcrumb-classic\n  [items]=\"breadcrumbs\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;\n\n&lt;dd-breadcrumb-neobrutal\n  [items]=\"breadcrumbs\"\n  [color]=\"colorViolet\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n        <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"basicItems\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"longItems\"\n            separator=\">\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorViolet\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"longItems\"\n            [color]=\"colorOrange\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorDark\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      @if (lastNavigated()) {\n        <div class=\"state-hint state-hint--neobrutal\">\n          <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n          <b>{{ lastNavigated() }}</b>\n        </div>\n      }\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.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:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;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}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+            args: [{ selector: 'app-breadcrumb-block', standalone: true, imports: [TranslocoPipe, DuckDevCardSection, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal], template: "<div class=\"demo-container\">\n  <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-breadcrumb-classic\n  [items]=\"breadcrumbs\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;\n\n&lt;dd-breadcrumb-neobrutal\n  [items]=\"breadcrumbs\"\n  [color]=\"colorViolet\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n        <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"basicItems\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"longItems\"\n            separator=\">\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorViolet\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"longItems\"\n            [color]=\"colorOrange\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorDark\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      @if (lastNavigated()) {\n        <div class=\"state-hint state-hint--neobrutal\">\n          <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n          <b>{{ lastNavigated() }}</b>\n        </div>\n      }\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.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:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;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}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 class MainDocumentationPage {