duck-dev-lib 0.0.45 → 0.0.47

package/fesm2022/duck-dev-lib.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, inject, Injectable, afterNextRender, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, viewChild, ContentChildren } from '@angular/core';
+import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, inject, DestroyRef, Injectable, afterNextRender, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, afterRenderEffect, viewChild, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
-import { NgStyle, CommonModule, JsonPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { NgStyle, CommonModule, JsonPipe, NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i1$3 from '@jsverse/transloco';
 import { TranslocoPipe, TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import * as i1$1 from '@angular/forms';
@@ -521,11 +521,11 @@ class DuckDevTabVertical {
         return this.activeTabIndex() === index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n  <div class=\"tab-sidebar\">\n    @for (tab of tabs(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        [class.active]=\"isActive(i)\"\n        (click)=\"selectTab(i)\"\n        type=\"button\"\n      >\n        @if (tab.icon) {\n          <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n        }\n        <span class=\"tab-label\">{{ tab.label }}</span>\n      </button>\n    }\n    <div\n      class=\"tab-indicator\"\n      [style.top.px]=\"indicatorTop()\"\n      [style.height.px]=\"indicatorHeight()\"\n    ></div>\n  </div>\n\n  <div class=\"tab-content-wrapper\">\n    <div\n      class=\"tab-content\"\n      [class.slide-up]=\"animationDirection() === 'up'\"\n      [class.slide-down]=\"animationDirection() === 'down'\"\n      [attr.data-active-index]=\"activeTabIndex()\"\n      [attr.data-animation-key]=\"animationKey()\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n  <div class=\"tab-sidebar\">\n    @for (tab of tabs(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        [class.active]=\"isActive(i)\"\n        (click)=\"selectTab(i)\"\n        type=\"button\"\n      >\n        @if (tab.icon) {\n          <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n        }\n        <span class=\"tab-label\">{{ tab.label }}</span>\n      </button>\n    }\n    <div\n      class=\"tab-indicator\"\n      [style.top.px]=\"indicatorTop()\"\n      [style.height.px]=\"indicatorHeight()\"\n    ></div>\n  </div>\n\n  <div class=\"tab-content-wrapper\">\n    <div\n      class=\"tab-content\"\n      [class.slide-up]=\"animationDirection() === 'up'\"\n      [class.slide-down]=\"animationDirection() === 'down'\"\n      [attr.data-active-index]=\"activeTabIndex()\"\n      [attr.data-animation-key]=\"animationKey()\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n  <div class=\"tab-sidebar\">\n    @for (tab of tabs(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        [class.active]=\"isActive(i)\"\n        (click)=\"selectTab(i)\"\n        type=\"button\"\n      >\n        @if (tab.icon) {\n          <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n        }\n        <span class=\"tab-label\">{{ tab.label }}</span>\n      </button>\n    }\n    <div\n      class=\"tab-indicator\"\n      [style.top.px]=\"indicatorTop()\"\n      [style.height.px]=\"indicatorHeight()\"\n    ></div>\n  </div>\n\n  <div class=\"tab-content-wrapper\">\n    <div\n      class=\"tab-content\"\n      [class.slide-up]=\"animationDirection() === 'up'\"\n      [class.slide-down]=\"animationDirection() === 'down'\"\n      [attr.data-active-index]=\"activeTabIndex()\"\n      [attr.data-animation-key]=\"animationKey()\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
+            args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n  <div class=\"tab-sidebar\">\n    @for (tab of tabs(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        [class.active]=\"isActive(i)\"\n        (click)=\"selectTab(i)\"\n        type=\"button\"\n      >\n        @if (tab.icon) {\n          <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n        }\n        <span class=\"tab-label\">{{ tab.label }}</span>\n      </button>\n    }\n    <div\n      class=\"tab-indicator\"\n      [style.top.px]=\"indicatorTop()\"\n      [style.height.px]=\"indicatorHeight()\"\n    ></div>\n  </div>\n\n  <div class=\"tab-content-wrapper\">\n    <div\n      class=\"tab-content\"\n      [class.slide-up]=\"animationDirection() === 'up'\"\n      [class.slide-down]=\"animationDirection() === 'down'\"\n      [attr.data-active-index]=\"activeTabIndex()\"\n      [attr.data-animation-key]=\"animationKey()\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
 
 class DuckDevCardSection {
@@ -773,7 +773,16 @@ function getNeobrutalCardStyle(color) {
     }
 }
 
+const RETURN_TRANSITION$1 = 'transform 180ms cubic-bezier(0.22, 1, 0.36, 1)';
+const EXIT_TRANSITION$1 = 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)';
 class DuckDevCardNeobrutalPoster {
+    destroyRef = inject(DestroyRef);
+    activePointerId = null;
+    dragAxis = null;
+    dragStartX = 0;
+    dragStartY = 0;
+    cardWidth = 0;
+    swipeEmitTimeoutId = null;
     color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
     railTop = input.required({ ...(ngDevMode ? { debugName: "railTop" } : {}) });
     railMiddle = input.required({ ...(ngDevMode ? { debugName: "railMiddle" } : {}) });
@@ -784,26 +793,269 @@ class DuckDevCardNeobrutalPoster {
     badge = input.required({ ...(ngDevMode ? { debugName: "badge" } : {}) });
     metricLabel = input.required({ ...(ngDevMode ? { debugName: "metricLabel" } : {}) });
     metric = input.required({ ...(ngDevMode ? { debugName: "metric" } : {}) });
+    swipeable = input(false, { ...(ngDevMode ? { debugName: "swipeable" } : {}) });
+    swipeThreshold = input(96, { ...(ngDevMode ? { debugName: "swipeThreshold" } : {}) });
+    swipedLeft = output();
+    swipedRight = output();
     cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
+    dragOffsetX = signal(0, { ...(ngDevMode ? { debugName: "dragOffsetX" } : {}) });
+    dragTransition = signal(RETURN_TRANSITION$1, { ...(ngDevMode ? { debugName: "dragTransition" } : {}) });
+    rotationDeg = computed(() => this.clamp(this.dragOffsetX() / 18, -14, 14), { ...(ngDevMode ? { debugName: "rotationDeg" } : {}) });
+    transformStyle = computed(() => `translate3d(${this.dragOffsetX()}px, 0, 0) rotate(${this.rotationDeg()}deg)`, { ...(ngDevMode ? { debugName: "transformStyle" } : {}) });
+    cursorStyle = computed(() => {
+        if (!this.swipeable()) {
+            return 'default';
+        }
+        return this.isDragging() ? 'grabbing' : 'grab';
+    }, { ...(ngDevMode ? { debugName: "cursorStyle" } : {}) });
+    touchActionStyle = computed(() => (this.swipeable() ? 'pan-y' : 'auto'), { ...(ngDevMode ? { debugName: "touchActionStyle" } : {}) });
+    constructor() {
+        this.destroyRef.onDestroy(() => this.clearSwipeEmitTimeout());
+    }
+    onPointerDown(event) {
+        if (!this.swipeable() || this.activePointerId !== null) {
+            return;
+        }
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+            return;
+        }
+        const card = event.currentTarget;
+        if (!(card instanceof HTMLElement)) {
+            return;
+        }
+        this.clearSwipeEmitTimeout();
+        this.activePointerId = event.pointerId;
+        this.dragAxis = null;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.cardWidth = card.offsetWidth;
+        this.dragTransition.set('none');
+        card.setPointerCapture(event.pointerId);
+    }
+    onPointerMove(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        const deltaX = event.clientX - this.dragStartX;
+        const deltaY = event.clientY - this.dragStartY;
+        if (this.dragAxis === null) {
+            if (Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10) {
+                return;
+            }
+            this.dragAxis = Math.abs(deltaX) >= Math.abs(deltaY) ? 'x' : 'y';
+            if (this.dragAxis !== 'x') {
+                this.releasePointer(event);
+                this.resetPosition();
+                return;
+            }
+        }
+        event.preventDefault();
+        this.isDragging.set(true);
+        this.dragOffsetX.set(deltaX);
+    }
+    onPointerUp(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        const deltaX = this.dragOffsetX();
+        const threshold = Math.max(24, this.swipeThreshold());
+        const shouldDismiss = this.dragAxis === 'x' && Math.abs(deltaX) >= threshold;
+        this.releasePointer(event);
+        this.dragAxis = null;
+        this.isDragging.set(false);
+        if (!shouldDismiss) {
+            this.resetPosition();
+            return;
+        }
+        const direction = deltaX >= 0 ? 1 : -1;
+        const exitDistance = Math.max(this.cardWidth * 1.35, 420);
+        this.dragTransition.set(EXIT_TRANSITION$1);
+        this.dragOffsetX.set(direction * exitDistance);
+        this.swipeEmitTimeoutId = window.setTimeout(() => {
+            this.swipeEmitTimeoutId = null;
+            if (direction > 0) {
+                this.swipedRight.emit();
+                return;
+            }
+            this.swipedLeft.emit();
+        }, 180);
+    }
+    onPointerCancel(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        this.releasePointer(event);
+        this.resetPosition();
+    }
+    releasePointer(event) {
+        const card = event.currentTarget;
+        if (card instanceof HTMLElement && card.hasPointerCapture(event.pointerId)) {
+            card.releasePointerCapture(event.pointerId);
+        }
+        this.activePointerId = null;
+    }
+    resetPosition() {
+        this.dragAxis = null;
+        this.isDragging.set(false);
+        this.dragTransition.set(RETURN_TRANSITION$1);
+        this.dragOffsetX.set(0);
+    }
+    clearSwipeEmitTimeout() {
+        if (this.swipeEmitTimeoutId === null) {
+            return;
+        }
+        window.clearTimeout(this.swipeEmitTimeoutId);
+        this.swipeEmitTimeoutId = null;
+    }
+    clamp(value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalPoster, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalPoster, isStandalone: true, selector: "dd-card-neobrutal-poster", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, railTop: { classPropertyName: "railTop", publicName: "railTop", isSignal: true, isRequired: true, transformFunction: null }, railMiddle: { classPropertyName: "railMiddle", publicName: "railMiddle", isSignal: true, isRequired: true, transformFunction: null }, railBottom: { classPropertyName: "railBottom", publicName: "railBottom", isSignal: true, isRequired: true, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: true, transformFunction: null }, metricLabel: { classPropertyName: "metricLabel", publicName: "metricLabel", isSignal: true, isRequired: true, transformFunction: null }, metric: { classPropertyName: "metric", publicName: "metric", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-poster\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-poster__panel\">\n    <div class=\"dd-card-neo-poster__meta\">\n      <p class=\"dd-card-neo-poster__eyebrow\">{{ eyebrow() }}</p>\n      <p class=\"dd-card-neo-poster__badge\">{{ badge() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__content\">\n      <h3 class=\"dd-card-neo-poster__title\">{{ title() }}</h3>\n      <p class=\"dd-card-neo-poster__description\">{{ description() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__metric\">\n      <span class=\"dd-card-neo-poster__metric-label\">{{ metricLabel() }}</span>\n      <strong class=\"dd-card-neo-poster__metric-value\">{{ metric() }}</strong>\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;display:grid;gap:18px;padding:24px 24px 24px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 20%,transparent) 0 17%,transparent 17% 100%),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dd-neo-card-border) 9%,transparent) 0 10px,transparent 10px 22px),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{display:grid;gap:10px}.dd-card-neo-poster__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__badge,.dd-card-neo-poster__title,.dd-card-neo-poster__description,.dd-card-neo-poster__metric-label,.dd-card-neo-poster__metric-value{margin:0}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__metric-label{font-size:12px;font-weight:900;letter-spacing:.18em;line-height:1.1;text-transform:uppercase}.dd-card-neo-poster__badge{padding:7px 10px 5px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;text-transform:uppercase}.dd-card-neo-poster__title{max-width:11ch;font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}.dd-card-neo-poster__description{max-width:38ch;font-size:15px;line-height:1.5;font-weight:800}.dd-card-neo-poster__metric{display:grid;justify-items:start;gap:6px;width:fit-content;padding:12px 14px 10px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-surface);box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__metric-value{font-size:clamp(28px,5vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.07em}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{min-height:auto;writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}.dd-card-neo-poster__panel{padding:20px 20px 20px 24px}.dd-card-neo-poster__meta{flex-direction:column;align-items:flex-start}.dd-card-neo-poster__title{max-width:none}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalPoster, isStandalone: true, selector: "dd-card-neobrutal-poster", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, railTop: { classPropertyName: "railTop", publicName: "railTop", isSignal: true, isRequired: true, transformFunction: null }, railMiddle: { classPropertyName: "railMiddle", publicName: "railMiddle", isSignal: true, isRequired: true, transformFunction: null }, railBottom: { classPropertyName: "railBottom", publicName: "railBottom", isSignal: true, isRequired: true, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: true, transformFunction: null }, metricLabel: { classPropertyName: "metricLabel", publicName: "metricLabel", isSignal: true, isRequired: true, transformFunction: null }, metric: { classPropertyName: "metric", publicName: "metric", isSignal: true, isRequired: true, transformFunction: null }, swipeable: { classPropertyName: "swipeable", publicName: "swipeable", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, ngImport: i0, template: "<article\n  class=\"dd-card-neo-poster\"\n  [class.dd-card-neo-poster--dragging]=\"isDragging()\"\n  [class.dd-card-neo-poster--swipeable]=\"swipeable()\"\n  [ngStyle]=\"cardStyle()\"\n  [style.cursor]=\"cursorStyle()\"\n  [style.touch-action]=\"touchActionStyle()\"\n  [style.transform]=\"transformStyle()\"\n  [style.transition]=\"dragTransition()\"\n  (pointercancel)=\"onPointerCancel($event)\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n>\n  <div class=\"dd-card-neo-poster__panel\">\n    <div class=\"dd-card-neo-poster__meta\">\n      <p class=\"dd-card-neo-poster__eyebrow\">{{ eyebrow() }}</p>\n      <p class=\"dd-card-neo-poster__badge\">{{ badge() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__content\">\n      <h3 class=\"dd-card-neo-poster__title\">{{ title() }}</h3>\n      <p class=\"dd-card-neo-poster__description\">{{ description() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__metric\">\n      <span class=\"dd-card-neo-poster__metric-label\">{{ metricLabel() }}</span>\n      <strong class=\"dd-card-neo-poster__metric-value\">{{ metric() }}</strong>\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip;transform-origin:center bottom;will-change:transform}.dd-card-neo-poster.dd-card-neo-poster--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-poster.dd-card-neo-poster--dragging{z-index:1}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;display:grid;gap:18px;padding:24px 24px 24px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 20%,transparent) 0 17%,transparent 17% 100%),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dd-neo-card-border) 9%,transparent) 0 10px,transparent 10px 22px),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{display:grid;gap:10px}.dd-card-neo-poster__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__badge,.dd-card-neo-poster__title,.dd-card-neo-poster__description,.dd-card-neo-poster__metric-label,.dd-card-neo-poster__metric-value{margin:0}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__metric-label{font-size:12px;font-weight:900;letter-spacing:.18em;line-height:1.1;text-transform:uppercase}.dd-card-neo-poster__badge{padding:7px 10px 5px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;text-transform:uppercase}.dd-card-neo-poster__title{max-width:11ch;font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}.dd-card-neo-poster__description{max-width:38ch;font-size:15px;line-height:1.5;font-weight:800}.dd-card-neo-poster__metric{display:grid;justify-items:start;gap:6px;width:fit-content;padding:12px 14px 10px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-surface);box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__metric-value{font-size:clamp(28px,5vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.07em}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{min-height:auto;writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}.dd-card-neo-poster__panel{padding:20px 20px 20px 24px}.dd-card-neo-poster__meta{flex-direction:column;align-items:flex-start}.dd-card-neo-poster__title{max-width:none}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalPoster, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-card-neobrutal-poster', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-poster\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-poster__panel\">\n    <div class=\"dd-card-neo-poster__meta\">\n      <p class=\"dd-card-neo-poster__eyebrow\">{{ eyebrow() }}</p>\n      <p class=\"dd-card-neo-poster__badge\">{{ badge() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__content\">\n      <h3 class=\"dd-card-neo-poster__title\">{{ title() }}</h3>\n      <p class=\"dd-card-neo-poster__description\">{{ description() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__metric\">\n      <span class=\"dd-card-neo-poster__metric-label\">{{ metricLabel() }}</span>\n      <strong class=\"dd-card-neo-poster__metric-value\">{{ metric() }}</strong>\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;display:grid;gap:18px;padding:24px 24px 24px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 20%,transparent) 0 17%,transparent 17% 100%),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dd-neo-card-border) 9%,transparent) 0 10px,transparent 10px 22px),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{display:grid;gap:10px}.dd-card-neo-poster__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__badge,.dd-card-neo-poster__title,.dd-card-neo-poster__description,.dd-card-neo-poster__metric-label,.dd-card-neo-poster__metric-value{margin:0}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__metric-label{font-size:12px;font-weight:900;letter-spacing:.18em;line-height:1.1;text-transform:uppercase}.dd-card-neo-poster__badge{padding:7px 10px 5px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;text-transform:uppercase}.dd-card-neo-poster__title{max-width:11ch;font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}.dd-card-neo-poster__description{max-width:38ch;font-size:15px;line-height:1.5;font-weight:800}.dd-card-neo-poster__metric{display:grid;justify-items:start;gap:6px;width:fit-content;padding:12px 14px 10px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-surface);box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__metric-value{font-size:clamp(28px,5vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.07em}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{min-height:auto;writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}.dd-card-neo-poster__panel{padding:20px 20px 20px 24px}.dd-card-neo-poster__meta{flex-direction:column;align-items:flex-start}.dd-card-neo-poster__title{max-width:none}}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], railTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "railTop", required: true }] }], railMiddle: [{ type: i0.Input, args: [{ isSignal: true, alias: "railMiddle", required: true }] }], railBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "railBottom", required: true }] }], eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: true }] }], metricLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricLabel", required: true }] }], metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: true }] }] } });
+            args: [{ selector: 'dd-card-neobrutal-poster', standalone: true, imports: [NgStyle], template: "<article\n  class=\"dd-card-neo-poster\"\n  [class.dd-card-neo-poster--dragging]=\"isDragging()\"\n  [class.dd-card-neo-poster--swipeable]=\"swipeable()\"\n  [ngStyle]=\"cardStyle()\"\n  [style.cursor]=\"cursorStyle()\"\n  [style.touch-action]=\"touchActionStyle()\"\n  [style.transform]=\"transformStyle()\"\n  [style.transition]=\"dragTransition()\"\n  (pointercancel)=\"onPointerCancel($event)\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n>\n  <div class=\"dd-card-neo-poster__panel\">\n    <div class=\"dd-card-neo-poster__meta\">\n      <p class=\"dd-card-neo-poster__eyebrow\">{{ eyebrow() }}</p>\n      <p class=\"dd-card-neo-poster__badge\">{{ badge() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__content\">\n      <h3 class=\"dd-card-neo-poster__title\">{{ title() }}</h3>\n      <p class=\"dd-card-neo-poster__description\">{{ description() }}</p>\n    </div>\n\n    <div class=\"dd-card-neo-poster__metric\">\n      <span class=\"dd-card-neo-poster__metric-label\">{{ metricLabel() }}</span>\n      <strong class=\"dd-card-neo-poster__metric-value\">{{ metric() }}</strong>\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-poster{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip;transform-origin:center bottom;will-change:transform}.dd-card-neo-poster.dd-card-neo-poster--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-poster.dd-card-neo-poster--dragging{z-index:1}.dd-card-neo-poster__headline span:last-child{border-bottom:0}.dd-card-neo-poster__panel{position:relative;display:grid;gap:18px;padding:24px 24px 24px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 20%,transparent) 0 17%,transparent 17% 100%),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--dd-neo-card-border) 9%,transparent) 0 10px,transparent 10px 22px),var(--dd-neo-card-panel)}.dd-card-neo-poster__panel:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-card-border)}.dd-card-neo-poster__content{display:grid;gap:10px}.dd-card-neo-poster__meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__badge,.dd-card-neo-poster__title,.dd-card-neo-poster__description,.dd-card-neo-poster__metric-label,.dd-card-neo-poster__metric-value{margin:0}.dd-card-neo-poster__eyebrow,.dd-card-neo-poster__metric-label{font-size:12px;font-weight:900;letter-spacing:.18em;line-height:1.1;text-transform:uppercase}.dd-card-neo-poster__badge{padding:7px 10px 5px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;text-transform:uppercase}.dd-card-neo-poster__title{max-width:11ch;font-size:clamp(30px,5vw,44px);font-weight:1000;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}.dd-card-neo-poster__description{max-width:38ch;font-size:15px;line-height:1.5;font-weight:800}.dd-card-neo-poster__metric{display:grid;justify-items:start;gap:6px;width:fit-content;padding:12px 14px 10px;border:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-surface);box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__metric-value{font-size:clamp(28px,5vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.07em}@media(max-width:640px){.dd-card-neo-poster{grid-template-columns:1fr;box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-poster__headline{grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:4px solid var(--dd-neo-card-border)}.dd-card-neo-poster__headline span{min-height:auto;writing-mode:horizontal-tb;transform:none;border-right:4px solid var(--dd-neo-card-border);border-bottom:0}.dd-card-neo-poster__headline span:last-child{border-right:0}.dd-card-neo-poster__panel{padding:20px 20px 20px 24px}.dd-card-neo-poster__meta{flex-direction:column;align-items:flex-start}.dd-card-neo-poster__title{max-width:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], railTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "railTop", required: true }] }], railMiddle: [{ type: i0.Input, args: [{ isSignal: true, alias: "railMiddle", required: true }] }], railBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "railBottom", required: true }] }], eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: true }] }], metricLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricLabel", required: true }] }], metric: [{ type: i0.Input, args: [{ isSignal: true, alias: "metric", required: true }] }], swipeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeable", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], swipedLeft: [{ type: i0.Output, args: ["swipedLeft"] }], swipedRight: [{ type: i0.Output, args: ["swipedRight"] }] } });
 
+const RETURN_TRANSITION = 'transform 180ms cubic-bezier(0.22, 1, 0.36, 1)';
+const EXIT_TRANSITION = 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)';
 class DuckDevCardNeobrutalSlab {
+    destroyRef = inject(DestroyRef);
+    activePointerId = null;
+    dragAxis = null;
+    dragStartX = 0;
+    dragStartY = 0;
+    cardWidth = 0;
+    swipeEmitTimeoutId = null;
     color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
     strapLabel = input.required({ ...(ngDevMode ? { debugName: "strapLabel" } : {}) });
+    swipeable = input(false, { ...(ngDevMode ? { debugName: "swipeable" } : {}) });
+    swipeThreshold = input(96, { ...(ngDevMode ? { debugName: "swipeThreshold" } : {}) });
+    swipedLeft = output();
+    swipedRight = output();
     cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
+    isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
+    dragOffsetX = signal(0, { ...(ngDevMode ? { debugName: "dragOffsetX" } : {}) });
+    dragTransition = signal(RETURN_TRANSITION, { ...(ngDevMode ? { debugName: "dragTransition" } : {}) });
+    rotationDeg = computed(() => this.clamp(this.dragOffsetX() / 18, -14, 14), { ...(ngDevMode ? { debugName: "rotationDeg" } : {}) });
+    transformStyle = computed(() => `translate3d(${this.dragOffsetX()}px, 0, 0) rotate(${this.rotationDeg()}deg)`, { ...(ngDevMode ? { debugName: "transformStyle" } : {}) });
+    cursorStyle = computed(() => {
+        if (!this.swipeable()) {
+            return 'default';
+        }
+        return this.isDragging() ? 'grabbing' : 'grab';
+    }, { ...(ngDevMode ? { debugName: "cursorStyle" } : {}) });
+    touchActionStyle = computed(() => (this.swipeable() ? 'pan-y' : 'auto'), { ...(ngDevMode ? { debugName: "touchActionStyle" } : {}) });
+    constructor() {
+        this.destroyRef.onDestroy(() => this.clearSwipeEmitTimeout());
+    }
+    onPointerDown(event) {
+        if (!this.swipeable() || this.activePointerId !== null) {
+            return;
+        }
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+            return;
+        }
+        const card = event.currentTarget;
+        if (!(card instanceof HTMLElement)) {
+            return;
+        }
+        this.clearSwipeEmitTimeout();
+        this.activePointerId = event.pointerId;
+        this.dragAxis = null;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.cardWidth = card.offsetWidth;
+        this.dragTransition.set('none');
+        card.setPointerCapture(event.pointerId);
+    }
+    onPointerMove(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        const deltaX = event.clientX - this.dragStartX;
+        const deltaY = event.clientY - this.dragStartY;
+        if (this.dragAxis === null) {
+            if (Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10) {
+                return;
+            }
+            this.dragAxis = Math.abs(deltaX) >= Math.abs(deltaY) ? 'x' : 'y';
+            if (this.dragAxis !== 'x') {
+                this.releasePointer(event);
+                this.resetPosition();
+                return;
+            }
+        }
+        event.preventDefault();
+        this.isDragging.set(true);
+        this.dragOffsetX.set(deltaX);
+    }
+    onPointerUp(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        const deltaX = this.dragOffsetX();
+        const threshold = Math.max(24, this.swipeThreshold());
+        const shouldDismiss = this.dragAxis === 'x' && Math.abs(deltaX) >= threshold;
+        this.releasePointer(event);
+        this.dragAxis = null;
+        this.isDragging.set(false);
+        if (!shouldDismiss) {
+            this.resetPosition();
+            return;
+        }
+        const direction = deltaX >= 0 ? 1 : -1;
+        const exitDistance = Math.max(this.cardWidth * 1.35, 420);
+        this.dragTransition.set(EXIT_TRANSITION);
+        this.dragOffsetX.set(direction * exitDistance);
+        this.swipeEmitTimeoutId = window.setTimeout(() => {
+            this.swipeEmitTimeoutId = null;
+            if (direction > 0) {
+                this.swipedRight.emit();
+                return;
+            }
+            this.swipedLeft.emit();
+        }, 180);
+    }
+    onPointerCancel(event) {
+        if (event.pointerId !== this.activePointerId) {
+            return;
+        }
+        this.releasePointer(event);
+        this.resetPosition();
+    }
+    releasePointer(event) {
+        const card = event.currentTarget;
+        if (card instanceof HTMLElement && card.hasPointerCapture(event.pointerId)) {
+            card.releasePointerCapture(event.pointerId);
+        }
+        this.activePointerId = null;
+    }
+    resetPosition() {
+        this.dragAxis = null;
+        this.isDragging.set(false);
+        this.dragTransition.set(RETURN_TRANSITION);
+        this.dragOffsetX.set(0);
+    }
+    clearSwipeEmitTimeout() {
+        if (this.swipeEmitTimeoutId === null) {
+            return;
+        }
+        window.clearTimeout(this.swipeEmitTimeoutId);
+        this.swipeEmitTimeoutId = null;
+    }
+    clamp(value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-slab\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text)}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null }, swipeable: { classPropertyName: "swipeable", publicName: "swipeable", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, ngImport: i0, template: "<article\n  class=\"dd-card-neo-slab\"\n  [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n  [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n  [ngStyle]=\"cardStyle()\"\n  [style.cursor]=\"cursorStyle()\"\n  [style.touch-action]=\"touchActionStyle()\"\n  [style.transform]=\"transformStyle()\"\n  [style.transition]=\"dragTransition()\"\n  (pointercancel)=\"onPointerCancel($event)\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n>\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-slab\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text)}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strapLabel", required: true }] }] } });
+            args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article\n  class=\"dd-card-neo-slab\"\n  [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n  [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n  [ngStyle]=\"cardStyle()\"\n  [style.cursor]=\"cursorStyle()\"\n  [style.touch-action]=\"touchActionStyle()\"\n  [style.transform]=\"transformStyle()\"\n  [style.transition]=\"dragTransition()\"\n  (pointercancel)=\"onPointerCancel($event)\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n>\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-border);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strapLabel", required: true }] }], swipeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeable", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], swipedLeft: [{ type: i0.Output, args: ["swipedLeft"] }], swipedRight: [{ type: i0.Output, args: ["swipedRight"] }] } });
 
 class DuckDevCardNeobrutalStamp {
     color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
@@ -3450,11 +3702,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 class CardBlock {
     t = inject(TranslocoService);
+    neobrutalSwipeDeck = [
+        {
+            strapLabel: 'Swipe deck',
+            title: 'Launch queue',
+            description: 'Swipe right to keep this release in the active sprint stack.',
+        },
+        {
+            strapLabel: 'Triage',
+            title: 'Bug backlog',
+            description: 'Swipe left to skip noisy work and move to the next candidate.',
+        },
+        {
+            strapLabel: 'Hot drop',
+            title: 'Design sync',
+            description: 'The demo loops through cards so the gesture can be tested repeatedly.',
+        },
+    ];
+    neobrutalPosterSwipeDeck = [
+        {
+            railTop: 'Neo',
+            railMiddle: 'Brut',
+            railBottom: 'Keep',
+            eyebrow: 'Ops bulletin',
+            badge: 'Live',
+            title: 'System pulse',
+            description: 'Swipe right to keep this alert in the active deck.',
+            metricLabel: 'Signal',
+            metric: '99%',
+        },
+        {
+            railTop: 'Skip',
+            railMiddle: 'Noise',
+            railBottom: 'Drop',
+            eyebrow: 'Queue filter',
+            badge: 'Muted',
+            title: 'Alert noise',
+            description: 'Swipe left to discard low-priority cards from triage.',
+            metricLabel: 'Load',
+            metric: '23%',
+        },
+        {
+            railTop: 'Deck',
+            railMiddle: 'Loops',
+            railBottom: 'On',
+            eyebrow: 'Demo mode',
+            badge: 'Next',
+            title: 'Preview flow',
+            description: 'The example restores the next poster card after each swipe.',
+            metricLabel: 'Stack',
+            metric: '3',
+        },
+    ];
     colorViolet = AccentEnumColor.Violet;
     colorOrange = AccentEnumColor.Orange;
     colorWhite = AccentEnumColor.White;
     colorGray = AccentEnumColor.Gray;
     colorDark = AccentEnumColor.Dark;
+    neobrutalSwipeIndex = signal(0, { ...(ngDevMode ? { debugName: "neobrutalSwipeIndex" } : {}) });
+    neobrutalSwipeVisible = signal(true, { ...(ngDevMode ? { debugName: "neobrutalSwipeVisible" } : {}) });
+    neobrutalSwipeStatus = signal('Swipe right to keep, swipe left to skip.', { ...(ngDevMode ? { debugName: "neobrutalSwipeStatus" } : {}) });
+    neobrutalSwipeCard = computed(() => this.neobrutalSwipeDeck[this.neobrutalSwipeIndex()], { ...(ngDevMode ? { debugName: "neobrutalSwipeCard" } : {}) });
+    neobrutalPosterSwipeIndex = signal(0, { ...(ngDevMode ? { debugName: "neobrutalPosterSwipeIndex" } : {}) });
+    neobrutalPosterSwipeVisible = signal(true, { ...(ngDevMode ? { debugName: "neobrutalPosterSwipeVisible" } : {}) });
+    neobrutalPosterSwipeStatus = signal('Poster also supports right/left swipe.', { ...(ngDevMode ? { debugName: "neobrutalPosterSwipeStatus" } : {}) });
+    neobrutalPosterSwipeCard = computed(() => this.neobrutalPosterSwipeDeck[this.neobrutalPosterSwipeIndex()], { ...(ngDevMode ? { debugName: "neobrutalPosterSwipeCard" } : {}) });
     styleTabs = [
         { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
         { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
@@ -3511,13 +3823,33 @@ class CardBlock {
     onStyleTabChange(tab) {
         this.activeStyleTab.set(tab);
     }
+    onNeobrutalSlabSwipe(direction) {
+        this.neobrutalSwipeStatus.set(direction === 'right'
+            ? 'Right swipe emitted `swipedRight`.'
+            : 'Left swipe emitted `swipedLeft`.');
+        this.neobrutalSwipeVisible.set(false);
+        window.setTimeout(() => {
+            this.neobrutalSwipeIndex.update((index) => (index + 1) % this.neobrutalSwipeDeck.length);
+            this.neobrutalSwipeVisible.set(true);
+        });
+    }
+    onNeobrutalPosterSwipe(direction) {
+        this.neobrutalPosterSwipeStatus.set(direction === 'right'
+            ? 'Poster emitted `swipedRight`.'
+            : 'Poster emitted `swipedLeft`.');
+        this.neobrutalPosterSwipeVisible.set(false);
+        window.setTimeout(() => {
+            this.neobrutalPosterSwipeIndex.update((index) => (index + 1) % this.neobrutalPosterSwipeDeck.length);
+            this.neobrutalPosterSwipeVisible.set(true);
+        });
+    }
     createEl(html) {
         const el = document.createElement('div');
         el.innerHTML = html;
         return el;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: 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 [color]=\"colorOrange\" strapLabel=\"Duck Dev\"&gt;\n  &lt;h4&gt;Launch queue&lt;/h4&gt;\n  &lt;p&gt;Three releases are waiting for approval.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>Neobrutalism examples</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Slab / Orange</p>\n              <dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\">\n                <h4>Launch queue</h4>\n                <p>Three releases are waiting for approval and one build is blocked by QA.</p>\n              </dd-card-neobrutal-slab>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Stamp / Violet</p>\n              <dd-card-neobrutal-stamp\n                [color]=\"colorViolet\"\n                chromeStart=\"Fresh UI\"\n                chromeEnd=\"Duck Dev\"\n                sealLabel=\"Seal\"\n              >\n                <h4>Design drop</h4>\n                <p>Fresh visual assets landed in the library and need review before sync.</p>\n              </dd-card-neobrutal-stamp>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Poster / Dark</p>\n              <dd-card-neobrutal-poster\n                [color]=\"colorDark\"\n                railTop=\"Neo\"\n                railMiddle=\"Brut\"\n                railBottom=\"Alert\"\n                eyebrow=\"Ops bulletin\"\n                badge=\"Live\"\n                title=\"System pulse\"\n                description=\"Telemetry is clean, rate limits are stable and the service window is open.\"\n                metricLabel=\"Signal\"\n                metric=\"99%\"\n              />\n            </div>\n            <app-neobrutal-ticket-card-block />\n          </div>\n        </div>\n      </dd-card-section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevCardNeobrutalPoster, selector: "dd-card-neobrutal-poster", inputs: ["color", "railTop", "railMiddle", "railBottom", "eyebrow", "title", "description", "badge", "metricLabel", "metric"] }, { kind: "component", type: DuckDevCardNeobrutalSlab, selector: "dd-card-neobrutal-slab", inputs: ["color", "strapLabel"] }, { kind: "component", type: DuckDevCardNeobrutalStamp, selector: "dd-card-neobrutal-stamp", inputs: ["color", "chromeStart", "chromeEnd", "sealLabel"] }, { kind: "component", type: DuckDevCardOutline, selector: "dd-card-outline", inputs: ["color"] }, { kind: "component", type: DuckDevCardSignal, selector: "dd-card-signal", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: NeobrutalTicketCardBlock, selector: "app-neobrutal-ticket-card-block" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, decorators: [{
             type: Component,
@@ -3533,7 +3865,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 [color]=\"colorOrange\" strapLabel=\"Duck Dev\"&gt;\n  &lt;h4&gt;Launch queue&lt;/h4&gt;\n  &lt;p&gt;Three releases are waiting for approval.&lt;/p&gt;\n&lt;/dd-card-neobrutal-slab&gt;</code></pre>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>Neobrutalism examples</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Slab / Orange</p>\n              <dd-card-neobrutal-slab [color]=\"colorOrange\" strapLabel=\"Duck Dev\">\n                <h4>Launch queue</h4>\n                <p>Three releases are waiting for approval and one build is blocked by QA.</p>\n              </dd-card-neobrutal-slab>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Stamp / Violet</p>\n              <dd-card-neobrutal-stamp\n                [color]=\"colorViolet\"\n                chromeStart=\"Fresh UI\"\n                chromeEnd=\"Duck Dev\"\n                sealLabel=\"Seal\"\n              >\n                <h4>Design drop</h4>\n                <p>Fresh visual assets landed in the library and need review before sync.</p>\n              </dd-card-neobrutal-stamp>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Poster / Dark</p>\n              <dd-card-neobrutal-poster\n                [color]=\"colorDark\"\n                railTop=\"Neo\"\n                railMiddle=\"Brut\"\n                railBottom=\"Alert\"\n                eyebrow=\"Ops bulletin\"\n                badge=\"Live\"\n                title=\"System pulse\"\n                description=\"Telemetry is clean, rate limits are stable and the service window is open.\"\n                metricLabel=\"Signal\"\n                metric=\"99%\"\n              />\n            </div>\n            <app-neobrutal-ticket-card-block />\n          </div>\n        </div>\n      </dd-card-section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [] });
 
 class DuckDevTooltip {
@@ -3625,142 +3957,1516 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     ], template: "<div class=\"demo-container\">\n  <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-tooltip\n  [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n  [color]=\"colorViolet\"\n  [placement]=\"'top'\"\n  [delayCloseMs]=\"120\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n            </dd-card-accent>\n          </div>\n\n          <ul>\n            <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n            <li>\n              <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n              White.\n            </li>\n            <li>\n              <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n              top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n            </li>\n            <li>\n              <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n              leave (default: 120).\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n              <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n                [color]=\"colorViolet\"\n                [placement]=\"'top'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n                [color]=\"colorOrange\"\n                [placement]=\"'right'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n                [color]=\"colorGray\"\n                [placement]=\"'left-start'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n                [color]=\"colorWhite\"\n                [placement]=\"'bottom-end'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Tooltip</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;duck-dev-tooltip-neobrutal\n  [text]=\"'Hot take inside brutal shell'\"\n  [color]=\"colorOrange\"\n  [placement]=\"'right'\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/duck-dev-tooltip-neobrutal&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Violet</p>\n              <duck-dev-tooltip-neobrutal\n                [text]=\"'Loud UI hint with brutal edge'\"\n                [color]=\"colorViolet\"\n                [placement]=\"'top'\"\n              >\n                <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n              </duck-dev-tooltip-neobrutal>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Orange</p>\n              <duck-dev-tooltip-neobrutal\n                [text]=\"'Quick signal for actions and shortcuts'\"\n                [color]=\"colorOrange\"\n                [placement]=\"'right'\"\n              >\n                <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n              </duck-dev-tooltip-neobrutal>\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 
-class QuickStartBlock {
-    colorViolet = AccentEnumColor.Violet;
-    colorOrange = AccentEnumColor.Orange;
-    colorWhite = AccentEnumColor.White;
-    colorGray = AccentEnumColor.Gray;
-    colorDark = AccentEnumColor.Dark;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: QuickStartBlock, isStandalone: true, selector: "app-quick-start-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'quickStart.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\" [innerHTML]=\"'quickStart.intro' | transloco\"></div>\n    </dd-card-accent>\n    <dd-card-accent [color]=\"colorGray\">\n      <div class=\"description\" [innerHTML]=\"'quickStart.principles' | transloco\"></div>\n    </dd-card-accent>\n\n    <h2>{{ 'quickStart.sections.install' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.install.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>{{ 'quickStart.install.snippet' | transloco }}</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.palette' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorViolet\">\n      <div class=\"description\">{{ 'quickStart.palette.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>/* variables you can use in CSS */\n--dd-base-0 .. --dd-base-600\n--dd-base-secondary\n--dd-base-accent-orange\n--dd-base-accent-blue\n/* see projects/duck-dev-lib/src/styles/variables.scss for full list */\n</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.themeSwitch' | transloco }}</h2>\n    <ng-template #themeHtml>\n      <pre><code>{{ 'quickStart.themeSwitch.snippet' | transloco }}</code></pre>\n    </ng-template>\n    <ng-template #themeToggle>\n      <pre><code>{{ 'quickStart.themeSwitch.toggleSnippet' | transloco }}</code></pre>\n    </ng-template>\n\n    <dd-card-accent [color]=\"colorOrange\">\n      <div class=\"description\">{{ 'quickStart.themeSwitch.text' | transloco }}</div>\n    </dd-card-accent>\n\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.themeSwitch.indexLabel' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'quickStart.themeSwitch.indexHtmlTitle' | transloco\"\n            [content]=\"themeHtml\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.themeSwitch.toggleLabel' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'quickStart.themeSwitch.toggleTitle' | transloco\"\n            [content]=\"themeToggle\"\n            [color]=\"colorViolet\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <h2>{{ 'quickStart.sections.custom' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.custom.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>{{ 'quickStart.custom.snippet' | transloco }}</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.use' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.use.text' | transloco }}</div>\n    </dd-card-accent>\n\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.use.buttonsTitle' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n          <duck-dev-button-casper [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n          <duck-dev-button-casper [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.use.cardsTitle' | transloco }}</p>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div>Violet card accent</div>\n          </dd-card-accent>\n          <dd-card-accent [color]=\"colorOrange\">\n            <div>Orange card accent</div>\n          </dd-card-accent>\n          <dd-card-accent [color]=\"colorGray\">\n            <div>Gray card accent</div>\n          </dd-card-accent>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .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 .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+function clampProgress(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.min(100, Math.max(0, value));
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, decorators: [{
+function buildProgressSegments(value, count) {
+    const safeCount = Math.min(24, Math.max(4, Math.round(count) || 10));
+    const activeCount = Math.round((clampProgress(value) / 100) * safeCount);
+    return Array.from({ length: safeCount }, (_, index) => index < activeCount);
+}
+
+class DuckDevProgressLine {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressLine, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressLine, isStandalone: true, selector: "duck-dev-progress-line", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-line\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-line__header\">\n    <div class=\"dd-progress-line__copy\">\n      <span class=\"dd-progress-line__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-line__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-line__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-line__track\">\n    <span class=\"dd-progress-line__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-line{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-line__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-line__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-line__label{color:var(--dd-base-600);font-size:15px;font-weight:700;line-height:1.2}.dd-progress-line__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-line__value{color:var(--dd-base-500);font-size:14px;font-weight:700;line-height:1;white-space:nowrap}.dd-progress-line__track{position:relative;height:12px;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 88%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 14%,transparent),0 1px color-mix(in srgb,var(--dd-base-0) 90%,transparent)}.dd-progress-line__fill{display:block;height:100%;border-radius:inherit;transition:width .24s ease;background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:inset 0 -1px color-mix(in srgb,var(--dd-base-600) 16%,transparent)}.dd-progress-line[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-line[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-line[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-line[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-line[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressLine, decorators: [{
             type: Component,
-            args: [{ selector: 'app-quick-start-block', standalone: true, imports: [
-                        TranslocoPipe,
-                        DuckDevCardAccent,
-                        DuckDevAccordionComponent,
-                        ButtonCasper,
-                        DuckDevCardSection,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'quickStart.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\" [innerHTML]=\"'quickStart.intro' | transloco\"></div>\n    </dd-card-accent>\n    <dd-card-accent [color]=\"colorGray\">\n      <div class=\"description\" [innerHTML]=\"'quickStart.principles' | transloco\"></div>\n    </dd-card-accent>\n\n    <h2>{{ 'quickStart.sections.install' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.install.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>{{ 'quickStart.install.snippet' | transloco }}</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.palette' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorViolet\">\n      <div class=\"description\">{{ 'quickStart.palette.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>/* variables you can use in CSS */\n--dd-base-0 .. --dd-base-600\n--dd-base-secondary\n--dd-base-accent-orange\n--dd-base-accent-blue\n/* see projects/duck-dev-lib/src/styles/variables.scss for full list */\n</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.themeSwitch' | transloco }}</h2>\n    <ng-template #themeHtml>\n      <pre><code>{{ 'quickStart.themeSwitch.snippet' | transloco }}</code></pre>\n    </ng-template>\n    <ng-template #themeToggle>\n      <pre><code>{{ 'quickStart.themeSwitch.toggleSnippet' | transloco }}</code></pre>\n    </ng-template>\n\n    <dd-card-accent [color]=\"colorOrange\">\n      <div class=\"description\">{{ 'quickStart.themeSwitch.text' | transloco }}</div>\n    </dd-card-accent>\n\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.themeSwitch.indexLabel' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'quickStart.themeSwitch.indexHtmlTitle' | transloco\"\n            [content]=\"themeHtml\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.themeSwitch.toggleLabel' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'quickStart.themeSwitch.toggleTitle' | transloco\"\n            [content]=\"themeToggle\"\n            [color]=\"colorViolet\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <h2>{{ 'quickStart.sections.custom' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.custom.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>{{ 'quickStart.custom.snippet' | transloco }}</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.use' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.use.text' | transloco }}</div>\n    </dd-card-accent>\n\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.use.buttonsTitle' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n          <duck-dev-button-casper [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n          <duck-dev-button-casper [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.use.cardsTitle' | transloco }}</p>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div>Violet card accent</div>\n          </dd-card-accent>\n          <dd-card-accent [color]=\"colorOrange\">\n            <div>Orange card accent</div>\n          </dd-card-accent>\n          <dd-card-accent [color]=\"colorGray\">\n            <div>Gray card accent</div>\n          </dd-card-accent>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .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 .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
-        }] });
+            args: [{ selector: 'duck-dev-progress-line', standalone: true, template: "<section class=\"dd-progress-line\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-line__header\">\n    <div class=\"dd-progress-line__copy\">\n      <span class=\"dd-progress-line__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-line__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-line__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-line__track\">\n    <span class=\"dd-progress-line__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-line{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-line__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-line__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-line__label{color:var(--dd-base-600);font-size:15px;font-weight:700;line-height:1.2}.dd-progress-line__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-line__value{color:var(--dd-base-500);font-size:14px;font-weight:700;line-height:1;white-space:nowrap}.dd-progress-line__track{position:relative;height:12px;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 88%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 14%,transparent),0 1px color-mix(in srgb,var(--dd-base-0) 90%,transparent)}.dd-progress-line__fill{display:block;height:100%;border-radius:inherit;transition:width .24s ease;background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:inset 0 -1px color-mix(in srgb,var(--dd-base-600) 16%,transparent)}.dd-progress-line[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-line[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-line[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-line[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-line[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
-class DuckDevModalClassic {
-    platformId = inject(PLATFORM_ID);
-    elementRef = inject(ElementRef);
-    isOpen = input.required({ ...(ngDevMode ? { debugName: "isOpen" } : {}) });
-    ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            document.body.appendChild(this.elementRef.nativeElement);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevModalClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevModalClassic, isStandalone: true, selector: "dd-duck-dev-modal-classic", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n    <ng-content />\n  </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] });
+class DuckDevProgressStack {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    segmentCount = input(10, { ...(ngDevMode ? { debugName: "segmentCount" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    segments = computed(() => buildProgressSegments(this.percent(), this.segmentCount()), { ...(ngDevMode ? { debugName: "segments" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressStack, isStandalone: true, selector: "duck-dev-progress-stack", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, segmentCount: { classPropertyName: "segmentCount", publicName: "segmentCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-stack__header\">\n    <div class=\"dd-progress-stack__copy\">\n      <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-stack__segments\">\n    @for (segment of segments(); track $index) {\n      <span class=\"dd-progress-stack__segment\" [class.dd-progress-stack__segment--active]=\"segment\"></span>\n    }\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-stack{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-stack__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-stack__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-stack__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-stack__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-stack__value{color:var(--dd-base-500);font-size:14px;font-weight:700;white-space:nowrap}.dd-progress-stack__segments{display:grid;grid-template-columns:repeat(auto-fit,minmax(18px,1fr));gap:8px;width:100%}.dd-progress-stack__segment{height:14px;border-radius:999px;background:var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 12%,transparent);transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}.dd-progress-stack__segment--active{background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:0 6px 14px color-mix(in srgb,var(--dd-progress-fill-end) 24%,transparent);transform:translateY(-1px)}.dd-progress-stack[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-stack[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-stack[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-stack[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-stack[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevModalClassic, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-duck-dev-modal-classic', imports: [], template: "@if (isOpen()) {\n  <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n    <ng-content />\n  </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] }]
-        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }] } });
+            args: [{ selector: 'duck-dev-progress-stack', standalone: true, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-stack__header\">\n    <div class=\"dd-progress-stack__copy\">\n      <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-stack__segments\">\n    @for (segment of segments(); track $index) {\n      <span class=\"dd-progress-stack__segment\" [class.dd-progress-stack__segment--active]=\"segment\"></span>\n    }\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-stack{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-stack__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-stack__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-stack__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-stack__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-stack__value{color:var(--dd-base-500);font-size:14px;font-weight:700;white-space:nowrap}.dd-progress-stack__segments{display:grid;grid-template-columns:repeat(auto-fit,minmax(18px,1fr));gap:8px;width:100%}.dd-progress-stack__segment{height:14px;border-radius:999px;background:var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 12%,transparent);transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}.dd-progress-stack__segment--active{background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:0 6px 14px color-mix(in srgb,var(--dd-progress-fill-end) 24%,transparent);transform:translateY(-1px)}.dd-progress-stack[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-stack[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-stack[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-stack[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-stack[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], segmentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "segmentCount", required: false }] }] } });
 
-class ModalBlock {
-    isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
-    open() {
-        this.isOpen.set(true);
-    }
-    close() {
-        this.isOpen.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ModalBlock, isStandalone: true, selector: "app-modal-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section,.demo-container dd-card-section{display:block;margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2,.demo-container dd-card-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description,.demo-container dd-card-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3,.demo-container dd-card-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevModalClassic, selector: "dd-duck-dev-modal-classic", inputs: ["isOpen"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+class DuckDevProgressMeter {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    color = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressMeter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressMeter, isStandalone: true, selector: "duck-dev-progress-meter", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-meter\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-meter__header\">\n    <div class=\"dd-progress-meter__copy\">\n      <span class=\"dd-progress-meter__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-meter__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-meter__badge\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-meter__track\">\n    <span class=\"dd-progress-meter__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-meter__marker\" [style.left.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-meter{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:1px solid var(--dd-base-300);border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 94%,transparent),var(--dd-base-0)),var(--dd-base-100);box-shadow:0 12px 24px color-mix(in srgb,var(--dd-base-600) 8%,transparent)}.dd-progress-meter__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dd-progress-meter__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-meter__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-meter__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-meter__badge{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--dd-progress-fill-end) 14%,var(--dd-base-0));color:var(--dd-base-600);font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--dd-progress-fill-end) 20%,transparent)}.dd-progress-meter__track{position:relative;height:18px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 84%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--dd-base-600) 12%,transparent);overflow:hidden}.dd-progress-meter__fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill-start) 92%,white),var(--dd-progress-fill-end)),var(--dd-progress-fill-end);transition:width .24s ease}.dd-progress-meter__marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--dd-base-0);border:3px solid var(--dd-progress-fill-end);box-shadow:0 4px 10px color-mix(in srgb,var(--dd-progress-fill-end) 26%,transparent);transform:translate(-50%,-50%)}.dd-progress-meter[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-meter[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-meter[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-meter[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-meter[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-300)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressMeter, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modal-block', imports: [TranslocoModule, DuckDevCardSection, DuckDevModalClassic, DuckDevIcon], template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section,.demo-container dd-card-section{display:block;margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2,.demo-container dd-card-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description,.demo-container dd-card-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3,.demo-container dd-card-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"] }]
-        }] });
+            args: [{ selector: 'duck-dev-progress-meter', standalone: true, template: "<section class=\"dd-progress-meter\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-meter__header\">\n    <div class=\"dd-progress-meter__copy\">\n      <span class=\"dd-progress-meter__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-meter__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-meter__badge\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-meter__track\">\n    <span class=\"dd-progress-meter__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-meter__marker\" [style.left.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-meter{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:1px solid var(--dd-base-300);border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 94%,transparent),var(--dd-base-0)),var(--dd-base-100);box-shadow:0 12px 24px color-mix(in srgb,var(--dd-base-600) 8%,transparent)}.dd-progress-meter__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dd-progress-meter__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-meter__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-meter__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-meter__badge{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--dd-progress-fill-end) 14%,var(--dd-base-0));color:var(--dd-base-600);font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--dd-progress-fill-end) 20%,transparent)}.dd-progress-meter__track{position:relative;height:18px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 84%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--dd-base-600) 12%,transparent);overflow:hidden}.dd-progress-meter__fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill-start) 92%,white),var(--dd-progress-fill-end)),var(--dd-progress-fill-end);transition:width .24s ease}.dd-progress-meter__marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--dd-base-0);border:3px solid var(--dd-progress-fill-end);box-shadow:0 4px 10px color-mix(in srgb,var(--dd-progress-fill-end) 26%,transparent);transform:translate(-50%,-50%)}.dd-progress-meter[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-meter[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-meter[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-meter[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-meter[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-300)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
-class DuckDevSegmentButton {
+class DuckDevProgressNeobrutalSlab {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
     value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
-    contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
-    templateRef = viewChild.required('contentTpl');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSegmentButton, isStandalone: true, selector: "dd-segment-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] });
+    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,white) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-segment-button', imports: [], template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
+            args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,white) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
-class DuckDevSegmentClassic {
-    cdr = inject(ChangeDetectorRef);
-    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
-    valueChange = output();
-    ionChange = output();
-    segmentButtons;
-    buttonsContainer = viewChild.required('buttonsContainer');
-    buttons = [];
-    selectedValue;
-    indicatorPosition = 2;
-    indicatorWidth = 0;
-    constructor() {
-        afterNextRender(() => {
-            this.rebuildButtons();
-            if (!this.selectedValue && this.buttons.length > 0) {
-                this.selectedValue = this.buttons[0].value;
-            }
-            this.updateIndicator(this.getSelectedIndex());
-            this.cdr.markForCheck();
-        });
-    }
-    ngAfterContentInit() {
-        this.rebuildButtons();
-        const incoming = this.value();
-        this.selectedValue = incoming ?? this.selectedValue;
-        this.segmentButtons.changes.subscribe(() => {
-            this.rebuildButtons();
-            setTimeout(() => this.updateIndicator(this.getSelectedIndex()));
-        });
-    }
-    selectButton(value, index) {
-        if (this.selectedValue === value) {
-            this.updateIndicator(index);
-            return;
-        }
-        this.selectedValue = value;
-        this.valueChange.emit(value);
-        this.ionChange.emit({ detail: { value } });
-        this.updateIndicator(index);
-    }
-    rebuildButtons() {
-        const btns = this.segmentButtons?.toArray() ?? [];
-        this.buttons = btns.map((b) => ({ value: b.value(), contentId: b.contentId(), template: b.templateRef() }));
-    }
-    getSelectedIndex() {
-        return Math.max(0, this.buttons.findIndex((b) => b.value === this.selectedValue));
-    }
-    updateIndicator(index) {
-        const container = this.buttonsContainer().nativeElement;
-        const buttonElements = container.querySelectorAll('.segment-button');
-        if (buttonElements[index]) {
-            const button = buttonElements[index];
-            this.indicatorWidth = button.offsetWidth;
-            this.indicatorPosition = button.offsetLeft;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"segment-container\">\n  <div class=\"segment-background\"></div>\n  <div\n    class=\"segment-indicator\"\n    [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n    [style.width.px]=\"indicatorWidth\"\n  ></div>\n  <div\n    class=\"segment-buttons\"\n    #buttonsContainer\n  >\n    @for (button of buttons; track button; let i = $index) {\n      <button\n        class=\"segment-button\"\n        [class.segment-button-checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <ng-container *ngTemplateOutlet=\"button.template\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+class DuckDevProgressNeobrutalStamp {
+    kicker = input.required({ ...(ngDevMode ? { debugName: "kicker" } : {}) });
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,white) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),color-mix(in srgb,var(--dd-progress-fill) 78%,black));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-segment-classic', imports: [
-                        NgTemplateOutlet
-                    ], template: "<div class=\"segment-container\">\n  <div class=\"segment-background\"></div>\n  <div\n    class=\"segment-indicator\"\n    [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n    [style.width.px]=\"indicatorWidth\"\n  ></div>\n  <div\n    class=\"segment-buttons\"\n    #buttonsContainer\n  >\n    @for (button of buttons; track button; let i = $index) {\n      <button\n        class=\"segment-button\"\n        [class.segment-button-checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <ng-container *ngTemplateOutlet=\"button.template\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
-                type: ContentChildren,
-                args: [DuckDevSegmentButton]
-            }], buttonsContainer: [{ type: i0.ViewChild, args: ['buttonsContainer', { isSignal: true }] }] } });
+            args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,white) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),color-mix(in srgb,var(--dd-progress-fill) 78%,black));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
+        }], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
-class DuckDevSegmentNeobrutal {
-    cdr = inject(ChangeDetectorRef);
+class DuckDevProgressNeobrutalTicket {
+    leftTag = input.required({ ...(ngDevMode ? { debugName: "leftTag" } : {}) });
+    rightTag = input.required({ ...(ngDevMode ? { debugName: "rightTag" } : {}) });
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,white),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,white),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
+        }], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+function getClassicSpeakerBubbleStyle(color) {
+    switch (color) {
+        case AccentEnumColor.Violet:
+            return {
+                '--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-secondary) 12%, var(--dd-base-0))',
+                '--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-secondary) 18%, var(--dd-base-0))',
+                '--dd-speaker-text': 'var(--dd-base-600)',
+                '--dd-speaker-border': 'color-mix(in srgb, var(--dd-base-secondary) 42%, var(--dd-base-300))',
+                '--dd-speaker-accent': 'var(--dd-base-secondary)',
+                '--dd-speaker-shadow': 'color-mix(in srgb, var(--dd-base-secondary) 32%, var(--dd-base-accent-blue))',
+            };
+        case AccentEnumColor.Orange:
+            return {
+                '--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-accent-orange) 14%, var(--dd-base-0))',
+                '--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-accent-yellow) 24%, var(--dd-base-0))',
+                '--dd-speaker-text': 'var(--dd-base-600)',
+                '--dd-speaker-border': 'color-mix(in srgb, var(--dd-base-accent-orange) 45%, var(--dd-base-300))',
+                '--dd-speaker-accent': 'var(--dd-base-accent-orange)',
+                '--dd-speaker-shadow': 'color-mix(in srgb, var(--dd-base-accent-orange) 42%, var(--dd-base-accent-yellow))',
+            };
+        case AccentEnumColor.Gray:
+            return {
+                '--dd-speaker-surface': 'var(--dd-base-0)',
+                '--dd-speaker-surface-muted': 'var(--dd-base-100)',
+                '--dd-speaker-text': 'var(--dd-base-500)',
+                '--dd-speaker-border': 'var(--dd-base-300)',
+                '--dd-speaker-accent': 'var(--dd-base-400)',
+                '--dd-speaker-shadow': 'var(--dd-base-300)',
+            };
+        case AccentEnumColor.Dark:
+            return {
+                '--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-600) 94%, var(--dd-base-500))',
+                '--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-600) 88%, var(--dd-base-500))',
+                '--dd-speaker-text': 'var(--dd-base-0)',
+                '--dd-speaker-border': 'var(--dd-base-400)',
+                '--dd-speaker-accent': 'var(--dd-base-accent-yellow)',
+                '--dd-speaker-shadow': 'color-mix(in srgb, var(--dd-base-accent-orange) 44%, var(--dd-base-600))',
+            };
+        case AccentEnumColor.White:
+        default:
+            return {
+                '--dd-speaker-surface': 'var(--dd-base-0)',
+                '--dd-speaker-surface-muted': 'var(--dd-base-100)',
+                '--dd-speaker-text': 'var(--dd-base-600)',
+                '--dd-speaker-border': 'var(--dd-base-300)',
+                '--dd-speaker-accent': 'var(--dd-base-accent-blue)',
+                '--dd-speaker-shadow': 'color-mix(in srgb, var(--dd-base-accent-blue) 26%, var(--dd-base-300))',
+            };
+    }
+}
+function getNeobrutalSpeakerBubbleStyle(color) {
+    switch (color) {
+        case AccentEnumColor.Violet:
+            return {
+                '--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-accent-blue) 16%, var(--dd-base-0))',
+                '--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-accent-yellow) 20%, var(--dd-base-0))',
+                '--dd-speaker-text': 'var(--dd-base-600)',
+                '--dd-speaker-border': 'var(--dd-base-600)',
+                '--dd-speaker-accent': 'var(--dd-base-accent-yellow)',
+                '--dd-speaker-shadow': 'var(--dd-base-accent-blue)',
+            };
+        case AccentEnumColor.Orange:
+            return {
+                '--dd-speaker-surface': 'color-mix(in srgb, var(--dd-base-accent-orange) 20%, var(--dd-base-0))',
+                '--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-accent-pink) 18%, var(--dd-base-0))',
+                '--dd-speaker-text': 'var(--dd-base-600)',
+                '--dd-speaker-border': 'var(--dd-base-600)',
+                '--dd-speaker-accent': 'var(--dd-base-accent-pink)',
+                '--dd-speaker-shadow': 'var(--dd-base-accent-orange)',
+            };
+        case AccentEnumColor.Gray:
+            return {
+                '--dd-speaker-surface': 'var(--dd-base-100)',
+                '--dd-speaker-surface-muted': 'var(--dd-base-0)',
+                '--dd-speaker-text': 'var(--dd-base-600)',
+                '--dd-speaker-border': 'var(--dd-base-600)',
+                '--dd-speaker-accent': 'var(--dd-base-accent-blue)',
+                '--dd-speaker-shadow': 'var(--dd-base-400)',
+            };
+        case AccentEnumColor.Dark:
+            return {
+                '--dd-speaker-surface': 'var(--dd-base-600)',
+                '--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-600) 90%, var(--dd-base-500))',
+                '--dd-speaker-text': 'var(--dd-base-0)',
+                '--dd-speaker-border': 'var(--dd-base-0)',
+                '--dd-speaker-accent': 'var(--dd-base-accent-yellow)',
+                '--dd-speaker-shadow': 'var(--dd-base-accent-orange)',
+            };
+        case AccentEnumColor.White:
+        default:
+            return {
+                '--dd-speaker-surface': 'var(--dd-base-0)',
+                '--dd-speaker-surface-muted': 'color-mix(in srgb, var(--dd-base-accent-yellow) 14%, var(--dd-base-0))',
+                '--dd-speaker-text': 'var(--dd-base-600)',
+                '--dd-speaker-border': 'var(--dd-base-600)',
+                '--dd-speaker-accent': 'var(--dd-base-accent-orange)',
+                '--dd-speaker-shadow': 'var(--dd-base-accent-blue)',
+            };
+    }
+}
+
+const TAIL_VARIANT_METRICS = {
+    classic: {
+        fallbackDy: 24,
+        padding: 18,
+    },
+    soft: {
+        fallbackDy: 28,
+        padding: 20,
+    },
+    outline: {
+        fallbackDy: 22,
+        padding: 16,
+    },
+    'neobrutal-slab': {
+        fallbackDy: 28,
+        padding: 22,
+    },
+    'neobrutal-ticket': {
+        fallbackDy: 28,
+        padding: 22,
+    },
+};
+function clamp$3(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function lerpPoint(from, to, t) {
+    return {
+        x: from.x + (to.x - from.x) * t,
+        y: from.y + (to.y - from.y) * t,
+    };
+}
+function serializePoint$3(point) {
+    return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+}
+function toPath(points, close = true) {
+    if (points.length === 0) {
+        return '';
+    }
+    const [first, ...rest] = points;
+    const path = [`M ${serializePoint$3(first)}`];
+    for (const point of rest) {
+        path.push(`L ${serializePoint$3(point)}`);
+    }
+    if (close) {
+        path.push('Z');
+    }
+    return path.join(' ');
+}
+function getBubbleElement$3(hostElement) {
+    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
+}
+function closestPointOnRect$3(rect, point) {
+    return {
+        x: clamp$3(point.x, rect.left, rect.right),
+        y: clamp$3(point.y, rect.top, rect.bottom),
+    };
+}
+function resolveTargetElement$3(source, hostElement, documentRef) {
+    if (!source) {
+        return null;
+    }
+    if (source instanceof Element) {
+        return source;
+    }
+    try {
+        const scopedMatch = hostElement.parentElement?.querySelector(source);
+        if (scopedMatch) {
+            return scopedMatch;
+        }
+        return documentRef.querySelector(source);
+    }
+    catch {
+        return null;
+    }
+}
+function getTailBasePoints(bubbleRect, side) {
+    const seventh = bubbleRect.width / 7;
+    const baseStartX = side === 'left'
+        ? clamp$3(seventh, 20, bubbleRect.width - 56)
+        : clamp$3(bubbleRect.width - seventh * 2, 20, bubbleRect.width - 56);
+    const baseEndX = side === 'left'
+        ? clamp$3(seventh * 2, baseStartX + 22, bubbleRect.width - 20)
+        : clamp$3(bubbleRect.width - seventh, baseStartX + 22, bubbleRect.width - 20);
+    const baseY = bubbleRect.height;
+    return {
+        baseStart: { x: baseStartX, y: baseY },
+        baseEnd: { x: baseEndX, y: baseY },
+        anchor: { x: (baseStartX + baseEndX) / 2, y: baseY },
+    };
+}
+function resolveTailSide(bubbleRect, targetRect, preferredTail) {
+    if (preferredTail === 'left' || preferredTail === 'right') {
+        return preferredTail;
+    }
+    const targetCenterX = targetRect
+        ? targetRect.left + targetRect.width / 2
+        : bubbleRect.left + bubbleRect.width / 2;
+    return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
+}
+function buildClassicTail(baseStart, baseEnd, anchor, tip, side) {
+    const dir = side === 'left' ? -1 : 1;
+    const outer = side === 'left' ? baseStart : baseEnd;
+    const inner = side === 'left' ? baseEnd : baseStart;
+    const c1 = { x: outer.x + dir * 8, y: outer.y + 7 };
+    const c2 = { x: anchor.x + (tip.x - anchor.x) * 0.34 + dir * 7, y: anchor.y + (tip.y - anchor.y) * 0.2 };
+    const c3 = { x: tip.x - (tip.x - anchor.x) * 0.08 + dir * 6, y: tip.y - (tip.y - anchor.y) * 0.08 };
+    const c4 = { x: tip.x - (tip.x - anchor.x) * 0.16 - dir * 4, y: tip.y - (tip.y - anchor.y) * 0.02 };
+    const c5 = { x: anchor.x + (tip.x - anchor.x) * 0.72 - dir * 8, y: anchor.y + (tip.y - anchor.y) * 0.76 };
+    const c6 = { x: inner.x - dir * 2, y: inner.y + 10 };
+    const seam = { x: anchor.x + dir * 2, y: anchor.y + 2 };
+    return {
+        path: [
+            `M ${serializePoint$3(outer)}`,
+            `C ${serializePoint$3(c1)} ${serializePoint$3(c2)} ${serializePoint$3(c3)} ${serializePoint$3(tip)}`,
+            `C ${serializePoint$3(c4)} ${serializePoint$3(c5)} ${serializePoint$3(c6)} ${serializePoint$3(inner)}`,
+            `Q ${serializePoint$3(seam)} ${serializePoint$3(outer)}`,
+            'Z',
+        ].join(' '),
+        secondaryPath: null,
+        points: [outer, inner, tip, c1, c2, c3, c4, c5, c6, seam, baseStart, baseEnd],
+    };
+}
+function buildSoftTail(baseStart, baseEnd, anchor, tip, side) {
+    const dir = side === 'left' ? -1 : 1;
+    const outer = side === 'left' ? baseStart : baseEnd;
+    const inner = side === 'left' ? baseEnd : baseStart;
+    const c1 = { x: outer.x + dir * 10, y: outer.y + 10 };
+    const c2 = { x: anchor.x + (tip.x - anchor.x) * 0.3 + dir * 8, y: anchor.y + (tip.y - anchor.y) * 0.18 };
+    const c3 = { x: tip.x - (tip.x - anchor.x) * 0.05 + dir * 6, y: tip.y - (tip.y - anchor.y) * 0.08 };
+    const c4 = { x: tip.x - (tip.x - anchor.x) * 0.18 - dir * 7, y: tip.y + (anchor.y - tip.y) * 0.06 };
+    const c5 = { x: anchor.x + (tip.x - anchor.x) * 0.68 - dir * 10, y: anchor.y + (tip.y - anchor.y) * 0.74 };
+    const c6 = { x: inner.x - dir * 3, y: inner.y + 12 };
+    const seam = { x: anchor.x + dir * 1.5, y: anchor.y + 3 };
+    const shineStart = lerpPoint(outer, tip, 0.16);
+    const shineControl = {
+        x: anchor.x + (tip.x - anchor.x) * 0.42,
+        y: anchor.y + (tip.y - anchor.y) * 0.34 - 5,
+    };
+    const shineEnd = lerpPoint(inner, tip, 0.58);
+    return {
+        path: [
+            `M ${serializePoint$3(outer)}`,
+            `C ${serializePoint$3(c1)} ${serializePoint$3(c2)} ${serializePoint$3(c3)} ${serializePoint$3(tip)}`,
+            `C ${serializePoint$3(c4)} ${serializePoint$3(c5)} ${serializePoint$3(c6)} ${serializePoint$3(inner)}`,
+            `Q ${serializePoint$3(seam)} ${serializePoint$3(outer)}`,
+            'Z',
+        ].join(' '),
+        secondaryPath: `M ${serializePoint$3(shineStart)} Q ${serializePoint$3(shineControl)} ${serializePoint$3(shineEnd)}`,
+        points: [
+            outer,
+            inner,
+            tip,
+            c1,
+            c2,
+            c3,
+            c4,
+            c5,
+            c6,
+            seam,
+            shineStart,
+            shineControl,
+            shineEnd,
+            baseStart,
+            baseEnd,
+        ],
+    };
+}
+function buildOutlineTail(baseStart, baseEnd, anchor, tip, side) {
+    const dir = side === 'left' ? -1 : 1;
+    const outer = side === 'left' ? baseStart : baseEnd;
+    const inner = side === 'left' ? baseEnd : baseStart;
+    const elbowA = {
+        x: anchor.x + (tip.x - anchor.x) * 0.26 + dir * 8,
+        y: anchor.y + (tip.y - anchor.y) * 0.2,
+    };
+    const elbowB = {
+        x: anchor.x + (tip.x - anchor.x) * 0.58 + dir * 3,
+        y: anchor.y + (tip.y - anchor.y) * 0.7,
+    };
+    return {
+        path: toPath([outer, elbowA, tip, elbowB, inner]),
+        secondaryPath: null,
+        points: [outer, inner, tip, elbowA, elbowB, baseStart, baseEnd],
+    };
+}
+function buildNeobrutalSlabTail(baseStart, baseEnd, anchor, tip, side) {
+    const dir = side === 'left' ? -1 : 1;
+    const topOuter = {
+        x: (side === 'left' ? baseStart.x : baseEnd.x) + dir * 4,
+        y: anchor.y - 6,
+    };
+    const topInner = {
+        x: (side === 'left' ? baseEnd.x : baseStart.x) - dir * 4,
+        y: anchor.y - 6,
+    };
+    const hip = { x: anchor.x - dir * 14, y: anchor.y + 9 };
+    const midA = {
+        x: anchor.x + (tip.x - anchor.x) * 0.24 + dir * 10,
+        y: anchor.y + (tip.y - anchor.y) * 0.2,
+    };
+    const midB = {
+        x: anchor.x + (tip.x - anchor.x) * 0.56 + dir * 4,
+        y: anchor.y + (tip.y - anchor.y) * 0.64,
+    };
+    const accentA = lerpPoint(topInner, tip, 0.18);
+    const accentB = lerpPoint(topOuter, tip, 0.36);
+    const accentC = lerpPoint(hip, tip, 0.58);
+    return {
+        path: toPath([topOuter, topInner, midA, tip, midB, hip]),
+        secondaryPath: toPath([accentA, accentB, tip, accentC]),
+        points: [
+            topOuter,
+            topInner,
+            midA,
+            tip,
+            midB,
+            hip,
+            accentA,
+            accentB,
+            accentC,
+            baseStart,
+            baseEnd,
+        ],
+    };
+}
+function buildNeobrutalTicketTail(baseStart, baseEnd, anchor, tip, side) {
+    const dir = side === 'left' ? -1 : 1;
+    const topOuter = {
+        x: (side === 'left' ? baseStart.x : baseEnd.x) + dir * 4,
+        y: anchor.y - 6,
+    };
+    const topInner = {
+        x: (side === 'left' ? baseEnd.x : baseStart.x) - dir * 4,
+        y: anchor.y - 6,
+    };
+    const hip = { x: anchor.x - dir * 12, y: anchor.y + 10 };
+    const midA = {
+        x: anchor.x + (tip.x - anchor.x) * 0.26 + dir * 10,
+        y: anchor.y + (tip.y - anchor.y) * 0.18,
+    };
+    const midB = {
+        x: anchor.x + (tip.x - anchor.x) * 0.58 + dir * 3,
+        y: anchor.y + (tip.y - anchor.y) * 0.62,
+    };
+    const notchStart = {
+        x: anchor.x + dir * 7,
+        y: anchor.y - 5,
+    };
+    const notchMiddle = {
+        x: anchor.x + dir * 7,
+        y: anchor.y + 8,
+    };
+    const notchEnd = {
+        x: anchor.x + (tip.x - anchor.x) * 0.22,
+        y: anchor.y + (tip.y - anchor.y) * 0.34,
+    };
+    return {
+        path: toPath([topOuter, topInner, midA, tip, midB, hip]),
+        secondaryPath: `M ${serializePoint$3(notchStart)} L ${serializePoint$3(notchMiddle)} L ${serializePoint$3(notchEnd)}`,
+        points: [
+            topOuter,
+            topInner,
+            midA,
+            tip,
+            midB,
+            hip,
+            notchStart,
+            notchMiddle,
+            notchEnd,
+            baseStart,
+            baseEnd,
+        ],
+    };
+}
+function buildTailPathBundle(variant, baseStart, baseEnd, anchor, tip, side) {
+    switch (variant) {
+        case 'soft':
+            return buildSoftTail(baseStart, baseEnd, anchor, tip, side);
+        case 'outline':
+            return buildOutlineTail(baseStart, baseEnd, anchor, tip, side);
+        case 'neobrutal-slab':
+            return buildNeobrutalSlabTail(baseStart, baseEnd, anchor, tip, side);
+        case 'neobrutal-ticket':
+            return buildNeobrutalTicketTail(baseStart, baseEnd, anchor, tip, side);
+        case 'classic':
+        default:
+            return buildClassicTail(baseStart, baseEnd, anchor, tip, side);
+    }
+}
+function buildTailRenderModel(variant, bubbleRect, targetRect, preferredTail) {
+    const metrics = TAIL_VARIANT_METRICS[variant];
+    const side = resolveTailSide(bubbleRect, targetRect, preferredTail);
+    const { baseStart, baseEnd, anchor } = getTailBasePoints(bubbleRect, side);
+    const anchorViewport = {
+        x: bubbleRect.left + anchor.x,
+        y: bubbleRect.top + anchor.y,
+    };
+    const targetPoint = targetRect
+        ? closestPointOnRect$3(targetRect, anchorViewport)
+        : {
+            x: bubbleRect.left + (side === 'left' ? baseStart.x : baseEnd.x),
+            y: anchorViewport.y + metrics.fallbackDy,
+        };
+    const tip = {
+        x: clamp$3(targetPoint.x - bubbleRect.left, -48, bubbleRect.width + 48),
+        y: Math.max(targetPoint.y - bubbleRect.top, bubbleRect.height + metrics.fallbackDy),
+    };
+    const bundle = buildTailPathBundle(variant, baseStart, baseEnd, anchor, tip, side);
+    const bounds = bundle.points.reduce((acc, point) => ({
+        minX: Math.min(acc.minX, point.x),
+        minY: Math.min(acc.minY, point.y),
+        maxX: Math.max(acc.maxX, point.x),
+        maxY: Math.max(acc.maxY, point.y),
+    }), {
+        minX: Number.POSITIVE_INFINITY,
+        minY: Number.POSITIVE_INFINITY,
+        maxX: Number.NEGATIVE_INFINITY,
+        maxY: Number.NEGATIVE_INFINITY,
+    });
+    const translateX = metrics.padding - bounds.minX;
+    const translateY = metrics.padding - bounds.minY;
+    const width = Math.max(1, bounds.maxX - bounds.minX + metrics.padding * 2);
+    const height = Math.max(1, bounds.maxY - bounds.minY + metrics.padding * 2);
+    const translatePath = (path) => path
+        ?.replace(/-?\d+(?:\.\d+)? -?\d+(?:\.\d+)?/g, (match) => {
+        const [x, y] = match.split(' ').map(Number);
+        return `${(x + translateX).toFixed(2)} ${(y + translateY).toFixed(2)}`;
+    })
+        .trim() ?? null;
+    return {
+        side,
+        style: {
+            left: `${bounds.minX - metrics.padding}px`,
+            top: `${bounds.minY - metrics.padding}px`,
+            width: `${width}px`,
+            height: `${height}px`,
+        },
+        viewBox: `0 0 ${width.toFixed(2)} ${height.toFixed(2)}`,
+        path: translatePath(bundle.path) ?? '',
+        secondaryPath: translatePath(bundle.secondaryPath),
+    };
+}
+function useSpeakerBubbleTail(variant, tail, target) {
+    const hostRef = inject((ElementRef));
+    const documentRef = inject(DOCUMENT);
+    const destroyRef = inject(DestroyRef);
+    const platformId = inject(PLATFORM_ID);
+    const isBrowser = isPlatformBrowser(platformId);
+    const renderModel = signal({
+        side: 'left',
+        style: {
+            left: '0px',
+            top: '0px',
+            width: '1px',
+            height: '1px',
+        },
+        viewBox: '0 0 1 1',
+        path: '',
+        secondaryPath: null,
+    }, { ...(ngDevMode ? { debugName: "renderModel" } : {}) });
+    let animationFrameId = -1;
+    let resizeObserver = null;
+    let observedTarget = null;
+    let isInitialized = false;
+    const cleanupObservers = () => {
+        if (animationFrameId !== -1) {
+            cancelAnimationFrame(animationFrameId);
+            animationFrameId = -1;
+        }
+        resizeObserver?.disconnect();
+        resizeObserver = null;
+        observedTarget = null;
+    };
+    const refreshTail = () => {
+        if (!isBrowser) {
+            return;
+        }
+        const bubbleElement = getBubbleElement$3(hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        const targetElement = resolveTargetElement$3(target(), hostRef.nativeElement, documentRef);
+        if (resizeObserver && targetElement !== observedTarget) {
+            if (observedTarget) {
+                resizeObserver.unobserve(observedTarget);
+            }
+            if (targetElement) {
+                resizeObserver.observe(targetElement);
+            }
+            observedTarget = targetElement;
+        }
+        renderModel.set(buildTailRenderModel(variant, bubbleElement.getBoundingClientRect(), targetElement?.getBoundingClientRect() ?? null, tail()));
+    };
+    const scheduleRefresh = () => {
+        if (!isBrowser || animationFrameId !== -1) {
+            return;
+        }
+        animationFrameId = requestAnimationFrame(() => {
+            animationFrameId = -1;
+            refreshTail();
+        });
+    };
+    const setupObservers = () => {
+        if (!isBrowser || isInitialized) {
+            return;
+        }
+        const bubbleElement = getBubbleElement$3(hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleRefresh);
+        resizeObserver?.observe(bubbleElement);
+        const targetElement = resolveTargetElement$3(target(), hostRef.nativeElement, documentRef);
+        if (targetElement) {
+            resizeObserver?.observe(targetElement);
+            observedTarget = targetElement;
+        }
+        documentRef.defaultView?.addEventListener('resize', scheduleRefresh);
+        documentRef.addEventListener('scroll', scheduleRefresh, true);
+        destroyRef.onDestroy(() => {
+            documentRef.defaultView?.removeEventListener('resize', scheduleRefresh);
+            documentRef.removeEventListener('scroll', scheduleRefresh, true);
+            cleanupObservers();
+        });
+        isInitialized = true;
+        scheduleRefresh();
+    };
+    afterNextRender(() => {
+        setupObservers();
+        scheduleRefresh();
+    });
+    afterRenderEffect(() => {
+        if (!isBrowser) {
+            return;
+        }
+        tail();
+        target();
+        setupObservers();
+        scheduleRefresh();
+    });
+    return {
+        resolvedTail: computed(() => renderModel().side),
+        tailStyle: computed(() => renderModel().style),
+        tailViewBox: computed(() => renderModel().viewBox),
+        tailPath: computed(() => renderModel().path),
+        tailSecondaryPath: computed(() => renderModel().secondaryPath),
+    };
+}
+
+const DEFAULT_BUBBLE_GEOMETRY$2 = {
+    side: 'left',
+    style: {
+        left: '0px',
+        top: '0px',
+        width: '1px',
+        height: '1px',
+    },
+    viewBox: '0 0 1 1',
+    path: '',
+};
+function clamp$2(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function serializePoint$2(point) {
+    return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+}
+function closestPointOnRect$2(rect, point) {
+    return {
+        x: clamp$2(point.x, rect.left, rect.right),
+        y: clamp$2(point.y, rect.top, rect.bottom),
+    };
+}
+function resolveTargetElement$2(source, hostElement, documentRef) {
+    if (!source) {
+        return null;
+    }
+    if (source instanceof Element) {
+        return source;
+    }
+    try {
+        const localMatch = hostElement.parentElement?.querySelector(source);
+        if (localMatch) {
+            return localMatch;
+        }
+        return documentRef.querySelector(source);
+    }
+    catch {
+        return null;
+    }
+}
+function getBubbleElement$2(hostElement) {
+    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
+}
+function createUnifiedBubblePath$2(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY) {
+    const left = offsetX;
+    const top = offsetY;
+    const right = offsetX + width;
+    const bottom = offsetY + height;
+    const start = { x: left + radius, y: top };
+    const bottomRight = { x: right, y: bottom - radius };
+    const bottomRightArcEnd = { x: right - radius, y: bottom };
+    const baseStart = { x: offsetX + baseStartX, y: bottom };
+    const baseEnd = { x: offsetX + baseEndX, y: bottom };
+    const tip = { x: offsetX + tipX, y: offsetY + tipY };
+    const bottomLeftArcStart = { x: left + radius, y: bottom };
+    const leftBottom = { x: left, y: bottom - radius };
+    const leftTop = { x: left, y: top + radius };
+    return [
+        `M ${serializePoint$2(start)}`,
+        `H ${(right - radius).toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${right.toFixed(2)} ${(top + radius).toFixed(2)}`,
+        `V ${bottomRight.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$2(bottomRightArcEnd)}`,
+        `H ${baseEnd.x.toFixed(2)}`,
+        `L ${serializePoint$2(tip)}`,
+        `L ${serializePoint$2(baseStart)}`,
+        `H ${bottomLeftArcStart.x.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$2(leftBottom)}`,
+        `V ${leftTop.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$2(start)}`,
+        'Z',
+    ].join(' ');
+}
+class DuckDevSpeakerBubbleClassic {
+    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
+    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
+    hostRef = inject((ElementRef));
+    documentRef = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    bubbleGeometry = signal(DEFAULT_BUBBLE_GEOMETRY$2, { ...(ngDevMode ? { debugName: "bubbleGeometry" } : {}) });
+    animationFrameId = -1;
+    resizeObserver = null;
+    observedTarget = null;
+    observersInitialized = false;
+    bubbleStyle = computed(() => getClassicSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
+    resolvedTail = computed(() => this.bubbleGeometry().side, { ...(ngDevMode ? { debugName: "resolvedTail" } : {}) });
+    shapeStyle = computed(() => this.bubbleGeometry().style, { ...(ngDevMode ? { debugName: "shapeStyle" } : {}) });
+    shapeViewBox = computed(() => this.bubbleGeometry().viewBox, { ...(ngDevMode ? { debugName: "shapeViewBox" } : {}) });
+    shapePath = computed(() => this.bubbleGeometry().path, { ...(ngDevMode ? { debugName: "shapePath" } : {}) });
+    constructor() {
+        afterNextRender(() => {
+            this.setupObservers();
+            this.scheduleRefresh();
+        });
+        afterRenderEffect(() => {
+            this.tail();
+            this.target();
+            this.setupObservers();
+            this.scheduleRefresh();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.documentRef.defaultView?.removeEventListener('resize', this.scheduleRefresh);
+            this.documentRef.removeEventListener('scroll', this.scheduleRefresh, true);
+            if (this.animationFrameId !== -1) {
+                cancelAnimationFrame(this.animationFrameId);
+            }
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.observedTarget = null;
+        });
+    }
+    scheduleRefresh = () => {
+        if (!this.isBrowser || this.animationFrameId !== -1) {
+            return;
+        }
+        this.animationFrameId = requestAnimationFrame(() => {
+            this.animationFrameId = -1;
+            this.refreshShape();
+        });
+    };
+    setupObservers() {
+        if (!this.isBrowser || this.observersInitialized) {
+            return;
+        }
+        const bubbleElement = getBubbleElement$2(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleRefresh());
+            this.resizeObserver.observe(bubbleElement);
+        }
+        const targetElement = resolveTargetElement$2(this.target(), this.hostRef.nativeElement, this.documentRef);
+        if (targetElement) {
+            this.resizeObserver?.observe(targetElement);
+            this.observedTarget = targetElement;
+        }
+        this.documentRef.defaultView?.addEventListener('resize', this.scheduleRefresh);
+        this.documentRef.addEventListener('scroll', this.scheduleRefresh, true);
+        this.observersInitialized = true;
+    }
+    refreshShape() {
+        if (!this.isBrowser) {
+            return;
+        }
+        const bubbleElement = getBubbleElement$2(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        const targetElement = resolveTargetElement$2(this.target(), this.hostRef.nativeElement, this.documentRef);
+        if (this.resizeObserver && targetElement !== this.observedTarget) {
+            if (this.observedTarget) {
+                this.resizeObserver.unobserve(this.observedTarget);
+            }
+            if (targetElement) {
+                this.resizeObserver.observe(targetElement);
+            }
+            this.observedTarget = targetElement;
+        }
+        const bubbleRect = bubbleElement.getBoundingClientRect();
+        const targetRect = targetElement?.getBoundingClientRect() ?? null;
+        const side = this.resolveTailSide(bubbleRect, targetRect);
+        const seventh = bubbleRect.width / 7;
+        const baseStartX = side === 'left'
+            ? clamp$2(seventh, 20, bubbleRect.width - 56)
+            : clamp$2(bubbleRect.width - seventh * 2, 20, bubbleRect.width - 56);
+        const baseEndX = side === 'left'
+            ? clamp$2(seventh * 2, baseStartX + 22, bubbleRect.width - 20)
+            : clamp$2(bubbleRect.width - seventh, baseStartX + 22, bubbleRect.width - 20);
+        const anchor = {
+            x: bubbleRect.left + (baseStartX + baseEndX) / 2,
+            y: bubbleRect.bottom,
+        };
+        const targetPoint = targetRect
+            ? closestPointOnRect$2(targetRect, anchor)
+            : {
+                x: bubbleRect.left + (side === 'left' ? baseStartX : baseEndX),
+                y: bubbleRect.bottom + Math.max(24, bubbleRect.height / 4),
+            };
+        const tipX = clamp$2(targetPoint.x - bubbleRect.left, -48, bubbleRect.width + 48);
+        const tipY = Math.max(targetPoint.y - bubbleRect.top, bubbleRect.height + 22);
+        const minX = Math.min(0, tipX);
+        const maxX = Math.max(bubbleRect.width, tipX);
+        const maxY = Math.max(bubbleRect.height, tipY);
+        const padding = 10;
+        const offsetX = padding - minX;
+        const offsetY = padding;
+        const width = maxX - minX + padding * 2;
+        const height = maxY + padding * 2;
+        this.bubbleGeometry.set({
+            side,
+            style: {
+                left: `${minX - padding}px`,
+                top: `${-padding}px`,
+                width: `${width}px`,
+                height: `${height}px`,
+            },
+            viewBox: `0 0 ${width.toFixed(2)} ${height.toFixed(2)}`,
+            path: createUnifiedBubblePath$2(bubbleRect.width, bubbleRect.height, 18, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY),
+        });
+    }
+    resolveTailSide(bubbleRect, targetRect) {
+        const tail = this.tail();
+        if (tail === 'left' || tail === 'right') {
+            return tail;
+        }
+        const targetCenterX = targetRect
+            ? targetRect.left + targetRect.width / 2
+            : bubbleRect.left + bubbleRect.width / 2;
+        return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleClassic, isStandalone: true, selector: "dd-speaker-bubble-classic", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-speaker-bubble-classic\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-classic__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-classic__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n  <div class=\"dd-speaker-bubble-classic__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-classic{position:relative;isolation:isolate;overflow:visible;padding:18px 20px 17px;color:var(--dd-speaker-text)}.dd-speaker-bubble-classic__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(6px 6px 0 color-mix(in srgb,var(--dd-speaker-shadow) 36%,transparent))}.dd-speaker-bubble-classic__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 90%,var(--dd-speaker-text));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-classic__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-classic__content :first-child{margin-top:0}.dd-speaker-bubble-classic__content :last-child{margin-bottom:0}.dd-speaker-bubble-classic__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-classic__content small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleClassic, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-speaker-bubble-classic', standalone: true, imports: [NgStyle], template: "<div\n  class=\"dd-speaker-bubble-classic\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-classic__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-classic__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n  <div class=\"dd-speaker-bubble-classic__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-classic{position:relative;isolation:isolate;overflow:visible;padding:18px 20px 17px;color:var(--dd-speaker-text)}.dd-speaker-bubble-classic__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(6px 6px 0 color-mix(in srgb,var(--dd-speaker-shadow) 36%,transparent))}.dd-speaker-bubble-classic__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 90%,var(--dd-speaker-text));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-classic__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-classic__content :first-child{margin-top:0}.dd-speaker-bubble-classic__content :last-child{margin-bottom:0}.dd-speaker-bubble-classic__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-classic__content small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+
+class DuckDevSpeakerBubbleSoft {
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
+    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
+    tailController = useSpeakerBubbleTail('soft', this.tail, this.target);
+    bubbleStyle = computed(() => getClassicSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
+    resolvedTail = this.tailController.resolvedTail;
+    tailStyle = this.tailController.tailStyle;
+    tailViewBox = this.tailController.tailViewBox;
+    tailPath = this.tailController.tailPath;
+    tailSecondaryPath = this.tailController.tailSecondaryPath;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleSoft, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleSoft, isStandalone: true, selector: "dd-speaker-bubble-soft", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-speaker-bubble-soft\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n  <span class=\"dd-speaker-bubble-soft__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n    <svg\n      [attr.viewBox]=\"tailViewBox()\"\n      preserveAspectRatio=\"none\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      <path\n        class=\"dd-speaker-bubble-soft__tail-path\"\n        [attr.d]=\"tailPath()\"\n      />\n      <path\n        class=\"dd-speaker-bubble-soft__tail-shine\"\n        [attr.d]=\"tailSecondaryPath()\"\n      />\n    </svg>\n  </span>\n  <div class=\"dd-speaker-bubble-soft__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-soft{position:relative;isolation:isolate;overflow:visible;padding:19px 21px 18px;border:1px solid color-mix(in srgb,var(--dd-speaker-border) 78%,var(--dd-speaker-accent));border-radius:28px 28px 28px 18px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--dd-speaker-accent) 22%,transparent) 0,transparent 38%),radial-gradient(circle at 24% 18%,color-mix(in srgb,white 42%,transparent) 0,transparent 22%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 82%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%);box-shadow:inset 0 1px color-mix(in srgb,var(--dd-speaker-surface) 85%,white),0 16px 30px color-mix(in srgb,var(--dd-speaker-shadow) 16%,transparent),0 4px 14px color-mix(in srgb,var(--dd-speaker-accent) 10%,transparent);color:var(--dd-speaker-text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-speaker-bubble-soft[data-tail=right]{border-radius:28px 28px 18px}.dd-speaker-bubble-soft__tail{position:absolute;z-index:-1;filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--dd-speaker-shadow) 14%,transparent)) drop-shadow(0 2px 3px color-mix(in srgb,white 24%,transparent));pointer-events:none}.dd-speaker-bubble-soft__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-soft__tail-path{fill:color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface));stroke:color-mix(in srgb,var(--dd-speaker-border) 72%,var(--dd-speaker-accent));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-soft__tail-shine{fill:none;stroke:color-mix(in srgb,white 48%,var(--dd-speaker-accent));stroke-width:1.6;stroke-linecap:round;opacity:.72}.dd-speaker-bubble-soft__content :first-child{margin-top:0}.dd-speaker-bubble-soft__content :last-child{margin-bottom:0}.dd-speaker-bubble-soft__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-soft__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.05em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleSoft, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-speaker-bubble-soft', standalone: true, imports: [NgStyle], template: "<div class=\"dd-speaker-bubble-soft\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n  <span class=\"dd-speaker-bubble-soft__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n    <svg\n      [attr.viewBox]=\"tailViewBox()\"\n      preserveAspectRatio=\"none\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      <path\n        class=\"dd-speaker-bubble-soft__tail-path\"\n        [attr.d]=\"tailPath()\"\n      />\n      <path\n        class=\"dd-speaker-bubble-soft__tail-shine\"\n        [attr.d]=\"tailSecondaryPath()\"\n      />\n    </svg>\n  </span>\n  <div class=\"dd-speaker-bubble-soft__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-soft{position:relative;isolation:isolate;overflow:visible;padding:19px 21px 18px;border:1px solid color-mix(in srgb,var(--dd-speaker-border) 78%,var(--dd-speaker-accent));border-radius:28px 28px 28px 18px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--dd-speaker-accent) 22%,transparent) 0,transparent 38%),radial-gradient(circle at 24% 18%,color-mix(in srgb,white 42%,transparent) 0,transparent 22%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 82%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%);box-shadow:inset 0 1px color-mix(in srgb,var(--dd-speaker-surface) 85%,white),0 16px 30px color-mix(in srgb,var(--dd-speaker-shadow) 16%,transparent),0 4px 14px color-mix(in srgb,var(--dd-speaker-accent) 10%,transparent);color:var(--dd-speaker-text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-speaker-bubble-soft[data-tail=right]{border-radius:28px 28px 18px}.dd-speaker-bubble-soft__tail{position:absolute;z-index:-1;filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--dd-speaker-shadow) 14%,transparent)) drop-shadow(0 2px 3px color-mix(in srgb,white 24%,transparent));pointer-events:none}.dd-speaker-bubble-soft__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-soft__tail-path{fill:color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface));stroke:color-mix(in srgb,var(--dd-speaker-border) 72%,var(--dd-speaker-accent));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-soft__tail-shine{fill:none;stroke:color-mix(in srgb,white 48%,var(--dd-speaker-accent));stroke-width:1.6;stroke-linecap:round;opacity:.72}.dd-speaker-bubble-soft__content :first-child{margin-top:0}.dd-speaker-bubble-soft__content :last-child{margin-bottom:0}.dd-speaker-bubble-soft__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-soft__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.05em;text-transform:uppercase}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+
+class DuckDevSpeakerBubbleOutline {
+    color = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
+    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
+    tailController = useSpeakerBubbleTail('outline', this.tail, this.target);
+    bubbleStyle = computed(() => getClassicSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
+    resolvedTail = this.tailController.resolvedTail;
+    tailStyle = this.tailController.tailStyle;
+    tailViewBox = this.tailController.tailViewBox;
+    tailPath = this.tailController.tailPath;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleOutline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleOutline, isStandalone: true, selector: "dd-speaker-bubble-outline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-speaker-bubble-outline\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <span class=\"dd-speaker-bubble-outline__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n    <svg\n      [attr.viewBox]=\"tailViewBox()\"\n      preserveAspectRatio=\"none\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      <path\n        class=\"dd-speaker-bubble-outline__tail-path\"\n        [attr.d]=\"tailPath()\"\n      />\n    </svg>\n  </span>\n  <div class=\"dd-speaker-bubble-outline__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-outline{position:relative;isolation:isolate;overflow:visible;padding:17px 19px 16px;border:2px solid var(--dd-speaker-border);border-radius:22px 22px 22px 10px;outline:1px dashed color-mix(in srgb,var(--dd-speaker-accent) 45%,transparent);outline-offset:-8px;background:linear-gradient(90deg,var(--dd-speaker-accent),var(--dd-speaker-accent)) 14px calc(100% - 12px) /28px 3px no-repeat,linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-accent) 8%,transparent) 0,transparent 52%),var(--dd-speaker-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dd-speaker-surface) 50%,white),6px 6px color-mix(in srgb,var(--dd-speaker-accent) 18%,transparent);color:var(--dd-speaker-text)}.dd-speaker-bubble-outline[data-tail=right]{border-radius:22px 22px 10px;background-position:calc(100% - 14px) calc(100% - 12px),0 0,0 0}.dd-speaker-bubble-outline__tail{position:absolute;z-index:-1;filter:drop-shadow(3px 4px 0 color-mix(in srgb,var(--dd-speaker-accent) 14%,transparent));pointer-events:none}.dd-speaker-bubble-outline__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-outline__tail-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}.dd-speaker-bubble-outline__content :first-child{margin-top:0}.dd-speaker-bubble-outline__content :last-child{margin-bottom:0}.dd-speaker-bubble-outline__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-outline__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleOutline, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-speaker-bubble-outline', standalone: true, imports: [NgStyle], template: "<div\n  class=\"dd-speaker-bubble-outline\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <span class=\"dd-speaker-bubble-outline__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n    <svg\n      [attr.viewBox]=\"tailViewBox()\"\n      preserveAspectRatio=\"none\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      <path\n        class=\"dd-speaker-bubble-outline__tail-path\"\n        [attr.d]=\"tailPath()\"\n      />\n    </svg>\n  </span>\n  <div class=\"dd-speaker-bubble-outline__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-outline{position:relative;isolation:isolate;overflow:visible;padding:17px 19px 16px;border:2px solid var(--dd-speaker-border);border-radius:22px 22px 22px 10px;outline:1px dashed color-mix(in srgb,var(--dd-speaker-accent) 45%,transparent);outline-offset:-8px;background:linear-gradient(90deg,var(--dd-speaker-accent),var(--dd-speaker-accent)) 14px calc(100% - 12px) /28px 3px no-repeat,linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-accent) 8%,transparent) 0,transparent 52%),var(--dd-speaker-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dd-speaker-surface) 50%,white),6px 6px color-mix(in srgb,var(--dd-speaker-accent) 18%,transparent);color:var(--dd-speaker-text)}.dd-speaker-bubble-outline[data-tail=right]{border-radius:22px 22px 10px;background-position:calc(100% - 14px) calc(100% - 12px),0 0,0 0}.dd-speaker-bubble-outline__tail{position:absolute;z-index:-1;filter:drop-shadow(3px 4px 0 color-mix(in srgb,var(--dd-speaker-accent) 14%,transparent));pointer-events:none}.dd-speaker-bubble-outline__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-outline__tail-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}.dd-speaker-bubble-outline__content :first-child{margin-top:0}.dd-speaker-bubble-outline__content :last-child{margin-bottom:0}.dd-speaker-bubble-outline__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-outline__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.08em;text-transform:uppercase}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+
+const DEFAULT_BUBBLE_GEOMETRY$1 = {
+    side: 'left',
+    style: {
+        left: '0px',
+        top: '0px',
+        width: '1px',
+        height: '1px',
+    },
+    viewBox: '0 0 1 1',
+    path: '',
+};
+function clamp$1(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function serializePoint$1(point) {
+    return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+}
+function closestPointOnRect$1(rect, point) {
+    return {
+        x: clamp$1(point.x, rect.left, rect.right),
+        y: clamp$1(point.y, rect.top, rect.bottom),
+    };
+}
+function resolveTargetElement$1(source, hostElement, documentRef) {
+    if (!source) {
+        return null;
+    }
+    if (source instanceof Element) {
+        return source;
+    }
+    try {
+        const localMatch = hostElement.parentElement?.querySelector(source);
+        if (localMatch) {
+            return localMatch;
+        }
+        return documentRef.querySelector(source);
+    }
+    catch {
+        return null;
+    }
+}
+function getBubbleElement$1(hostElement) {
+    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
+}
+function createUnifiedBubblePath$1(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY) {
+    const left = offsetX;
+    const top = offsetY;
+    const right = offsetX + width;
+    const bottom = offsetY + height;
+    const start = { x: left + radius, y: top };
+    const bottomRight = { x: right, y: bottom - radius };
+    const bottomRightArcEnd = { x: right - radius, y: bottom };
+    const baseStart = { x: offsetX + baseStartX, y: bottom };
+    const baseEnd = { x: offsetX + baseEndX, y: bottom };
+    const tip = { x: offsetX + tipX, y: offsetY + tipY };
+    const bottomLeftArcStart = { x: left + radius, y: bottom };
+    const leftBottom = { x: left, y: bottom - radius };
+    const leftTop = { x: left, y: top + radius };
+    return [
+        `M ${serializePoint$1(start)}`,
+        `H ${(right - radius).toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${right.toFixed(2)} ${(top + radius).toFixed(2)}`,
+        `V ${bottomRight.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$1(bottomRightArcEnd)}`,
+        `H ${baseEnd.x.toFixed(2)}`,
+        `L ${serializePoint$1(tip)}`,
+        `L ${serializePoint$1(baseStart)}`,
+        `H ${bottomLeftArcStart.x.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$1(leftBottom)}`,
+        `V ${leftTop.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$1(start)}`,
+        'Z',
+    ].join(' ');
+}
+class DuckDevSpeakerBubbleNeobrutalSlab {
+    color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
+    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
+    hostRef = inject((ElementRef));
+    documentRef = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    bubbleGeometry = signal(DEFAULT_BUBBLE_GEOMETRY$1, { ...(ngDevMode ? { debugName: "bubbleGeometry" } : {}) });
+    animationFrameId = -1;
+    resizeObserver = null;
+    observedTarget = null;
+    observersInitialized = false;
+    bubbleStyle = computed(() => getNeobrutalSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
+    resolvedTail = computed(() => this.bubbleGeometry().side, { ...(ngDevMode ? { debugName: "resolvedTail" } : {}) });
+    shapeStyle = computed(() => this.bubbleGeometry().style, { ...(ngDevMode ? { debugName: "shapeStyle" } : {}) });
+    shapeViewBox = computed(() => this.bubbleGeometry().viewBox, { ...(ngDevMode ? { debugName: "shapeViewBox" } : {}) });
+    shapePath = computed(() => this.bubbleGeometry().path, { ...(ngDevMode ? { debugName: "shapePath" } : {}) });
+    constructor() {
+        afterNextRender(() => {
+            this.setupObservers();
+            this.scheduleRefresh();
+        });
+        afterRenderEffect(() => {
+            this.tail();
+            this.target();
+            this.setupObservers();
+            this.scheduleRefresh();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.documentRef.defaultView?.removeEventListener('resize', this.scheduleRefresh);
+            this.documentRef.removeEventListener('scroll', this.scheduleRefresh, true);
+            if (this.animationFrameId !== -1) {
+                cancelAnimationFrame(this.animationFrameId);
+            }
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.observedTarget = null;
+        });
+    }
+    scheduleRefresh = () => {
+        if (!this.isBrowser || this.animationFrameId !== -1) {
+            return;
+        }
+        this.animationFrameId = requestAnimationFrame(() => {
+            this.animationFrameId = -1;
+            this.refreshShape();
+        });
+    };
+    setupObservers() {
+        if (!this.isBrowser || this.observersInitialized) {
+            return;
+        }
+        const bubbleElement = getBubbleElement$1(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleRefresh());
+            this.resizeObserver.observe(bubbleElement);
+        }
+        const targetElement = resolveTargetElement$1(this.target(), this.hostRef.nativeElement, this.documentRef);
+        if (targetElement) {
+            this.resizeObserver?.observe(targetElement);
+            this.observedTarget = targetElement;
+        }
+        this.documentRef.defaultView?.addEventListener('resize', this.scheduleRefresh);
+        this.documentRef.addEventListener('scroll', this.scheduleRefresh, true);
+        this.observersInitialized = true;
+    }
+    refreshShape() {
+        if (!this.isBrowser) {
+            return;
+        }
+        const bubbleElement = getBubbleElement$1(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        const targetElement = resolveTargetElement$1(this.target(), this.hostRef.nativeElement, this.documentRef);
+        if (this.resizeObserver && targetElement !== this.observedTarget) {
+            if (this.observedTarget) {
+                this.resizeObserver.unobserve(this.observedTarget);
+            }
+            if (targetElement) {
+                this.resizeObserver.observe(targetElement);
+            }
+            this.observedTarget = targetElement;
+        }
+        const bubbleRect = bubbleElement.getBoundingClientRect();
+        const targetRect = targetElement?.getBoundingClientRect() ?? null;
+        const side = this.resolveTailSide(bubbleRect, targetRect);
+        const seventh = bubbleRect.width / 7;
+        const baseStartX = side === 'left'
+            ? clamp$1(seventh, 24, bubbleRect.width - 64)
+            : clamp$1(bubbleRect.width - seventh * 2, 24, bubbleRect.width - 64);
+        const baseEndX = side === 'left'
+            ? clamp$1(seventh * 2, baseStartX + 24, bubbleRect.width - 24)
+            : clamp$1(bubbleRect.width - seventh, baseStartX + 24, bubbleRect.width - 24);
+        const anchor = {
+            x: bubbleRect.left + (baseStartX + baseEndX) / 2,
+            y: bubbleRect.bottom,
+        };
+        const targetPoint = targetRect
+            ? closestPointOnRect$1(targetRect, anchor)
+            : {
+                x: bubbleRect.left + (side === 'left' ? baseStartX : baseEndX),
+                y: bubbleRect.bottom + Math.max(28, bubbleRect.height / 4),
+            };
+        const tipX = clamp$1(targetPoint.x - bubbleRect.left, -52, bubbleRect.width + 52);
+        const tipY = Math.max(targetPoint.y - bubbleRect.top, bubbleRect.height + 24);
+        const minX = Math.min(0, tipX);
+        const maxX = Math.max(bubbleRect.width, tipX);
+        const maxY = Math.max(bubbleRect.height, tipY);
+        const padding = 12;
+        const offsetX = padding - minX;
+        const offsetY = padding;
+        const width = maxX - minX + padding * 2;
+        const height = maxY + padding * 2;
+        this.bubbleGeometry.set({
+            side,
+            style: {
+                left: `${minX - padding}px`,
+                top: `${-padding}px`,
+                width: `${width}px`,
+                height: `${height}px`,
+            },
+            viewBox: `0 0 ${width.toFixed(2)} ${height.toFixed(2)}`,
+            path: createUnifiedBubblePath$1(bubbleRect.width, bubbleRect.height, 8, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY),
+        });
+    }
+    resolveTailSide(bubbleRect, targetRect) {
+        const tail = this.tail();
+        if (tail === 'left' || tail === 'right') {
+            return tail;
+        }
+        const targetCenterX = targetRect
+            ? targetRect.left + targetRect.width / 2
+            : bubbleRect.left + bubbleRect.width / 2;
+        return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalSlab, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-speaker-bubble-neo-slab\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-neo-slab__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-neo-slab__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n  <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n  <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n  <div class=\"dd-speaker-bubble-neo-slab__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,white)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__pin{right:18px;left:auto;transform:rotate(4deg)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__corner{right:auto;left:0;border-right:4px solid var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-slab__content{position:relative;z-index:1;font-size:15px;font-weight:800;line-height:1.55;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}.dd-speaker-bubble-neo-slab__content :first-child{margin-top:0}.dd-speaker-bubble-neo-slab__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-slab__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab__content small{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px 5px;border:3px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 20%,var(--dd-speaker-surface));box-shadow:3px 3px 0 var(--dd-speaker-shadow);color:var(--dd-speaker-text);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-slab__content small:before{content:\"\";width:10px;height:10px;flex:0 0 auto;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__content{background:linear-gradient(225deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalSlab, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-speaker-bubble-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<div\n  class=\"dd-speaker-bubble-neo-slab\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-neo-slab__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-neo-slab__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n  <span class=\"dd-speaker-bubble-neo-slab__pin\" aria-hidden=\"true\"></span>\n  <span class=\"dd-speaker-bubble-neo-slab__corner\" aria-hidden=\"true\"></span>\n  <div class=\"dd-speaker-bubble-neo-slab__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,38rem)}.dd-speaker-bubble-neo-slab{position:relative;isolation:isolate;overflow:visible;padding:28px 22px 18px;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-slab__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-slab__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-slab__pin{position:absolute;top:-16px;left:18px;width:46px;height:18px;border:4px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-border);transform:rotate(-4deg)}.dd-speaker-bubble-neo-slab__corner{position:absolute;top:0;right:0;width:24px;height:24px;border-left:4px solid var(--dd-speaker-border);border-bottom:4px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 74%,white)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__pin{right:18px;left:auto;transform:rotate(4deg)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__corner{right:auto;left:0;border-right:4px solid var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-slab__content{position:relative;z-index:1;font-size:15px;font-weight:800;line-height:1.55;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}.dd-speaker-bubble-neo-slab__content :first-child{margin-top:0}.dd-speaker-bubble-neo-slab__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-slab__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab__content small{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px 5px;border:3px solid var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 20%,var(--dd-speaker-surface));box-shadow:3px 3px 0 var(--dd-speaker-shadow);color:var(--dd-speaker-text);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-slab__content small:before{content:\"\";width:10px;height:10px;flex:0 0 auto;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-slab[data-tail=right] .dd-speaker-bubble-neo-slab__content{background:linear-gradient(225deg,color-mix(in srgb,var(--dd-speaker-accent) 28%,transparent) 0 18px,transparent 18px 100%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+
+const DEFAULT_BUBBLE_GEOMETRY = {
+    side: 'left',
+    style: {
+        left: '0px',
+        top: '0px',
+        width: '1px',
+        height: '1px',
+    },
+    viewBox: '0 0 1 1',
+    path: '',
+};
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function serializePoint(point) {
+    return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+}
+function closestPointOnRect(rect, point) {
+    return {
+        x: clamp(point.x, rect.left, rect.right),
+        y: clamp(point.y, rect.top, rect.bottom),
+    };
+}
+function resolveTargetElement(source, hostElement, documentRef) {
+    if (!source) {
+        return null;
+    }
+    if (source instanceof Element) {
+        return source;
+    }
+    try {
+        const localMatch = hostElement.parentElement?.querySelector(source);
+        if (localMatch) {
+            return localMatch;
+        }
+        return documentRef.querySelector(source);
+    }
+    catch {
+        return null;
+    }
+}
+function getBubbleElement(hostElement) {
+    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
+}
+function createUnifiedBubblePath(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY) {
+    const left = offsetX;
+    const top = offsetY;
+    const right = offsetX + width;
+    const bottom = offsetY + height;
+    const start = { x: left + radius, y: top };
+    const bottomRight = { x: right, y: bottom - radius };
+    const bottomRightArcEnd = { x: right - radius, y: bottom };
+    const baseStart = { x: offsetX + baseStartX, y: bottom };
+    const baseEnd = { x: offsetX + baseEndX, y: bottom };
+    const tip = { x: offsetX + tipX, y: offsetY + tipY };
+    const bottomLeftArcStart = { x: left + radius, y: bottom };
+    const leftBottom = { x: left, y: bottom - radius };
+    const leftTop = { x: left, y: top + radius };
+    return [
+        `M ${serializePoint(start)}`,
+        `H ${(right - radius).toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${right.toFixed(2)} ${(top + radius).toFixed(2)}`,
+        `V ${bottomRight.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint(bottomRightArcEnd)}`,
+        `H ${baseEnd.x.toFixed(2)}`,
+        `L ${serializePoint(tip)}`,
+        `L ${serializePoint(baseStart)}`,
+        `H ${bottomLeftArcStart.x.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint(leftBottom)}`,
+        `V ${leftTop.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint(start)}`,
+        'Z',
+    ].join(' ');
+}
+class DuckDevSpeakerBubbleNeobrutalTicket {
+    color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
+    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
+    hostRef = inject((ElementRef));
+    documentRef = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    bubbleGeometry = signal(DEFAULT_BUBBLE_GEOMETRY, { ...(ngDevMode ? { debugName: "bubbleGeometry" } : {}) });
+    animationFrameId = -1;
+    resizeObserver = null;
+    observedTarget = null;
+    observersInitialized = false;
+    bubbleStyle = computed(() => getNeobrutalSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
+    resolvedTail = computed(() => this.bubbleGeometry().side, { ...(ngDevMode ? { debugName: "resolvedTail" } : {}) });
+    shapeStyle = computed(() => this.bubbleGeometry().style, { ...(ngDevMode ? { debugName: "shapeStyle" } : {}) });
+    shapeViewBox = computed(() => this.bubbleGeometry().viewBox, { ...(ngDevMode ? { debugName: "shapeViewBox" } : {}) });
+    shapePath = computed(() => this.bubbleGeometry().path, { ...(ngDevMode ? { debugName: "shapePath" } : {}) });
+    constructor() {
+        afterNextRender(() => {
+            this.setupObservers();
+            this.scheduleRefresh();
+        });
+        afterRenderEffect(() => {
+            this.tail();
+            this.target();
+            this.setupObservers();
+            this.scheduleRefresh();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.documentRef.defaultView?.removeEventListener('resize', this.scheduleRefresh);
+            this.documentRef.removeEventListener('scroll', this.scheduleRefresh, true);
+            if (this.animationFrameId !== -1) {
+                cancelAnimationFrame(this.animationFrameId);
+            }
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.observedTarget = null;
+        });
+    }
+    scheduleRefresh = () => {
+        if (!this.isBrowser || this.animationFrameId !== -1) {
+            return;
+        }
+        this.animationFrameId = requestAnimationFrame(() => {
+            this.animationFrameId = -1;
+            this.refreshShape();
+        });
+    };
+    setupObservers() {
+        if (!this.isBrowser || this.observersInitialized) {
+            return;
+        }
+        const bubbleElement = getBubbleElement(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleRefresh());
+            this.resizeObserver.observe(bubbleElement);
+        }
+        const targetElement = resolveTargetElement(this.target(), this.hostRef.nativeElement, this.documentRef);
+        if (targetElement) {
+            this.resizeObserver?.observe(targetElement);
+            this.observedTarget = targetElement;
+        }
+        this.documentRef.defaultView?.addEventListener('resize', this.scheduleRefresh);
+        this.documentRef.addEventListener('scroll', this.scheduleRefresh, true);
+        this.observersInitialized = true;
+    }
+    refreshShape() {
+        if (!this.isBrowser) {
+            return;
+        }
+        const bubbleElement = getBubbleElement(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        const targetElement = resolveTargetElement(this.target(), this.hostRef.nativeElement, this.documentRef);
+        if (this.resizeObserver && targetElement !== this.observedTarget) {
+            if (this.observedTarget) {
+                this.resizeObserver.unobserve(this.observedTarget);
+            }
+            if (targetElement) {
+                this.resizeObserver.observe(targetElement);
+            }
+            this.observedTarget = targetElement;
+        }
+        const bubbleRect = bubbleElement.getBoundingClientRect();
+        const targetRect = targetElement?.getBoundingClientRect() ?? null;
+        const side = this.resolveTailSide(bubbleRect, targetRect);
+        const seventh = bubbleRect.width / 7;
+        const baseStartX = side === 'left'
+            ? clamp(seventh, 26, bubbleRect.width - 72)
+            : clamp(bubbleRect.width - seventh * 2, 26, bubbleRect.width - 72);
+        const baseEndX = side === 'left'
+            ? clamp(seventh * 2, baseStartX + 24, bubbleRect.width - 26)
+            : clamp(bubbleRect.width - seventh, baseStartX + 24, bubbleRect.width - 26);
+        const anchor = {
+            x: bubbleRect.left + (baseStartX + baseEndX) / 2,
+            y: bubbleRect.bottom,
+        };
+        const targetPoint = targetRect
+            ? closestPointOnRect(targetRect, anchor)
+            : {
+                x: bubbleRect.left + (side === 'left' ? baseStartX : baseEndX),
+                y: bubbleRect.bottom + Math.max(28, bubbleRect.height / 4),
+            };
+        const tipX = clamp(targetPoint.x - bubbleRect.left, -56, bubbleRect.width + 56);
+        const tipY = Math.max(targetPoint.y - bubbleRect.top, bubbleRect.height + 24);
+        const minX = Math.min(0, tipX);
+        const maxX = Math.max(bubbleRect.width, tipX);
+        const maxY = Math.max(bubbleRect.height, tipY);
+        const padding = 12;
+        const offsetX = padding - minX;
+        const offsetY = padding;
+        const width = maxX - minX + padding * 2;
+        const height = maxY + padding * 2;
+        this.bubbleGeometry.set({
+            side,
+            style: {
+                left: `${minX - padding}px`,
+                top: `${-padding}px`,
+                width: `${width}px`,
+                height: `${height}px`,
+            },
+            viewBox: `0 0 ${width.toFixed(2)} ${height.toFixed(2)}`,
+            path: createUnifiedBubblePath(bubbleRect.width, bubbleRect.height, 6, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY),
+        });
+    }
+    resolveTailSide(bubbleRect, targetRect) {
+        const tail = this.tail();
+        if (tail === 'left' || tail === 'right') {
+            return tail;
+        }
+        const targetCenterX = targetRect
+            ? targetRect.left + targetRect.width / 2
+            : bubbleRect.left + bubbleRect.width / 2;
+        return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleNeobrutalTicket, isStandalone: true, selector: "dd-speaker-bubble-neobrutal-ticket", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-speaker-bubble-neo-ticket\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-neo-ticket__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n\n  <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n    <div class=\"dd-speaker-bubble-neo-ticket__body\">\n      <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n      <div class=\"dd-speaker-bubble-neo-ticket__content\">\n        <ng-content />\n      </div>\n    </div>\n\n    <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n      <span></span>\n      <span></span>\n      <span></span>\n    </span>\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,white)}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleNeobrutalTicket, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-speaker-bubble-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<div\n  class=\"dd-speaker-bubble-neo-ticket\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-neo-ticket__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n\n  <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n    <div class=\"dd-speaker-bubble-neo-ticket__body\">\n      <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n      <div class=\"dd-speaker-bubble-neo-ticket__content\">\n        <ng-content />\n      </div>\n    </div>\n\n    <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n      <span></span>\n      <span></span>\n      <span></span>\n    </span>\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,white)}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+
+class QuickStartBlock {
+    t = inject(TranslocoService);
+    colorViolet = AccentEnumColor.Violet;
+    colorOrange = AccentEnumColor.Orange;
+    colorWhite = AccentEnumColor.White;
+    colorGray = AccentEnumColor.Gray;
+    colorDark = AccentEnumColor.Dark;
+    previewTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activePreviewTab = signal(this.previewTabs[0], { ...(ngDevMode ? { debugName: "activePreviewTab" } : {}) });
+    onPreviewTabChange(tab) {
+        this.activePreviewTab.set(tab);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: QuickStartBlock, isStandalone: true, selector: "app-quick-start-block", ngImport: i0, template: "<div class=\"quick-start\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"hero\">\n    <div class=\"hero__badges\">\n      <dd-badge [text]=\"'Angular 21'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signals'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Standalone'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'quickStart.hero.title' | transloco }}</h1>\n    <p class=\"hero__subtitle\">{{ 'quickStart.hero.subtitle' | transloco }}</p>\n  </header>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 1 \u2014 INSTALL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.install.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <dd-card-signal [color]=\"colorViolet\">\n        <small>{{ 'quickStart.install.eyebrow' | transloco }}</small>\n        <h3>{{ 'quickStart.install.cardTitle' | transloco }}</h3>\n        <p>{{ 'quickStart.install.cardText' | transloco }}</p>\n      </dd-card-signal>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">angular.json</div>\n        <pre><code>\"styles\": [\n  \"node_modules/duck-dev-lib/styles/variables.scss\",\n  \"src/styles.scss\"\n]</code></pre>\n      </div>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">app.config.ts</div>\n        <pre><code>import {{ '{' }} provideTransloco {{ '}' }} from '@jsverse/transloco';\n\nexport const appConfig = {{ '{' }}\n  providers: [\n    provideTransloco({{ '{' }}\n      config: {{ '{' }} availableLangs: ['en', 'ru'], defaultLang: 'en' {{ '}' }}\n    {{ '}' }})\n  ]\n{{ '}' }};</code></pre>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 2 \u2014 PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.palette.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.palette.description' | transloco }}</p>\n\n      <div class=\"palette-grid\">\n        <div class=\"palette-group\">\n          <h3>{{ 'quickStart.palette.neutralsTitle' | transloco }}</h3>\n          <div class=\"swatch-row\">\n            <div class=\"swatch\" style=\"background: var(--dd-base-0)\">\n              <span class=\"swatch__label\">0</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-100)\">\n              <span class=\"swatch__label\">100</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-200)\">\n              <span class=\"swatch__label\">200</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-300)\">\n              <span class=\"swatch__label\">300</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-400)\">\n              <span class=\"swatch__label swatch__label--light\">400</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-500)\">\n              <span class=\"swatch__label swatch__label--light\">500</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-600)\">\n              <span class=\"swatch__label swatch__label--light\">600</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"palette-group\">\n          <h3>{{ 'quickStart.palette.accentsTitle' | transloco }}</h3>\n          <div class=\"swatch-row\">\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-secondary)\">\n              <span class=\"swatch__label swatch__label--light\">secondary</span>\n            </div>\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-orange)\">\n              <span class=\"swatch__label swatch__label--light\">orange</span>\n            </div>\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-blue)\">\n              <span class=\"swatch__label swatch__label--light\">blue</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n        <p><strong>{{ 'quickStart.palette.tipTitle' | transloco }}</strong> {{ 'quickStart.palette.tipText' | transloco }}</p>\n      </dd-speaker-bubble-soft>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 3 \u2014 THEMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.themes.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <div class=\"theme-cards\">\n        <dd-card-minimal [color]=\"colorWhite\">\n          <small>{{ 'quickStart.themes.lightEyebrow' | transloco }}</small>\n          <h3>{{ 'quickStart.themes.lightTitle' | transloco }}</h3>\n          <p>{{ 'quickStart.themes.lightText' | transloco }}</p>\n        </dd-card-minimal>\n        <dd-card-minimal [color]=\"colorDark\">\n          <small>{{ 'quickStart.themes.darkEyebrow' | transloco }}</small>\n          <h3>{{ 'quickStart.themes.darkTitle' | transloco }}</h3>\n          <p>{{ 'quickStart.themes.darkText' | transloco }}</p>\n        </dd-card-minimal>\n      </div>\n\n      <ng-template #themeHtmlSnippet>\n        <pre class=\"accordion-code\"><code>&lt;html ddTheme=\"dark\"&gt;\n  &lt;body&gt;\n    &lt;app-root&gt;&lt;/app-root&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n      </ng-template>\n\n      <ng-template #themeToggleSnippet>\n        <pre class=\"accordion-code\"><code>setTheme(theme: 'dark' | 'light') {{ '{' }}\n  document.documentElement\n    .setAttribute('ddTheme', theme);\n{{ '}' }}</code></pre>\n      </ng-template>\n\n      <div class=\"accordion-row\">\n        <duck-dev-accordion\n          [title]=\"'quickStart.themes.htmlAccordionTitle' | transloco\"\n          [content]=\"themeHtmlSnippet\"\n        />\n        <duck-dev-accordion\n          [title]=\"'quickStart.themes.toggleAccordionTitle' | transloco\"\n          [content]=\"themeToggleSnippet\"\n          [color]=\"colorViolet\"\n        />\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 4 \u2014 CUSTOM THEME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.custom.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <dd-card-outline [color]=\"colorOrange\">\n        <small>{{ 'quickStart.custom.eyebrow' | transloco }}</small>\n        <h3>{{ 'quickStart.custom.cardTitle' | transloco }}</h3>\n        <p>{{ 'quickStart.custom.cardText' | transloco }}</p>\n      </dd-card-outline>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">styles.scss</div>\n        <pre><code>[ddTheme='brand'] {{ '{' }}\n  --dd-base-0: #ffffff;\n  --dd-base-100: #f4f6ff;\n  --dd-base-300: #dbe0ff;\n  --dd-base-600: #0e1028;\n  --dd-base-secondary: #6829ff;\n  --dd-base-accent-orange: #fe7b20;\n  --dd-base-accent-blue: #3254f3;\n{{ '}' }}</code></pre>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 5 \u2014 COLORS IN COMPONENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'05'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.colors.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.colors.description' | transloco }}</p>\n\n      <div class=\"code-block code-block--compact\">\n        <div class=\"code-block__label\">AccentEnumColor</div>\n        <pre><code>import {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n// Violet \u00B7 Orange \u00B7 White \u00B7 Gray \u00B7 Dark</code></pre>\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.progressTitle' | transloco }}</h3>\n      <div class=\"progress-showcase\">\n        <duck-dev-progress-line [label]=\"'Violet'\" [value]=\"85\" [color]=\"colorViolet\" />\n        <duck-dev-progress-line [label]=\"'Orange'\" [value]=\"60\" [color]=\"colorOrange\" />\n        <duck-dev-progress-line [label]=\"'Gray'\" [value]=\"40\" [color]=\"colorGray\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.buttonsTitle' | transloco }}</h3>\n      <div class=\"buttons-showcase\">\n        <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n        <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n        <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.badgesTitle' | transloco }}</h3>\n      <div class=\"badges-showcase\">\n        <dd-badge [text]=\"'Solid'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n        <dd-badge [text]=\"'Soft'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n        <dd-badge [text]=\"'Outline'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n        <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'solid'\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.cardsTitle' | transloco }}</h3>\n      <div class=\"cards-showcase\">\n        <dd-card-accent [color]=\"colorViolet\">\n          <div>{{ 'quickStart.colors.cardViolet' | transloco }}</div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorOrange\">\n          <div>{{ 'quickStart.colors.cardOrange' | transloco }}</div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorDark\">\n          <div>{{ 'quickStart.colors.cardDark' | transloco }}</div>\n        </dd-card-accent>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 6 \u2014 TWO STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'06'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.styles.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.styles.description' | transloco }}</p>\n\n      <duck-dev-tab [tabs]=\"previewTabs\" (tabChange)=\"onPreviewTabChange($event)\">\n        @if (activePreviewTab().id === 'classic') {\n          <div class=\"style-preview\">\n            <div class=\"style-preview__row\">\n              <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n              <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n              <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n            </div>\n            <div class=\"style-preview__row\">\n              <dd-badge [text]=\"'Status'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n              <dd-badge [text]=\"'Label'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n              <dd-badge [text]=\"'Tag'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n            </div>\n            <duck-dev-progress-line [label]=\"'Progress'\" [value]=\"72\" [color]=\"colorViolet\" />\n            <div class=\"style-preview__cards\">\n              <dd-card-minimal [color]=\"colorViolet\">\n                <small>Classic</small>\n                <h3>{{ 'quickStart.styles.classicCardTitle' | transloco }}</h3>\n                <p>{{ 'quickStart.styles.classicCardText' | transloco }}</p>\n              </dd-card-minimal>\n              <dd-card-signal [color]=\"colorOrange\">\n                <small>Signal</small>\n                <h3>{{ 'quickStart.styles.signalCardTitle' | transloco }}</h3>\n                <p>{{ 'quickStart.styles.signalCardText' | transloco }}</p>\n              </dd-card-signal>\n            </div>\n          </div>\n        }\n        @if (activePreviewTab().id === 'neobrutalism') {\n          <div class=\"style-preview\">\n            <div class=\"style-preview__row\">\n              <duck-dev-button-neobrutal-slab\n                [text]=\"'Slab'\"\n                [helperText]=\"'click me'\"\n                [colorButton]=\"colorViolet\"\n              />\n              <duck-dev-button-neobrutal-slab\n                [text]=\"'Action'\"\n                [helperText]=\"'do it'\"\n                [colorButton]=\"colorOrange\"\n              />\n            </div>\n            <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n              <p><strong>Neobrutalism</strong> \u2014 {{ 'quickStart.styles.neobrutalBubbleText' | transloco }}</p>\n            </dd-speaker-bubble-soft>\n          </div>\n        }\n      </duck-dev-tab>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 7 \u2014 USAGE EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'07'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.usage.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <ng-template #usageTemplate>\n        <pre class=\"accordion-code\"><code>&lt;duck-dev-button-casper\n  [text]=\"'Click me'\"\n  [colorButton]=\"colorViolet\"\n/&gt;\n\n&lt;dd-badge\n  [text]=\"'New'\"\n  [color]=\"colorOrange\"\n  [variant]=\"'solid'\"\n/&gt;\n\n&lt;dd-card-minimal [color]=\"colorViolet\"&gt;\n  &lt;h3&gt;Title&lt;/h3&gt;\n  &lt;p&gt;Content goes here&lt;/p&gt;\n&lt;/dd-card-minimal&gt;</code></pre>\n      </ng-template>\n\n      <ng-template #usageComponent>\n        <pre class=\"accordion-code\"><code>import {{ '{' }} Component {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} ButtonCasper {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} Badge {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} DuckDevCardMinimal {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n&#64;Component({{ '{' }}\n  selector: 'app-example',\n  standalone: true,\n  imports: [ButtonCasper, Badge, DuckDevCardMinimal],\n  templateUrl: './example.html',\n{{ '}' }})\nexport class ExampleComponent {{ '{' }}\n  colorViolet = AccentEnumColor.Violet;\n  colorOrange = AccentEnumColor.Orange;\n{{ '}' }}</code></pre>\n      </ng-template>\n\n      <div class=\"accordion-row\">\n        <duck-dev-accordion\n          [title]=\"'quickStart.usage.templateTitle' | transloco\"\n          [content]=\"usageTemplate\"\n          [color]=\"colorOrange\"\n        />\n        <duck-dev-accordion\n          [title]=\"'quickStart.usage.componentTitle' | transloco\"\n          [content]=\"usageComponent\"\n          [color]=\"colorViolet\"\n        />\n      </div>\n\n      <dd-speaker-bubble-soft [color]=\"colorGray\" [tail]=\"'left'\">\n        <p>{{ 'quickStart.usage.tip' | transloco }}</p>\n      </dd-speaker-bubble-soft>\n    </dd-card-section>\n  </section>\n\n</div>\n", styles: [".quick-start{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:56px}.hero{text-align:center;padding:40px 0 16px}.hero__badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.hero h1{font-size:42px;font-weight:800;color:var(--dd-base-600);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.hero__subtitle{font-size:18px;color:var(--dd-base-400);line-height:1.6;max-width:600px;margin:0 auto}.step__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.step__header h2{font-size:26px;font-weight:700;color:var(--dd-base-600);margin:0}.section-description{font-size:16px;line-height:1.65;color:var(--dd-base-400);margin:0 0 28px}.code-block{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--dd-base-300)}.code-block__label{padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dd-base-300);background:var(--dd-base-600);border-bottom:1px solid var(--dd-base-500)}.code-block pre{margin:0;padding:20px;background:var(--dd-base-600);overflow-x:auto}.code-block pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.code-block--compact{margin:0 0 28px}.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)}.palette-grid{display:flex;flex-direction:column;gap:28px;margin-bottom:32px}.palette-group h3{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{flex:1;min-width:60px;height:64px;border-radius:10px;border:1px solid var(--dd-base-300);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:translateY(-3px);box-shadow:0 6px 20px -8px var(--dd-base-300)}.swatch__label{font-size:11px;font-weight:600;color:var(--dd-base-500)}.swatch__label--light{color:var(--dd-base-0)}.swatch--accent{min-width:100px;height:72px}.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.accordion-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}.showcase-title{font-size:15px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 16px}.progress-showcase{display:flex;flex-direction:column;gap:16px}.buttons-showcase{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.badges-showcase{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.cards-showcase{display:flex;flex-direction:column;gap:12px}.style-preview{display:flex;flex-direction:column;gap:24px;padding:8px 0}.style-preview__row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.style-preview__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.quick-start{padding:24px 16px 60px;gap:40px}.hero h1{font-size:30px}.hero__subtitle{font-size:16px}.step__header h2{font-size:22px}.theme-cards{grid-template-columns:1fr}.swatch{min-width:40px;height:52px}.swatch--accent{min-width:70px}.style-preview__cards{grid-template-columns:1fr}}@media(max-width:480px){.hero h1{font-size:26px}.buttons-showcase{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevCardSignal, selector: "dd-card-signal", inputs: ["color"] }, { kind: "component", type: DuckDevCardOutline, selector: "dd-card-outline", inputs: ["color"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", 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: QuickStartBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-quick-start-block', standalone: true, imports: [
+                        TranslocoPipe,
+                        DuckDevCardAccent,
+                        DuckDevCardSection,
+                        DuckDevCardMinimal,
+                        DuckDevCardSignal,
+                        DuckDevCardOutline,
+                        DuckDevAccordionComponent,
+                        ButtonCasper,
+                        ButtonGlideOver,
+                        ButtonFlip,
+                        ButtonNeobrutalSlab,
+                        Badge,
+                        DuckDevProgressLine,
+                        DuckDevSpeakerBubbleSoft,
+                        DuckDevTab,
+                    ], template: "<div class=\"quick-start\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"hero\">\n    <div class=\"hero__badges\">\n      <dd-badge [text]=\"'Angular 21'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signals'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Standalone'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'quickStart.hero.title' | transloco }}</h1>\n    <p class=\"hero__subtitle\">{{ 'quickStart.hero.subtitle' | transloco }}</p>\n  </header>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 1 \u2014 INSTALL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.install.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <dd-card-signal [color]=\"colorViolet\">\n        <small>{{ 'quickStart.install.eyebrow' | transloco }}</small>\n        <h3>{{ 'quickStart.install.cardTitle' | transloco }}</h3>\n        <p>{{ 'quickStart.install.cardText' | transloco }}</p>\n      </dd-card-signal>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">angular.json</div>\n        <pre><code>\"styles\": [\n  \"node_modules/duck-dev-lib/styles/variables.scss\",\n  \"src/styles.scss\"\n]</code></pre>\n      </div>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">app.config.ts</div>\n        <pre><code>import {{ '{' }} provideTransloco {{ '}' }} from '@jsverse/transloco';\n\nexport const appConfig = {{ '{' }}\n  providers: [\n    provideTransloco({{ '{' }}\n      config: {{ '{' }} availableLangs: ['en', 'ru'], defaultLang: 'en' {{ '}' }}\n    {{ '}' }})\n  ]\n{{ '}' }};</code></pre>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 2 \u2014 PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.palette.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.palette.description' | transloco }}</p>\n\n      <div class=\"palette-grid\">\n        <div class=\"palette-group\">\n          <h3>{{ 'quickStart.palette.neutralsTitle' | transloco }}</h3>\n          <div class=\"swatch-row\">\n            <div class=\"swatch\" style=\"background: var(--dd-base-0)\">\n              <span class=\"swatch__label\">0</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-100)\">\n              <span class=\"swatch__label\">100</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-200)\">\n              <span class=\"swatch__label\">200</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-300)\">\n              <span class=\"swatch__label\">300</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-400)\">\n              <span class=\"swatch__label swatch__label--light\">400</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-500)\">\n              <span class=\"swatch__label swatch__label--light\">500</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-600)\">\n              <span class=\"swatch__label swatch__label--light\">600</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"palette-group\">\n          <h3>{{ 'quickStart.palette.accentsTitle' | transloco }}</h3>\n          <div class=\"swatch-row\">\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-secondary)\">\n              <span class=\"swatch__label swatch__label--light\">secondary</span>\n            </div>\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-orange)\">\n              <span class=\"swatch__label swatch__label--light\">orange</span>\n            </div>\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-blue)\">\n              <span class=\"swatch__label swatch__label--light\">blue</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n        <p><strong>{{ 'quickStart.palette.tipTitle' | transloco }}</strong> {{ 'quickStart.palette.tipText' | transloco }}</p>\n      </dd-speaker-bubble-soft>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 3 \u2014 THEMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.themes.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <div class=\"theme-cards\">\n        <dd-card-minimal [color]=\"colorWhite\">\n          <small>{{ 'quickStart.themes.lightEyebrow' | transloco }}</small>\n          <h3>{{ 'quickStart.themes.lightTitle' | transloco }}</h3>\n          <p>{{ 'quickStart.themes.lightText' | transloco }}</p>\n        </dd-card-minimal>\n        <dd-card-minimal [color]=\"colorDark\">\n          <small>{{ 'quickStart.themes.darkEyebrow' | transloco }}</small>\n          <h3>{{ 'quickStart.themes.darkTitle' | transloco }}</h3>\n          <p>{{ 'quickStart.themes.darkText' | transloco }}</p>\n        </dd-card-minimal>\n      </div>\n\n      <ng-template #themeHtmlSnippet>\n        <pre class=\"accordion-code\"><code>&lt;html ddTheme=\"dark\"&gt;\n  &lt;body&gt;\n    &lt;app-root&gt;&lt;/app-root&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n      </ng-template>\n\n      <ng-template #themeToggleSnippet>\n        <pre class=\"accordion-code\"><code>setTheme(theme: 'dark' | 'light') {{ '{' }}\n  document.documentElement\n    .setAttribute('ddTheme', theme);\n{{ '}' }}</code></pre>\n      </ng-template>\n\n      <div class=\"accordion-row\">\n        <duck-dev-accordion\n          [title]=\"'quickStart.themes.htmlAccordionTitle' | transloco\"\n          [content]=\"themeHtmlSnippet\"\n        />\n        <duck-dev-accordion\n          [title]=\"'quickStart.themes.toggleAccordionTitle' | transloco\"\n          [content]=\"themeToggleSnippet\"\n          [color]=\"colorViolet\"\n        />\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 4 \u2014 CUSTOM THEME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.custom.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <dd-card-outline [color]=\"colorOrange\">\n        <small>{{ 'quickStart.custom.eyebrow' | transloco }}</small>\n        <h3>{{ 'quickStart.custom.cardTitle' | transloco }}</h3>\n        <p>{{ 'quickStart.custom.cardText' | transloco }}</p>\n      </dd-card-outline>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">styles.scss</div>\n        <pre><code>[ddTheme='brand'] {{ '{' }}\n  --dd-base-0: #ffffff;\n  --dd-base-100: #f4f6ff;\n  --dd-base-300: #dbe0ff;\n  --dd-base-600: #0e1028;\n  --dd-base-secondary: #6829ff;\n  --dd-base-accent-orange: #fe7b20;\n  --dd-base-accent-blue: #3254f3;\n{{ '}' }}</code></pre>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 5 \u2014 COLORS IN COMPONENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'05'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.colors.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.colors.description' | transloco }}</p>\n\n      <div class=\"code-block code-block--compact\">\n        <div class=\"code-block__label\">AccentEnumColor</div>\n        <pre><code>import {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n// Violet \u00B7 Orange \u00B7 White \u00B7 Gray \u00B7 Dark</code></pre>\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.progressTitle' | transloco }}</h3>\n      <div class=\"progress-showcase\">\n        <duck-dev-progress-line [label]=\"'Violet'\" [value]=\"85\" [color]=\"colorViolet\" />\n        <duck-dev-progress-line [label]=\"'Orange'\" [value]=\"60\" [color]=\"colorOrange\" />\n        <duck-dev-progress-line [label]=\"'Gray'\" [value]=\"40\" [color]=\"colorGray\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.buttonsTitle' | transloco }}</h3>\n      <div class=\"buttons-showcase\">\n        <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n        <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n        <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.badgesTitle' | transloco }}</h3>\n      <div class=\"badges-showcase\">\n        <dd-badge [text]=\"'Solid'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n        <dd-badge [text]=\"'Soft'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n        <dd-badge [text]=\"'Outline'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n        <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'solid'\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.cardsTitle' | transloco }}</h3>\n      <div class=\"cards-showcase\">\n        <dd-card-accent [color]=\"colorViolet\">\n          <div>{{ 'quickStart.colors.cardViolet' | transloco }}</div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorOrange\">\n          <div>{{ 'quickStart.colors.cardOrange' | transloco }}</div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorDark\">\n          <div>{{ 'quickStart.colors.cardDark' | transloco }}</div>\n        </dd-card-accent>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 6 \u2014 TWO STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'06'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.styles.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.styles.description' | transloco }}</p>\n\n      <duck-dev-tab [tabs]=\"previewTabs\" (tabChange)=\"onPreviewTabChange($event)\">\n        @if (activePreviewTab().id === 'classic') {\n          <div class=\"style-preview\">\n            <div class=\"style-preview__row\">\n              <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n              <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n              <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n            </div>\n            <div class=\"style-preview__row\">\n              <dd-badge [text]=\"'Status'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n              <dd-badge [text]=\"'Label'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n              <dd-badge [text]=\"'Tag'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n            </div>\n            <duck-dev-progress-line [label]=\"'Progress'\" [value]=\"72\" [color]=\"colorViolet\" />\n            <div class=\"style-preview__cards\">\n              <dd-card-minimal [color]=\"colorViolet\">\n                <small>Classic</small>\n                <h3>{{ 'quickStart.styles.classicCardTitle' | transloco }}</h3>\n                <p>{{ 'quickStart.styles.classicCardText' | transloco }}</p>\n              </dd-card-minimal>\n              <dd-card-signal [color]=\"colorOrange\">\n                <small>Signal</small>\n                <h3>{{ 'quickStart.styles.signalCardTitle' | transloco }}</h3>\n                <p>{{ 'quickStart.styles.signalCardText' | transloco }}</p>\n              </dd-card-signal>\n            </div>\n          </div>\n        }\n        @if (activePreviewTab().id === 'neobrutalism') {\n          <div class=\"style-preview\">\n            <div class=\"style-preview__row\">\n              <duck-dev-button-neobrutal-slab\n                [text]=\"'Slab'\"\n                [helperText]=\"'click me'\"\n                [colorButton]=\"colorViolet\"\n              />\n              <duck-dev-button-neobrutal-slab\n                [text]=\"'Action'\"\n                [helperText]=\"'do it'\"\n                [colorButton]=\"colorOrange\"\n              />\n            </div>\n            <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n              <p><strong>Neobrutalism</strong> \u2014 {{ 'quickStart.styles.neobrutalBubbleText' | transloco }}</p>\n            </dd-speaker-bubble-soft>\n          </div>\n        }\n      </duck-dev-tab>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 7 \u2014 USAGE EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'07'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.usage.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <ng-template #usageTemplate>\n        <pre class=\"accordion-code\"><code>&lt;duck-dev-button-casper\n  [text]=\"'Click me'\"\n  [colorButton]=\"colorViolet\"\n/&gt;\n\n&lt;dd-badge\n  [text]=\"'New'\"\n  [color]=\"colorOrange\"\n  [variant]=\"'solid'\"\n/&gt;\n\n&lt;dd-card-minimal [color]=\"colorViolet\"&gt;\n  &lt;h3&gt;Title&lt;/h3&gt;\n  &lt;p&gt;Content goes here&lt;/p&gt;\n&lt;/dd-card-minimal&gt;</code></pre>\n      </ng-template>\n\n      <ng-template #usageComponent>\n        <pre class=\"accordion-code\"><code>import {{ '{' }} Component {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} ButtonCasper {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} Badge {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} DuckDevCardMinimal {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n&#64;Component({{ '{' }}\n  selector: 'app-example',\n  standalone: true,\n  imports: [ButtonCasper, Badge, DuckDevCardMinimal],\n  templateUrl: './example.html',\n{{ '}' }})\nexport class ExampleComponent {{ '{' }}\n  colorViolet = AccentEnumColor.Violet;\n  colorOrange = AccentEnumColor.Orange;\n{{ '}' }}</code></pre>\n      </ng-template>\n\n      <div class=\"accordion-row\">\n        <duck-dev-accordion\n          [title]=\"'quickStart.usage.templateTitle' | transloco\"\n          [content]=\"usageTemplate\"\n          [color]=\"colorOrange\"\n        />\n        <duck-dev-accordion\n          [title]=\"'quickStart.usage.componentTitle' | transloco\"\n          [content]=\"usageComponent\"\n          [color]=\"colorViolet\"\n        />\n      </div>\n\n      <dd-speaker-bubble-soft [color]=\"colorGray\" [tail]=\"'left'\">\n        <p>{{ 'quickStart.usage.tip' | transloco }}</p>\n      </dd-speaker-bubble-soft>\n    </dd-card-section>\n  </section>\n\n</div>\n", styles: [".quick-start{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:56px}.hero{text-align:center;padding:40px 0 16px}.hero__badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.hero h1{font-size:42px;font-weight:800;color:var(--dd-base-600);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.hero__subtitle{font-size:18px;color:var(--dd-base-400);line-height:1.6;max-width:600px;margin:0 auto}.step__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.step__header h2{font-size:26px;font-weight:700;color:var(--dd-base-600);margin:0}.section-description{font-size:16px;line-height:1.65;color:var(--dd-base-400);margin:0 0 28px}.code-block{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--dd-base-300)}.code-block__label{padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dd-base-300);background:var(--dd-base-600);border-bottom:1px solid var(--dd-base-500)}.code-block pre{margin:0;padding:20px;background:var(--dd-base-600);overflow-x:auto}.code-block pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.code-block--compact{margin:0 0 28px}.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)}.palette-grid{display:flex;flex-direction:column;gap:28px;margin-bottom:32px}.palette-group h3{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{flex:1;min-width:60px;height:64px;border-radius:10px;border:1px solid var(--dd-base-300);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:translateY(-3px);box-shadow:0 6px 20px -8px var(--dd-base-300)}.swatch__label{font-size:11px;font-weight:600;color:var(--dd-base-500)}.swatch__label--light{color:var(--dd-base-0)}.swatch--accent{min-width:100px;height:72px}.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.accordion-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}.showcase-title{font-size:15px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 16px}.progress-showcase{display:flex;flex-direction:column;gap:16px}.buttons-showcase{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.badges-showcase{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.cards-showcase{display:flex;flex-direction:column;gap:12px}.style-preview{display:flex;flex-direction:column;gap:24px;padding:8px 0}.style-preview__row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.style-preview__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.quick-start{padding:24px 16px 60px;gap:40px}.hero h1{font-size:30px}.hero__subtitle{font-size:16px}.step__header h2{font-size:22px}.theme-cards{grid-template-columns:1fr}.swatch{min-width:40px;height:52px}.swatch--accent{min-width:70px}.style-preview__cards{grid-template-columns:1fr}}@media(max-width:480px){.hero h1{font-size:26px}.buttons-showcase{flex-direction:column;align-items:flex-start}}\n"] }]
+        }] });
+
+class DuckDevModalClassic {
+    platformId = inject(PLATFORM_ID);
+    elementRef = inject(ElementRef);
+    isOpen = input.required({ ...(ngDevMode ? { debugName: "isOpen" } : {}) });
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            document.body.appendChild(this.elementRef.nativeElement);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevModalClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevModalClassic, isStandalone: true, selector: "dd-duck-dev-modal-classic", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n    <ng-content />\n  </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevModalClassic, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-duck-dev-modal-classic', imports: [], template: "@if (isOpen()) {\n  <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n    <ng-content />\n  </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] }]
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }] } });
+
+class ModalBlock {
+    isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
+    open() {
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ModalBlock, isStandalone: true, selector: "app-modal-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section,.demo-container dd-card-section{display:block;margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2,.demo-container dd-card-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description,.demo-container dd-card-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3,.demo-container dd-card-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevModalClassic, selector: "dd-duck-dev-modal-classic", inputs: ["isOpen"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-modal-block', imports: [TranslocoModule, DuckDevCardSection, DuckDevModalClassic, DuckDevIcon], template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section,.demo-container dd-card-section{display:block;margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2,.demo-container dd-card-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description,.demo-container dd-card-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3,.demo-container dd-card-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"] }]
+        }] });
+
+class DuckDevSegmentButton {
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
+    templateRef = viewChild.required('contentTpl');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSegmentButton, isStandalone: true, selector: "dd-segment-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-segment-button', imports: [], template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
+
+class DuckDevSegmentClassic {
+    cdr = inject(ChangeDetectorRef);
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
+    valueChange = output();
+    ionChange = output();
+    segmentButtons;
+    buttonsContainer = viewChild.required('buttonsContainer');
+    buttons = [];
+    selectedValue;
+    indicatorPosition = 2;
+    indicatorWidth = 0;
+    constructor() {
+        afterNextRender(() => {
+            this.rebuildButtons();
+            if (!this.selectedValue && this.buttons.length > 0) {
+                this.selectedValue = this.buttons[0].value;
+            }
+            this.updateIndicator(this.getSelectedIndex());
+            this.cdr.markForCheck();
+        });
+    }
+    ngAfterContentInit() {
+        this.rebuildButtons();
+        const incoming = this.value();
+        this.selectedValue = incoming ?? this.selectedValue;
+        this.segmentButtons.changes.subscribe(() => {
+            this.rebuildButtons();
+            setTimeout(() => this.updateIndicator(this.getSelectedIndex()));
+        });
+    }
+    selectButton(value, index) {
+        if (this.selectedValue === value) {
+            this.updateIndicator(index);
+            return;
+        }
+        this.selectedValue = value;
+        this.valueChange.emit(value);
+        this.ionChange.emit({ detail: { value } });
+        this.updateIndicator(index);
+    }
+    rebuildButtons() {
+        const btns = this.segmentButtons?.toArray() ?? [];
+        this.buttons = btns.map((b) => ({ value: b.value(), contentId: b.contentId(), template: b.templateRef() }));
+    }
+    getSelectedIndex() {
+        return Math.max(0, this.buttons.findIndex((b) => b.value === this.selectedValue));
+    }
+    updateIndicator(index) {
+        const container = this.buttonsContainer().nativeElement;
+        const buttonElements = container.querySelectorAll('.segment-button');
+        if (buttonElements[index]) {
+            const button = buttonElements[index];
+            this.indicatorWidth = button.offsetWidth;
+            this.indicatorPosition = button.offsetLeft;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"segment-container\">\n  <div class=\"segment-background\"></div>\n  <div\n    class=\"segment-indicator\"\n    [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n    [style.width.px]=\"indicatorWidth\"\n  ></div>\n  <div\n    class=\"segment-buttons\"\n    #buttonsContainer\n  >\n    @for (button of buttons; track button; let i = $index) {\n      <button\n        class=\"segment-button\"\n        [class.segment-button-checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <ng-container *ngTemplateOutlet=\"button.template\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-segment-classic', imports: [
+                        NgTemplateOutlet
+                    ], template: "<div class=\"segment-container\">\n  <div class=\"segment-background\"></div>\n  <div\n    class=\"segment-indicator\"\n    [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n    [style.width.px]=\"indicatorWidth\"\n  ></div>\n  <div\n    class=\"segment-buttons\"\n    #buttonsContainer\n  >\n    @for (button of buttons; track button; let i = $index) {\n      <button\n        class=\"segment-button\"\n        [class.segment-button-checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <ng-container *ngTemplateOutlet=\"button.template\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
+                type: ContentChildren,
+                args: [DuckDevSegmentButton]
+            }], buttonsContainer: [{ type: i0.ViewChild, args: ['buttonsContainer', { isSignal: true }] }] } });
+
+class DuckDevSegmentNeobrutal {
+    cdr = inject(ChangeDetectorRef);
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
     color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
     valueChange = output();
@@ -3899,105 +5605,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             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"] }]
         }] });
 
-function clampProgress(value) {
-    if (!Number.isFinite(value)) {
-        return 0;
-    }
-    return Math.min(100, Math.max(0, value));
-}
-function buildProgressSegments(value, count) {
-    const safeCount = Math.min(24, Math.max(4, Math.round(count) || 10));
-    const activeCount = Math.round((clampProgress(value) / 100) * safeCount);
-    return Array.from({ length: safeCount }, (_, index) => index < activeCount);
-}
-
-class DuckDevProgressLine {
-    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
-    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
-    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
-    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
-    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressLine, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressLine, isStandalone: true, selector: "duck-dev-progress-line", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-line\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-line__header\">\n    <div class=\"dd-progress-line__copy\">\n      <span class=\"dd-progress-line__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-line__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-line__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-line__track\">\n    <span class=\"dd-progress-line__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-line{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-line__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-line__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-line__label{color:var(--dd-base-600);font-size:15px;font-weight:700;line-height:1.2}.dd-progress-line__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-line__value{color:var(--dd-base-500);font-size:14px;font-weight:700;line-height:1;white-space:nowrap}.dd-progress-line__track{position:relative;height:12px;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 88%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 14%,transparent),0 1px color-mix(in srgb,var(--dd-base-0) 90%,transparent)}.dd-progress-line__fill{display:block;height:100%;border-radius:inherit;transition:width .24s ease;background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:inset 0 -1px color-mix(in srgb,var(--dd-base-600) 16%,transparent)}.dd-progress-line[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-line[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-line[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-line[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-line[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressLine, decorators: [{
-            type: Component,
-            args: [{ selector: 'duck-dev-progress-line', standalone: true, template: "<section class=\"dd-progress-line\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-line__header\">\n    <div class=\"dd-progress-line__copy\">\n      <span class=\"dd-progress-line__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-line__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-line__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-line__track\">\n    <span class=\"dd-progress-line__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-line{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-line__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-line__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-line__label{color:var(--dd-base-600);font-size:15px;font-weight:700;line-height:1.2}.dd-progress-line__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-line__value{color:var(--dd-base-500);font-size:14px;font-weight:700;line-height:1;white-space:nowrap}.dd-progress-line__track{position:relative;height:12px;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 88%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 14%,transparent),0 1px color-mix(in srgb,var(--dd-base-0) 90%,transparent)}.dd-progress-line__fill{display:block;height:100%;border-radius:inherit;transition:width .24s ease;background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:inset 0 -1px color-mix(in srgb,var(--dd-base-600) 16%,transparent)}.dd-progress-line[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-line[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-line[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-line[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-line[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
-
-class DuckDevProgressStack {
-    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
-    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
-    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
-    color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
-    segmentCount = input(10, { ...(ngDevMode ? { debugName: "segmentCount" } : {}) });
-    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
-    segments = computed(() => buildProgressSegments(this.percent(), this.segmentCount()), { ...(ngDevMode ? { debugName: "segments" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressStack, isStandalone: true, selector: "duck-dev-progress-stack", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, segmentCount: { classPropertyName: "segmentCount", publicName: "segmentCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-stack__header\">\n    <div class=\"dd-progress-stack__copy\">\n      <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-stack__segments\">\n    @for (segment of segments(); track $index) {\n      <span class=\"dd-progress-stack__segment\" [class.dd-progress-stack__segment--active]=\"segment\"></span>\n    }\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-stack{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-stack__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-stack__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-stack__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-stack__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-stack__value{color:var(--dd-base-500);font-size:14px;font-weight:700;white-space:nowrap}.dd-progress-stack__segments{display:grid;grid-template-columns:repeat(auto-fit,minmax(18px,1fr));gap:8px;width:100%}.dd-progress-stack__segment{height:14px;border-radius:999px;background:var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 12%,transparent);transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}.dd-progress-stack__segment--active{background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:0 6px 14px color-mix(in srgb,var(--dd-progress-fill-end) 24%,transparent);transform:translateY(-1px)}.dd-progress-stack[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-stack[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-stack[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-stack[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-stack[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, decorators: [{
-            type: Component,
-            args: [{ selector: 'duck-dev-progress-stack', standalone: true, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-stack__header\">\n    <div class=\"dd-progress-stack__copy\">\n      <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-stack__segments\">\n    @for (segment of segments(); track $index) {\n      <span class=\"dd-progress-stack__segment\" [class.dd-progress-stack__segment--active]=\"segment\"></span>\n    }\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-stack{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-stack__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-stack__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-stack__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-stack__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-stack__value{color:var(--dd-base-500);font-size:14px;font-weight:700;white-space:nowrap}.dd-progress-stack__segments{display:grid;grid-template-columns:repeat(auto-fit,minmax(18px,1fr));gap:8px;width:100%}.dd-progress-stack__segment{height:14px;border-radius:999px;background:var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 12%,transparent);transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}.dd-progress-stack__segment--active{background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:0 6px 14px color-mix(in srgb,var(--dd-progress-fill-end) 24%,transparent);transform:translateY(-1px)}.dd-progress-stack[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-stack[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-stack[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-stack[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-stack[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], segmentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "segmentCount", required: false }] }] } });
-
-class DuckDevProgressMeter {
-    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
-    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
-    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
-    color = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "color" } : {}) });
-    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressMeter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressMeter, isStandalone: true, selector: "duck-dev-progress-meter", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-meter\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-meter__header\">\n    <div class=\"dd-progress-meter__copy\">\n      <span class=\"dd-progress-meter__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-meter__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-meter__badge\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-meter__track\">\n    <span class=\"dd-progress-meter__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-meter__marker\" [style.left.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-meter{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:1px solid var(--dd-base-300);border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 94%,transparent),var(--dd-base-0)),var(--dd-base-100);box-shadow:0 12px 24px color-mix(in srgb,var(--dd-base-600) 8%,transparent)}.dd-progress-meter__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dd-progress-meter__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-meter__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-meter__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-meter__badge{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--dd-progress-fill-end) 14%,var(--dd-base-0));color:var(--dd-base-600);font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--dd-progress-fill-end) 20%,transparent)}.dd-progress-meter__track{position:relative;height:18px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 84%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--dd-base-600) 12%,transparent);overflow:hidden}.dd-progress-meter__fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill-start) 92%,white),var(--dd-progress-fill-end)),var(--dd-progress-fill-end);transition:width .24s ease}.dd-progress-meter__marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--dd-base-0);border:3px solid var(--dd-progress-fill-end);box-shadow:0 4px 10px color-mix(in srgb,var(--dd-progress-fill-end) 26%,transparent);transform:translate(-50%,-50%)}.dd-progress-meter[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-meter[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-meter[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-meter[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-meter[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-300)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressMeter, decorators: [{
-            type: Component,
-            args: [{ selector: 'duck-dev-progress-meter', standalone: true, template: "<section class=\"dd-progress-meter\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-meter__header\">\n    <div class=\"dd-progress-meter__copy\">\n      <span class=\"dd-progress-meter__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-meter__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-meter__badge\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-meter__track\">\n    <span class=\"dd-progress-meter__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-meter__marker\" [style.left.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-meter{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:1px solid var(--dd-base-300);border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 94%,transparent),var(--dd-base-0)),var(--dd-base-100);box-shadow:0 12px 24px color-mix(in srgb,var(--dd-base-600) 8%,transparent)}.dd-progress-meter__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dd-progress-meter__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-meter__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-meter__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-meter__badge{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--dd-progress-fill-end) 14%,var(--dd-base-0));color:var(--dd-base-600);font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--dd-progress-fill-end) 20%,transparent)}.dd-progress-meter__track{position:relative;height:18px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 84%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--dd-base-600) 12%,transparent);overflow:hidden}.dd-progress-meter__fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill-start) 92%,white),var(--dd-progress-fill-end)),var(--dd-progress-fill-end);transition:width .24s ease}.dd-progress-meter__marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--dd-base-0);border:3px solid var(--dd-progress-fill-end);box-shadow:0 4px 10px color-mix(in srgb,var(--dd-progress-fill-end) 26%,transparent);transform:translate(-50%,-50%)}.dd-progress-meter[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-meter[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-meter[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-meter[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-meter[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-300)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
-
-class DuckDevProgressNeobrutalSlab {
-    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
-    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
-    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
-    color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
-    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,white) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
-            type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,white) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
-
-class DuckDevProgressNeobrutalStamp {
-    kicker = input.required({ ...(ngDevMode ? { debugName: "kicker" } : {}) });
-    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
-    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
-    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
-    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,white) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),color-mix(in srgb,var(--dd-progress-fill) 78%,black));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
-            type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,white) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),color-mix(in srgb,var(--dd-progress-fill) 78%,black));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
-        }], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
-
-class DuckDevProgressNeobrutalTicket {
-    leftTag = input.required({ ...(ngDevMode ? { debugName: "leftTag" } : {}) });
-    rightTag = input.required({ ...(ngDevMode ? { debugName: "rightTag" } : {}) });
-    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
-    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
-    color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
-    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,white),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
-            type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,white),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
-        }], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
-
 class ProgressBarBlock {
     t = inject(TranslocoService);
     colorViolet = AccentEnumColor.Violet;
@@ -4036,6 +5643,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     ], 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)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .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"] }]
         }] });
 
+class SpeakerBubbleBlock {
+    t = inject(TranslocoService);
+    colorViolet = AccentEnumColor.Violet;
+    colorOrange = AccentEnumColor.Orange;
+    colorWhite = AccentEnumColor.White;
+    colorGray = AccentEnumColor.Gray;
+    colorDark = AccentEnumColor.Dark;
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
+    introEl;
+    inputContentEl;
+    inputColorEl;
+    inputTailEl;
+    constructor() {
+        this.introEl = this.createEl(this.t.translate('speakerBubbleDoc.intro'));
+        this.inputContentEl = this.createEl(this.t.translate('speakerBubbleDoc.inputsDesc.content'));
+        this.inputColorEl = this.createEl(this.t.translate('speakerBubbleDoc.inputsDesc.color'));
+        this.inputTailEl = this.createEl(this.t.translate('speakerBubbleDoc.inputsDesc.tail'));
+    }
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
+    createEl(html) {
+        const el = document.createElement('div');
+        el.innerHTML = html;
+        return el;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: 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}.demo-container .bubble-preview--end{align-items:flex-end}.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", "target"] }, { kind: "component", type: DuckDevSpeakerBubbleOutline, selector: "dd-speaker-bubble-outline", inputs: ["color", "tail", "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,
+            args: [{ selector: 'app-speaker-bubble-block', standalone: true, imports: [
+                        TranslocoPipe,
+                        DuckDevCardAccent,
+                        DuckDevCardSection,
+                        DuckDevSpeakerBubbleClassic,
+                        DuckDevSpeakerBubbleSoft,
+                        DuckDevSpeakerBubbleOutline,
+                        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}.demo-container .bubble-preview--end{align-items:flex-end}.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"] }]
+        }], ctorParameters: () => [] });
+
 class MainDocumentationPage {
     translocoService = inject(TranslocoService);
     title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
@@ -4050,6 +5705,7 @@ class MainDocumentationPage {
         { id: 'badge', label: this.translocoService.translate('tabs.badge') },
         { id: 'directives', label: this.translocoService.translate('tabs.directives') },
         { id: 'card', label: this.translocoService.translate('tabs.card') },
+        { id: 'speaker-bubble', label: this.translocoService.translate('tabs.speakerBubble') },
         { id: 'input', label: this.translocoService.translate('tabs.input') },
         { id: 'modal', label: this.translocoService.translate('tabs.modal') },
         { id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
@@ -4062,7 +5718,7 @@ class MainDocumentationPage {
         this.activeTab.set(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('speaker-bubble') {\n      <app-speaker-bubble-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }, { kind: "component", type: SpeakerBubbleBlock, selector: "app-speaker-bubble-block" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
             type: Component,
@@ -4085,12 +5741,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         ModalBlock,
                         SegmentBlock,
                         ProgressBarBlock,
-                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
+                        SpeakerBubbleBlock,
+                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('speaker-bubble') {\n      <app-speaker-bubble-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-CDxyWfrd.mjs'),
-    ru: import('./duck-dev-lib-ru-1jQ8uE1i.mjs'),
+    en: import('./duck-dev-lib-en-BXgJr6gM.mjs'),
+    ru: import('./duck-dev-lib-ru-BezMvMFU.mjs'),
 };
 
 /*
@@ -4101,5 +5758,5 @@ const DuckDevLibTranslations = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
+export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
 //# sourceMappingURL=duck-dev-lib.mjs.map