duck-dev-lib 0.0.25 → 0.0.26

package/fesm2022/duck-dev-lib.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy } from '@angular/core';
+import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import * as i1$3 from '@angular/common';
 import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i1$2 from '@jsverse/transloco';
 import { TranslocoPipe, TranslocoModule, TranslocoService } from '@jsverse/transloco';
@@ -2363,6 +2364,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'app-accordion-block', standalone: true, imports: [TranslocoPipe, DuckDevAccordionComponent], template: "<div class=\"demo-container\">\n  <h1>{{ 'accordionDoc.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'accordionDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'accordionDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'accordionDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;duck-dev-accordion\n  [title]=\"'accordionDoc.sample.q1.title' | transloco\"\n  [content]=\"q1Tpl\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'accordionDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>title</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 title text</li>\n        <li><strong>content</strong> ({{ 'accordionDoc.required' | transloco }}) \u2014 template reference with content</li>\n        <li><strong>color</strong> \u2014 title color from palette: Violet | Orange | White | Gray | Dark (default: White)</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'accordionDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.violet' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorViolet\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.orange' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorOrange\" />\n        </div>\n      </div>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.gray' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q1.title' | transloco\" [content]=\"q1Tpl\" [color]=\"colorGray\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.dark' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q2.title' | transloco\" [content]=\"q2Tpl\" [color]=\"colorDark\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'accordionDoc.examples.default' | transloco }}</p>\n          <duck-dev-accordion [title]=\"'accordionDoc.sample.q3.title' | transloco\" [content]=\"q3Tpl\" [color]=\"colorWhite\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Content templates -->\n    <ng-template #q1Tpl>\n      <p>{{ 'accordionDoc.sample.q1.content' | transloco }}</p>\n    </ng-template>\n    <ng-template #q2Tpl>\n      <p>{{ 'accordionDoc.sample.q2.content' | transloco }}</p>\n    </ng-template>\n    <ng-template #q3Tpl>\n      <p>{{ 'accordionDoc.sample.q3.content' | transloco }}</p>\n    </ng-template>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item duck-dev-accordion{width:100%;max-width:600px}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 
+class SliderClassic {
+    cdr = inject(ChangeDetectorRef);
+    items = input.required({ ...(ngDevMode ? { debugName: "items" } : {}) });
+    intervalMs = input(3000, { ...(ngDevMode ? { debugName: "intervalMs" } : {}) });
+    autoplay = input(true, { ...(ngDevMode ? { debugName: "autoplay" } : {}) });
+    color = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    currentIndex = 0;
+    previousIndex = null;
+    isAnimating = false;
+    animateIn = false;
+    animationDurationMs = 300;
+    goNext() {
+        const len = this.items().length;
+        if (!len || this.isAnimating)
+            return;
+        const next = (this.currentIndex + 1) % len;
+        this.showSlide(next);
+    }
+    goPrev() {
+        const len = this.items().length;
+        if (!len || this.isAnimating)
+            return;
+        const next = (this.currentIndex - 1 + len) % len;
+        this.showSlide(next);
+    }
+    showSlide(nextIndex) {
+        if (nextIndex === this.currentIndex)
+            return;
+        this.previousIndex = this.currentIndex;
+        this.currentIndex = nextIndex;
+        this.isAnimating = true;
+        this.animateIn = false;
+        this.cdr.detectChanges();
+        requestAnimationFrame(() => {
+            void document.body.offsetWidth;
+            requestAnimationFrame(() => {
+                this.animateIn = true;
+            });
+        });
+        setTimeout(() => this.finishAnimation(), this.animationDurationMs + 60);
+    }
+    onTransitionEnd(evt) {
+        if (!this.isAnimating)
+            return;
+        const prop = evt.propertyName;
+        if (prop === 'opacity' || prop === 'transform' || prop === 'filter') {
+            this.finishAnimation();
+        }
+    }
+    finishAnimation() {
+        if (!this.isAnimating)
+            return;
+        this.isAnimating = false;
+        this.previousIndex = null;
+        this.animateIn = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SliderClassic, isStandalone: true, selector: "dd-slider-classic", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, intervalMs: { classPropertyName: "intervalMs", publicName: "intervalMs", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"" } }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"slides\">\n    @if(isAnimating && previousIndex !== null){\n      <div class=\"slide blurred\">\n        <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n      </div>\n    }\n    <div class=\"slide\" [class.current]=\"!isAnimating || animateIn\" [class.animate-in]=\"animateIn\" (transitionend)=\"onTransitionEnd($event)\">\n      <ng-container [ngTemplateOutlet]=\"items()[currentIndex]\"></ng-container>\n    </div>\n  </div>\n\n  <!-- Always visible navigation controls placed at the edges -->\n  <duck-dev-icon\n    class=\"dd-slider-btn dd-slider-btn-prev\"\n    name=\"duck-dev-chevron-left-medium\"\n    (click)=\"goPrev()\"\n  />\n  <duck-dev-icon\n    class=\"dd-slider-btn dd-slider-btn-next\"\n    name=\"duck-dev-chevron-right-medium\"\n    (click)=\"goNext()\"\n  />\n</div>\n", styles: [".container{width:min(100%,900px);position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%}.slide{position:relative;width:100%;opacity:0;filter:none;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .15s cubic-bezier(.22,1,.36,1),filter .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}.slide.current{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.animate-in{opacity:1;filter:blur(0);transform:translateZ(0) scale(1) translateY(0)}.slide.blurred{position:absolute;inset:0;opacity:.45;filter:blur(14px) saturate(1.1);transform:translateZ(0) scale(.94) translateY(24px)}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;color:var(--dd-base-0);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--dd-base-300);transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.2}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.slide{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderClassic, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-slider-classic', standalone: true, imports: [CommonModule, DuckDevIcon], host: {
+                        '[style.display]': '"block"'
+                    }, template: "<div class=\"container\">\n  <div class=\"slides\">\n    @if(isAnimating && previousIndex !== null){\n      <div class=\"slide blurred\">\n        <ng-container [ngTemplateOutlet]=\"items()[previousIndex]\"></ng-container>\n      </div>\n    }\n    <div class=\"slide\" [class.current]=\"!isAnimating || animateIn\" [class.animate-in]=\"animateIn\" (transitionend)=\"onTransitionEnd($event)\">\n      <ng-container [ngTemplateOutlet]=\"items()[currentIndex]\"></ng-container>\n    </div>\n  </div>\n\n  <!-- Always visible navigation controls placed at the edges -->\n  <duck-dev-icon\n    class=\"dd-slider-btn dd-slider-btn-prev\"\n    name=\"duck-dev-chevron-left-medium\"\n    (click)=\"goPrev()\"\n  />\n  <duck-dev-icon\n    class=\"dd-slider-btn dd-slider-btn-next\"\n    name=\"duck-dev-chevron-right-medium\"\n    (click)=\"goNext()\"\n  />\n</div>\n", styles: [".container{width:min(100%,900px);position:relative;overflow:hidden;margin:0 auto}.slides{position:relative;width:100%}.slide{position:relative;width:100%;opacity:0;filter:none;transform:translateZ(0) scale(.96) translateY(16px);transition:opacity .15s cubic-bezier(.22,1,.36,1),filter .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1)}.slide.current{opacity:1;transform:translateZ(0) scale(1) translateY(0)}.slide.animate-in{opacity:1;filter:blur(0);transform:translateZ(0) scale(1) translateY(0)}.slide.blurred{position:absolute;inset:0;opacity:.45;filter:blur(14px) saturate(1.1);transform:translateZ(0) scale(.94) translateY(24px)}.dd-slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;color:var(--dd-base-0);border-radius:50%;cursor:pointer;box-shadow:0 2px 8px var(--dd-base-300);transition:scale .2s cubic-bezier(.22,1,.36,1)}.dd-slider-btn:hover{scale:1.2}.dd-slider-btn:disabled{opacity:.5;cursor:default}.dd-slider-btn-prev{left:8px}.dd-slider-btn-next{right:8px}@media(prefers-reduced-motion:reduce){.slide{transition:none}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], intervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervalMs", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class SliderBlock {
+    slideTemplates = viewChildren('slide', { ...(ngDevMode ? { debugName: "slideTemplates" } : {}) });
+    slides = signal([], { ...(ngDevMode ? { debugName: "slides" } : {}) });
+    ngAfterViewInit() {
+        this.slides.set([...this.slideTemplates()]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: SliderBlock, isStandalone: true, selector: "app-slider-block", viewQueries: [{ propertyName: "slideTemplates", predicate: ["slide"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.raindrops.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n  [color]=\"'White'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> ({{ 'slider.required' | transloco }}) - {{ 'slider.raindrops.inputItems' | transloco }}</li>\n        <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n        <li><strong>color</strong> - Button palette color (e.g. 'White'). Used for styling consistency.</li>\n      </ul>\n    </div>\n\n    <!-- Meaningful demo slides -->\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n        <h3 class=\"dd-doc-slide__title\">Build delightful interfaces faster</h3>\n        <p class=\"dd-doc-slide__subtitle\">Duck Dev UI provides accessible, themeable components with sensible defaults so you can ship quickly.</p>\n        <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"Explore components\">Explore components</a>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n        <ul class=\"dd-doc-feature-list\" role=\"list\">\n          <li class=\"dd-doc-feature\">\n            <h4>Accessible</h4>\n            <p>Keyboard-friendly and ARIA\u2011aware out of the box.</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>Themeable</h4>\n            <p>Uses CSS variables to match your brand palette.</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>Lightweight</h4>\n            <p>Small, focused components with zero heavy deps.</p>\n          </li>\n        </ul>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n        <h4 class=\"dd-doc-slide-code__title\">Quick start</h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-classic&gt;</code></pre>\n        <p class=\"dd-doc-note\">Tip: Use templates to pass rich content into each slide.</p>\n      </section>\n    </ng-template>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"], dependencies: [{ kind: "component", type: SliderClassic, selector: "dd-slider-classic", inputs: ["items", "intervalMs", "autoplay", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SliderBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-slider-block', standalone: true, imports: [TranslocoPipe, SliderClassic], template: "<div class=\"demo-container\">\n  <h1>{{ 'slider.title' | transloco }}</h1>\n\n  <section class=\"component-section\">\n    <h2>{{ 'slider.raindrops.title' | transloco }}</h2>\n    <p class=\"description\">\n      {{ 'slider.raindrops.description' | transloco }}\n    </p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'slider.raindrops.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"\n  [color]=\"'White'\"\n/&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'slider.raindrops.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>items</strong> ({{ 'slider.required' | transloco }}) - {{ 'slider.raindrops.inputItems' | transloco }}</li>\n        <li><strong>intervalMs</strong> - {{ 'slider.raindrops.inputInterval' | transloco }}</li>\n        <li><strong>autoplay</strong> - {{ 'slider.raindrops.inputAutoplay' | transloco }}</li>\n        <li><strong>color</strong> - Button palette color (e.g. 'White'). Used for styling consistency.</li>\n      </ul>\n    </div>\n\n    <!-- Meaningful demo slides -->\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-hero\" aria-label=\"Overview\">\n        <h3 class=\"dd-doc-slide__title\">Build delightful interfaces faster</h3>\n        <p class=\"dd-doc-slide__subtitle\">Duck Dev UI provides accessible, themeable components with sensible defaults so you can ship quickly.</p>\n        <a class=\"dd-doc-slide__cta\" href=\"#components\" aria-label=\"Explore components\">Explore components</a>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-features\" aria-label=\"Highlights\">\n        <ul class=\"dd-doc-feature-list\" role=\"list\">\n          <li class=\"dd-doc-feature\">\n            <h4>Accessible</h4>\n            <p>Keyboard-friendly and ARIA\u2011aware out of the box.</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>Themeable</h4>\n            <p>Uses CSS variables to match your brand palette.</p>\n          </li>\n          <li class=\"dd-doc-feature\">\n            <h4>Lightweight</h4>\n            <p>Small, focused components with zero heavy deps.</p>\n          </li>\n        </ul>\n      </section>\n    </ng-template>\n\n    <ng-template #slide>\n      <section class=\"dd-doc-slide dd-doc-slide-code\" aria-label=\"Usage example\">\n        <h4 class=\"dd-doc-slide-code__title\">Quick start</h4>\n        <pre class=\"dd-doc-code\"><code>&lt;dd-slider-classic\n  [items]=\"slides()\"\n  [intervalMs]=\"3000\"\n  [autoplay]=\"true\"&gt;\n&lt;/dd-slider-classic&gt;</code></pre>\n        <p class=\"dd-doc-note\">Tip: Use templates to pass rich content into each slide.</p>\n      </section>\n    </ng-template>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'slider.raindrops.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'slider.raindrops.exampleBasic' | transloco }}</p>\n          <dd-slider-classic [items]=\"slides()\" />\n        </div>\n      </div>\n    </div>\n  </section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #A7FFB5BA;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}.dd-doc-slide{width:100%;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.dd-doc-slide-hero{background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-0));border:1px solid var(--dd-base-200);border-radius:12px}.dd-doc-slide__title{font-size:24px;font-weight:700;color:var(--dd-base-600);margin:0}.dd-doc-slide__subtitle{font-size:16px;color:var(--dd-base-400);margin:0}.dd-doc-slide__cta{display:inline-block;margin-top:8px;padding:10px 16px;border-radius:8px;background:var(--dd-base-accent-blue);color:var(--dd-base-0);text-decoration:none;font-weight:600;box-shadow:0 2px 8px var(--dd-base-300)}.dd-doc-slide__cta:hover{background:var(--dd-base-500)}.dd-doc-slide-features{background:var(--dd-base-0)}.dd-doc-feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.dd-doc-feature{background:var(--dd-base-100);border:1px solid var(--dd-base-200);border-radius:10px;padding:14px}.dd-doc-feature h4{margin:0 0 6px;font-size:16px;color:var(--dd-base-500)}.dd-doc-feature p{margin:0;font-size:14px;color:var(--dd-base-400)}.dd-doc-slide-code{align-items:stretch}.dd-doc-slide-code__title{margin:0 0 8px;font-size:18px;color:var(--dd-base-500)}.dd-doc-code{background:var(--dd-base-600);color:var(--dd-base-100);border-radius:8px;padding:12px;overflow:auto;text-align:left}.dd-doc-note{margin:8px 0 0;font-size:13px;color:var(--dd-base-400)}@media(max-width:768px){.dd-doc-feature-list{grid-template-columns:1fr}.dd-doc-slide__title{font-size:20px}.dd-doc-slide__subtitle{font-size:14px}}\n"] }]
+        }], propDecorators: { slideTemplates: [{ type: i0.ViewChildren, args: ['slide', { isSignal: true }] }] } });
+
 class MainDocumentationPage {
     translocoService = inject(TranslocoService);
     title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
@@ -2375,6 +2456,7 @@ class MainDocumentationPage {
         { id: 'directives', label: this.translocoService.translate('tabs.directives') },
         { id: 'input', label: this.translocoService.translate('tabs.input') },
         { id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
+        { id: 'slider', label: this.translocoService.translate('tabs.slider') },
         { id: 'svg', label: this.translocoService.translate('tabs.svg') }
     ];
     activeTab = signal(this.tabs[0], { ...(ngDevMode ? { debugName: "activeTab" } : {}) });
@@ -2382,7 +2464,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  @if(activeTab().id === 'accordion' ){\n    <app-accordion-block />\n  }\n  @if (activeTab().id === 'buttons') {\n    <app-button-block />\n  }\n  @if (activeTab().id === 'loaders') {\n    <app-loader-block />\n  }\n  @if (activeTab().id === 'tabs') {\n    <app-tabs-block />\n  }\n  @if (activeTab().id === 'badge') {\n    <app-badge-block />\n  }\n  @if (activeTab().id === 'directives') {\n    <app-directive-block />\n  }\n  @if(activeTab().id === 'input'){\n    <app-input-block />\n  }\n  @if(activeTab().id === 'notifications'){\n    <app-notification-block />\n  }\n  @if (activeTab().id === 'svg') {\n    <app-duck-dev-svg-block />\n  }\n</duck-dev-tab-vertical>\n\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" }] });
+    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 ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-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 ('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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
             type: Component,
@@ -2397,8 +2479,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         DuckDevNotificationContainer,
                         BadgeBlock,
                         DirectiveBlock,
-                        AccordionBlock
-                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @if(activeTab().id === 'accordion' ){\n    <app-accordion-block />\n  }\n  @if (activeTab().id === 'buttons') {\n    <app-button-block />\n  }\n  @if (activeTab().id === 'loaders') {\n    <app-loader-block />\n  }\n  @if (activeTab().id === 'tabs') {\n    <app-tabs-block />\n  }\n  @if (activeTab().id === 'badge') {\n    <app-badge-block />\n  }\n  @if (activeTab().id === 'directives') {\n    <app-directive-block />\n  }\n  @if(activeTab().id === 'input'){\n    <app-input-block />\n  }\n  @if(activeTab().id === 'notifications'){\n    <app-notification-block />\n  }\n  @if (activeTab().id === 'svg') {\n    <app-duck-dev-svg-block />\n  }\n</duck-dev-tab-vertical>\n\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
+                        AccordionBlock,
+                        SliderBlock
+                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\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 ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-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 ('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 = {
@@ -2414,5 +2497,5 @@ const DuckDevLibTranslations = {
  * Generated bundle index. Do not edit.
  */
 
-export { Badge, ButtonBlurLift, ButtonCasper, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage };
+export { Badge, ButtonBlurLift, ButtonCasper, ButtonEnumColor, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
 //# sourceMappingURL=duck-dev-lib.mjs.map