duck-dev-lib 0.0.46 → 0.0.47

package/fesm2022/duck-dev-lib.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, inject, DestroyRef, Injectable, afterNextRender, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, viewChild, ContentChildren, afterRenderEffect } from '@angular/core';
+import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, inject, DestroyRef, Injectable, afterNextRender, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, afterRenderEffect, viewChild, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
-import { NgStyle, CommonModule, JsonPipe, NgTemplateOutlet, isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { NgStyle, CommonModule, JsonPipe, NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i1$3 from '@jsverse/transloco';
 import { TranslocoPipe, TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import * as i1$1 from '@angular/forms';
@@ -521,11 +521,11 @@ class DuckDevTabVertical {
         return this.activeTabIndex() === index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n  <div class=\"tab-sidebar\">\n    @for (tab of tabs(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        [class.active]=\"isActive(i)\"\n        (click)=\"selectTab(i)\"\n        type=\"button\"\n      >\n        @if (tab.icon) {\n          <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n        }\n        <span class=\"tab-label\">{{ tab.label }}</span>\n      </button>\n    }\n    <div\n      class=\"tab-indicator\"\n      [style.top.px]=\"indicatorTop()\"\n      [style.height.px]=\"indicatorHeight()\"\n    ></div>\n  </div>\n\n  <div class=\"tab-content-wrapper\">\n    <div\n      class=\"tab-content\"\n      [class.slide-up]=\"animationDirection() === 'up'\"\n      [class.slide-down]=\"animationDirection() === 'down'\"\n      [attr.data-active-index]=\"activeTabIndex()\"\n      [attr.data-animation-key]=\"animationKey()\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTabVertical, isStandalone: true, selector: "duck-dev-tab-vertical", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"duck-dev-tab-vertical\">\n  <div class=\"tab-sidebar\">\n    @for (tab of tabs(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        [class.active]=\"isActive(i)\"\n        (click)=\"selectTab(i)\"\n        type=\"button\"\n      >\n        @if (tab.icon) {\n          <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n        }\n        <span class=\"tab-label\">{{ tab.label }}</span>\n      </button>\n    }\n    <div\n      class=\"tab-indicator\"\n      [style.top.px]=\"indicatorTop()\"\n      [style.height.px]=\"indicatorHeight()\"\n    ></div>\n  </div>\n\n  <div class=\"tab-content-wrapper\">\n    <div\n      class=\"tab-content\"\n      [class.slide-up]=\"animationDirection() === 'up'\"\n      [class.slide-down]=\"animationDirection() === 'down'\"\n      [attr.data-active-index]=\"activeTabIndex()\"\n      [attr.data-animation-key]=\"animationKey()\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTabVertical, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n  <div class=\"tab-sidebar\">\n    @for (tab of tabs(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        [class.active]=\"isActive(i)\"\n        (click)=\"selectTab(i)\"\n        type=\"button\"\n      >\n        @if (tab.icon) {\n          <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n        }\n        <span class=\"tab-label\">{{ tab.label }}</span>\n      </button>\n    }\n    <div\n      class=\"tab-indicator\"\n      [style.top.px]=\"indicatorTop()\"\n      [style.height.px]=\"indicatorHeight()\"\n    ></div>\n  </div>\n\n  <div class=\"tab-content-wrapper\">\n    <div\n      class=\"tab-content\"\n      [class.slide-up]=\"animationDirection() === 'up'\"\n      [class.slide-down]=\"animationDirection() === 'down'\"\n      [attr.data-active-index]=\"activeTabIndex()\"\n      [attr.data-animation-key]=\"animationKey()\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
+            args: [{ selector: 'duck-dev-tab-vertical', standalone: true, imports: [CommonModule], template: "<div class=\"duck-dev-tab-vertical\">\n  <div class=\"tab-sidebar\">\n    @for (tab of tabs(); track tab.id; let i = $index) {\n      <button\n        #tabButton\n        class=\"tab-button\"\n        [class.active]=\"isActive(i)\"\n        (click)=\"selectTab(i)\"\n        type=\"button\"\n      >\n        @if (tab.icon) {\n          <span class=\"tab-icon\" [innerHTML]=\"tab.icon\"></span>\n        }\n        <span class=\"tab-label\">{{ tab.label }}</span>\n      </button>\n    }\n    <div\n      class=\"tab-indicator\"\n      [style.top.px]=\"indicatorTop()\"\n      [style.height.px]=\"indicatorHeight()\"\n    ></div>\n  </div>\n\n  <div class=\"tab-content-wrapper\">\n    <div\n      class=\"tab-content\"\n      [class.slide-up]=\"animationDirection() === 'up'\"\n      [class.slide-down]=\"animationDirection() === 'down'\"\n      [attr.data-active-index]=\"activeTabIndex()\"\n      [attr.data-animation-key]=\"animationKey()\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\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)}.duck-dev-tab-vertical{width:100%;height:100%;display:flex;flex-direction:row;overflow:hidden}.tab-sidebar{position:relative;display:flex;flex-direction:column;min-width:200px;height:100%;border-right:2px solid var(--dd-base-300);background:transparent;flex-shrink:0;overflow-y:auto}.tab-button{display:flex;align-items:center;gap:12px;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--dd-base-400);transition:all .3s ease;position:relative;z-index:1;outline:none;text-align:left;width:100%}.tab-button:hover{color:var(--dd-base-500);background:var(--dd-base-100)}.tab-button.active{color:var(--dd-base-accent-blue);background:var(--dd-base-100)}.tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:transform .3s ease}.tab-button:hover .tab-icon{transform:scale(1.1)}.tab-button.active .tab-icon{transform:scale(1.15)}.tab-icon ::ng-deep svg{width:100%;height:100%;fill:currentColor}.tab-label{flex:1}.tab-indicator{position:absolute;right:-2px;width:2px;background:var(--dd-base-accent-blue);transition:top .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1);z-index:2}.tab-content-wrapper{position:relative;flex:1;overflow:auto;padding:20px;min-width:0}.tab-content{width:100%;min-height:100%}.tab-content.slide-down,.tab-content.slide-up{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.tab-content.slide-down{animation-name:slideInDown}.tab-content.slide-up{animation-name:slideInUp}@keyframes slideInDown{0%{transform:translateY(100%);opacity:0;filter:blur(4px)}50%{filter:blur(2px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes slideInUp{0%{transform:translateY(-100%);opacity:0;filter:blur(8px)}50%{filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
 
 class DuckDevCardSection {
@@ -3957,363 +3957,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     ], template: "<div class=\"demo-container\">\n  <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <duck-dev-tab [tabs]=\"styleTabs\" (tabChange)=\"onStyleTabChange($event)\">\n      @if (activeStyleTab().id === 'classic') {\n        <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n          <pre><code>&lt;dd-tooltip\n  [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n  [color]=\"colorViolet\"\n  [placement]=\"'top'\"\n  [delayCloseMs]=\"120\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/dd-tooltip&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n            </dd-card-accent>\n          </div>\n\n          <ul>\n            <li><strong>text:</strong> string \u2014 content displayed inside the tooltip.</li>\n            <li>\n              <strong>color:</strong> AccentEnumColor \u2014 available values: Dark, Violet, Orange, Gray,\n              White.\n            </li>\n            <li>\n              <strong>placement:</strong> TooltipPlacement \u2014 top | bottom | right | left | top-start |\n              top-end | bottom-start | bottom-end | left-start | left-end | right-start | right-end\n            </li>\n            <li>\n              <strong>delayCloseMs:</strong> number \u2014 delay in milliseconds before closing after mouse\n              leave (default: 120).\n            </li>\n          </ul>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n              <dd-tooltip [text]=\"'tooltipDoc.examplesText.basic' | transloco\" [color]=\"colorDark\">\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.top' | transloco\"\n                [color]=\"colorViolet\"\n                [placement]=\"'top'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.right' | transloco\"\n                [color]=\"colorOrange\"\n                [placement]=\"'right'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n          </div>\n\n          <div class=\"example-row\">\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.leftStart' | transloco\"\n                [color]=\"colorGray\"\n                [placement]=\"'left-start'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n            <div class=\"example-item\">\n              <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n              <dd-tooltip\n                [text]=\"'tooltipDoc.examplesText.bottomEnd' | transloco\"\n                [color]=\"colorWhite\"\n                [placement]=\"'bottom-end'\"\n              >\n                <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n              </dd-tooltip>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <h2>Neobrutalism Tooltip</h2>\n        <dd-card-accent [color]=\"colorWhite\">\n          <div [innerHTML]=\"'tooltipDoc.basic.description' | transloco\"></div>\n        </dd-card-accent>\n\n        <div class=\"usage-block\">\n          <h3>Neobrutalism usage</h3>\n          <pre><code>&lt;duck-dev-tooltip-neobrutal\n  [text]=\"'Hot take inside brutal shell'\"\n  [color]=\"colorOrange\"\n  [placement]=\"'right'\"\n&gt;\n  &lt;button&gt;Hover me&lt;/button&gt;\n&lt;/duck-dev-tooltip-neobrutal&gt;</code></pre>\n        </div>\n\n        <div class=\"inputs-block\">\n          <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n          <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n            <dd-card-accent [color]=\"colorWhite\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.text' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorViolet\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.color' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorOrange\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.placement' | transloco\"></div>\n            </dd-card-accent>\n            <dd-card-accent [color]=\"colorGray\">\n              <div [innerHTML]=\"'tooltipDoc.inputsDesc.delay' | transloco\"></div>\n            </dd-card-accent>\n          </div>\n        </div>\n\n        <div class=\"examples-block\">\n          <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n          <div class=\"example-row\">\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Violet</p>\n              <duck-dev-tooltip-neobrutal\n                [text]=\"'Loud UI hint with brutal edge'\"\n                [color]=\"colorViolet\"\n                [placement]=\"'top'\"\n              >\n                <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n              </duck-dev-tooltip-neobrutal>\n            </div>\n            <div class=\"example-item example-item--neobrutal\">\n              <p class=\"example-label\">Neobrutalism / Orange</p>\n              <duck-dev-tooltip-neobrutal\n                [text]=\"'Quick signal for actions and shortcuts'\"\n                [color]=\"colorOrange\"\n                [placement]=\"'right'\"\n              >\n                <button class=\"example-btn example-btn--neobrutal\">Hover me</button>\n              </duck-dev-tooltip-neobrutal>\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:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-base-0);border:4px solid var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);border-radius:0}.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 .example-btn{padding:10px 16px;border-radius:6px;border:1px solid var(--dd-base-300);background:var(--dd-base-0);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .05s ease}.demo-container .examples-block .example-row .example-item .example-btn:hover{background:var(--dd-base-100);box-shadow:0 2px 6px var(--dd-base-300)}.demo-container .examples-block .example-row .example-item .example-btn:active{transform:translateY(1px)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal{padding:12px 18px;border:3px solid var(--dd-base-600);border-radius:0;background:var(--dd-base-accent-yellow);color:var(--dd-base-600);box-shadow:4px 4px 0 var(--dd-base-600);font-weight:900;text-transform:uppercase;letter-spacing:.08em}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:hover{background:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-600)}.demo-container .examples-block .example-row .example-item .example-btn--neobrutal:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
         }] });
 
-class QuickStartBlock {
-    colorViolet = AccentEnumColor.Violet;
-    colorOrange = AccentEnumColor.Orange;
-    colorWhite = AccentEnumColor.White;
-    colorGray = AccentEnumColor.Gray;
-    colorDark = AccentEnumColor.Dark;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: QuickStartBlock, isStandalone: true, selector: "app-quick-start-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'quickStart.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\" [innerHTML]=\"'quickStart.intro' | transloco\"></div>\n    </dd-card-accent>\n    <dd-card-accent [color]=\"colorGray\">\n      <div class=\"description\" [innerHTML]=\"'quickStart.principles' | transloco\"></div>\n    </dd-card-accent>\n\n    <h2>{{ 'quickStart.sections.install' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.install.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>{{ 'quickStart.install.snippet' | transloco }}</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.palette' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorViolet\">\n      <div class=\"description\">{{ 'quickStart.palette.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>/* variables you can use in CSS */\n--dd-base-0 .. --dd-base-600\n--dd-base-secondary\n--dd-base-accent-orange\n--dd-base-accent-blue\n/* see projects/duck-dev-lib/src/styles/variables.scss for full list */\n</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.themeSwitch' | transloco }}</h2>\n    <ng-template #themeHtml>\n      <pre><code>{{ 'quickStart.themeSwitch.snippet' | transloco }}</code></pre>\n    </ng-template>\n    <ng-template #themeToggle>\n      <pre><code>{{ 'quickStart.themeSwitch.toggleSnippet' | transloco }}</code></pre>\n    </ng-template>\n\n    <dd-card-accent [color]=\"colorOrange\">\n      <div class=\"description\">{{ 'quickStart.themeSwitch.text' | transloco }}</div>\n    </dd-card-accent>\n\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.themeSwitch.indexLabel' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'quickStart.themeSwitch.indexHtmlTitle' | transloco\"\n            [content]=\"themeHtml\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.themeSwitch.toggleLabel' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'quickStart.themeSwitch.toggleTitle' | transloco\"\n            [content]=\"themeToggle\"\n            [color]=\"colorViolet\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <h2>{{ 'quickStart.sections.custom' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.custom.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>{{ 'quickStart.custom.snippet' | transloco }}</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.use' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.use.text' | transloco }}</div>\n    </dd-card-accent>\n\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.use.buttonsTitle' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n          <duck-dev-button-casper [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n          <duck-dev-button-casper [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.use.cardsTitle' | transloco }}</p>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div>Violet card accent</div>\n          </dd-card-accent>\n          <dd-card-accent [color]=\"colorOrange\">\n            <div>Orange card accent</div>\n          </dd-card-accent>\n          <dd-card-accent [color]=\"colorGray\">\n            <div>Gray card accent</div>\n          </dd-card-accent>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+function clampProgress(value) {
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.min(100, Math.max(0, value));
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, decorators: [{
+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: 'app-quick-start-block', standalone: true, imports: [
-                        TranslocoPipe,
-                        DuckDevCardAccent,
-                        DuckDevAccordionComponent,
-                        ButtonCasper,
-                        DuckDevCardSection,
-                    ], template: "<div class=\"demo-container\">\n  <h1>{{ 'quickStart.title' | transloco }}</h1>\n\n  <dd-card-section>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\" [innerHTML]=\"'quickStart.intro' | transloco\"></div>\n    </dd-card-accent>\n    <dd-card-accent [color]=\"colorGray\">\n      <div class=\"description\" [innerHTML]=\"'quickStart.principles' | transloco\"></div>\n    </dd-card-accent>\n\n    <h2>{{ 'quickStart.sections.install' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.install.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>{{ 'quickStart.install.snippet' | transloco }}</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.palette' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorViolet\">\n      <div class=\"description\">{{ 'quickStart.palette.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>/* variables you can use in CSS */\n--dd-base-0 .. --dd-base-600\n--dd-base-secondary\n--dd-base-accent-orange\n--dd-base-accent-blue\n/* see projects/duck-dev-lib/src/styles/variables.scss for full list */\n</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.themeSwitch' | transloco }}</h2>\n    <ng-template #themeHtml>\n      <pre><code>{{ 'quickStart.themeSwitch.snippet' | transloco }}</code></pre>\n    </ng-template>\n    <ng-template #themeToggle>\n      <pre><code>{{ 'quickStart.themeSwitch.toggleSnippet' | transloco }}</code></pre>\n    </ng-template>\n\n    <dd-card-accent [color]=\"colorOrange\">\n      <div class=\"description\">{{ 'quickStart.themeSwitch.text' | transloco }}</div>\n    </dd-card-accent>\n\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.themeSwitch.indexLabel' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'quickStart.themeSwitch.indexHtmlTitle' | transloco\"\n            [content]=\"themeHtml\"\n          />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.themeSwitch.toggleLabel' | transloco }}</p>\n          <duck-dev-accordion\n            [title]=\"'quickStart.themeSwitch.toggleTitle' | transloco\"\n            [content]=\"themeToggle\"\n            [color]=\"colorViolet\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <h2>{{ 'quickStart.sections.custom' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.custom.text' | transloco }}</div>\n    </dd-card-accent>\n    <div class=\"usage-block\">\n      <pre><code>{{ 'quickStart.custom.snippet' | transloco }}</code></pre>\n    </div>\n\n    <h2>{{ 'quickStart.sections.use' | transloco }}</h2>\n    <dd-card-accent [color]=\"colorWhite\">\n      <div class=\"description\">{{ 'quickStart.use.text' | transloco }}</div>\n    </dd-card-accent>\n\n    <div class=\"examples-block\">\n      <div class=\"example-row\">\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.use.buttonsTitle' | transloco }}</p>\n          <duck-dev-button-casper [text]=\"'Violet'\" [colorButton]=\"colorViolet\" />\n          <duck-dev-button-casper [text]=\"'Orange'\" [colorButton]=\"colorOrange\" />\n          <duck-dev-button-casper [text]=\"'Dark'\" [colorButton]=\"colorDark\" />\n        </div>\n        <div class=\"example-item\">\n          <p class=\"example-label\">{{ 'quickStart.use.cardsTitle' | transloco }}</p>\n          <dd-card-accent [color]=\"colorViolet\">\n            <div>Violet card accent</div>\n          </dd-card-accent>\n          <dd-card-accent [color]=\"colorOrange\">\n            <div>Orange card accent</div>\n          </dd-card-accent>\n          <dd-card-accent [color]=\"colorGray\">\n            <div>Gray card accent</div>\n          </dd-card-accent>\n        </div>\n      </div>\n    </div>\n  </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
-        }] });
+            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 DuckDevModalClassic {
-    platformId = inject(PLATFORM_ID);
-    elementRef = inject(ElementRef);
-    isOpen = input.required({ ...(ngDevMode ? { debugName: "isOpen" } : {}) });
-    ngOnInit() {
-        if (isPlatformBrowser(this.platformId)) {
-            document.body.appendChild(this.elementRef.nativeElement);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevModalClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevModalClassic, isStandalone: true, selector: "dd-duck-dev-modal-classic", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n    <ng-content />\n  </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] });
+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: DuckDevModalClassic, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressStack, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-duck-dev-modal-classic', imports: [], template: "@if (isOpen()) {\n  <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n    <ng-content />\n  </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] }]
-        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }] } });
+            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 ModalBlock {
-    isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
-    open() {
-        this.isOpen.set(true);
-    }
-    close() {
-        this.isOpen.set(false);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ModalBlock, isStandalone: true, selector: "app-modal-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section,.demo-container dd-card-section{display:block;margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2,.demo-container dd-card-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description,.demo-container dd-card-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3,.demo-container dd-card-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevModalClassic, selector: "dd-duck-dev-modal-classic", inputs: ["isOpen"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+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: ModalBlock, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressMeter, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modal-block', imports: [TranslocoModule, DuckDevCardSection, DuckDevModalClassic, DuckDevIcon], template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section,.demo-container dd-card-section{display:block;margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2,.demo-container dd-card-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description,.demo-container dd-card-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3,.demo-container dd-card-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"] }]
-        }] });
+            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 DuckDevSegmentButton {
+class DuckDevProgressNeobrutalSlab {
+    label = input.required({ ...(ngDevMode ? { debugName: "label" } : {}) });
     value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
-    contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
-    templateRef = viewChild.required('contentTpl');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSegmentButton, isStandalone: true, selector: "dd-segment-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] });
+    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: DuckDevSegmentButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-segment-button', imports: [], template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
+            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 DuckDevSegmentClassic {
-    cdr = inject(ChangeDetectorRef);
-    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
-    valueChange = output();
-    ionChange = output();
-    segmentButtons;
-    buttonsContainer = viewChild.required('buttonsContainer');
-    buttons = [];
-    selectedValue;
-    indicatorPosition = 2;
-    indicatorWidth = 0;
-    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((b) => ({ value: b.value(), contentId: b.contentId(), template: b.templateRef() }));
-    }
-    getSelectedIndex() {
-        return Math.max(0, this.buttons.findIndex((b) => b.value === this.selectedValue));
-    }
-    updateIndicator(index) {
-        const container = this.buttonsContainer().nativeElement;
-        const buttonElements = container.querySelectorAll('.segment-button');
-        if (buttonElements[index]) {
-            const button = buttonElements[index];
-            this.indicatorWidth = button.offsetWidth;
-            this.indicatorPosition = button.offsetLeft;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", 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=\"segment-container\">\n  <div class=\"segment-background\"></div>\n  <div\n    class=\"segment-indicator\"\n    [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n    [style.width.px]=\"indicatorWidth\"\n  ></div>\n  <div\n    class=\"segment-buttons\"\n    #buttonsContainer\n  >\n    @for (button of buttons; track button; let i = $index) {\n      <button\n        class=\"segment-button\"\n        [class.segment-button-checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <ng-container *ngTemplateOutlet=\"button.template\" />\n      </button>\n    }\n  </div>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+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: DuckDevSegmentClassic, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-segment-classic', imports: [
-                        NgTemplateOutlet
-                    ], template: "<div class=\"segment-container\">\n  <div class=\"segment-background\"></div>\n  <div\n    class=\"segment-indicator\"\n    [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n    [style.width.px]=\"indicatorWidth\"\n  ></div>\n  <div\n    class=\"segment-buttons\"\n    #buttonsContainer\n  >\n    @for (button of buttons; track button; let i = $index) {\n      <button\n        class=\"segment-button\"\n        [class.segment-button-checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <ng-container *ngTemplateOutlet=\"button.template\" />\n      </button>\n    }\n  </div>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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 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>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, 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 }] }] } });
+            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" } : {}) });
@@ -4330,44 +4056,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             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"] }]
-        }] });
-
 function getClassicSpeakerBubbleStyle(color) {
     switch (color) {
         case AccentEnumColor.Violet:
@@ -4469,23 +4157,57 @@ function getNeobrutalSpeakerBubbleStyle(color) {
     }
 }
 
-const DEFAULT_BUBBLE_GEOMETRY$2 = {
-    side: 'left',
-    style: {
-        left: '0px',
-        top: '0px',
-        width: '1px',
-        height: '1px',
+const TAIL_VARIANT_METRICS = {
+    classic: {
+        fallbackDy: 24,
+        padding: 18,
+    },
+    soft: {
+        fallbackDy: 28,
+        padding: 20,
+    },
+    outline: {
+        fallbackDy: 22,
+        padding: 16,
+    },
+    'neobrutal-slab': {
+        fallbackDy: 28,
+        padding: 22,
+    },
+    'neobrutal-ticket': {
+        fallbackDy: 28,
+        padding: 22,
     },
-    viewBox: '0 0 1 1',
-    path: '',
 };
 function clamp$3(value, min, max) {
     return Math.min(Math.max(value, min), max);
 }
+function lerpPoint(from, to, t) {
+    return {
+        x: from.x + (to.x - from.x) * t,
+        y: from.y + (to.y - from.y) * t,
+    };
+}
 function serializePoint$3(point) {
     return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
 }
+function toPath(points, close = true) {
+    if (points.length === 0) {
+        return '';
+    }
+    const [first, ...rest] = points;
+    const path = [`M ${serializePoint$3(first)}`];
+    for (const point of rest) {
+        path.push(`L ${serializePoint$3(point)}`);
+    }
+    if (close) {
+        path.push('Z');
+    }
+    return path.join(' ');
+}
+function getBubbleElement$3(hostElement) {
+    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
+}
 function closestPointOnRect$3(rect, point) {
     return {
         x: clamp$3(point.x, rect.left, rect.right),
@@ -4500,266 +4222,9 @@ function resolveTargetElement$3(source, hostElement, documentRef) {
         return source;
     }
     try {
-        const localMatch = hostElement.parentElement?.querySelector(source);
-        if (localMatch) {
-            return localMatch;
-        }
-        return documentRef.querySelector(source);
-    }
-    catch {
-        return null;
-    }
-}
-function getBubbleElement$3(hostElement) {
-    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
-}
-function createUnifiedBubblePath$2(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY) {
-    const left = offsetX;
-    const top = offsetY;
-    const right = offsetX + width;
-    const bottom = offsetY + height;
-    const start = { x: left + radius, y: top };
-    const bottomRight = { x: right, y: bottom - radius };
-    const bottomRightArcEnd = { x: right - radius, y: bottom };
-    const baseStart = { x: offsetX + baseStartX, y: bottom };
-    const baseEnd = { x: offsetX + baseEndX, y: bottom };
-    const tip = { x: offsetX + tipX, y: offsetY + tipY };
-    const bottomLeftArcStart = { x: left + radius, y: bottom };
-    const leftBottom = { x: left, y: bottom - radius };
-    const leftTop = { x: left, y: top + radius };
-    return [
-        `M ${serializePoint$3(start)}`,
-        `H ${(right - radius).toFixed(2)}`,
-        `A ${radius} ${radius} 0 0 1 ${right.toFixed(2)} ${(top + radius).toFixed(2)}`,
-        `V ${bottomRight.y.toFixed(2)}`,
-        `A ${radius} ${radius} 0 0 1 ${serializePoint$3(bottomRightArcEnd)}`,
-        `H ${baseEnd.x.toFixed(2)}`,
-        `L ${serializePoint$3(tip)}`,
-        `L ${serializePoint$3(baseStart)}`,
-        `H ${bottomLeftArcStart.x.toFixed(2)}`,
-        `A ${radius} ${radius} 0 0 1 ${serializePoint$3(leftBottom)}`,
-        `V ${leftTop.y.toFixed(2)}`,
-        `A ${radius} ${radius} 0 0 1 ${serializePoint$3(start)}`,
-        'Z',
-    ].join(' ');
-}
-class DuckDevSpeakerBubbleClassic {
-    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
-    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
-    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
-    hostRef = inject((ElementRef));
-    documentRef = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    platformId = inject(PLATFORM_ID);
-    isBrowser = isPlatformBrowser(this.platformId);
-    bubbleGeometry = signal(DEFAULT_BUBBLE_GEOMETRY$2, { ...(ngDevMode ? { debugName: "bubbleGeometry" } : {}) });
-    animationFrameId = -1;
-    resizeObserver = null;
-    observedTarget = null;
-    observersInitialized = false;
-    bubbleStyle = computed(() => getClassicSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
-    resolvedTail = computed(() => this.bubbleGeometry().side, { ...(ngDevMode ? { debugName: "resolvedTail" } : {}) });
-    shapeStyle = computed(() => this.bubbleGeometry().style, { ...(ngDevMode ? { debugName: "shapeStyle" } : {}) });
-    shapeViewBox = computed(() => this.bubbleGeometry().viewBox, { ...(ngDevMode ? { debugName: "shapeViewBox" } : {}) });
-    shapePath = computed(() => this.bubbleGeometry().path, { ...(ngDevMode ? { debugName: "shapePath" } : {}) });
-    constructor() {
-        afterNextRender(() => {
-            this.setupObservers();
-            this.scheduleRefresh();
-        });
-        afterRenderEffect(() => {
-            this.tail();
-            this.target();
-            this.setupObservers();
-            this.scheduleRefresh();
-        });
-        this.destroyRef.onDestroy(() => {
-            this.documentRef.defaultView?.removeEventListener('resize', this.scheduleRefresh);
-            this.documentRef.removeEventListener('scroll', this.scheduleRefresh, true);
-            if (this.animationFrameId !== -1) {
-                cancelAnimationFrame(this.animationFrameId);
-            }
-            this.resizeObserver?.disconnect();
-            this.resizeObserver = null;
-            this.observedTarget = null;
-        });
-    }
-    scheduleRefresh = () => {
-        if (!this.isBrowser || this.animationFrameId !== -1) {
-            return;
-        }
-        this.animationFrameId = requestAnimationFrame(() => {
-            this.animationFrameId = -1;
-            this.refreshShape();
-        });
-    };
-    setupObservers() {
-        if (!this.isBrowser || this.observersInitialized) {
-            return;
-        }
-        const bubbleElement = getBubbleElement$3(this.hostRef.nativeElement);
-        if (!bubbleElement) {
-            return;
-        }
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => this.scheduleRefresh());
-            this.resizeObserver.observe(bubbleElement);
-        }
-        const targetElement = resolveTargetElement$3(this.target(), this.hostRef.nativeElement, this.documentRef);
-        if (targetElement) {
-            this.resizeObserver?.observe(targetElement);
-            this.observedTarget = targetElement;
-        }
-        this.documentRef.defaultView?.addEventListener('resize', this.scheduleRefresh);
-        this.documentRef.addEventListener('scroll', this.scheduleRefresh, true);
-        this.observersInitialized = true;
-    }
-    refreshShape() {
-        if (!this.isBrowser) {
-            return;
-        }
-        const bubbleElement = getBubbleElement$3(this.hostRef.nativeElement);
-        if (!bubbleElement) {
-            return;
-        }
-        const targetElement = resolveTargetElement$3(this.target(), this.hostRef.nativeElement, this.documentRef);
-        if (this.resizeObserver && targetElement !== this.observedTarget) {
-            if (this.observedTarget) {
-                this.resizeObserver.unobserve(this.observedTarget);
-            }
-            if (targetElement) {
-                this.resizeObserver.observe(targetElement);
-            }
-            this.observedTarget = targetElement;
-        }
-        const bubbleRect = bubbleElement.getBoundingClientRect();
-        const targetRect = targetElement?.getBoundingClientRect() ?? null;
-        const side = this.resolveTailSide(bubbleRect, targetRect);
-        const seventh = bubbleRect.width / 7;
-        const baseStartX = side === 'left'
-            ? clamp$3(seventh, 20, bubbleRect.width - 56)
-            : clamp$3(bubbleRect.width - seventh * 2, 20, bubbleRect.width - 56);
-        const baseEndX = side === 'left'
-            ? clamp$3(seventh * 2, baseStartX + 22, bubbleRect.width - 20)
-            : clamp$3(bubbleRect.width - seventh, baseStartX + 22, bubbleRect.width - 20);
-        const anchor = {
-            x: bubbleRect.left + (baseStartX + baseEndX) / 2,
-            y: bubbleRect.bottom,
-        };
-        const targetPoint = targetRect
-            ? closestPointOnRect$3(targetRect, anchor)
-            : {
-                x: bubbleRect.left + (side === 'left' ? baseStartX : baseEndX),
-                y: bubbleRect.bottom + Math.max(24, bubbleRect.height / 4),
-            };
-        const tipX = clamp$3(targetPoint.x - bubbleRect.left, -48, bubbleRect.width + 48);
-        const tipY = Math.max(targetPoint.y - bubbleRect.top, bubbleRect.height + 22);
-        const minX = Math.min(0, tipX);
-        const maxX = Math.max(bubbleRect.width, tipX);
-        const maxY = Math.max(bubbleRect.height, tipY);
-        const padding = 10;
-        const offsetX = padding - minX;
-        const offsetY = padding;
-        const width = maxX - minX + padding * 2;
-        const height = maxY + padding * 2;
-        this.bubbleGeometry.set({
-            side,
-            style: {
-                left: `${minX - padding}px`,
-                top: `${-padding}px`,
-                width: `${width}px`,
-                height: `${height}px`,
-            },
-            viewBox: `0 0 ${width.toFixed(2)} ${height.toFixed(2)}`,
-            path: createUnifiedBubblePath$2(bubbleRect.width, bubbleRect.height, 18, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY),
-        });
-    }
-    resolveTailSide(bubbleRect, targetRect) {
-        const tail = this.tail();
-        if (tail === 'left' || tail === 'right') {
-            return tail;
-        }
-        const targetCenterX = targetRect
-            ? targetRect.left + targetRect.width / 2
-            : bubbleRect.left + bubbleRect.width / 2;
-        return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleClassic, isStandalone: true, selector: "dd-speaker-bubble-classic", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-speaker-bubble-classic\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-classic__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-classic__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n  <div class=\"dd-speaker-bubble-classic__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-classic{position:relative;isolation:isolate;overflow:visible;padding:18px 20px 17px;color:var(--dd-speaker-text)}.dd-speaker-bubble-classic__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(6px 6px 0 color-mix(in srgb,var(--dd-speaker-shadow) 36%,transparent))}.dd-speaker-bubble-classic__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 90%,var(--dd-speaker-text));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-classic__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-classic__content :first-child{margin-top:0}.dd-speaker-bubble-classic__content :last-child{margin-bottom:0}.dd-speaker-bubble-classic__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-classic__content small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleClassic, decorators: [{
-            type: Component,
-            args: [{ selector: 'dd-speaker-bubble-classic', standalone: true, imports: [NgStyle], template: "<div\n  class=\"dd-speaker-bubble-classic\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-classic__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-classic__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n  <div class=\"dd-speaker-bubble-classic__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-classic{position:relative;isolation:isolate;overflow:visible;padding:18px 20px 17px;color:var(--dd-speaker-text)}.dd-speaker-bubble-classic__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(6px 6px 0 color-mix(in srgb,var(--dd-speaker-shadow) 36%,transparent))}.dd-speaker-bubble-classic__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 90%,var(--dd-speaker-text));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-classic__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-classic__content :first-child{margin-top:0}.dd-speaker-bubble-classic__content :last-child{margin-bottom:0}.dd-speaker-bubble-classic__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-classic__content small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
-
-const TAIL_VARIANT_METRICS = {
-    classic: {
-        fallbackDy: 24,
-        padding: 18,
-    },
-    soft: {
-        fallbackDy: 28,
-        padding: 20,
-    },
-    outline: {
-        fallbackDy: 22,
-        padding: 16,
-    },
-    'neobrutal-slab': {
-        fallbackDy: 28,
-        padding: 22,
-    },
-    'neobrutal-ticket': {
-        fallbackDy: 28,
-        padding: 22,
-    },
-};
-function clamp$2(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-function lerpPoint(from, to, t) {
-    return {
-        x: from.x + (to.x - from.x) * t,
-        y: from.y + (to.y - from.y) * t,
-    };
-}
-function serializePoint$2(point) {
-    return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
-}
-function toPath(points, close = true) {
-    if (points.length === 0) {
-        return '';
-    }
-    const [first, ...rest] = points;
-    const path = [`M ${serializePoint$2(first)}`];
-    for (const point of rest) {
-        path.push(`L ${serializePoint$2(point)}`);
-    }
-    if (close) {
-        path.push('Z');
-    }
-    return path.join(' ');
-}
-function getBubbleElement$2(hostElement) {
-    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
-}
-function closestPointOnRect$2(rect, point) {
-    return {
-        x: clamp$2(point.x, rect.left, rect.right),
-        y: clamp$2(point.y, rect.top, rect.bottom),
-    };
-}
-function resolveTargetElement$2(source, hostElement, documentRef) {
-    if (!source) {
-        return null;
-    }
-    if (source instanceof Element) {
-        return source;
-    }
-    try {
-        const scopedMatch = hostElement.parentElement?.querySelector(source);
-        if (scopedMatch) {
-            return scopedMatch;
+        const scopedMatch = hostElement.parentElement?.querySelector(source);
+        if (scopedMatch) {
+            return scopedMatch;
         }
         return documentRef.querySelector(source);
     }
@@ -4770,11 +4235,11 @@ function resolveTargetElement$2(source, hostElement, documentRef) {
 function getTailBasePoints(bubbleRect, side) {
     const seventh = bubbleRect.width / 7;
     const baseStartX = side === 'left'
-        ? clamp$2(seventh, 20, bubbleRect.width - 56)
-        : clamp$2(bubbleRect.width - seventh * 2, 20, bubbleRect.width - 56);
+        ? clamp$3(seventh, 20, bubbleRect.width - 56)
+        : clamp$3(bubbleRect.width - seventh * 2, 20, bubbleRect.width - 56);
     const baseEndX = side === 'left'
-        ? clamp$2(seventh * 2, baseStartX + 22, bubbleRect.width - 20)
-        : clamp$2(bubbleRect.width - seventh, baseStartX + 22, bubbleRect.width - 20);
+        ? clamp$3(seventh * 2, baseStartX + 22, bubbleRect.width - 20)
+        : clamp$3(bubbleRect.width - seventh, baseStartX + 22, bubbleRect.width - 20);
     const baseY = bubbleRect.height;
     return {
         baseStart: { x: baseStartX, y: baseY },
@@ -4804,10 +4269,10 @@ function buildClassicTail(baseStart, baseEnd, anchor, tip, side) {
     const seam = { x: anchor.x + dir * 2, y: anchor.y + 2 };
     return {
         path: [
-            `M ${serializePoint$2(outer)}`,
-            `C ${serializePoint$2(c1)} ${serializePoint$2(c2)} ${serializePoint$2(c3)} ${serializePoint$2(tip)}`,
-            `C ${serializePoint$2(c4)} ${serializePoint$2(c5)} ${serializePoint$2(c6)} ${serializePoint$2(inner)}`,
-            `Q ${serializePoint$2(seam)} ${serializePoint$2(outer)}`,
+            `M ${serializePoint$3(outer)}`,
+            `C ${serializePoint$3(c1)} ${serializePoint$3(c2)} ${serializePoint$3(c3)} ${serializePoint$3(tip)}`,
+            `C ${serializePoint$3(c4)} ${serializePoint$3(c5)} ${serializePoint$3(c6)} ${serializePoint$3(inner)}`,
+            `Q ${serializePoint$3(seam)} ${serializePoint$3(outer)}`,
             'Z',
         ].join(' '),
         secondaryPath: null,
@@ -4833,13 +4298,13 @@ function buildSoftTail(baseStart, baseEnd, anchor, tip, side) {
     const shineEnd = lerpPoint(inner, tip, 0.58);
     return {
         path: [
-            `M ${serializePoint$2(outer)}`,
-            `C ${serializePoint$2(c1)} ${serializePoint$2(c2)} ${serializePoint$2(c3)} ${serializePoint$2(tip)}`,
-            `C ${serializePoint$2(c4)} ${serializePoint$2(c5)} ${serializePoint$2(c6)} ${serializePoint$2(inner)}`,
-            `Q ${serializePoint$2(seam)} ${serializePoint$2(outer)}`,
+            `M ${serializePoint$3(outer)}`,
+            `C ${serializePoint$3(c1)} ${serializePoint$3(c2)} ${serializePoint$3(c3)} ${serializePoint$3(tip)}`,
+            `C ${serializePoint$3(c4)} ${serializePoint$3(c5)} ${serializePoint$3(c6)} ${serializePoint$3(inner)}`,
+            `Q ${serializePoint$3(seam)} ${serializePoint$3(outer)}`,
             'Z',
         ].join(' '),
-        secondaryPath: `M ${serializePoint$2(shineStart)} Q ${serializePoint$2(shineControl)} ${serializePoint$2(shineEnd)}`,
+        secondaryPath: `M ${serializePoint$3(shineStart)} Q ${serializePoint$3(shineControl)} ${serializePoint$3(shineEnd)}`,
         points: [
             outer,
             inner,
@@ -4950,7 +4415,7 @@ function buildNeobrutalTicketTail(baseStart, baseEnd, anchor, tip, side) {
     };
     return {
         path: toPath([topOuter, topInner, midA, tip, midB, hip]),
-        secondaryPath: `M ${serializePoint$2(notchStart)} L ${serializePoint$2(notchMiddle)} L ${serializePoint$2(notchEnd)}`,
+        secondaryPath: `M ${serializePoint$3(notchStart)} L ${serializePoint$3(notchMiddle)} L ${serializePoint$3(notchEnd)}`,
         points: [
             topOuter,
             topInner,
@@ -4990,13 +4455,13 @@ function buildTailRenderModel(variant, bubbleRect, targetRect, preferredTail) {
         y: bubbleRect.top + anchor.y,
     };
     const targetPoint = targetRect
-        ? closestPointOnRect$2(targetRect, anchorViewport)
+        ? closestPointOnRect$3(targetRect, anchorViewport)
         : {
             x: bubbleRect.left + (side === 'left' ? baseStart.x : baseEnd.x),
             y: anchorViewport.y + metrics.fallbackDy,
         };
     const tip = {
-        x: clamp$2(targetPoint.x - bubbleRect.left, -48, bubbleRect.width + 48),
+        x: clamp$3(targetPoint.x - bubbleRect.left, -48, bubbleRect.width + 48),
         y: Math.max(targetPoint.y - bubbleRect.top, bubbleRect.height + metrics.fallbackDy),
     };
     const bundle = buildTailPathBundle(variant, baseStart, baseEnd, anchor, tip, side);
@@ -5069,11 +4534,11 @@ function useSpeakerBubbleTail(variant, tail, target) {
         if (!isBrowser) {
             return;
         }
-        const bubbleElement = getBubbleElement$2(hostRef.nativeElement);
+        const bubbleElement = getBubbleElement$3(hostRef.nativeElement);
         if (!bubbleElement) {
             return;
         }
-        const targetElement = resolveTargetElement$2(target(), hostRef.nativeElement, documentRef);
+        const targetElement = resolveTargetElement$3(target(), hostRef.nativeElement, documentRef);
         if (resizeObserver && targetElement !== observedTarget) {
             if (observedTarget) {
                 resizeObserver.unobserve(observedTarget);
@@ -5098,13 +4563,13 @@ function useSpeakerBubbleTail(variant, tail, target) {
         if (!isBrowser || isInitialized) {
             return;
         }
-        const bubbleElement = getBubbleElement$2(hostRef.nativeElement);
+        const bubbleElement = getBubbleElement$3(hostRef.nativeElement);
         if (!bubbleElement) {
             return;
         }
         resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleRefresh);
         resizeObserver?.observe(bubbleElement);
-        const targetElement = resolveTargetElement$2(target(), hostRef.nativeElement, documentRef);
+        const targetElement = resolveTargetElement$3(target(), hostRef.nativeElement, documentRef);
         if (targetElement) {
             resizeObserver?.observe(targetElement);
             observedTarget = targetElement;
@@ -5141,21 +4606,244 @@ function useSpeakerBubbleTail(variant, tail, target) {
     };
 }
 
-class DuckDevSpeakerBubbleSoft {
-    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
-    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
-    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
-    tailController = useSpeakerBubbleTail('soft', this.tail, this.target);
-    bubbleStyle = computed(() => getClassicSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
-    resolvedTail = this.tailController.resolvedTail;
-    tailStyle = this.tailController.tailStyle;
-    tailViewBox = this.tailController.tailViewBox;
-    tailPath = this.tailController.tailPath;
-    tailSecondaryPath = this.tailController.tailSecondaryPath;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleSoft, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleSoft, isStandalone: true, selector: "dd-speaker-bubble-soft", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-speaker-bubble-soft\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n  <span class=\"dd-speaker-bubble-soft__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n    <svg\n      [attr.viewBox]=\"tailViewBox()\"\n      preserveAspectRatio=\"none\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      <path\n        class=\"dd-speaker-bubble-soft__tail-path\"\n        [attr.d]=\"tailPath()\"\n      />\n      <path\n        class=\"dd-speaker-bubble-soft__tail-shine\"\n        [attr.d]=\"tailSecondaryPath()\"\n      />\n    </svg>\n  </span>\n  <div class=\"dd-speaker-bubble-soft__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-soft{position:relative;isolation:isolate;overflow:visible;padding:19px 21px 18px;border:1px solid color-mix(in srgb,var(--dd-speaker-border) 78%,var(--dd-speaker-accent));border-radius:28px 28px 28px 18px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--dd-speaker-accent) 22%,transparent) 0,transparent 38%),radial-gradient(circle at 24% 18%,color-mix(in srgb,white 42%,transparent) 0,transparent 22%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 82%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%);box-shadow:inset 0 1px color-mix(in srgb,var(--dd-speaker-surface) 85%,white),0 16px 30px color-mix(in srgb,var(--dd-speaker-shadow) 16%,transparent),0 4px 14px color-mix(in srgb,var(--dd-speaker-accent) 10%,transparent);color:var(--dd-speaker-text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-speaker-bubble-soft[data-tail=right]{border-radius:28px 28px 18px}.dd-speaker-bubble-soft__tail{position:absolute;z-index:-1;filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--dd-speaker-shadow) 14%,transparent)) drop-shadow(0 2px 3px color-mix(in srgb,white 24%,transparent));pointer-events:none}.dd-speaker-bubble-soft__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-soft__tail-path{fill:color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface));stroke:color-mix(in srgb,var(--dd-speaker-border) 72%,var(--dd-speaker-accent));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-soft__tail-shine{fill:none;stroke:color-mix(in srgb,white 48%,var(--dd-speaker-accent));stroke-width:1.6;stroke-linecap:round;opacity:.72}.dd-speaker-bubble-soft__content :first-child{margin-top:0}.dd-speaker-bubble-soft__content :last-child{margin-bottom:0}.dd-speaker-bubble-soft__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-soft__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.05em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+const DEFAULT_BUBBLE_GEOMETRY$2 = {
+    side: 'left',
+    style: {
+        left: '0px',
+        top: '0px',
+        width: '1px',
+        height: '1px',
+    },
+    viewBox: '0 0 1 1',
+    path: '',
+};
+function clamp$2(value, min, max) {
+    return Math.min(Math.max(value, min), max);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleSoft, decorators: [{
+function serializePoint$2(point) {
+    return `${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+}
+function closestPointOnRect$2(rect, point) {
+    return {
+        x: clamp$2(point.x, rect.left, rect.right),
+        y: clamp$2(point.y, rect.top, rect.bottom),
+    };
+}
+function resolveTargetElement$2(source, hostElement, documentRef) {
+    if (!source) {
+        return null;
+    }
+    if (source instanceof Element) {
+        return source;
+    }
+    try {
+        const localMatch = hostElement.parentElement?.querySelector(source);
+        if (localMatch) {
+            return localMatch;
+        }
+        return documentRef.querySelector(source);
+    }
+    catch {
+        return null;
+    }
+}
+function getBubbleElement$2(hostElement) {
+    return hostElement.firstElementChild instanceof HTMLElement ? hostElement.firstElementChild : null;
+}
+function createUnifiedBubblePath$2(width, height, radius, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY) {
+    const left = offsetX;
+    const top = offsetY;
+    const right = offsetX + width;
+    const bottom = offsetY + height;
+    const start = { x: left + radius, y: top };
+    const bottomRight = { x: right, y: bottom - radius };
+    const bottomRightArcEnd = { x: right - radius, y: bottom };
+    const baseStart = { x: offsetX + baseStartX, y: bottom };
+    const baseEnd = { x: offsetX + baseEndX, y: bottom };
+    const tip = { x: offsetX + tipX, y: offsetY + tipY };
+    const bottomLeftArcStart = { x: left + radius, y: bottom };
+    const leftBottom = { x: left, y: bottom - radius };
+    const leftTop = { x: left, y: top + radius };
+    return [
+        `M ${serializePoint$2(start)}`,
+        `H ${(right - radius).toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${right.toFixed(2)} ${(top + radius).toFixed(2)}`,
+        `V ${bottomRight.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$2(bottomRightArcEnd)}`,
+        `H ${baseEnd.x.toFixed(2)}`,
+        `L ${serializePoint$2(tip)}`,
+        `L ${serializePoint$2(baseStart)}`,
+        `H ${bottomLeftArcStart.x.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$2(leftBottom)}`,
+        `V ${leftTop.y.toFixed(2)}`,
+        `A ${radius} ${radius} 0 0 1 ${serializePoint$2(start)}`,
+        'Z',
+    ].join(' ');
+}
+class DuckDevSpeakerBubbleClassic {
+    color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
+    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
+    hostRef = inject((ElementRef));
+    documentRef = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    bubbleGeometry = signal(DEFAULT_BUBBLE_GEOMETRY$2, { ...(ngDevMode ? { debugName: "bubbleGeometry" } : {}) });
+    animationFrameId = -1;
+    resizeObserver = null;
+    observedTarget = null;
+    observersInitialized = false;
+    bubbleStyle = computed(() => getClassicSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
+    resolvedTail = computed(() => this.bubbleGeometry().side, { ...(ngDevMode ? { debugName: "resolvedTail" } : {}) });
+    shapeStyle = computed(() => this.bubbleGeometry().style, { ...(ngDevMode ? { debugName: "shapeStyle" } : {}) });
+    shapeViewBox = computed(() => this.bubbleGeometry().viewBox, { ...(ngDevMode ? { debugName: "shapeViewBox" } : {}) });
+    shapePath = computed(() => this.bubbleGeometry().path, { ...(ngDevMode ? { debugName: "shapePath" } : {}) });
+    constructor() {
+        afterNextRender(() => {
+            this.setupObservers();
+            this.scheduleRefresh();
+        });
+        afterRenderEffect(() => {
+            this.tail();
+            this.target();
+            this.setupObservers();
+            this.scheduleRefresh();
+        });
+        this.destroyRef.onDestroy(() => {
+            this.documentRef.defaultView?.removeEventListener('resize', this.scheduleRefresh);
+            this.documentRef.removeEventListener('scroll', this.scheduleRefresh, true);
+            if (this.animationFrameId !== -1) {
+                cancelAnimationFrame(this.animationFrameId);
+            }
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.observedTarget = null;
+        });
+    }
+    scheduleRefresh = () => {
+        if (!this.isBrowser || this.animationFrameId !== -1) {
+            return;
+        }
+        this.animationFrameId = requestAnimationFrame(() => {
+            this.animationFrameId = -1;
+            this.refreshShape();
+        });
+    };
+    setupObservers() {
+        if (!this.isBrowser || this.observersInitialized) {
+            return;
+        }
+        const bubbleElement = getBubbleElement$2(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleRefresh());
+            this.resizeObserver.observe(bubbleElement);
+        }
+        const targetElement = resolveTargetElement$2(this.target(), this.hostRef.nativeElement, this.documentRef);
+        if (targetElement) {
+            this.resizeObserver?.observe(targetElement);
+            this.observedTarget = targetElement;
+        }
+        this.documentRef.defaultView?.addEventListener('resize', this.scheduleRefresh);
+        this.documentRef.addEventListener('scroll', this.scheduleRefresh, true);
+        this.observersInitialized = true;
+    }
+    refreshShape() {
+        if (!this.isBrowser) {
+            return;
+        }
+        const bubbleElement = getBubbleElement$2(this.hostRef.nativeElement);
+        if (!bubbleElement) {
+            return;
+        }
+        const targetElement = resolveTargetElement$2(this.target(), this.hostRef.nativeElement, this.documentRef);
+        if (this.resizeObserver && targetElement !== this.observedTarget) {
+            if (this.observedTarget) {
+                this.resizeObserver.unobserve(this.observedTarget);
+            }
+            if (targetElement) {
+                this.resizeObserver.observe(targetElement);
+            }
+            this.observedTarget = targetElement;
+        }
+        const bubbleRect = bubbleElement.getBoundingClientRect();
+        const targetRect = targetElement?.getBoundingClientRect() ?? null;
+        const side = this.resolveTailSide(bubbleRect, targetRect);
+        const seventh = bubbleRect.width / 7;
+        const baseStartX = side === 'left'
+            ? clamp$2(seventh, 20, bubbleRect.width - 56)
+            : clamp$2(bubbleRect.width - seventh * 2, 20, bubbleRect.width - 56);
+        const baseEndX = side === 'left'
+            ? clamp$2(seventh * 2, baseStartX + 22, bubbleRect.width - 20)
+            : clamp$2(bubbleRect.width - seventh, baseStartX + 22, bubbleRect.width - 20);
+        const anchor = {
+            x: bubbleRect.left + (baseStartX + baseEndX) / 2,
+            y: bubbleRect.bottom,
+        };
+        const targetPoint = targetRect
+            ? closestPointOnRect$2(targetRect, anchor)
+            : {
+                x: bubbleRect.left + (side === 'left' ? baseStartX : baseEndX),
+                y: bubbleRect.bottom + Math.max(24, bubbleRect.height / 4),
+            };
+        const tipX = clamp$2(targetPoint.x - bubbleRect.left, -48, bubbleRect.width + 48);
+        const tipY = Math.max(targetPoint.y - bubbleRect.top, bubbleRect.height + 22);
+        const minX = Math.min(0, tipX);
+        const maxX = Math.max(bubbleRect.width, tipX);
+        const maxY = Math.max(bubbleRect.height, tipY);
+        const padding = 10;
+        const offsetX = padding - minX;
+        const offsetY = padding;
+        const width = maxX - minX + padding * 2;
+        const height = maxY + padding * 2;
+        this.bubbleGeometry.set({
+            side,
+            style: {
+                left: `${minX - padding}px`,
+                top: `${-padding}px`,
+                width: `${width}px`,
+                height: `${height}px`,
+            },
+            viewBox: `0 0 ${width.toFixed(2)} ${height.toFixed(2)}`,
+            path: createUnifiedBubblePath$2(bubbleRect.width, bubbleRect.height, 18, baseStartX, baseEndX, tipX, tipY, offsetX, offsetY),
+        });
+    }
+    resolveTailSide(bubbleRect, targetRect) {
+        const tail = this.tail();
+        if (tail === 'left' || tail === 'right') {
+            return tail;
+        }
+        const targetCenterX = targetRect
+            ? targetRect.left + targetRect.width / 2
+            : bubbleRect.left + bubbleRect.width / 2;
+        return targetCenterX < bubbleRect.left + bubbleRect.width / 2 ? 'left' : 'right';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleClassic, isStandalone: true, selector: "dd-speaker-bubble-classic", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-speaker-bubble-classic\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-classic__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-classic__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n  <div class=\"dd-speaker-bubble-classic__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-classic{position:relative;isolation:isolate;overflow:visible;padding:18px 20px 17px;color:var(--dd-speaker-text)}.dd-speaker-bubble-classic__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(6px 6px 0 color-mix(in srgb,var(--dd-speaker-shadow) 36%,transparent))}.dd-speaker-bubble-classic__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 90%,var(--dd-speaker-text));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-classic__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-classic__content :first-child{margin-top:0}.dd-speaker-bubble-classic__content :last-child{margin-bottom:0}.dd-speaker-bubble-classic__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-classic__content small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleClassic, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-speaker-bubble-classic', standalone: true, imports: [NgStyle], template: "<div\n  class=\"dd-speaker-bubble-classic\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-classic__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-classic__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n  <div class=\"dd-speaker-bubble-classic__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-classic{position:relative;isolation:isolate;overflow:visible;padding:18px 20px 17px;color:var(--dd-speaker-text)}.dd-speaker-bubble-classic__shape{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(6px 6px 0 color-mix(in srgb,var(--dd-speaker-shadow) 36%,transparent))}.dd-speaker-bubble-classic__shape-path{fill:var(--dd-speaker-surface);stroke:color-mix(in srgb,var(--dd-speaker-border) 90%,var(--dd-speaker-text));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-classic__content{display:block;position:relative;z-index:1}.dd-speaker-bubble-classic__content :first-child{margin-top:0}.dd-speaker-bubble-classic__content :last-child{margin-bottom:0}.dd-speaker-bubble-classic__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-classic__content small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
+
+class DuckDevSpeakerBubbleSoft {
+    color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    tail = input('left', { ...(ngDevMode ? { debugName: "tail" } : {}) });
+    target = input(null, { ...(ngDevMode ? { debugName: "target" } : {}) });
+    tailController = useSpeakerBubbleTail('soft', this.tail, this.target);
+    bubbleStyle = computed(() => getClassicSpeakerBubbleStyle(this.color()), { ...(ngDevMode ? { debugName: "bubbleStyle" } : {}) });
+    resolvedTail = this.tailController.resolvedTail;
+    tailStyle = this.tailController.tailStyle;
+    tailViewBox = this.tailController.tailViewBox;
+    tailPath = this.tailController.tailPath;
+    tailSecondaryPath = this.tailController.tailSecondaryPath;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleSoft, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevSpeakerBubbleSoft, isStandalone: true, selector: "dd-speaker-bubble-soft", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-speaker-bubble-soft\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n  <span class=\"dd-speaker-bubble-soft__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n    <svg\n      [attr.viewBox]=\"tailViewBox()\"\n      preserveAspectRatio=\"none\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      <path\n        class=\"dd-speaker-bubble-soft__tail-path\"\n        [attr.d]=\"tailPath()\"\n      />\n      <path\n        class=\"dd-speaker-bubble-soft__tail-shine\"\n        [attr.d]=\"tailSecondaryPath()\"\n      />\n    </svg>\n  </span>\n  <div class=\"dd-speaker-bubble-soft__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-soft{position:relative;isolation:isolate;overflow:visible;padding:19px 21px 18px;border:1px solid color-mix(in srgb,var(--dd-speaker-border) 78%,var(--dd-speaker-accent));border-radius:28px 28px 28px 18px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--dd-speaker-accent) 22%,transparent) 0,transparent 38%),radial-gradient(circle at 24% 18%,color-mix(in srgb,white 42%,transparent) 0,transparent 22%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 82%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%);box-shadow:inset 0 1px color-mix(in srgb,var(--dd-speaker-surface) 85%,white),0 16px 30px color-mix(in srgb,var(--dd-speaker-shadow) 16%,transparent),0 4px 14px color-mix(in srgb,var(--dd-speaker-accent) 10%,transparent);color:var(--dd-speaker-text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-speaker-bubble-soft[data-tail=right]{border-radius:28px 28px 18px}.dd-speaker-bubble-soft__tail{position:absolute;z-index:-1;filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--dd-speaker-shadow) 14%,transparent)) drop-shadow(0 2px 3px color-mix(in srgb,white 24%,transparent));pointer-events:none}.dd-speaker-bubble-soft__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-soft__tail-path{fill:color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface));stroke:color-mix(in srgb,var(--dd-speaker-border) 72%,var(--dd-speaker-accent));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-soft__tail-shine{fill:none;stroke:color-mix(in srgb,white 48%,var(--dd-speaker-accent));stroke-width:1.6;stroke-linecap:round;opacity:.72}.dd-speaker-bubble-soft__content :first-child{margin-top:0}.dd-speaker-bubble-soft__content :last-child{margin-bottom:0}.dd-speaker-bubble-soft__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-soft__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.05em;text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSpeakerBubbleSoft, decorators: [{
             type: Component,
             args: [{ selector: 'dd-speaker-bubble-soft', standalone: true, imports: [NgStyle], template: "<div class=\"dd-speaker-bubble-soft\" [attr.data-tail]=\"resolvedTail()\" [ngStyle]=\"bubbleStyle()\">\n  <span class=\"dd-speaker-bubble-soft__tail\" aria-hidden=\"true\" [ngStyle]=\"tailStyle()\">\n    <svg\n      [attr.viewBox]=\"tailViewBox()\"\n      preserveAspectRatio=\"none\"\n      focusable=\"false\"\n      aria-hidden=\"true\"\n    >\n      <path\n        class=\"dd-speaker-bubble-soft__tail-path\"\n        [attr.d]=\"tailPath()\"\n      />\n      <path\n        class=\"dd-speaker-bubble-soft__tail-shine\"\n        [attr.d]=\"tailSecondaryPath()\"\n      />\n    </svg>\n  </span>\n  <div class=\"dd-speaker-bubble-soft__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,36rem)}.dd-speaker-bubble-soft{position:relative;isolation:isolate;overflow:visible;padding:19px 21px 18px;border:1px solid color-mix(in srgb,var(--dd-speaker-border) 78%,var(--dd-speaker-accent));border-radius:28px 28px 28px 18px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--dd-speaker-accent) 22%,transparent) 0,transparent 38%),radial-gradient(circle at 24% 18%,color-mix(in srgb,white 42%,transparent) 0,transparent 22%),linear-gradient(180deg,color-mix(in srgb,var(--dd-speaker-surface-muted) 82%,var(--dd-speaker-surface)) 0,var(--dd-speaker-surface) 100%);box-shadow:inset 0 1px color-mix(in srgb,var(--dd-speaker-surface) 85%,white),0 16px 30px color-mix(in srgb,var(--dd-speaker-shadow) 16%,transparent),0 4px 14px color-mix(in srgb,var(--dd-speaker-accent) 10%,transparent);color:var(--dd-speaker-text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dd-speaker-bubble-soft[data-tail=right]{border-radius:28px 28px 18px}.dd-speaker-bubble-soft__tail{position:absolute;z-index:-1;filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--dd-speaker-shadow) 14%,transparent)) drop-shadow(0 2px 3px color-mix(in srgb,white 24%,transparent));pointer-events:none}.dd-speaker-bubble-soft__tail svg{display:block;width:100%;height:100%;overflow:visible}.dd-speaker-bubble-soft__tail-path{fill:color-mix(in srgb,var(--dd-speaker-surface-muted) 84%,var(--dd-speaker-surface));stroke:color-mix(in srgb,var(--dd-speaker-border) 72%,var(--dd-speaker-accent));stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.dd-speaker-bubble-soft__tail-shine{fill:none;stroke:color-mix(in srgb,white 48%,var(--dd-speaker-accent));stroke-width:1.6;stroke-linecap:round;opacity:.72}.dd-speaker-bubble-soft__content :first-child{margin-top:0}.dd-speaker-bubble-soft__content :last-child{margin-bottom:0}.dd-speaker-bubble-soft__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-soft__content small{display:block;margin-bottom:8px;color:color-mix(in srgb,var(--dd-speaker-text) 72%,transparent);font-size:12px;letter-spacing:.05em;text-transform:uppercase}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
@@ -5624,6 +5312,337 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
             args: [{ selector: 'dd-speaker-bubble-neobrutal-ticket', standalone: true, imports: [NgStyle], template: "<div\n  class=\"dd-speaker-bubble-neo-ticket\"\n  [attr.data-tail]=\"resolvedTail()\"\n  [ngStyle]=\"bubbleStyle()\"\n>\n  <svg\n    class=\"dd-speaker-bubble-neo-ticket__shape\"\n    aria-hidden=\"true\"\n    [ngStyle]=\"shapeStyle()\"\n    [attr.viewBox]=\"shapeViewBox()\"\n    preserveAspectRatio=\"none\"\n    focusable=\"false\"\n  >\n    <path\n      class=\"dd-speaker-bubble-neo-ticket__shape-path\"\n      [attr.d]=\"shapePath()\"\n    />\n  </svg>\n\n  <div class=\"dd-speaker-bubble-neo-ticket__shell\">\n    <div class=\"dd-speaker-bubble-neo-ticket__body\">\n      <span class=\"dd-speaker-bubble-neo-ticket__flash\" aria-hidden=\"true\"></span>\n\n      <div class=\"dd-speaker-bubble-neo-ticket__content\">\n        <ng-content />\n      </div>\n    </div>\n\n    <span class=\"dd-speaker-bubble-neo-ticket__stub\" aria-hidden=\"true\">\n      <span></span>\n      <span></span>\n      <span></span>\n    </span>\n  </div>\n</div>\n", styles: [":host{display:block;width:fit-content;max-width:min(100%,40rem)}.dd-speaker-bubble-neo-ticket{position:relative;isolation:isolate;overflow:visible;color:var(--dd-speaker-text)}.dd-speaker-bubble-neo-ticket__shape{position:absolute;inset:0;z-index:0;pointer-events:none}.dd-speaker-bubble-neo-ticket__shape-path{fill:var(--dd-speaker-surface);stroke:var(--dd-speaker-border);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;filter:drop-shadow(10px 10px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 58px;grid-template-areas:\"body stub\";padding:4px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:58px minmax(0,1fr);grid-template-areas:\"stub body\"}.dd-speaker-bubble-neo-ticket__body{grid-area:body;position:relative;padding:22px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-speaker-accent) 20%,transparent) 0 16px,transparent 16px 100%),repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--dd-speaker-border) 8%,transparent) 14px 16px),color-mix(in srgb,var(--dd-speaker-surface-muted) 78%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after{content:\"\";position:absolute;top:18px;right:-18px;width:28px;height:28px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:var(--dd-speaker-surface)}.dd-speaker-bubble-neo-ticket__body:after{top:auto;bottom:18px}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{right:auto;left:-18px}.dd-speaker-bubble-neo-ticket__flash{position:absolute;top:14px;left:18px;width:30px;height:12px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);box-shadow:4px 4px 0 var(--dd-speaker-shadow);transform:rotate(-7deg)}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__flash{left:auto;right:18px;transform:rotate(7deg)}.dd-speaker-bubble-neo-ticket__content{position:relative;z-index:1;padding-top:18px;font-size:15px;font-weight:800;line-height:1.55}.dd-speaker-bubble-neo-ticket__content :first-child{margin-top:0}.dd-speaker-bubble-neo-ticket__content :last-child{margin-bottom:0}.dd-speaker-bubble-neo-ticket__content strong{color:var(--dd-speaker-accent)}.dd-speaker-bubble-neo-ticket__content small{display:inline-flex;margin-bottom:10px;padding:5px 8px 4px;border:3px solid var(--dd-speaker-border);background:var(--dd-speaker-accent);color:var(--dd-speaker-border);font-size:11px;font-weight:1000;letter-spacing:.14em;line-height:1;text-transform:uppercase;white-space:nowrap}.dd-speaker-bubble-neo-ticket__stub{grid-area:stub;display:grid;align-content:center;justify-items:center;gap:10px;padding:16px 8px;border-left:4px dashed var(--dd-speaker-border);background:color-mix(in srgb,var(--dd-speaker-accent) 70%,var(--dd-speaker-surface))}.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{border-right:4px dashed var(--dd-speaker-border);border-left:0}.dd-speaker-bubble-neo-ticket__stub span{width:18px;height:18px;border:4px solid var(--dd-speaker-border);border-radius:999px;background:color-mix(in srgb,var(--dd-speaker-surface) 80%,white)}@media(max-width:640px){.dd-speaker-bubble-neo-ticket__shape-path{filter:drop-shadow(8px 8px 0 var(--dd-speaker-shadow))}.dd-speaker-bubble-neo-ticket__shell,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__shell{grid-template-columns:1fr;grid-template-areas:\"body\" \"stub\"}.dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:before,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{inset:auto auto -18px 22px;width:24px;height:24px}.dd-speaker-bubble-neo-ticket__body:after,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__body:after{left:auto;right:22px}.dd-speaker-bubble-neo-ticket__stub,.dd-speaker-bubble-neo-ticket[data-tail=right] .dd-speaker-bubble-neo-ticket__stub{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 14px;border-top:4px dashed var(--dd-speaker-border);border-right:0;border-left:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }] } });
 
+class QuickStartBlock {
+    t = inject(TranslocoService);
+    colorViolet = AccentEnumColor.Violet;
+    colorOrange = AccentEnumColor.Orange;
+    colorWhite = AccentEnumColor.White;
+    colorGray = AccentEnumColor.Gray;
+    colorDark = AccentEnumColor.Dark;
+    previewTabs = [
+        { id: 'classic', label: this.t.translate('documentationStyleTabs.classic') },
+        { id: 'neobrutalism', label: this.t.translate('documentationStyleTabs.neobrutalism') },
+    ];
+    activePreviewTab = signal(this.previewTabs[0], { ...(ngDevMode ? { debugName: "activePreviewTab" } : {}) });
+    onPreviewTabChange(tab) {
+        this.activePreviewTab.set(tab);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: QuickStartBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: QuickStartBlock, isStandalone: true, selector: "app-quick-start-block", ngImport: i0, template: "<div class=\"quick-start\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"hero\">\n    <div class=\"hero__badges\">\n      <dd-badge [text]=\"'Angular 21'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signals'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Standalone'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'quickStart.hero.title' | transloco }}</h1>\n    <p class=\"hero__subtitle\">{{ 'quickStart.hero.subtitle' | transloco }}</p>\n  </header>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 1 \u2014 INSTALL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.install.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <dd-card-signal [color]=\"colorViolet\">\n        <small>{{ 'quickStart.install.eyebrow' | transloco }}</small>\n        <h3>{{ 'quickStart.install.cardTitle' | transloco }}</h3>\n        <p>{{ 'quickStart.install.cardText' | transloco }}</p>\n      </dd-card-signal>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">angular.json</div>\n        <pre><code>\"styles\": [\n  \"node_modules/duck-dev-lib/styles/variables.scss\",\n  \"src/styles.scss\"\n]</code></pre>\n      </div>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">app.config.ts</div>\n        <pre><code>import {{ '{' }} provideTransloco {{ '}' }} from '@jsverse/transloco';\n\nexport const appConfig = {{ '{' }}\n  providers: [\n    provideTransloco({{ '{' }}\n      config: {{ '{' }} availableLangs: ['en', 'ru'], defaultLang: 'en' {{ '}' }}\n    {{ '}' }})\n  ]\n{{ '}' }};</code></pre>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 2 \u2014 PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.palette.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.palette.description' | transloco }}</p>\n\n      <div class=\"palette-grid\">\n        <div class=\"palette-group\">\n          <h3>{{ 'quickStart.palette.neutralsTitle' | transloco }}</h3>\n          <div class=\"swatch-row\">\n            <div class=\"swatch\" style=\"background: var(--dd-base-0)\">\n              <span class=\"swatch__label\">0</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-100)\">\n              <span class=\"swatch__label\">100</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-200)\">\n              <span class=\"swatch__label\">200</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-300)\">\n              <span class=\"swatch__label\">300</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-400)\">\n              <span class=\"swatch__label swatch__label--light\">400</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-500)\">\n              <span class=\"swatch__label swatch__label--light\">500</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-600)\">\n              <span class=\"swatch__label swatch__label--light\">600</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"palette-group\">\n          <h3>{{ 'quickStart.palette.accentsTitle' | transloco }}</h3>\n          <div class=\"swatch-row\">\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-secondary)\">\n              <span class=\"swatch__label swatch__label--light\">secondary</span>\n            </div>\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-orange)\">\n              <span class=\"swatch__label swatch__label--light\">orange</span>\n            </div>\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-blue)\">\n              <span class=\"swatch__label swatch__label--light\">blue</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n        <p><strong>{{ 'quickStart.palette.tipTitle' | transloco }}</strong> {{ 'quickStart.palette.tipText' | transloco }}</p>\n      </dd-speaker-bubble-soft>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 3 \u2014 THEMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.themes.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <div class=\"theme-cards\">\n        <dd-card-minimal [color]=\"colorWhite\">\n          <small>{{ 'quickStart.themes.lightEyebrow' | transloco }}</small>\n          <h3>{{ 'quickStart.themes.lightTitle' | transloco }}</h3>\n          <p>{{ 'quickStart.themes.lightText' | transloco }}</p>\n        </dd-card-minimal>\n        <dd-card-minimal [color]=\"colorDark\">\n          <small>{{ 'quickStart.themes.darkEyebrow' | transloco }}</small>\n          <h3>{{ 'quickStart.themes.darkTitle' | transloco }}</h3>\n          <p>{{ 'quickStart.themes.darkText' | transloco }}</p>\n        </dd-card-minimal>\n      </div>\n\n      <ng-template #themeHtmlSnippet>\n        <pre class=\"accordion-code\"><code>&lt;html ddTheme=\"dark\"&gt;\n  &lt;body&gt;\n    &lt;app-root&gt;&lt;/app-root&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n      </ng-template>\n\n      <ng-template #themeToggleSnippet>\n        <pre class=\"accordion-code\"><code>setTheme(theme: 'dark' | 'light') {{ '{' }}\n  document.documentElement\n    .setAttribute('ddTheme', theme);\n{{ '}' }}</code></pre>\n      </ng-template>\n\n      <div class=\"accordion-row\">\n        <duck-dev-accordion\n          [title]=\"'quickStart.themes.htmlAccordionTitle' | transloco\"\n          [content]=\"themeHtmlSnippet\"\n        />\n        <duck-dev-accordion\n          [title]=\"'quickStart.themes.toggleAccordionTitle' | transloco\"\n          [content]=\"themeToggleSnippet\"\n          [color]=\"colorViolet\"\n        />\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 4 \u2014 CUSTOM THEME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.custom.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <dd-card-outline [color]=\"colorOrange\">\n        <small>{{ 'quickStart.custom.eyebrow' | transloco }}</small>\n        <h3>{{ 'quickStart.custom.cardTitle' | transloco }}</h3>\n        <p>{{ 'quickStart.custom.cardText' | transloco }}</p>\n      </dd-card-outline>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">styles.scss</div>\n        <pre><code>[ddTheme='brand'] {{ '{' }}\n  --dd-base-0: #ffffff;\n  --dd-base-100: #f4f6ff;\n  --dd-base-300: #dbe0ff;\n  --dd-base-600: #0e1028;\n  --dd-base-secondary: #6829ff;\n  --dd-base-accent-orange: #fe7b20;\n  --dd-base-accent-blue: #3254f3;\n{{ '}' }}</code></pre>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 5 \u2014 COLORS IN COMPONENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'05'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.colors.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.colors.description' | transloco }}</p>\n\n      <div class=\"code-block code-block--compact\">\n        <div class=\"code-block__label\">AccentEnumColor</div>\n        <pre><code>import {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n// Violet \u00B7 Orange \u00B7 White \u00B7 Gray \u00B7 Dark</code></pre>\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.progressTitle' | transloco }}</h3>\n      <div class=\"progress-showcase\">\n        <duck-dev-progress-line [label]=\"'Violet'\" [value]=\"85\" [color]=\"colorViolet\" />\n        <duck-dev-progress-line [label]=\"'Orange'\" [value]=\"60\" [color]=\"colorOrange\" />\n        <duck-dev-progress-line [label]=\"'Gray'\" [value]=\"40\" [color]=\"colorGray\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.buttonsTitle' | transloco }}</h3>\n      <div class=\"buttons-showcase\">\n        <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n        <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n        <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.badgesTitle' | transloco }}</h3>\n      <div class=\"badges-showcase\">\n        <dd-badge [text]=\"'Solid'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n        <dd-badge [text]=\"'Soft'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n        <dd-badge [text]=\"'Outline'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n        <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'solid'\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.cardsTitle' | transloco }}</h3>\n      <div class=\"cards-showcase\">\n        <dd-card-accent [color]=\"colorViolet\">\n          <div>{{ 'quickStart.colors.cardViolet' | transloco }}</div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorOrange\">\n          <div>{{ 'quickStart.colors.cardOrange' | transloco }}</div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorDark\">\n          <div>{{ 'quickStart.colors.cardDark' | transloco }}</div>\n        </dd-card-accent>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 6 \u2014 TWO STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'06'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.styles.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.styles.description' | transloco }}</p>\n\n      <duck-dev-tab [tabs]=\"previewTabs\" (tabChange)=\"onPreviewTabChange($event)\">\n        @if (activePreviewTab().id === 'classic') {\n          <div class=\"style-preview\">\n            <div class=\"style-preview__row\">\n              <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n              <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n              <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n            </div>\n            <div class=\"style-preview__row\">\n              <dd-badge [text]=\"'Status'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n              <dd-badge [text]=\"'Label'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n              <dd-badge [text]=\"'Tag'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n            </div>\n            <duck-dev-progress-line [label]=\"'Progress'\" [value]=\"72\" [color]=\"colorViolet\" />\n            <div class=\"style-preview__cards\">\n              <dd-card-minimal [color]=\"colorViolet\">\n                <small>Classic</small>\n                <h3>{{ 'quickStart.styles.classicCardTitle' | transloco }}</h3>\n                <p>{{ 'quickStart.styles.classicCardText' | transloco }}</p>\n              </dd-card-minimal>\n              <dd-card-signal [color]=\"colorOrange\">\n                <small>Signal</small>\n                <h3>{{ 'quickStart.styles.signalCardTitle' | transloco }}</h3>\n                <p>{{ 'quickStart.styles.signalCardText' | transloco }}</p>\n              </dd-card-signal>\n            </div>\n          </div>\n        }\n        @if (activePreviewTab().id === 'neobrutalism') {\n          <div class=\"style-preview\">\n            <div class=\"style-preview__row\">\n              <duck-dev-button-neobrutal-slab\n                [text]=\"'Slab'\"\n                [helperText]=\"'click me'\"\n                [colorButton]=\"colorViolet\"\n              />\n              <duck-dev-button-neobrutal-slab\n                [text]=\"'Action'\"\n                [helperText]=\"'do it'\"\n                [colorButton]=\"colorOrange\"\n              />\n            </div>\n            <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n              <p><strong>Neobrutalism</strong> \u2014 {{ 'quickStart.styles.neobrutalBubbleText' | transloco }}</p>\n            </dd-speaker-bubble-soft>\n          </div>\n        }\n      </duck-dev-tab>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 7 \u2014 USAGE EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'07'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.usage.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <ng-template #usageTemplate>\n        <pre class=\"accordion-code\"><code>&lt;duck-dev-button-casper\n  [text]=\"'Click me'\"\n  [colorButton]=\"colorViolet\"\n/&gt;\n\n&lt;dd-badge\n  [text]=\"'New'\"\n  [color]=\"colorOrange\"\n  [variant]=\"'solid'\"\n/&gt;\n\n&lt;dd-card-minimal [color]=\"colorViolet\"&gt;\n  &lt;h3&gt;Title&lt;/h3&gt;\n  &lt;p&gt;Content goes here&lt;/p&gt;\n&lt;/dd-card-minimal&gt;</code></pre>\n      </ng-template>\n\n      <ng-template #usageComponent>\n        <pre class=\"accordion-code\"><code>import {{ '{' }} Component {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} ButtonCasper {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} Badge {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} DuckDevCardMinimal {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n&#64;Component({{ '{' }}\n  selector: 'app-example',\n  standalone: true,\n  imports: [ButtonCasper, Badge, DuckDevCardMinimal],\n  templateUrl: './example.html',\n{{ '}' }})\nexport class ExampleComponent {{ '{' }}\n  colorViolet = AccentEnumColor.Violet;\n  colorOrange = AccentEnumColor.Orange;\n{{ '}' }}</code></pre>\n      </ng-template>\n\n      <div class=\"accordion-row\">\n        <duck-dev-accordion\n          [title]=\"'quickStart.usage.templateTitle' | transloco\"\n          [content]=\"usageTemplate\"\n          [color]=\"colorOrange\"\n        />\n        <duck-dev-accordion\n          [title]=\"'quickStart.usage.componentTitle' | transloco\"\n          [content]=\"usageComponent\"\n          [color]=\"colorViolet\"\n        />\n      </div>\n\n      <dd-speaker-bubble-soft [color]=\"colorGray\" [tail]=\"'left'\">\n        <p>{{ 'quickStart.usage.tip' | transloco }}</p>\n      </dd-speaker-bubble-soft>\n    </dd-card-section>\n  </section>\n\n</div>\n", styles: [".quick-start{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:56px}.hero{text-align:center;padding:40px 0 16px}.hero__badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.hero h1{font-size:42px;font-weight:800;color:var(--dd-base-600);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.hero__subtitle{font-size:18px;color:var(--dd-base-400);line-height:1.6;max-width:600px;margin:0 auto}.step__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.step__header h2{font-size:26px;font-weight:700;color:var(--dd-base-600);margin:0}.section-description{font-size:16px;line-height:1.65;color:var(--dd-base-400);margin:0 0 28px}.code-block{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--dd-base-300)}.code-block__label{padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dd-base-300);background:var(--dd-base-600);border-bottom:1px solid var(--dd-base-500)}.code-block pre{margin:0;padding:20px;background:var(--dd-base-600);overflow-x:auto}.code-block pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.code-block--compact{margin:0 0 28px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.palette-grid{display:flex;flex-direction:column;gap:28px;margin-bottom:32px}.palette-group h3{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{flex:1;min-width:60px;height:64px;border-radius:10px;border:1px solid var(--dd-base-300);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:translateY(-3px);box-shadow:0 6px 20px -8px var(--dd-base-300)}.swatch__label{font-size:11px;font-weight:600;color:var(--dd-base-500)}.swatch__label--light{color:var(--dd-base-0)}.swatch--accent{min-width:100px;height:72px}.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.accordion-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}.showcase-title{font-size:15px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 16px}.progress-showcase{display:flex;flex-direction:column;gap:16px}.buttons-showcase{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.badges-showcase{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.cards-showcase{display:flex;flex-direction:column;gap:12px}.style-preview{display:flex;flex-direction:column;gap:24px;padding:8px 0}.style-preview__row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.style-preview__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.quick-start{padding:24px 16px 60px;gap:40px}.hero h1{font-size:30px}.hero__subtitle{font-size:16px}.step__header h2{font-size:22px}.theme-cards{grid-template-columns:1fr}.swatch{min-width:40px;height:52px}.swatch--accent{min-width:70px}.style-preview__cards{grid-template-columns:1fr}}@media(max-width:480px){.hero h1{font-size:26px}.buttons-showcase{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevCardMinimal, selector: "dd-card-minimal", inputs: ["color"] }, { kind: "component", type: DuckDevCardSignal, selector: "dd-card-signal", inputs: ["color"] }, { kind: "component", type: DuckDevCardOutline, selector: "dd-card-outline", inputs: ["color"] }, { kind: "component", type: DuckDevAccordionComponent, selector: "duck-dev-accordion", inputs: ["content", "title", "color"] }, { kind: "component", type: ButtonCasper, selector: "duck-dev-button-casper", inputs: ["isDisabled", "text", "colorButton"] }, { kind: "component", type: ButtonGlideOver, selector: "duck-dev-button-glide-over", inputs: ["textButton", "colorButton", "padding"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevProgressLine, selector: "duck-dev-progress-line", inputs: ["label", "value", "subtext", "color"] }, { kind: "component", type: DuckDevSpeakerBubbleSoft, selector: "dd-speaker-bubble-soft", inputs: ["color", "tail", "target"] }, { 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: QuickStartBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-quick-start-block', standalone: true, imports: [
+                        TranslocoPipe,
+                        DuckDevCardAccent,
+                        DuckDevCardSection,
+                        DuckDevCardMinimal,
+                        DuckDevCardSignal,
+                        DuckDevCardOutline,
+                        DuckDevAccordionComponent,
+                        ButtonCasper,
+                        ButtonGlideOver,
+                        ButtonFlip,
+                        ButtonNeobrutalSlab,
+                        Badge,
+                        DuckDevProgressLine,
+                        DuckDevSpeakerBubbleSoft,
+                        DuckDevTab,
+                    ], template: "<div class=\"quick-start\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <header class=\"hero\">\n    <div class=\"hero__badges\">\n      <dd-badge [text]=\"'Angular 21'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Signals'\" [color]=\"colorOrange\" [variant]=\"'soft'\" [size]=\"'sm'\" />\n      <dd-badge [text]=\"'Standalone'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n    </div>\n    <h1>{{ 'quickStart.hero.title' | transloco }}</h1>\n    <p class=\"hero__subtitle\">{{ 'quickStart.hero.subtitle' | transloco }}</p>\n  </header>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 1 \u2014 INSTALL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'01'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.install.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <dd-card-signal [color]=\"colorViolet\">\n        <small>{{ 'quickStart.install.eyebrow' | transloco }}</small>\n        <h3>{{ 'quickStart.install.cardTitle' | transloco }}</h3>\n        <p>{{ 'quickStart.install.cardText' | transloco }}</p>\n      </dd-card-signal>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">angular.json</div>\n        <pre><code>\"styles\": [\n  \"node_modules/duck-dev-lib/styles/variables.scss\",\n  \"src/styles.scss\"\n]</code></pre>\n      </div>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">app.config.ts</div>\n        <pre><code>import {{ '{' }} provideTransloco {{ '}' }} from '@jsverse/transloco';\n\nexport const appConfig = {{ '{' }}\n  providers: [\n    provideTransloco({{ '{' }}\n      config: {{ '{' }} availableLangs: ['en', 'ru'], defaultLang: 'en' {{ '}' }}\n    {{ '}' }})\n  ]\n{{ '}' }};</code></pre>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 2 \u2014 PALETTE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'02'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.palette.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.palette.description' | transloco }}</p>\n\n      <div class=\"palette-grid\">\n        <div class=\"palette-group\">\n          <h3>{{ 'quickStart.palette.neutralsTitle' | transloco }}</h3>\n          <div class=\"swatch-row\">\n            <div class=\"swatch\" style=\"background: var(--dd-base-0)\">\n              <span class=\"swatch__label\">0</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-100)\">\n              <span class=\"swatch__label\">100</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-200)\">\n              <span class=\"swatch__label\">200</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-300)\">\n              <span class=\"swatch__label\">300</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-400)\">\n              <span class=\"swatch__label swatch__label--light\">400</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-500)\">\n              <span class=\"swatch__label swatch__label--light\">500</span>\n            </div>\n            <div class=\"swatch\" style=\"background: var(--dd-base-600)\">\n              <span class=\"swatch__label swatch__label--light\">600</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"palette-group\">\n          <h3>{{ 'quickStart.palette.accentsTitle' | transloco }}</h3>\n          <div class=\"swatch-row\">\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-secondary)\">\n              <span class=\"swatch__label swatch__label--light\">secondary</span>\n            </div>\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-orange)\">\n              <span class=\"swatch__label swatch__label--light\">orange</span>\n            </div>\n            <div class=\"swatch swatch--accent\" style=\"background: var(--dd-base-accent-blue)\">\n              <span class=\"swatch__label swatch__label--light\">blue</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <dd-speaker-bubble-soft [color]=\"colorViolet\" [tail]=\"'left'\">\n        <p><strong>{{ 'quickStart.palette.tipTitle' | transloco }}</strong> {{ 'quickStart.palette.tipText' | transloco }}</p>\n      </dd-speaker-bubble-soft>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 3 \u2014 THEMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'03'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.themes.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <div class=\"theme-cards\">\n        <dd-card-minimal [color]=\"colorWhite\">\n          <small>{{ 'quickStart.themes.lightEyebrow' | transloco }}</small>\n          <h3>{{ 'quickStart.themes.lightTitle' | transloco }}</h3>\n          <p>{{ 'quickStart.themes.lightText' | transloco }}</p>\n        </dd-card-minimal>\n        <dd-card-minimal [color]=\"colorDark\">\n          <small>{{ 'quickStart.themes.darkEyebrow' | transloco }}</small>\n          <h3>{{ 'quickStart.themes.darkTitle' | transloco }}</h3>\n          <p>{{ 'quickStart.themes.darkText' | transloco }}</p>\n        </dd-card-minimal>\n      </div>\n\n      <ng-template #themeHtmlSnippet>\n        <pre class=\"accordion-code\"><code>&lt;html ddTheme=\"dark\"&gt;\n  &lt;body&gt;\n    &lt;app-root&gt;&lt;/app-root&gt;\n  &lt;/body&gt;\n&lt;/html&gt;</code></pre>\n      </ng-template>\n\n      <ng-template #themeToggleSnippet>\n        <pre class=\"accordion-code\"><code>setTheme(theme: 'dark' | 'light') {{ '{' }}\n  document.documentElement\n    .setAttribute('ddTheme', theme);\n{{ '}' }}</code></pre>\n      </ng-template>\n\n      <div class=\"accordion-row\">\n        <duck-dev-accordion\n          [title]=\"'quickStart.themes.htmlAccordionTitle' | transloco\"\n          [content]=\"themeHtmlSnippet\"\n        />\n        <duck-dev-accordion\n          [title]=\"'quickStart.themes.toggleAccordionTitle' | transloco\"\n          [content]=\"themeToggleSnippet\"\n          [color]=\"colorViolet\"\n        />\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 4 \u2014 CUSTOM THEME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'04'\" [color]=\"colorDark\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.custom.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <dd-card-outline [color]=\"colorOrange\">\n        <small>{{ 'quickStart.custom.eyebrow' | transloco }}</small>\n        <h3>{{ 'quickStart.custom.cardTitle' | transloco }}</h3>\n        <p>{{ 'quickStart.custom.cardText' | transloco }}</p>\n      </dd-card-outline>\n\n      <div class=\"code-block\">\n        <div class=\"code-block__label\">styles.scss</div>\n        <pre><code>[ddTheme='brand'] {{ '{' }}\n  --dd-base-0: #ffffff;\n  --dd-base-100: #f4f6ff;\n  --dd-base-300: #dbe0ff;\n  --dd-base-600: #0e1028;\n  --dd-base-secondary: #6829ff;\n  --dd-base-accent-orange: #fe7b20;\n  --dd-base-accent-blue: #3254f3;\n{{ '}' }}</code></pre>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 5 \u2014 COLORS IN COMPONENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'05'\" [color]=\"colorViolet\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.colors.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.colors.description' | transloco }}</p>\n\n      <div class=\"code-block code-block--compact\">\n        <div class=\"code-block__label\">AccentEnumColor</div>\n        <pre><code>import {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n// Violet \u00B7 Orange \u00B7 White \u00B7 Gray \u00B7 Dark</code></pre>\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.progressTitle' | transloco }}</h3>\n      <div class=\"progress-showcase\">\n        <duck-dev-progress-line [label]=\"'Violet'\" [value]=\"85\" [color]=\"colorViolet\" />\n        <duck-dev-progress-line [label]=\"'Orange'\" [value]=\"60\" [color]=\"colorOrange\" />\n        <duck-dev-progress-line [label]=\"'Gray'\" [value]=\"40\" [color]=\"colorGray\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.buttonsTitle' | transloco }}</h3>\n      <div class=\"buttons-showcase\">\n        <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n        <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n        <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.badgesTitle' | transloco }}</h3>\n      <div class=\"badges-showcase\">\n        <dd-badge [text]=\"'Solid'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n        <dd-badge [text]=\"'Soft'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n        <dd-badge [text]=\"'Outline'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n        <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'solid'\" />\n      </div>\n\n      <h3 class=\"showcase-title\">{{ 'quickStart.colors.cardsTitle' | transloco }}</h3>\n      <div class=\"cards-showcase\">\n        <dd-card-accent [color]=\"colorViolet\">\n          <div>{{ 'quickStart.colors.cardViolet' | transloco }}</div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorOrange\">\n          <div>{{ 'quickStart.colors.cardOrange' | transloco }}</div>\n        </dd-card-accent>\n        <dd-card-accent [color]=\"colorDark\">\n          <div>{{ 'quickStart.colors.cardDark' | transloco }}</div>\n        </dd-card-accent>\n      </div>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 6 \u2014 TWO STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'06'\" [color]=\"colorOrange\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.styles.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <p class=\"section-description\">{{ 'quickStart.styles.description' | transloco }}</p>\n\n      <duck-dev-tab [tabs]=\"previewTabs\" (tabChange)=\"onPreviewTabChange($event)\">\n        @if (activePreviewTab().id === 'classic') {\n          <div class=\"style-preview\">\n            <div class=\"style-preview__row\">\n              <duck-dev-button-casper [text]=\"'Casper'\" [colorButton]=\"colorViolet\" />\n              <duck-dev-button-glide-over textButton=\"Glide Over\" [colorButton]=\"colorOrange\" />\n              <duck-dev-button-flip [text]=\"'Flip'\" [colorButton]=\"colorDark\" />\n            </div>\n            <div class=\"style-preview__row\">\n              <dd-badge [text]=\"'Status'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n              <dd-badge [text]=\"'Label'\" [color]=\"colorOrange\" [variant]=\"'soft'\" />\n              <dd-badge [text]=\"'Tag'\" [color]=\"colorGray\" [variant]=\"'outline'\" />\n            </div>\n            <duck-dev-progress-line [label]=\"'Progress'\" [value]=\"72\" [color]=\"colorViolet\" />\n            <div class=\"style-preview__cards\">\n              <dd-card-minimal [color]=\"colorViolet\">\n                <small>Classic</small>\n                <h3>{{ 'quickStart.styles.classicCardTitle' | transloco }}</h3>\n                <p>{{ 'quickStart.styles.classicCardText' | transloco }}</p>\n              </dd-card-minimal>\n              <dd-card-signal [color]=\"colorOrange\">\n                <small>Signal</small>\n                <h3>{{ 'quickStart.styles.signalCardTitle' | transloco }}</h3>\n                <p>{{ 'quickStart.styles.signalCardText' | transloco }}</p>\n              </dd-card-signal>\n            </div>\n          </div>\n        }\n        @if (activePreviewTab().id === 'neobrutalism') {\n          <div class=\"style-preview\">\n            <div class=\"style-preview__row\">\n              <duck-dev-button-neobrutal-slab\n                [text]=\"'Slab'\"\n                [helperText]=\"'click me'\"\n                [colorButton]=\"colorViolet\"\n              />\n              <duck-dev-button-neobrutal-slab\n                [text]=\"'Action'\"\n                [helperText]=\"'do it'\"\n                [colorButton]=\"colorOrange\"\n              />\n            </div>\n            <dd-speaker-bubble-soft [color]=\"colorOrange\" [tail]=\"'right'\">\n              <p><strong>Neobrutalism</strong> \u2014 {{ 'quickStart.styles.neobrutalBubbleText' | transloco }}</p>\n            </dd-speaker-bubble-soft>\n          </div>\n        }\n      </duck-dev-tab>\n    </dd-card-section>\n  </section>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STEP 7 \u2014 USAGE EXAMPLE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <section class=\"step\">\n    <div class=\"step__header\">\n      <dd-badge [text]=\"'07'\" [color]=\"colorGray\" [variant]=\"'solid'\" [size]=\"'md'\" />\n      <h2>{{ 'quickStart.usage.title' | transloco }}</h2>\n    </div>\n\n    <dd-card-section>\n      <ng-template #usageTemplate>\n        <pre class=\"accordion-code\"><code>&lt;duck-dev-button-casper\n  [text]=\"'Click me'\"\n  [colorButton]=\"colorViolet\"\n/&gt;\n\n&lt;dd-badge\n  [text]=\"'New'\"\n  [color]=\"colorOrange\"\n  [variant]=\"'solid'\"\n/&gt;\n\n&lt;dd-card-minimal [color]=\"colorViolet\"&gt;\n  &lt;h3&gt;Title&lt;/h3&gt;\n  &lt;p&gt;Content goes here&lt;/p&gt;\n&lt;/dd-card-minimal&gt;</code></pre>\n      </ng-template>\n\n      <ng-template #usageComponent>\n        <pre class=\"accordion-code\"><code>import {{ '{' }} Component {{ '}' }} from '&#64;angular/core';\nimport {{ '{' }} ButtonCasper {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} Badge {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} DuckDevCardMinimal {{ '}' }} from 'duck-dev-lib';\nimport {{ '{' }} AccentEnumColor {{ '}' }} from 'duck-dev-lib';\n\n&#64;Component({{ '{' }}\n  selector: 'app-example',\n  standalone: true,\n  imports: [ButtonCasper, Badge, DuckDevCardMinimal],\n  templateUrl: './example.html',\n{{ '}' }})\nexport class ExampleComponent {{ '{' }}\n  colorViolet = AccentEnumColor.Violet;\n  colorOrange = AccentEnumColor.Orange;\n{{ '}' }}</code></pre>\n      </ng-template>\n\n      <div class=\"accordion-row\">\n        <duck-dev-accordion\n          [title]=\"'quickStart.usage.templateTitle' | transloco\"\n          [content]=\"usageTemplate\"\n          [color]=\"colorOrange\"\n        />\n        <duck-dev-accordion\n          [title]=\"'quickStart.usage.componentTitle' | transloco\"\n          [content]=\"usageComponent\"\n          [color]=\"colorViolet\"\n        />\n      </div>\n\n      <dd-speaker-bubble-soft [color]=\"colorGray\" [tail]=\"'left'\">\n        <p>{{ 'quickStart.usage.tip' | transloco }}</p>\n      </dd-speaker-bubble-soft>\n    </dd-card-section>\n  </section>\n\n</div>\n", styles: [".quick-start{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:56px}.hero{text-align:center;padding:40px 0 16px}.hero__badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}.hero h1{font-size:42px;font-weight:800;color:var(--dd-base-600);line-height:1.15;margin:0 0 16px;letter-spacing:-.02em}.hero__subtitle{font-size:18px;color:var(--dd-base-400);line-height:1.6;max-width:600px;margin:0 auto}.step__header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.step__header h2{font-size:26px;font-weight:700;color:var(--dd-base-600);margin:0}.section-description{font-size:16px;line-height:1.65;color:var(--dd-base-400);margin:0 0 28px}.code-block{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--dd-base-300)}.code-block__label{padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dd-base-300);background:var(--dd-base-600);border-bottom:1px solid var(--dd-base-500)}.code-block pre{margin:0;padding:20px;background:var(--dd-base-600);overflow-x:auto}.code-block pre code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.code-block--compact{margin:0 0 28px}.accordion-code{margin:0;padding:20px;background:var(--dd-base-600);border-radius:8px;overflow-x:auto}.accordion-code code{font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;line-height:1.7;color:var(--dd-base-100)}.palette-grid{display:flex;flex-direction:column;gap:28px;margin-bottom:32px}.palette-group h3{font-size:14px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{flex:1;min-width:60px;height:64px;border-radius:10px;border:1px solid var(--dd-base-300);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:translateY(-3px);box-shadow:0 6px 20px -8px var(--dd-base-300)}.swatch__label{font-size:11px;font-weight:600;color:var(--dd-base-500)}.swatch__label--light{color:var(--dd-base-0)}.swatch--accent{min-width:100px;height:72px}.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}.accordion-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}.showcase-title{font-size:15px;font-weight:600;color:var(--dd-base-500);text-transform:uppercase;letter-spacing:.04em;margin:32px 0 16px}.progress-showcase{display:flex;flex-direction:column;gap:16px}.buttons-showcase{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.badges-showcase{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.cards-showcase{display:flex;flex-direction:column;gap:12px}.style-preview{display:flex;flex-direction:column;gap:24px;padding:8px 0}.style-preview__row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.style-preview__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:768px){.quick-start{padding:24px 16px 60px;gap:40px}.hero h1{font-size:30px}.hero__subtitle{font-size:16px}.step__header h2{font-size:22px}.theme-cards{grid-template-columns:1fr}.swatch{min-width:40px;height:52px}.swatch--accent{min-width:70px}.style-preview__cards{grid-template-columns:1fr}}@media(max-width:480px){.hero h1{font-size:26px}.buttons-showcase{flex-direction:column;align-items:flex-start}}\n"] }]
+        }] });
+
+class DuckDevModalClassic {
+    platformId = inject(PLATFORM_ID);
+    elementRef = inject(ElementRef);
+    isOpen = input.required({ ...(ngDevMode ? { debugName: "isOpen" } : {}) });
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            document.body.appendChild(this.elementRef.nativeElement);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevModalClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevModalClassic, isStandalone: true, selector: "dd-duck-dev-modal-classic", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (isOpen()) {\n  <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n    <ng-content />\n  </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevModalClassic, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-duck-dev-modal-classic', imports: [], template: "@if (isOpen()) {\n  <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n    <ng-content />\n  </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] }]
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }] } });
+
+class ModalBlock {
+    isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
+    open() {
+        this.isOpen.set(true);
+    }
+    close() {
+        this.isOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ModalBlock, isStandalone: true, selector: "app-modal-block", ngImport: i0, template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section,.demo-container dd-card-section{display:block;margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2,.demo-container dd-card-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description,.demo-container dd-card-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3,.demo-container dd-card-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevModalClassic, selector: "dd-duck-dev-modal-classic", inputs: ["isOpen"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }, { kind: "pipe", type: i1$3.TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ModalBlock, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-modal-block', imports: [TranslocoModule, DuckDevCardSection, DuckDevModalClassic, DuckDevIcon], template: "<div class=\"demo-container\">\n  <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n  <div class=\"example-row quick-actions\">\n    <button class=\"demo-btn\" (click)=\"open()\">\n      {{ 'modalDoc.quickDemo' | transloco }}\n    </button>\n  </div>\n\n  <dd-card-section>\n    <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n    <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n    <div class=\"usage-block\">\n      <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n      <pre><code ngNonBindable>&lt;!-- Template --&gt;\n&lt;dd-duck-dev-modal-classic [isOpen]=\"isOpen()\"&gt;\n  &lt;div class=&quot;modal-content&quot;&gt;\n    &lt;h3&gt;{{ 'modalDoc.snippets.sampleTitle' | transloco }}&lt;/h3&gt;\n    &lt;p&gt;{{ 'modalDoc.snippets.sampleText' | transloco }}&lt;/p&gt;\n    &lt;div class=&quot;actions&quot;&gt;\n      &lt;button class=&quot;demo-btn&quot; (click)=&quot;close()&quot;&gt;{{ 'modalDoc.actions.close' | transloco }}&lt;/button&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/dd-duck-dev-modal-classic&gt;\n\n&lt;!-- Component --&gt;\nisOpen = signal(false);\nopen() &#123; this.isOpen.set(true); &#125;\nclose() &#123; this.isOpen.set(false); &#125;\n</code></pre>\n    </div>\n\n    <div class=\"inputs-block\">\n      <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n      <ul>\n        <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n      </ul>\n    </div>\n\n    <div class=\"examples-block\">\n      <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n      <div class=\"example-row\">\n        <button class=\"demo-btn\" (click)=\"open()\">\n          {{ 'modalDoc.examples.open' | transloco }}\n        </button>\n      </div>\n    </div>\n  </dd-card-section>\n\n  <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n    <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n      <header class=\"modal-header\">\n        <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n        <duck-dev-icon\n          class=\"close-icon\"\n          name=\"duck-dev-clear-medium\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n          [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n          (click)=\"close()\"\n          (keydown.enter)=\"close()\"\n        ></duck-dev-icon>\n      </header>\n      <div id=\"demo-modal-desc\" class=\"modal-body\">\n        <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n        <ul class=\"modal-list\">\n          <li>Keyboard friendly close</li>\n          <li>Smooth animations</li>\n          <li>Frosted glass backdrop</li>\n        </ul>\n      </div>\n      <footer class=\"actions\">\n        <button class=\"demo-btn\" (click)=\"close()\">\n          {{ 'modalDoc.actions.close' | transloco }}\n        </button>\n      </footer>\n    </div>\n  </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section,.demo-container dd-card-section{display:block;margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2,.demo-container dd-card-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description,.demo-container dd-card-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3,.demo-container dd-card-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"] }]
+        }] });
+
+class DuckDevSegmentButton {
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
+    templateRef = viewChild.required('contentTpl');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSegmentButton, isStandalone: true, selector: "dd-segment-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-segment-button', imports: [], template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
+
+class DuckDevSegmentClassic {
+    cdr = inject(ChangeDetectorRef);
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
+    valueChange = output();
+    ionChange = output();
+    segmentButtons;
+    buttonsContainer = viewChild.required('buttonsContainer');
+    buttons = [];
+    selectedValue;
+    indicatorPosition = 2;
+    indicatorWidth = 0;
+    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((b) => ({ value: b.value(), contentId: b.contentId(), template: b.templateRef() }));
+    }
+    getSelectedIndex() {
+        return Math.max(0, this.buttons.findIndex((b) => b.value === this.selectedValue));
+    }
+    updateIndicator(index) {
+        const container = this.buttonsContainer().nativeElement;
+        const buttonElements = container.querySelectorAll('.segment-button');
+        if (buttonElements[index]) {
+            const button = buttonElements[index];
+            this.indicatorWidth = button.offsetWidth;
+            this.indicatorPosition = button.offsetLeft;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", 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=\"segment-container\">\n  <div class=\"segment-background\"></div>\n  <div\n    class=\"segment-indicator\"\n    [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n    [style.width.px]=\"indicatorWidth\"\n  ></div>\n  <div\n    class=\"segment-buttons\"\n    #buttonsContainer\n  >\n    @for (button of buttons; track button; let i = $index) {\n      <button\n        class=\"segment-button\"\n        [class.segment-button-checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <ng-container *ngTemplateOutlet=\"button.template\" />\n      </button>\n    }\n  </div>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, decorators: [{
+            type: Component,
+            args: [{ selector: 'dd-segment-classic', imports: [
+                        NgTemplateOutlet
+                    ], template: "<div class=\"segment-container\">\n  <div class=\"segment-background\"></div>\n  <div\n    class=\"segment-indicator\"\n    [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n    [style.width.px]=\"indicatorWidth\"\n  ></div>\n  <div\n    class=\"segment-buttons\"\n    #buttonsContainer\n  >\n    @for (button of buttons; track button; let i = $index) {\n      <button\n        class=\"segment-button\"\n        [class.segment-button-checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <ng-container *ngTemplateOutlet=\"button.template\" />\n      </button>\n    }\n  </div>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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 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>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, 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"] }]
+        }] });
+
+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 SpeakerBubbleBlock {
     t = inject(TranslocoService);
     colorViolet = AccentEnumColor.Violet;
@@ -5727,8 +5746,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-VOJz-IcV.mjs'),
-    ru: import('./duck-dev-lib-ru-COyomsqL.mjs'),
+    en: import('./duck-dev-lib-en-BXgJr6gM.mjs'),
+    ru: import('./duck-dev-lib-ru-BezMvMFU.mjs'),
 };
 
 /*