@lucca-front/ng 21.0.0-rc.8 → 21.0.0

package/fesm2022/lucca-front-ng-callout.mjs

@@ -6,12 +6,12 @@ import { PopoverDirective } from '@lucca-front/ng/popover2';
 
 class CalloutActionsComponent {
     constructor() {
-        this.inline = input(false, { transform: booleanAttribute });
+        this.inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : {}), transform: booleanAttribute });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: CalloutActionsComponent, isStandalone: true, selector: "lu-callout-actions", inputs: { inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-inline": "inline()" }, classAttribute: "callout-content-description-actions" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CalloutActionsComponent, isStandalone: true, selector: "lu-callout-actions", inputs: { inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mod-inline": "inline()" }, classAttribute: "callout-content-description-actions" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lu-callout-actions',
@@ -23,7 +23,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], propDecorators: { inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }] } });
 
 const CalloutStates = ['success', 'warning', 'error'];
 const CalloutStateMap = {
@@ -69,10 +69,10 @@ class CalloutIconPipe {
     transform(state, icon) {
         return getCalloutIcon(state, icon);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: CalloutIconPipe, isStandalone: true, name: "luCalloutIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: CalloutIconPipe, isStandalone: true, name: "luCalloutIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luCalloutIcon',
@@ -81,10 +81,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
 
 class CalloutDisclosureComponent {
     constructor() {
-        this.heading = input.required();
-        this.icon = input();
-        this.palette = input('none');
-        this.size = input('M');
+        this.heading = input.required(...(ngDevMode ? [{ debugName: "heading" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.palette = input('none', ...(ngDevMode ? [{ debugName: "palette" }] : []));
+        this.size = input('M', ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * State is a shorthand to set the icon and the palette to the recommended values for the icon and palette based on
          * the provided state.
@@ -92,18 +92,18 @@ class CalloutDisclosureComponent {
          * If one of the icon or palette inputs are filled along with the state input, their values will have the priority over
          * state (so setting state to success and palette to warning will make the palette warning)
          */
-        this.state = input();
-        this.open = input(false, { transform: booleanAttribute });
+        this.state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
+        this.open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
         this.calloutPalette = computed(() => {
             return getCalloutPalette(this.state(), this.palette());
-        });
+        }, ...(ngDevMode ? [{ debugName: "calloutPalette" }] : []));
         this.calloutClasses = computed(() => {
             const palette = this.calloutPalette();
             return {
                 [`mod-${this.size()}`]: !!this.size(),
                 [`palette-${palette}`]: !!palette,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "calloutClasses" }] : []));
         this.openChange = output();
     }
     onToggle(event) {
@@ -111,19 +111,19 @@ class CalloutDisclosureComponent {
             this.openChange.emit(event.target.open);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutDisclosureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CalloutDisclosureComponent, isStandalone: true, selector: "lu-callout-disclosure", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, ngImport: i0, template: "@let calloutIcon = state() | luCalloutIcon: icon();\n\n<details\n\tclass=\"calloutDisclosure\"\n\t[class]=\"calloutClasses()\"\n\t[class.mod-iconless]=\"!calloutIcon\"\n\t[open]=\"open()\"\n\t(toggle)=\"onToggle($event)\"\n>\n\t<summary class=\"calloutDisclosure-summary\">\n\t\t@if (calloutIcon) {\n\t\t\t<lu-icon class=\"calloutDisclosure-summary-icon\" [icon]=\"calloutIcon\" />\n\t\t}\n\t\t<span class=\"calloutDisclosure-summary-title\">\n\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t</span>\n\t\t<lu-icon class=\"calloutDisclosure-summary-chevron\" icon=\"arrowChevronBottom\" />\n\t</summary>\n\t<div class=\"calloutDisclosure-details\">\n\t\t<ng-content />\n\t</div>\n</details>\n", styles: ["@layer components{.calloutDisclosure{--components-calloutDisclosure-padding: var(--components-calloutDisclosure-paddingVertical) var(--components-calloutDisclosure-paddingHorizontal);--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);--components-calloutDisclosure-gap: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-50, var(--palettes-neutral-50));color:var(--pr-t-color-text);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300))}.calloutDisclosure a,.calloutDisclosure .link{--commons-text-link-color: var(--pr-t-color-text);--commons-text-link-hover: var(--palettes-neutral-900)}.calloutDisclosure-summary{display:flex;gap:var(--components-calloutDisclosure-gap);padding:var(--components-calloutDisclosure-padding);border-radius:var(--pr-t-border-radius-default);transition:background-color var(--commons-animations-durations-fast) ease;cursor:pointer;z-index:1;position:relative}.calloutDisclosure-summary:hover{background-color:var(--palettes-100, var(--palettes-neutral-100))}.calloutDisclosure-summary:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px;border-radius:6px}.calloutDisclosure-summary:focus-visible~.calloutDisclosure-details{box-shadow:none}.calloutDisclosure-summary::-webkit-details-marker{display:none}.calloutDisclosure-summary-icon{color:var(--palettes-700, var(--palettes-neutral-700))}.calloutDisclosure-summary-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutDisclosure-summary-chevron{align-self:start;color:var(--palettes-neutral-700);margin-inline-start:auto;transition:transform var(--commons-animations-durations-standard) ease}.calloutDisclosure-details{margin-block:0;margin-inline:calc(var(--components-calloutDisclosure-paddingHorizontal) + 2.25rem);padding-block:var(--pr-t-spacings-100);box-shadow:0 -1px 0 0 var(--palettes-200, var(--palettes-neutral-200))}}@layer mods{.calloutDisclosure[open] .calloutDisclosure-summary-chevron{transform:rotate(-180deg)}.calloutDisclosure.mod-S{--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-100);--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);--components-calloutDisclosure-gap: var(--pr-t-spacings-100)}.calloutDisclosure.mod-S .calloutDisclosure-summary-title{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutDisclosure.mod-S .calloutDisclosure-summary-icon,.calloutDisclosure.mod-S .calloutDisclosure-summary-chevron{--icon-size: 1.25rem}.calloutDisclosure.mod-S .calloutDisclosure-details{margin-inline-start:calc(var(--components-calloutDisclosure-paddingHorizontal) + 2rem)}.calloutDisclosure.mod-S .calloutFeedbackList{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutDisclosure.mod-S .calloutFeedbackList .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutDisclosure.mod-S .calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutDisclosure.mod-iconless .calloutDisclosure-summary-icon{display:none}.calloutDisclosure.mod-iconless .calloutDisclosure-details{margin-inline-start:var(--components-calloutDisclosure-paddingHorizontal)}}@layer base{lu-callout-disclosure{display:block}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "pipe", type: CalloutIconPipe, name: "luCalloutIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutDisclosureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CalloutDisclosureComponent, isStandalone: true, selector: "lu-callout-disclosure", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, ngImport: i0, template: "@let calloutIcon = state() | luCalloutIcon: icon();\n\n<details\n\tclass=\"calloutDisclosure\"\n\t[class]=\"calloutClasses()\"\n\t[class.mod-iconless]=\"!calloutIcon\"\n\t[open]=\"open()\"\n\t(toggle)=\"onToggle($event)\"\n>\n\t<summary class=\"calloutDisclosure-summary\">\n\t\t@if (calloutIcon) {\n\t\t\t<lu-icon class=\"calloutDisclosure-summary-icon\" [icon]=\"calloutIcon\" />\n\t\t}\n\t\t<span class=\"calloutDisclosure-summary-title\">\n\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t</span>\n\t\t<lu-icon class=\"calloutDisclosure-summary-chevron\" icon=\"arrowChevronBottom\" />\n\t</summary>\n\t<div class=\"calloutDisclosure-details\">\n\t\t<ng-content />\n\t</div>\n</details>\n", styles: ["@layer components{.calloutDisclosure{--components-calloutDisclosure-padding: var(--components-calloutDisclosure-paddingVertical) var(--components-calloutDisclosure-paddingHorizontal);--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);--components-calloutDisclosure-gap: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-50, var(--palettes-neutral-50));color:var(--pr-t-color-text);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300))}.calloutDisclosure a,.calloutDisclosure .link{--commons-text-link-color: var(--pr-t-color-text);--commons-text-link-hover: var(--palettes-neutral-900)}.calloutDisclosure-summary{display:flex;gap:var(--components-calloutDisclosure-gap);padding:var(--components-calloutDisclosure-padding);border-radius:var(--pr-t-border-radius-default);transition:background-color var(--commons-animations-durations-fast) ease;cursor:pointer;z-index:1;position:relative}.calloutDisclosure-summary:hover{background-color:var(--palettes-100, var(--palettes-neutral-100))}.calloutDisclosure-summary:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px;border-radius:6px}.calloutDisclosure-summary:focus-visible~.calloutDisclosure-details{box-shadow:none}.calloutDisclosure-summary::-webkit-details-marker{display:none}.calloutDisclosure-summary-icon{color:var(--palettes-700, var(--palettes-neutral-700))}.calloutDisclosure-summary-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutDisclosure-summary-chevron{align-self:start;color:var(--palettes-neutral-700);margin-inline-start:auto;transition:transform var(--commons-animations-durations-standard) ease}.calloutDisclosure-details{margin-block:0;margin-inline:calc(var(--components-calloutDisclosure-paddingHorizontal) + 2.25rem);padding-block:var(--pr-t-spacings-100);box-shadow:0 -1px 0 0 var(--palettes-200, var(--palettes-neutral-200))}}@layer mods{.calloutDisclosure[open] .calloutDisclosure-summary-chevron{transform:rotate(-180deg)}.calloutDisclosure.mod-S{--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-100);--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);--components-calloutDisclosure-gap: var(--pr-t-spacings-100)}.calloutDisclosure.mod-S .calloutDisclosure-summary-title{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutDisclosure.mod-S .calloutDisclosure-summary-icon,.calloutDisclosure.mod-S .calloutDisclosure-summary-chevron{--icon-size: 1.25rem}.calloutDisclosure.mod-S .calloutDisclosure-details{margin-inline-start:calc(var(--components-calloutDisclosure-paddingHorizontal) + 2rem)}.calloutDisclosure.mod-S .calloutFeedbackList{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S)}.calloutDisclosure.mod-S .calloutFeedbackList .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.calloutDisclosure.mod-S .calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutDisclosure.mod-S .calloutFeedbackList .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutDisclosure.mod-S .calloutFeedbackList{--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutDisclosure.mod-iconless .calloutDisclosure-summary-icon{display:none}.calloutDisclosure.mod-iconless .calloutDisclosure-details{margin-inline-start:var(--components-calloutDisclosure-paddingHorizontal)}}@layer base{lu-callout-disclosure{display:block}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "pipe", type: CalloutIconPipe, name: "luCalloutIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutDisclosureComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutDisclosureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-callout-disclosure', imports: [IconComponent, PortalDirective, CalloutIconPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let calloutIcon = state() | luCalloutIcon: icon();\n\n<details\n\tclass=\"calloutDisclosure\"\n\t[class]=\"calloutClasses()\"\n\t[class.mod-iconless]=\"!calloutIcon\"\n\t[open]=\"open()\"\n\t(toggle)=\"onToggle($event)\"\n>\n\t<summary class=\"calloutDisclosure-summary\">\n\t\t@if (calloutIcon) {\n\t\t\t<lu-icon class=\"calloutDisclosure-summary-icon\" [icon]=\"calloutIcon\" />\n\t\t}\n\t\t<span class=\"calloutDisclosure-summary-title\">\n\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t</span>\n\t\t<lu-icon class=\"calloutDisclosure-summary-chevron\" icon=\"arrowChevronBottom\" />\n\t</summary>\n\t<div class=\"calloutDisclosure-details\">\n\t\t<ng-content />\n\t</div>\n</details>\n", styles: ["@layer components{.calloutDisclosure{--components-calloutDisclosure-padding: var(--components-calloutDisclosure-paddingVertical) var(--components-calloutDisclosure-paddingHorizontal);--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);--components-calloutDisclosure-gap: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-50, var(--palettes-neutral-50));color:var(--pr-t-color-text);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300))}.calloutDisclosure a,.calloutDisclosure .link{--commons-text-link-color: var(--pr-t-color-text);--commons-text-link-hover: var(--palettes-neutral-900)}.calloutDisclosure-summary{display:flex;gap:var(--components-calloutDisclosure-gap);padding:var(--components-calloutDisclosure-padding);border-radius:var(--pr-t-border-radius-default);transition:background-color var(--commons-animations-durations-fast) ease;cursor:pointer;z-index:1;position:relative}.calloutDisclosure-summary:hover{background-color:var(--palettes-100, var(--palettes-neutral-100))}.calloutDisclosure-summary:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px;border-radius:6px}.calloutDisclosure-summary:focus-visible~.calloutDisclosure-details{box-shadow:none}.calloutDisclosure-summary::-webkit-details-marker{display:none}.calloutDisclosure-summary-icon{color:var(--palettes-700, var(--palettes-neutral-700))}.calloutDisclosure-summary-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutDisclosure-summary-chevron{align-self:start;color:var(--palettes-neutral-700);margin-inline-start:auto;transition:transform var(--commons-animations-durations-standard) ease}.calloutDisclosure-details{margin-block:0;margin-inline:calc(var(--components-calloutDisclosure-paddingHorizontal) + 2.25rem);padding-block:var(--pr-t-spacings-100);box-shadow:0 -1px 0 0 var(--palettes-200, var(--palettes-neutral-200))}}@layer mods{.calloutDisclosure[open] .calloutDisclosure-summary-chevron{transform:rotate(-180deg)}.calloutDisclosure.mod-S{--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-100);--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);--components-calloutDisclosure-gap: var(--pr-t-spacings-100)}.calloutDisclosure.mod-S .calloutDisclosure-summary-title{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutDisclosure.mod-S .calloutDisclosure-summary-icon,.calloutDisclosure.mod-S .calloutDisclosure-summary-chevron{--icon-size: 1.25rem}.calloutDisclosure.mod-S .calloutDisclosure-details{margin-inline-start:calc(var(--components-calloutDisclosure-paddingHorizontal) + 2rem)}.calloutDisclosure.mod-S .calloutFeedbackList{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutDisclosure.mod-S .calloutFeedbackList .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutDisclosure.mod-S .calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutDisclosure.mod-iconless .calloutDisclosure-summary-icon{display:none}.calloutDisclosure.mod-iconless .calloutDisclosure-details{margin-inline-start:var(--components-calloutDisclosure-paddingHorizontal)}}@layer base{lu-callout-disclosure{display:block}}\n"] }]
-        }] });
+            args: [{ selector: 'lu-callout-disclosure', imports: [IconComponent, PortalDirective, CalloutIconPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let calloutIcon = state() | luCalloutIcon: icon();\n\n<details\n\tclass=\"calloutDisclosure\"\n\t[class]=\"calloutClasses()\"\n\t[class.mod-iconless]=\"!calloutIcon\"\n\t[open]=\"open()\"\n\t(toggle)=\"onToggle($event)\"\n>\n\t<summary class=\"calloutDisclosure-summary\">\n\t\t@if (calloutIcon) {\n\t\t\t<lu-icon class=\"calloutDisclosure-summary-icon\" [icon]=\"calloutIcon\" />\n\t\t}\n\t\t<span class=\"calloutDisclosure-summary-title\">\n\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t</span>\n\t\t<lu-icon class=\"calloutDisclosure-summary-chevron\" icon=\"arrowChevronBottom\" />\n\t</summary>\n\t<div class=\"calloutDisclosure-details\">\n\t\t<ng-content />\n\t</div>\n</details>\n", styles: ["@layer components{.calloutDisclosure{--components-calloutDisclosure-padding: var(--components-calloutDisclosure-paddingVertical) var(--components-calloutDisclosure-paddingHorizontal);--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-150);--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-100);--components-calloutDisclosure-gap: var(--pr-t-spacings-150);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-50, var(--palettes-neutral-50));color:var(--pr-t-color-text);box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300))}.calloutDisclosure a,.calloutDisclosure .link{--commons-text-link-color: var(--pr-t-color-text);--commons-text-link-hover: var(--palettes-neutral-900)}.calloutDisclosure-summary{display:flex;gap:var(--components-calloutDisclosure-gap);padding:var(--components-calloutDisclosure-padding);border-radius:var(--pr-t-border-radius-default);transition:background-color var(--commons-animations-durations-fast) ease;cursor:pointer;z-index:1;position:relative}.calloutDisclosure-summary:hover{background-color:var(--palettes-100, var(--palettes-neutral-100))}.calloutDisclosure-summary:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:3px;border-radius:6px}.calloutDisclosure-summary:focus-visible~.calloutDisclosure-details{box-shadow:none}.calloutDisclosure-summary::-webkit-details-marker{display:none}.calloutDisclosure-summary-icon{color:var(--palettes-700, var(--palettes-neutral-700))}.calloutDisclosure-summary-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutDisclosure-summary-chevron{align-self:start;color:var(--palettes-neutral-700);margin-inline-start:auto;transition:transform var(--commons-animations-durations-standard) ease}.calloutDisclosure-details{margin-block:0;margin-inline:calc(var(--components-calloutDisclosure-paddingHorizontal) + 2.25rem);padding-block:var(--pr-t-spacings-100);box-shadow:0 -1px 0 0 var(--palettes-200, var(--palettes-neutral-200))}}@layer mods{.calloutDisclosure[open] .calloutDisclosure-summary-chevron{transform:rotate(-180deg)}.calloutDisclosure.mod-S{--components-calloutDisclosure-paddingHorizontal: var(--pr-t-spacings-100);--components-calloutDisclosure-paddingVertical: var(--pr-t-spacings-75);--components-calloutDisclosure-gap: var(--pr-t-spacings-100)}.calloutDisclosure.mod-S .calloutDisclosure-summary-title{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutDisclosure.mod-S .calloutDisclosure-summary-icon,.calloutDisclosure.mod-S .calloutDisclosure-summary-chevron{--icon-size: 1.25rem}.calloutDisclosure.mod-S .calloutDisclosure-details{margin-inline-start:calc(var(--components-calloutDisclosure-paddingHorizontal) + 2rem)}.calloutDisclosure.mod-S .calloutFeedbackList{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S)}.calloutDisclosure.mod-S .calloutFeedbackList .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.calloutDisclosure.mod-S .calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutDisclosure.mod-S .calloutFeedbackList .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutDisclosure.mod-S .calloutFeedbackList{--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutDisclosure.mod-iconless .calloutDisclosure-summary-icon{display:none}.calloutDisclosure.mod-iconless .calloutDisclosure-details{margin-inline-start:var(--components-calloutDisclosure-paddingHorizontal)}}@layer base{lu-callout-disclosure{display:block}}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
 
 class CalloutFeedbackItemDescriptionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutFeedbackItemDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: CalloutFeedbackItemDescriptionDirective, isStandalone: true, selector: "lu-feedback-item-description", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutFeedbackItemDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: CalloutFeedbackItemDescriptionDirective, isStandalone: true, selector: "lu-feedback-item-description", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutFeedbackItemDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutFeedbackItemDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -131,67 +131,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                 }]
         }] });
 class CalloutFeedbackItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutFeedbackItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: CalloutFeedbackItemComponent, isStandalone: true, selector: "li[lu-callout-feedback-item]", host: { classAttribute: "calloutFeedbackList-item" }, ngImport: i0, template: "<span class=\"calloutFeedbackList-item-description\">\n\t<ng-content select=\"lu-feedback-item-description\" />\n</span>\n<div class=\"calloutFeedbackList-item-actions\">\n\t<ng-content select=\"[lu-feedback-item-action]\" />\n</div>\n", styles: ["@layer components{.calloutFeedbackList{--components-calloutFeedbackList-font: var(--pr-t-font-body-M);--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-M-lineHeight);margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;font:var(--components-calloutFeedbackList-font);font-size:var(--components-calloutFeedbackList-fontSize);line-height:var(--components-calloutFeedbackList-lineHeight);gap:var(--components-calloutFeedbackList-gap)}.calloutFeedbackList .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList-item{display:flex;flex-direction:column;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions{display:inline-flex;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions:empty{display:none}}@layer mods{.calloutFeedbackList.mod-S{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList.mod-S .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutFeedbackItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: CalloutFeedbackItemComponent, isStandalone: true, selector: "li[lu-callout-feedback-item]", host: { classAttribute: "calloutFeedbackList-item" }, ngImport: i0, template: "<span class=\"calloutFeedbackList-item-description\">\n\t<ng-content select=\"lu-feedback-item-description\" />\n</span>\n<div class=\"calloutFeedbackList-item-actions\">\n\t<ng-content select=\"[lu-feedback-item-action]\" />\n</div>\n", styles: ["@layer components{.calloutFeedbackList{--components-calloutFeedbackList-font: var(--pr-t-font-body-M);--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-M-lineHeight);margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;font:var(--components-calloutFeedbackList-font);font-size:var(--components-calloutFeedbackList-fontSize);line-height:var(--components-calloutFeedbackList-lineHeight);gap:var(--components-calloutFeedbackList-gap)}.calloutFeedbackList .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList .button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList-item{display:flex;flex-direction:column;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions{display:inline-flex;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions:empty{display:none}}@layer mods{.calloutFeedbackList.mod-S{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S)}.calloutFeedbackList.mod-S .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.calloutFeedbackList.mod-S .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S{--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutFeedbackItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutFeedbackItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[lu-callout-feedback-item]', imports: [], host: {
                         class: 'calloutFeedbackList-item',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"calloutFeedbackList-item-description\">\n\t<ng-content select=\"lu-feedback-item-description\" />\n</span>\n<div class=\"calloutFeedbackList-item-actions\">\n\t<ng-content select=\"[lu-feedback-item-action]\" />\n</div>\n", styles: ["@layer components{.calloutFeedbackList{--components-calloutFeedbackList-font: var(--pr-t-font-body-M);--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-M-lineHeight);margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;font:var(--components-calloutFeedbackList-font);font-size:var(--components-calloutFeedbackList-fontSize);line-height:var(--components-calloutFeedbackList-lineHeight);gap:var(--components-calloutFeedbackList-gap)}.calloutFeedbackList .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList-item{display:flex;flex-direction:column;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions{display:inline-flex;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions:empty{display:none}}@layer mods{.calloutFeedbackList.mod-S{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList.mod-S .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"calloutFeedbackList-item-description\">\n\t<ng-content select=\"lu-feedback-item-description\" />\n</span>\n<div class=\"calloutFeedbackList-item-actions\">\n\t<ng-content select=\"[lu-feedback-item-action]\" />\n</div>\n", styles: ["@layer components{.calloutFeedbackList{--components-calloutFeedbackList-font: var(--pr-t-font-body-M);--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-M-lineHeight);margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;font:var(--components-calloutFeedbackList-font);font-size:var(--components-calloutFeedbackList-fontSize);line-height:var(--components-calloutFeedbackList-lineHeight);gap:var(--components-calloutFeedbackList-gap)}.calloutFeedbackList .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList .button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList-item{display:flex;flex-direction:column;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions{display:inline-flex;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions:empty{display:none}}@layer mods{.calloutFeedbackList.mod-S{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S)}.calloutFeedbackList.mod-S .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.calloutFeedbackList.mod-S .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S{--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}}\n"] }]
         }] });
 
 class CalloutFeedbackListComponent {
     #luClass;
     constructor() {
         this.#luClass = inject(LuClass);
-        this.palette = input();
-        this.size = input();
+        this.palette = input(...(ngDevMode ? [undefined, { debugName: "palette" }] : []));
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
         _effectWithDeps([this.palette, this.size], (palette, size) => {
             this.#luClass.setState({ [`palette-${palette}`]: !!palette, [`mod-${size}`]: !!size });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutFeedbackListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.2", type: CalloutFeedbackListComponent, isStandalone: true, selector: "ul[lu-callout-feedback-list]", inputs: { palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "calloutFeedbackList" }, providers: [LuClass], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{.calloutFeedbackList{--components-calloutFeedbackList-font: var(--pr-t-font-body-M);--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-M-lineHeight);margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;font:var(--components-calloutFeedbackList-font);font-size:var(--components-calloutFeedbackList-fontSize);line-height:var(--components-calloutFeedbackList-lineHeight);gap:var(--components-calloutFeedbackList-gap)}.calloutFeedbackList .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList-item{display:flex;flex-direction:column;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions{display:inline-flex;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions:empty{display:none}}@layer mods{.calloutFeedbackList.mod-S{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList.mod-S .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutFeedbackListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CalloutFeedbackListComponent, isStandalone: true, selector: "ul[lu-callout-feedback-list]", inputs: { palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "calloutFeedbackList" }, providers: [LuClass], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{.calloutFeedbackList{--components-calloutFeedbackList-font: var(--pr-t-font-body-M);--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-M-lineHeight);margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;font:var(--components-calloutFeedbackList-font);font-size:var(--components-calloutFeedbackList-fontSize);line-height:var(--components-calloutFeedbackList-lineHeight);gap:var(--components-calloutFeedbackList-gap)}.calloutFeedbackList .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList .button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList-item{display:flex;flex-direction:column;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions{display:inline-flex;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions:empty{display:none}}@layer mods{.calloutFeedbackList.mod-S{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S)}.calloutFeedbackList.mod-S .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.calloutFeedbackList.mod-S .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S{--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutFeedbackListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutFeedbackListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ul[lu-callout-feedback-list]', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'calloutFeedbackList',
-                    }, providers: [LuClass], encapsulation: ViewEncapsulation.None, styles: ["@layer components{.calloutFeedbackList{--components-calloutFeedbackList-font: var(--pr-t-font-body-M);--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-M-lineHeight);margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;font:var(--components-calloutFeedbackList-font);font-size:var(--components-calloutFeedbackList-fontSize);line-height:var(--components-calloutFeedbackList-lineHeight);gap:var(--components-calloutFeedbackList-gap)}.calloutFeedbackList .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList-item{display:flex;flex-direction:column;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions{display:inline-flex;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions:empty{display:none}}@layer mods{.calloutFeedbackList.mod-S{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList.mod-S .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}\n"] }]
-        }], ctorParameters: () => [] });
+                    }, providers: [LuClass], encapsulation: ViewEncapsulation.None, styles: ["@layer components{.calloutFeedbackList{--components-calloutFeedbackList-font: var(--pr-t-font-body-M);--components-calloutFeedbackList-gap: var(--pr-t-spacings-150);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-M-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-M-lineHeight);margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;font:var(--components-calloutFeedbackList-font);font-size:var(--components-calloutFeedbackList-fontSize);line-height:var(--components-calloutFeedbackList-lineHeight);gap:var(--components-calloutFeedbackList-gap)}.calloutFeedbackList .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList .button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.calloutFeedbackList-item{display:flex;flex-direction:column;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions{display:inline-flex;gap:var(--pr-t-spacings-100)}.calloutFeedbackList-item-actions:empty{display:none}}@layer mods{.calloutFeedbackList.mod-S{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S)}.calloutFeedbackList.mod-S .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.calloutFeedbackList.mod-S .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutFeedbackList.mod-S{--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class CalloutPopoverComponent {
     constructor() {
         /**
          * Debounce for the popover to open (mouse will have to be on the element fox openDelay milliseconds for popover to show)
          */
-        this.openDelay = input(50, { transform: numberAttribute });
+        this.openDelay = input(50, { ...(ngDevMode ? { debugName: "openDelay" } : {}), transform: numberAttribute });
         /**
          * Debounce for the popover to close (mouse will have to be out of both popover and trigger for closeDelay milliseconds for it to close)
          */
-        this.closeDelay = input(500, { transform: numberAttribute });
+        this.closeDelay = input(500, { ...(ngDevMode ? { debugName: "closeDelay" } : {}), transform: numberAttribute });
         /**
          * Label (visual only) to put inside the button, often used to show just a number
          */
-        this.buttonLabel = input();
+        this.buttonLabel = input(...(ngDevMode ? [undefined, { debugName: "buttonLabel" }] : []));
         /**
          * Alternative for the button
          */
-        this.buttonAlt = input('');
-        this.headingHiddenIfSingleItem = input(false, { transform: booleanAttribute });
+        this.buttonAlt = input('', ...(ngDevMode ? [{ debugName: "buttonAlt" }] : []));
+        this.headingHiddenIfSingleItem = input(false, { ...(ngDevMode ? { debugName: "headingHiddenIfSingleItem" } : {}), transform: booleanAttribute });
         /**
          * Palette for both the button and the popover content
          */
-        this.palette = input('none');
+        this.palette = input('none', ...(ngDevMode ? [{ debugName: "palette" }] : []));
         /**
          * Size for both button and popover content
          */
-        this.size = input();
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
         /**
          * Icon shows in button and next to popover's title
          */
-        this.icon = input();
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
         /**
          * State is a shorthand to set the icon and the palette to the recommended values for the icon and palette based on
          * the provided state.
@@ -199,38 +199,38 @@ class CalloutPopoverComponent {
          * If one of the icon or palette inputs are filled along with the state input, their values will have the priority over
          * state (so setting state to success and palette to warning will make the palette warning)
          */
-        this.state = input();
+        this.state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
         /**
          * Heading for the details popover
          */
-        this.heading = input();
-        this.feedbackItems = contentChildren(CalloutFeedbackItemComponent, { descendants: true });
+        this.heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
+        this.feedbackItems = contentChildren(CalloutFeedbackItemComponent, { ...(ngDevMode ? { debugName: "feedbackItems" } : {}), descendants: true });
         this.contentSize = computed(() => {
             const size = this.size();
             return size === 'XS' ? 'S' : size;
-        });
+        }, ...(ngDevMode ? [{ debugName: "contentSize" }] : []));
         this.calloutOverlayClasses = computed(() => ({
             [`mod-${this.contentSize()}`]: !!this.contentSize(),
-        }));
-        this.calloutPalette = computed(() => getCalloutPalette(this.state(), this.palette()));
+        }), ...(ngDevMode ? [{ debugName: "calloutOverlayClasses" }] : []));
+        this.calloutPalette = computed(() => getCalloutPalette(this.state(), this.palette()), ...(ngDevMode ? [{ debugName: "calloutPalette" }] : []));
         this.calloutClasses = computed(() => {
             const palette = this.calloutPalette();
             return {
                 [`mod-${this.size()}`]: !!this.size(),
                 [`palette-${palette}`]: !!palette,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "calloutClasses" }] : []));
         this.calloutOverlayHeadClasses = computed(() => ({
             [`palette-${this.calloutPalette()}`]: !!this.calloutPalette(),
-        }));
+        }), ...(ngDevMode ? [{ debugName: "calloutOverlayHeadClasses" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CalloutPopoverComponent, isStandalone: true, selector: "lu-callout-popover", inputs: { openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonAlt: { classPropertyName: "buttonAlt", publicName: "buttonAlt", isSignal: true, isRequired: false, transformFunction: null }, headingHiddenIfSingleItem: { classPropertyName: "headingHiddenIfSingleItem", publicName: "headingHiddenIfSingleItem", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "feedbackItems", predicate: CalloutFeedbackItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let calloutIcon = state() | luCalloutIcon: icon();\n\n<button\n\ttype=\"button\"\n\tclass=\"calloutPopover\"\n\t[class]=\"calloutClasses()\"\n\t[luPopover2]=\"overlayContentRef\"\n\t[luPopoverTrigger]=\"'click+hover'\"\n\t[luPopoverOpenDelay]=\"openDelay()\"\n\t[luPopoverCloseDelay]=\"closeDelay()\"\n\t#overlayOriginRef\n>\n\t@if (calloutIcon) {\n\t\t<lu-icon class=\"calloutPopover-icon\" [icon]=\"calloutIcon\" />\n\t}\n\t<span class=\"calloutPopover-content\" aria-hidden=\"true\">{{ buttonLabel() }}</span>\n\t<span class=\"pr-u-mask\">{{ buttonAlt() || buttonLabel() }}</span>\n</button>\n<ng-template #overlayContentRef>\n\t<div class=\"lu-popover-content calloutPopover-overlay\" [class]=\"calloutOverlayClasses()\">\n\t\t@if (calloutIcon) {\n\t\t\t<div class=\"pr-u-flexShrink0\">\n\t\t\t\t<lu-icon class=\"calloutPopover-overlay-icon\" [class]=\"calloutOverlayHeadClasses()\" [icon]=\"calloutIcon\" />\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"pr-u-flexGrow1\">\n\t\t\t@if (heading()) {\n\t\t\t\t@if (!headingHiddenIfSingleItem() || feedbackItems().length !== 1) {\n\t\t\t\t\t<div class=\"calloutPopover-overlay-head\">\n\t\t\t\t\t\t<strong class=\"calloutPopover-overlay-head-title\">\n\t\t\t\t\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t\t\t\t\t</strong>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div class=\"calloutPopover-overlay-content\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: ["@layer components{.calloutPopover{display:inline-flex;gap:var(--pr-t-spacings-75);align-items:center;padding:var(--pr-t-spacings-100);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-50, var(--palettes-neutral-50));border:0;box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));cursor:pointer}.calloutPopover:hover{background-color:var(--palettes-100, var(--palettes-neutral-100))}.calloutPopover:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.calloutPopover-content:empty{display:none}.calloutPopover-icon{color:var(--palettes-700, var(--palettes-neutral-700))}.calloutPopover-overlay{inline-size:var(--components-calloutPopover-width);max-inline-size:100vw;display:flex;gap:var(--pr-t-spacings-100)}.calloutPopover-overlay-head-title{display:block;font:var(--pr-t-font-body-M);font-weight:var(--pr-t-font-fontWeight-semibold);padding:0;margin:0;padding-block-end:var(--pr-t-spacings-100);margin-block-end:var(--pr-t-spacings-100);border-block-end:var(--commons-divider-width) solid var(--palettes-neutral-200)}.calloutPopover-overlay-icon{--icon-size: 1.5rem;color:var(--palettes-700, var(--palettes-neutral-700))}.calloutPopover-overlay-content{margin-block-end:var(--pr-t-spacings-100)}:root{--components-calloutPopover-width: 30rem}}@layer mods{.calloutPopover.mod-S{font:var(--pr-t-font-body-S);padding:var(--pr-t-spacings-75)}.calloutPopover.mod-S .calloutPopover-icon{--icon-size: 1.25rem}.calloutPopover.mod-XS{font:var(--pr-t-font-body-XS);padding-block:var(--pr-t-spacings-25);padding-inline:var(--pr-t-spacings-50);gap:var(--pr-t-spacings-50);border-radius:var(--pr-t-border-radius-small)}.calloutPopover.mod-XS .calloutPopover-icon{--icon-size: 1rem}}@layer mods{.calloutPopover-overlay.mod-S{--components-calloutPopover-width: 20rem}.calloutPopover-overlay.mod-S .calloutPopover-overlay-icon{--icon-size: 1.25rem}.calloutPopover-overlay.mod-S .calloutPopover-overlay-head-title{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutPopover-overlay.mod-S .calloutFeedbackList{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutPopover-overlay.mod-iconless .calloutPopover-overlay-icon{display:none}}@layer base{lu-callout-popover{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["luPopover2", "luPopoverPosition", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "pipe", type: CalloutIconPipe, name: "luCalloutIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CalloutPopoverComponent, isStandalone: true, selector: "lu-callout-popover", inputs: { openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonAlt: { classPropertyName: "buttonAlt", publicName: "buttonAlt", isSignal: true, isRequired: false, transformFunction: null }, headingHiddenIfSingleItem: { classPropertyName: "headingHiddenIfSingleItem", publicName: "headingHiddenIfSingleItem", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "feedbackItems", predicate: CalloutFeedbackItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let calloutIcon = state() | luCalloutIcon: icon();\n\n<button\n\ttype=\"button\"\n\tclass=\"calloutPopover\"\n\t[class]=\"calloutClasses()\"\n\t[luPopover2]=\"overlayContentRef\"\n\t[luPopoverTrigger]=\"'click+hover'\"\n\t[luPopoverOpenDelay]=\"openDelay()\"\n\t[luPopoverCloseDelay]=\"closeDelay()\"\n\t#overlayOriginRef\n>\n\t@if (calloutIcon) {\n\t\t<lu-icon class=\"calloutPopover-icon\" [icon]=\"calloutIcon\" />\n\t}\n\t<span class=\"calloutPopover-content\" aria-hidden=\"true\">{{ buttonLabel() }}</span>\n\t<span class=\"pr-u-mask\">{{ buttonAlt() || buttonLabel() }}</span>\n</button>\n<ng-template #overlayContentRef>\n\t<div class=\"lu-popover-content calloutPopover-overlay\" [class]=\"calloutOverlayClasses()\">\n\t\t@if (calloutIcon) {\n\t\t\t<div class=\"pr-u-flexShrink0\">\n\t\t\t\t<lu-icon class=\"calloutPopover-overlay-icon\" [class]=\"calloutOverlayHeadClasses()\" [icon]=\"calloutIcon\" />\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"pr-u-flexGrow1\">\n\t\t\t@if (heading()) {\n\t\t\t\t@if (!headingHiddenIfSingleItem() || feedbackItems().length !== 1) {\n\t\t\t\t\t<div class=\"calloutPopover-overlay-head\">\n\t\t\t\t\t\t<strong class=\"calloutPopover-overlay-head-title\">\n\t\t\t\t\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t\t\t\t\t</strong>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div class=\"calloutPopover-overlay-content\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: ["@layer components{.calloutPopover{display:inline-flex;gap:var(--pr-t-spacings-75);align-items:center;padding:var(--pr-t-spacings-100);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-50, var(--palettes-neutral-50));border:0;box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));cursor:pointer}.calloutPopover:hover{background-color:var(--palettes-100, var(--palettes-neutral-100))}.calloutPopover:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.calloutPopover-content:empty{display:none}.calloutPopover-icon{color:var(--palettes-700, var(--palettes-neutral-700))}.calloutPopover-overlay{inline-size:var(--components-calloutPopover-width);max-inline-size:100vw;display:flex;gap:var(--pr-t-spacings-100)}.calloutPopover-overlay-head-title{display:block;font:var(--pr-t-font-body-M);font-weight:var(--pr-t-font-fontWeight-semibold);padding:0;margin:0;padding-block-end:var(--pr-t-spacings-100);margin-block-end:var(--pr-t-spacings-100);border-block-end:var(--commons-divider-width) solid var(--palettes-neutral-200)}.calloutPopover-overlay-icon{--icon-size: 1.5rem;color:var(--palettes-700, var(--palettes-neutral-700))}.calloutPopover-overlay-content{margin-block-end:var(--pr-t-spacings-100)}:root{--components-calloutPopover-width: 30rem}}@layer mods{.calloutPopover.mod-S{font:var(--pr-t-font-body-S);padding:var(--pr-t-spacings-75)}.calloutPopover.mod-S .calloutPopover-icon{--icon-size: 1.25rem}.calloutPopover.mod-XS{font:var(--pr-t-font-body-XS);padding-block:var(--pr-t-spacings-25);padding-inline:var(--pr-t-spacings-50);gap:var(--pr-t-spacings-50);border-radius:var(--pr-t-border-radius-small)}.calloutPopover.mod-XS .calloutPopover-icon{--icon-size: 1rem}}@layer mods{.calloutPopover-overlay.mod-S{--components-calloutPopover-width: 20rem}.calloutPopover-overlay.mod-S .calloutPopover-overlay-icon{--icon-size: 1.25rem}.calloutPopover-overlay.mod-S .calloutPopover-overlay-head-title{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutPopover-overlay.mod-S .calloutFeedbackList{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutPopover-overlay.mod-S .calloutFeedbackList{--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutPopover-overlay.mod-iconless .calloutPopover-overlay-icon{display:none}}@layer base{lu-callout-popover{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "directive", type: PopoverDirective, selector: "[luPopover2]", inputs: ["luPopover2", "luPopoverPosition", "luPopoverDisabled", "luPopoverTrigger", "customPositions", "luPopoverNoCloseButton", "luPopoverAnchor", "luPopoverOpenDelay", "luPopoverCloseDelay"], outputs: ["luPopoverTriggerChange", "luPopoverClosed", "luPopoverOpened"], exportAs: ["luPopover2"] }, { kind: "pipe", type: CalloutIconPipe, name: "luCalloutIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-callout-popover', imports: [IconComponent, PortalDirective, PopoverDirective, CalloutIconPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let calloutIcon = state() | luCalloutIcon: icon();\n\n<button\n\ttype=\"button\"\n\tclass=\"calloutPopover\"\n\t[class]=\"calloutClasses()\"\n\t[luPopover2]=\"overlayContentRef\"\n\t[luPopoverTrigger]=\"'click+hover'\"\n\t[luPopoverOpenDelay]=\"openDelay()\"\n\t[luPopoverCloseDelay]=\"closeDelay()\"\n\t#overlayOriginRef\n>\n\t@if (calloutIcon) {\n\t\t<lu-icon class=\"calloutPopover-icon\" [icon]=\"calloutIcon\" />\n\t}\n\t<span class=\"calloutPopover-content\" aria-hidden=\"true\">{{ buttonLabel() }}</span>\n\t<span class=\"pr-u-mask\">{{ buttonAlt() || buttonLabel() }}</span>\n</button>\n<ng-template #overlayContentRef>\n\t<div class=\"lu-popover-content calloutPopover-overlay\" [class]=\"calloutOverlayClasses()\">\n\t\t@if (calloutIcon) {\n\t\t\t<div class=\"pr-u-flexShrink0\">\n\t\t\t\t<lu-icon class=\"calloutPopover-overlay-icon\" [class]=\"calloutOverlayHeadClasses()\" [icon]=\"calloutIcon\" />\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"pr-u-flexGrow1\">\n\t\t\t@if (heading()) {\n\t\t\t\t@if (!headingHiddenIfSingleItem() || feedbackItems().length !== 1) {\n\t\t\t\t\t<div class=\"calloutPopover-overlay-head\">\n\t\t\t\t\t\t<strong class=\"calloutPopover-overlay-head-title\">\n\t\t\t\t\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t\t\t\t\t</strong>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div class=\"calloutPopover-overlay-content\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: ["@layer components{.calloutPopover{display:inline-flex;gap:var(--pr-t-spacings-75);align-items:center;padding:var(--pr-t-spacings-100);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-50, var(--palettes-neutral-50));border:0;box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));cursor:pointer}.calloutPopover:hover{background-color:var(--palettes-100, var(--palettes-neutral-100))}.calloutPopover:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.calloutPopover-content:empty{display:none}.calloutPopover-icon{color:var(--palettes-700, var(--palettes-neutral-700))}.calloutPopover-overlay{inline-size:var(--components-calloutPopover-width);max-inline-size:100vw;display:flex;gap:var(--pr-t-spacings-100)}.calloutPopover-overlay-head-title{display:block;font:var(--pr-t-font-body-M);font-weight:var(--pr-t-font-fontWeight-semibold);padding:0;margin:0;padding-block-end:var(--pr-t-spacings-100);margin-block-end:var(--pr-t-spacings-100);border-block-end:var(--commons-divider-width) solid var(--palettes-neutral-200)}.calloutPopover-overlay-icon{--icon-size: 1.5rem;color:var(--palettes-700, var(--palettes-neutral-700))}.calloutPopover-overlay-content{margin-block-end:var(--pr-t-spacings-100)}:root{--components-calloutPopover-width: 30rem}}@layer mods{.calloutPopover.mod-S{font:var(--pr-t-font-body-S);padding:var(--pr-t-spacings-75)}.calloutPopover.mod-S .calloutPopover-icon{--icon-size: 1.25rem}.calloutPopover.mod-XS{font:var(--pr-t-font-body-XS);padding-block:var(--pr-t-spacings-25);padding-inline:var(--pr-t-spacings-50);gap:var(--pr-t-spacings-50);border-radius:var(--pr-t-border-radius-small)}.calloutPopover.mod-XS .calloutPopover-icon{--icon-size: 1rem}}@layer mods{.calloutPopover-overlay.mod-S{--components-calloutPopover-width: 20rem}.calloutPopover-overlay.mod-S .calloutPopover-overlay-icon{--icon-size: 1.25rem}.calloutPopover-overlay.mod-S .calloutPopover-overlay-head-title{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutPopover-overlay.mod-S .calloutFeedbackList{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S);--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutPopover-overlay.mod-iconless .calloutPopover-overlay-icon{display:none}}@layer base{lu-callout-popover{display:inline-flex}}\n"] }]
-        }] });
+            args: [{ selector: 'lu-callout-popover', imports: [IconComponent, PortalDirective, PopoverDirective, CalloutIconPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let calloutIcon = state() | luCalloutIcon: icon();\n\n<button\n\ttype=\"button\"\n\tclass=\"calloutPopover\"\n\t[class]=\"calloutClasses()\"\n\t[luPopover2]=\"overlayContentRef\"\n\t[luPopoverTrigger]=\"'click+hover'\"\n\t[luPopoverOpenDelay]=\"openDelay()\"\n\t[luPopoverCloseDelay]=\"closeDelay()\"\n\t#overlayOriginRef\n>\n\t@if (calloutIcon) {\n\t\t<lu-icon class=\"calloutPopover-icon\" [icon]=\"calloutIcon\" />\n\t}\n\t<span class=\"calloutPopover-content\" aria-hidden=\"true\">{{ buttonLabel() }}</span>\n\t<span class=\"pr-u-mask\">{{ buttonAlt() || buttonLabel() }}</span>\n</button>\n<ng-template #overlayContentRef>\n\t<div class=\"lu-popover-content calloutPopover-overlay\" [class]=\"calloutOverlayClasses()\">\n\t\t@if (calloutIcon) {\n\t\t\t<div class=\"pr-u-flexShrink0\">\n\t\t\t\t<lu-icon class=\"calloutPopover-overlay-icon\" [class]=\"calloutOverlayHeadClasses()\" [icon]=\"calloutIcon\" />\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"pr-u-flexGrow1\">\n\t\t\t@if (heading()) {\n\t\t\t\t@if (!headingHiddenIfSingleItem() || feedbackItems().length !== 1) {\n\t\t\t\t\t<div class=\"calloutPopover-overlay-head\">\n\t\t\t\t\t\t<strong class=\"calloutPopover-overlay-head-title\">\n\t\t\t\t\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t\t\t\t\t</strong>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t}\n\t\t\t<div class=\"calloutPopover-overlay-content\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n", styles: ["@layer components{.calloutPopover{display:inline-flex;gap:var(--pr-t-spacings-75);align-items:center;padding:var(--pr-t-spacings-100);border-radius:var(--pr-t-border-radius-default);background-color:var(--palettes-50, var(--palettes-neutral-50));border:0;box-shadow:0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));cursor:pointer}.calloutPopover:hover{background-color:var(--palettes-100, var(--palettes-neutral-100))}.calloutPopover:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px}.calloutPopover-content:empty{display:none}.calloutPopover-icon{color:var(--palettes-700, var(--palettes-neutral-700))}.calloutPopover-overlay{inline-size:var(--components-calloutPopover-width);max-inline-size:100vw;display:flex;gap:var(--pr-t-spacings-100)}.calloutPopover-overlay-head-title{display:block;font:var(--pr-t-font-body-M);font-weight:var(--pr-t-font-fontWeight-semibold);padding:0;margin:0;padding-block-end:var(--pr-t-spacings-100);margin-block-end:var(--pr-t-spacings-100);border-block-end:var(--commons-divider-width) solid var(--palettes-neutral-200)}.calloutPopover-overlay-icon{--icon-size: 1.5rem;color:var(--palettes-700, var(--palettes-neutral-700))}.calloutPopover-overlay-content{margin-block-end:var(--pr-t-spacings-100)}:root{--components-calloutPopover-width: 30rem}}@layer mods{.calloutPopover.mod-S{font:var(--pr-t-font-body-S);padding:var(--pr-t-spacings-75)}.calloutPopover.mod-S .calloutPopover-icon{--icon-size: 1.25rem}.calloutPopover.mod-XS{font:var(--pr-t-font-body-XS);padding-block:var(--pr-t-spacings-25);padding-inline:var(--pr-t-spacings-50);gap:var(--pr-t-spacings-50);border-radius:var(--pr-t-border-radius-small)}.calloutPopover.mod-XS .calloutPopover-icon{--icon-size: 1rem}}@layer mods{.calloutPopover-overlay.mod-S{--components-calloutPopover-width: 20rem}.calloutPopover-overlay.mod-S .calloutPopover-overlay-icon{--icon-size: 1.25rem}.calloutPopover-overlay.mod-S .calloutPopover-overlay-head-title{font:var(--pr-t-font-body-S);font-weight:var(--pr-t-font-fontWeight-semibold)}.calloutPopover-overlay.mod-S .calloutFeedbackList{--components-calloutFeedbackList-gap: var(--pr-t-spacings-100);--components-calloutFeedbackList-font: var(--pr-t-font-body-S)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.calloutPopover-overlay.mod-S .calloutFeedbackList .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.calloutPopover-overlay.mod-S .calloutFeedbackList{--components-calloutFeedbackList-fontSize: var(--pr-t-font-body-S-fontSize);--components-calloutFeedbackList-lineHeight: var(--pr-t-font-body-S-lineHeight)}.calloutPopover-overlay.mod-iconless .calloutPopover-overlay-icon{display:none}}@layer base{lu-callout-popover{display:inline-flex}}\n"] }]
+        }], propDecorators: { openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], buttonAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonAlt", required: false }] }], headingHiddenIfSingleItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingHiddenIfSingleItem", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], feedbackItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CalloutFeedbackItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
 const Translations = {
     pt: {
@@ -270,16 +270,16 @@ class CalloutComponent {
         /**
          * The title of the callout
          */
-        this.heading = input();
+        this.heading = input(...(ngDevMode ? [undefined, { debugName: "heading" }] : []));
         /**
          * Which palette should be used for the entire callout.
          * Defaults to none (inherits parent palette)
          */
-        this.palette = input('none');
+        this.palette = input('none', ...(ngDevMode ? [{ debugName: "palette" }] : []));
         /**
          * Which size should the callout be? Defaults to medium
          */
-        this.size = input();
+        this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
         /**
          * State is a shorthand to set the icon and the palette to the recommended values for the icon and palette based on
          * the provided state.
@@ -287,33 +287,33 @@ class CalloutComponent {
          * If one of the icon or palette inputs are filled along with the state input, their values will have the priority over
          * state (so setting state to success and palette to warning will make the palette warning)
          */
-        this.state = input();
+        this.state = input(...(ngDevMode ? [undefined, { debugName: "state" }] : []));
         /**
          * Which icon should we display in the callout if any?
          * Defaults to no icon.
          */
-        this.icon = input();
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
         /**
          * Should we display the remove icon?
          */
-        this.removable = input(false, { transform: booleanAttribute });
+        this.removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : {}), transform: booleanAttribute });
         /**
          * Is the callout removed? Works with two way binding too.
          */
-        this.removed = input(false, { transform: booleanAttribute });
+        this.removed = input(false, { ...(ngDevMode ? { debugName: "removed" } : {}), transform: booleanAttribute });
         /**
          * Defines the icon’s alt attribute used for accessibility
          */
-        this.iconAlt = input(null);
+        this.iconAlt = input(null, ...(ngDevMode ? [{ debugName: "iconAlt" }] : []));
         /**
          * Displayed in AI mode
          */
-        this.AI = input(false, { transform: booleanAttribute });
+        this.AI = input(false, { ...(ngDevMode ? { debugName: "AI" } : {}), transform: booleanAttribute });
         /**
          * Emit event when button removed is click
          */
         this.removedChange = output();
-        this.removedRef = linkedSignal(() => this.removed());
+        this.removedRef = linkedSignal(() => this.removed(), ...(ngDevMode ? [{ debugName: "removedRef" }] : []));
         this.calloutClasses = computed(() => {
             const palette = getCalloutPalette(this.state(), this.palette());
             const size = this.size();
@@ -322,17 +322,17 @@ class CalloutComponent {
                 [`mod-${size}`]: !!size,
                 [`palette-${palette}`]: !AI && !!palette,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "calloutClasses" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: CalloutComponent, isStandalone: true, selector: "lu-callout", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removed: { classPropertyName: "removed", publicName: "removed", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: true, isRequired: false, transformFunction: null }, AI: { classPropertyName: "AI", publicName: "AI", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removedChange: "removedChange" }, host: { properties: { "attr.hidden": "removed() ? \"hidden\" : null" } }, ngImport: i0, template: "@if (!removedRef()) {\n\t<div class=\"callout\" [class]=\"calloutClasses()\" [class.mod-AI]=\"AI()\">\n\t\t@if (state() | luCalloutIcon: icon(); as calloutIcon) {\n\t\t\t<div class=\"callout-icon\">\n\t\t\t\t<lu-icon [icon]=\"calloutIcon\" [alt]=\"iconAlt()\" />\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"callout-content\">\n\t\t\t@if (heading()) {\n\t\t\t\t<strong class=\"callout-content-title\">\n\t\t\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t\t\t</strong>\n\t\t\t}\n\t\t\t<div class=\"callout-content-description\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\t\t</div>\n\t\t@if (removable()) {\n\t\t\t<button type=\"button\" class=\"callout-kill\" (click)=\"removedRef.set(true); removedChange.emit(true)\">\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl.close }}</span>\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";@layer components{.callout{--components-callout-gap: var(--pr-t-spacings-150);--components-callout-display: flex;--components-callout-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-callout-font: inherit;--components-callout-kill-size: 1.5rem;--components-callout-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-callout-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));--components-callout-content-description-display: block;--components-callout-content-description-action-marginBlockStart: var(--pr-t-spacings-50);--components-callout-content-description-action-paddingBlock: var(--pr-t-spacings-50);--components-callout-fontSize: inherit;--components-callout-lineHeight: inherit;align-items:flex-start;position:relative;border-radius:var(--pr-t-border-radius-default);background-color:var(--components-callout-backgroundColor);color:var(--pr-t-color-text);box-shadow:var(--components-callout-boxShadow);gap:var(--components-callout-gap);padding:var(--components-callout-padding);font:var(--components-callout-font);font-size:var(--components-callout-fontSize);line-height:var(--components-callout-lineHeight)}.callout:not([hidden]){display:var(--components-callout-display)}.callout a,.callout .link{--commons-text-link-color: var(--pr-t-color-text);--commons-text-link-hover: var(--palettes-neutral-900)}.callout-content{flex:1;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.callout-content-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.callout-content-description{display:var(--components-callout-content-description-display);justify-content:space-between;gap:var(--pr-t-spacings-150);align-items:flex-start}.callout-content-description-actions{display:flex;gap:var(--pr-t-spacings-75);margin-block-start:var(--components-callout-content-description-action-marginBlockStart);padding-block:var(--components-callout-content-description-action-paddingBlock);padding-inline:0}.callout-content-description-actions .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.callout-content-description-actions .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout-icon{display:inline-flex;color:var(--palettes-700, var(--palettes-neutral-700))}.callout-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;color:var(--palettes-neutral-700);text-align:center;transition-duration:var(--commons-animations-durations-fast);transition-property:background-color;block-size:var(--components-callout-kill-size);inline-size:var(--components-callout-kill-size)}.callout-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.callout-kill:before{--icon-content: \"\\e9bf\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;font-size:var(--pr-t-font-body-S-lineHeight)}}@layer mods{.callout.mod-S{--components-callout-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-callout-gap: var(--pr-t-spacings-100);--components-callout-font: var(--pr-t-font-body-S);--components-callout-kill-size: 1.25rem;--components-callout-fontSize: var(--pr-t-font-body-S-fontSize);--components-callout-lineHeight: var(--pr-t-font-body-S-lineHeight)}.callout.mod-S .callout-icon{--icon-size: 1.25rem}.callout.mod-S .callout-content-description-actions .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.callout.mod-S .callout-content-description-actions .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}.callout.mod-AI{--components-callout-boxShadow: var(--pr-t-elevation-shadow-button);--components-callout-backgroundColor: var(--pr-t-elevation-surface-raised)}.callout.mod-AI:before{content:\"\";pointer-events:none;position:absolute;inset:calc(var(--commons-divider-width) * -1);padding:var(--commons-divider-width);background-image:conic-gradient(from 135deg,var(--palettes-brand-400),var(--palettes-AI-500),var(--palettes-brand-400));border-radius:calc(var(--pr-t-border-radius-default) + var(--commons-divider-width));mask:linear-gradient(var(--palettes-neutral-0)) content-box,linear-gradient(var(--palettes-neutral-0));-webkit-mask-composite:xor;mask-composite:exclude}.callout.mod-AI .callout-icon .lucca-icon{background-image:linear-gradient(135deg,var(--palettes-AI-600),var(--palettes-brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.callout:has(.callout-content-description-actions.mod-inline){--components-callout-content-description-display: flex;--components-callout-content-description-action-marginBlockStart: 0;--components-callout-content-description-action-paddingBlock: 0}.callout:has(.callout-content-description-actions.mod-inline) .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.callout:has(.callout-content-description-actions.mod-inline) .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout:has(.callout-content-description-actions.mod-inline) .button.mod-onlyIcon{--components-button-padding: var(--pr-t-spacings-50)}@layer base{lu-callout{display:block}}\n"], dependencies: [{ kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "pipe", type: CalloutIconPipe, name: "luCalloutIcon" }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CalloutComponent, isStandalone: true, selector: "lu-callout", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removed: { classPropertyName: "removed", publicName: "removed", isSignal: true, isRequired: false, transformFunction: null }, iconAlt: { classPropertyName: "iconAlt", publicName: "iconAlt", isSignal: true, isRequired: false, transformFunction: null }, AI: { classPropertyName: "AI", publicName: "AI", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removedChange: "removedChange" }, host: { properties: { "attr.hidden": "removed() ? \"hidden\" : null" } }, ngImport: i0, template: "@if (!removedRef()) {\n\t<div class=\"callout\" [class]=\"calloutClasses()\" [class.mod-AI]=\"AI()\">\n\t\t@if (state() | luCalloutIcon: icon(); as calloutIcon) {\n\t\t\t<div class=\"callout-icon\">\n\t\t\t\t<lu-icon [icon]=\"calloutIcon\" [alt]=\"iconAlt()\" />\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"callout-content\">\n\t\t\t@if (heading()) {\n\t\t\t\t<strong class=\"callout-content-title\">\n\t\t\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t\t\t</strong>\n\t\t\t}\n\t\t\t<div class=\"callout-content-description\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\t\t</div>\n\t\t@if (removable()) {\n\t\t\t<button type=\"button\" class=\"callout-kill\" (click)=\"removedRef.set(true); removedChange.emit(true)\">\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl.close }}</span>\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";@layer components{.callout{--components-callout-gap: var(--pr-t-spacings-150);--components-callout-display: flex;--components-callout-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-callout-font: inherit;--components-callout-kill-size: 1.5rem;--components-callout-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-callout-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));--components-callout-content-description-display: block;--components-callout-content-description-action-marginBlockStart: var(--pr-t-spacings-50);--components-callout-content-description-action-paddingBlock: var(--pr-t-spacings-50);--components-callout-fontSize: inherit;--components-callout-lineHeight: inherit;align-items:flex-start;position:relative;border-radius:var(--pr-t-border-radius-default);background-color:var(--components-callout-backgroundColor);color:var(--pr-t-color-text);box-shadow:var(--components-callout-boxShadow);gap:var(--components-callout-gap);padding:var(--components-callout-padding);font:var(--components-callout-font);font-size:var(--components-callout-fontSize);line-height:var(--components-callout-lineHeight)}.callout:not([hidden]){display:var(--components-callout-display)}.callout a,.callout .link{--commons-text-link-color: var(--pr-t-color-text);--commons-text-link-hover: var(--palettes-neutral-900)}.callout-content{flex:1;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.callout-content-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.callout-content-description{display:var(--components-callout-content-description-display);justify-content:space-between;gap:var(--pr-t-spacings-150);align-items:flex-start}.callout-content-description-actions{display:flex;gap:var(--pr-t-spacings-75);margin-block-start:var(--components-callout-content-description-action-marginBlockStart);padding-block:var(--components-callout-content-description-action-paddingBlock);padding-inline:0}.callout-content-description-actions .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.callout-content-description-actions .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout-content-description-actions .button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.callout-icon{display:inline-flex;color:var(--palettes-700, var(--palettes-neutral-700))}.callout-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;color:var(--palettes-neutral-700);text-align:center;transition-duration:var(--commons-animations-durations-fast);transition-property:background-color;block-size:var(--components-callout-kill-size);inline-size:var(--components-callout-kill-size)}.callout-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.callout-kill:before{--icon-content: \"\\e9bf\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;font-size:var(--pr-t-font-body-S-lineHeight)}}@layer mods{.callout.mod-S{--components-callout-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-callout-gap: var(--pr-t-spacings-100);--components-callout-font: var(--pr-t-font-body-S);--components-callout-kill-size: 1.25rem}.callout.mod-S .callout-icon{--icon-size: 1.25rem}.callout.mod-S .callout-content-description-actions .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.callout.mod-S .callout-content-description-actions .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout.mod-S .callout-content-description-actions .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.callout.mod-S{--components-callout-fontSize: var(--pr-t-font-body-S-fontSize);--components-callout-lineHeight: var(--pr-t-font-body-S-lineHeight)}}.callout.mod-AI{--components-callout-boxShadow: var(--pr-t-elevation-shadow-button);--components-callout-backgroundColor: var(--pr-t-elevation-surface-raised)}.callout.mod-AI:before{content:\"\";pointer-events:none;position:absolute;inset:calc(var(--commons-divider-width) * -1);padding:var(--commons-divider-width);background-image:conic-gradient(from 135deg,var(--palettes-brand-400),var(--palettes-AI-500),var(--palettes-brand-400));border-radius:calc(var(--pr-t-border-radius-default) + var(--commons-divider-width));-webkit-mask:linear-gradient(var(--palettes-neutral-0)) content-box,linear-gradient(var(--palettes-neutral-0));mask:linear-gradient(var(--palettes-neutral-0)) content-box,linear-gradient(var(--palettes-neutral-0));-webkit-mask-composite:xor;mask-composite:exclude}.callout.mod-AI .callout-icon .lucca-icon{background-image:linear-gradient(135deg,var(--palettes-AI-600),var(--palettes-brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.callout:has(.callout-content-description-actions.mod-inline){--components-callout-content-description-display: flex;--components-callout-content-description-action-marginBlockStart: 0;--components-callout-content-description-action-paddingBlock: 0}.callout:has(.callout-content-description-actions.mod-inline) .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.callout:has(.callout-content-description-actions.mod-inline) .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout:has(.callout-content-description-actions.mod-inline) .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.callout:has(.callout-content-description-actions.mod-inline) .button.mod-onlyIcon{--components-button-padding: var(--pr-t-spacings-50)}@layer base{lu-callout{display:block}}\n"], dependencies: [{ kind: "directive", type: PortalDirective, selector: "[luPortal]", inputs: ["luPortal", "luPortalContext"] }, { kind: "component", type: IconComponent, selector: "lu-icon", inputs: ["icon", "alt", "size", "color", "AI"] }, { kind: "pipe", type: CalloutIconPipe, name: "luCalloutIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: CalloutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CalloutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-callout', imports: [PortalDirective, CalloutIconPipe, IconComponent], host: {
                         '[attr.hidden]': 'removed() ? "hidden" : null',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (!removedRef()) {\n\t<div class=\"callout\" [class]=\"calloutClasses()\" [class.mod-AI]=\"AI()\">\n\t\t@if (state() | luCalloutIcon: icon(); as calloutIcon) {\n\t\t\t<div class=\"callout-icon\">\n\t\t\t\t<lu-icon [icon]=\"calloutIcon\" [alt]=\"iconAlt()\" />\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"callout-content\">\n\t\t\t@if (heading()) {\n\t\t\t\t<strong class=\"callout-content-title\">\n\t\t\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t\t\t</strong>\n\t\t\t}\n\t\t\t<div class=\"callout-content-description\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\t\t</div>\n\t\t@if (removable()) {\n\t\t\t<button type=\"button\" class=\"callout-kill\" (click)=\"removedRef.set(true); removedChange.emit(true)\">\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl.close }}</span>\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";@layer components{.callout{--components-callout-gap: var(--pr-t-spacings-150);--components-callout-display: flex;--components-callout-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-callout-font: inherit;--components-callout-kill-size: 1.5rem;--components-callout-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-callout-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));--components-callout-content-description-display: block;--components-callout-content-description-action-marginBlockStart: var(--pr-t-spacings-50);--components-callout-content-description-action-paddingBlock: var(--pr-t-spacings-50);--components-callout-fontSize: inherit;--components-callout-lineHeight: inherit;align-items:flex-start;position:relative;border-radius:var(--pr-t-border-radius-default);background-color:var(--components-callout-backgroundColor);color:var(--pr-t-color-text);box-shadow:var(--components-callout-boxShadow);gap:var(--components-callout-gap);padding:var(--components-callout-padding);font:var(--components-callout-font);font-size:var(--components-callout-fontSize);line-height:var(--components-callout-lineHeight)}.callout:not([hidden]){display:var(--components-callout-display)}.callout a,.callout .link{--commons-text-link-color: var(--pr-t-color-text);--commons-text-link-hover: var(--palettes-neutral-900)}.callout-content{flex:1;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.callout-content-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.callout-content-description{display:var(--components-callout-content-description-display);justify-content:space-between;gap:var(--pr-t-spacings-150);align-items:flex-start}.callout-content-description-actions{display:flex;gap:var(--pr-t-spacings-75);margin-block-start:var(--components-callout-content-description-action-marginBlockStart);padding-block:var(--components-callout-content-description-action-paddingBlock);padding-inline:0}.callout-content-description-actions .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75);--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.callout-content-description-actions .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout-icon{display:inline-flex;color:var(--palettes-700, var(--palettes-neutral-700))}.callout-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;color:var(--palettes-neutral-700);text-align:center;transition-duration:var(--commons-animations-durations-fast);transition-property:background-color;block-size:var(--components-callout-kill-size);inline-size:var(--components-callout-kill-size)}.callout-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.callout-kill:before{--icon-content: \"\\e9bf\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:Lucca icons;content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;font-size:var(--pr-t-font-body-S-lineHeight)}}@layer mods{.callout.mod-S{--components-callout-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-callout-gap: var(--pr-t-spacings-100);--components-callout-font: var(--pr-t-font-body-S);--components-callout-kill-size: 1.25rem;--components-callout-fontSize: var(--pr-t-font-body-S-fontSize);--components-callout-lineHeight: var(--pr-t-font-body-S-lineHeight)}.callout.mod-S .callout-icon{--icon-size: 1.25rem}.callout.mod-S .callout-content-description-actions .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.callout.mod-S .callout-content-description-actions .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}}.callout.mod-AI{--components-callout-boxShadow: var(--pr-t-elevation-shadow-button);--components-callout-backgroundColor: var(--pr-t-elevation-surface-raised)}.callout.mod-AI:before{content:\"\";pointer-events:none;position:absolute;inset:calc(var(--commons-divider-width) * -1);padding:var(--commons-divider-width);background-image:conic-gradient(from 135deg,var(--palettes-brand-400),var(--palettes-AI-500),var(--palettes-brand-400));border-radius:calc(var(--pr-t-border-radius-default) + var(--commons-divider-width));mask:linear-gradient(var(--palettes-neutral-0)) content-box,linear-gradient(var(--palettes-neutral-0));-webkit-mask-composite:xor;mask-composite:exclude}.callout.mod-AI .callout-icon .lucca-icon{background-image:linear-gradient(135deg,var(--palettes-AI-600),var(--palettes-brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.callout:has(.callout-content-description-actions.mod-inline){--components-callout-content-description-display: flex;--components-callout-content-description-action-marginBlockStart: 0;--components-callout-content-description-action-paddingBlock: 0}.callout:has(.callout-content-description-actions.mod-inline) .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small);--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.callout:has(.callout-content-description-actions.mod-inline) .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout:has(.callout-content-description-actions.mod-inline) .button.mod-onlyIcon{--components-button-padding: var(--pr-t-spacings-50)}@layer base{lu-callout{display:block}}\n"] }]
-        }] });
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (!removedRef()) {\n\t<div class=\"callout\" [class]=\"calloutClasses()\" [class.mod-AI]=\"AI()\">\n\t\t@if (state() | luCalloutIcon: icon(); as calloutIcon) {\n\t\t\t<div class=\"callout-icon\">\n\t\t\t\t<lu-icon [icon]=\"calloutIcon\" [alt]=\"iconAlt()\" />\n\t\t\t</div>\n\t\t}\n\t\t<div class=\"callout-content\">\n\t\t\t@if (heading()) {\n\t\t\t\t<strong class=\"callout-content-title\">\n\t\t\t\t\t<ng-container *luPortal=\"heading()\" />\n\t\t\t\t</strong>\n\t\t\t}\n\t\t\t<div class=\"callout-content-description\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\t\t</div>\n\t\t@if (removable()) {\n\t\t\t<button type=\"button\" class=\"callout-kill\" (click)=\"removedRef.set(true); removedChange.emit(true)\">\n\t\t\t\t<span class=\"pr-u-mask\">{{ intl.close }}</span>\n\t\t\t</button>\n\t\t}\n\t</div>\n}\n", styles: ["@charset \"UTF-8\";@layer components{.callout{--components-callout-gap: var(--pr-t-spacings-150);--components-callout-display: flex;--components-callout-padding: var(--pr-t-spacings-100) var(--pr-t-spacings-150);--components-callout-font: inherit;--components-callout-kill-size: 1.5rem;--components-callout-boxShadow: 0 0 0 var(--commons-divider-width) var(--palettes-300, var(--palettes-neutral-300));--components-callout-backgroundColor: var(--palettes-50, var(--palettes-neutral-50));--components-callout-content-description-display: block;--components-callout-content-description-action-marginBlockStart: var(--pr-t-spacings-50);--components-callout-content-description-action-paddingBlock: var(--pr-t-spacings-50);--components-callout-fontSize: inherit;--components-callout-lineHeight: inherit;align-items:flex-start;position:relative;border-radius:var(--pr-t-border-radius-default);background-color:var(--components-callout-backgroundColor);color:var(--pr-t-color-text);box-shadow:var(--components-callout-boxShadow);gap:var(--components-callout-gap);padding:var(--components-callout-padding);font:var(--components-callout-font);font-size:var(--components-callout-fontSize);line-height:var(--components-callout-lineHeight)}.callout:not([hidden]){display:var(--components-callout-display)}.callout a,.callout .link{--commons-text-link-color: var(--pr-t-color-text);--commons-text-link-hover: var(--palettes-neutral-900)}.callout-content{flex:1;display:flex;flex-direction:column;gap:var(--pr-t-spacings-50)}.callout-content-title{font-weight:var(--pr-t-font-fontWeight-semibold)}.callout-content-description{display:var(--components-callout-content-description-display);justify-content:space-between;gap:var(--pr-t-spacings-150);align-items:flex-start}.callout-content-description-actions{display:flex;gap:var(--pr-t-spacings-75);margin-block-start:var(--components-callout-content-description-action-marginBlockStart);padding-block:var(--components-callout-content-description-action-paddingBlock);padding-inline:0}.callout-content-description-actions .button{--palettes-text: var(--palettes-neutral-text);--palettes-0: var(--palettes-neutral-0);--palettes-25: var(--palettes-neutral-25);--palettes-50: var(--palettes-neutral-50);--palettes-100: var(--palettes-neutral-100);--palettes-200: var(--palettes-neutral-200);--palettes-300: var(--palettes-neutral-300);--palettes-400: var(--palettes-neutral-400);--palettes-500: var(--palettes-neutral-500);--palettes-600: var(--palettes-neutral-600);--palettes-700: var(--palettes-neutral-700);--palettes-800: var(--palettes-neutral-800);--palettes-900: var(--palettes-neutral-900);--icon-size: 1.25rem;--components-button-font: var(--pr-t-font-body-S);--components-button-paddingBlock: var(--pr-t-spacings-75);--components-button-paddingInline: var(--pr-t-spacings-100);--components-button-gap: var(--pr-t-spacings-75)}.callout-content-description-actions .button .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout-content-description-actions .button{--components-button-font-size: var(--pr-t-font-body-S-fontSize);--components-button-line-height: var(--pr-t-font-body-S-lineHeight)}.callout-icon{display:inline-flex;color:var(--palettes-700, var(--palettes-neutral-700))}.callout-kill{padding:0;border:0;inline-size:100%;background-color:transparent;color:inherit;text-align:start;display:block;font:inherit;cursor:pointer;color:var(--palettes-neutral-700);text-align:center;transition-duration:var(--commons-animations-durations-fast);transition-property:background-color;block-size:var(--components-callout-kill-size);inline-size:var(--components-callout-kill-size)}.callout-kill:focus-visible{outline:2px solid var(--palettes-product-700);outline-offset:2px;border-radius:var(--pr-t-border-radius-small)}.callout-kill:before{--icon-content: \"\\e9bf\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;font-size:var(--pr-t-font-body-S-lineHeight)}}@layer mods{.callout.mod-S{--components-callout-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);--components-callout-gap: var(--pr-t-spacings-100);--components-callout-font: var(--pr-t-font-body-S);--components-callout-kill-size: 1.25rem}.callout.mod-S .callout-icon{--icon-size: 1.25rem}.callout.mod-S .callout-content-description-actions .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.callout.mod-S .callout-content-description-actions .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout.mod-S .callout-content-description-actions .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.callout.mod-S{--components-callout-fontSize: var(--pr-t-font-body-S-fontSize);--components-callout-lineHeight: var(--pr-t-font-body-S-lineHeight)}}.callout.mod-AI{--components-callout-boxShadow: var(--pr-t-elevation-shadow-button);--components-callout-backgroundColor: var(--pr-t-elevation-surface-raised)}.callout.mod-AI:before{content:\"\";pointer-events:none;position:absolute;inset:calc(var(--commons-divider-width) * -1);padding:var(--commons-divider-width);background-image:conic-gradient(from 135deg,var(--palettes-brand-400),var(--palettes-AI-500),var(--palettes-brand-400));border-radius:calc(var(--pr-t-border-radius-default) + var(--commons-divider-width));-webkit-mask:linear-gradient(var(--palettes-neutral-0)) content-box,linear-gradient(var(--palettes-neutral-0));mask:linear-gradient(var(--palettes-neutral-0)) content-box,linear-gradient(var(--palettes-neutral-0));-webkit-mask-composite:xor;mask-composite:exclude}.callout.mod-AI .callout-icon .lucca-icon{background-image:linear-gradient(135deg,var(--palettes-AI-600),var(--palettes-brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.callout:has(.callout-content-description-actions.mod-inline){--components-callout-content-description-display: flex;--components-callout-content-description-action-marginBlockStart: 0;--components-callout-content-description-action-paddingBlock: 0}.callout:has(.callout-content-description-actions.mod-inline) .button{--icon-size: 1rem;--components-button-font: var(--pr-t-font-body-XS);--components-button-paddingBlock: var(--pr-t-spacings-50);--components-button-paddingInline: var(--pr-t-spacings-75);--components-button-gap: var(--pr-t-spacings-50);--components-button-borderRadius: var(--pr-t-border-radius-small)}.callout:has(.callout-content-description-actions.mod-inline) .button .numericBadge{--components-numericBadge-size: 1rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}.callout:has(.callout-content-description-actions.mod-inline) .button{--components-button-font-size: var(--pr-t-font-body-XS-fontSize);--components-button-line-height: var(--pr-t-font-body-XS-lineHeight)}.callout:has(.callout-content-description-actions.mod-inline) .button.mod-onlyIcon{--components-button-padding: var(--pr-t-spacings-50)}@layer base{lu-callout{display:block}}\n"] }]
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removed: [{ type: i0.Input, args: [{ isSignal: true, alias: "removed", required: false }] }], iconAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlt", required: false }] }], AI: [{ type: i0.Input, args: [{ isSignal: true, alias: "AI", required: false }] }], removedChange: [{ type: i0.Output, args: ["removedChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.