duck-dev-lib 0.0.74 → 0.0.75

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 {
@@ -6366,8 +6506,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
         }] });
 
 const DuckDevLibTranslations = {
-    en: import('./duck-dev-lib-en-HnIDQoqi.mjs'),
-    ru: import('./duck-dev-lib-ru-CsxjiQCC.mjs'),
+    en: import('./duck-dev-lib-en-BUr6Xr1h.mjs'),
+    ru: import('./duck-dev-lib-ru-BxtBEpPE.mjs'),
 };
 
 /*
@@ -6378,5 +6518,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, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabNeobrutal, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
 //# sourceMappingURL=duck-dev-lib.mjs.map