duck-dev-lib 0.0.91 → 0.0.93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,6 +15,20 @@ var AccentEnumColor;
15
15
  AccentEnumColor["Violet"] = "violet";
16
16
  })(AccentEnumColor || (AccentEnumColor = {}));
17
17
 
18
+ /** All available palettes with metadata */
19
+ const DD_NEO_PALETTES = [
20
+ { id: 'candy-store', name: 'Candy Store', mode: 'light' },
21
+ { id: 'tropical-punch', name: 'Tropical Punch', mode: 'light' },
22
+ { id: 'sunset-boulevard', name: 'Sunset Boulevard', mode: 'light' },
23
+ { id: 'memphis-pop', name: 'Memphis Pop', mode: 'light' },
24
+ { id: 'bauhaus-bright', name: 'Bauhaus Bright', mode: 'light' },
25
+ { id: 'deep-neon', name: 'Deep Neon', mode: 'dark' },
26
+ { id: 'ember-glow', name: 'Ember Glow', mode: 'dark' },
27
+ { id: 'toxic-garden', name: 'Toxic Garden', mode: 'dark' },
28
+ { id: 'midnight-royal', name: 'Midnight Royal', mode: 'dark' },
29
+ { id: 'berry-candy', name: 'Berry Candy', mode: 'dark' },
30
+ ];
31
+
18
32
  class DdFlexDirectionDirective {
19
33
  ddFlexDirection = input('row', { ...(ngDevMode ? { debugName: "ddFlexDirection" } : {}) });
20
34
  gap = input(null, { ...(ngDevMode ? { debugName: "gap" } : {}) });
@@ -2531,11 +2545,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
2531
2545
  args: [{ selector: 'duck-dev-accordion', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"] }]
2532
2546
  }], 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 }] }] } });
2533
2547
 
2548
+ function getNeobrutalAccordionStyle(color) {
2549
+ switch (color) {
2550
+ case AccentEnumColor.Violet:
2551
+ return {
2552
+ '--dd-neo-accordion-bg': 'color-mix(in srgb, var(--dd-neo-ana-3) 14%, var(--dd-neo-paper))',
2553
+ '--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 7%, var(--dd-neo-paper))',
2554
+ '--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
2555
+ '--dd-neo-accordion-border': 'var(--dd-neo-ink)',
2556
+ '--dd-neo-accordion-text': 'var(--dd-neo-ink)',
2557
+ '--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
2558
+ };
2559
+ case AccentEnumColor.Orange:
2560
+ return {
2561
+ '--dd-neo-accordion-bg': 'color-mix(in srgb, var(--dd-neo-ana-2) 16%, var(--dd-neo-paper))',
2562
+ '--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-2) 8%, var(--dd-neo-paper))',
2563
+ '--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
2564
+ '--dd-neo-accordion-border': 'var(--dd-neo-ink)',
2565
+ '--dd-neo-accordion-text': 'var(--dd-neo-ink)',
2566
+ '--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
2567
+ };
2568
+ case AccentEnumColor.Gray:
2569
+ return {
2570
+ '--dd-neo-accordion-bg': 'var(--dd-base-100)',
2571
+ '--dd-neo-accordion-panel': 'var(--dd-neo-paper)',
2572
+ '--dd-neo-accordion-accent': 'var(--dd-neo-ana-2)',
2573
+ '--dd-neo-accordion-border': 'var(--dd-neo-ink)',
2574
+ '--dd-neo-accordion-text': 'var(--dd-neo-ink)',
2575
+ '--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
2576
+ };
2577
+ case AccentEnumColor.Dark:
2578
+ return {
2579
+ '--dd-neo-accordion-bg': 'var(--dd-neo-ana-4)',
2580
+ '--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
2581
+ '--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
2582
+ '--dd-neo-accordion-border': 'var(--dd-neo-ink)',
2583
+ '--dd-neo-accordion-text': 'var(--dd-neo-ana-4-contrast)',
2584
+ '--dd-neo-accordion-shadow': 'var(--dd-neo-ana-3)',
2585
+ };
2586
+ case AccentEnumColor.White:
2587
+ default:
2588
+ return {
2589
+ '--dd-neo-accordion-bg': 'var(--dd-neo-paper)',
2590
+ '--dd-neo-accordion-panel': 'var(--dd-base-100)',
2591
+ '--dd-neo-accordion-accent': 'var(--dd-neo-ana-6)',
2592
+ '--dd-neo-accordion-border': 'var(--dd-neo-ink)',
2593
+ '--dd-neo-accordion-text': 'var(--dd-neo-ink)',
2594
+ '--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
2595
+ };
2596
+ }
2597
+ }
2598
+ function getNeobrutalAccordionTapeStyle(color) {
2599
+ switch (color) {
2600
+ case AccentEnumColor.Violet:
2601
+ return {
2602
+ '--dd-neo-tape-accent': 'var(--dd-neo-ana-3)',
2603
+ '--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-3) 20%, var(--dd-neo-paper))',
2604
+ '--dd-neo-tape-stripe': 'var(--dd-neo-ana-3)',
2605
+ '--dd-neo-tape-border': 'var(--dd-neo-ink)',
2606
+ '--dd-neo-tape-text': 'var(--dd-neo-ink)',
2607
+ };
2608
+ case AccentEnumColor.Orange:
2609
+ return {
2610
+ '--dd-neo-tape-accent': 'var(--dd-neo-ana-2)',
2611
+ '--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-1) 60%, var(--dd-neo-paper))',
2612
+ '--dd-neo-tape-stripe': 'var(--dd-neo-ana-2)',
2613
+ '--dd-neo-tape-border': 'var(--dd-neo-ink)',
2614
+ '--dd-neo-tape-text': 'var(--dd-neo-ink)',
2615
+ };
2616
+ case AccentEnumColor.Gray:
2617
+ return {
2618
+ '--dd-neo-tape-accent': 'var(--dd-neo-ana-6)',
2619
+ '--dd-neo-tape-bg': 'var(--dd-base-200)',
2620
+ '--dd-neo-tape-stripe': 'var(--dd-neo-ana-6)',
2621
+ '--dd-neo-tape-border': 'var(--dd-neo-ink)',
2622
+ '--dd-neo-tape-text': 'var(--dd-neo-ink)',
2623
+ };
2624
+ case AccentEnumColor.Dark:
2625
+ return {
2626
+ '--dd-neo-tape-accent': 'var(--dd-neo-ana-1)',
2627
+ '--dd-neo-tape-bg': 'var(--dd-neo-ana-4)',
2628
+ '--dd-neo-tape-stripe': 'var(--dd-neo-ana-5)',
2629
+ '--dd-neo-tape-border': 'var(--dd-neo-ink)',
2630
+ '--dd-neo-tape-text': 'var(--dd-neo-ana-4-contrast)',
2631
+ };
2632
+ case AccentEnumColor.White:
2633
+ default:
2634
+ return {
2635
+ '--dd-neo-tape-accent': 'var(--dd-neo-ana-6)',
2636
+ '--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-6) 12%, var(--dd-neo-paper))',
2637
+ '--dd-neo-tape-stripe': 'var(--dd-neo-ana-6)',
2638
+ '--dd-neo-tape-border': 'var(--dd-neo-ink)',
2639
+ '--dd-neo-tape-text': 'var(--dd-neo-ink)',
2640
+ };
2641
+ }
2642
+ }
2643
+
2534
2644
  class DuckDevAccordionNeobrutalComponent {
2535
2645
  content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
2536
2646
  title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
2537
2647
  stampLabel = input.required({ ...(ngDevMode ? { debugName: "stampLabel" } : {}) });
2538
2648
  color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
2649
+ paletteStyle = computed(() => getNeobrutalAccordionStyle(this.color()), { ...(ngDevMode ? { debugName: "paletteStyle" } : {}) });
2539
2650
  isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
2540
2651
  stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
2541
2652
  titleTemplate = computed(() => {
@@ -2550,28 +2661,29 @@ class DuckDevAccordionNeobrutalComponent {
2550
2661
  this.isOpen.update((prev) => !prev);
2551
2662
  }
2552
2663
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2553
- 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 });
2664
+ 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()\" [ngStyle]=\"paletteStyle()\">\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{display:block;background:var(--dd-neo-accordion-bg);border:4px solid var(--dd-neo-accordion-border);box-shadow:10px 10px 0 var(--dd-neo-accordion-shadow);overflow:clip;color:var(--dd-neo-accordion-text)}.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-neo-accordion-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-accordion-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-neo-accordion-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-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-neo-accordion-border);transform:rotate(-4deg)}.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-neo-accordion-border);background:color-mix(in srgb,var(--dd-neo-accordion-accent) 14%,var(--dd-neo-accordion-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-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-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-neo-accordion-accent) 20%,var(--dd-neo-paper));box-shadow:2px 2px 0 var(--dd-neo-accordion-accent)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-neo-accordion-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-neo-accordion-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-neo-accordion-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:10px 10px 0 var(--dd-neo-accordion-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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2554
2665
  }
2555
2666
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
2556
2667
  type: Component,
2557
- 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"] }]
2668
+ args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\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{display:block;background:var(--dd-neo-accordion-bg);border:4px solid var(--dd-neo-accordion-border);box-shadow:10px 10px 0 var(--dd-neo-accordion-shadow);overflow:clip;color:var(--dd-neo-accordion-text)}.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-neo-accordion-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-accordion-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-neo-accordion-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-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-neo-accordion-border);transform:rotate(-4deg)}.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-neo-accordion-border);background:color-mix(in srgb,var(--dd-neo-accordion-accent) 14%,var(--dd-neo-accordion-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-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-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-neo-accordion-accent) 20%,var(--dd-neo-paper));box-shadow:2px 2px 0 var(--dd-neo-accordion-accent)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-neo-accordion-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-neo-accordion-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-neo-accordion-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:10px 10px 0 var(--dd-neo-accordion-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"] }]
2558
2669
  }], 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 }] }] } });
2559
2670
 
2560
2671
  class DuckDevAccordionNeobrutalTapeComponent {
2561
2672
  content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
2562
2673
  title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
2563
2674
  color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
2675
+ paletteStyle = computed(() => getNeobrutalAccordionTapeStyle(this.color()), { ...(ngDevMode ? { debugName: "paletteStyle" } : {}) });
2564
2676
  isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
2565
2677
  stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
2566
2678
  toggle() {
2567
2679
  this.isOpen.update((prev) => !prev);
2568
2680
  }
2569
2681
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2570
- 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 });
2682
+ 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()\" [ngStyle]=\"paletteStyle()\">\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{display:block;position:relative}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);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-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-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-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-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);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-neo-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}@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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2571
2683
  }
2572
2684
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
2573
2685
  type: Component,
2574
- 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"] }]
2686
+ args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\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{display:block;position:relative}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);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-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-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-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-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);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-neo-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}@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"] }]
2575
2687
  }], 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 }] }] } });
2576
2688
 
2577
2689
  class SliderClassic {
@@ -5946,5 +6058,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
5946
6058
  * Generated bundle index. Do not edit.
5947
6059
  */
5948
6060
 
5949
- export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DdFlexDirectionDirective, DdTabPanel, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevAccordionNeobrutalTapeComponent as DuckDevAccordionNeobrutalTape, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSegmentNeobrutalVertical, DuckDevSelectorDrum, DuckDevSelectorOption, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabNeobrutal, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSelectorStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
6061
+ export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalSticker, ButtonNeobrutalTag, ButtonNeobrutalTape, ButtonNeobrutalZigzag, DD_NEO_PALETTES, DdFlexDirectionDirective, DdTabPanel, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevAccordionNeobrutalTapeComponent as DuckDevAccordionNeobrutalTape, DuckDevBreadcrumbClassic, DuckDevBreadcrumbNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevSegmentNeobrutalVertical, DuckDevSelectorDrum, DuckDevSelectorOption, DuckDevSpeakerBubbleClassic, DuckDevSpeakerBubbleNeobrutalSlab, DuckDevSpeakerBubbleNeobrutalTicket, DuckDevSpeakerBubbleOutline, DuckDevSpeakerBubbleSoft, DuckDevTab, DuckDevTabNeobrutal, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, SliderClassic, getClassicSpeakerBubbleStyle, getNeobrutalSelectorStyle, getNeobrutalSpeakerBubbleStyle, useSpeakerBubbleTail };
5950
6062
  //# sourceMappingURL=duck-dev-lib.mjs.map