duck-dev-lib 0.0.43 → 0.0.45

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 {
@@ -3754,18 +3759,281 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                 args: [DuckDevSegmentButton]
             }], buttonsContainer: [{ type: i0.ViewChild, args: ['buttonsContainer', { isSignal: true }] }] } });
 
+class DuckDevSegmentNeobrutal {
+    cdr = inject(ChangeDetectorRef);
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
+    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    valueChange = output();
+    ionChange = output();
+    segmentButtons;
+    buttonsContainer = viewChild.required('buttonsContainer');
+    buttons = [];
+    selectedValue;
+    indicatorPosition = 0;
+    indicatorWidth = 0;
+    segmentStyle = computed(() => this.getSegmentStyle(this.color()), { ...(ngDevMode ? { debugName: "segmentStyle" } : {}) });
+    constructor() {
+        afterNextRender(() => {
+            this.rebuildButtons();
+            if (!this.selectedValue && this.buttons.length > 0) {
+                this.selectedValue = this.buttons[0].value;
+            }
+            this.updateIndicator(this.getSelectedIndex());
+            this.cdr.markForCheck();
+        });
+    }
+    ngAfterContentInit() {
+        this.rebuildButtons();
+        const incoming = this.value();
+        this.selectedValue = incoming ?? this.selectedValue;
+        this.segmentButtons.changes.subscribe(() => {
+            this.rebuildButtons();
+            setTimeout(() => this.updateIndicator(this.getSelectedIndex()));
+        });
+    }
+    selectButton(value, index) {
+        if (this.selectedValue === value) {
+            this.updateIndicator(index);
+            return;
+        }
+        this.selectedValue = value;
+        this.valueChange.emit(value);
+        this.ionChange.emit({ detail: { value } });
+        this.updateIndicator(index);
+    }
+    rebuildButtons() {
+        const btns = this.segmentButtons?.toArray() ?? [];
+        this.buttons = btns.map((button) => ({
+            value: button.value(),
+            contentId: button.contentId(),
+            template: button.templateRef(),
+        }));
+    }
+    getSelectedIndex() {
+        return Math.max(0, this.buttons.findIndex((button) => button.value === this.selectedValue));
+    }
+    updateIndicator(index) {
+        const container = this.buttonsContainer().nativeElement;
+        const buttonElements = container.querySelectorAll('.dd-segment-neo__button');
+        if (buttonElements[index]) {
+            const button = buttonElements[index];
+            this.indicatorWidth = button.offsetWidth;
+            this.indicatorPosition = button.offsetLeft;
+        }
+    }
+    getSegmentStyle(color) {
+        switch (color) {
+            case AccentEnumColor.Violet:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-secondary)',
+                    '--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-secondary) 84%, var(--dd-base-0))',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-yellow)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-accent-blue)',
+                    '--dd-segment-neo-text': 'var(--dd-base-0)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-0) 74%, transparent)',
+                };
+            case AccentEnumColor.Orange:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-accent-orange)',
+                    '--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-accent-yellow) 68%, var(--dd-base-0))',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-pink)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-accent-yellow)',
+                    '--dd-segment-neo-text': 'var(--dd-base-600)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 66%, transparent)',
+                };
+            case AccentEnumColor.Gray:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-100)',
+                    '--dd-segment-neo-panel': 'var(--dd-base-0)',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-blue)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-400)',
+                    '--dd-segment-neo-text': 'var(--dd-base-600)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
+                };
+            case AccentEnumColor.Dark:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-600)',
+                    '--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500))',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-yellow)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-accent-orange)',
+                    '--dd-segment-neo-text': 'var(--dd-base-0)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-0) 68%, transparent)',
+                };
+            case AccentEnumColor.White:
+            default:
+                return {
+                    '--dd-segment-neo-surface': 'var(--dd-base-0)',
+                    '--dd-segment-neo-panel': 'var(--dd-base-100)',
+                    '--dd-segment-neo-accent': 'var(--dd-base-accent-orange)',
+                    '--dd-segment-neo-shadow': 'var(--dd-base-accent-blue)',
+                    '--dd-segment-neo-text': 'var(--dd-base-600)',
+                    '--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
+                };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n  <div class=\"dd-segment-neo__indicator-shell\">\n    <div\n      class=\"dd-segment-neo__indicator\"\n      [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n      [style.width.px]=\"indicatorWidth\"\n    >\n      <span class=\"dd-segment-neo__indicator-notch\"></span>\n    </div>\n  </div>\n\n  <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n    @for (button of buttons; track button.value; let i = $index) {\n      <button\n        class=\"dd-segment-neo__button\"\n        [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <span class=\"dd-segment-neo__button-copy\">\n          <ng-container *ngTemplateOutlet=\"button.template\" />\n        </span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-orange);--dd-segment-neo-shadow: var(--dd-base-accent-blue);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-base-600);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-base-600);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-base-600);border-bottom:3px solid var(--dd-base-600);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, decorators: [{
+            type: Component,
+            args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n  <div class=\"dd-segment-neo__indicator-shell\">\n    <div\n      class=\"dd-segment-neo__indicator\"\n      [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n      [style.width.px]=\"indicatorWidth\"\n    >\n      <span class=\"dd-segment-neo__indicator-notch\"></span>\n    </div>\n  </div>\n\n  <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n    @for (button of buttons; track button.value; let i = $index) {\n      <button\n        class=\"dd-segment-neo__button\"\n        [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <span class=\"dd-segment-neo__button-copy\">\n          <ng-container *ngTemplateOutlet=\"button.template\" />\n        </span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-orange);--dd-segment-neo-shadow: var(--dd-base-accent-blue);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-base-600);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-base-600);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-base-600);border-bottom:3px solid var(--dd-base-600);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
+                type: ContentChildren,
+                args: [DuckDevSegmentButton]
+            }], buttonsContainer: [{ type: i0.ViewChild, args: ['buttonsContainer', { isSignal: true }] }] } });
+
 class SegmentBlock {
     selected = signal('all', { ...(ngDevMode ? { debugName: "selected" } : {}) });
+    neobrutalSelected = signal('rush', { ...(ngDevMode ? { debugName: "neobrutalSelected" } : {}) });
     lastEvent = signal('', { ...(ngDevMode ? { debugName: "lastEvent" } : {}) });
+    colorViolet = AccentEnumColor.Violet;
+    colorOrange = AccentEnumColor.Orange;
     onIonChange(e) {
         this.lastEvent.set(e.detail.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n          <duck-dev-segment-neobrutal\n            [value]=\"neobrutalSelected()\"\n            [color]=\"colorViolet\"\n            (valueChange)=\"neobrutalSelected.set($event)\"\n          >\n            <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ neobrutalSelected() }}</b>\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n          <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n            <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "component", type: DuckDevSegmentNeobrutal, selector: "duck-dev-segment-neobrutal", inputs: ["value", "color"], outputs: ["valueChange", "ionChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, decorators: [{
             type: Component,
-            args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton], template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+            args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton, DuckDevSegmentNeobrutal], template: "<div class=\"demo-container\">\n  <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n      <pre><code>&lt;dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\"&gt;\n  &lt;dd-segment-button value=\"all\"&gt;All&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"articles\"&gt;Articles&lt;/dd-segment-button&gt;\n  &lt;dd-segment-button value=\"videos\"&gt;Videos&lt;/dd-segment-button&gt;\n&lt;/dd-segment-classic&gt;</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n        <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n        <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n        <li><strong>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | transloco }}</li>\n        <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n        <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n          <dd-segment-classic>\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n          <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n          <div class=\"state-hint\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ selected() }}</b>\n            <span class=\"divider\">|</span>\n            <span>ionChange: <b>{{ lastEvent() }}</b></span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n          <dd-segment-classic [value]=\"'all'\">\n            <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n          </dd-segment-classic>\n        </div>\n      </div>\n\n      <div class=\"example-row\">\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n          <duck-dev-segment-neobrutal\n            [value]=\"neobrutalSelected()\"\n            [color]=\"colorViolet\"\n            (valueChange)=\"neobrutalSelected.set($event)\"\n          >\n            <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n          <div class=\"state-hint state-hint--neobrutal\">\n            <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n            <b>{{ neobrutalSelected() }}</b>\n          </div>\n        </div>\n\n        <div class=\"example-item example-item--neobrutal\">\n          <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n          <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n            <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n            <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n          </duck-dev-segment-neobrutal>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
+        }] });
+
+function clampProgress(value) {
+    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 {
@@ -3776,6 +4044,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 +4062,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 +4084,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-CDxyWfrd.mjs'),
+    ru: import('./duck-dev-lib-ru-1jQ8uE1i.mjs'),
 };
 
 /*
@@ -3831,5 +4101,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, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
 //# sourceMappingURL=duck-dev-lib.mjs.map