duck-dev-lib 0.0.81 → 0.0.82

package/fesm2022/duck-dev-lib-documentation.mjs

@@ -3618,7 +3618,7 @@ class ButtonNeobrutalBlock {
     colorGray = AccentEnumColor.Gray;
     colorDark = AccentEnumColor.Dark;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonNeobrutalBlock, isStandalone: true, selector: "app-button-neobrutal-block", ngImport: i0, template: "<dd-card-section>\n  <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n  <p class=\"description\">\n    {{ 'buttons.neobrutal.description' | transloco }}\n  </p>\n\n  <div class=\"usage-block\">\n    <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n    <pre><code>&lt;duck-dev-button-neobrutal-burst\n  [text]=\"'Launch'\"\n  [subtext]=\"'HOT DROP'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-slab\n  [text]=\"'Drop Zone'\"\n  [helperText]=\"'ready to ship'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tag\n  [text]=\"'Buy now'\"\n  [tag]=\"'01'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-sticker\n  [text]=\"'Peel me'\"\n  [subtext]=\"'new'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-zigzag\n  [text]=\"'Tear off'\"\n  [label]=\"'FREE'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tape\n  [text]=\"'Stick it'\"\n  [icon]=\"'&gt;&gt;'\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n  </div>\n\n  <div class=\"inputs-block\">\n    <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n    <ul>\n      <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n      <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n      <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n      <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n      <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n      <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n      <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n      <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n    </ul>\n  </div>\n\n  <div class=\"examples-block\">\n    <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Open beta'\"\n          [subtext]=\"'Beta'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Night mode'\"\n          [subtext]=\"'Sharp'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Drop zone'\"\n          [helperText]=\"'ready to ship'\"\n          [colorButton]=\"colorGray\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Fast lane'\"\n          [helperText]=\"'priority queue'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Read only'\"\n          [helperText]=\"'disabled'\"\n          [isDisabled]=\"true\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Buy now'\"\n          [tag]=\"'01'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Join crew'\"\n          [tag]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Pay later'\"\n          [tag]=\"'02'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <!-- Sticker -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Peel me'\"\n          [subtext]=\"'new'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Grab this'\"\n          [subtext]=\"'sale'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Dark peel'\"\n          [subtext]=\"'pro'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <!-- Zigzag -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Tear off'\"\n          [label]=\"'FREE'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Claim it'\"\n          [label]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Rip here'\"\n          [label]=\"'GO'\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <!-- Tape -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape\n          [text]=\"'Attach'\"\n          [icon]=\"'+'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape\n          [text]=\"'Pin down'\"\n          [icon]=\"'>>'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n  </div>\n</dd-card-section>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonNeobrutalBurst, selector: "duck-dev-button-neobrutal-burst", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTag, selector: "duck-dev-button-neobrutal-tag", inputs: ["text", "tag", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSticker, selector: "duck-dev-button-neobrutal-sticker", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalZigzag, selector: "duck-dev-button-neobrutal-zigzag", inputs: ["text", "label", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTape, selector: "duck-dev-button-neobrutal-tape", inputs: ["text", "icon", "isDisabled", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ButtonNeobrutalBlock, isStandalone: true, selector: "app-button-neobrutal-block", ngImport: i0, template: "<dd-card-section>\n  <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n  <p class=\"description\">\n    {{ 'buttons.neobrutal.description' | transloco }}\n  </p>\n\n  <div class=\"usage-block\">\n    <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n    <pre><code>&lt;duck-dev-button-neobrutal-burst\n  [text]=\"'Launch'\"\n  [subtext]=\"'HOT DROP'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-slab\n  [text]=\"'Drop Zone'\"\n  [helperText]=\"'ready to ship'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tag\n  [text]=\"'Buy now'\"\n  [tag]=\"'01'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-sticker\n  [text]=\"'Peel me'\"\n  [subtext]=\"'new'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-zigzag\n  [text]=\"'Tear off'\"\n  [label]=\"'FREE'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tape\n  [text]=\"'Stick it'\"\n  [icon]=\"'&gt;&gt;'\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n  </div>\n\n  <div class=\"inputs-block\">\n    <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n    <ul>\n      <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n      <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n      <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n      <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n      <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n      <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n      <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n      <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n    </ul>\n  </div>\n\n  <div class=\"examples-block\">\n    <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Open beta'\"\n          [subtext]=\"'Beta'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Night mode'\"\n          [subtext]=\"'Sharp'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Drop zone'\"\n          [helperText]=\"'ready to ship'\"\n          [colorButton]=\"colorGray\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Fast lane'\"\n          [helperText]=\"'priority queue'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Read only'\"\n          [helperText]=\"'disabled'\"\n          [isDisabled]=\"true\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Buy now'\"\n          [tag]=\"'01'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Join crew'\"\n          [tag]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Pay later'\"\n          [tag]=\"'02'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <!-- Sticker -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Peel me'\"\n          [subtext]=\"'new'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Grab this'\"\n          [subtext]=\"'sale'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Dark peel'\"\n          [subtext]=\"'pro'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <!-- Zigzag -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Tear off'\"\n          [label]=\"'FREE'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Claim it'\"\n          [label]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Rip here'\"\n          [label]=\"'GO'\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <!-- Tape -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape\n          [text]=\"'Attach'\"\n          [icon]=\"'+'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape\n          [text]=\"'Pin down'\"\n          [icon]=\"'>>'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n  </div>\n</dd-card-section>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-blue);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ButtonNeobrutalBurst, selector: "duck-dev-button-neobrutal-burst", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSlab, selector: "duck-dev-button-neobrutal-slab", inputs: ["text", "helperText", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTag, selector: "duck-dev-button-neobrutal-tag", inputs: ["text", "tag", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalSticker, selector: "duck-dev-button-neobrutal-sticker", inputs: ["text", "subtext", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalZigzag, selector: "duck-dev-button-neobrutal-zigzag", inputs: ["text", "label", "isDisabled", "colorButton"] }, { kind: "component", type: ButtonNeobrutalTape, selector: "duck-dev-button-neobrutal-tape", inputs: ["text", "icon", "isDisabled", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonNeobrutalBlock, decorators: [{
             type: Component,
@@ -3631,7 +3631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         ButtonNeobrutalTape,
                         DuckDevCardSection,
                         TranslocoPipe,
-                    ], template: "<dd-card-section>\n  <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n  <p class=\"description\">\n    {{ 'buttons.neobrutal.description' | transloco }}\n  </p>\n\n  <div class=\"usage-block\">\n    <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n    <pre><code>&lt;duck-dev-button-neobrutal-burst\n  [text]=\"'Launch'\"\n  [subtext]=\"'HOT DROP'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-slab\n  [text]=\"'Drop Zone'\"\n  [helperText]=\"'ready to ship'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tag\n  [text]=\"'Buy now'\"\n  [tag]=\"'01'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-sticker\n  [text]=\"'Peel me'\"\n  [subtext]=\"'new'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-zigzag\n  [text]=\"'Tear off'\"\n  [label]=\"'FREE'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tape\n  [text]=\"'Stick it'\"\n  [icon]=\"'&gt;&gt;'\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n  </div>\n\n  <div class=\"inputs-block\">\n    <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n    <ul>\n      <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n      <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n      <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n      <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n      <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n      <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n      <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n      <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n    </ul>\n  </div>\n\n  <div class=\"examples-block\">\n    <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Open beta'\"\n          [subtext]=\"'Beta'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Night mode'\"\n          [subtext]=\"'Sharp'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Drop zone'\"\n          [helperText]=\"'ready to ship'\"\n          [colorButton]=\"colorGray\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Fast lane'\"\n          [helperText]=\"'priority queue'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Read only'\"\n          [helperText]=\"'disabled'\"\n          [isDisabled]=\"true\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Buy now'\"\n          [tag]=\"'01'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Join crew'\"\n          [tag]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Pay later'\"\n          [tag]=\"'02'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <!-- Sticker -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Peel me'\"\n          [subtext]=\"'new'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Grab this'\"\n          [subtext]=\"'sale'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Dark peel'\"\n          [subtext]=\"'pro'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <!-- Zigzag -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Tear off'\"\n          [label]=\"'FREE'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Claim it'\"\n          [label]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Rip here'\"\n          [label]=\"'GO'\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <!-- Tape -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape\n          [text]=\"'Attach'\"\n          [icon]=\"'+'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape\n          [text]=\"'Pin down'\"\n          [icon]=\"'>>'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n  </div>\n</dd-card-section>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-neo-shadow);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"] }]
+                    ], template: "<dd-card-section>\n  <h2>{{ 'buttons.neobrutal.title' | transloco }}</h2>\n  <p class=\"description\">\n    {{ 'buttons.neobrutal.description' | transloco }}\n  </p>\n\n  <div class=\"usage-block\">\n    <h3>{{ 'buttons.neobrutal.usage' | transloco }}</h3>\n    <pre><code>&lt;duck-dev-button-neobrutal-burst\n  [text]=\"'Launch'\"\n  [subtext]=\"'HOT DROP'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-slab\n  [text]=\"'Drop Zone'\"\n  [helperText]=\"'ready to ship'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tag\n  [text]=\"'Buy now'\"\n  [tag]=\"'01'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-sticker\n  [text]=\"'Peel me'\"\n  [subtext]=\"'new'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-zigzag\n  [text]=\"'Tear off'\"\n  [label]=\"'FREE'\"\n  [colorButton]=\"buttonColor\"\n/&gt;\n\n&lt;duck-dev-button-neobrutal-tape\n  [text]=\"'Stick it'\"\n  [icon]=\"'&gt;&gt;'\"\n  [colorButton]=\"buttonColor\"\n/&gt;</code></pre>\n  </div>\n\n  <div class=\"inputs-block\">\n    <h3>{{ 'buttons.neobrutal.inputs' | transloco }}</h3>\n    <ul>\n      <li><strong>text</strong> - {{ 'buttons.neobrutal.inputText' | transloco }}</li>\n      <li><strong>subtext</strong> - {{ 'buttons.neobrutal.inputSubtext' | transloco }}</li>\n      <li><strong>helperText</strong> - {{ 'buttons.neobrutal.inputHelperText' | transloco }}</li>\n      <li><strong>tag</strong> - {{ 'buttons.neobrutal.inputTag' | transloco }}</li>\n      <li><strong>label</strong> - {{ 'buttons.neobrutal.inputLabel' | transloco }}</li>\n      <li><strong>icon</strong> - {{ 'buttons.neobrutal.inputIcon' | transloco }}</li>\n      <li><strong>colorButton</strong> - {{ 'buttons.neobrutal.inputColorButton' | transloco }}</li>\n      <li><strong>isDisabled</strong> - {{ 'buttons.neobrutal.inputIsDisabled' | transloco }}</li>\n    </ul>\n  </div>\n\n  <div class=\"examples-block\">\n    <h3>{{ 'buttons.neobrutal.examples' | transloco }}</h3>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst [text]=\"'Launch'\" [subtext]=\"'Hot drop'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Open beta'\"\n          [subtext]=\"'Beta'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleBurstDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-burst\n          [text]=\"'Night mode'\"\n          [subtext]=\"'Sharp'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabGray' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Drop zone'\"\n          [helperText]=\"'ready to ship'\"\n          [colorButton]=\"colorGray\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Fast lane'\"\n          [helperText]=\"'priority queue'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleSlabDisabled' | transloco }}</p>\n        <duck-dev-button-neobrutal-slab\n          [text]=\"'Read only'\"\n          [helperText]=\"'disabled'\"\n          [isDisabled]=\"true\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Buy now'\"\n          [tag]=\"'01'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Join crew'\"\n          [tag]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTagDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tag\n          [text]=\"'Pay later'\"\n          [tag]=\"'02'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <!-- Sticker -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Peel me'\"\n          [subtext]=\"'new'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Grab this'\"\n          [subtext]=\"'sale'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleStickerDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-sticker\n          [text]=\"'Dark peel'\"\n          [subtext]=\"'pro'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n\n    <!-- Zigzag -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagOrange' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Tear off'\"\n          [label]=\"'FREE'\"\n          [colorButton]=\"colorOrange\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Claim it'\"\n          [label]=\"'VIP'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleZigzagWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-zigzag\n          [text]=\"'Rip here'\"\n          [label]=\"'GO'\"\n          [colorButton]=\"colorWhite\"\n        />\n      </div>\n    </div>\n\n    <!-- Tape -->\n    <div class=\"example-row\">\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeWhite' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape [text]=\"'Stick it'\" [icon]=\"'>>'\" />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeViolet' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape\n          [text]=\"'Attach'\"\n          [icon]=\"'+'\"\n          [colorButton]=\"colorViolet\"\n        />\n      </div>\n      <div class=\"example-item\">\n        <p class=\"example-label\">{{ 'buttons.neobrutal.exampleTapeDark' | transloco }}</p>\n        <duck-dev-button-neobrutal-tape\n          [text]=\"'Pin down'\"\n          [icon]=\"'>>'\"\n          [colorButton]=\"colorDark\"\n        />\n      </div>\n    </div>\n  </div>\n</dd-card-section>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:linear-gradient(135deg,var(--dd-base-100),var(--dd-base-200));border:3px solid var(--dd-neo-ink);box-shadow:8px 8px 0 var(--dd-base-accent-yellow)}h2{font-size:28px;font-weight:700;color:var(--dd-base-600);margin-bottom:15px;text-transform:uppercase}h3{font-size:20px;font-weight:700;color:var(--dd-base-600);margin:25px 0 15px;text-transform:uppercase}.usage-block{margin-bottom:25px}.usage-block pre{margin:0;padding:20px;overflow-x:auto;border:3px solid var(--dd-neo-ink);border-radius:12px;background:var(--dd-base-600);box-shadow:8px 8px 0 var(--dd-base-accent-blue);color:var(--dd-base-0)}.usage-block code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6}.inputs-block{margin-bottom:25px}.inputs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.inputs-block li{padding:14px 16px;border:3px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-300);color:var(--dd-base-500);font-size:15px;line-height:1.5}.inputs-block strong{color:var(--dd-base-600)}.examples-block .example-row{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.examples-block .example-item{flex:1;min-width:250px;padding:22px 18px 20px;border:3px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,var(--dd-base-accent-yellow) 0 22px,transparent 23px),var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-accent-blue);display:flex;flex-direction:column;align-items:center;gap:18px}.examples-block .example-label{margin:0;color:var(--dd-base-500);font-size:14px;font-weight:700;text-align:center;text-transform:uppercase}.examples-block duck-dev-button-neobrutal-burst,.examples-block duck-dev-button-neobrutal-slab,.examples-block duck-dev-button-neobrutal-tag,.examples-block duck-dev-button-neobrutal-sticker,.examples-block duck-dev-button-neobrutal-zigzag,.examples-block duck-dev-button-neobrutal-tape{width:100%;max-width:320px}@media(max-width:768px){.examples-block .example-item{min-width:100%}}\n"] }]
         }] });
 
 class DuckDevTab {
@@ -3834,29 +3834,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
 
 class LoaderNeobrutalStamp {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalStamp, isStandalone: true, selector: "duck-dev-loader-neobrutal-stamp", ngImport: i0, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"stamp-plate\"></span>\n  <span class=\"stamp-center\"></span>\n  <span class=\"stamp-text\">LOAD</span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-neo-ink)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-base-0);animation:stamp-pulse 1.05s ease-in-out infinite}.stamp-text{position:absolute;bottom:10px;left:50%;z-index:1;padding:.1rem .45rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);color:var(--dd-base-600);font-size:.62rem;font-weight:900;letter-spacing:.18em;transform:translate(-50%) rotate(-4deg)}@keyframes stamp-spin{0%,20%{transform:rotate(0) scale(1)}30%,50%{transform:rotate(90deg) scale(1.08)}60%,80%{transform:rotate(180deg) scale(.94)}to{transform:rotate(270deg) scale(1)}}@keyframes stamp-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.2)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalStamp, isStandalone: true, selector: "duck-dev-loader-neobrutal-stamp", ngImport: i0, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"stamp-plate\"></span>\n  <span class=\"stamp-center\"></span>\n  <span class=\"stamp-text\">LOAD</span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-neo-ink)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-neo-paper);animation:stamp-pulse 1.05s ease-in-out infinite}.stamp-text{position:absolute;bottom:10px;left:50%;z-index:1;padding:.1rem .45rem;border:3px solid var(--dd-neo-ink);background:var(--dd-neo-paper);color:var(--dd-base-600);font-size:.62rem;font-weight:900;letter-spacing:.18em;transform:translate(-50%) rotate(-4deg)}@keyframes stamp-spin{0%,20%{transform:rotate(0) scale(1)}30%,50%{transform:rotate(90deg) scale(1.08)}60%,80%{transform:rotate(180deg) scale(.94)}to{transform:rotate(270deg) scale(1)}}@keyframes stamp-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.2)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalStamp, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-loader-neobrutal-stamp', standalone: true, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"stamp-plate\"></span>\n  <span class=\"stamp-center\"></span>\n  <span class=\"stamp-text\">LOAD</span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-neo-ink)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-base-0);animation:stamp-pulse 1.05s ease-in-out infinite}.stamp-text{position:absolute;bottom:10px;left:50%;z-index:1;padding:.1rem .45rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-0);color:var(--dd-base-600);font-size:.62rem;font-weight:900;letter-spacing:.18em;transform:translate(-50%) rotate(-4deg)}@keyframes stamp-spin{0%,20%{transform:rotate(0) scale(1)}30%,50%{transform:rotate(90deg) scale(1.08)}60%,80%{transform:rotate(180deg) scale(.94)}to{transform:rotate(270deg) scale(1)}}@keyframes stamp-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.2)}}\n"] }]
+            args: [{ selector: 'duck-dev-loader-neobrutal-stamp', standalone: true, template: "<div class=\"neo-stamp\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"stamp-plate\"></span>\n  <span class=\"stamp-center\"></span>\n  <span class=\"stamp-text\">LOAD</span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-stamp{position:relative;display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border:4px solid var(--dd-neo-ink);border-radius:28px;background:linear-gradient(135deg,var(--dd-base-accent-yellow) 0 46%,var(--dd-base-0) 46% 100%);box-shadow:8px 8px 0 var(--dd-base-accent-blue);overflow:hidden}.neo-stamp:before,.neo-stamp:after{content:\"\";position:absolute;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange)}.neo-stamp:before{width:30px;height:30px;top:10px;left:10px;transform:rotate(8deg)}.neo-stamp:after{width:22px;height:22px;right:12px;bottom:14px;background:var(--dd-base-secondary)}.stamp-plate,.stamp-center{position:absolute;inset:auto;border:4px solid var(--dd-neo-ink)}.stamp-plate{width:48px;height:48px;background:var(--dd-base-accent-pink);transform:rotate(0);animation:stamp-spin 1.05s steps(4) infinite}.stamp-center{width:20px;height:20px;background:var(--dd-neo-paper);animation:stamp-pulse 1.05s ease-in-out infinite}.stamp-text{position:absolute;bottom:10px;left:50%;z-index:1;padding:.1rem .45rem;border:3px solid var(--dd-neo-ink);background:var(--dd-neo-paper);color:var(--dd-base-600);font-size:.62rem;font-weight:900;letter-spacing:.18em;transform:translate(-50%) rotate(-4deg)}@keyframes stamp-spin{0%,20%{transform:rotate(0) scale(1)}30%,50%{transform:rotate(90deg) scale(1.08)}60%,80%{transform:rotate(180deg) scale(.94)}to{transform:rotate(270deg) scale(1)}}@keyframes stamp-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.2)}}\n"] }]
         }] });
 
 class LoaderNeobrutalBars {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalBars, isStandalone: true, selector: "duck-dev-loader-neobrutal-bars", ngImport: i0, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"bars-label\">WAIT</span>\n  <span class=\"bars-track\">\n    <span class=\"bar bar-one\"></span>\n    <span class=\"bar bar-two\"></span>\n    <span class=\"bar bar-three\"></span>\n    <span class=\"bar bar-four\"></span>\n  </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalBars, isStandalone: true, selector: "duck-dev-loader-neobrutal-bars", ngImport: i0, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"bars-label\">WAIT</span>\n  <span class=\"bars-track\">\n    <span class=\"bar bar-one\"></span>\n    <span class=\"bar bar-two\"></span>\n    <span class=\"bar bar-three\"></span>\n    <span class=\"bar bar-four\"></span>\n  </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-neo-paper);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalBars, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-loader-neobrutal-bars', standalone: true, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"bars-label\">WAIT</span>\n  <span class=\"bars-track\">\n    <span class=\"bar bar-one\"></span>\n    <span class=\"bar bar-two\"></span>\n    <span class=\"bar bar-three\"></span>\n    <span class=\"bar bar-four\"></span>\n  </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-base-0);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] }]
+            args: [{ selector: 'duck-dev-loader-neobrutal-bars', standalone: true, template: "<div class=\"neo-bars\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"bars-label\">WAIT</span>\n  <span class=\"bars-track\">\n    <span class=\"bar bar-one\"></span>\n    <span class=\"bar bar-two\"></span>\n    <span class=\"bar bar-three\"></span>\n    <span class=\"bar bar-four\"></span>\n  </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-bars{display:inline-flex;flex-direction:column;gap:.7rem;min-width:150px;padding:.85rem .95rem;border:4px solid var(--dd-neo-ink);border-radius:24px;background:var(--dd-neo-paper);box-shadow:7px 7px 0 var(--dd-base-accent-blue);transform:rotate(-2deg)}.bars-label{align-self:flex-start;padding:.2rem .55rem;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:.68rem;font-weight:900;letter-spacing:.2em}.bars-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:.5rem;height:54px}.bar{display:block;height:100%;border:3px solid var(--dd-neo-ink);border-radius:12px 12px 4px 4px;transform-origin:bottom center;animation:bar-bounce .9s steps(2) infinite}.bar-one{background:var(--dd-base-accent-pink);animation-delay:0s}.bar-two{background:var(--dd-base-accent-blue);animation-delay:.16s}.bar-three{background:var(--dd-base-secondary);animation-delay:.32s}.bar-four{background:var(--dd-base-accent-orange);animation-delay:.48s}@keyframes bar-bounce{0%,to{transform:scaleY(.38) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}\n"] }]
         }] });
 
 class LoaderNeobrutalMarquee {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalMarquee, isStandalone: true, selector: "duck-dev-loader-neobrutal-marquee", ngImport: i0, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"marquee-chip\">SYNC</span>\n  <span class=\"marquee-window\">\n    <span class=\"marquee-ribbon\">\n      <span>LOADING</span>\n      <span>LOADING</span>\n      <span>LOADING</span>\n    </span>\n  </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-base-0) 50% 100%)}.marquee-ribbon{display:inline-flex;align-items:center;gap:1.1rem;padding:.65rem 1rem;min-width:max-content;color:var(--dd-base-600);font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;animation:marquee-slide 1.15s linear infinite}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-33.333%)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoaderNeobrutalMarquee, isStandalone: true, selector: "duck-dev-loader-neobrutal-marquee", ngImport: i0, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"marquee-chip\">SYNC</span>\n  <span class=\"marquee-window\">\n    <span class=\"marquee-ribbon\">\n      <span>LOADING</span>\n      <span>LOADING</span>\n      <span>LOADING</span>\n    </span>\n  </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-neo-paper) 50% 100%)}.marquee-ribbon{display:inline-flex;align-items:center;gap:1.1rem;padding:.65rem 1rem;min-width:max-content;color:var(--dd-base-600);font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;animation:marquee-slide 1.15s linear infinite}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-33.333%)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoaderNeobrutalMarquee, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-loader-neobrutal-marquee', standalone: true, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"marquee-chip\">SYNC</span>\n  <span class=\"marquee-window\">\n    <span class=\"marquee-ribbon\">\n      <span>LOADING</span>\n      <span>LOADING</span>\n      <span>LOADING</span>\n    </span>\n  </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-base-0) 50% 100%)}.marquee-ribbon{display:inline-flex;align-items:center;gap:1.1rem;padding:.65rem 1rem;min-width:max-content;color:var(--dd-base-600);font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;animation:marquee-slide 1.15s linear infinite}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-33.333%)}}\n"] }]
+            args: [{ selector: 'duck-dev-loader-neobrutal-marquee', standalone: true, template: "<div class=\"neo-marquee\" role=\"status\" aria-label=\"Loading\">\n  <span class=\"marquee-chip\">SYNC</span>\n  <span class=\"marquee-window\">\n    <span class=\"marquee-ribbon\">\n      <span>LOADING</span>\n      <span>LOADING</span>\n      <span>LOADING</span>\n    </span>\n  </span>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:inline-flex}.neo-marquee{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem .7rem .6rem .6rem;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-100);box-shadow:8px 8px 0 var(--dd-base-secondary)}.marquee-chip{flex-shrink:0;padding:.7rem .85rem;border:3px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:.72rem;font-weight:900;letter-spacing:.14em}.marquee-window{width:132px;overflow:hidden;border:3px solid var(--dd-neo-ink);border-radius:999px;background:linear-gradient(90deg,var(--dd-base-accent-yellow) 0 50%,var(--dd-neo-paper) 50% 100%)}.marquee-ribbon{display:inline-flex;align-items:center;gap:1.1rem;padding:.65rem 1rem;min-width:max-content;color:var(--dd-base-600);font-size:.8rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;animation:marquee-slide 1.15s linear infinite}@keyframes marquee-slide{0%{transform:translate(0)}to{transform:translate(-33.333%)}}\n"] }]
         }] });
 
 class DuckDevInput {
@@ -3886,11 +3886,11 @@ class DuckDevInputNeobrutalPoster {
     options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
     errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalPoster, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalPoster, isStandalone: true, selector: "duck-dev-input-neobrutal-poster", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n  <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n  <div\n    class=\"neo-poster__field\"\n    [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n    [formGroup]=\"formName\"\n  >\n    @switch (inputType) {\n      @case ('checkbox') {\n        <div class=\"neo-poster-check\">\n          <input\n            class=\"neo-poster-check__input\"\n            [id]=\"control\"\n            type=\"checkbox\"\n            formControlName=\"{{ control }}\"\n          />\n          <label class=\"neo-poster-check__label\" [for]=\"control\">\n            <span class=\"neo-poster-check__box\">\n              <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n                <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n              </svg>\n            </span>\n            <span class=\"neo-poster-check__text\"><ng-content /></span>\n          </label>\n        </div>\n      }\n      @case ('textarea') {\n        <textarea\n          [id]=\"control\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input neo-poster__input_textarea\"\n          [class.neo-poster__input_error]=\"\n            formName.get(control)?.invalid && formName.get(control)?.touched\n          \"\n          [placeholder]=\"inputPlaceholder\"\n        ></textarea>\n      }\n      @case ('select') {\n        <div class=\"neo-poster-select\">\n          <select\n            [id]=\"controlName()\"\n            formControlName=\"{{ controlName() }}\"\n            class=\"neo-poster__input neo-poster__input_select\"\n            [class.neo-poster__input_error]=\"\n              form().get(controlName())?.invalid && form().get(controlName())?.touched\n            \"\n          >\n            @if (placeholder()) {\n              <option value=\"\" disabled>{{ placeholder() }}</option>\n            }\n            @for (option of options(); track option.value) {\n              <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n      }\n      @default {\n        <input\n          [id]=\"control\"\n          [type]=\"type()\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input\"\n          [class.neo-poster__input_error]=\"\n            formName.get(control)?.invalid && formName.get(control)?.touched\n          \"\n          [placeholder]=\"inputPlaceholder\"\n        />\n      }\n    }\n\n    @if (erMessage) {\n      <div class=\"neo-poster__error\">{{ erMessage }}</div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-base-0)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-neo-ink)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalPoster, isStandalone: true, selector: "duck-dev-input-neobrutal-poster", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n  <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n  <div\n    class=\"neo-poster__field\"\n    [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n    [formGroup]=\"formName\"\n  >\n    @switch (inputType) {\n      @case ('checkbox') {\n        <div class=\"neo-poster-check\">\n          <input\n            class=\"neo-poster-check__input\"\n            [id]=\"control\"\n            type=\"checkbox\"\n            formControlName=\"{{ control }}\"\n          />\n          <label class=\"neo-poster-check__label\" [for]=\"control\">\n            <span class=\"neo-poster-check__box\">\n              <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n                <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n              </svg>\n            </span>\n            <span class=\"neo-poster-check__text\"><ng-content /></span>\n          </label>\n        </div>\n      }\n      @case ('textarea') {\n        <textarea\n          [id]=\"control\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input neo-poster__input_textarea\"\n          [class.neo-poster__input_error]=\"\n            formName.get(control)?.invalid && formName.get(control)?.touched\n          \"\n          [placeholder]=\"inputPlaceholder\"\n        ></textarea>\n      }\n      @case ('select') {\n        <div class=\"neo-poster-select\">\n          <select\n            [id]=\"controlName()\"\n            formControlName=\"{{ controlName() }}\"\n            class=\"neo-poster__input neo-poster__input_select\"\n            [class.neo-poster__input_error]=\"\n              form().get(controlName())?.invalid && form().get(controlName())?.touched\n            \"\n          >\n            @if (placeholder()) {\n              <option value=\"\" disabled>{{ placeholder() }}</option>\n            }\n            @for (option of options(); track option.value) {\n              <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n      }\n      @default {\n        <input\n          [id]=\"control\"\n          [type]=\"type()\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input\"\n          [class.neo-poster__input_error]=\"\n            formName.get(control)?.invalid && formName.get(control)?.touched\n          \"\n          [placeholder]=\"inputPlaceholder\"\n        />\n      }\n    }\n\n    @if (erMessage) {\n      <div class=\"neo-poster__error\">{{ erMessage }}</div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-neo-paper)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-neo-ink)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalPoster, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-input-neobrutal-poster', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n  <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n  <div\n    class=\"neo-poster__field\"\n    [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n    [formGroup]=\"formName\"\n  >\n    @switch (inputType) {\n      @case ('checkbox') {\n        <div class=\"neo-poster-check\">\n          <input\n            class=\"neo-poster-check__input\"\n            [id]=\"control\"\n            type=\"checkbox\"\n            formControlName=\"{{ control }}\"\n          />\n          <label class=\"neo-poster-check__label\" [for]=\"control\">\n            <span class=\"neo-poster-check__box\">\n              <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n                <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n              </svg>\n            </span>\n            <span class=\"neo-poster-check__text\"><ng-content /></span>\n          </label>\n        </div>\n      }\n      @case ('textarea') {\n        <textarea\n          [id]=\"control\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input neo-poster__input_textarea\"\n          [class.neo-poster__input_error]=\"\n            formName.get(control)?.invalid && formName.get(control)?.touched\n          \"\n          [placeholder]=\"inputPlaceholder\"\n        ></textarea>\n      }\n      @case ('select') {\n        <div class=\"neo-poster-select\">\n          <select\n            [id]=\"controlName()\"\n            formControlName=\"{{ controlName() }}\"\n            class=\"neo-poster__input neo-poster__input_select\"\n            [class.neo-poster__input_error]=\"\n              form().get(controlName())?.invalid && form().get(controlName())?.touched\n            \"\n          >\n            @if (placeholder()) {\n              <option value=\"\" disabled>{{ placeholder() }}</option>\n            }\n            @for (option of options(); track option.value) {\n              <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n      }\n      @default {\n        <input\n          [id]=\"control\"\n          [type]=\"type()\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input\"\n          [class.neo-poster__input_error]=\"\n            formName.get(control)?.invalid && formName.get(control)?.touched\n          \"\n          [placeholder]=\"inputPlaceholder\"\n        />\n      }\n    }\n\n    @if (erMessage) {\n      <div class=\"neo-poster__error\">{{ erMessage }}</div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-base-0)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-neo-ink)}}\n"] }]
+            args: [{ selector: 'duck-dev-input-neobrutal-poster', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<div class=\"neo-poster\">\n  <label [for]=\"control\" class=\"neo-poster__label\">{{ label() }}</label>\n\n  <div\n    class=\"neo-poster__field\"\n    [class.neo-poster__field_checkbox]=\"inputType === 'checkbox'\"\n    [formGroup]=\"formName\"\n  >\n    @switch (inputType) {\n      @case ('checkbox') {\n        <div class=\"neo-poster-check\">\n          <input\n            class=\"neo-poster-check__input\"\n            [id]=\"control\"\n            type=\"checkbox\"\n            formControlName=\"{{ control }}\"\n          />\n          <label class=\"neo-poster-check__label\" [for]=\"control\">\n            <span class=\"neo-poster-check__box\">\n              <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n                <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n              </svg>\n            </span>\n            <span class=\"neo-poster-check__text\"><ng-content /></span>\n          </label>\n        </div>\n      }\n      @case ('textarea') {\n        <textarea\n          [id]=\"control\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input neo-poster__input_textarea\"\n          [class.neo-poster__input_error]=\"\n            formName.get(control)?.invalid && formName.get(control)?.touched\n          \"\n          [placeholder]=\"inputPlaceholder\"\n        ></textarea>\n      }\n      @case ('select') {\n        <div class=\"neo-poster-select\">\n          <select\n            [id]=\"controlName()\"\n            formControlName=\"{{ controlName() }}\"\n            class=\"neo-poster__input neo-poster__input_select\"\n            [class.neo-poster__input_error]=\"\n              form().get(controlName())?.invalid && form().get(controlName())?.touched\n            \"\n          >\n            @if (placeholder()) {\n              <option value=\"\" disabled>{{ placeholder() }}</option>\n            }\n            @for (option of options(); track option.value) {\n              <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n                {{ option.label }}\n              </option>\n            }\n          </select>\n        </div>\n      }\n      @default {\n        <input\n          [id]=\"control\"\n          [type]=\"type()\"\n          formControlName=\"{{ control }}\"\n          class=\"neo-poster__input\"\n          [class.neo-poster__input_error]=\"\n            formName.get(control)?.invalid && formName.get(control)?.touched\n          \"\n          [placeholder]=\"inputPlaceholder\"\n        />\n      }\n    }\n\n    @if (erMessage) {\n      <div class=\"neo-poster__error\">{{ erMessage }}</div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.neo-poster{display:grid;grid-template-columns:88px 1fr;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.neo-poster__label{display:grid;place-items:center;padding:14px 8px;border-right:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.neo-poster__field{position:relative;padding:12px 12px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-poster__field_checkbox{padding-bottom:32px}.neo-poster__input{width:100%;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700}.neo-poster__input:focus{outline:none;background:var(--dd-neo-paper)}.neo-poster__input::placeholder{color:var(--dd-base-400)}.neo-poster__input_textarea{min-height:136px;resize:vertical}.neo-poster__input_select{appearance:none;padding-right:50px;cursor:pointer}.neo-poster-select{position:relative}.neo-poster-select:after{content:\"GO\";position:absolute;top:50%;right:8px;transform:translateY(-50%);padding:4px 6px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:9px;font-weight:900;letter-spacing:.12em}.neo-poster__input_error{border-color:var(--dd-base-accent-orange)}.neo-poster__error{position:absolute;left:12px;bottom:6px;color:var(--dd-base-accent-orange);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-poster-check__input{display:none}.neo-poster-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-poster-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-100)}.neo-poster-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-poster-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box{background:var(--dd-base-accent-yellow)}.neo-poster-check__input:checked+.neo-poster-check__label .neo-poster-check__box svg{stroke-dashoffset:0}@media(max-width:640px){.neo-poster{grid-template-columns:1fr}.neo-poster__label{writing-mode:horizontal-tb;transform:none;border-right:0;border-bottom:4px solid var(--dd-neo-ink)}}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
 
 class DuckDevInputNeobrutalRadio {
@@ -3901,11 +3901,11 @@ class DuckDevInputNeobrutalRadio {
     options = input.required({ ...(ngDevMode ? { debugName: "options" } : {}) });
     errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n  <div class=\"neo-radio__copy\">\n    <label class=\"neo-radio__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n    }\n  </div>\n\n  <div\n    class=\"neo-radio__group\"\n    [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n    role=\"radiogroup\"\n    [attr.aria-describedby]=\"describedBy\"\n  >\n    @for (option of options(); track option.value; let index = $index) {\n      <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n        <input\n          class=\"neo-radio__input\"\n          type=\"radio\"\n          [id]=\"control + '-' + index\"\n          [value]=\"option.value\"\n          [disabled]=\"option.disabled ?? false\"\n          formControlName=\"{{ control }}\"\n        />\n        <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n        <span class=\"neo-radio__text\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n\n  @if (erMessage) {\n    <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-base-0));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalRadio, isStandalone: true, selector: "duck-dev-input-neobrutal-radio", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n  <div class=\"neo-radio__copy\">\n    <label class=\"neo-radio__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n    }\n  </div>\n\n  <div\n    class=\"neo-radio__group\"\n    [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n    role=\"radiogroup\"\n    [attr.aria-describedby]=\"describedBy\"\n  >\n    @for (option of options(); track option.value; let index = $index) {\n      <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n        <input\n          class=\"neo-radio__input\"\n          type=\"radio\"\n          [id]=\"control + '-' + index\"\n          [value]=\"option.value\"\n          [disabled]=\"option.disabled ?? false\"\n          formControlName=\"{{ control }}\"\n        />\n        <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n        <span class=\"neo-radio__text\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n\n  @if (erMessage) {\n    <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-neo-paper)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-neo-paper));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalRadio, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n  <div class=\"neo-radio__copy\">\n    <label class=\"neo-radio__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n    }\n  </div>\n\n  <div\n    class=\"neo-radio__group\"\n    [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n    role=\"radiogroup\"\n    [attr.aria-describedby]=\"describedBy\"\n  >\n    @for (option of options(); track option.value; let index = $index) {\n      <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n        <input\n          class=\"neo-radio__input\"\n          type=\"radio\"\n          [id]=\"control + '-' + index\"\n          [value]=\"option.value\"\n          [disabled]=\"option.disabled ?? false\"\n          formControlName=\"{{ control }}\"\n        />\n        <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n        <span class=\"neo-radio__text\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n\n  @if (erMessage) {\n    <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-base-0)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-base-0));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"] }]
+            args: [{ selector: 'duck-dev-input-neobrutal-radio', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let radioControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-radio\" [formGroup]=\"formName\">\n  <div class=\"neo-radio__copy\">\n    <label class=\"neo-radio__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-radio__description\" [id]=\"control + '-description'\">{{ description() }}</p>\n    }\n  </div>\n\n  <div\n    class=\"neo-radio__group\"\n    [class.neo-radio__group_error]=\"radioControl?.invalid && radioControl?.touched\"\n    role=\"radiogroup\"\n    [attr.aria-describedby]=\"describedBy\"\n  >\n    @for (option of options(); track option.value; let index = $index) {\n      <label class=\"neo-radio__option\" [class.neo-radio__option_disabled]=\"option.disabled\">\n        <input\n          class=\"neo-radio__input\"\n          type=\"radio\"\n          [id]=\"control + '-' + index\"\n          [value]=\"option.value\"\n          [disabled]=\"option.disabled ?? false\"\n          formControlName=\"{{ control }}\"\n        />\n        <span class=\"neo-radio__dot\" aria-hidden=\"true\"></span>\n        <span class=\"neo-radio__text\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n\n  @if (erMessage) {\n    <div class=\"neo-radio__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-radio{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-radio__copy{display:grid;gap:6px}.neo-radio__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-radio__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-radio__group{display:grid;gap:10px}.neo-radio__option{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-accent-blue);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-radio__input{position:absolute;opacity:0;pointer-events:none}.neo-radio__dot{position:relative;width:24px;height:24px;border:4px solid var(--dd-neo-ink);border-radius:999px;background:var(--dd-neo-paper)}.neo-radio__dot:after{content:\"\";position:absolute;inset:4px;border-radius:999px;background:var(--dd-base-accent-orange);transform:scale(0);transition:transform .18s ease}.neo-radio__text{color:var(--dd-base-600);font-size:15px;line-height:1.35;font-weight:800}.neo-radio__input:checked+.neo-radio__dot:after{transform:scale(1)}.neo-radio__input:checked~.neo-radio__text{font-weight:1000}.neo-radio__option:has(.neo-radio__input:checked){background:color-mix(in srgb,var(--dd-base-accent-yellow) 58%,var(--dd-neo-paper));box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-radio__option:hover,.neo-radio__option:has(.neo-radio__input:focus-visible){transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-radio__group_error .neo-radio__option{border-color:var(--dd-base-accent-orange)}.neo-radio__option_disabled{opacity:.55;cursor:not-allowed}.neo-radio__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
 
 class DuckDevInputNeobrutalSlab {
@@ -3918,11 +3918,11 @@ class DuckDevInputNeobrutalSlab {
     options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
     errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n  <span>{{ label() }}</span>\n</label>\n\n<div\n  class=\"neo-field neo-field_slab\"\n  [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-check\">\n        <input\n          class=\"neo-check__input\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"neo-check__label\" [for]=\"control\">\n          <span class=\"neo-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input neo-input_textarea\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-input neo-input_select\"\n          [class.neo-input_error]=\"\n            form().get(controlName())?.invalid && form().get(controlName())?.touched\n          \"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n              {{ option.label }}\n            </option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-neo-shadow);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-neo-shadow))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalSlab, isStandalone: true, selector: "duck-dev-input-neobrutal-slab", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n  <span>{{ label() }}</span>\n</label>\n\n<div\n  class=\"neo-field neo-field_slab\"\n  [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-check\">\n        <input\n          class=\"neo-check__input\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"neo-check__label\" [for]=\"control\">\n          <span class=\"neo-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input neo-input_textarea\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-input neo-input_select\"\n          [class.neo-input_error]=\"\n            form().get(controlName())?.invalid && form().get(controlName())?.touched\n          \"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n              {{ option.label }}\n            </option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-accent-orange);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalSlab, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n  <span>{{ label() }}</span>\n</label>\n\n<div\n  class=\"neo-field neo-field_slab\"\n  [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-check\">\n        <input\n          class=\"neo-check__input\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"neo-check__label\" [for]=\"control\">\n          <span class=\"neo-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input neo-input_textarea\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-input neo-input_select\"\n          [class.neo-input_error]=\"\n            form().get(controlName())?.invalid && form().get(controlName())?.touched\n          \"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n              {{ option.label }}\n            </option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-neo-shadow);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-base-0);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px color-mix(in srgb,var(--dd-base-accent-orange) 70%,var(--dd-neo-shadow))}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"] }]
+            args: [{ selector: 'duck-dev-input-neobrutal-slab', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-label neo-label_slab\">\n  <span>{{ label() }}</span>\n</label>\n\n<div\n  class=\"neo-field neo-field_slab\"\n  [class.neo-field_checkbox]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-check\">\n        <input\n          class=\"neo-check__input\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"neo-check__label\" [for]=\"control\">\n          <span class=\"neo-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input neo-input_textarea\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-input neo-input_select\"\n          [class.neo-input_error]=\"\n            form().get(controlName())?.invalid && form().get(controlName())?.touched\n          \"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">\n              {{ option.label }}\n            </option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-input\"\n        [class.neo-input_error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-label{display:grid;gap:8px;margin-bottom:8px;color:var(--dd-base-600);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-label__tag{display:inline-flex;width:fit-content;padding:5px 9px;border:3px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:3px 3px 0 var(--dd-base-accent-orange);font-size:10px;line-height:1}.neo-field{position:relative;padding-bottom:24px}.neo-field_checkbox{padding-bottom:28px}.neo-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);border-radius:0;background:var(--dd-neo-paper);box-shadow:6px 6px 0 var(--dd-base-accent-blue);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-input:focus{outline:none;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-input::placeholder{color:var(--dd-base-400);font-weight:600}.neo-input_textarea{min-height:136px;resize:vertical}.neo-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-select{position:relative}.neo-select:after{content:\"\";position:absolute;top:50%;right:20px;width:12px;height:12px;border-right:4px solid var(--dd-neo-ink);border-bottom:4px solid var(--dd-neo-ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}.neo-input_error{border-color:var(--dd-base-accent-orange);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.neo-check__input{display:none}.neo-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-check__box{position:relative;flex:0 0 22px;width:22px;height:22px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-check__text{color:var(--dd-base-500);font-size:15px;line-height:1.45;font-weight:700}.neo-check__input:checked+.neo-check__label .neo-check__box{background:var(--dd-base-accent-yellow);box-shadow:4px 4px 0 var(--dd-base-accent-orange)}.neo-check__input:checked+.neo-check__label .neo-check__box svg{stroke-dashoffset:0}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
 
 class DuckDevInputNeobrutalStrip {
@@ -3935,11 +3935,11 @@ class DuckDevInputNeobrutalStrip {
     options = input([], { ...(ngDevMode ? { debugName: "options" } : {}) });
     errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n  <span>{{ label() }}</span>\n  <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n  class=\"neo-strip-field\"\n  [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-strip-check\">\n        <input\n          class=\"neo-strip-check__input\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"neo-strip-check__label\" [for]=\"control\">\n          <span class=\"neo-strip-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-strip-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input neo-strip-input_textarea\"\n        [class.neo-strip-input_error]=\"\n          formName.get(control)?.invalid && formName.get(control)?.touched\n        \"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-strip-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-strip-input neo-strip-input_select\"\n          [class.neo-strip-input_error]=\"\n            form().get(controlName())?.invalid && form().get(controlName())?.touched\n          \"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input\"\n        [class.neo-strip-input_error]=\"\n          formName.get(control)?.invalid && formName.get(control)?.touched\n        \"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-strip-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalStrip, isStandalone: true, selector: "duck-dev-input-neobrutal-strip", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n  <span>{{ label() }}</span>\n  <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n  class=\"neo-strip-field\"\n  [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-strip-check\">\n        <input\n          class=\"neo-strip-check__input\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"neo-strip-check__label\" [for]=\"control\">\n          <span class=\"neo-strip-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-strip-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input neo-strip-input_textarea\"\n        [class.neo-strip-input_error]=\"\n          formName.get(control)?.invalid && formName.get(control)?.touched\n        \"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-strip-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-strip-input neo-strip-input_select\"\n          [class.neo-strip-input_error]=\"\n            form().get(controlName())?.invalid && form().get(controlName())?.touched\n          \"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input\"\n        [class.neo-strip-input_error]=\"\n          formName.get(control)?.invalid && formName.get(control)?.touched\n        \"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-strip-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalStrip, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n  <span>{{ label() }}</span>\n  <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n  class=\"neo-strip-field\"\n  [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-strip-check\">\n        <input\n          class=\"neo-strip-check__input\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"neo-strip-check__label\" [for]=\"control\">\n          <span class=\"neo-strip-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-strip-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input neo-strip-input_textarea\"\n        [class.neo-strip-input_error]=\"\n          formName.get(control)?.invalid && formName.get(control)?.touched\n        \"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-strip-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-strip-input neo-strip-input_select\"\n          [class.neo-strip-input_error]=\"\n            form().get(controlName())?.invalid && form().get(controlName())?.touched\n          \"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input\"\n        [class.neo-strip-input_error]=\"\n          formName.get(control)?.invalid && formName.get(control)?.touched\n        \"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-strip-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"] }]
+            args: [{ selector: 'duck-dev-input-neobrutal-strip', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"neo-strip-label\">\n  <span>{{ label() }}</span>\n  <span class=\"neo-strip-label__rule\" aria-hidden=\"true\"></span>\n</label>\n\n<div\n  class=\"neo-strip-field\"\n  [class.neo-strip-field_checkbox]=\"inputType === 'checkbox'\"\n  [formGroup]=\"formName\"\n>\n  @switch (inputType) {\n    @case ('checkbox') {\n      <div class=\"neo-strip-check\">\n        <input\n          class=\"neo-strip-check__input\"\n          [id]=\"control\"\n          type=\"checkbox\"\n          formControlName=\"{{ control }}\"\n        />\n        <label class=\"neo-strip-check__label\" [for]=\"control\">\n          <span class=\"neo-strip-check__box\">\n            <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n            </svg>\n          </span>\n          <span class=\"neo-strip-check__text\"><ng-content /></span>\n        </label>\n      </div>\n    }\n    @case ('textarea') {\n      <textarea\n        [id]=\"control\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input neo-strip-input_textarea\"\n        [class.neo-strip-input_error]=\"\n          formName.get(control)?.invalid && formName.get(control)?.touched\n        \"\n        [placeholder]=\"inputPlaceholder\"\n      ></textarea>\n    }\n    @case ('select') {\n      <div class=\"neo-strip-select\">\n        <select\n          [id]=\"controlName()\"\n          formControlName=\"{{ controlName() }}\"\n          class=\"neo-strip-input neo-strip-input_select\"\n          [class.neo-strip-input_error]=\"\n            form().get(controlName())?.invalid && form().get(controlName())?.touched\n          \"\n        >\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n          }\n        </select>\n      </div>\n    }\n    @default {\n      <input\n        [id]=\"control\"\n        [type]=\"type()\"\n        formControlName=\"{{ control }}\"\n        class=\"neo-strip-input\"\n        [class.neo-strip-input_error]=\"\n          formName.get(control)?.invalid && formName.get(control)?.touched\n        \"\n        [placeholder]=\"inputPlaceholder\"\n      />\n    }\n  }\n\n  @if (erMessage) {\n    <div class=\"neo-strip-error\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-strip-label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px;color:var(--dd-base-600);font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.neo-strip-label__rule{height:4px;background:var(--dd-base-600);box-shadow:6px 0 0 var(--dd-base-accent-yellow)}.neo-strip-field{position:relative;padding-bottom:24px}.neo-strip-field_checkbox{padding-bottom:28px}.neo-strip-input{width:100%;padding:14px 16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 24%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);color:var(--dd-base-600);box-sizing:border-box;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 4px var(--dd-base-0),6px 6px 0 var(--dd-neo-shadow)}.neo-strip-input:focus{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-orange) 28%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0)}.neo-strip-input::placeholder{color:var(--dd-base-400)}.neo-strip-input_textarea{min-height:140px;resize:vertical}.neo-strip-input_select{appearance:none;padding-right:52px;cursor:pointer}.neo-strip-select{position:relative}.neo-strip-select:after{content:\"\";position:absolute;top:50%;right:18px;width:14px;height:14px;background:var(--dd-base-accent-yellow);border:4px solid var(--dd-neo-ink);transform:translateY(-50%) rotate(45deg);pointer-events:none}.neo-strip-input_error{border-color:var(--dd-base-accent-orange)}.neo-strip-error{position:absolute;left:0;bottom:0;color:var(--dd-base-accent-orange);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.neo-strip-check__input{display:none}.neo-strip-check__label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.neo-strip-check__box{position:relative;width:24px;height:24px;flex:0 0 24px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-base-accent-blue)}.neo-strip-check__box svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:stroke-dashoffset .2s ease}.neo-strip-check__text{font-size:15px;line-height:1.45;font-weight:700;color:var(--dd-base-500)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box{background:var(--dd-base-accent-orange)}.neo-strip-check__input:checked+.neo-strip-check__label .neo-strip-check__box svg{stroke-dashoffset:0}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
 
 class DuckDevInputNeobrutalToggle {
@@ -3951,11 +3951,11 @@ class DuckDevInputNeobrutalToggle {
     onLabel = input.required({ ...(ngDevMode ? { debugName: "onLabel" } : {}) });
     errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalToggle, isStandalone: true, selector: "duck-dev-input-neobrutal-toggle", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: true, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n  <div class=\"neo-toggle__copy\">\n    <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n        {{ description() }}\n      </p>\n    }\n  </div>\n\n  <label\n    class=\"neo-toggle__switch\"\n    [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n    [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n    [for]=\"control\"\n  >\n    <input\n      class=\"neo-toggle__input\"\n      [id]=\"control\"\n      type=\"checkbox\"\n      formControlName=\"{{ control }}\"\n      [attr.aria-describedby]=\"describedBy\"\n    />\n\n    <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n      <span class=\"neo-toggle__thumb\"></span>\n    </span>\n\n    <span class=\"neo-toggle__state\">\n      <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n      <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n    </span>\n  </label>\n\n  @if (erMessage) {\n    <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-neo-ink);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-base-0)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInputNeobrutalToggle, isStandalone: true, selector: "duck-dev-input-neobrutal-toggle", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: true, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: true, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n  <div class=\"neo-toggle__copy\">\n    <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n        {{ description() }}\n      </p>\n    }\n  </div>\n\n  <label\n    class=\"neo-toggle__switch\"\n    [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n    [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n    [for]=\"control\"\n  >\n    <input\n      class=\"neo-toggle__input\"\n      [id]=\"control\"\n      type=\"checkbox\"\n      formControlName=\"{{ control }}\"\n      [attr.aria-describedby]=\"describedBy\"\n    />\n\n    <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n      <span class=\"neo-toggle__thumb\"></span>\n    </span>\n\n    <span class=\"neo-toggle__state\">\n      <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n      <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n    </span>\n  </label>\n\n  @if (erMessage) {\n    <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-neo-ink);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-neo-paper)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInputNeobrutalToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-input-neobrutal-toggle', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n  <div class=\"neo-toggle__copy\">\n    <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n        {{ description() }}\n      </p>\n    }\n  </div>\n\n  <label\n    class=\"neo-toggle__switch\"\n    [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n    [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n    [for]=\"control\"\n  >\n    <input\n      class=\"neo-toggle__input\"\n      [id]=\"control\"\n      type=\"checkbox\"\n      formControlName=\"{{ control }}\"\n      [attr.aria-describedby]=\"describedBy\"\n    />\n\n    <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n      <span class=\"neo-toggle__thumb\"></span>\n    </span>\n\n    <span class=\"neo-toggle__state\">\n      <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n      <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n    </span>\n  </label>\n\n  @if (erMessage) {\n    <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-neo-ink);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-base-0)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"] }]
+            args: [{ selector: 'duck-dev-input-neobrutal-toggle', imports: [ReactiveFormsModule], template: "@let control = controlName();\n@let formName = form();\n@let erMessage = errorMessage();\n@let toggleControl = formName.get(control);\n@let describedBy = erMessage ? control + '-error' : description() ? control + '-description' : null;\n\n<div class=\"neo-toggle\" [formGroup]=\"formName\">\n  <div class=\"neo-toggle__copy\">\n    <label [for]=\"control\" class=\"neo-toggle__label\">{{ label() }}</label>\n    @if (description()) {\n      <p class=\"neo-toggle__description\" [id]=\"control + '-description'\">\n        {{ description() }}\n      </p>\n    }\n  </div>\n\n  <label\n    class=\"neo-toggle__switch\"\n    [class.neo-toggle__switch_checked]=\"toggleControl?.value\"\n    [class.neo-toggle__switch_error]=\"toggleControl?.invalid && toggleControl?.touched\"\n    [for]=\"control\"\n  >\n    <input\n      class=\"neo-toggle__input\"\n      [id]=\"control\"\n      type=\"checkbox\"\n      formControlName=\"{{ control }}\"\n      [attr.aria-describedby]=\"describedBy\"\n    />\n\n    <span class=\"neo-toggle__rail\" aria-hidden=\"true\">\n      <span class=\"neo-toggle__thumb\"></span>\n    </span>\n\n    <span class=\"neo-toggle__state\">\n      <span class=\"neo-toggle__chip neo-toggle__chip_off\">{{ offLabel() }}</span>\n      <span class=\"neo-toggle__chip neo-toggle__chip_on\">{{ onLabel() }}</span>\n    </span>\n  </label>\n\n  @if (erMessage) {\n    <div class=\"neo-toggle__error\" [id]=\"control + '-error'\">{{ erMessage }}</div>\n  }\n</div>\n", styles: [":host{display:block}.neo-toggle{position:relative;display:grid;gap:12px;padding-bottom:28px}.neo-toggle__copy{display:grid;gap:6px}.neo-toggle__label{color:var(--dd-base-600);font-size:15px;font-weight:1000;letter-spacing:.08em;line-height:1;text-transform:uppercase}.neo-toggle__description{margin:0;color:var(--dd-base-500);font-size:14px;line-height:1.45;font-weight:700}.neo-toggle__switch{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;cursor:pointer}.neo-toggle__input{position:absolute;opacity:0;pointer-events:none}.neo-toggle__rail{position:relative;display:block;width:92px;height:48px;box-sizing:border-box;border:4px solid var(--dd-neo-ink);background:var(--dd-base-accent-yellow);box-shadow:6px 6px 0 var(--dd-base-accent-blue);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.neo-toggle__thumb{position:absolute;top:6px;left:6px;width:28px;height:28px;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);transition:transform .18s ease}.neo-toggle__state{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.neo-toggle__chip{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px 4px;border:3px solid var(--dd-neo-ink);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.12em;line-height:1;text-transform:uppercase}.neo-toggle__chip_off{background:var(--dd-neo-paper)}.neo-toggle__chip_on{background:var(--dd-base-accent-green)}.neo-toggle__switch_checked .neo-toggle__rail{background:var(--dd-base-accent-green);box-shadow:6px 6px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_checked .neo-toggle__thumb{transform:translate(36px)}.neo-toggle__switch:hover .neo-toggle__rail,.neo-toggle__input:focus-visible+.neo-toggle__rail{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dd-base-accent-orange)}.neo-toggle__switch_error .neo-toggle__rail{border-color:var(--dd-base-accent-orange)}.neo-toggle__error{position:absolute;left:0;bottom:0;padding:2px 8px;background:var(--dd-base-accent-orange);color:var(--dd-base-600);font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase}@media(max-width:640px){.neo-toggle__switch{grid-template-columns:1fr}}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: true }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: true }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
 
 class DuckDevNotification {
@@ -4147,11 +4147,11 @@ class DuckDevAccordionNeobrutalComponent {
         this.isOpen.update((prev) => !prev);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, stampLabel: { classPropertyName: "stampLabel", publicName: "stampLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-brutal__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"toggle()\"\n  >\n    @if (titleTemplate(); as headerTemplate) {\n      <span class=\"dd-accordion-brutal__custom-header\">\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n      </span>\n    } @else {\n      <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n      <span class=\"dd-accordion-brutal__headline\">\n        <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n        <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n      </span>\n    }\n\n    <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n      <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n    </span>\n  </button>\n\n  <div\n    class=\"dd-accordion-brutal__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-brutal__body-frame\">\n      <div class=\"dd-accordion-brutal__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-pink);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-0);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-secondary)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__stamp{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-accordion-brutal-bg));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-base-0));box-shadow:2px 2px 0 var(--dd-neo-shadow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__action{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:var(--dd-accordion-brutal-shadow)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, stampLabel: { classPropertyName: "stampLabel", publicName: "stampLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-brutal__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"toggle()\"\n  >\n    @if (titleTemplate(); as headerTemplate) {\n      <span class=\"dd-accordion-brutal__custom-header\">\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n      </span>\n    } @else {\n      <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n      <span class=\"dd-accordion-brutal__headline\">\n        <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n        <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n      </span>\n    }\n\n    <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n      <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n    </span>\n  </button>\n\n  <div\n    class=\"dd-accordion-brutal__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-brutal__body-frame\">\n      <div class=\"dd-accordion-brutal__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-pink);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-0);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-secondary)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-accordion-brutal-accent);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__stamp{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-accordion-brutal-bg));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-accordion-brutal-accent);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-neo-paper));box-shadow:2px 2px 0 var(--dd-accordion-brutal-accent)}:host-context([ddTheme=dark]) .dd-accordion-brutal__action{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:var(--dd-accordion-brutal-shadow)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-brutal__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"toggle()\"\n  >\n    @if (titleTemplate(); as headerTemplate) {\n      <span class=\"dd-accordion-brutal__custom-header\">\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n      </span>\n    } @else {\n      <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n      <span class=\"dd-accordion-brutal__headline\">\n        <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n        <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n      </span>\n    }\n\n    <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n      <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n    </span>\n  </button>\n\n  <div\n    class=\"dd-accordion-brutal__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-brutal__body-frame\">\n      <div class=\"dd-accordion-brutal__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-pink);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-0);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-secondary)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__stamp{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-accordion-brutal-bg));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-base-0);box-shadow:4px 4px 0 var(--dd-neo-shadow);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-base-0));box-shadow:2px 2px 0 var(--dd-neo-shadow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__action{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:var(--dd-accordion-brutal-shadow)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"] }]
+            args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-brutal__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    (click)=\"toggle()\"\n  >\n    @if (titleTemplate(); as headerTemplate) {\n      <span class=\"dd-accordion-brutal__custom-header\">\n        <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n      </span>\n    } @else {\n      <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n      <span class=\"dd-accordion-brutal__headline\">\n        <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n        <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n      </span>\n    }\n\n    <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n      <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n    </span>\n  </button>\n\n  <div\n    class=\"dd-accordion-brutal__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-brutal__body-frame\">\n      <div class=\"dd-accordion-brutal__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-brutal{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-600);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange);display:block;background:var(--dd-accordion-brutal-bg);border:4px solid var(--dd-accordion-brutal-border);box-shadow:var(--dd-accordion-brutal-shadow);overflow:clip;color:var(--dd-accordion-brutal-text)}.dd-accordion-brutal[data-color=violet]{--dd-accordion-brutal-bg: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-secondary) 7%, var(--dd-base-0));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=orange]{--dd-accordion-brutal-bg: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-accordion-brutal-panel: color-mix( in srgb, var(--dd-base-accent-orange) 8%, var(--dd-base-0) );--dd-accordion-brutal-accent: var(--dd-base-accent-pink);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=gray]{--dd-accordion-brutal-bg: var(--dd-base-100);--dd-accordion-brutal-panel: var(--dd-base-0);--dd-accordion-brutal-accent: var(--dd-base-accent-orange);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-blue)}.dd-accordion-brutal[data-color=dark]{--dd-accordion-brutal-bg: var(--dd-base-600);--dd-accordion-brutal-panel: color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500));--dd-accordion-brutal-accent: var(--dd-base-accent-yellow);--dd-accordion-brutal-border: var(--dd-neo-ink);--dd-accordion-brutal-text: var(--dd-base-0);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-secondary)}.dd-accordion-brutal[data-color=white]{--dd-accordion-brutal-bg: var(--dd-base-0);--dd-accordion-brutal-panel: var(--dd-base-100);--dd-accordion-brutal-accent: var(--dd-base-accent-blue);--dd-accordion-brutal-shadow: 10px 10px 0 var(--dd-base-accent-orange)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-accordion-brutal-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-accordion-brutal-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-accordion-brutal-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-accordion-brutal-accent);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-accordion-brutal-border);transform:rotate(-4deg)}.dd-accordion-brutal[data-color=dark] .dd-accordion-brutal__stamp{background:var(--dd-base-accent-yellow)}:host-context([ddTheme=dark]) .dd-accordion-brutal__stamp{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-accordion-brutal-border);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 14%,var(--dd-accordion-brutal-bg));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-accordion-brutal-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-accordion-brutal-accent);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-accordion-brutal-accent) 20%,var(--dd-neo-paper));box-shadow:2px 2px 0 var(--dd-accordion-brutal-accent)}:host-context([ddTheme=dark]) .dd-accordion-brutal__action{background:var(--dd-accordion-brutal-accent);color:var(--dd-base-600)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-accordion-brutal-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-accordion-brutal-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-accordion-brutal-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:var(--dd-accordion-brutal-shadow)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"] }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], stampLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stampLabel", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class DuckDevAccordionNeobrutalTapeComponent {
@@ -4164,11 +4164,11 @@ class DuckDevAccordionNeobrutalTapeComponent {
         this.isOpen.update((prev) => !prev);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-tape__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n    <span class=\"dd-accordion-tape__title-area\">\n      <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n      </span>\n    </span>\n\n    <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n  </button>\n\n  <div\n    class=\"dd-accordion-tape__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-tape__body-frame\">\n      <div class=\"dd-accordion-tape__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-neo-shadow);--dd-tape-body-shadow: 4px 4px 0 var(--dd-neo-shadow);display:block;position:relative}.dd-accordion-tape[data-color=violet]{--dd-tape-accent: var(--dd-base-secondary);--dd-tape-bg: color-mix(in srgb, var(--dd-base-secondary) 20%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-secondary)}.dd-accordion-tape[data-color=orange]{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange)}.dd-accordion-tape[data-color=gray]{--dd-tape-accent: var(--dd-base-500);--dd-tape-bg: var(--dd-base-200);--dd-tape-stripe: var(--dd-base-400)}.dd-accordion-tape[data-color=dark]{--dd-tape-accent: var(--dd-base-accent-yellow);--dd-tape-bg: var(--dd-base-600);--dd-tape-stripe: var(--dd-base-500);--dd-tape-text: var(--dd-base-0);--dd-tape-border: var(--dd-neo-ink)}.dd-accordion-tape[data-color=white]{--dd-tape-accent: var(--dd-base-accent-blue);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-blue) 12%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-blue)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-tape-bg);border:3px solid var(--dd-tape-border);cursor:pointer;color:var(--dd-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:var(--dd-tape-shadow);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-shadow)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-tape-border);border-top:none;background:var(--dd-base-0);padding:0 20px;margin-top:-2px;position:relative;box-shadow:var(--dd-tape-body-shadow);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}:host-context([ddTheme=dark]) .dd-accordion-tape__body-content{background:var(--dd-base-100)}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-tape__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n    <span class=\"dd-accordion-tape__title-area\">\n      <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n      </span>\n    </span>\n\n    <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n  </button>\n\n  <div\n    class=\"dd-accordion-tape__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-tape__body-frame\">\n      <div class=\"dd-accordion-tape__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-tape-accent);--dd-tape-body-shadow: 4px 4px 0 var(--dd-tape-accent);display:block;position:relative}.dd-accordion-tape[data-color=violet]{--dd-tape-accent: var(--dd-base-secondary);--dd-tape-bg: color-mix(in srgb, var(--dd-base-secondary) 20%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-secondary)}.dd-accordion-tape[data-color=orange]{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange)}.dd-accordion-tape[data-color=gray]{--dd-tape-accent: var(--dd-base-500);--dd-tape-bg: var(--dd-base-200);--dd-tape-stripe: var(--dd-base-400)}.dd-accordion-tape[data-color=dark]{--dd-tape-accent: var(--dd-base-accent-yellow);--dd-tape-bg: var(--dd-base-600);--dd-tape-stripe: var(--dd-base-500);--dd-tape-text: var(--dd-base-0);--dd-tape-border: var(--dd-neo-ink)}.dd-accordion-tape[data-color=white]{--dd-tape-accent: var(--dd-base-accent-blue);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-blue) 12%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-blue)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-tape-bg);border:3px solid var(--dd-tape-border);cursor:pointer;color:var(--dd-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:var(--dd-tape-shadow);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:var(--dd-tape-body-shadow);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}:host-context([ddTheme=dark]) .dd-accordion-tape__body-content{background:var(--dd-base-100)}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-tape__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n    <span class=\"dd-accordion-tape__title-area\">\n      <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n      </span>\n    </span>\n\n    <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n  </button>\n\n  <div\n    class=\"dd-accordion-tape__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-tape__body-frame\">\n      <div class=\"dd-accordion-tape__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-neo-shadow);--dd-tape-body-shadow: 4px 4px 0 var(--dd-neo-shadow);display:block;position:relative}.dd-accordion-tape[data-color=violet]{--dd-tape-accent: var(--dd-base-secondary);--dd-tape-bg: color-mix(in srgb, var(--dd-base-secondary) 20%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-secondary)}.dd-accordion-tape[data-color=orange]{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange)}.dd-accordion-tape[data-color=gray]{--dd-tape-accent: var(--dd-base-500);--dd-tape-bg: var(--dd-base-200);--dd-tape-stripe: var(--dd-base-400)}.dd-accordion-tape[data-color=dark]{--dd-tape-accent: var(--dd-base-accent-yellow);--dd-tape-bg: var(--dd-base-600);--dd-tape-stripe: var(--dd-base-500);--dd-tape-text: var(--dd-base-0);--dd-tape-border: var(--dd-neo-ink)}.dd-accordion-tape[data-color=white]{--dd-tape-accent: var(--dd-base-accent-blue);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-blue) 12%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-blue)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-tape-bg);border:3px solid var(--dd-tape-border);cursor:pointer;color:var(--dd-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:var(--dd-tape-shadow);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-shadow)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-tape-border);border-top:none;background:var(--dd-base-0);padding:0 20px;margin-top:-2px;position:relative;box-shadow:var(--dd-tape-body-shadow);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}:host-context([ddTheme=dark]) .dd-accordion-tape__body-content{background:var(--dd-base-100)}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"] }]
+            args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [attr.data-color]=\"color()\">\n  <button\n    type=\"button\"\n    class=\"dd-accordion-tape__header\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"title()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n    <span class=\"dd-accordion-tape__title-area\">\n      <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n      <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n        <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n      </span>\n    </span>\n\n    <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n  </button>\n\n  <div\n    class=\"dd-accordion-tape__body-shell\"\n    [class.is-open]=\"isOpen()\"\n    [attr.aria-hidden]=\"!isOpen()\"\n  >\n    <div class=\"dd-accordion-tape__body-frame\">\n      <div class=\"dd-accordion-tape__body-content\">\n        <ng-container [ngTemplateOutlet]=\"content()\" />\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".dd-accordion-tape{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange);--dd-tape-border: var(--dd-neo-ink);--dd-tape-text: var(--dd-base-600);--dd-tape-shadow: 4px 4px 0 var(--dd-tape-accent);--dd-tape-body-shadow: 4px 4px 0 var(--dd-tape-accent);display:block;position:relative}.dd-accordion-tape[data-color=violet]{--dd-tape-accent: var(--dd-base-secondary);--dd-tape-bg: color-mix(in srgb, var(--dd-base-secondary) 20%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-secondary)}.dd-accordion-tape[data-color=orange]{--dd-tape-accent: var(--dd-base-accent-orange);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-yellow) 60%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-orange)}.dd-accordion-tape[data-color=gray]{--dd-tape-accent: var(--dd-base-500);--dd-tape-bg: var(--dd-base-200);--dd-tape-stripe: var(--dd-base-400)}.dd-accordion-tape[data-color=dark]{--dd-tape-accent: var(--dd-base-accent-yellow);--dd-tape-bg: var(--dd-base-600);--dd-tape-stripe: var(--dd-base-500);--dd-tape-text: var(--dd-base-0);--dd-tape-border: var(--dd-neo-ink)}.dd-accordion-tape[data-color=white]{--dd-tape-accent: var(--dd-base-accent-blue);--dd-tape-bg: color-mix(in srgb, var(--dd-base-accent-blue) 12%, var(--dd-base-0));--dd-tape-stripe: var(--dd-base-accent-blue)}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-tape-bg);border:3px solid var(--dd-tape-border);cursor:pointer;color:var(--dd-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:var(--dd-tape-shadow);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:var(--dd-tape-body-shadow);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}:host-context([ddTheme=dark]) .dd-accordion-tape__body-content{background:var(--dd-base-100)}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"] }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class SliderClassic {
@@ -4644,11 +4644,11 @@ class DuckDevCardNeobrutalSlab {
         return Math.min(Math.max(value, min), max);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null }, swipeable: { classPropertyName: "swipeable", publicName: "swipeable", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, ngImport: i0, template: "<article\n  class=\"dd-card-neo-slab\"\n  [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n  [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n  [ngStyle]=\"cardStyle()\"\n  [style.cursor]=\"cursorStyle()\"\n  [style.touch-action]=\"touchActionStyle()\"\n  [style.transform]=\"transformStyle()\"\n  [style.transition]=\"dragTransition()\"\n  (pointercancel)=\"onPointerCancel($event)\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n>\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalSlab, isStandalone: true, selector: "dd-card-neobrutal-slab", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strapLabel: { classPropertyName: "strapLabel", publicName: "strapLabel", isSignal: true, isRequired: true, transformFunction: null }, swipeable: { classPropertyName: "swipeable", publicName: "swipeable", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { swipedLeft: "swipedLeft", swipedRight: "swipedRight" }, ngImport: i0, template: "<article\n  class=\"dd-card-neo-slab\"\n  [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n  [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n  [ngStyle]=\"cardStyle()\"\n  [style.cursor]=\"cursorStyle()\"\n  [style.touch-action]=\"touchActionStyle()\"\n  [style.transform]=\"transformStyle()\"\n  [style.transition]=\"dragTransition()\"\n  (pointercancel)=\"onPointerCancel($event)\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n>\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalSlab, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article\n  class=\"dd-card-neo-slab\"\n  [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n  [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n  [ngStyle]=\"cardStyle()\"\n  [style.cursor]=\"cursorStyle()\"\n  [style.touch-action]=\"touchActionStyle()\"\n  [style.transform]=\"transformStyle()\"\n  [style.transition]=\"dragTransition()\"\n  (pointercancel)=\"onPointerCancel($event)\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n>\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
+            args: [{ selector: 'dd-card-neobrutal-slab', standalone: true, imports: [NgStyle], template: "<article\n  class=\"dd-card-neo-slab\"\n  [class.dd-card-neo-slab--dragging]=\"isDragging()\"\n  [class.dd-card-neo-slab--swipeable]=\"swipeable()\"\n  [ngStyle]=\"cardStyle()\"\n  [style.cursor]=\"cursorStyle()\"\n  [style.touch-action]=\"touchActionStyle()\"\n  [style.transform]=\"transformStyle()\"\n  [style.transition]=\"dragTransition()\"\n  (pointercancel)=\"onPointerCancel($event)\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n>\n  <div class=\"dd-card-neo-slab__strap\" aria-hidden=\"true\">{{ strapLabel() }}</div>\n  <div class=\"dd-card-neo-slab__panel\">\n    <div class=\"dd-card-neo-slab__marker\" aria-hidden=\"true\"></div>\n    <div class=\"dd-card-neo-slab__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-slab{position:relative;display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:10px 10px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);transform-origin:center bottom;will-change:transform}.dd-card-neo-slab.dd-card-neo-slab--swipeable{-webkit-user-select:none;user-select:none}.dd-card-neo-slab.dd-card-neo-slab--dragging{z-index:1}.dd-card-neo-slab__strap{position:absolute;top:-22px;left:18px;display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:3px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:11px;font-weight:900;letter-spacing:.16em;line-height:1;text-transform:uppercase;transform:rotate(-3deg)}.dd-card-neo-slab__panel{position:relative;padding:28px 22px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-card-accent) 28%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-card-panel)}.dd-card-neo-slab__marker{position:absolute;top:0;right:0;width:26px;height:26px;border-left:4px solid var(--dd-neo-card-border);border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent)}.dd-card-neo-slab__content{position:relative;font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-slab__content :first-child{margin-top:0}.dd-card-neo-slab__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-slab{box-shadow:7px 7px 0 var(--dd-neo-card-shadow)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strapLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strapLabel", required: true }] }], swipeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeable", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], swipedLeft: [{ type: i0.Output, args: ["swipedLeft"] }], swipedRight: [{ type: i0.Output, args: ["swipedRight"] }] } });
 
 class DuckDevCardNeobrutalStamp {
@@ -4658,11 +4658,11 @@ class DuckDevCardNeobrutalStamp {
     sealLabel = input.required({ ...(ngDevMode ? { debugName: "sealLabel" } : {}) });
     cardStyle = computed(() => getNeobrutalCardStyle(this.color()), { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalStamp, isStandalone: true, selector: "dd-card-neobrutal-stamp", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, chromeStart: { classPropertyName: "chromeStart", publicName: "chromeStart", isSignal: true, isRequired: true, transformFunction: null }, chromeEnd: { classPropertyName: "chromeEnd", publicName: "chromeEnd", isSignal: true, isRequired: true, transformFunction: null }, sealLabel: { classPropertyName: "sealLabel", publicName: "sealLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n    <span>{{ chromeStart() }}</span>\n    <span>{{ chromeEnd() }}</span>\n  </div>\n\n  <div class=\"dd-card-neo-stamp__body\">\n    <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n    <div class=\"dd-card-neo-stamp__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardNeobrutalStamp, isStandalone: true, selector: "dd-card-neobrutal-stamp", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, chromeStart: { classPropertyName: "chromeStart", publicName: "chromeStart", isSignal: true, isRequired: true, transformFunction: null }, chromeEnd: { classPropertyName: "chromeEnd", publicName: "chromeEnd", isSignal: true, isRequired: true, transformFunction: null }, sealLabel: { classPropertyName: "sealLabel", publicName: "sealLabel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n    <span>{{ chromeStart() }}</span>\n    <span>{{ chromeEnd() }}</span>\n  </div>\n\n  <div class=\"dd-card-neo-stamp__body\">\n    <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n    <div class=\"dd-card-neo-stamp__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardNeobrutalStamp, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-card-neobrutal-stamp', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n    <span>{{ chromeStart() }}</span>\n    <span>{{ chromeEnd() }}</span>\n  </div>\n\n  <div class=\"dd-card-neo-stamp__body\">\n    <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n    <div class=\"dd-card-neo-stamp__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-shadow);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"] }]
+            args: [{ selector: 'dd-card-neobrutal-stamp', standalone: true, imports: [NgStyle], template: "<article class=\"dd-card-neo-stamp\" [ngStyle]=\"cardStyle()\">\n  <div class=\"dd-card-neo-stamp__chrome\" aria-hidden=\"true\">\n    <span>{{ chromeStart() }}</span>\n    <span>{{ chromeEnd() }}</span>\n  </div>\n\n  <div class=\"dd-card-neo-stamp__body\">\n    <div class=\"dd-card-neo-stamp__seal\" aria-hidden=\"true\">{{ sealLabel() }}</div>\n    <div class=\"dd-card-neo-stamp__content\">\n      <ng-content />\n    </div>\n  </div>\n</article>\n", styles: [".dd-card-neo-stamp{display:block;background:var(--dd-neo-card-surface);border:4px solid var(--dd-neo-card-border);box-shadow:12px 12px 0 var(--dd-neo-card-shadow);color:var(--dd-neo-card-text);overflow:clip}.dd-card-neo-stamp__chrome{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:4px solid var(--dd-neo-card-border);background:var(--dd-neo-card-accent);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;text-transform:uppercase}.dd-card-neo-stamp__body{position:relative;padding:22px;background:linear-gradient(45deg,color-mix(in srgb,var(--dd-neo-card-accent) 18%,transparent) 0 12%,transparent 12% 100%),repeating-linear-gradient(-45deg,transparent 0 12px,color-mix(in srgb,var(--dd-neo-card-border) 6%,transparent) 12px 14px),var(--dd-neo-card-panel)}.dd-card-neo-stamp__seal{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:68px;height:68px;border:4px solid var(--dd-neo-card-border);border-radius:999px;background:var(--dd-neo-card-surface);box-shadow:4px 4px 0 var(--dd-neo-card-shadow);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(14deg)}.dd-card-neo-stamp__content{max-width:calc(100% - 92px);font-size:15px;line-height:1.6;font-weight:700}.dd-card-neo-stamp__content :first-child{margin-top:0}.dd-card-neo-stamp__content :last-child{margin-bottom:0}@media(max-width:640px){.dd-card-neo-stamp{box-shadow:8px 8px 0 var(--dd-neo-card-shadow)}.dd-card-neo-stamp__body{padding-top:96px}.dd-card-neo-stamp__seal{top:16px;left:16px;right:auto}.dd-card-neo-stamp__content{max-width:100%}}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], chromeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeStart", required: true }] }], chromeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeEnd", required: true }] }], sealLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sealLabel", required: true }] }] } });
 
 class DuckDevCardNeobrutalTicket {
@@ -4871,11 +4871,11 @@ class DuckDevTooltipNeobrutalComponent {
         this.closeTimer = setTimeout(() => this.open.set(false), delay);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltipNeobrutalComponent, isStandalone: true, selector: "duck-dev-tooltip-neobrutal", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-tooltip-brutal\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (focusin)=\"handleEnter()\"\n  (focusout)=\"handleLeave()\"\n>\n  <div class=\"dd-tooltip-brutal__trigger\">\n    <ng-content />\n  </div>\n\n  @if (open()) {\n    <div\n      class=\"dd-tooltip-brutal__bubble\"\n      animate.enter=\"enterAnimation\"\n      animate.leave=\"leaveAnimation\"\n      [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n      [attr.data-placement]=\"placement()\"\n      [attr.data-color]=\"color()\"\n    >\n      <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n      <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n      <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-neo-shadow);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltipNeobrutalComponent, isStandalone: true, selector: "duck-dev-tooltip-neobrutal", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"dd-tooltip-brutal\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (focusin)=\"handleEnter()\"\n  (focusout)=\"handleLeave()\"\n>\n  <div class=\"dd-tooltip-brutal__trigger\">\n    <ng-content />\n  </div>\n\n  @if (open()) {\n    <div\n      class=\"dd-tooltip-brutal__bubble\"\n      animate.enter=\"enterAnimation\"\n      animate.leave=\"leaveAnimation\"\n      [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n      [attr.data-placement]=\"placement()\"\n      [attr.data-color]=\"color()\"\n    >\n      <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n      <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n      <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-neo-paper);box-shadow:3px 3px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltipNeobrutalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-tooltip-neobrutal', standalone: true, imports: [], template: "<div\n  class=\"dd-tooltip-brutal\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (focusin)=\"handleEnter()\"\n  (focusout)=\"handleLeave()\"\n>\n  <div class=\"dd-tooltip-brutal__trigger\">\n    <ng-content />\n  </div>\n\n  @if (open()) {\n    <div\n      class=\"dd-tooltip-brutal__bubble\"\n      animate.enter=\"enterAnimation\"\n      animate.leave=\"leaveAnimation\"\n      [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n      [attr.data-placement]=\"placement()\"\n      [attr.data-color]=\"color()\"\n    >\n      <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n      <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n      <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-base-0);box-shadow:3px 3px 0 var(--dd-neo-shadow);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] }]
+            args: [{ selector: 'duck-dev-tooltip-neobrutal', standalone: true, imports: [], template: "<div\n  class=\"dd-tooltip-brutal\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (focusin)=\"handleEnter()\"\n  (focusout)=\"handleLeave()\"\n>\n  <div class=\"dd-tooltip-brutal__trigger\">\n    <ng-content />\n  </div>\n\n  @if (open()) {\n    <div\n      class=\"dd-tooltip-brutal__bubble\"\n      animate.enter=\"enterAnimation\"\n      animate.leave=\"leaveAnimation\"\n      [style.--dd-tooltip-brutal-anim-ms.ms]=\"delayCloseMs()\"\n      [attr.data-placement]=\"placement()\"\n      [attr.data-color]=\"color()\"\n    >\n      <span class=\"dd-tooltip-brutal__stamp\">Duck Dev</span>\n      <span class=\"dd-tooltip-brutal__text\">{{ text() }}</span>\n      <span class=\"dd-tooltip-brutal__arrow\" aria-hidden=\"true\"></span>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip-brutal{position:relative;display:inline-block}.dd-tooltip-brutal__bubble{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-text: var(--dd-base-600);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange);position:absolute;z-index:6;display:grid;gap:10px;min-width:180px;max-width:280px;padding:14px;border:4px solid var(--dd-tooltip-brutal-border);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-tooltip-brutal-accent) 26%,transparent) 0 18%,transparent 18% 100%),var(--dd-tooltip-brutal-surface);box-shadow:8px 8px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-text);pointer-events:none;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-color=violet]{--dd-tooltip-brutal-surface: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0));--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=orange]{--dd-tooltip-brutal-surface: color-mix( in srgb, var(--dd-base-accent-orange) 16%, var(--dd-base-0) );--dd-tooltip-brutal-accent: var(--dd-base-accent-pink);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=gray]{--dd-tooltip-brutal-surface: var(--dd-base-200);--dd-tooltip-brutal-accent: var(--dd-base-accent-orange);--dd-tooltip-brutal-shadow: var(--dd-base-accent-blue)}.dd-tooltip-brutal__bubble[data-color=dark]{--dd-tooltip-brutal-surface: var(--dd-base-600);--dd-tooltip-brutal-text: var(--dd-base-0);--dd-tooltip-brutal-border: var(--dd-neo-ink);--dd-tooltip-brutal-accent: var(--dd-base-accent-yellow);--dd-tooltip-brutal-shadow: var(--dd-base-secondary)}.dd-tooltip-brutal__bubble[data-color=white]{--dd-tooltip-brutal-surface: var(--dd-base-0);--dd-tooltip-brutal-accent: var(--dd-base-accent-blue);--dd-tooltip-brutal-shadow: var(--dd-base-accent-orange)}.dd-tooltip-brutal__bubble[data-placement=top],.dd-tooltip-brutal__bubble[data-placement=top-start],.dd-tooltip-brutal__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=top-start]{left:0;transform:translateY(-14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom],.dd-tooltip-brutal__bubble[data-placement=bottom-start],.dd-tooltip-brutal__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,14px) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]{left:0;transform:translateY(14px) rotate(1.25deg)}.dd-tooltip-brutal__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,14px) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left],.dd-tooltip-brutal__bubble[data-placement=left-start],.dd-tooltip-brutal__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-14px,-50%) rotate(-1deg)}.dd-tooltip-brutal__bubble[data-placement=left-start]{top:0;transform:translate(-14px) rotate(-1.5deg)}.dd-tooltip-brutal__bubble[data-placement=left-end]{top:100%;transform:translate(-14px,-100%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right],.dd-tooltip-brutal__bubble[data-placement=right-start],.dd-tooltip-brutal__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(14px,-50%) rotate(1deg)}.dd-tooltip-brutal__bubble[data-placement=right-start]{top:0;transform:translate(14px) rotate(1.5deg)}.dd-tooltip-brutal__bubble[data-placement=right-end]{top:100%;transform:translate(14px,-100%) rotate(-1deg)}.dd-tooltip-brutal__stamp{display:inline-flex;width:fit-content;align-items:center;justify-content:center;padding:4px 8px;border:3px solid var(--dd-tooltip-brutal-border);background:var(--dd-neo-paper);box-shadow:3px 3px 0 var(--dd-tooltip-brutal-shadow);color:var(--dd-tooltip-brutal-border);font-size:10px;font-weight:900;line-height:1;letter-spacing:.16em;text-transform:uppercase;transform:rotate(-4deg)}.dd-tooltip-brutal__bubble[data-color=dark] .dd-tooltip-brutal__stamp{background:var(--dd-base-accent-yellow)}.dd-tooltip-brutal__text{display:block;font-size:13px;line-height:1.35;font-weight:800;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}.dd-tooltip-brutal__arrow{position:absolute;width:18px;height:18px;border-right:4px solid var(--dd-tooltip-brutal-border);border-bottom:4px solid var(--dd-tooltip-brutal-border);background:var(--dd-tooltip-brutal-surface)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{bottom:-13px;transform:rotate(45deg)}.dd-tooltip-brutal__bubble[data-placement=top]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=top-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=top-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{top:-13px;transform:rotate(225deg)}.dd-tooltip-brutal__bubble[data-placement=bottom]>.dd-tooltip-brutal__arrow{left:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=bottom-start]>.dd-tooltip-brutal__arrow{left:20px}.dd-tooltip-brutal__bubble[data-placement=bottom-end]>.dd-tooltip-brutal__arrow{right:20px}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{right:-13px;transform:rotate(315deg)}.dd-tooltip-brutal__bubble[data-placement=left]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=left-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=left-end]>.dd-tooltip-brutal__arrow{bottom:20px}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow,.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{left:-13px;transform:rotate(135deg)}.dd-tooltip-brutal__bubble[data-placement=right]>.dd-tooltip-brutal__arrow{top:calc(50% - 9px)}.dd-tooltip-brutal__bubble[data-placement=right-start]>.dd-tooltip-brutal__arrow{top:20px}.dd-tooltip-brutal__bubble[data-placement=right-end]>.dd-tooltip-brutal__arrow{bottom:20px}.enterAnimation{animation:enter-animation var(--dd-tooltip-brutal-anim-ms, .3s) cubic-bezier(.22,1.1,.36,1)}@keyframes enter-animation{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-brutal-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}@media(max-width:640px){.dd-tooltip-brutal__bubble{min-width:160px;max-width:min(240px,100vw - 32px);box-shadow:6px 6px 0 var(--dd-tooltip-brutal-shadow)}}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delayCloseMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayCloseMs", required: false }] }] } });
 
 class DuckDevModalClassic {
@@ -4958,11 +4958,11 @@ class DuckDevProgressNeobrutalSlab {
     color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
     percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-shadow)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevProgressNeobrutalSlab, isStandalone: true, selector: "duck-dev-progress-neobrutal-slab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, subtext: { classPropertyName: "subtext", publicName: "subtext", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalSlab, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-neo-shadow)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
+            args: [{ selector: 'duck-dev-progress-neobrutal-slab', standalone: true, template: "<section class=\"dd-progress-neo-slab\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-slab__header\">\n    <div class=\"dd-progress-neo-slab__copy\">\n      <span class=\"dd-progress-neo-slab__label\">{{ label() }}</span>\n      @if (subtext()) {\n        <span class=\"dd-progress-neo-slab__subtext\">{{ subtext() }}</span>\n      }\n    </div>\n    <span class=\"dd-progress-neo-slab__value\">{{ percent() }}%</span>\n  </header>\n\n  <div class=\"dd-progress-neo-slab__track\">\n    <span class=\"dd-progress-neo-slab__fill\" [style.width.%]=\"percent()\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-slab{display:flex;flex-direction:column;gap:14px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-progress-panel) 22%,var(--dd-base-0)) 0 16%,transparent 16% 100%),var(--dd-progress-panel);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-slab__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dd-progress-neo-slab__copy{display:flex;flex-direction:column;gap:5px}.dd-progress-neo-slab__label{color:var(--dd-base-600);font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.dd-progress-neo-slab__subtext{color:var(--dd-base-600);font-size:12px;font-weight:700;opacity:.72}.dd-progress-neo-slab__value{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-panel);color:var(--dd-base-600);font-size:13px;font-weight:900}.dd-progress-neo-slab__track{position:relative;height:24px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-panel) 50%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-slab__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .2s steps(10,end);box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-slab[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary);--dd-progress-panel: color-mix(in srgb, var(--dd-base-secondary) 14%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange);--dd-progress-panel: color-mix(in srgb, var(--dd-base-accent-yellow) 32%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=gray]{--dd-progress-fill: var(--dd-base-400);--dd-progress-panel: var(--dd-base-100)}.dd-progress-neo-slab[data-color=dark]{--dd-progress-fill: var(--dd-base-600);--dd-progress-panel: color-mix(in srgb, var(--dd-base-600) 12%, var(--dd-base-0))}.dd-progress-neo-slab[data-color=white]{--dd-progress-fill: var(--dd-base-0);--dd-progress-panel: var(--dd-base-100)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], subtext: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtext", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class DuckDevProgressNeobrutalStamp {
@@ -4972,11 +4972,11 @@ class DuckDevProgressNeobrutalStamp {
     color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
     percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-neo-shadow)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalStamp, isStandalone: true, selector: "duck-dev-progress-neobrutal-stamp", inputs: { kicker: { classPropertyName: "kicker", publicName: "kicker", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalStamp, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-neo-shadow)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
+            args: [{ selector: 'duck-dev-progress-neobrutal-stamp', standalone: true, template: "<section class=\"dd-progress-neo-stamp\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-stamp__header\">\n    <span class=\"dd-progress-neo-stamp__kicker\">{{ kicker() }}</span>\n    <span class=\"dd-progress-neo-stamp__value\">{{ percent() }}%</span>\n  </header>\n\n  <span class=\"dd-progress-neo-stamp__label\">{{ label() }}</span>\n\n  <div class=\"dd-progress-neo-stamp__track\">\n    <span class=\"dd-progress-neo-stamp__fill\" [style.width.%]=\"percent()\"></span>\n    <span class=\"dd-progress-neo-stamp__grid\"></span>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-stamp{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;border:4px solid var(--dd-neo-ink);background:radial-gradient(circle at top left,color-mix(in srgb,var(--dd-progress-fill) 22%,var(--dd-base-0)) 0 12%,transparent 13%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-stamp__header{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-stamp__kicker,.dd-progress-neo-stamp__value{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 10px;border:3px solid var(--dd-neo-ink);background:var(--dd-progress-fill);color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-stamp__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.25;text-transform:uppercase}.dd-progress-neo-stamp__track{position:relative;height:28px;border:4px solid var(--dd-neo-ink);background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200));overflow:hidden}.dd-progress-neo-stamp__fill{position:absolute;inset:0 auto 0 0;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 92%,var(--dd-base-0)),color-mix(in srgb,var(--dd-progress-fill) 78%,var(--dd-base-600)));transition:width .18s ease;z-index:1}.dd-progress-neo-stamp__grid{display:none}.dd-progress-neo-stamp[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-stamp[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-stamp[data-color=gray]{--dd-progress-fill: var(--dd-base-300)}.dd-progress-neo-stamp[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-stamp[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
         }], propDecorators: { kicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "kicker", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class DuckDevProgressNeobrutalTicket {
@@ -4987,11 +4987,11 @@ class DuckDevProgressNeobrutalTicket {
     color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
     percent = computed(() => clampProgress(this.value()), { ...(ngDevMode ? { debugName: "percent" } : {}) });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-shadow))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevProgressNeobrutalTicket, isStandalone: true, selector: "duck-dev-progress-neobrutal-ticket", inputs: { leftTag: { classPropertyName: "leftTag", publicName: "leftTag", isSignal: true, isRequired: true, transformFunction: null }, rightTag: { classPropertyName: "rightTag", publicName: "rightTag", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevProgressNeobrutalTicket, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-base-0);box-shadow:8px 8px color-mix(in srgb,var(--dd-progress-fill) 30%,var(--dd-neo-shadow))}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-base-0));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
+            args: [{ selector: 'duck-dev-progress-neobrutal-ticket', standalone: true, template: "<section class=\"dd-progress-neo-ticket\" [attr.data-color]=\"color()\">\n  <header class=\"dd-progress-neo-ticket__header\">\n    <span class=\"dd-progress-neo-ticket__tag\">{{ leftTag() }}</span>\n    <span class=\"dd-progress-neo-ticket__tag\">{{ rightTag() }}</span>\n  </header>\n\n  <div class=\"dd-progress-neo-ticket__body\">\n    <div class=\"dd-progress-neo-ticket__copy\">\n      <span class=\"dd-progress-neo-ticket__label\">{{ label() }}</span>\n      <span class=\"dd-progress-neo-ticket__percent\">{{ percent() }}%</span>\n    </div>\n\n    <div class=\"dd-progress-neo-ticket__track\">\n      <span class=\"dd-progress-neo-ticket__fill\" [style.width.%]=\"percent()\"></span>\n    </div>\n  </div>\n</section>\n", styles: [":host{display:block;width:100%}.dd-progress-neo-ticket{display:flex;flex-direction:column;gap:0;width:100%;border:4px solid var(--dd-neo-ink);background:var(--dd-neo-paper);box-shadow:8px 8px 0 var(--dd-progress-fill)}.dd-progress-neo-ticket__header{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:4px solid var(--dd-neo-ink)}.dd-progress-neo-ticket__tag{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:8px 12px;background:color-mix(in srgb,var(--dd-progress-fill) 20%,var(--dd-neo-paper));color:var(--dd-base-600);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.dd-progress-neo-ticket__tag:first-child{border-right:4px dashed var(--dd-neo-ink)}.dd-progress-neo-ticket__body{display:flex;flex-direction:column;gap:16px;padding:16px;background:linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--dd-progress-fill) 10%,var(--dd-base-0)) 14px 100%)}.dd-progress-neo-ticket__copy{display:flex;justify-content:space-between;gap:16px;align-items:center}.dd-progress-neo-ticket__label{color:var(--dd-base-600);font-size:15px;font-weight:900;line-height:1.2;text-transform:uppercase}.dd-progress-neo-ticket__percent{color:var(--dd-base-600);font-size:18px;font-weight:900;white-space:nowrap}.dd-progress-neo-ticket__track{position:relative;height:22px;border:4px solid var(--dd-neo-ink);overflow:hidden;background:color-mix(in srgb,var(--dd-progress-fill) 8%,var(--dd-base-200))}.dd-progress-neo-ticket__fill{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--dd-progress-fill) 90%,var(--dd-base-0)),var(--dd-progress-fill));transition:width .22s ease;box-shadow:inset -4px 0 0 var(--dd-neo-ink)}.dd-progress-neo-ticket[data-color=violet]{--dd-progress-fill: var(--dd-base-secondary)}.dd-progress-neo-ticket[data-color=orange]{--dd-progress-fill: var(--dd-base-accent-orange)}.dd-progress-neo-ticket[data-color=gray]{--dd-progress-fill: var(--dd-base-400)}.dd-progress-neo-ticket[data-color=dark]{--dd-progress-fill: var(--dd-base-600)}.dd-progress-neo-ticket[data-color=white]{--dd-progress-fill: var(--dd-base-0)}\n"] }]
         }], propDecorators: { leftTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTag", required: true }] }], rightTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTag", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class DuckDevSegmentButton {
@@ -5256,11 +5256,11 @@ class DuckDevSegmentNeobrutal {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n  <div class=\"dd-segment-neo__indicator-shell\">\n    <div\n      class=\"dd-segment-neo__indicator\"\n      [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n      [style.width.px]=\"indicatorWidth\"\n    >\n      <span class=\"dd-segment-neo__indicator-notch\"></span>\n    </div>\n  </div>\n\n  <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n    @for (button of buttons; track button.value; let i = $index) {\n      <button\n        class=\"dd-segment-neo__button\"\n        [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <span class=\"dd-segment-neo__button-copy\">\n          <ng-container *ngTemplateOutlet=\"button.template\" />\n        </span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-shadow);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n  <div class=\"dd-segment-neo__indicator-shell\">\n    <div\n      class=\"dd-segment-neo__indicator\"\n      [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n      [style.width.px]=\"indicatorWidth\"\n    >\n      <span class=\"dd-segment-neo__indicator-notch\"></span>\n    </div>\n  </div>\n\n  <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n    @for (button of buttons; track button.value; let i = $index) {\n      <button\n        class=\"dd-segment-neo__button\"\n        [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <span class=\"dd-segment-neo__button-copy\">\n          <ng-container *ngTemplateOutlet=\"button.template\" />\n        </span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-segment-neo-accent);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, decorators: [{
             type: Component,
-            args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n  <div class=\"dd-segment-neo__indicator-shell\">\n    <div\n      class=\"dd-segment-neo__indicator\"\n      [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n      [style.width.px]=\"indicatorWidth\"\n    >\n      <span class=\"dd-segment-neo__indicator-notch\"></span>\n    </div>\n  </div>\n\n  <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n    @for (button of buttons; track button.value; let i = $index) {\n      <button\n        class=\"dd-segment-neo__button\"\n        [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <span class=\"dd-segment-neo__button-copy\">\n          <ng-container *ngTemplateOutlet=\"button.template\" />\n        </span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-neo-shadow);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
+            args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n  <div class=\"dd-segment-neo__indicator-shell\">\n    <div\n      class=\"dd-segment-neo__indicator\"\n      [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n      [style.width.px]=\"indicatorWidth\"\n    >\n      <span class=\"dd-segment-neo__indicator-notch\"></span>\n    </div>\n  </div>\n\n  <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n    @for (button of buttons; track button.value; let i = $index) {\n      <button\n        class=\"dd-segment-neo__button\"\n        [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n        (click)=\"selectButton(button.value, i)\"\n        type=\"button\"\n      >\n        <span class=\"dd-segment-neo__button-copy\">\n          <ng-container *ngTemplateOutlet=\"button.template\" />\n        </span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-blue);--dd-segment-neo-shadow: var(--dd-base-accent-orange);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-neo-ink);z-index:0;left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-neo-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-segment-neo-accent);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-neo-ink);border-bottom:3px solid var(--dd-neo-ink);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
                 type: ContentChildren,
                 args: [DuckDevSegmentButton]
@@ -5379,11 +5379,11 @@ class DuckDevSegmentNeobrutalVertical {
         }
     }
     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"] }] });
+    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-segment-neo-v-accent);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"] }]
+            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-segment-neo-v-accent);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]
@@ -5527,11 +5527,11 @@ class DuckDevBreadcrumbNeobrutal {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n  class=\"neo-bc\"\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li\n        class=\"neo-bc__item\"\n        animate.enter=\"neo-bc__item--enter\"\n        animate.leave=\"neo-bc__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index)\"\n            (keydown.enter)=\"onCurrentClick($index)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </span>\n        }\n        <span\n          class=\"neo-bc__arrow\"\n          [class.neo-bc__arrow--visible]=\"!last\"\n          aria-hidden=\"true\"\n        ></span>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevBreadcrumbNeobrutal, isStandalone: true, selector: "dd-breadcrumb-neobrutal", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n  class=\"neo-bc\"\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li\n        class=\"neo-bc__item\"\n        animate.enter=\"neo-bc__item--enter\"\n        animate.leave=\"neo-bc__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index)\"\n            (keydown.enter)=\"onCurrentClick($index)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </span>\n        }\n        <span\n          class=\"neo-bc__arrow\"\n          [class.neo-bc__arrow--visible]=\"!last\"\n          aria-hidden=\"true\"\n        ></span>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--neo-bc-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevBreadcrumbNeobrutal, decorators: [{
             type: Component,
-            args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n  class=\"neo-bc\"\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li\n        class=\"neo-bc__item\"\n        animate.enter=\"neo-bc__item--enter\"\n        animate.leave=\"neo-bc__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index)\"\n            (keydown.enter)=\"onCurrentClick($index)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </span>\n        }\n        <span\n          class=\"neo-bc__arrow\"\n          [class.neo-bc__arrow--visible]=\"!last\"\n          aria-hidden=\"true\"\n        ></span>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--dd-neo-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"] }]
+            args: [{ selector: 'dd-breadcrumb-neobrutal', standalone: true, imports: [NgStyle], template: "<nav\n  class=\"neo-bc\"\n  [class.neo-bc--mobile]=\"isMobile()\"\n  aria-label=\"Breadcrumb\"\n  [ngStyle]=\"breadcrumbStyle()\"\n>\n  <ol\n    class=\"neo-bc__list\"\n    #listEl\n    [class.neo-bc__list--dragging]=\"isDragging()\"\n    (mousedown)=\"onListMouseDown($event)\"\n  >\n    @for (item of visibleItems(); track $index; let last = $last) {\n      <li\n        class=\"neo-bc__item\"\n        animate.enter=\"neo-bc__item--enter\"\n        animate.leave=\"neo-bc__item--leave\"\n      >\n        @if (!last && item.url) {\n          <button\n            class=\"neo-bc__link\"\n            [class.neo-bc__link--popover-open]=\"isPopoverOpen($index)\"\n            type=\"button\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onNavigate(item, $index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </button>\n        } @else {\n          <span\n            class=\"neo-bc__current\"\n            [class.neo-bc__current--popover-open]=\"isPopoverOpen($index)\"\n            tabindex=\"0\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [attr.aria-label]=\"item.label\"\n            (click)=\"onCurrentClick($index)\"\n            (keydown.enter)=\"onCurrentClick($index)\"\n            (keydown.space)=\"$event.preventDefault(); onCurrentClick($index)\"\n            (keydown.escape)=\"closePopover()\"\n          >\n            <span class=\"neo-bc__chip neo-bc__chip--active\">\n              <span class=\"neo-bc__label\">{{ item.label }}</span>\n            </span>\n            <span class=\"neo-bc__popover\" role=\"tooltip\">{{ item.label }}</span>\n          </span>\n        }\n        <span\n          class=\"neo-bc__arrow\"\n          [class.neo-bc__arrow--visible]=\"!last\"\n          aria-hidden=\"true\"\n        ></span>\n      </li>\n    }\n  </ol>\n</nav>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue);--dd-neo-ink: var(--dd-gray-600);--dd-neo-paper: var(--dd-gray-0);--dd-neo-shadow: var(--dd-gray-600);--dd-neo-ana-1: rgb(100% 92.1% 58.8%);--dd-neo-ana-1-contrast: #000;--dd-neo-ana-2: rgb(88% 50% 22%);--dd-neo-ana-2-contrast: #000;--dd-neo-ana-3: rgb(52% 55% 65%);--dd-neo-ana-3-contrast: #000;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(88% 50% 48%);--dd-neo-ana-5-contrast: #000;--dd-neo-ana-6: rgb(33.1% 65.9% 79.3%);--dd-neo-ana-6-contrast: #000}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500);--dd-base-accent-yellow: #934032;--dd-base-accent-orange: #b55015;--dd-neo-ink: var(--dd-secondary);--dd-neo-paper: var(--dd-gray-600);--dd-neo-shadow: rgba(0, 0, 0, .55);--dd-neo-ana-1: rgb(48% 44% 16%);--dd-neo-ana-1-contrast: #fff;--dd-neo-ana-2: rgb(55% 28% 10%);--dd-neo-ana-2-contrast: #fff;--dd-neo-ana-3: rgb(30% 32% 42%);--dd-neo-ana-3-contrast: #fff;--dd-neo-ana-4: rgb(21.3% 22.1% 22.8%);--dd-neo-ana-4-contrast: #fff;--dd-neo-ana-5: rgb(55% 28% 26%);--dd-neo-ana-5-contrast: #fff;--dd-neo-ana-6: rgb(18% 42% 54%);--dd-neo-ana-6-contrast: #fff}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:host{display:block;box-sizing:border-box}.neo-bc{--neo-bc-row-height: 31px;--neo-bc-block-padding-y: 20px;--neo-bc-border-y: 6px;--neo-bc-arrow-gap: 8px;--neo-bc-arrow-top: 6px;--neo-bc-arrow-bottom: 6px;--neo-bc-arrow-left: 8px;--neo-bc-arrow-space: calc( var(--neo-bc-arrow-gap) + var(--neo-bc-arrow-left) + var(--neo-bc-arrow-gap) );display:block;width:100%;height:calc(var(--neo-bc-row-height) + var(--neo-bc-block-padding-y) + var(--neo-bc-border-y));box-sizing:border-box;padding:10px 14px;border:3px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:5px 5px 0 var(--neo-bc-shadow),5px 5px 0 3px var(--dd-neo-shadow);transition:padding .2s ease,box-shadow .2s ease}.neo-bc__list{display:flex;align-items:center;width:100%;height:100%;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}.neo-bc__list--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neo-bc__item{position:relative;display:flex;align-items:center;flex-shrink:0;min-width:0}.neo-bc__chip{display:flex;align-items:center;width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:5px 12px;border:2px solid var(--neo-bc-link);background:transparent;color:var(--neo-bc-link);font-size:.78rem;font-weight:900;line-height:1.1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.neo-bc__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neo-bc__link{position:relative;display:flex;align-items:center;padding:0;border:none;background:transparent;font:inherit;cursor:pointer;touch-action:pan-x}.neo-bc__link:hover .neo-bc__chip{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--neo-bc-shadow);background:color-mix(in srgb,var(--neo-bc-shadow) 14%,transparent)}.neo-bc__link:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__current{position:relative;display:flex;align-items:center;touch-action:pan-x}.neo-bc__current:focus-visible .neo-bc__chip{outline:3px solid var(--neo-bc-link);outline-offset:1px}.neo-bc__chip--active{border-color:var(--dd-neo-ink);background:var(--neo-bc-separator);color:var(--neo-bc-active)}.neo-bc__arrow{display:inline-block;flex-shrink:0;width:0;height:0;margin-left:0;border-style:solid;border-width:0;border-color:transparent transparent transparent var(--neo-bc-separator);opacity:0;transform-origin:left center;transform:scaleX(.2);transition:margin-left .2s ease,border-width .2s ease,opacity .2s ease,transform .2s ease}.neo-bc__arrow--visible{margin-right:var(--neo-bc-arrow-gap);margin-left:var(--neo-bc-arrow-gap);border-width:var(--neo-bc-arrow-top) 0 var(--neo-bc-arrow-bottom) var(--neo-bc-arrow-left);opacity:1;transform:scaleX(1)}.neo-bc__popover{position:absolute;left:0;top:calc(100% + 6px);z-index:2;display:block;max-width:min(320px,100vw - 32px);padding:6px 10px;border:2px solid var(--dd-neo-ink);background:var(--neo-bc-surface);box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow);color:var(--neo-bc-link);font-size:.72rem;font-weight:900;line-height:1.2;overflow-wrap:anywhere;text-transform:none;opacity:0;visibility:hidden;transform:translate(-2px,-2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease}.neo-bc:not(.neo-bc--mobile) .neo-bc__link:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__link:focus .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:hover .neo-bc__popover,.neo-bc:not(.neo-bc--mobile) .neo-bc__current:focus .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}.neo-bc__link--popover-open .neo-bc__popover,.neo-bc__current--popover-open .neo-bc__popover{opacity:1;visibility:visible;transform:translate(0)}@keyframes neo-bc-item-enter{0%{opacity:0;transform:scale(.96)}50%{opacity:.5}to{opacity:1;transform:scale(1)}}@keyframes neo-bc-item-leave{0%{opacity:1;transform:scale(1)}50%{opacity:0}to{opacity:0;transform:scale(.96)}}.neo-bc__item--enter{animation:neo-bc-item-enter .34s cubic-bezier(.16,1,.3,1) both}.neo-bc__item--leave{animation:neo-bc-item-leave .24s cubic-bezier(.4,0,1,1) both}@media(max-width:768px){.neo-bc{--neo-bc-row-height: 28px;--neo-bc-block-padding-y: 16px;--neo-bc-arrow-gap: 6px;--neo-bc-arrow-top: 5px;--neo-bc-arrow-bottom: 5px;--neo-bc-arrow-left: 7px;padding:8px 10px;box-shadow:4px 4px 0 var(--neo-bc-shadow),4px 4px 0 3px var(--dd-neo-shadow)}.neo-bc__chip{padding:4px 10px;font-size:.72rem}}@media(max-width:480px){.neo-bc{--neo-bc-border-y: 4px;--neo-bc-arrow-gap: 4px;--neo-bc-arrow-top: 4px;--neo-bc-arrow-bottom: 4px;--neo-bc-arrow-left: 6px;padding:8px;border-width:2px;box-shadow:3px 3px 0 var(--neo-bc-shadow),3px 3px 0 2px var(--dd-neo-shadow)}.neo-bc__chip{padding:5px 8px;border-width:2px;font-size:.68rem;letter-spacing:.05em}.neo-bc__popover{max-width:min(260px,100vw - 24px);font-size:.68rem}}@media(max-width:360px){.neo-bc{--neo-bc-row-height: 24px;--neo-bc-block-padding-y: 12px;--neo-bc-arrow-gap: 3px;--neo-bc-arrow-top: 3px;--neo-bc-arrow-bottom: 3px;--neo-bc-arrow-left: 5px;padding:6px}.neo-bc__chip{padding:4px 6px;font-size:.62rem;letter-spacing:.03em}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], listRef: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }] } });
 
 class DuckDevSelectorOption {