duck-dev-lib 0.0.44 → 0.0.46

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, viewChild, ContentChildren, afterRenderEffect } from '@angular/core';
 import * as i1 from '@angular/common';
-import { NgStyle, CommonModule, JsonPipe, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { NgStyle, CommonModule, JsonPipe, NgTemplateOutlet, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i1$3 from '@jsverse/transloco';
 import { TranslocoPipe, TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import * as i1$1 from '@angular/forms';
@@ -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 {
@@ -3759,18 +4091,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                 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();
+    ionChange = output();
+    segmentButtons;
+    buttonsContainer = viewChild.required('buttonsContainer');
+    buttons = [];
+    selectedValue;
+    indicatorPosition = 0;
+    indicatorWidth = 0;
+    segmentStyle = computed(() => this.getSegmentStyle(this.color()), { ...(ngDevMode ? { debugName: "segmentStyle" } : {}) });
+    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((button) => ({
+            value: button.value(),
+            contentId: button.contentId(),
+            template: button.templateRef(),
+        }));
+    }
+    getSelectedIndex() {
+        return Math.max(0, this.buttons.findIndex((button) => button.value === this.selectedValue));
+    }
+    updateIndicator(index) {
+        const container = this.buttonsContainer().nativeElement;
+        const buttonElements = container.querySelectorAll('.dd-segment-neo__button');
+        if (buttonElements[index]) {
+            const button = buttonElements[index];
+            this.indicatorWidth = button.offsetWidth;
+            this.indicatorPosition = button.offsetLeft;
+        }
+    }
+    getSegmentStyle(color) {
+        switch (color) {
+            case AccentEnumColor.Violet:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-secondary)',
+                    '--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-secondary) 84%, var(--dd-base-0))',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-yellow)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-accent-blue)',
+                    '--dd-segment-neo-text': 'var(--dd-base-0)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-0) 74%, transparent)',
+                };
+            case AccentEnumColor.Orange:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-accent-orange)',
+                    '--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-accent-yellow) 68%, var(--dd-base-0))',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-pink)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-accent-yellow)',
+                    '--dd-segment-neo-text': 'var(--dd-base-600)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 66%, transparent)',
+                };
+            case AccentEnumColor.Gray:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-100)',
+                    '--dd-segment-neo-panel': 'var(--dd-base-0)',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-blue)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-400)',
+                    '--dd-segment-neo-text': 'var(--dd-base-600)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
+                };
+            case AccentEnumColor.Dark:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-600)',
+                    '--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500))',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-yellow)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-accent-orange)',
+                    '--dd-segment-neo-text': 'var(--dd-base-0)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-0) 68%, transparent)',
+                };
+            case AccentEnumColor.White:
+            default:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-0)',
+                    '--dd-segment-neo-panel': 'var(--dd-base-100)',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-orange)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-accent-blue)',
+                    '--dd-segment-neo-text': 'var(--dd-base-600)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
+                };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n  <div class=\"dd-segment-neo__indicator-shell\">\n    <div\n      class=\"dd-segment-neo__indicator\"\n      [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n      [style.width.px]=\"indicatorWidth\"\n    >\n      <span class=\"dd-segment-neo__indicator-notch\"></span>\n    </div>\n  </div>\n\n  <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n    @for (button of buttons; track button.value; let i = $index) {\n      <button\n        class=\"dd-segment-neo__button\"\n        [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <span class=\"dd-segment-neo__button-copy\">\n          <ng-container *ngTemplateOutlet=\"button.template\" />\n        </span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-orange);--dd-segment-neo-shadow: var(--dd-base-accent-blue);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-base-600);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-base-600);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-base-600);border-bottom:3px solid var(--dd-base-600);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n  <div class=\"dd-segment-neo__indicator-shell\">\n    <div\n      class=\"dd-segment-neo__indicator\"\n      [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n      [style.width.px]=\"indicatorWidth\"\n    >\n      <span class=\"dd-segment-neo__indicator-notch\"></span>\n    </div>\n  </div>\n\n  <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n    @for (button of buttons; track button.value; let i = $index) {\n      <button\n        class=\"dd-segment-neo__button\"\n        [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <span class=\"dd-segment-neo__button-copy\">\n          <ng-container *ngTemplateOutlet=\"button.template\" />\n        </span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-orange);--dd-segment-neo-shadow: var(--dd-base-accent-blue);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-base-600);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-base-600);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-base-600);border-bottom:3px solid var(--dd-base-600);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", 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 SegmentBlock {
     selected = signal('all', { ...(ngDevMode ? { debugName: "selected" } : {}) });
+    neobrutalSelected = signal('rush', { ...(ngDevMode ? { debugName: "neobrutalSelected" } : {}) });
     lastEvent = signal('', { ...(ngDevMode ? { debugName: "lastEvent" } : {}) });
+    colorViolet = AccentEnumColor.Violet;
+    colorOrange = AccentEnumColor.Orange;
     onIonChange(e) {
         this.lastEvent.set(e.detail.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>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    </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)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n          <duck-dev-segment-neobrutal\n            [value]=\"neobrutalSelected()\"\n            [color]=\"colorViolet\"\n            (valueChange)=\"neobrutalSelected.set($event)\"\n          >\n            <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ neobrutalSelected() }}</b>\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n          <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n            <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "component", type: DuckDevSegmentNeobrutal, selector: "duck-dev-segment-neobrutal", inputs: ["value", "color"], outputs: ["valueChange", "ionChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton], 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>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    </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)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+            args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton, DuckDevSegmentNeobrutal], template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n          <duck-dev-segment-neobrutal\n            [value]=\"neobrutalSelected()\"\n            [color]=\"colorViolet\"\n            (valueChange)=\"neobrutalSelected.set($event)\"\n          >\n            <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ neobrutalSelected() }}</b>\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n          <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n            <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-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) {
@@ -3910,6 +4368,1310 @@ 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"] }]
         }] });
 
+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 DEFAULT_BUBBLE_GEOMETRY$2 = {
+    side: 'left',
+    style: {
+        left: '0px',
+        top: '0px',
+        width: '1px',
+        height: '1px',
+    },
+    viewBox: '0 0 1 1',
+    path: '',
+};
+function clamp$3(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function serializePoint$3(point) {
+    return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+}
+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 localMatch = hostElement.parentElement?.querySelector(source);
+        if (localMatch) {
+            return localMatch;
+        }
+        return documentRef.querySelector(source);
+    }
+    catch {
+        return null;
+    }
+}
+function getBubbleElement$3(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$3(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$3(bottomRightArcEnd)}`,
+        `H ${baseEnd.x.toFixed(2)}`,
+        `L ${serializePoint$3(tip)}`,
+        `L ${serializePoint$3(baseStart)}`,
+        `H ${bottomLeftArcStart.x.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$3(leftBottom)}`,
+        `V ${leftTop.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$3(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$3(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleRefresh());
+            this.resizeObserver.observe(bubbleElement);
+        }
+        const targetElement = resolveTargetElement$3(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$3(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        const targetElement = resolveTargetElement$3(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$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 anchor = {
+            x: bubbleRect.left + (baseStartX + baseEndX) / 2,
+            y: bubbleRect.bottom,
+        };
+        const targetPoint = targetRect
+            ? closestPointOnRect$3(targetRect, anchor)
+            : {
+                x: bubbleRect.left + (side === 'left' ? baseStartX : baseEndX),
+                y: bubbleRect.bottom + Math.max(24, bubbleRect.height / 4),
+            };
+        const tipX = clamp$3(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 }] }] } });
+
+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$2(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$2(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$2(first)}`];
+    for (const point of rest) {
+        path.push(`L ${serializePoint$2(point)}`);
+    }
+    if (close) {
+        path.push('Z');
+    }
+    return path.join(' ');
+}
+function getBubbleElement$2(hostElement) {
+    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
+}
+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 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$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 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$2(outer)}`,
+            `C ${serializePoint$2(c1)} ${serializePoint$2(c2)} ${serializePoint$2(c3)} ${serializePoint$2(tip)}`,
+            `C ${serializePoint$2(c4)} ${serializePoint$2(c5)} ${serializePoint$2(c6)} ${serializePoint$2(inner)}`,
+            `Q ${serializePoint$2(seam)} ${serializePoint$2(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$2(outer)}`,
+            `C ${serializePoint$2(c1)} ${serializePoint$2(c2)} ${serializePoint$2(c3)} ${serializePoint$2(tip)}`,
+            `C ${serializePoint$2(c4)} ${serializePoint$2(c5)} ${serializePoint$2(c6)} ${serializePoint$2(inner)}`,
+            `Q ${serializePoint$2(seam)} ${serializePoint$2(outer)}`,
+            'Z',
+        ].join(' '),
+        secondaryPath: `M ${serializePoint$2(shineStart)} Q ${serializePoint$2(shineControl)} ${serializePoint$2(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$2(notchStart)} L ${serializePoint$2(notchMiddle)} L ${serializePoint$2(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$2(targetRect, anchorViewport)
+        : {
+            x: bubbleRect.left + (side === 'left' ? baseStart.x : baseEnd.x),
+            y: anchorViewport.y + metrics.fallbackDy,
+        };
+    const tip = {
+        x: clamp$2(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$2(hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        const targetElement = resolveTargetElement$2(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$2(hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleRefresh);
+        resizeObserver?.observe(bubbleElement);
+        const targetElement = resolveTargetElement$2(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),
+    };
+}
+
+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 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" } : {}) });
@@ -3924,6 +5686,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') },
@@ -3936,7 +5699,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,
@@ -3959,12 +5722,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-Ax8ROq2-.mjs'),
-    ru: import('./duck-dev-lib-ru-yHcUp82C.mjs'),
+    en: import('./duck-dev-lib-en-VOJz-IcV.mjs'),
+    ru: import('./duck-dev-lib-ru-COyomsqL.mjs'),
 };
 
 /*
@@ -3975,5 +5739,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, 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