duck-dev-lib 0.0.75 → 0.0.77

package/fesm2022/duck-dev-lib.mjs

@@ -5956,6 +5956,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 class DuckDevSegmentNeobrutal {
     cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    host = inject(ElementRef);
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
     color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
     valueChange = output();
@@ -5967,15 +5969,22 @@ class DuckDevSegmentNeobrutal {
     indicatorPosition = 0;
     indicatorWidth = 0;
     segmentStyle = computed(() => this.getSegmentStyle(this.color()), { ...(ngDevMode ? { debugName: "segmentStyle" } : {}) });
+    resizeObserver = null;
+    intersectionObserver = null;
+    frameId = null;
+    settleFrameId = null;
     constructor() {
         afterNextRender(() => {
             this.rebuildButtons();
             if (!this.selectedValue && this.buttons.length > 0) {
                 this.selectedValue = this.buttons[0].value;
             }
-            this.updateIndicator(this.getSelectedIndex());
+            this.watchContainerSize();
+            this.watchHostVisibility();
+            this.scheduleIndicatorUpdate();
             this.cdr.markForCheck();
         });
+        this.destroyRef.onDestroy(() => this.destroyObservers());
     }
     ngAfterContentInit() {
         this.rebuildButtons();
@@ -5983,7 +5992,7 @@ class DuckDevSegmentNeobrutal {
         this.selectedValue = incoming ?? this.selectedValue;
         this.segmentButtons.changes.subscribe(() => {
             this.rebuildButtons();
-            setTimeout(() => this.updateIndicator(this.getSelectedIndex()));
+            this.scheduleIndicatorUpdate();
         });
     }
     selectButton(value, index) {
@@ -5994,7 +6003,7 @@ class DuckDevSegmentNeobrutal {
         this.selectedValue = value;
         this.valueChange.emit(value);
         this.ionChange.emit({ detail: { value } });
-        this.updateIndicator(index);
+        this.scheduleIndicatorUpdate(index);
     }
     rebuildButtons() {
         const btns = this.segmentButtons?.toArray() ?? [];
@@ -6014,6 +6023,63 @@ class DuckDevSegmentNeobrutal {
             const button = buttonElements[index];
             this.indicatorWidth = button.offsetWidth;
             this.indicatorPosition = button.offsetLeft;
+            this.cdr.markForCheck();
+        }
+    }
+    scheduleIndicatorUpdate(index = this.getSelectedIndex()) {
+        if (this.frameId !== null) {
+            cancelAnimationFrame(this.frameId);
+        }
+        this.frameId = requestAnimationFrame(() => {
+            this.updateIndicator(index);
+            this.frameId = requestAnimationFrame(() => {
+                this.updateIndicator(index);
+                this.frameId = null;
+            });
+        });
+    }
+    watchContainerSize() {
+        const container = this.buttonsContainer().nativeElement;
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleSettledIndicatorUpdate();
+        });
+        this.resizeObserver.observe(container);
+    }
+    watchHostVisibility() {
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry?.isIntersecting) {
+                this.scheduleSettledIndicatorUpdate();
+            }
+        });
+        this.intersectionObserver.observe(this.host.nativeElement);
+    }
+    scheduleSettledIndicatorUpdate() {
+        this.scheduleIndicatorUpdate();
+        if (this.settleFrameId !== null) {
+            cancelAnimationFrame(this.settleFrameId);
+        }
+        this.settleFrameId = requestAnimationFrame(() => {
+            this.settleFrameId = requestAnimationFrame(() => {
+                this.scheduleIndicatorUpdate();
+                this.settleFrameId = null;
+            });
+        });
+    }
+    destroyObservers() {
+        this.resizeObserver?.disconnect();
+        this.intersectionObserver?.disconnect();
+        if (this.frameId !== null) {
+            cancelAnimationFrame(this.frameId);
+        }
+        if (this.settleFrameId !== null) {
+            cancelAnimationFrame(this.settleFrameId);
         }
     }
     getSegmentStyle(color) {
@@ -6330,11 +6396,53 @@ class DuckDevBreadcrumbNeobrutal {
     color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
     isMobile = input(false, { ...(ngDevMode ? { debugName: "isMobile" } : {}), transform: booleanAttribute });
     navigate = output();
-    visibleItems = computed(() => this.items().slice(-6), { ...(ngDevMode ? { debugName: "visibleItems" } : {}) });
-    hasSecondRow = computed(() => this.visibleItems().length > 3, { ...(ngDevMode ? { debugName: "hasSecondRow" } : {}) });
+    listRef = viewChild('listEl', { ...(ngDevMode ? { debugName: "listRef" } : {}) });
+    visibleItems = computed(() => this.items(), { ...(ngDevMode ? { debugName: "visibleItems" } : {}) });
     breadcrumbStyle = computed(() => this.getPalette(this.color()), { ...(ngDevMode ? { debugName: "breadcrumbStyle" } : {}) });
     activePopoverIndex = signal(null, { ...(ngDevMode ? { debugName: "activePopoverIndex" } : {}) });
+    isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
+    dragStartX = 0;
+    scrollStartX = 0;
+    hasDragged = false;
+    destroyRef = inject(DestroyRef);
+    onMouseMove = (e) => {
+        const el = this.listRef()?.nativeElement;
+        if (!el)
+            return;
+        e.preventDefault();
+        const dx = e.clientX - this.dragStartX;
+        el.scrollLeft = this.scrollStartX - dx;
+        if (Math.abs(dx) > 3) {
+            this.hasDragged = true;
+        }
+    };
+    onMouseUp = () => {
+        this.isDragging.set(false);
+        document.removeEventListener('mousemove', this.onMouseMove);
+        document.removeEventListener('mouseup', this.onMouseUp);
+    };
+    onListMouseDown(e) {
+        const el = this.listRef()?.nativeElement;
+        if (!el || el.scrollWidth <= el.clientWidth)
+            return;
+        this.isDragging.set(true);
+        this.hasDragged = false;
+        this.dragStartX = e.clientX;
+        this.scrollStartX = el.scrollLeft;
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('mouseup', this.onMouseUp);
+    }
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('mousemove', this.onMouseMove);
+            document.removeEventListener('mouseup', this.onMouseUp);
+        });
+    }
     onNavigate(item, index) {
+        if (this.hasDragged) {
+            this.hasDragged = false;
+            return;
+        }
         if (!this.isMobile()) {
             this.navigate.emit(item);
             return;
@@ -6409,12 +6517,12 @@ 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" }, ngImport: i0, template: "<nav\n  class=\"neo-bc\"\n  [class.neo-bc--mobile]=\"isMobile()\"\n  [class.neo-bc--two-rows]=\"hasSecondRow()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n>\n  <ol class=\"neo-bc__list\">\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li\n        class=\"neo-bc__item\"\n        animate.enter=\"neo-bc__item--enter\"\n        animate.leave=\"neo-bc__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index)\"\n            (keydown.enter)=\"onCurrentClick($index)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</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</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-row-gap: 8px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc(var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap));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:10px 14px;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:height .2s ease,padding .2s ease,box-shadow .2s ease}.neo-bc--two-rows{height:calc(var(--neo-bc-row-height) + var(--neo-bc-row-height) + var(--neo-bc-row-gap) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y))}.neo-bc__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:var(--neo-bc-row-height);align-items:center;align-content:center;height:100%;row-gap:var(--neo-bc-row-gap);margin:0;padding:0;list-style:none}.neo-bc__item{position:relative;display:flex;align-items:center;width:100%;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;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;flex:1 1 auto;min-width:0;max-width:calc(100% - var(--neo-bc-arrow-space));padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:manipulation}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-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;flex:1 1 auto;min-width:0;max-width:calc(100% - var(--neo-bc-arrow-space));touch-action:manipulation}.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__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);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:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{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-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;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;padding:8px;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__popover{max-width:min(260px,100vw - 24px);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;padding:6px}.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: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n  class=\"neo-bc\"\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li\n        class=\"neo-bc__item\"\n        animate.enter=\"neo-bc__item--enter\"\n        animate.leave=\"neo-bc__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index)\"\n            (keydown.enter)=\"onCurrentClick($index)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</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</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );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:10px 14px;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{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:100%;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;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(--dd-neo-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;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__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);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:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{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-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;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;padding:8px;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__popover{max-width:min(260px,100vw - 24px);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;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 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  [class.neo-bc--mobile]=\"isMobile()\"\n  [class.neo-bc--two-rows]=\"hasSecondRow()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n>\n  <ol class=\"neo-bc__list\">\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li\n        class=\"neo-bc__item\"\n        animate.enter=\"neo-bc__item--enter\"\n        animate.leave=\"neo-bc__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index)\"\n            (keydown.enter)=\"onCurrentClick($index)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</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</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-row-gap: 8px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc(var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap));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:10px 14px;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:height .2s ease,padding .2s ease,box-shadow .2s ease}.neo-bc--two-rows{height:calc(var(--neo-bc-row-height) + var(--neo-bc-row-height) + var(--neo-bc-row-gap) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y))}.neo-bc__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:var(--neo-bc-row-height);align-items:center;align-content:center;height:100%;row-gap:var(--neo-bc-row-gap);margin:0;padding:0;list-style:none}.neo-bc__item{position:relative;display:flex;align-items:center;width:100%;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;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;flex:1 1 auto;min-width:0;max-width:calc(100% - var(--neo-bc-arrow-space));padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:manipulation}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-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;flex:1 1 auto;min-width:0;max-width:calc(100% - var(--neo-bc-arrow-space));touch-action:manipulation}.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__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);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:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{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-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;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;padding:8px;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__popover{max-width:min(260px,100vw - 24px);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;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"] }]
-        }], 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"] }] } });
+            args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n  class=\"neo-bc\"\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li\n        class=\"neo-bc__item\"\n        animate.enter=\"neo-bc__item--enter\"\n        animate.leave=\"neo-bc__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index)\"\n            (keydown.enter)=\"onCurrentClick($index)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</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</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}: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-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );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:10px 14px;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{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:100%;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;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(--dd-neo-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;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__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);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:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{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-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;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;padding:8px;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__popover{max-width:min(260px,100vw - 24px);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;padding:6px}.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"] }], listRef: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }] } });
 
 class BreadcrumbBlock {
     colorViolet = AccentEnumColor.Violet;
@@ -6432,12 +6540,35 @@ class BreadcrumbBlock {
         { label: 'Navigation', url: '/navigation' },
         { label: 'Breadcrumb' },
     ];
+    sampleLabels = [
+        'Settings', 'Profile', 'Dashboard', 'Analytics', 'Reports', 'Users', 'Permissions',
+    ];
+    interactiveItems = signal([
+        { label: 'Home', url: '/' },
+        { label: 'Components', url: '/components' },
+        { label: 'Breadcrumb' },
+    ], { ...(ngDevMode ? { debugName: "interactiveItems" } : {}) });
     lastNavigated = signal('', { ...(ngDevMode ? { debugName: "lastNavigated" } : {}) });
     onNavigate(item) {
         this.lastNavigated.set(item.label);
     }
+    addBreadcrumb() {
+        const current = this.interactiveItems();
+        const label = this.sampleLabels[current.length % this.sampleLabels.length];
+        const updated = current.map(item => ({ ...item, url: item.url || `/${item.label.toLowerCase()}` }));
+        updated.push({ label });
+        this.interactiveItems.set(updated);
+    }
+    removeBreadcrumb() {
+        const current = this.interactiveItems();
+        if (current.length <= 1)
+            return;
+        const updated = current.slice(0, -1);
+        updated[updated.length - 1] = { label: updated[updated.length - 1].label };
+        this.interactiveItems.set(updated);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-breadcrumb-classic\n  [items]=\"breadcrumbs\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;\n\n&lt;dd-breadcrumb-neobrutal\n  [items]=\"breadcrumbs\"\n  [color]=\"colorViolet\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n        <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n          <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"longItems\"\n            separator=\">\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n          <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorViolet\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"longItems\"\n            [color]=\"colorOrange\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorDark\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      @if (lastNavigated()) {\n        <div class=\"state-hint state-hint--neobrutal\">\n          <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n          <b>{{ lastNavigated() }}</b>\n        </div>\n      }\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevBreadcrumbClassic, selector: "dd-breadcrumb-classic", inputs: ["items", "separator"], outputs: ["navigate"] }, { kind: "component", type: DuckDevBreadcrumbNeobrutal, selector: "dd-breadcrumb-neobrutal", inputs: ["items", "color", "isMobile"], outputs: ["navigate"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BreadcrumbBlock, isStandalone: true, selector: "app-breadcrumb-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-breadcrumb-classic\n  [items]=\"breadcrumbs\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;\n\n&lt;dd-breadcrumb-neobrutal\n  [items]=\"breadcrumbs\"\n  [color]=\"colorViolet\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n        <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n          <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"longItems\"\n            separator=\">\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n          <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorViolet\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"longItems\"\n            [color]=\"colorOrange\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorDark\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      @if (lastNavigated()) {\n        <div class=\"state-hint state-hint--neobrutal\">\n          <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n          <b>{{ lastNavigated() }}</b>\n        </div>\n      }\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.interactive.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.interactive.description' | transloco }}</p>\n\n    <div class=\"interactive-controls\">\n      <button class=\"interactive-btn interactive-btn--add\" type=\"button\" (click)=\"addBreadcrumb()\">\n        + {{ 'breadcrumbDoc.interactive.add' | transloco }}\n      </button>\n      <button\n        class=\"interactive-btn interactive-btn--remove\"\n        type=\"button\"\n        [disabled]=\"interactiveItems().length <= 1\"\n        (click)=\"removeBreadcrumb()\"\n      >\n        \u2212 {{ 'breadcrumbDoc.interactive.remove' | transloco }}\n      </button>\n      <span class=\"interactive-count\">\n        {{ 'breadcrumbDoc.interactive.count' | transloco }}: {{ interactiveItems().length }}\n      </span>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item example-item--neobrutal example-item--wide\">\n        <dd-breadcrumb-neobrutal\n          [items]=\"interactiveItems()\"\n          [color]=\"colorViolet\"\n          (navigate)=\"onNavigate($event)\"\n        />\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.demo-container .interactive-controls{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .interactive-btn{padding:8px 16px;border:3px solid var(--dd-neo-ink);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.demo-container .interactive-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--dd-neo-ink)}.demo-container .interactive-btn:disabled{opacity:.4;cursor:not-allowed}.demo-container .interactive-btn--add{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.demo-container .interactive-btn--remove{background:var(--dd-base-accent-pink);color:var(--dd-base-0)}.demo-container .interactive-count{padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.demo-container .example-item--wide{flex:1 1 100%;min-width:100%}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevBreadcrumbClassic, selector: "dd-breadcrumb-classic", inputs: ["items", "separator"], outputs: ["navigate"] }, { kind: "component", type: DuckDevBreadcrumbNeobrutal, selector: "dd-breadcrumb-neobrutal", inputs: ["items", "color", "isMobile"], outputs: ["navigate"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BreadcrumbBlock, decorators: [{
             type: Component,
@@ -6446,7 +6577,290 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         DuckDevCardSection,
                         DuckDevBreadcrumbClassic,
                         DuckDevBreadcrumbNeobrutal,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-breadcrumb-classic\n  [items]=\"breadcrumbs\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;\n\n&lt;dd-breadcrumb-neobrutal\n  [items]=\"breadcrumbs\"\n  [color]=\"colorViolet\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n        <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n          <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"longItems\"\n            separator=\">\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n          <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorViolet\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"longItems\"\n            [color]=\"colorOrange\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorDark\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      @if (lastNavigated()) {\n        <div class=\"state-hint state-hint--neobrutal\">\n          <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n          <b>{{ lastNavigated() }}</b>\n        </div>\n      }\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'breadcrumbDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'breadcrumbDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-breadcrumb-classic\n  [items]=\"breadcrumbs\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;\n\n&lt;dd-breadcrumb-neobrutal\n  [items]=\"breadcrumbs\"\n  [color]=\"colorViolet\"\n  (navigate)=\"onNavigate($event)\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'breadcrumbDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.items' | transloco }}</li>\n        <li><strong>separator</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.separator' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>navigate</strong> \u2014 {{ 'breadcrumbDoc.inputsDesc.navigate' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'breadcrumbDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classic' | transloco }}</p>\n          <dd-breadcrumb-classic [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.classicLong' | transloco }}</p>\n          <dd-breadcrumb-classic\n            [items]=\"longItems\"\n            separator=\">\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalWhite' | transloco }}</p>\n          <dd-breadcrumb-neobrutal [items]=\"basicItems\" (navigate)=\"onNavigate($event)\" />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalViolet' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorViolet\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalOrange' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"longItems\"\n            [color]=\"colorOrange\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'breadcrumbDoc.examples.neobrutalDark' | transloco }}</p>\n          <dd-breadcrumb-neobrutal\n            [items]=\"basicItems\"\n            [color]=\"colorDark\"\n            (navigate)=\"onNavigate($event)\"\n          />\n        </div>\n      </div>\n\n      @if (lastNavigated()) {\n        <div class=\"state-hint state-hint--neobrutal\">\n          <span>{{ 'breadcrumbDoc.labels.navigated' | transloco }}: </span>\n          <b>{{ lastNavigated() }}</b>\n        </div>\n      }\n    </div>\n  </dd-card-section>\n\n  <dd-card-section>\n    <h2>{{ 'breadcrumbDoc.interactive.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'breadcrumbDoc.interactive.description' | transloco }}</p>\n\n    <div class=\"interactive-controls\">\n      <button class=\"interactive-btn interactive-btn--add\" type=\"button\" (click)=\"addBreadcrumb()\">\n        + {{ 'breadcrumbDoc.interactive.add' | transloco }}\n      </button>\n      <button\n        class=\"interactive-btn interactive-btn--remove\"\n        type=\"button\"\n        [disabled]=\"interactiveItems().length <= 1\"\n        (click)=\"removeBreadcrumb()\"\n      >\n        \u2212 {{ 'breadcrumbDoc.interactive.remove' | transloco }}\n      </button>\n      <span class=\"interactive-count\">\n        {{ 'breadcrumbDoc.interactive.count' | transloco }}: {{ interactiveItems().length }}\n      </span>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item example-item--neobrutal example-item--wide\">\n        <dd-breadcrumb-neobrutal\n          [items]=\"interactiveItems()\"\n          [color]=\"colorViolet\"\n          (navigate)=\"onNavigate($event)\"\n        />\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .state-hint--neobrutal{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.demo-container .interactive-controls{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-container .interactive-btn{padding:8px 16px;border:3px solid var(--dd-neo-ink);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.demo-container .interactive-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--dd-neo-ink)}.demo-container .interactive-btn:disabled{opacity:.4;cursor:not-allowed}.demo-container .interactive-btn--add{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.demo-container .interactive-btn--remove{background:var(--dd-base-accent-pink);color:var(--dd-base-0)}.demo-container .interactive-count{padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.demo-container .example-item--wide{flex:1 1 100%;min-width:100%}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+        }] });
+
+class DuckDevSelectorOption {
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
+    templateRef = viewChild.required('contentTpl');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSelectorOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSelectorOption, isStandalone: true, selector: "duck-dev-selector-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #contentTpl>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, styles: [":host{display:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSelectorOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-selector-option', imports: [], template: `
+    <ng-template #contentTpl>
+      <ng-content />
+    </ng-template>
+  `, styles: [":host{display:none}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
+
+function getNeobrutalSelectorStyle(color) {
+    switch (color) {
+        case AccentEnumColor.Violet:
+            return {
+                '--neo-selector-surface': 'var(--dd-base-secondary)',
+                '--neo-selector-active': 'color-mix(in srgb, var(--dd-base-secondary) 78%, var(--dd-base-0))',
+                '--neo-selector-text': 'var(--dd-base-0)',
+                '--neo-selector-shadow': 'var(--dd-base-accent-blue)',
+                '--neo-selector-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.Orange:
+            return {
+                '--neo-selector-surface': 'var(--dd-base-accent-orange)',
+                '--neo-selector-active': 'color-mix(in srgb, var(--dd-base-accent-yellow) 68%, var(--dd-base-0))',
+                '--neo-selector-text': 'var(--dd-base-600)',
+                '--neo-selector-shadow': 'var(--dd-base-accent-pink)',
+                '--neo-selector-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.Gray:
+            return {
+                '--neo-selector-surface': 'var(--dd-base-200)',
+                '--neo-selector-active': 'var(--dd-base-0)',
+                '--neo-selector-text': 'var(--dd-base-600)',
+                '--neo-selector-shadow': 'var(--dd-base-accent-blue)',
+                '--neo-selector-accent': 'var(--dd-base-accent-orange)',
+            };
+        case AccentEnumColor.Dark:
+            return {
+                '--neo-selector-surface': 'var(--dd-base-600)',
+                '--neo-selector-active': 'color-mix(in srgb, var(--dd-base-600) 84%, var(--dd-base-400))',
+                '--neo-selector-text': 'var(--dd-base-0)',
+                '--neo-selector-shadow': 'var(--dd-base-accent-orange)',
+                '--neo-selector-accent': 'var(--dd-base-accent-yellow)',
+            };
+        case AccentEnumColor.White:
+        default:
+            return {
+                '--neo-selector-surface': 'var(--dd-base-0)',
+                '--neo-selector-active': 'var(--dd-base-accent-yellow)',
+                '--neo-selector-text': 'var(--dd-base-600)',
+                '--neo-selector-shadow': 'var(--dd-base-600)',
+                '--neo-selector-accent': 'var(--dd-base-accent-orange)',
+            };
+    }
+}
+
+class DuckDevSelectorDrum {
+    destroyRef = inject(DestroyRef);
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
+    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    showHints = input(true, { ...(ngDevMode ? { debugName: "showHints" } : {}) });
+    hintAlign = input('center', { ...(ngDevMode ? { debugName: "hintAlign" } : {}) });
+    valueChange = output();
+    ionChange = output();
+    options = contentChildren(DuckDevSelectorOption, { ...(ngDevMode ? { debugName: "options" } : {}) });
+    drumEl = viewChild.required('drum');
+    selectorStyle = computed(() => getNeobrutalSelectorStyle(this.color()), { ...(ngDevMode ? { debugName: "selectorStyle" } : {}) });
+    optionsList = computed(() => {
+        return this.options().map((opt) => ({
+            value: opt.value(),
+            contentId: opt.contentId(),
+            template: opt.templateRef(),
+        }));
+    }, { ...(ngDevMode ? { debugName: "optionsList" } : {}) });
+    faceCount = computed(() => Math.max(3, this.optionsList().length), { ...(ngDevMode ? { debugName: "faceCount" } : {}) });
+    faceAngle = computed(() => 360 / this.faceCount(), { ...(ngDevMode ? { debugName: "faceAngle" } : {}) });
+    radius = computed(() => {
+        const faceHeight = 70;
+        return faceHeight / (2 * Math.tan(Math.PI / this.faceCount()));
+    }, { ...(ngDevMode ? { debugName: "radius" } : {}) });
+    currentAngle = signal(0, { ...(ngDevMode ? { debugName: "currentAngle" } : {}) });
+    isDragging = signal(false, { ...(ngDevMode ? { debugName: "isDragging" } : {}) });
+    isAnimating = signal(false, { ...(ngDevMode ? { debugName: "isAnimating" } : {}) });
+    isIdle = computed(() => !this.isDragging() && !this.isAnimating(), { ...(ngDevMode ? { debugName: "isIdle" } : {}) });
+    startY = 0;
+    startAngle = 0;
+    lastY = 0;
+    lastTime = 0;
+    velocity = 0;
+    animationId = null;
+    boundPointerMove = this.onPointerMove.bind(this);
+    boundPointerUp = this.onPointerUp.bind(this);
+    constructor() {
+        afterNextRender(() => {
+            this.syncAngleToValue();
+        });
+        this.destroyRef.onDestroy(() => {
+            if (this.animationId !== null) {
+                cancelAnimationFrame(this.animationId);
+            }
+            document.removeEventListener('pointermove', this.boundPointerMove);
+            document.removeEventListener('pointerup', this.boundPointerUp);
+        });
+    }
+    ngAfterContentInit() {
+        this.syncAngleToValue();
+    }
+    onStepPrev() {
+        if (this.isAnimating())
+            return;
+        this.isAnimating.set(true);
+        const angle = this.faceAngle();
+        this.settleToAngle(this.currentAngle() - angle);
+    }
+    onStepNext() {
+        if (this.isAnimating())
+            return;
+        this.isAnimating.set(true);
+        const angle = this.faceAngle();
+        this.settleToAngle(this.currentAngle() + angle);
+    }
+    onPointerDown(event) {
+        event.preventDefault();
+        if (this.animationId !== null) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+        this.isDragging.set(true);
+        this.isAnimating.set(false);
+        this.startY = event.clientY;
+        this.startAngle = this.currentAngle();
+        this.lastY = event.clientY;
+        this.lastTime = performance.now();
+        this.velocity = 0;
+        document.addEventListener('pointermove', this.boundPointerMove);
+        document.addEventListener('pointerup', this.boundPointerUp);
+    }
+    onPointerMove(event) {
+        const deltaY = event.clientY - this.startY;
+        const sensitivity = 0.5;
+        const newAngle = this.startAngle + deltaY * sensitivity;
+        const now = performance.now();
+        const dt = now - this.lastTime;
+        if (dt > 0) {
+            this.velocity = (event.clientY - this.lastY) / dt;
+        }
+        this.lastY = event.clientY;
+        this.lastTime = now;
+        this.currentAngle.set(newAngle);
+    }
+    onPointerUp() {
+        document.removeEventListener('pointermove', this.boundPointerMove);
+        document.removeEventListener('pointerup', this.boundPointerUp);
+        this.isDragging.set(false);
+        this.isAnimating.set(true);
+        // Convert pointer velocity (px/ms) to angular velocity (deg/frame at 60fps)
+        const angularVelocity = this.velocity * 0.5 * (1000 / 60);
+        this.spinWithFriction(angularVelocity);
+    }
+    spinWithFriction(angularVelocity) {
+        const friction = 0.985;
+        const snapThreshold = 0.15;
+        let vel = angularVelocity;
+        let lastTime = performance.now();
+        const step = (now) => {
+            const dt = (now - lastTime) / 16.667; // normalize to 60fps
+            lastTime = now;
+            vel *= Math.pow(friction, dt);
+            this.currentAngle.update((a) => a + vel * dt);
+            if (Math.abs(vel) > snapThreshold) {
+                this.animationId = requestAnimationFrame(step);
+            }
+            else {
+                // Velocity died — settle to nearest face
+                const angle = this.faceAngle();
+                const targetSnap = Math.round(this.currentAngle() / angle) * angle;
+                this.settleToAngle(targetSnap);
+            }
+        };
+        this.animationId = requestAnimationFrame(step);
+    }
+    settleToAngle(target) {
+        const start = this.currentAngle();
+        const diff = target - start;
+        // If already very close, just set it
+        if (Math.abs(diff) < 0.5) {
+            this.currentAngle.set(target);
+            this.isAnimating.set(false);
+            this.emitCurrentValue();
+            return;
+        }
+        // Spring-like settle: longer for bigger gaps, min 300ms, max 700ms
+        const duration = Math.min(700, Math.max(300, Math.abs(diff) * 8));
+        const startTime = performance.now();
+        const step = (now) => {
+            const elapsed = now - startTime;
+            const t = Math.min(elapsed / duration, 1);
+            // Smooth ease-out with slight overshoot for natural feel
+            const eased = 1 - Math.pow(1 - t, 2.5);
+            this.currentAngle.set(start + diff * eased);
+            if (t < 1) {
+                this.animationId = requestAnimationFrame(step);
+            }
+            else {
+                this.animationId = null;
+                this.currentAngle.set(target);
+                this.isAnimating.set(false);
+                this.emitCurrentValue();
+            }
+        };
+        this.animationId = requestAnimationFrame(step);
+    }
+    emitCurrentValue() {
+        const angle = this.faceAngle();
+        const opts = this.optionsList();
+        if (opts.length === 0)
+            return;
+        const normalizedAngle = ((this.currentAngle() % 360) + 360) % 360;
+        const index = Math.round(normalizedAngle / angle) % opts.length;
+        const value = opts[index].value;
+        this.valueChange.emit(value);
+        this.ionChange.emit({ detail: { value } });
+    }
+    syncAngleToValue() {
+        const incoming = this.value();
+        const opts = this.optionsList();
+        if (!incoming || opts.length === 0)
+            return;
+        const index = opts.findIndex((o) => o.value === incoming);
+        if (index >= 0) {
+            this.currentAngle.set(index * this.faceAngle());
+        }
+    }
+    getFaceTransform(index) {
+        const angle = this.faceAngle();
+        const r = this.radius();
+        return `rotateX(${index * angle}deg) translateZ(${r}px)`;
+    }
+    isActiveFace(index) {
+        const angle = this.faceAngle();
+        const opts = this.optionsList();
+        if (opts.length === 0)
+            return false;
+        const normalizedAngle = ((this.currentAngle() % 360) + 360) % 360;
+        const activeIndex = Math.round(normalizedAngle / angle) % opts.length;
+        return activeIndex === index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSelectorDrum, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSelectorDrum, isStandalone: true, selector: "duck-dev-selector-drum", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showHints: { classPropertyName: "showHints", publicName: "showHints", isSignal: true, isRequired: false, transformFunction: null }, hintAlign: { classPropertyName: "hintAlign", publicName: "hintAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "options", predicate: DuckDevSelectorOption, isSignal: true }], viewQueries: [{ propertyName: "drumEl", first: true, predicate: ["drum"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"dd-drum\"\n  [class.dd-drum--hints-start]=\"hintAlign() === 'start'\"\n  [class.dd-drum--hints-end]=\"hintAlign() === 'end'\"\n  [ngStyle]=\"selectorStyle()\"\n>\n  @if (showHints()) {\n    <button class=\"dd-drum__hint dd-drum__hint--top\" type=\"button\" (click)=\"onStepPrev()\">\n      &#9650;\n    </button>\n  }\n\n  <div class=\"dd-drum__scene\">\n    <div\n      class=\"dd-drum__prism\"\n      [class.dd-drum__prism--idle]=\"isIdle()\"\n      #drum\n      [style.transform]=\"'rotateX(' + -currentAngle() + 'deg)'\"\n      (pointerdown)=\"onPointerDown($event)\"\n    >\n      @for (opt of optionsList(); track opt.value; let i = $index) {\n        <div\n          class=\"dd-drum__face\"\n          [class.dd-drum__face--active]=\"isActiveFace(i)\"\n          [style.transform]=\"getFaceTransform(i)\"\n        >\n          <span class=\"dd-drum__face-copy\">\n            <ng-container *ngTemplateOutlet=\"opt.template\" />\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (showHints()) {\n    <button class=\"dd-drum__hint dd-drum__hint--bottom\" type=\"button\" (click)=\"onStepNext()\">\n      &#9660;\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.dd-drum{--neo-selector-surface: var(--dd-base-0);--neo-selector-active: var(--dd-base-accent-yellow);--neo-selector-text: var(--dd-base-600);--neo-selector-shadow: var(--dd-base-600);--neo-selector-accent: var(--dd-base-accent-orange);display:inline-flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.dd-drum--hints-start{align-items:flex-start}.dd-drum--hints-end{align-items:flex-end}.dd-drum__hint{font-size:14px;color:var(--neo-selector-shadow);opacity:.35;transition:opacity .3s ease,transform .2s ease;line-height:1;background:none;border:none;padding:4px 12px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}.dd-drum__hint:hover{opacity:.85}.dd-drum__hint:active{opacity:1}.dd-drum__hint--top{animation:hint-bob-up 2s ease-in-out infinite}.dd-drum__hint--top:hover{animation:none;transform:translateY(-2px)}.dd-drum__hint--bottom{animation:hint-bob-down 2s ease-in-out infinite}.dd-drum__hint--bottom:hover{animation:none;transform:translateY(2px)}@keyframes hint-bob-up{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes hint-bob-down{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.dd-drum:hover .dd-drum__hint{opacity:.6}.dd-drum__scene{perspective:600px;perspective-origin:center center;width:220px;height:140px;display:flex;align-items:center;justify-content:center;cursor:grab}.dd-drum__scene:active{cursor:grabbing}.dd-drum__prism{width:100%;height:70px;position:relative;transform-style:preserve-3d;transition:transform .15s ease}.dd-drum__prism--idle{animation:drum-idle 3.5s ease-in-out infinite}.dd-drum__scene:hover .dd-drum__prism--idle{animation:drum-hover 1.8s ease-in-out infinite}@keyframes drum-idle{0%,to{transform:rotateY(0)}33%{transform:rotateY(1.5deg)}66%{transform:rotateY(-1.5deg)}}@keyframes drum-hover{0%,to{transform:rotateY(0) rotateX(0)}25%{transform:rotateY(2.5deg) rotateX(-4deg)}75%{transform:rotateY(-2.5deg) rotateX(4deg)}}.dd-drum__face{position:absolute;width:100%;height:70px;top:0;left:0;display:flex;align-items:center;justify-content:center;border:4px solid var(--dd-neo-ink);background:var(--neo-selector-surface);box-shadow:4px 4px 0 var(--neo-selector-shadow);backface-visibility:hidden;box-sizing:border-box;transition:background .2s ease}.dd-drum__face--active{background:var(--neo-selector-active)}.dd-drum__face-copy{display:inline-flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:900;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;color:var(--neo-selector-text)}@media(max-width:640px){.dd-drum__scene{width:180px;height:120px}.dd-drum__prism,.dd-drum__face{height:60px}.dd-drum__face-copy{font-size:.76rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSelectorDrum, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-selector-drum', imports: [NgStyle, NgTemplateOutlet], template: "<div\n  class=\"dd-drum\"\n  [class.dd-drum--hints-start]=\"hintAlign() === 'start'\"\n  [class.dd-drum--hints-end]=\"hintAlign() === 'end'\"\n  [ngStyle]=\"selectorStyle()\"\n>\n  @if (showHints()) {\n    <button class=\"dd-drum__hint dd-drum__hint--top\" type=\"button\" (click)=\"onStepPrev()\">\n      &#9650;\n    </button>\n  }\n\n  <div class=\"dd-drum__scene\">\n    <div\n      class=\"dd-drum__prism\"\n      [class.dd-drum__prism--idle]=\"isIdle()\"\n      #drum\n      [style.transform]=\"'rotateX(' + -currentAngle() + 'deg)'\"\n      (pointerdown)=\"onPointerDown($event)\"\n    >\n      @for (opt of optionsList(); track opt.value; let i = $index) {\n        <div\n          class=\"dd-drum__face\"\n          [class.dd-drum__face--active]=\"isActiveFace(i)\"\n          [style.transform]=\"getFaceTransform(i)\"\n        >\n          <span class=\"dd-drum__face-copy\">\n            <ng-container *ngTemplateOutlet=\"opt.template\" />\n          </span>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (showHints()) {\n    <button class=\"dd-drum__hint dd-drum__hint--bottom\" type=\"button\" (click)=\"onStepNext()\">\n      &#9660;\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}.dd-drum{--neo-selector-surface: var(--dd-base-0);--neo-selector-active: var(--dd-base-accent-yellow);--neo-selector-text: var(--dd-base-600);--neo-selector-shadow: var(--dd-base-600);--neo-selector-accent: var(--dd-base-accent-orange);display:inline-flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.dd-drum--hints-start{align-items:flex-start}.dd-drum--hints-end{align-items:flex-end}.dd-drum__hint{font-size:14px;color:var(--neo-selector-shadow);opacity:.35;transition:opacity .3s ease,transform .2s ease;line-height:1;background:none;border:none;padding:4px 12px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent}.dd-drum__hint:hover{opacity:.85}.dd-drum__hint:active{opacity:1}.dd-drum__hint--top{animation:hint-bob-up 2s ease-in-out infinite}.dd-drum__hint--top:hover{animation:none;transform:translateY(-2px)}.dd-drum__hint--bottom{animation:hint-bob-down 2s ease-in-out infinite}.dd-drum__hint--bottom:hover{animation:none;transform:translateY(2px)}@keyframes hint-bob-up{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes hint-bob-down{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.dd-drum:hover .dd-drum__hint{opacity:.6}.dd-drum__scene{perspective:600px;perspective-origin:center center;width:220px;height:140px;display:flex;align-items:center;justify-content:center;cursor:grab}.dd-drum__scene:active{cursor:grabbing}.dd-drum__prism{width:100%;height:70px;position:relative;transform-style:preserve-3d;transition:transform .15s ease}.dd-drum__prism--idle{animation:drum-idle 3.5s ease-in-out infinite}.dd-drum__scene:hover .dd-drum__prism--idle{animation:drum-hover 1.8s ease-in-out infinite}@keyframes drum-idle{0%,to{transform:rotateY(0)}33%{transform:rotateY(1.5deg)}66%{transform:rotateY(-1.5deg)}}@keyframes drum-hover{0%,to{transform:rotateY(0) rotateX(0)}25%{transform:rotateY(2.5deg) rotateX(-4deg)}75%{transform:rotateY(-2.5deg) rotateX(4deg)}}.dd-drum__face{position:absolute;width:100%;height:70px;top:0;left:0;display:flex;align-items:center;justify-content:center;border:4px solid var(--dd-neo-ink);background:var(--neo-selector-surface);box-shadow:4px 4px 0 var(--neo-selector-shadow);backface-visibility:hidden;box-sizing:border-box;transition:background .2s ease}.dd-drum__face--active{background:var(--neo-selector-active)}.dd-drum__face-copy{display:inline-flex;align-items:center;justify-content:center;font-size:.88rem;font-weight:900;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;color:var(--neo-selector-text)}@media(max-width:640px){.dd-drum__scene{width:180px;height:120px}.dd-drum__prism,.dd-drum__face{height:60px}.dd-drum__face-copy{font-size:.76rem;letter-spacing:.11em}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showHints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHints", required: false }] }], hintAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintAlign", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DuckDevSelectorOption), { isSignal: true }] }], drumEl: [{ type: i0.ViewChild, args: ['drum', { isSignal: true }] }] } });
+
+class SelectorBlock {
+    drumSelected = signal('rush', { ...(ngDevMode ? { debugName: "drumSelected" } : {}) });
+    lastEvent = signal('', { ...(ngDevMode ? { debugName: "lastEvent" } : {}) });
+    colorViolet = AccentEnumColor.Violet;
+    colorOrange = AccentEnumColor.Orange;
+    colorDark = AccentEnumColor.Dark;
+    colorGray = AccentEnumColor.Gray;
+    onIonChange(e) {
+        this.lastEvent.set(e.detail.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SelectorBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SelectorBlock, isStandalone: true, selector: "app-selector-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'selectorDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'selectorDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'selectorDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'selectorDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-selector-drum [value]=\"selected()\" (valueChange)=\"selected.set($event)\"&gt;\n  &lt;duck-dev-selector-option value=\"rush\"&gt;Rush&lt;/duck-dev-selector-option&gt;\n  &lt;duck-dev-selector-option value=\"strategy\"&gt;Strategy&lt;/duck-dev-selector-option&gt;\n  &lt;duck-dev-selector-option value=\"rpg\"&gt;RPG&lt;/duck-dev-selector-option&gt;\n&lt;/duck-dev-selector-drum&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'selectorDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'selectorDoc.inputsDesc.value' | transloco }}</li>\n        <li>\n          <strong>valueChange</strong> \u2014 {{ 'selectorDoc.inputsDesc.valueChange' | transloco }}\n        </li>\n        <li><strong>ionChange</strong> \u2014 {{ 'selectorDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'selectorDoc.inputsDesc.color' | transloco }}</li>\n        <li>\n          <strong>duck-dev-selector-option[value]</strong> \u2014\n          {{ 'selectorDoc.inputsDesc.optionValue' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'selectorDoc.drum.title' | transloco }}</h3>\n      <p class=\"description\">{{ 'selectorDoc.drum.description' | transloco }}</p>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'selectorDoc.examples.drumWhite' | transloco }}</p>\n          <duck-dev-selector-drum\n            [value]=\"drumSelected()\"\n            (valueChange)=\"drumSelected.set($event)\"\n            (ionChange)=\"onIonChange($event)\"\n          >\n            <duck-dev-selector-option value=\"rush\">{{\n              'selectorDoc.labels.rush' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"strategy\">{{\n              'selectorDoc.labels.strategy' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"rpg\">{{\n              'selectorDoc.labels.rpg' | transloco\n            }}</duck-dev-selector-option>\n          </duck-dev-selector-drum>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'selectorDoc.labels.selected' | transloco }}: </span>\n            <b>{{ drumSelected() }}</b>\n            <span class=\"divider\">|</span>\n            <span\n              >ionChange: <b>{{ lastEvent() }}</b></span\n            >\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'selectorDoc.examples.drumViolet' | transloco }}</p>\n          <duck-dev-selector-drum [value]=\"'rush'\" [color]=\"colorViolet\">\n            <duck-dev-selector-option value=\"rush\">{{\n              'selectorDoc.labels.rush' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"strategy\">{{\n              'selectorDoc.labels.strategy' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"rpg\">{{\n              'selectorDoc.labels.rpg' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"arcade\">{{\n              'selectorDoc.labels.arcade' | transloco\n            }}</duck-dev-selector-option>\n          </duck-dev-selector-drum>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'selectorDoc.examples.drumOrange' | transloco }}</p>\n          <duck-dev-selector-drum [value]=\"'draft'\" [color]=\"colorOrange\">\n            <duck-dev-selector-option value=\"draft\">{{\n              'selectorDoc.labels.draft' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"launch\">{{\n              'selectorDoc.labels.launch' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"archive\">{{\n              'selectorDoc.labels.archive' | transloco\n            }}</duck-dev-selector-option>\n          </duck-dev-selector-drum>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'selectorDoc.examples.drumDark' | transloco }}</p>\n          <duck-dev-selector-drum [value]=\"'strategy'\" [color]=\"colorDark\">\n            <duck-dev-selector-option value=\"strategy\">{{\n              'selectorDoc.labels.strategy' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"research\">{{\n              'selectorDoc.labels.research' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"prototype\">{{\n              'selectorDoc.labels.prototype' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"validate\">{{\n              'selectorDoc.labels.validate' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"deliver\">{{\n              'selectorDoc.labels.deliver' | transloco\n            }}</duck-dev-selector-option>\n          </duck-dev-selector-drum>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row.example-row--roadsign{align-items:flex-start}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items: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:left;width:100%}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSelectorDrum, selector: "duck-dev-selector-drum", inputs: ["value", "color", "showHints", "hintAlign"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSelectorOption, selector: "duck-dev-selector-option", inputs: ["value", "contentId"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SelectorBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-selector-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSelectorDrum, DuckDevSelectorOption], template: "<div class=\"demo-container\">\n  <h1>{{ 'selectorDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'selectorDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'selectorDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'selectorDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-selector-drum [value]=\"selected()\" (valueChange)=\"selected.set($event)\"&gt;\n  &lt;duck-dev-selector-option value=\"rush\"&gt;Rush&lt;/duck-dev-selector-option&gt;\n  &lt;duck-dev-selector-option value=\"strategy\"&gt;Strategy&lt;/duck-dev-selector-option&gt;\n  &lt;duck-dev-selector-option value=\"rpg\"&gt;RPG&lt;/duck-dev-selector-option&gt;\n&lt;/duck-dev-selector-drum&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'selectorDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'selectorDoc.inputsDesc.value' | transloco }}</li>\n        <li>\n          <strong>valueChange</strong> \u2014 {{ 'selectorDoc.inputsDesc.valueChange' | transloco }}\n        </li>\n        <li><strong>ionChange</strong> \u2014 {{ 'selectorDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'selectorDoc.inputsDesc.color' | transloco }}</li>\n        <li>\n          <strong>duck-dev-selector-option[value]</strong> \u2014\n          {{ 'selectorDoc.inputsDesc.optionValue' | transloco }}\n        </li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'selectorDoc.drum.title' | transloco }}</h3>\n      <p class=\"description\">{{ 'selectorDoc.drum.description' | transloco }}</p>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'selectorDoc.examples.drumWhite' | transloco }}</p>\n          <duck-dev-selector-drum\n            [value]=\"drumSelected()\"\n            (valueChange)=\"drumSelected.set($event)\"\n            (ionChange)=\"onIonChange($event)\"\n          >\n            <duck-dev-selector-option value=\"rush\">{{\n              'selectorDoc.labels.rush' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"strategy\">{{\n              'selectorDoc.labels.strategy' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"rpg\">{{\n              'selectorDoc.labels.rpg' | transloco\n            }}</duck-dev-selector-option>\n          </duck-dev-selector-drum>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'selectorDoc.labels.selected' | transloco }}: </span>\n            <b>{{ drumSelected() }}</b>\n            <span class=\"divider\">|</span>\n            <span\n              >ionChange: <b>{{ lastEvent() }}</b></span\n            >\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'selectorDoc.examples.drumViolet' | transloco }}</p>\n          <duck-dev-selector-drum [value]=\"'rush'\" [color]=\"colorViolet\">\n            <duck-dev-selector-option value=\"rush\">{{\n              'selectorDoc.labels.rush' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"strategy\">{{\n              'selectorDoc.labels.strategy' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"rpg\">{{\n              'selectorDoc.labels.rpg' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"arcade\">{{\n              'selectorDoc.labels.arcade' | transloco\n            }}</duck-dev-selector-option>\n          </duck-dev-selector-drum>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'selectorDoc.examples.drumOrange' | transloco }}</p>\n          <duck-dev-selector-drum [value]=\"'draft'\" [color]=\"colorOrange\">\n            <duck-dev-selector-option value=\"draft\">{{\n              'selectorDoc.labels.draft' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"launch\">{{\n              'selectorDoc.labels.launch' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"archive\">{{\n              'selectorDoc.labels.archive' | transloco\n            }}</duck-dev-selector-option>\n          </duck-dev-selector-drum>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'selectorDoc.examples.drumDark' | transloco }}</p>\n          <duck-dev-selector-drum [value]=\"'strategy'\" [color]=\"colorDark\">\n            <duck-dev-selector-option value=\"strategy\">{{\n              'selectorDoc.labels.strategy' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"research\">{{\n              'selectorDoc.labels.research' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"prototype\">{{\n              'selectorDoc.labels.prototype' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"validate\">{{\n              'selectorDoc.labels.validate' | transloco\n            }}</duck-dev-selector-option>\n            <duck-dev-selector-option value=\"deliver\">{{\n              'selectorDoc.labels.deliver' | transloco\n            }}</duck-dev-selector-option>\n          </duck-dev-selector-drum>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row.example-row--roadsign{align-items:flex-start}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items: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:left;width:100%}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 
 class MainDocumentationPage {
@@ -6470,6 +6884,7 @@ class MainDocumentationPage {
         { id: 'segment', label: this.translocoService.translate('tabs.segment') },
         { id: 'slider', label: this.translocoService.translate('tabs.slider') },
         { id: 'breadcrumb', label: this.translocoService.translate('tabs.breadcrumb') },
+        { id: 'selector', label: this.translocoService.translate('tabs.selector') },
         { id: 'svg', label: this.translocoService.translate('tabs.svg') },
     ];
     activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
@@ -6477,7 +6892,7 @@ class MainDocumentationPage {
         this.activeTab.set(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('speaker-bubble') {\n      <app-speaker-bubble-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('breadcrumb') {\n      <app-breadcrumb-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }, { kind: "component", type: SpeakerBubbleBlock, selector: "app-speaker-bubble-block" }, { kind: "component", type: BreadcrumbBlock, selector: "app-breadcrumb-block" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('speaker-bubble') {\n      <app-speaker-bubble-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('breadcrumb') {\n      <app-breadcrumb-block />\n    }\n    @case ('selector') {\n      <app-selector-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }, { kind: "component", type: SpeakerBubbleBlock, selector: "app-speaker-bubble-block" }, { kind: "component", type: BreadcrumbBlock, selector: "app-breadcrumb-block" }, { kind: "component", type: SelectorBlock, selector: "app-selector-block" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
             type: Component,
@@ -6502,12 +6917,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         ProgressBarBlock,
                         SpeakerBubbleBlock,
                         BreadcrumbBlock,
-                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('speaker-bubble') {\n      <app-speaker-bubble-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('breadcrumb') {\n      <app-breadcrumb-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
+                        SelectorBlock,
+                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('speaker-bubble') {\n      <app-speaker-bubble-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('breadcrumb') {\n      <app-breadcrumb-block />\n    }\n    @case ('selector') {\n      <app-selector-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-BUr6Xr1h.mjs'),
-    ru: import('./duck-dev-lib-ru-BxtBEpPE.mjs'),
+    en: import('./duck-dev-lib-en-XYugblp4.mjs'),
+    ru: import('./duck-dev-lib-ru-BBQhEnLr.mjs'),
 };
 
 /*
@@ -6518,5 +6934,5 @@ const DuckDevLibTranslations = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DdTabPanel, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevAccordionNeobrutalTapeComponent as DuckDevAccordionNeobrutalTape, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSegmentNeobrutalVertical, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabNeobrutal, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
+export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DdTabPanel, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevAccordionNeobrutalTapeComponent as DuckDevAccordionNeobrutalTape, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSegmentNeobrutalVertical, DuckDevSelectorDrum, DuckDevSelectorOption, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabNeobrutal, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSelectorStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
 //# sourceMappingURL=duck-dev-lib.mjs.map