duck-dev-lib 0.0.43 → 0.0.44

package/fesm2022/duck-dev-lib.mjs

@@ -3167,17 +3167,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class BadgeNeobrutalStamp {
-    text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
+    kicker = input.required({ ...(ngDevMode ? { debugName: "kicker" } : {}) });
+    text = input.required({ ...(ngDevMode ? { debugName: "text" } : {}) });
     color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
     size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
     badgeStyle = computed(() => getNeobrutalBadgeStyle(this.color()), { ...(ngDevMode ? { debugName: "badgeStyle" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalStamp, isStandalone: true, selector: "dd-badge-neobrutal-stamp", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-stamp__kicker\">Duck Dev</span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-border);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);letter-spacing:.12em;text-transform:uppercase}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: BadgeNeobrutalStamp, isStandalone: true, selector: "dd-badge-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-border);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);letter-spacing:.12em;text-transform:uppercase}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeNeobrutalStamp, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-badge-neobrutal-stamp', standalone: true, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-stamp__kicker\">Duck Dev</span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-border);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);letter-spacing:.12em;text-transform:uppercase}\n"] }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+            args: [{ selector: 'dd-badge-neobrutal-stamp', standalone: true, template: "<span class=\"dd-badge-neo-stamp\" [style]=\"badgeStyle()\" [attr.data-size]=\"size()\">\n  <span class=\"dd-badge-neo-stamp__kicker\">{{ kicker() }}</span>\n  <span>{{ text() }}</span>\n</span>\n", styles: [":host{display:inline-block}.dd-badge-neo-stamp{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-surface);color:var(--dd-neo-badge-text);box-shadow:4px 4px 0 var(--dd-neo-badge-border);font-weight:900;line-height:1;white-space:nowrap;transform:rotate(-2deg)}.dd-badge-neo-stamp[data-size=sm]{padding:5px 8px;font-size:11px}.dd-badge-neo-stamp[data-size=md]{padding:7px 10px;font-size:12px}.dd-badge-neo-stamp__kicker{display:inline-flex;align-items:center;padding:4px 6px;border:2px solid var(--dd-neo-badge-border);background:var(--dd-neo-badge-accent);letter-spacing:.12em;text-transform:uppercase}\n"] }]
+        }], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class BadgeNeobrutalTicket {
     text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
@@ -3199,6 +3200,10 @@ class BadgeBlock {
     colorWhite = AccentEnumColor.White;
     colorGray = AccentEnumColor.Gray;
     colorDark = AccentEnumColor.Dark;
+    slabBadgeText = 'Hot drop';
+    stampBadgeKicker = 'Duck Dev';
+    stampBadgeText = 'Duck verified';
+    ticketBadgeText = 'Night mode';
     styleTabs = [
         { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
         { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
@@ -3226,7 +3231,7 @@ class BadgeBlock {
         return el;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n  <!-- Badge Component -->\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-badge\n        [text]=\"'New'\"\n        [color]=\"colorViolet\"\n        [variant]=\"'solid'\"\n        [size]=\"'md'\"\n      /&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n              <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n              <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n              <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n              <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Badge</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;dd-badge-neobrutal-slab\n  [text]=\"'Hot drop'\"\n  [color]=\"colorOrange\"\n  [size]=\"'md'\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Slab</p>\n              <dd-badge-neobrutal-slab [text]=\"'Hot drop'\" [color]=\"colorOrange\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Stamp</p>\n              <dd-badge-neobrutal-stamp [text]=\"'Duck verified'\" [color]=\"colorViolet\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"'Night mode'\" [color]=\"colorDark\" />\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n  <!-- Badge Component -->\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-badge\n        [text]=\"'New'\"\n        [color]=\"colorViolet\"\n        [variant]=\"'solid'\"\n        [size]=\"'md'\"\n      /&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n              <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n              <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n              <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n              <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Badge</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;dd-badge-neobrutal-slab\n  [text]=\"'Hot drop'\"\n  [color]=\"colorOrange\"\n  [size]=\"'md'\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Slab</p>\n              <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Stamp</p>\n              <dd-badge-neobrutal-stamp\n                [kicker]=\"stampBadgeKicker\"\n                [text]=\"stampBadgeText\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: BadgeNeobrutalSlab, selector: "dd-badge-neobrutal-slab", inputs: ["text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalStamp, selector: "dd-badge-neobrutal-stamp", inputs: ["kicker", "text", "color", "size"] }, { kind: "component", type: BadgeNeobrutalTicket, selector: "dd-badge-neobrutal-ticket", inputs: ["text", "color", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
             type: Component,
@@ -3240,7 +3245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         DdFlexDirectionDirective,
                         DuckDevCardSection,
                         DuckDevTab,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n  <!-- Badge Component -->\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-badge\n        [text]=\"'New'\"\n        [color]=\"colorViolet\"\n        [variant]=\"'solid'\"\n        [size]=\"'md'\"\n      /&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n              <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n              <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n              <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n              <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Badge</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;dd-badge-neobrutal-slab\n  [text]=\"'Hot drop'\"\n  [color]=\"colorOrange\"\n  [size]=\"'md'\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Slab</p>\n              <dd-badge-neobrutal-slab [text]=\"'Hot drop'\" [color]=\"colorOrange\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Stamp</p>\n              <dd-badge-neobrutal-stamp [text]=\"'Duck verified'\" [color]=\"colorViolet\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"'Night mode'\" [color]=\"colorDark\" />\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n  <!-- Badge Component -->\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-badge\n        [text]=\"'New'\"\n        [color]=\"colorViolet\"\n        [variant]=\"'solid'\"\n        [size]=\"'md'\"\n      /&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n              <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n              <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n              <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n              <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n              <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n              <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Badge</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"descEl.innerHTML\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;dd-badge-neobrutal-slab\n  [text]=\"'Hot drop'\"\n  [color]=\"colorOrange\"\n  [size]=\"'md'\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Slab</p>\n              <dd-badge-neobrutal-slab [text]=\"slabBadgeText\" [color]=\"colorOrange\" />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Stamp</p>\n              <dd-badge-neobrutal-stamp\n                [kicker]=\"stampBadgeKicker\"\n                [text]=\"stampBadgeText\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Ticket</p>\n              <dd-badge-neobrutal-ticket [text]=\"ticketBadgeText\" [color]=\"colorDark\" />\n            </div>\n          </div>\n        </div>\n      }\n    </duck-dev-tab>\n  </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .examples-block .example-row .example-item dd-badge{width:auto}.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-slab,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-stamp,.demo-container .examples-block .example-row .example-item dd-badge-neobrutal-ticket{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }], ctorParameters: () => [] });
 
 class DirectiveBlock {
@@ -3768,6 +3773,143 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton], template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 
+function clampProgress(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.min(100, Math.max(0, value));
+}
+function buildProgressSegments(value, count) {
+    const safeCount = Math.min(24, Math.max(4, Math.round(count) || 10));
+    const activeCount = Math.round((clampProgress(value) / 100) * safeCount);
+    return Array.from({ length: safeCount }, (_, index) => index < activeCount);
+}
+
+class DuckDevProgressLine {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressLine, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressLine, isStandalone: true, selector: "duck-dev-progress-line", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-line\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-line__header\">\n    <div class=\"dd-progress-line__copy\">\n      <span class=\"dd-progress-line__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-line__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-line__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-line__track\">\n    <span class=\"dd-progress-line__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-line{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-line__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-line__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-line__label{color:var(--dd-base-600);font-size:15px;font-weight:700;line-height:1.2}.dd-progress-line__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-line__value{color:var(--dd-base-500);font-size:14px;font-weight:700;line-height:1;white-space:nowrap}.dd-progress-line__track{position:relative;height:12px;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 88%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 14%,transparent),0 1px color-mix(in srgb,var(--dd-base-0) 90%,transparent)}.dd-progress-line__fill{display:block;height:100%;border-radius:inherit;transition:width .24s ease;background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:inset 0 -1px color-mix(in srgb,var(--dd-base-600) 16%,transparent)}.dd-progress-line[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-line[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-line[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-line[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-line[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressLine, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-progress-line', standalone: true, template: "<section class=\"dd-progress-line\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-line__header\">\n    <div class=\"dd-progress-line__copy\">\n      <span class=\"dd-progress-line__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-line__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-line__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-line__track\">\n    <span class=\"dd-progress-line__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-line{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-line__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-line__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-line__label{color:var(--dd-base-600);font-size:15px;font-weight:700;line-height:1.2}.dd-progress-line__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-line__value{color:var(--dd-base-500);font-size:14px;font-weight:700;line-height:1;white-space:nowrap}.dd-progress-line__track{position:relative;height:12px;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 88%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 14%,transparent),0 1px color-mix(in srgb,var(--dd-base-0) 90%,transparent)}.dd-progress-line__fill{display:block;height:100%;border-radius:inherit;transition:width .24s ease;background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:inset 0 -1px color-mix(in srgb,var(--dd-base-600) 16%,transparent)}.dd-progress-line[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-line[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-line[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-line[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-line[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class DuckDevProgressStack {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    segmentCount = input(10, { ...(ngDevMode ? { debugName: "segmentCount" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    segments = computed(() => buildProgressSegments(this.percent(), this.segmentCount()), { ...(ngDevMode ? { debugName: "segments" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressStack, isStandalone: true, selector: "duck-dev-progress-stack", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, segmentCount: { classPropertyName: "segmentCount", publicName: "segmentCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-stack__header\">\n    <div class=\"dd-progress-stack__copy\">\n      <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-stack__segments\">\n    @for (segment of segments(); track $index) {\n      <span class=\"dd-progress-stack__segment\" [class.dd-progress-stack__segment--active]=\"segment\"></span>\n    }\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-stack{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-stack__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-stack__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-stack__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-stack__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-stack__value{color:var(--dd-base-500);font-size:14px;font-weight:700;white-space:nowrap}.dd-progress-stack__segments{display:grid;grid-template-columns:repeat(auto-fit,minmax(18px,1fr));gap:8px;width:100%}.dd-progress-stack__segment{height:14px;border-radius:999px;background:var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 12%,transparent);transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}.dd-progress-stack__segment--active{background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:0 6px 14px color-mix(in srgb,var(--dd-progress-fill-end) 24%,transparent);transform:translateY(-1px)}.dd-progress-stack[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-stack[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-stack[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-stack[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-stack[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-progress-stack', standalone: true, template: "<section class=\"dd-progress-stack\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-stack__header\">\n    <div class=\"dd-progress-stack__copy\">\n      <span class=\"dd-progress-stack__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-stack__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-stack__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-stack__segments\">\n    @for (segment of segments(); track $index) {\n      <span class=\"dd-progress-stack__segment\" [class.dd-progress-stack__segment--active]=\"segment\"></span>\n    }\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-stack{display:flex;flex-direction:column;gap:12px;width:100%}.dd-progress-stack__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-stack__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-stack__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-stack__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-stack__value{color:var(--dd-base-500);font-size:14px;font-weight:700;white-space:nowrap}.dd-progress-stack__segments{display:grid;grid-template-columns:repeat(auto-fit,minmax(18px,1fr));gap:8px;width:100%}.dd-progress-stack__segment{height:14px;border-radius:999px;background:var(--dd-base-200);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--dd-base-600) 12%,transparent);transition:background-color .22s ease,transform .22s ease,box-shadow .22s ease}.dd-progress-stack__segment--active{background:linear-gradient(90deg,var(--dd-progress-fill-start),var(--dd-progress-fill-end));box-shadow:0 6px 14px color-mix(in srgb,var(--dd-progress-fill-end) 24%,transparent);transform:translateY(-1px)}.dd-progress-stack[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-stack[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-stack[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-stack[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-stack[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-100)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], segmentCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "segmentCount", required: false }] }] } });
+
+class DuckDevProgressMeter {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    color = input(AccentEnumColor.Gray, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressMeter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressMeter, isStandalone: true, selector: "duck-dev-progress-meter", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-meter\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-meter__header\">\n    <div class=\"dd-progress-meter__copy\">\n      <span class=\"dd-progress-meter__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-meter__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-meter__badge\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-meter__track\">\n    <span class=\"dd-progress-meter__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-meter__marker\" [style.left.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-meter{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:1px solid var(--dd-base-300);border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 94%,transparent),var(--dd-base-0)),var(--dd-base-100);box-shadow:0 12px 24px color-mix(in srgb,var(--dd-base-600) 8%,transparent)}.dd-progress-meter__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dd-progress-meter__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-meter__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-meter__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-meter__badge{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--dd-progress-fill-end) 14%,var(--dd-base-0));color:var(--dd-base-600);font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--dd-progress-fill-end) 20%,transparent)}.dd-progress-meter__track{position:relative;height:18px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 84%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--dd-base-600) 12%,transparent);overflow:hidden}.dd-progress-meter__fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill-start) 92%,white),var(--dd-progress-fill-end)),var(--dd-progress-fill-end);transition:width .24s ease}.dd-progress-meter__marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--dd-base-0);border:3px solid var(--dd-progress-fill-end);box-shadow:0 4px 10px color-mix(in srgb,var(--dd-progress-fill-end) 26%,transparent);transform:translate(-50%,-50%)}.dd-progress-meter[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-meter[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-meter[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-meter[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-meter[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-300)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressMeter, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-progress-meter', standalone: true, template: "<section class=\"dd-progress-meter\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-meter__header\">\n    <div class=\"dd-progress-meter__copy\">\n      <span class=\"dd-progress-meter__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-meter__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-meter__badge\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-meter__track\">\n    <span class=\"dd-progress-meter__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-meter__marker\" [style.left.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-meter{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:1px solid var(--dd-base-300);border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 94%,transparent),var(--dd-base-0)),var(--dd-base-100);box-shadow:0 12px 24px color-mix(in srgb,var(--dd-base-600) 8%,transparent)}.dd-progress-meter__header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dd-progress-meter__copy{display:flex;flex-direction:column;gap:4px}.dd-progress-meter__label{color:var(--dd-base-600);font-size:15px;font-weight:700}.dd-progress-meter__subtext{color:var(--dd-base-400);font-size:13px;line-height:1.4}.dd-progress-meter__badge{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--dd-progress-fill-end) 14%,var(--dd-base-0));color:var(--dd-base-600);font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--dd-progress-fill-end) 20%,transparent)}.dd-progress-meter__track{position:relative;height:18px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-base-0) 84%,transparent),transparent),var(--dd-base-200);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--dd-base-600) 12%,transparent);overflow:hidden}.dd-progress-meter__fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill-start) 92%,white),var(--dd-progress-fill-end)),var(--dd-progress-fill-end);transition:width .24s ease}.dd-progress-meter__marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--dd-base-0);border:3px solid var(--dd-progress-fill-end);box-shadow:0 4px 10px color-mix(in srgb,var(--dd-progress-fill-end) 26%,transparent);transform:translate(-50%,-50%)}.dd-progress-meter[data-color=violet]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-blue) 82%, white);--dd-progress-fill-end: var(--dd-base-accent-blue)}.dd-progress-meter[data-color=orange]{--dd-progress-fill-start: color-mix(in srgb, var(--dd-base-accent-orange) 84%, white);--dd-progress-fill-end: var(--dd-base-accent-orange)}.dd-progress-meter[data-color=gray]{--dd-progress-fill-start: var(--dd-base-300);--dd-progress-fill-end: var(--dd-base-500)}.dd-progress-meter[data-color=dark]{--dd-progress-fill-start: var(--dd-base-500);--dd-progress-fill-end: var(--dd-base-700)}.dd-progress-meter[data-color=white]{--dd-progress-fill-start: var(--dd-base-0);--dd-progress-fill-end: var(--dd-base-300)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class DuckDevProgressNeobrutalSlab {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    subtext = input('', { ...(ngDevMode ? { debugName: "subtext" } : {}) });
+    color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,white) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,white) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-base-600)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-base-0);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-base-600);background:var(--dd-base-0);overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-blue) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class DuckDevProgressNeobrutalStamp {
+    kicker = input.required({ ...(ngDevMode ? { debugName: "kicker" } : {}) });
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,white) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),color-mix(in srgb,var(--dd-progress-fill) 78%,black));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-base-600);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,white) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:0 0 0 4px var(--dd-base-0),8px 8px 0 var(--dd-base-600)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-base-600);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-base-600);background:var(--dd-base-100);overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,white),color-mix(in srgb,var(--dd-progress-fill) 78%,black));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
+        }], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class DuckDevProgressNeobrutalTicket {
+    leftTag = input.required({ ...(ngDevMode ? { debugName: "leftTag" } : {}) });
+    rightTag = input.required({ ...(ngDevMode ? { debugName: "rightTag" } : {}) });
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,white),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-base-600);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-base-600))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-base-600)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-base-600)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-base-600);overflow:hidden;background:var(--dd-base-0)}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,white),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-base-600)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-accent-blue)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
+        }], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+class ProgressBarBlock {
+    t = inject(TranslocoService);
+    colorViolet = AccentEnumColor.Violet;
+    colorOrange = AccentEnumColor.Orange;
+    colorWhite = AccentEnumColor.White;
+    colorGray = AccentEnumColor.Gray;
+    colorDark = AccentEnumColor.Dark;
+    lineProgress = 72;
+    stackProgress = 56;
+    meterProgress = 84;
+    slabProgress = 68;
+    stampProgress = 91;
+    ticketProgress = 47;
+    styleTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activeStyleTab = signal(this.styleTabs[0], { ...(ngDevMode ? { debugName: "activeStyleTab" } : {}) });
+    onStyleTabChange(tab) {
+        this.activeStyleTab.set(tab);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ProgressBarBlock, isStandalone: true, selector: "app-progress-bar-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section{margin-bottom:40px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevTab, selector: "duck-dev-tab", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressStack, selector: "duck-dev-progress-stack", inputs: ["label", "value", "subtext", "color", "segmentCount"] }, { kind: "component", type: DuckDevProgressMeter, selector: "duck-dev-progress-meter", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalSlab, selector: "duck-dev-progress-neobrutal-slab", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalStamp, selector: "duck-dev-progress-neobrutal-stamp", inputs: ["kicker", "label", "value", "color"] }, { kind: "component", type: DuckDevProgressNeobrutalTicket, selector: "duck-dev-progress-neobrutal-ticket", inputs: ["leftTag", "rightTag", "label", "value", "color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ProgressBarBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-progress-bar-block', imports: [
+                        TranslocoPipe,
+                        DuckDevTab,
+                        DuckDevProgressLine,
+                        DuckDevProgressStack,
+                        DuckDevProgressMeter,
+                        DuckDevProgressNeobrutalSlab,
+                        DuckDevProgressNeobrutalStamp,
+                        DuckDevProgressNeobrutalTicket,
+                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'progressDoc.title' | transloco }}</h1>\n\n  <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n    @if (activeStyleTab().id === 'classic') {\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.line.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.line.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-line\n  label=\"Release sync\"\n  [value]=\"72\"\n  subtext=\"API schema is aligned\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.line.example' | transloco }}</p>\n              <duck-dev-progress-line\n                label=\"Release sync\"\n                [value]=\"lineProgress\"\n                subtext=\"API schema is aligned\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.stack.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.stack.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-stack\n  label=\"Content migration\"\n  [value]=\"56\"\n  subtext=\"6 of 10 blocks shipped\"\n  [segmentCount]=\"10\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.segmentCount' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.stack.example' | transloco }}</p>\n              <duck-dev-progress-stack\n                label=\"Content migration\"\n                [value]=\"stackProgress\"\n                subtext=\"6 of 10 blocks shipped\"\n                [segmentCount]=\"10\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section\">\n        <h2>{{ 'progressDoc.classic.meter.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.classic.meter.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-meter\n  label=\"Regression sweep\"\n  [value]=\"84\"\n  subtext=\"Visual QA is nearly done\"\n  [color]=\"colorGray\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'progressDoc.classic.meter.example' | transloco }}</p>\n              <duck-dev-progress-meter\n                label=\"Regression sweep\"\n                [value]=\"meterProgress\"\n                subtext=\"Visual QA is nearly done\"\n                [color]=\"colorGray\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    } @else {\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.slab.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.slab.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-slab\n  label=\"Build queue\"\n  [value]=\"68\"\n  subtext=\"Artifact pack is cooking\"\n  [color]=\"colorOrange\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.subtext' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.slab.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-slab\n                label=\"Build queue\"\n                [value]=\"slabProgress\"\n                subtext=\"Artifact pack is cooking\"\n                [color]=\"colorOrange\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.stamp.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.stamp.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-stamp\n  kicker=\"Duck Dev\"\n  label=\"Verification pass\"\n  [value]=\"91\"\n  [color]=\"colorViolet\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.kicker' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.stamp.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-stamp\n                kicker=\"Duck Dev\"\n                label=\"Verification pass\"\n                [value]=\"stampProgress\"\n                [color]=\"colorViolet\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"component-section component-section--neobrutal\">\n        <h2>{{ 'progressDoc.neobrutal.ticket.title' | transloco }}</h2>\n        <p class=\"description\">{{ 'progressDoc.neobrutal.ticket.description' | transloco }}</p>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'progressDoc.usage' | transloco }}</h3>\n          <pre><code>&lt;duck-dev-progress-neobrutal-ticket\n  leftTag=\"phase 02\"\n  rightTag=\"ui sync\"\n  label=\"Neobrutal rollout\"\n  [value]=\"47\"\n  [color]=\"colorDark\"\n/&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'progressDoc.inputs' | transloco }}</h3>\n          <ul>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.leftTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.rightTag' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.label' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.value' | transloco\"></li>\n            <li [innerHTML]=\"'progressDoc.inputsDesc.color' | transloco\"></li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'progressDoc.examples' | transloco }}</h3>\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">{{ 'progressDoc.neobrutal.ticket.example' | transloco }}</p>\n              <duck-dev-progress-neobrutal-ticket\n                leftTag=\"phase 02\"\n                rightTag=\"ui sync\"\n                label=\"Neobrutal rollout\"\n                [value]=\"ticketProgress\"\n                [color]=\"colorDark\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n  </duck-dev-tab>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section{margin-bottom:40px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{margin-bottom:8px}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.demo-container .examples-block .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 15%,transparent 15% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);border-radius:0;box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-item--neobrutal:hover{border-color:var(--dd-base-600);box-shadow:10px 10px 0 var(--dd-base-accent-orange)}.demo-container .examples-block .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container h2{font-size:24px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-item{min-width:100%}}\n"] }]
+        }] });
+
 class MainDocumentationPage {
     translocoService = inject(TranslocoService);
     title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
@@ -3776,6 +3918,7 @@ class MainDocumentationPage {
         { id: 'accordion', label: this.translocoService.translate('tabs.accordion') },
         { id: 'buttons', label: this.translocoService.translate('tabs.buttons') },
         { id: 'loaders', label: this.translocoService.translate('tabs.loaders') },
+        { id: 'progress', label: this.translocoService.translate('tabs.progress') },
         { id: 'tabs', label: this.translocoService.translate('tabs.tabs') },
         { id: 'tooltip', label: this.translocoService.translate('tabs.tooltip') },
         { id: 'badge', label: this.translocoService.translate('tabs.badge') },
@@ -3793,7 +3936,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 ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }, { kind: "component", type: ProgressBarBlock, selector: "app-progress-bar-block" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
             type: Component,
@@ -3815,12 +3958,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         QuickStartBlock,
                         ModalBlock,
                         SegmentBlock,
-                    ], 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 ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
+                        ProgressBarBlock,
+                    ], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n  @switch (activeTab().id) {\n    @case ('quick-start') {\n      <app-quick-start-block />\n    }\n    @case ('accordion') {\n      <app-accordion-block />\n    }\n    @case ('buttons') {\n      <app-button-block />\n    }\n    @case ('loaders') {\n      <app-loader-block />\n    }\n    @case ('progress') {\n      <app-progress-bar-block />\n    }\n    @case ('tabs') {\n      <app-tabs-block />\n    }\n    @case ('tooltip') {\n      <app-tooltip-block />\n    }\n    @case ('badge') {\n      <app-badge-block />\n    }\n    @case ('directives') {\n      <app-directive-block />\n    }\n    @case ('card') {\n      <app-card-block />\n    }\n    @case ('modal') {\n      <app-modal-block />\n    }\n    @case ('input') {\n      <app-input-block />\n    }\n    @case ('notifications') {\n      <app-notification-block />\n    }\n    @case ('slider') {\n      <app-slider-block />\n    }\n    @case ('segment') {\n      <app-segment-block />\n    }\n    @case ('svg') {\n      <app-duck-dev-svg-block />\n    }\n  }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-Co6vywqB.mjs'),
-    ru: import('./duck-dev-lib-ru-39r_p4Cd.mjs'),
+    en: import('./duck-dev-lib-en-Ax8ROq2-.mjs'),
+    ru: import('./duck-dev-lib-ru-yHcUp82C.mjs'),
 };
 
 /*
@@ -3831,5 +3975,5 @@ const DuckDevLibTranslations = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
+export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
 //# sourceMappingURL=duck-dev-lib.mjs.map