duck-dev-lib 0.0.74 → 0.0.76

package/fesm2022/duck-dev-lib.mjs

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