duck-dev-lib 0.0.95 → 0.0.98

package/fesm2022/duck-dev-lib-documentation.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, HostBinding, Directive, computed, Component, signal, ChangeDetectionStrategy, inject, ElementRef, DestroyRef, PLATFORM_ID, afterNextRender, afterRenderEffect, output, viewChildren, effect, TemplateRef, contentChildren, Injectable, viewChild, ChangeDetectorRef, ContentChildren, booleanAttribute } from '@angular/core';
+import { input, HostBinding, Directive, numberAttribute, inject, ElementRef, Renderer2, DestroyRef, effect, computed, Component, signal, ChangeDetectionStrategy, PLATFORM_ID, afterNextRender, afterRenderEffect, output, viewChildren, TemplateRef, contentChildren, Injectable, viewChild, ChangeDetectorRef, ContentChildren, booleanAttribute } from '@angular/core';
 import * as i1$2 from '@angular/common';
 import { NgStyle, NgTemplateOutlet, DOCUMENT, isPlatformBrowser, CommonModule, JsonPipe } from '@angular/common';
 import * as i1$3 from '@jsverse/transloco';
@@ -78,6 +78,309 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                 args: ['style.gap']
             }] } });
 
+const DEFAULT_BLUR_PX = 2;
+const DEFAULT_MAX_OPACITY = 0.88;
+const DEFAULT_INTENSITY_PX = 28;
+const DEFAULT_SIZE = '56px';
+const DEFAULT_SURFACE = 'var(--dd-base-0)';
+const DEFAULT_EDGE_EPSILON_PX = 1;
+const EDGE_FADE_TRANSITION = 'opacity 0.12s linear';
+class DdEdgeFadeDirective {
+    ddEdgeFadeTarget = input(null, { ...(ngDevMode ? { debugName: "ddEdgeFadeTarget" } : {}) });
+    ddEdgeFadeEdges = input('horizontal', { ...(ngDevMode ? { debugName: "ddEdgeFadeEdges" } : {}) });
+    ddEdgeFadeBlur = input(DEFAULT_BLUR_PX, { ...(ngDevMode ? { debugName: "ddEdgeFadeBlur" } : {}), transform: numberAttribute });
+    ddEdgeFadeOpacity = input(DEFAULT_MAX_OPACITY, { ...(ngDevMode ? { debugName: "ddEdgeFadeOpacity" } : {}), transform: numberAttribute });
+    ddEdgeFadeIntensity = input(DEFAULT_INTENSITY_PX, { ...(ngDevMode ? { debugName: "ddEdgeFadeIntensity" } : {}), transform: numberAttribute });
+    ddEdgeFadeSurface = input(DEFAULT_SURFACE, { ...(ngDevMode ? { debugName: "ddEdgeFadeSurface" } : {}) });
+    ddEdgeFadeSize = input(DEFAULT_SIZE, { ...(ngDevMode ? { debugName: "ddEdgeFadeSize" } : {}) });
+    ddEdgeFadeInlineOffset = input(0, { ...(ngDevMode ? { debugName: "ddEdgeFadeInlineOffset" } : {}) });
+    ddEdgeFadeBlockOffset = input(0, { ...(ngDevMode ? { debugName: "ddEdgeFadeBlockOffset" } : {}) });
+    hostRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    edgeElements = new Map();
+    scrollTarget = null;
+    scrollCleanup = null;
+    resizeObserver = null;
+    mutationObserver = null;
+    frameId = 0;
+    viewReady = false;
+    constructor() {
+        effect(() => {
+            const config = this.getConfig();
+            this.ddEdgeFadeTarget();
+            if (!this.viewReady) {
+                return;
+            }
+            this.bindScrollTarget();
+            this.syncEdgeElements(config.edges);
+            this.applyEdgeStyles(config);
+            this.queueOpacityUpdate(config);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.cleanupTargetBinding();
+            this.clearFrame();
+            this.removeEdgeElements();
+        });
+    }
+    ngAfterViewInit() {
+        this.viewReady = true;
+        this.ensureHostPosition();
+        this.bindScrollTarget();
+        const config = this.getConfig();
+        this.syncEdgeElements(config.edges);
+        this.applyEdgeStyles(config);
+        this.queueOpacityUpdate(config);
+    }
+    bindScrollTarget() {
+        const nextTarget = this.resolveScrollTarget();
+        if (this.scrollTarget === nextTarget) {
+            return;
+        }
+        this.cleanupTargetBinding();
+        this.scrollTarget = nextTarget;
+        this.scrollCleanup = this.renderer.listen(nextTarget, 'scroll', () => {
+            this.queueOpacityUpdate();
+        });
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.queueOpacityUpdate());
+            this.resizeObserver.observe(nextTarget);
+            this.resizeObserver.observe(this.hostRef.nativeElement);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.queueOpacityUpdate());
+            this.mutationObserver.observe(nextTarget, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+        }
+    }
+    resolveScrollTarget() {
+        const target = this.ddEdgeFadeTarget();
+        const host = this.hostRef.nativeElement;
+        if (!target) {
+            return host;
+        }
+        if (typeof target === 'string') {
+            return host.querySelector(target) ?? host;
+        }
+        if (this.isHtmlElement(target)) {
+            return target;
+        }
+        const nativeElement = target.nativeElement;
+        return this.isHtmlElement(nativeElement) ? nativeElement : host;
+    }
+    syncEdgeElements(edges) {
+        const activeSides = this.getActiveSides(edges);
+        for (const side of activeSides) {
+            if (!this.edgeElements.has(side)) {
+                this.edgeElements.set(side, this.createEdgeElement(side));
+            }
+        }
+        for (const [side, element] of this.edgeElements.entries()) {
+            if (!activeSides.includes(side)) {
+                this.renderer.removeChild(this.hostRef.nativeElement, element);
+                this.edgeElements.delete(side);
+            }
+        }
+    }
+    createEdgeElement(side) {
+        const element = this.renderer.createElement('span');
+        this.renderer.addClass(element, 'dd-edge-fade');
+        this.renderer.addClass(element, `dd-edge-fade--${side}`);
+        this.renderer.setAttribute(element, 'aria-hidden', 'true');
+        this.renderer.setStyle(element, 'position', 'absolute');
+        this.renderer.setStyle(element, 'z-index', 'var(--dd-edge-fade-z-index, 1)');
+        this.renderer.setStyle(element, 'pointer-events', 'none');
+        this.renderer.setStyle(element, 'opacity', '0');
+        this.renderer.setStyle(element, 'transition', EDGE_FADE_TRANSITION);
+        this.renderer.appendChild(this.hostRef.nativeElement, element);
+        return element;
+    }
+    applyEdgeStyles(config) {
+        for (const [side, element] of this.edgeElements.entries()) {
+            this.renderer.setStyle(element, 'backdrop-filter', `blur(${config.blur}px)`);
+            element.style.setProperty('-webkit-backdrop-filter', `blur(${config.blur}px)`);
+            const gradient = this.getGradient(side, config.surface);
+            this.renderer.setStyle(element, 'background', gradient);
+            const mask = this.getMaskGradient(side);
+            this.renderer.setStyle(element, 'mask-image', mask);
+            element.style.setProperty('-webkit-mask-image', mask);
+            this.applySidePlacement(element, side, config);
+        }
+    }
+    applySidePlacement(element, side, config) {
+        if (side === 'left' || side === 'right') {
+            this.renderer.setStyle(element, 'top', config.blockOffset);
+            this.renderer.setStyle(element, 'bottom', config.blockOffset);
+            this.renderer.setStyle(element, side, config.inlineOffset);
+            this.renderer.setStyle(element, 'width', config.size);
+            this.renderer.removeStyle(element, side === 'left' ? 'right' : 'left');
+            this.renderer.removeStyle(element, 'height');
+            return;
+        }
+        this.renderer.setStyle(element, 'left', config.inlineOffset);
+        this.renderer.setStyle(element, 'right', config.inlineOffset);
+        this.renderer.setStyle(element, side, config.blockOffset);
+        this.renderer.setStyle(element, 'height', config.size);
+        this.renderer.removeStyle(element, side === 'top' ? 'bottom' : 'top');
+        this.renderer.removeStyle(element, 'width');
+    }
+    queueOpacityUpdate(config = this.getConfig()) {
+        if (!this.viewReady) {
+            return;
+        }
+        if (typeof requestAnimationFrame === 'undefined') {
+            this.updateEdgeOpacity(config);
+            return;
+        }
+        this.clearFrame();
+        this.frameId = requestAnimationFrame(() => {
+            this.frameId = 0;
+            this.updateEdgeOpacity(config);
+        });
+    }
+    updateEdgeOpacity(config) {
+        const target = this.scrollTarget ?? this.hostRef.nativeElement;
+        const maxScrollLeft = Math.max(0, target.scrollWidth - target.clientWidth);
+        const scrollLeft = Math.min(Math.max(target.scrollLeft, 0), maxScrollLeft);
+        const maxScrollTop = Math.max(0, target.scrollHeight - target.clientHeight);
+        const scrollTop = Math.min(Math.max(target.scrollTop, 0), maxScrollTop);
+        this.setEdgeOpacity('left', this.getOpacity(scrollLeft, config));
+        this.setEdgeOpacity('right', this.getOpacity(maxScrollLeft - scrollLeft, config));
+        this.setEdgeOpacity('top', this.getOpacity(scrollTop, config));
+        this.setEdgeOpacity('bottom', this.getOpacity(maxScrollTop - scrollTop, config));
+    }
+    setEdgeOpacity(side, opacity) {
+        const element = this.edgeElements.get(side);
+        if (!element) {
+            return;
+        }
+        this.renderer.setStyle(element, 'opacity', String(opacity));
+    }
+    getOpacity(distanceFromEdge, config) {
+        if (distanceFromEdge <= DEFAULT_EDGE_EPSILON_PX) {
+            return 0;
+        }
+        return Math.min(distanceFromEdge / config.intensity, 1) * config.opacity;
+    }
+    getGradient(side, surface) {
+        return [
+            `linear-gradient(${this.getDirection(side)},`,
+            `color-mix(in srgb, ${surface} 94%, transparent) 0%,`,
+            `color-mix(in srgb, ${surface} 70%, transparent) 35%,`,
+            `color-mix(in srgb, ${surface} 28%, transparent) 70%,`,
+            'transparent 100%)',
+        ].join(' ');
+    }
+    getMaskGradient(side) {
+        return [
+            `linear-gradient(${this.getDirection(side)},`,
+            'rgb(0 0 0 / 95%) 0%,',
+            'rgb(0 0 0 / 72%) 36%,',
+            'rgb(0 0 0 / 30%) 72%,',
+            'transparent 100%)',
+        ].join(' ');
+    }
+    getDirection(side) {
+        switch (side) {
+            case 'right':
+                return '270deg';
+            case 'top':
+                return '180deg';
+            case 'bottom':
+                return '0deg';
+            case 'left':
+            default:
+                return '90deg';
+        }
+    }
+    getActiveSides(edges) {
+        switch (edges) {
+            case 'vertical':
+                return ['top', 'bottom'];
+            case 'both':
+                return ['left', 'right', 'top', 'bottom'];
+            case 'horizontal':
+            default:
+                return ['left', 'right'];
+        }
+    }
+    getConfig() {
+        return {
+            blur: this.getFiniteNumber(this.ddEdgeFadeBlur(), DEFAULT_BLUR_PX),
+            opacity: this.getFiniteNumber(this.ddEdgeFadeOpacity(), DEFAULT_MAX_OPACITY, 0, 1),
+            intensity: this.getFiniteNumber(this.ddEdgeFadeIntensity(), DEFAULT_INTENSITY_PX, 1),
+            edges: this.getEdges(this.ddEdgeFadeEdges()),
+            surface: this.ddEdgeFadeSurface() || DEFAULT_SURFACE,
+            size: this.getCssLength(this.ddEdgeFadeSize(), DEFAULT_SIZE),
+            inlineOffset: this.getCssLength(this.ddEdgeFadeInlineOffset(), '0px'),
+            blockOffset: this.getCssLength(this.ddEdgeFadeBlockOffset(), '0px'),
+        };
+    }
+    getEdges(edges) {
+        return edges === 'vertical' || edges === 'both' || edges === 'horizontal'
+            ? edges
+            : 'horizontal';
+    }
+    getFiniteNumber(value, fallback, min = 0, max = Infinity) {
+        if (!Number.isFinite(value)) {
+            return fallback;
+        }
+        return Math.min(Math.max(value, min), max);
+    }
+    getCssLength(value, fallback) {
+        if (typeof value === 'number') {
+            return `${Math.max(0, value)}px`;
+        }
+        const normalized = `${value ?? ''}`.trim();
+        return normalized || fallback;
+    }
+    ensureHostPosition() {
+        if (typeof getComputedStyle === 'undefined') {
+            return;
+        }
+        const position = getComputedStyle(this.hostRef.nativeElement).position;
+        if (position === 'static') {
+            this.renderer.setStyle(this.hostRef.nativeElement, 'position', 'relative');
+        }
+    }
+    cleanupTargetBinding() {
+        this.scrollCleanup?.();
+        this.scrollCleanup = null;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        this.mutationObserver?.disconnect();
+        this.mutationObserver = null;
+        this.scrollTarget = null;
+    }
+    clearFrame() {
+        if (this.frameId && typeof cancelAnimationFrame !== 'undefined') {
+            cancelAnimationFrame(this.frameId);
+            this.frameId = 0;
+        }
+    }
+    removeEdgeElements() {
+        for (const element of this.edgeElements.values()) {
+            this.renderer.removeChild(this.hostRef.nativeElement, element);
+        }
+        this.edgeElements.clear();
+    }
+    isHtmlElement(value) {
+        return !!value && typeof value === 'object' && value.nodeType === 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdEdgeFadeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: DdEdgeFadeDirective, isStandalone: true, selector: "[ddEdgeFade]", inputs: { ddEdgeFadeTarget: { classPropertyName: "ddEdgeFadeTarget", publicName: "ddEdgeFadeTarget", isSignal: true, isRequired: false, transformFunction: null }, ddEdgeFadeEdges: { classPropertyName: "ddEdgeFadeEdges", publicName: "ddEdgeFadeEdges", isSignal: true, isRequired: false, transformFunction: null }, ddEdgeFadeBlur: { classPropertyName: "ddEdgeFadeBlur", publicName: "ddEdgeFadeBlur", isSignal: true, isRequired: false, transformFunction: null }, ddEdgeFadeOpacity: { classPropertyName: "ddEdgeFadeOpacity", publicName: "ddEdgeFadeOpacity", isSignal: true, isRequired: false, transformFunction: null }, ddEdgeFadeIntensity: { classPropertyName: "ddEdgeFadeIntensity", publicName: "ddEdgeFadeIntensity", isSignal: true, isRequired: false, transformFunction: null }, ddEdgeFadeSurface: { classPropertyName: "ddEdgeFadeSurface", publicName: "ddEdgeFadeSurface", isSignal: true, isRequired: false, transformFunction: null }, ddEdgeFadeSize: { classPropertyName: "ddEdgeFadeSize", publicName: "ddEdgeFadeSize", isSignal: true, isRequired: false, transformFunction: null }, ddEdgeFadeInlineOffset: { classPropertyName: "ddEdgeFadeInlineOffset", publicName: "ddEdgeFadeInlineOffset", isSignal: true, isRequired: false, transformFunction: null }, ddEdgeFadeBlockOffset: { classPropertyName: "ddEdgeFadeBlockOffset", publicName: "ddEdgeFadeBlockOffset", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DdEdgeFadeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ddEdgeFade]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { ddEdgeFadeTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeTarget", required: false }] }], ddEdgeFadeEdges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeEdges", required: false }] }], ddEdgeFadeBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeBlur", required: false }] }], ddEdgeFadeOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeOpacity", required: false }] }], ddEdgeFadeIntensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeIntensity", required: false }] }], ddEdgeFadeSurface: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeSurface", required: false }] }], ddEdgeFadeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeSize", required: false }] }], ddEdgeFadeInlineOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeInlineOffset", required: false }] }], ddEdgeFadeBlockOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ddEdgeFadeBlockOffset", required: false }] }] } });
+
 class ButtonBlurLift {
     textButton = input.required({ ...(ngDevMode ? { debugName: "textButton" } : {}) });
     colorButton = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
@@ -4277,11 +4580,11 @@ class DuckDevAccordionNeobrutalTapeComponent {
         this.isOpen.update((prev) => !prev);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-tape__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n    <span class=\"dd-accordion-tape__title-area\">\n      <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n      </span>\n    </span>\n\n    <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n  </button>\n\n  <div\n    class=\"dd-accordion-tape__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-tape__body-frame\">\n      <div class=\"dd-accordion-tape__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-tape{display:block;position:relative}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-neo-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-tape__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n    <span class=\"dd-accordion-tape__title-area\">\n      <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n      </span>\n    </span>\n\n    <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n  </button>\n\n  <div\n    class=\"dd-accordion-tape__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-tape__body-frame\">\n      <div class=\"dd-accordion-tape__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-tape{display:block;position:relative;color:var(--dd-neo-tape-text)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-neo-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-tape__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n    <span class=\"dd-accordion-tape__title-area\">\n      <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n      </span>\n    </span>\n\n    <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n  </button>\n\n  <div\n    class=\"dd-accordion-tape__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-tape__body-frame\">\n      <div class=\"dd-accordion-tape__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-tape{display:block;position:relative}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-neo-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"] }]
+            args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-tape__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n    <span class=\"dd-accordion-tape__title-area\">\n      <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n      </span>\n    </span>\n\n    <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n  </button>\n\n  <div\n    class=\"dd-accordion-tape__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-tape__body-frame\">\n      <div class=\"dd-accordion-tape__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-tape{display:block;position:relative;color:var(--dd-neo-tape-text)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-neo-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"] }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class SliderClassic {
@@ -5071,11 +5374,11 @@ class DuckDevProgressNeobrutalSlab {
     color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
     percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-neo-paper)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-neo-ink);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-neo-ink);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-6) 14%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-3) 32%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2);--dd-progress-panel: var(--dd-neo-ana-4)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ink) 12%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-neo-paper);--dd-progress-panel: var(--dd-neo-ana-4)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
+            args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-neo-paper)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-neo-ink);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-neo-ink);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-6) 14%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ana-3) 32%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2);--dd-progress-panel: var(--dd-neo-ana-4)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink);--dd-progress-panel: color-mix(in srgb, var(--dd-neo-ink) 12%, var(--dd-neo-paper))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-neo-paper);--dd-progress-panel: var(--dd-neo-ana-4)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class DuckDevProgressNeobrutalStamp {
@@ -5085,11 +5388,11 @@ class DuckDevProgressNeobrutalStamp {
     color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
     percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-neo-paper)) 0 12%,transparent 13%),var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-neo-ink);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-neo-ink)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-neo-paper)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
+            args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-neo-paper)) 0 12%,transparent 13%),var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-neo-ink);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-neo-ana-4));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-neo-paper)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-neo-ink)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-neo-paper)}\n"] }]
         }], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class DuckDevProgressNeobrutalTicket {
@@ -5100,11 +5403,11 @@ class DuckDevProgressNeobrutalTicket {
     color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
     percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-neo-ink);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-neo-paper)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-neo-ink);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-neo-ana-4))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-neo-paper)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
+            args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-neo-ink);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-neo-paper)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-neo-ink);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-neo-ink);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-neo-ana-4))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-neo-paper)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-neo-ana-6)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-neo-ana-1)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-neo-ana-2)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-neo-paper)}\n"] }]
         }], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class DuckDevSegmentButton {
@@ -5514,9 +5817,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'dd-breadcrumb-classic', standalone: true, template: "<nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\n  <ol class=\"breadcrumb__list\">\n    @for (item of items(); track $index; let last = $last) {\n      <li\n        class=\"breadcrumb__item\"\n        animate.enter=\"breadcrumb__item--enter\"\n        animate.leave=\"breadcrumb__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button class=\"breadcrumb__link\" type=\"button\" (click)=\"navigate.emit(item)\">\n            {{ item.label }}\n          </button>\n        } @else {\n          <span class=\"breadcrumb__current\" [attr.aria-current]=\"last ? 'page' : null\">{{\n            item.label\n          }}</span>\n        }\n        @if (!last) {\n          <span class=\"breadcrumb__separator\" aria-hidden=\"true\">{{ separator() }}</span>\n        }\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block;height:40px;box-sizing:border-box}.breadcrumb__list{display:flex;flex-wrap:nowrap;align-items:center;margin:0;padding:0;list-style:none;height:100%;overflow-x:auto;scrollbar-width:none}.breadcrumb__list::-webkit-scrollbar{display:none}.breadcrumb__item{display:inline-flex;align-items:center;min-width:0}.breadcrumb__link{display:inline-block;max-width:150px;padding:6px 4px;border:none;background:transparent;color:var(--dd-base-accent-blue);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease,opacity .18s ease}.breadcrumb__link:hover{color:var(--dd-base-secondary);text-decoration:underline}.breadcrumb__link:focus-visible{outline:2px solid var(--dd-base-accent-blue);outline-offset:2px;border-radius:3px}.breadcrumb__current{display:inline-block;max-width:150px;padding:6px 4px;color:var(--dd-base-500);font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumb__separator{flex-shrink:0;margin:0 8px;color:var(--dd-base-400);font-size:.8rem;-webkit-user-select:none;user-select:none}@keyframes breadcrumb-item-enter{0%{opacity:0;max-width:0;transform:translate(-8px)}50%{opacity:.4;max-width:250px}to{opacity:1;max-width:250px;transform:translate(0)}}@keyframes breadcrumb-item-leave{0%{opacity:1;max-width:250px;transform:translate(0)}50%{opacity:0;max-width:250px}to{opacity:0;max-width:0;transform:translate(-8px)}}.breadcrumb__item--enter{animation:breadcrumb-item-enter .3s cubic-bezier(.16,1,.3,1) both}.breadcrumb__item--leave{animation:breadcrumb-item-leave .22s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.breadcrumb__link,.breadcrumb__current{max-width:150px;font-size:.84rem}.breadcrumb__separator{margin:0 6px}}@media(max-width:480px){:host{height:36px}.breadcrumb__link{max-width:120px;padding:8px 2px;font-size:.8rem}.breadcrumb__current{max-width:140px;padding:8px 2px;font-size:.8rem}.breadcrumb__separator{margin:0 4px;font-size:.72rem}}@media(max-width:360px){.breadcrumb__link{max-width:90px;font-size:.75rem}.breadcrumb__current{max-width:110px;font-size:.75rem}.breadcrumb__separator{margin:0 3px}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
 
-const SCROLL_FADE_RANGE_PX = 28;
-const SCROLL_FADE_MAX_OPACITY = 0.88;
-const SCROLL_EDGE_EPSILON_PX = 1;
 const LONG_PRESS_TOOLTIP_DELAY_MS = 500;
 const LONG_PRESS_MOVE_TOLERANCE_PX = 6;
 const TOOLTIP_HORIZONTAL_GAP_PX = 8;
@@ -5550,14 +5850,10 @@ class DuckDevBreadcrumbNeobrutal {
         };
     }, { ...(ngDevMode ? { debugName: "tooltipStyle" } : {}) });
     isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
-    leftFadeOpacity = signal(0, { ...(ngDevMode ? { debugName: "leftFadeOpacity" } : {}) });
-    rightFadeOpacity = signal(0, { ...(ngDevMode ? { debugName: "rightFadeOpacity" } : {}) });
     dragStartX = 0;
     scrollStartX = 0;
     hasDragged = false;
     destroyRef = inject(DestroyRef);
-    resizeObserver = null;
-    scrollFadeFrameId = 0;
     emptyItemsClearTimerId = null;
     longPressTimerId = null;
     longPressPointerId = null;
@@ -5572,7 +5868,6 @@ class DuckDevBreadcrumbNeobrutal {
         e.preventDefault();
         const dx = e.clientX - this.dragStartX;
         el.scrollLeft = this.scrollStartX - dx;
-        this.updateScrollFades();
         if (Math.abs(dx) > 3) {
             this.hasDragged = true;
         }
@@ -5596,26 +5891,16 @@ class DuckDevBreadcrumbNeobrutal {
     constructor() {
         effect(() => {
             this.syncVisibleItems(this.items());
-            this.queueScrollFadeUpdate();
         });
         this.destroyRef.onDestroy(() => {
             document.removeEventListener('mousemove', this.onMouseMove);
             document.removeEventListener('mouseup', this.onMouseUp);
-            this.resizeObserver?.disconnect();
-            if (this.scrollFadeFrameId && typeof cancelAnimationFrame !== 'undefined') {
-                cancelAnimationFrame(this.scrollFadeFrameId);
-            }
             this.clearEmptyItemsTimer();
             this.clearLongPressTimer();
         });
     }
-    ngAfterViewInit() {
-        this.observeScrollContainer();
-        this.queueScrollFadeUpdate();
-    }
     onListScroll() {
         this.hideTooltip();
-        this.updateScrollFades();
     }
     onNavigate(item, index, event) {
         if (this.hasDragged) {
@@ -5687,46 +5972,6 @@ class DuckDevBreadcrumbNeobrutal {
             }
         }
     }
-    observeScrollContainer() {
-        const el = this.listRef()?.nativeElement;
-        if (!el || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        this.resizeObserver = new ResizeObserver(() => this.queueScrollFadeUpdate());
-        this.resizeObserver.observe(el);
-    }
-    queueScrollFadeUpdate() {
-        if (typeof requestAnimationFrame === 'undefined') {
-            this.updateScrollFades();
-            return;
-        }
-        if (this.scrollFadeFrameId) {
-            cancelAnimationFrame(this.scrollFadeFrameId);
-        }
-        this.scrollFadeFrameId = requestAnimationFrame(() => {
-            this.scrollFadeFrameId = 0;
-            this.updateScrollFades();
-        });
-    }
-    updateScrollFades() {
-        const el = this.listRef()?.nativeElement;
-        if (!el) {
-            this.leftFadeOpacity.set(0);
-            this.rightFadeOpacity.set(0);
-            return;
-        }
-        const maxScrollLeft = Math.max(0, el.scrollWidth - el.clientWidth);
-        const scrollLeft = Math.min(Math.max(el.scrollLeft, 0), maxScrollLeft);
-        const rightScrollDistance = Math.max(0, maxScrollLeft - scrollLeft);
-        this.leftFadeOpacity.set(this.getScrollFadeOpacity(scrollLeft));
-        this.rightFadeOpacity.set(this.getScrollFadeOpacity(rightScrollDistance));
-    }
-    getScrollFadeOpacity(distanceFromEdge) {
-        if (distanceFromEdge <= SCROLL_EDGE_EPSILON_PX) {
-            return 0;
-        }
-        return Math.min(distanceFromEdge / SCROLL_FADE_RANGE_PX, 1) * SCROLL_FADE_MAX_OPACITY;
-    }
     clearLongPressTimer() {
         if (this.longPressTimerId) {
             clearTimeout(this.longPressTimerId);
@@ -5748,7 +5993,6 @@ class DuckDevBreadcrumbNeobrutal {
             this.emptyItemsClearTimerId = null;
             if (this.items().length === 0) {
                 this.retainedItems.set([]);
-                this.queueScrollFadeUpdate();
             }
         }, EMPTY_ITEMS_CLEAR_DELAY_MS);
     }
@@ -5839,11 +6083,11 @@ class DuckDevBreadcrumbNeobrutal {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "navRef", first: true, predicate: ["navEl"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }, { propertyName: "labelRefs", predicate: ["labelEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n  class=\"neo-bc\"\n  #navEl\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n  [style.--neo-bc-left-fade-opacity]=\"leftFadeOpacity()\"\n  [style.--neo-bc-right-fade-opacity]=\"rightFadeOpacity()\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n    (scroll)=\"onListScroll()\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li class=\"neo-bc__item\">\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index, $event)\"\n            (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n            (pointermove)=\"onCrumbPointerMove($event)\"\n            (pointerup)=\"onCrumbPointerEnd($event, true)\"\n            (pointercancel)=\"onCrumbPointerEnd($event)\"\n            (pointerleave)=\"onCrumbPointerEnd($event)\"\n            (contextmenu)=\"$event.preventDefault()\"\n            (keydown.escape)=\"closeTooltip()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n            </span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index, $event)\"\n            (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n            (pointermove)=\"onCrumbPointerMove($event)\"\n            (pointerup)=\"onCrumbPointerEnd($event, true)\"\n            (pointercancel)=\"onCrumbPointerEnd($event)\"\n            (pointerleave)=\"onCrumbPointerEnd($event)\"\n            (contextmenu)=\"$event.preventDefault()\"\n            (keydown.enter)=\"onCurrentClick($index, $event)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index, $event)\"\n            (keydown.escape)=\"closeTooltip()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n            </span>\n          </span>\n        }\n        <span\n          class=\"neo-bc__arrow\"\n          [class.neo-bc__arrow--visible]=\"!last\"\n          aria-hidden=\"true\"\n        ></span>\n      </li>\n    }\n  </ol>\n  <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--left\" aria-hidden=\"true\"></span>\n  <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--right\" aria-hidden=\"true\"></span>\n  <span\n    class=\"neo-bc__tooltip\"\n    [class.neo-bc__tooltip--visible]=\"tooltipVisible()\"\n    [ngStyle]=\"tooltipStyle()\"\n    role=\"tooltip\"\n  >\n    {{ tooltipLabel() }}\n  </span>\n</nav>\n", styles: [":host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-padding-x: 14px;--neo-bc-padding-y: 10px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-scroll-fade-size: 56px;--neo-bc-left-fade-opacity: 0;--neo-bc-right-fade-opacity: 0;--neo-bc-crumb-max-width: 150px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );position:relative;display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:var(--neo-bc-padding-y) var(--neo-bc-padding-x);border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{position:relative;display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__scroll-fade{position:absolute;top:var(--neo-bc-padding-y);bottom:var(--neo-bc-padding-y);z-index:1;width:var(--neo-bc-scroll-fade-size);pointer-events:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity .12s linear}.neo-bc__scroll-fade--left{left:var(--neo-bc-padding-x);background:linear-gradient(90deg,color-mix(in srgb,var(--neo-bc-surface) 94%,transparent) 0%,color-mix(in srgb,var(--neo-bc-surface) 70%,transparent) 35%,color-mix(in srgb,var(--neo-bc-surface) 28%,transparent) 70%,transparent 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 36%,rgba(0,0,0,.3) 72%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 36%,rgba(0,0,0,.3) 72%,transparent 100%);opacity:var(--neo-bc-left-fade-opacity)}.neo-bc__scroll-fade--right{right:var(--neo-bc-padding-x);background:linear-gradient(270deg,color-mix(in srgb,var(--neo-bc-surface) 94%,transparent) 0%,color-mix(in srgb,var(--neo-bc-surface) 70%,transparent) 35%,color-mix(in srgb,var(--neo-bc-surface) 28%,transparent) 70%,transparent 100%);mask-image:linear-gradient(270deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 36%,rgba(0,0,0,.3) 72%,transparent 100%);-webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 36%,rgba(0,0,0,.3) 72%,transparent 100%);opacity:var(--neo-bc-right-fade-opacity)}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:var(--neo-bc-crumb-max-width);box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;max-width:var(--neo-bc-crumb-max-width);padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--neo-bc-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;max-width:var(--neo-bc-crumb-max-width);touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__tooltip{position:absolute;z-index:3;display:block;max-width:min(320px,100% - 16px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc__tooltip--visible{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-padding-x: 10px;--neo-bc-padding-y: 8px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;--neo-bc-scroll-fade-size: 48px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;--neo-bc-padding-x: 8px;--neo-bc-padding-y: 8px;--neo-bc-scroll-fade-size: 40px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__tooltip{max-width:min(260px,100% - 12px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;--neo-bc-padding-x: 6px;--neo-bc-padding-y: 6px;--neo-bc-scroll-fade-size: 34px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "navRef", first: true, predicate: ["navEl"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }, { propertyName: "labelRefs", predicate: ["labelEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n  class=\"neo-bc\"\n  #navEl\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n  ddEdgeFade\n  ddEdgeFadeTarget=\".neo-bc__list\"\n  ddEdgeFadeSurface=\"var(--neo-bc-surface)\"\n  ddEdgeFadeSize=\"var(--neo-bc-scroll-fade-size)\"\n  ddEdgeFadeInlineOffset=\"var(--neo-bc-padding-x)\"\n  ddEdgeFadeBlockOffset=\"var(--neo-bc-padding-y)\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n    (scroll)=\"onListScroll()\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li class=\"neo-bc__item\">\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index, $event)\"\n            (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n            (pointermove)=\"onCrumbPointerMove($event)\"\n            (pointerup)=\"onCrumbPointerEnd($event, true)\"\n            (pointercancel)=\"onCrumbPointerEnd($event)\"\n            (pointerleave)=\"onCrumbPointerEnd($event)\"\n            (contextmenu)=\"$event.preventDefault()\"\n            (keydown.escape)=\"closeTooltip()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n            </span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index, $event)\"\n            (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n            (pointermove)=\"onCrumbPointerMove($event)\"\n            (pointerup)=\"onCrumbPointerEnd($event, true)\"\n            (pointercancel)=\"onCrumbPointerEnd($event)\"\n            (pointerleave)=\"onCrumbPointerEnd($event)\"\n            (contextmenu)=\"$event.preventDefault()\"\n            (keydown.enter)=\"onCurrentClick($index, $event)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index, $event)\"\n            (keydown.escape)=\"closeTooltip()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n            </span>\n          </span>\n        }\n        <span\n          class=\"neo-bc__arrow\"\n          [class.neo-bc__arrow--visible]=\"!last\"\n          aria-hidden=\"true\"\n        ></span>\n      </li>\n    }\n  </ol>\n  <span\n    class=\"neo-bc__tooltip\"\n    [class.neo-bc__tooltip--visible]=\"tooltipVisible()\"\n    [ngStyle]=\"tooltipStyle()\"\n    role=\"tooltip\"\n  >\n    {{ tooltipLabel() }}\n  </span>\n</nav>\n", styles: [":host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-padding-x: 14px;--neo-bc-padding-y: 10px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-scroll-fade-size: 56px;--neo-bc-crumb-max-width: 150px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );position:relative;display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:var(--neo-bc-padding-y) var(--neo-bc-padding-x);border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{position:relative;display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:var(--neo-bc-crumb-max-width);box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;max-width:var(--neo-bc-crumb-max-width);padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--neo-bc-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;max-width:var(--neo-bc-crumb-max-width);touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__tooltip{position:absolute;z-index:3;display:block;max-width:min(320px,100% - 16px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc__tooltip--visible{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-padding-x: 10px;--neo-bc-padding-y: 8px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;--neo-bc-scroll-fade-size: 48px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;--neo-bc-padding-x: 8px;--neo-bc-padding-y: 8px;--neo-bc-scroll-fade-size: 40px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__tooltip{max-width:min(260px,100% - 12px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;--neo-bc-padding-x: 6px;--neo-bc-padding-y: 6px;--neo-bc-scroll-fade-size: 34px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: DdEdgeFadeDirective, selector: "[ddEdgeFade]", inputs: ["ddEdgeFadeTarget", "ddEdgeFadeEdges", "ddEdgeFadeBlur", "ddEdgeFadeOpacity", "ddEdgeFadeIntensity", "ddEdgeFadeSurface", "ddEdgeFadeSize", "ddEdgeFadeInlineOffset", "ddEdgeFadeBlockOffset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n  class=\"neo-bc\"\n  #navEl\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n  [style.--neo-bc-left-fade-opacity]=\"leftFadeOpacity()\"\n  [style.--neo-bc-right-fade-opacity]=\"rightFadeOpacity()\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n    (scroll)=\"onListScroll()\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li class=\"neo-bc__item\">\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index, $event)\"\n            (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n            (pointermove)=\"onCrumbPointerMove($event)\"\n            (pointerup)=\"onCrumbPointerEnd($event, true)\"\n            (pointercancel)=\"onCrumbPointerEnd($event)\"\n            (pointerleave)=\"onCrumbPointerEnd($event)\"\n            (contextmenu)=\"$event.preventDefault()\"\n            (keydown.escape)=\"closeTooltip()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n            </span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index, $event)\"\n            (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n            (pointermove)=\"onCrumbPointerMove($event)\"\n            (pointerup)=\"onCrumbPointerEnd($event, true)\"\n            (pointercancel)=\"onCrumbPointerEnd($event)\"\n            (pointerleave)=\"onCrumbPointerEnd($event)\"\n            (contextmenu)=\"$event.preventDefault()\"\n            (keydown.enter)=\"onCurrentClick($index, $event)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index, $event)\"\n            (keydown.escape)=\"closeTooltip()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n            </span>\n          </span>\n        }\n        <span\n          class=\"neo-bc__arrow\"\n          [class.neo-bc__arrow--visible]=\"!last\"\n          aria-hidden=\"true\"\n        ></span>\n      </li>\n    }\n  </ol>\n  <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--left\" aria-hidden=\"true\"></span>\n  <span class=\"neo-bc__scroll-fade neo-bc__scroll-fade--right\" aria-hidden=\"true\"></span>\n  <span\n    class=\"neo-bc__tooltip\"\n    [class.neo-bc__tooltip--visible]=\"tooltipVisible()\"\n    [ngStyle]=\"tooltipStyle()\"\n    role=\"tooltip\"\n  >\n    {{ tooltipLabel() }}\n  </span>\n</nav>\n", styles: [":host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-padding-x: 14px;--neo-bc-padding-y: 10px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-scroll-fade-size: 56px;--neo-bc-left-fade-opacity: 0;--neo-bc-right-fade-opacity: 0;--neo-bc-crumb-max-width: 150px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );position:relative;display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:var(--neo-bc-padding-y) var(--neo-bc-padding-x);border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{position:relative;display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__scroll-fade{position:absolute;top:var(--neo-bc-padding-y);bottom:var(--neo-bc-padding-y);z-index:1;width:var(--neo-bc-scroll-fade-size);pointer-events:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity .12s linear}.neo-bc__scroll-fade--left{left:var(--neo-bc-padding-x);background:linear-gradient(90deg,color-mix(in srgb,var(--neo-bc-surface) 94%,transparent) 0%,color-mix(in srgb,var(--neo-bc-surface) 70%,transparent) 35%,color-mix(in srgb,var(--neo-bc-surface) 28%,transparent) 70%,transparent 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 36%,rgba(0,0,0,.3) 72%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 36%,rgba(0,0,0,.3) 72%,transparent 100%);opacity:var(--neo-bc-left-fade-opacity)}.neo-bc__scroll-fade--right{right:var(--neo-bc-padding-x);background:linear-gradient(270deg,color-mix(in srgb,var(--neo-bc-surface) 94%,transparent) 0%,color-mix(in srgb,var(--neo-bc-surface) 70%,transparent) 35%,color-mix(in srgb,var(--neo-bc-surface) 28%,transparent) 70%,transparent 100%);mask-image:linear-gradient(270deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 36%,rgba(0,0,0,.3) 72%,transparent 100%);-webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.72) 36%,rgba(0,0,0,.3) 72%,transparent 100%);opacity:var(--neo-bc-right-fade-opacity)}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:var(--neo-bc-crumb-max-width);box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;max-width:var(--neo-bc-crumb-max-width);padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--neo-bc-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;max-width:var(--neo-bc-crumb-max-width);touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__tooltip{position:absolute;z-index:3;display:block;max-width:min(320px,100% - 16px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc__tooltip--visible{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-padding-x: 10px;--neo-bc-padding-y: 8px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;--neo-bc-scroll-fade-size: 48px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;--neo-bc-padding-x: 8px;--neo-bc-padding-y: 8px;--neo-bc-scroll-fade-size: 40px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__tooltip{max-width:min(260px,100% - 12px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;--neo-bc-padding-x: 6px;--neo-bc-padding-y: 6px;--neo-bc-scroll-fade-size: 34px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"] }]
+            args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle, DdEdgeFadeDirective], template: "<nav\n  class=\"neo-bc\"\n  #navEl\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n  ddEdgeFade\n  ddEdgeFadeTarget=\".neo-bc__list\"\n  ddEdgeFadeSurface=\"var(--neo-bc-surface)\"\n  ddEdgeFadeSize=\"var(--neo-bc-scroll-fade-size)\"\n  ddEdgeFadeInlineOffset=\"var(--neo-bc-padding-x)\"\n  ddEdgeFadeBlockOffset=\"var(--neo-bc-padding-y)\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n    (scroll)=\"onListScroll()\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li class=\"neo-bc__item\">\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index, $event)\"\n            (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n            (pointermove)=\"onCrumbPointerMove($event)\"\n            (pointerup)=\"onCrumbPointerEnd($event, true)\"\n            (pointercancel)=\"onCrumbPointerEnd($event)\"\n            (pointerleave)=\"onCrumbPointerEnd($event)\"\n            (contextmenu)=\"$event.preventDefault()\"\n            (keydown.escape)=\"closeTooltip()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n            </span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index, $event)\"\n            (pointerdown)=\"onCrumbPointerDown($index, $event)\"\n            (pointermove)=\"onCrumbPointerMove($event)\"\n            (pointerup)=\"onCrumbPointerEnd($event, true)\"\n            (pointercancel)=\"onCrumbPointerEnd($event)\"\n            (pointerleave)=\"onCrumbPointerEnd($event)\"\n            (contextmenu)=\"$event.preventDefault()\"\n            (keydown.enter)=\"onCurrentClick($index, $event)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index, $event)\"\n            (keydown.escape)=\"closeTooltip()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\" #labelEl>{{ item.label }}</span>\n            </span>\n          </span>\n        }\n        <span\n          class=\"neo-bc__arrow\"\n          [class.neo-bc__arrow--visible]=\"!last\"\n          aria-hidden=\"true\"\n        ></span>\n      </li>\n    }\n  </ol>\n  <span\n    class=\"neo-bc__tooltip\"\n    [class.neo-bc__tooltip--visible]=\"tooltipVisible()\"\n    [ngStyle]=\"tooltipStyle()\"\n    role=\"tooltip\"\n  >\n    {{ tooltipLabel() }}\n  </span>\n</nav>\n", styles: [":host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-padding-x: 14px;--neo-bc-padding-y: 10px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-scroll-fade-size: 56px;--neo-bc-crumb-max-width: 150px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );position:relative;display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:var(--neo-bc-padding-y) var(--neo-bc-padding-x);border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{position:relative;display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:var(--neo-bc-crumb-max-width);box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;max-width:var(--neo-bc-crumb-max-width);padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--neo-bc-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;max-width:var(--neo-bc-crumb-max-width);touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__tooltip{position:absolute;z-index:3;display:block;max-width:min(320px,100% - 16px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc__tooltip--visible{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-padding-x: 10px;--neo-bc-padding-y: 8px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;--neo-bc-scroll-fade-size: 48px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;--neo-bc-padding-x: 8px;--neo-bc-padding-y: 8px;--neo-bc-scroll-fade-size: 40px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__tooltip{max-width:min(260px,100% - 12px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;--neo-bc-padding-x: 6px;--neo-bc-padding-y: 6px;--neo-bc-scroll-fade-size: 34px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], navRef: [{ type: i0.ViewChild, args: ['navEl', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], labelRefs: [{ type: i0.ViewChildren, args: ['labelEl', { isSignal: true }] }] } });
 
 class DuckDevSelectorOption {
@@ -6161,6 +6405,11 @@ class TabsBlock {
         { id: 'drop', label: 'Drop room' },
         { id: 'review', label: 'Review desk' },
     ];
+    // Neobrutal bare (no background) tabs
+    neoBareHorizontalTabs = [
+        { id: 'signals', label: 'Signals' },
+        { id: 'slots', label: 'Slots' },
+    ];
     neoVerticalTabs = [
         { id: 'pulse', label: 'Pulse' },
         { id: 'stack', label: 'Stack' },
@@ -6169,6 +6418,7 @@ class TabsBlock {
     activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
     activeDemoTab = signal(this.demoTabs[0], { ...(ngDevMode ? { debugName: "activeDemoTab" } : {}) });
     activeHorizontalTab = signal(this.neoHorizontalTabs[0], { ...(ngDevMode ? { debugName: "activeHorizontalTab" } : {}) });
+    activeBareTab = signal(this.neoBareHorizontalTabs[0], { ...(ngDevMode ? { debugName: "activeBareTab" } : {}) });
     activeVerticalTab = signal(this.neoVerticalTabs[0], { ...(ngDevMode ? { debugName: "activeVerticalTab" } : {}) });
     onStyleTabChange(tab) {
         this.activeStyleTab.set(tab);
@@ -6179,11 +6429,14 @@ class TabsBlock {
     onHorizontalTabChange(tab) {
         this.activeHorizontalTab.set(tab);
     }
+    onBareTabChange(tab) {
+        this.activeBareTab.set(tab);
+    }
     onVerticalTabChange(tab) {
         this.activeVerticalTab.set(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"page-header\">\n    <div class=\"page-header__badges\">\n      <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n  </header>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    @if (activeStyleTab().id === 'classic') {\n      <!-- Description -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <div>\n              <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n              <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n            </div>\n          </div>\n\n          <div class=\"feature-cards\">\n            <dd-card-minimal [color]=\"colorViolet\">\n              <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorOrange\">\n              <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorGray\">\n              <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n            </dd-card-minimal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- API -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n          </div>\n\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>tabs</strong>\n              <dd-badge\n                [text]=\"'required'\"\n                [color]=\"colorOrange\"\n                [variant]=\"'soft'\"\n                [size]=\"'sm'\"\n              />\n              <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>tabChange</strong>\n              <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n            </div>\n          </div>\n\n          <h3 class=\"sub-title\">DuckDevTabItem</h3>\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>id</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>label</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>content</strong>\n              <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Code -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n          </div>\n\n          <ng-template #tabsUsageTemplate>\n            <pre class=\"accordion-code\"><code>&lt;duck-dev-tab\n  [tabs]=\"tabs\"\n  (tabChange)=\"onTabChange($event)\"\n&gt;\n  &#64;if (activeTab().id === 'first') {{ '{' }}\n    &lt;p&gt;First tab content&lt;/p&gt;\n  {{ '}' }}\n  &#64;if (activeTab().id === 'second') {{ '{' }}\n    &lt;p&gt;Second tab content&lt;/p&gt;\n  {{ '}' }}\n&lt;/duck-dev-tab&gt;</code></pre>\n          </ng-template>\n\n          <ng-template #tabsUsageComponent>\n            <pre\n              class=\"accordion-code\"\n            ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '&#64;jsverse/transloco';\n\n&#64;Component({{ '{' }}\n  imports: [DuckDevTab],\n  // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n  private readonly t = inject(TranslocoService);\n\n  tabs: DuckDevTabItem[] = [\n    {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n    {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n  ];\n\n  activeTab = signal&lt;DuckDevTabItem&gt;(this.tabs[0]);\n\n  onTabChange(tab: DuckDevTabItem) {{ '{' }}\n    this.activeTab.set(tab);\n  {{ '}' }}\n{{ '}' }}</code></pre>\n          </ng-template>\n\n          <div class=\"accordion-row\">\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n              [content]=\"tabsUsageTemplate\"\n              [color]=\"colorOrange\"\n            />\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n              [content]=\"tabsUsageComponent\"\n              [color]=\"colorViolet\"\n            />\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Live demo -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n          </div>\n\n          <div class=\"live-demo\">\n            <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n              @if (activeDemoTab().id === 'overview') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'features') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'api') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n                </div>\n              }\n            </duck-dev-tab>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Tip -->\n      <section class=\"tab-section\">\n        <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n          <p>\n            <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n            {{ 'tabsComponent.classicTip.text' | transloco }}\n          </p>\n        </dd-speaker-bubble-soft>\n      </section>\n    } @else {\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <duck-dev-tab-neobrutal\n              [tabs]=\"neoHorizontalTabs\"\n              (tabChange)=\"onHorizontalTabChange($event)\"\n            >\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerRush' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-alt\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerDrop' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-dark\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerReview' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n                </article>\n              </ng-template>\n            </duck-dev-tab-neobrutal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n                  <button\n                    class=\"neo-demo-vertical-button\"\n                    [class.active]=\"activeVerticalTab().id === tab.id\"\n                    (click)=\"onVerticalTabChange(tab)\"\n                    type=\"button\"\n                  >\n                    <span class=\"neo-demo-tab-number\">{{\n                      i + 1 < 10 ? '0' + (i + 1) : i + 1\n                    }}</span>\n                    <span>{{ tab.label }}</span>\n                  </button>\n                }\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                @if (activeVerticalTab().id === 'pulse') {\n                  <article class=\"neo-story\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyPulseChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n                  </article>\n                }\n                @if (activeVerticalTab().id === 'stack') {\n                  <article class=\"neo-story neo-story-alt\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyStackChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n                  </article>\n                }\n                @if (activeVerticalTab().id === 'blast') {\n                  <article class=\"neo-story neo-story-dark\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyBlastChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n                  </article>\n                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevTabNeobrutal, selector: "duck-dev-tab-neobrutal", inputs: ["tabs", "color", "showContentWrapper"], outputs: ["tabChange"] }, { kind: "directive", type: DdTabPanel, selector: "[ddTabPanel]" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TabsBlock, isStandalone: true, selector: "app-tabs-block", ngImport: i0, template: "<div class=\"tabs-page\">\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"page-header\">\n    <div class=\"page-header__badges\">\n      <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n  </header>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    @if (activeStyleTab().id === 'classic') {\n      <!-- Description -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <div>\n              <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n              <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n            </div>\n          </div>\n\n          <div class=\"feature-cards\">\n            <dd-card-minimal [color]=\"colorViolet\">\n              <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorOrange\">\n              <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorGray\">\n              <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n            </dd-card-minimal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- API -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n          </div>\n\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>tabs</strong>\n              <dd-badge\n                [text]=\"'required'\"\n                [color]=\"colorOrange\"\n                [variant]=\"'soft'\"\n                [size]=\"'sm'\"\n              />\n              <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>tabChange</strong>\n              <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n            </div>\n          </div>\n\n          <h3 class=\"sub-title\">DuckDevTabItem</h3>\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>id</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>label</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>content</strong>\n              <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Code -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n          </div>\n\n          <ng-template #tabsUsageTemplate>\n            <pre class=\"accordion-code\"><code>&lt;duck-dev-tab\n  [tabs]=\"tabs\"\n  (tabChange)=\"onTabChange($event)\"\n&gt;\n  &#64;if (activeTab().id === 'first') {{ '{' }}\n    &lt;p&gt;First tab content&lt;/p&gt;\n  {{ '}' }}\n  &#64;if (activeTab().id === 'second') {{ '{' }}\n    &lt;p&gt;Second tab content&lt;/p&gt;\n  {{ '}' }}\n&lt;/duck-dev-tab&gt;</code></pre>\n          </ng-template>\n\n          <ng-template #tabsUsageComponent>\n            <pre\n              class=\"accordion-code\"\n            ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '&#64;jsverse/transloco';\n\n&#64;Component({{ '{' }}\n  imports: [DuckDevTab],\n  // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n  private readonly t = inject(TranslocoService);\n\n  tabs: DuckDevTabItem[] = [\n    {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n    {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n  ];\n\n  activeTab = signal&lt;DuckDevTabItem&gt;(this.tabs[0]);\n\n  onTabChange(tab: DuckDevTabItem) {{ '{' }}\n    this.activeTab.set(tab);\n  {{ '}' }}\n{{ '}' }}</code></pre>\n          </ng-template>\n\n          <div class=\"accordion-row\">\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n              [content]=\"tabsUsageTemplate\"\n              [color]=\"colorOrange\"\n            />\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n              [content]=\"tabsUsageComponent\"\n              [color]=\"colorViolet\"\n            />\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Live demo -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n          </div>\n\n          <div class=\"live-demo\">\n            <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n              @if (activeDemoTab().id === 'overview') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'features') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'api') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n                </div>\n              }\n            </duck-dev-tab>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Tip -->\n      <section class=\"tab-section\">\n        <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n          <p>\n            <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n            {{ 'tabsComponent.classicTip.text' | transloco }}\n          </p>\n        </dd-speaker-bubble-soft>\n      </section>\n    } @else {\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <duck-dev-tab-neobrutal\n              [tabs]=\"neoHorizontalTabs\"\n              (tabChange)=\"onHorizontalTabChange($event)\"\n            >\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerRush' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-alt\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerDrop' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-dark\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerReview' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n                </article>\n              </ng-template>\n            </duck-dev-tab-neobrutal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'B'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.bareTitle' | transloco }}</h2>\n          </div>\n\n          <p class=\"tab-section__desc\">{{ 'tabsComponent.neobrutal.bareDescription' | transloco }}</p>\n\n          <div class=\"example-shell\">\n            <duck-dev-tab-neobrutal\n              [tabs]=\"neoBareHorizontalTabs\"\n              [showContentWrapper]=\"false\"\n              (tabChange)=\"onBareTabChange($event)\"\n            >\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.bareKickerSignals' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.bareCardSignalsTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.bareCardSignalsText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-alt\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.bareKickerSlots' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.bareCardSlotsTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.bareCardSlotsText' | transloco }}</p>\n                </article>\n              </ng-template>\n            </duck-dev-tab-neobrutal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n                  <button\n                    class=\"neo-demo-vertical-button\"\n                    [class.active]=\"activeVerticalTab().id === tab.id\"\n                    (click)=\"onVerticalTabChange(tab)\"\n                    type=\"button\"\n                  >\n                    <span class=\"neo-demo-tab-number\">{{\n                      i + 1 < 10 ? '0' + (i + 1) : i + 1\n                    }}</span>\n                    <span>{{ tab.label }}</span>\n                  </button>\n                }\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                @if (activeVerticalTab().id === 'pulse') {\n                  <article class=\"neo-story\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyPulseChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n                  </article>\n                }\n                @if (activeVerticalTab().id === 'stack') {\n                  <article class=\"neo-story neo-story-alt\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyStackChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n                  </article>\n                }\n                @if (activeVerticalTab().id === 'blast') {\n                  <article class=\"neo-story neo-story-dark\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyBlastChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n                  </article>\n                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevTabNeobrutal, selector: "duck-dev-tab-neobrutal", inputs: ["tabs", "color", "showContentWrapper"], outputs: ["tabChange"] }, { kind: "directive", type: DdTabPanel, selector: "[ddTabPanel]" }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "tailPosition", "target"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TabsBlock, decorators: [{
             type: Component,
@@ -6197,7 +6450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         Badge,
                         DuckDevAccordionComponent,
                         DuckDevSpeakerBubbleSoft,
-                    ], template: "<div class=\"tabs-page\">\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"page-header\">\n    <div class=\"page-header__badges\">\n      <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n  </header>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    @if (activeStyleTab().id === 'classic') {\n      <!-- Description -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <div>\n              <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n              <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n            </div>\n          </div>\n\n          <div class=\"feature-cards\">\n            <dd-card-minimal [color]=\"colorViolet\">\n              <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorOrange\">\n              <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorGray\">\n              <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n            </dd-card-minimal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- API -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n          </div>\n\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>tabs</strong>\n              <dd-badge\n                [text]=\"'required'\"\n                [color]=\"colorOrange\"\n                [variant]=\"'soft'\"\n                [size]=\"'sm'\"\n              />\n              <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>tabChange</strong>\n              <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n            </div>\n          </div>\n\n          <h3 class=\"sub-title\">DuckDevTabItem</h3>\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>id</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>label</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>content</strong>\n              <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Code -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n          </div>\n\n          <ng-template #tabsUsageTemplate>\n            <pre class=\"accordion-code\"><code>&lt;duck-dev-tab\n  [tabs]=\"tabs\"\n  (tabChange)=\"onTabChange($event)\"\n&gt;\n  &#64;if (activeTab().id === 'first') {{ '{' }}\n    &lt;p&gt;First tab content&lt;/p&gt;\n  {{ '}' }}\n  &#64;if (activeTab().id === 'second') {{ '{' }}\n    &lt;p&gt;Second tab content&lt;/p&gt;\n  {{ '}' }}\n&lt;/duck-dev-tab&gt;</code></pre>\n          </ng-template>\n\n          <ng-template #tabsUsageComponent>\n            <pre\n              class=\"accordion-code\"\n            ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '&#64;jsverse/transloco';\n\n&#64;Component({{ '{' }}\n  imports: [DuckDevTab],\n  // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n  private readonly t = inject(TranslocoService);\n\n  tabs: DuckDevTabItem[] = [\n    {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n    {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n  ];\n\n  activeTab = signal&lt;DuckDevTabItem&gt;(this.tabs[0]);\n\n  onTabChange(tab: DuckDevTabItem) {{ '{' }}\n    this.activeTab.set(tab);\n  {{ '}' }}\n{{ '}' }}</code></pre>\n          </ng-template>\n\n          <div class=\"accordion-row\">\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n              [content]=\"tabsUsageTemplate\"\n              [color]=\"colorOrange\"\n            />\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n              [content]=\"tabsUsageComponent\"\n              [color]=\"colorViolet\"\n            />\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Live demo -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n          </div>\n\n          <div class=\"live-demo\">\n            <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n              @if (activeDemoTab().id === 'overview') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'features') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'api') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n                </div>\n              }\n            </duck-dev-tab>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Tip -->\n      <section class=\"tab-section\">\n        <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n          <p>\n            <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n            {{ 'tabsComponent.classicTip.text' | transloco }}\n          </p>\n        </dd-speaker-bubble-soft>\n      </section>\n    } @else {\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <duck-dev-tab-neobrutal\n              [tabs]=\"neoHorizontalTabs\"\n              (tabChange)=\"onHorizontalTabChange($event)\"\n            >\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerRush' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-alt\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerDrop' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-dark\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerReview' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n                </article>\n              </ng-template>\n            </duck-dev-tab-neobrutal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n                  <button\n                    class=\"neo-demo-vertical-button\"\n                    [class.active]=\"activeVerticalTab().id === tab.id\"\n                    (click)=\"onVerticalTabChange(tab)\"\n                    type=\"button\"\n                  >\n                    <span class=\"neo-demo-tab-number\">{{\n                      i + 1 < 10 ? '0' + (i + 1) : i + 1\n                    }}</span>\n                    <span>{{ tab.label }}</span>\n                  </button>\n                }\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                @if (activeVerticalTab().id === 'pulse') {\n                  <article class=\"neo-story\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyPulseChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n                  </article>\n                }\n                @if (activeVerticalTab().id === 'stack') {\n                  <article class=\"neo-story neo-story-alt\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyStackChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n                  </article>\n                }\n                @if (activeVerticalTab().id === 'blast') {\n                  <article class=\"neo-story neo-story-dark\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyBlastChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n                  </article>\n                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"] }]
+                    ], template: "<div class=\"tabs-page\">\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"page-header\">\n    <div class=\"page-header__badges\">\n      <dd-badge [text]=\"'Horizontal'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Vertical'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signal API'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'tabsComponent.title' | transloco }}</h1>\n  </header>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CLASSIC \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    @if (activeStyleTab().id === 'classic') {\n      <!-- Description -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <div>\n              <h2>{{ 'tabsComponent.tab.title' | transloco }}</h2>\n              <p class=\"tab-section__desc\">{{ 'tabsComponent.tab.description' | transloco }}</p>\n            </div>\n          </div>\n\n          <div class=\"feature-cards\">\n            <dd-card-minimal [color]=\"colorViolet\">\n              <small>{{ 'tabsComponent.classicHighlights.animationEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.animationTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.animationText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorOrange\">\n              <small>{{ 'tabsComponent.classicHighlights.signalsEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.signalsTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.signalsText' | transloco }}</p>\n            </dd-card-minimal>\n            <dd-card-minimal [color]=\"colorGray\">\n              <small>{{ 'tabsComponent.classicHighlights.contentEyebrow' | transloco }}</small>\n              <h3>{{ 'tabsComponent.classicHighlights.contentTitle' | transloco }}</h3>\n              <p>{{ 'tabsComponent.classicHighlights.contentText' | transloco }}</p>\n            </dd-card-minimal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- API -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.inputs' | transloco }}</h2>\n          </div>\n\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>tabs</strong>\n              <dd-badge\n                [text]=\"'required'\"\n                [color]=\"colorOrange\"\n                [variant]=\"'soft'\"\n                [size]=\"'sm'\"\n              />\n              <span>{{ 'tabsComponent.tab.inputTabs' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>tabChange</strong>\n              <dd-badge [text]=\"'output'\" [color]=\"colorViolet\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.outputTabChange' | transloco }}</span>\n            </div>\n          </div>\n\n          <h3 class=\"sub-title\">DuckDevTabItem</h3>\n          <div class=\"inputs-grid\">\n            <div class=\"input-card\">\n              <strong>id</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiId' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>label</strong>\n              <dd-badge [text]=\"'string'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiLabel' | transloco }}</span>\n            </div>\n            <div class=\"input-card\">\n              <strong>content</strong>\n              <dd-badge [text]=\"'any?'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n              <span>{{ 'tabsComponent.tab.apiContent' | transloco }}</span>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Code -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.tab.usage' | transloco }}</h2>\n          </div>\n\n          <ng-template #tabsUsageTemplate>\n            <pre class=\"accordion-code\"><code>&lt;duck-dev-tab\n  [tabs]=\"tabs\"\n  (tabChange)=\"onTabChange($event)\"\n&gt;\n  &#64;if (activeTab().id === 'first') {{ '{' }}\n    &lt;p&gt;First tab content&lt;/p&gt;\n  {{ '}' }}\n  &#64;if (activeTab().id === 'second') {{ '{' }}\n    &lt;p&gt;Second tab content&lt;/p&gt;\n  {{ '}' }}\n&lt;/duck-dev-tab&gt;</code></pre>\n          </ng-template>\n\n          <ng-template #tabsUsageComponent>\n            <pre\n              class=\"accordion-code\"\n            ><code>import {{ '{' }} Component, inject, signal {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} DuckDevTab, DuckDevTabItem {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} TranslocoService {{ '}' }} from '&#64;jsverse/transloco';\n\n&#64;Component({{ '{' }}\n  imports: [DuckDevTab],\n  // ...\n{{ '}' }})\nexport class MyComponent {{ '{' }}\n  private readonly t = inject(TranslocoService);\n\n  tabs: DuckDevTabItem[] = [\n    {{ '{' }} id: 'first', label: this.t.translate('tabs.first') {{ '}' }},\n    {{ '{' }} id: 'second', label: this.t.translate('tabs.second') {{ '}' }},\n  ];\n\n  activeTab = signal&lt;DuckDevTabItem&gt;(this.tabs[0]);\n\n  onTabChange(tab: DuckDevTabItem) {{ '{' }}\n    this.activeTab.set(tab);\n  {{ '}' }}\n{{ '}' }}</code></pre>\n          </ng-template>\n\n          <div class=\"accordion-row\">\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.templateTitle' | transloco\"\n              [content]=\"tabsUsageTemplate\"\n              [color]=\"colorOrange\"\n            />\n            <duck-dev-accordion\n              [title]=\"'tabsComponent.classicCode.componentTitle' | transloco\"\n              [content]=\"tabsUsageComponent\"\n              [color]=\"colorViolet\"\n            />\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Live demo -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.classicDemo.title' | transloco }}</h2>\n          </div>\n\n          <div class=\"live-demo\">\n            <duck-dev-tab [tabs]=\"demoTabs\" (tabChange)=\"onDemoTabChange($event)\">\n              @if (activeDemoTab().id === 'overview') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.overviewTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.overviewText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'features') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.featuresTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.featuresText' | transloco }}</p>\n                </div>\n              }\n              @if (activeDemoTab().id === 'api') {\n                <div class=\"demo-panel\">\n                  <h3>{{ 'tabsComponent.classicDemo.apiTitle' | transloco }}</h3>\n                  <p>{{ 'tabsComponent.classicDemo.apiText' | transloco }}</p>\n                </div>\n              }\n            </duck-dev-tab>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <!-- Tip -->\n      <section class=\"tab-section\">\n        <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n          <p>\n            <strong>{{ 'tabsComponent.classicTip.title' | transloco }}</strong>\n            {{ 'tabsComponent.classicTip.text' | transloco }}\n          </p>\n        </dd-speaker-bubble-soft>\n      </section>\n    } @else {\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEOBRUTALISM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'H'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.horizontalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <duck-dev-tab-neobrutal\n              [tabs]=\"neoHorizontalTabs\"\n              (tabChange)=\"onHorizontalTabChange($event)\"\n            >\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerRush' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardRushTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardRushText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-alt\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerDrop' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardDropTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardDropText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-dark\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.kickerReview' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.cardReviewTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.cardReviewText' | transloco }}</p>\n                </article>\n              </ng-template>\n            </duck-dev-tab-neobrutal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'B'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.bareTitle' | transloco }}</h2>\n          </div>\n\n          <p class=\"tab-section__desc\">{{ 'tabsComponent.neobrutal.bareDescription' | transloco }}</p>\n\n          <div class=\"example-shell\">\n            <duck-dev-tab-neobrutal\n              [tabs]=\"neoBareHorizontalTabs\"\n              [showContentWrapper]=\"false\"\n              (tabChange)=\"onBareTabChange($event)\"\n            >\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.bareKickerSignals' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.bareCardSignalsTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.bareCardSignalsText' | transloco }}</p>\n                </article>\n              </ng-template>\n              <ng-template ddTabPanel>\n                <article class=\"neo-panel neo-panel-alt\">\n                  <span class=\"neo-kicker\">{{\n                    'tabsComponent.neobrutal.bareKickerSlots' | transloco\n                  }}</span>\n                  <h4>{{ 'tabsComponent.neobrutal.bareCardSlotsTitle' | transloco }}</h4>\n                  <p>{{ 'tabsComponent.neobrutal.bareCardSlotsText' | transloco }}</p>\n                </article>\n              </ng-template>\n            </duck-dev-tab-neobrutal>\n          </div>\n        </dd-card-section>\n      </section>\n\n      <section class=\"tab-section\">\n        <dd-card-section>\n          <div class=\"tab-section__head\">\n            <dd-badge [text]=\"'V'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n            <h2>{{ 'tabsComponent.neobrutal.verticalTitle' | transloco }}</h2>\n          </div>\n\n          <div class=\"example-shell\">\n            <div class=\"neo-demo-vertical\">\n              <div class=\"neo-demo-vertical__sidebar\">\n                @for (tab of neoVerticalTabs; track tab.id; let i = $index) {\n                  <button\n                    class=\"neo-demo-vertical-button\"\n                    [class.active]=\"activeVerticalTab().id === tab.id\"\n                    (click)=\"onVerticalTabChange(tab)\"\n                    type=\"button\"\n                  >\n                    <span class=\"neo-demo-tab-number\">{{\n                      i + 1 < 10 ? '0' + (i + 1) : i + 1\n                    }}</span>\n                    <span>{{ tab.label }}</span>\n                  </button>\n                }\n              </div>\n\n              <div class=\"neo-demo-vertical__content\">\n                @if (activeVerticalTab().id === 'pulse') {\n                  <article class=\"neo-story\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyPulseChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyPulseTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyPulseText' | transloco }}</p>\n                  </article>\n                }\n                @if (activeVerticalTab().id === 'stack') {\n                  <article class=\"neo-story neo-story-alt\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyStackChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyStackTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyStackText' | transloco }}</p>\n                  </article>\n                }\n                @if (activeVerticalTab().id === 'blast') {\n                  <article class=\"neo-story neo-story-dark\">\n                    <span class=\"neo-chip\">{{\n                      'tabsComponent.neobrutal.storyBlastChip' | transloco\n                    }}</span>\n                    <h4>{{ 'tabsComponent.neobrutal.storyBlastTitle' | transloco }}</h4>\n                    <p>{{ 'tabsComponent.neobrutal.storyBlastText' | transloco }}</p>\n                  </article>\n                }\n              </div>\n            </div>\n          </div>\n        </dd-card-section>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".tabs-page{max-width:960px;margin:0 auto;padding:48px 24px 80px}.page-header{text-align:center;margin-bottom:32px}.page-header__badges{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.page-header h1{font-size:36px;font-weight:800;color:var(--dd-base-600);margin:0;letter-spacing:-.02em}.tab-section{margin-bottom:16px}.tab-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.tab-section__head h2{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.tab-section__desc{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:4px 0 0}.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.inputs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:16px}.input-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:10px;background:var(--dd-base-100);border:1px solid var(--dd-base-300);transition:border-color .2s ease}.input-card:hover{border-color:var(--dd-base-accent-blue)}.input-card strong{font-size:14px;font-weight:700;color:var(--dd-base-accent-blue)}.input-card span{font-size:13px;line-height:1.5;color:var(--dd-base-400)}.input-card dd-badge{align-self:flex-start}.sub-title{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.05em;margin:20px 0 10px}.accordion-row{display:flex;flex-direction:column;gap:12px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.live-demo{border-radius:12px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);padding:20px;transition:border-color .25s ease,box-shadow .25s ease}.live-demo:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent)}.demo-panel{padding:24px 16px}.demo-panel h3{font-size:18px;font-weight:700;color:var(--dd-base-600);margin:0 0 8px}.demo-panel p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin:0}.example-shell{padding:24px;border:3px solid var(--dd-neo-ink);border-radius:24px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 24px,transparent 24px) top left/64px 64px no-repeat,var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-tabs{display:flex;flex-direction:column;gap:1rem}.neo-demo-tabs__header{display:flex;flex-wrap:wrap;gap:.85rem}.neo-demo-tab-button,.neo-demo-vertical-button{display:inline-flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:3px solid var(--dd-neo-ink);border-radius:20px;background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.neo-demo-tab-button{min-width:150px;box-shadow:6px 6px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button:hover,.neo-demo-tab-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-demo-tab-button.active{background:var(--dd-base-accent-yellow);box-shadow:8px 8px 0 var(--dd-base-accent-pink);transform:translate(-3px,-3px) rotate(-1deg)}.neo-demo-tab-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:3px solid currentColor;border-radius:12px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.74rem;font-weight:900;letter-spacing:.12em;flex-shrink:0}.neo-demo-tabs__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 14px,transparent 14px) top left/42px 42px no-repeat,var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-secondary);padding:1.25rem}.neo-demo-vertical{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:1rem;min-height:300px}.neo-demo-vertical__sidebar{display:flex;flex-direction:column;gap:.85rem;padding:.9rem;border:3px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(180deg,var(--dd-base-accent-orange) 0 56px,var(--dd-base-0) 56px 100%);box-shadow:10px 10px 0 var(--dd-base-accent-yellow)}.neo-demo-vertical-button{width:100%;text-align:left;box-shadow:none}.neo-demo-vertical-button:hover,.neo-demo-vertical-button:focus-visible{transform:translate(4px);box-shadow:-5px 5px 0 var(--dd-base-accent-blue)}.neo-demo-vertical-button.active{background:var(--dd-base-secondary);color:var(--dd-base-0);transform:translate(10px) rotate(-1deg);box-shadow:-8px 8px 0 var(--dd-base-accent-pink)}.neo-demo-vertical__content{overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:30px;background:radial-gradient(circle at top right,var(--dd-base-accent-yellow) 0 28px,transparent 29px),var(--dd-base-0);box-shadow:10px 10px 0 var(--dd-base-accent-blue);padding:1.25rem}.neo-panel,.neo-story{display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;border:3px solid var(--dd-neo-ink);border-radius:22px;background:var(--dd-base-0);min-height:180px}.neo-panel h4,.neo-story h4{margin:0;color:var(--dd-base-600);font-size:1.35rem;font-weight:900;line-height:1.05;text-transform:uppercase}.neo-panel p,.neo-story p{margin:0;color:var(--dd-base-500);font-size:.98rem;line-height:1.55}.neo-panel{box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-panel-alt{background:var(--dd-base-accent-orange);box-shadow:8px 8px 0 var(--dd-base-secondary)}.neo-panel-dark{background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}.neo-panel-dark h4,.neo-panel-dark p{color:var(--dd-base-0)}.neo-kicker,.neo-chip{align-self:flex-start;padding:.35rem .65rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.neo-story{justify-content:center;min-height:240px;box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.neo-story-alt{background:var(--dd-base-accent-yellow);box-shadow:10px 10px 0 var(--dd-base-accent-blue)}.neo-story-dark{background:var(--dd-base-secondary);box-shadow:10px 10px 0 var(--dd-base-accent-pink)}.neo-story-dark h4,.neo-story-dark p{color:var(--dd-base-0)}@media(max-width:768px){.tabs-page{padding:24px 16px 60px}.page-header h1{font-size:28px}.feature-cards,.inputs-grid,.neo-demo-vertical{grid-template-columns:1fr}.example-shell{padding:18px}}\n"] }]
         }] });
 
 class DuckDevSvgBlock {
@@ -6576,12 +6829,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }], ctorParameters: () => [] });
 
 class DirectiveBlock {
+    edgeFadeItems = [
+        'Library',
+        'Components',
+        'Breadcrumbs',
+        'Navigation',
+        'Settings',
+        'Preview',
+        'Publish',
+    ];
+    verticalFadeItems = [
+        'Overview',
+        'Inputs',
+        'Examples',
+        'Accessibility',
+        'Theming',
+        'API',
+    ];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DirectiveBlock, isStandalone: true, selector: "app-directive-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'directivesDoc.ddFlexDescription' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\" [justifyContent]=\"'space-between'\" [alignItems]=\"'center'\"&gt;\n  &lt;span&gt;Item 1&lt;/span&gt;\n  &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n        <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n        <li><strong>justifyContent</strong> \u2013 {{ 'directivesDoc.inputJustify' | transloco }}</li>\n        <li><strong>alignItems</strong> \u2013 {{ 'directivesDoc.inputAlign' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n            <span class=\"chip\">A</span>\n            <span class=\"chip\">B</span>\n            <span class=\"chip\">C</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n            <span class=\"chip\">One</span>\n            <span class=\"chip\">Two</span>\n            <span class=\"chip\">Three</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n            <span class=\"chip\">Left</span>\n            <span class=\"chip\">Right</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DirectiveBlock, isStandalone: true, selector: "app-directive-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'directivesDoc.ddFlexDescription' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\" [justifyContent]=\"'space-between'\" [alignItems]=\"'center'\"&gt;\n  &lt;span&gt;Item 1&lt;/span&gt;\n  &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n        <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n        <li><strong>justifyContent</strong> \u2013 {{ 'directivesDoc.inputJustify' | transloco }}</li>\n        <li><strong>alignItems</strong> \u2013 {{ 'directivesDoc.inputAlign' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n            <span class=\"chip\">A</span>\n            <span class=\"chip\">B</span>\n            <span class=\"chip\">C</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n            <span class=\"chip\">One</span>\n            <span class=\"chip\">Two</span>\n            <span class=\"chip\">Three</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n            <span class=\"chip\">Left</span>\n            <span class=\"chip\">Right</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'directivesDoc.ddEdgeFadeTitle' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'directivesDoc.ddEdgeFadeDescription' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;div\n  ddEdgeFade\n  ddEdgeFadeTarget=\".scroll-area\"\n  ddEdgeFadeEdges=\"horizontal\"\n  [ddEdgeFadeBlur]=\"2\"\n  [ddEdgeFadeOpacity]=\"0.88\"\n  [ddEdgeFadeIntensity]=\"28\"\n&gt;\n  &lt;div class=\"scroll-area\"&gt;...&lt;/div&gt;\n&lt;/div&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>ddEdgeFadeTarget</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeTarget' | transloco }}</li>\n        <li><strong>ddEdgeFadeEdges</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeEdges' | transloco }}</li>\n        <li><strong>ddEdgeFadeBlur</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeBlur' | transloco }}</li>\n        <li><strong>ddEdgeFadeOpacity</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeOpacity' | transloco }}</li>\n        <li><strong>ddEdgeFadeIntensity</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeIntensity' | transloco }}</li>\n        <li><strong>ddEdgeFadeSurface</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeSurface' | transloco }}</li>\n        <li><strong>ddEdgeFadeSize</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeSize' | transloco }}</li>\n        <li><strong>ddEdgeFadeInlineOffset / ddEdgeFadeBlockOffset</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeOffsets' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n      <div class=\"edge-fade-examples\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.edgeFadeHorizontal' | transloco }}</p>\n          <div\n            class=\"edge-fade-demo\"\n            ddEdgeFade\n            ddEdgeFadeTarget=\".edge-fade-demo__scroller\"\n            ddEdgeFadeSurface=\"var(--dd-base-0)\"\n          >\n            <div class=\"edge-fade-demo__scroller\">\n              @for (item of edgeFadeItems; track item) {\n                <span class=\"chip\">{{ item }}</span>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.edgeFadeVertical' | transloco }}</p>\n          <div\n            class=\"edge-fade-demo edge-fade-demo--vertical\"\n            ddEdgeFade\n            ddEdgeFadeTarget=\".edge-fade-demo__vertical-scroller\"\n            ddEdgeFadeEdges=\"vertical\"\n            ddEdgeFadeSurface=\"var(--dd-base-0)\"\n            [ddEdgeFadeSize]=\"34\"\n          >\n            <div class=\"edge-fade-demo__vertical-scroller\">\n              @for (item of verticalFadeItems; track item) {\n                <span class=\"chip\">{{ item }}</span>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}.demo-container .examples-block .edge-fade-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.demo-container .examples-block .edge-fade-examples .example-item{padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px}.demo-container .examples-block .edge-fade-examples .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .edge-fade-examples .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}.demo-container .examples-block .edge-fade-demo{width:100%;max-width:380px;padding:10px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300);border-radius:8px;overflow:hidden}.demo-container .examples-block .edge-fade-demo__scroller{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:4px 0}.demo-container .examples-block .edge-fade-demo__scroller .chip{flex:0 0 auto}.demo-container .examples-block .edge-fade-demo--vertical{max-width:280px;height:152px}.demo-container .examples-block .edge-fade-demo__vertical-scroller{height:100%;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:thin;padding:0 4px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "directive", type: DdEdgeFadeDirective, selector: "[ddEdgeFade]", inputs: ["ddEdgeFadeTarget", "ddEdgeFadeEdges", "ddEdgeFadeBlur", "ddEdgeFadeOpacity", "ddEdgeFadeIntensity", "ddEdgeFadeSurface", "ddEdgeFadeSize", "ddEdgeFadeInlineOffset", "ddEdgeFadeBlockOffset"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DirectiveBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-directive-block', standalone: true, imports: [DdFlexDirectionDirective, TranslocoPipe, DuckDevCardSection], template: "<div class=\"demo-container\">\n  <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'directivesDoc.ddFlexDescription' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\" [justifyContent]=\"'space-between'\" [alignItems]=\"'center'\"&gt;\n  &lt;span&gt;Item 1&lt;/span&gt;\n  &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n        <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n        <li><strong>justifyContent</strong> \u2013 {{ 'directivesDoc.inputJustify' | transloco }}</li>\n        <li><strong>alignItems</strong> \u2013 {{ 'directivesDoc.inputAlign' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n            <span class=\"chip\">A</span>\n            <span class=\"chip\">B</span>\n            <span class=\"chip\">C</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n            <span class=\"chip\">One</span>\n            <span class=\"chip\">Two</span>\n            <span class=\"chip\">Three</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n            <span class=\"chip\">Left</span>\n            <span class=\"chip\">Right</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+            args: [{ selector: 'app-directive-block', standalone: true, imports: [DdFlexDirectionDirective, DdEdgeFadeDirective, TranslocoPipe, DuckDevCardSection], template: "<div class=\"demo-container\">\n  <h1>{{ 'directivesDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'directivesDoc.ddFlexTitle' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'directivesDoc.ddFlexDescription' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;div ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"12\" [justifyContent]=\"'space-between'\" [alignItems]=\"'center'\"&gt;\n  &lt;span&gt;Item 1&lt;/span&gt;\n  &lt;span&gt;Item 2&lt;/span&gt;\n&lt;/div&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>ddFlexDirection</strong> \u2013 {{ 'directivesDoc.inputDirection' | transloco }}</li>\n        <li><strong>gap</strong> \u2013 {{ 'directivesDoc.inputGap' | transloco }}</li>\n        <li><strong>justifyContent</strong> \u2013 {{ 'directivesDoc.inputJustify' | transloco }}</li>\n        <li><strong>alignItems</strong> \u2013 {{ 'directivesDoc.inputAlign' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row8' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"8\">\n            <span class=\"chip\">A</span>\n            <span class=\"chip\">B</span>\n            <span class=\"chip\">C</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.col12' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'col'\" [gap]=\"12\">\n            <span class=\"chip\">One</span>\n            <span class=\"chip\">Two</span>\n            <span class=\"chip\">Three</span>\n          </div>\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.row1rem' | transloco }}</p>\n          <div class=\"demo-box\" ddFlex [ddFlexDirection]=\"'row'\" [gap]=\"'1rem'\">\n            <span class=\"chip\">Left</span>\n            <span class=\"chip\">Right</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'directivesDoc.ddEdgeFadeTitle' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'directivesDoc.ddEdgeFadeDescription' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'directivesDoc.usage' | transloco }}</h3>\n      <pre><code>&lt;div\n  ddEdgeFade\n  ddEdgeFadeTarget=\".scroll-area\"\n  ddEdgeFadeEdges=\"horizontal\"\n  [ddEdgeFadeBlur]=\"2\"\n  [ddEdgeFadeOpacity]=\"0.88\"\n  [ddEdgeFadeIntensity]=\"28\"\n&gt;\n  &lt;div class=\"scroll-area\"&gt;...&lt;/div&gt;\n&lt;/div&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'directivesDoc.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>ddEdgeFadeTarget</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeTarget' | transloco }}</li>\n        <li><strong>ddEdgeFadeEdges</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeEdges' | transloco }}</li>\n        <li><strong>ddEdgeFadeBlur</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeBlur' | transloco }}</li>\n        <li><strong>ddEdgeFadeOpacity</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeOpacity' | transloco }}</li>\n        <li><strong>ddEdgeFadeIntensity</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeIntensity' | transloco }}</li>\n        <li><strong>ddEdgeFadeSurface</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeSurface' | transloco }}</li>\n        <li><strong>ddEdgeFadeSize</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeSize' | transloco }}</li>\n        <li><strong>ddEdgeFadeInlineOffset / ddEdgeFadeBlockOffset</strong> \u2013 {{ 'directivesDoc.inputEdgeFadeOffsets' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'directivesDoc.examples' | transloco }}</h3>\n\n      <div class=\"edge-fade-examples\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.edgeFadeHorizontal' | transloco }}</p>\n          <div\n            class=\"edge-fade-demo\"\n            ddEdgeFade\n            ddEdgeFadeTarget=\".edge-fade-demo__scroller\"\n            ddEdgeFadeSurface=\"var(--dd-base-0)\"\n          >\n            <div class=\"edge-fade-demo__scroller\">\n              @for (item of edgeFadeItems; track item) {\n                <span class=\"chip\">{{ item }}</span>\n              }\n            </div>\n          </div>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'directivesDoc.edgeFadeVertical' | transloco }}</p>\n          <div\n            class=\"edge-fade-demo edge-fade-demo--vertical\"\n            ddEdgeFade\n            ddEdgeFadeTarget=\".edge-fade-demo__vertical-scroller\"\n            ddEdgeFadeEdges=\"vertical\"\n            ddEdgeFadeSurface=\"var(--dd-base-0)\"\n            [ddEdgeFadeSize]=\"34\"\n          >\n            <div class=\"edge-fade-demo__vertical-scroller\">\n              @for (item of verticalFadeItems; track item) {\n                <span class=\"chip\">{{ item }}</span>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item .demo-box{width:100%;min-height:60px;padding:12px;border-radius:8px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}.demo-container .examples-block .edge-fade-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.demo-container .examples-block .edge-fade-examples .example-item{padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px}.demo-container .examples-block .edge-fade-examples .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .edge-fade-examples .example-item .chip{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--dd-base-600);background:var(--dd-base-100);border:1px solid var(--dd-base-300)}.demo-container .examples-block .edge-fade-demo{width:100%;max-width:380px;padding:10px;background:var(--dd-base-0);border:1px dashed var(--dd-base-300);border-radius:8px;overflow:hidden}.demo-container .examples-block .edge-fade-demo__scroller{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:4px 0}.demo-container .examples-block .edge-fade-demo__scroller .chip{flex:0 0 auto}.demo-container .examples-block .edge-fade-demo--vertical{max-width:280px;height:152px}.demo-container .examples-block .edge-fade-demo__vertical-scroller{height:100%;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:thin;padding:0 4px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 
 class AccordionBlock {
@@ -7042,7 +7312,7 @@ class ProgressBarBlock {
         this.activeStyleTab.set(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section{margin-bottom:40px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".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-neo-ana-3) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-neo-paper);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-neo-ana-6)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-neo-ana-1)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, decorators: [{
             type: Component,
@@ -7055,7 +7325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         DuckDevProgressNeobrutalSlab,
                         DuckDevProgressNeobrutalStamp,
                         DuckDevProgressNeobrutalTicket,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section{margin-bottom:40px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"] }]
+                    ], 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: [".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-neo-ana-3) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-neo-paper);border:4px solid var(--dd-neo-ink);border-radius:0;box-shadow:8px 8px 0 var(--dd-neo-ana-6)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-neo-ink);box-shadow:10px 10px 0 var(--dd-neo-ana-1)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"] }]
         }] });
 
 class SpeakerBubbleBlock {
@@ -7239,8 +7509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-documentation-en-CEWt7DRN.mjs'),
-    ru: import('./duck-dev-lib-documentation-ru-LHt-QMeL.mjs'),
+    en: import('./duck-dev-lib-documentation-en-FazwFbO9.mjs'),
+    ru: import('./duck-dev-lib-documentation-ru-ztj5kIGA.mjs'),
 };
 
 /*