@educarehq/solaris-ui 0.23.0 → 0.25.0

package/fesm2022/educarehq-solaris-ui.mjs

@@ -2855,6 +2855,29 @@ const DATA_ICONS = [
             { type: 'path', d: 'm2 2 20 20' },
         ],
     },
+    {
+        name: 'cookie',
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        elements: [
+            { type: 'path', d: 'M11 17h.01' },
+            {
+                type: 'path',
+                d: 'M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2',
+            },
+            { type: 'path', d: 'M12 12h.01' },
+            { type: 'path', d: 'M16 16h.01' },
+            { type: 'path', d: 'M16 3h.01' },
+            { type: 'path', d: 'M21 4h.01' },
+            { type: 'path', d: 'M21 8h.01' },
+            { type: 'path', d: 'M7 14h.01' },
+            { type: 'path', d: 'M9 8h.01' },
+        ],
+    },
 ];
 
 const SOLARIS_BUILT_IN_ICONS = [
@@ -13710,22 +13733,35 @@ const SOLARIS_DIALOG_DATA = new InjectionToken('SolarisDialogData');
 const SOLARIS_DIALOG_REF = new InjectionToken('SolarisDialogRef');
 
 class SolarisDialogContentComponent {
+    density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: SolarisDialogContentComponent, isStandalone: true, selector: "solaris-dialog-content", host: { classAttribute: "solaris-dialog-content" }, ngImport: i0, template: "<div class=\"solaris-dialog-content__inner\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;flex:1;overflow-y:auto;padding:var(--solaris-spacing-4);min-height:0}.solaris-dialog-content__inner{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.22", type: SolarisDialogContentComponent, isStandalone: true, selector: "solaris-dialog-content", inputs: { density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-density": "density()" }, classAttribute: "solaris-dialog-content" }, ngImport: i0, template: "<div class=\"solaris-dialog-content__inner\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;flex:1;overflow-y:auto;padding:var(--solaris-spacing-0);min-height:0}:host([data-density=compact]){padding:var(--solaris-spacing-2)}:host([data-density=normal]){padding:var(--solaris-spacing-4)}:host([data-density=comfortable]){padding:var(--solaris-spacing-6)}.solaris-dialog-content__inner{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-dialog-content', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-dialog-content',
-                    }, template: "<div class=\"solaris-dialog-content__inner\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;flex:1;overflow-y:auto;padding:var(--solaris-spacing-4);min-height:0}.solaris-dialog-content__inner{height:100%}\n"] }]
-        }] });
+                        '[attr.data-density]': 'density()',
+                    }, template: "<div class=\"solaris-dialog-content__inner\">\n  <ng-content />\n</div>\n", styles: [":host{display:block;flex:1;overflow-y:auto;padding:var(--solaris-spacing-0);min-height:0}:host([data-density=compact]){padding:var(--solaris-spacing-2)}:host([data-density=normal]){padding:var(--solaris-spacing-4)}:host([data-density=comfortable]){padding:var(--solaris-spacing-6)}.solaris-dialog-content__inner{height:100%}\n"] }]
+        }], propDecorators: { density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }] } });
 
 class SolarisDialogActionsComponent {
     dialogRef = inject(SOLARIS_DIALOG_REF);
+    translateService = inject(SolarisTranslateService, {
+        optional: true,
+    });
     actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     stack = input('auto', ...(ngDevMode ? [{ debugName: "stack" }] : /* istanbul ignore next */ []));
+    separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
     actionExecuted = output();
+    resolvedLabel(action) {
+        if (action.labelKey) {
+            return this.translateService?.translate(action.labelKey) ?? action.label;
+        }
+        return action.label;
+    }
     handleAction(action) {
         const executeAction = () => {
             if (action.action) {
@@ -13742,54 +13778,52 @@ class SolarisDialogActionsComponent {
         this.actionExecuted.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n  @for (action of actions(); track $index) {\n    <button\n      type=\"button\"\n      solaris-button\n      (click)=\"handleAction(action)\"\n      [color]=\"action.color ?? 'neutral'\"\n      [disabled]=\"action.disabled ?? false\"\n      [appearance]=\"action.appearance ?? 'solid'\"\n    >\n      {{ action.label }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-3) var(--solaris-spacing-4)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-2)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["iconPosition", "appearance", "color", "shape", "radius", "density", "fullWidth", "disabled", "loading", "loadingLabelKey", "loadingLabel", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()", "attr.data-separator": "separator() ? '' : null", "attr.data-density": "density()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n  @for (action of actions(); track $index) {\n    <button\n      type=\"button\"\n      solaris-button\n      [icon]=\"action.icon\"\n      (click)=\"handleAction(action)\"\n      [radius]=\"action.radius ?? 'md'\"\n      [shape]=\"action.shape ?? 'wide'\"\n      [color]=\"action.color ?? 'neutral'\"\n      [loading]=\"action.loading ?? false\"\n      [disabled]=\"action.disabled ?? false\"\n      [attr.data-autofocus]=\"action.autoFocus ? '' : null\"\n      [density]=\"action.density ?? 'compact'\"\n      [appearance]=\"action.appearance ?? 'solid'\"\n      [iconPosition]=\"action.iconPosition ?? 'start'\"\n    >\n      {{ resolvedLabel(action) }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-0);--solaris-dialog-actions-border-color: var(--solaris-border-default)}:host([data-separator]){border-top:var(--solaris-border-width-sm) solid var(--solaris-dialog-actions-border-color)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-density=compact]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-1)}:host([data-density=normal]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-2)}:host([data-density=comfortable]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-3)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["iconPosition", "appearance", "color", "shape", "radius", "density", "fullWidth", "disabled", "loading", "loadingLabelKey", "loadingLabel", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-dialog-actions', standalone: true, imports: [SolarisButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-align]': 'align()',
                         '[attr.data-stack]': 'stack()',
+                        '[attr.data-separator]': "separator() ? '' : null",
+                        '[attr.data-density]': 'density()',
                         class: 'solaris-dialog-actions',
-                    }, template: "<div class=\"solaris-dialog-actions__inner\">\n  @for (action of actions(); track $index) {\n    <button\n      type=\"button\"\n      solaris-button\n      (click)=\"handleAction(action)\"\n      [color]=\"action.color ?? 'neutral'\"\n      [disabled]=\"action.disabled ?? false\"\n      [appearance]=\"action.appearance ?? 'solid'\"\n    >\n      {{ action.label }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-3) var(--solaris-spacing-4)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-2)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"] }]
-        }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }] } });
+                    }, template: "<div class=\"solaris-dialog-actions__inner\">\n  @for (action of actions(); track $index) {\n    <button\n      type=\"button\"\n      solaris-button\n      [icon]=\"action.icon\"\n      (click)=\"handleAction(action)\"\n      [radius]=\"action.radius ?? 'md'\"\n      [shape]=\"action.shape ?? 'wide'\"\n      [color]=\"action.color ?? 'neutral'\"\n      [loading]=\"action.loading ?? false\"\n      [disabled]=\"action.disabled ?? false\"\n      [attr.data-autofocus]=\"action.autoFocus ? '' : null\"\n      [density]=\"action.density ?? 'compact'\"\n      [appearance]=\"action.appearance ?? 'solid'\"\n      [iconPosition]=\"action.iconPosition ?? 'start'\"\n    >\n      {{ resolvedLabel(action) }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-0);--solaris-dialog-actions-border-color: var(--solaris-border-default)}:host([data-separator]){border-top:var(--solaris-border-width-sm) solid var(--solaris-dialog-actions-border-color)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-density=compact]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-1)}:host([data-density=normal]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-2)}:host([data-density=comfortable]) .solaris-dialog-actions__inner{gap:var(--solaris-spacing-3)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"] }]
+        }], propDecorators: { actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], stack: [{ type: i0.Input, args: [{ isSignal: true, alias: "stack", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], actionExecuted: [{ type: i0.Output, args: ["actionExecuted"] }] } });
 
+let nextDialogHeaderId = 0;
 class SolarisDialogHeaderComponent {
-    dialogRef = inject(SOLARIS_DIALOG_REF);
-    translateService = inject(SolarisTranslateService, {
+    dialogRef = inject(SOLARIS_DIALOG_REF, {
         optional: true,
     });
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
-    closeable = input(true, ...(ngDevMode ? [{ debugName: "closeable" }] : /* istanbul ignore next */ []));
-    closeLabel = input('Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-    closeLabelKey = input(...(ngDevMode ? [undefined, { debugName: "closeLabelKey" }] : /* istanbul ignore next */ []));
     iconDecorative = input(false, ...(ngDevMode ? [{ debugName: "iconDecorative" }] : /* istanbul ignore next */ []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    showCloseButton = () => this.closeable();
+    separator = input(true, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    idPrefix = this.dialogRef?.id ?? `solaris-dialog-${++nextDialogHeaderId}`;
+    titleId = `${this.idPrefix}-title`;
+    descriptionId = `${this.idPrefix}-description`;
     hasTitle = () => !!this.title();
     hasDescription = () => !!this.description();
     hasIcon = () => !!this.icon();
-    resolvedCloseLabel = () => this.closeLabelKey()
-        ? (this.translateService?.translate(this.closeLabelKey()) ??
-            this.closeLabel())
-        : this.closeLabel();
-    close() {
-        this.dialogRef.close();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogHeaderComponent, isStandalone: true, selector: "solaris-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabelKey: { classPropertyName: "closeLabelKey", publicName: "closeLabelKey", isSignal: true, isRequired: false, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()" }, classAttribute: "solaris-dialog-header" }, ngImport: i0, template: "<div class=\"solaris-dialog-header__start\">\n  @if (hasIcon()) {\n    <div class=\"solaris-dialog-header__icon\">\n      <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n    </div>\n  }\n\n  <div class=\"solaris-dialog-header__text\">\n    @if (hasTitle()) {\n      <h2 class=\"solaris-dialog-header__title\" id=\"solaris-dialog-title\">\n        {{ title() }}\n      </h2>\n    }\n\n    @if (hasDescription()) {\n      <p\n        class=\"solaris-dialog-header__description\"\n        id=\"solaris-dialog-description\"\n      >\n        {{ description() }}\n      </p>\n    }\n  </div>\n</div>\n\n@if (showCloseButton()) {\n  <div class=\"solaris-dialog-header__end\">\n    <button\n      type=\"button\"\n      class=\"solaris-dialog-header__close\"\n      [attr.data-size]=\"size()\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"close()\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-4) var(--solaris-spacing-4) 0;--solaris-dialog-close-size: var(--solaris-font-size-lg);--solaris-dialog-close-icon-size: var(--solaris-font-size-lg);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);flex:1;min-width:0}.solaris-dialog-header__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--solaris-dialog-media-size);height:var(--solaris-dialog-media-size);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans);color:var(--solaris-text-strong)}.solaris-dialog-header__description{margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog-header__end{flex-shrink:0;display:flex;align-items:center}.solaris-dialog-header__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-dialog-close-size);height:var(--solaris-dialog-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-dialog-header__close:hover{color:var(--solaris-text-default)}.solaris-dialog-header__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-dialog-header__close solaris-icon,.solaris-dialog-header__close svg{display:block;width:var(--solaris-dialog-close-icon-size);height:var(--solaris-dialog-close-icon-size)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogHeaderComponent, isStandalone: true, selector: "solaris-dialog-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, iconDecorative: { classPropertyName: "iconDecorative", publicName: "iconDecorative", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-separator": "separator() ? '' : null" }, classAttribute: "solaris-dialog-header" }, ngImport: i0, template: "<div class=\"solaris-dialog-header__start\">\n  @if (hasIcon()) {\n    <div class=\"solaris-dialog-header__icon\">\n      <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n    </div>\n  }\n\n  <div class=\"solaris-dialog-header__text\">\n    @if (hasTitle()) {\n      <h2 class=\"solaris-dialog-header__title\" [attr.id]=\"titleId\">\n        {{ title() }}\n      </h2>\n    }\n\n    @if (hasDescription()) {\n      <p class=\"solaris-dialog-header__description\" [attr.id]=\"descriptionId\">\n        {{ description() }}\n      </p>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-0);padding:var(--solaris-spacing-0);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl);--solaris-dialog-header-border-color: var(--solaris-border-default)}:host([data-separator]){padding-block-end:var(--solaris-spacing-3);border-bottom:var(--solaris-border-width-sm) solid var(--solaris-dialog-header-border-color)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{flex:1;min-width:0;display:flex;align-items:center}.solaris-dialog-header__icon{flex-shrink:0;padding-left:var(--solaris-spacing-3);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;color:var(--solaris-text-strong);padding:var(--solaris-spacing-3) 0 0 var(--solaris-spacing-3);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}.solaris-dialog-header__description{color:var(--solaris-text-muted);padding:0 var(--solaris-spacing-3);margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-dialog-header', standalone: true, imports: [SolarisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-dialog-header',
                         '[attr.data-variant]': 'variant()',
-                    }, template: "<div class=\"solaris-dialog-header__start\">\n  @if (hasIcon()) {\n    <div class=\"solaris-dialog-header__icon\">\n      <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n    </div>\n  }\n\n  <div class=\"solaris-dialog-header__text\">\n    @if (hasTitle()) {\n      <h2 class=\"solaris-dialog-header__title\" id=\"solaris-dialog-title\">\n        {{ title() }}\n      </h2>\n    }\n\n    @if (hasDescription()) {\n      <p\n        class=\"solaris-dialog-header__description\"\n        id=\"solaris-dialog-description\"\n      >\n        {{ description() }}\n      </p>\n    }\n  </div>\n</div>\n\n@if (showCloseButton()) {\n  <div class=\"solaris-dialog-header__end\">\n    <button\n      type=\"button\"\n      class=\"solaris-dialog-header__close\"\n      [attr.data-size]=\"size()\"\n      [attr.aria-label]=\"resolvedCloseLabel()\"\n      (click)=\"close()\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  </div>\n}\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-4) var(--solaris-spacing-4) 0;--solaris-dialog-close-size: var(--solaris-font-size-lg);--solaris-dialog-close-icon-size: var(--solaris-font-size-lg);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{display:flex;align-items:flex-start;gap:var(--solaris-spacing-3);flex:1;min-width:0}.solaris-dialog-header__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--solaris-dialog-media-size);height:var(--solaris-dialog-media-size);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans);color:var(--solaris-text-strong)}.solaris-dialog-header__description{margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog-header__end{flex-shrink:0;display:flex;align-items:center}.solaris-dialog-header__close{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-dialog-close-size);height:var(--solaris-dialog-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-dialog-header__close:hover{color:var(--solaris-text-default)}.solaris-dialog-header__close:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-dialog-header__close solaris-icon,.solaris-dialog-header__close svg{display:block;width:var(--solaris-dialog-close-icon-size);height:var(--solaris-dialog-close-icon-size)}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closeLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabelKey", required: false }] }], iconDecorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDecorative", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+                        '[attr.data-separator]': "separator() ? '' : null",
+                    }, template: "<div class=\"solaris-dialog-header__start\">\n  @if (hasIcon()) {\n    <div class=\"solaris-dialog-header__icon\">\n      <solaris-icon [name]=\"icon()!\" [decorative]=\"iconDecorative()\" />\n    </div>\n  }\n\n  <div class=\"solaris-dialog-header__text\">\n    @if (hasTitle()) {\n      <h2 class=\"solaris-dialog-header__title\" [attr.id]=\"titleId\">\n        {{ title() }}\n      </h2>\n    }\n\n    @if (hasDescription()) {\n      <p class=\"solaris-dialog-header__description\" [attr.id]=\"descriptionId\">\n        {{ description() }}\n      </p>\n    }\n  </div>\n</div>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--solaris-spacing-0);padding:var(--solaris-spacing-0);--solaris-dialog-icon-color: var(--solaris-text-muted);--solaris-dialog-media-size: var(--solaris-spacing-8);--solaris-dialog-icon-size: var(--solaris-font-size-2xl);--solaris-dialog-header-border-color: var(--solaris-border-default)}:host([data-separator]){padding-block-end:var(--solaris-spacing-3);border-bottom:var(--solaris-border-width-sm) solid var(--solaris-dialog-header-border-color)}:host([data-variant=info]){--solaris-dialog-icon-color: var(--solaris-info-base)}:host([data-variant=success]){--solaris-dialog-icon-color: var(--solaris-success-base)}:host([data-variant=warning]){--solaris-dialog-icon-color: var(--solaris-warning-base)}:host([data-variant=danger]){--solaris-dialog-icon-color: var(--solaris-danger-base)}.solaris-dialog-header__start{flex:1;min-width:0;display:flex;align-items:center}.solaris-dialog-header__icon{flex-shrink:0;padding-left:var(--solaris-spacing-3);color:var(--solaris-dialog-icon-color)}.solaris-dialog-header__icon solaris-icon,.solaris-dialog-header__icon svg{display:block;width:var(--solaris-dialog-icon-size);height:var(--solaris-dialog-icon-size)}.solaris-dialog-header__text{flex:1;min-width:0}.solaris-dialog-header__title{margin:0;color:var(--solaris-text-strong);padding:var(--solaris-spacing-3) 0 0 var(--solaris-spacing-3);font:var(--solaris-font-weight-semibold) var(--solaris-font-size-lg)/var(--solaris-line-height-sm) var(--solaris-font-family-sans)}.solaris-dialog-header__description{color:var(--solaris-text-muted);padding:0 var(--solaris-spacing-3);margin:var(--solaris-spacing-1) 0 0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-xs)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], iconDecorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconDecorative", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }] } });
 
 class SolarisDialogComponent {
+    translateService = inject(SolarisTranslateService, {
+        optional: true,
+    });
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     hasActions = computed(() => {
         const actions = this.options().actions;
@@ -13798,15 +13832,36 @@ class SolarisDialogComponent {
     actionsAlign = computed(() => this.options().actionsAlign ?? 'end', ...(ngDevMode ? [{ debugName: "actionsAlign" }] : /* istanbul ignore next */ []));
     actionsStack = computed(() => this.options().actionsStack ?? 'auto', ...(ngDevMode ? [{ debugName: "actionsStack" }] : /* istanbul ignore next */ []));
     iconDecorative = computed(() => this.options().iconDecorative ?? false, ...(ngDevMode ? [{ debugName: "iconDecorative" }] : /* istanbul ignore next */ []));
-    closeable = computed(() => this.options().closeable ?? true, ...(ngDevMode ? [{ debugName: "closeable" }] : /* istanbul ignore next */ []));
-    closeLabel = computed(() => this.options().closeLabel ?? 'Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-    size = computed(() => this.options().size ?? 'md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     variant = computed(() => this.options().variant ?? 'neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    headerSeparator = computed(() => this.options().headerSeparator ?? true, ...(ngDevMode ? [{ debugName: "headerSeparator" }] : /* istanbul ignore next */ []));
+    footerSeparator = computed(() => this.options().footerSeparator ?? true, ...(ngDevMode ? [{ debugName: "footerSeparator" }] : /* istanbul ignore next */ []));
+    actionsShape = computed(() => this.options().actionsShape, ...(ngDevMode ? [{ debugName: "actionsShape" }] : /* istanbul ignore next */ []));
+    actionsDensity = computed(() => this.options().actionsDensity, ...(ngDevMode ? [{ debugName: "actionsDensity" }] : /* istanbul ignore next */ []));
+    actionsRadius = computed(() => this.options().actionsRadius, ...(ngDevMode ? [{ debugName: "actionsRadius" }] : /* istanbul ignore next */ []));
+    density = computed(() => this.options().density, ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     description = computed(() => this.options().description, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     title = computed(() => this.options().title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     icon = computed(() => this.options().icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    resolvedTitle = computed(() => {
+        const titleKey = this.options().titleKey;
+        if (titleKey) {
+            return this.translateService?.translate(titleKey) ?? this.options().title;
+        }
+        return this.title();
+    }, ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : /* istanbul ignore next */ []));
+    resolvedDescription = computed(() => {
+        const descriptionKey = this.options().descriptionKey;
+        if (descriptionKey) {
+            return (this.translateService?.translate(descriptionKey) ??
+                this.options().description);
+        }
+        return this.description();
+    }, ...(ngDevMode ? [{ debugName: "resolvedDescription" }] : /* istanbul ignore next */ []));
     actions = computed(() => {
         const variant = this.variant();
+        const shape = this.actionsShape();
+        const density = this.actionsDensity();
+        const radius = this.actionsRadius();
         return (this.options().actions ?? []).map((action) => {
             const appearance = action.appearance ?? 'solid';
             const hasExplicitColor = action.color !== undefined;
@@ -13815,11 +13870,17 @@ class SolarisDialogComponent {
                 : appearance === 'solid'
                     ? variant
                     : undefined;
-            return { ...action, color };
+            return {
+                ...action,
+                color,
+                shape: action.shape ?? shape,
+                density: action.density ?? density,
+                radius: action.radius ?? radius,
+            };
         });
     }, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogComponent, isStandalone: true, selector: "solaris-dialog", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.role": "null" }, classAttribute: "solaris-dialog" }, ngImport: i0, template: "<solaris-dialog-header\n  [icon]=\"icon()\"\n  [iconDecorative]=\"iconDecorative()\"\n  [title]=\"title()\"\n  [description]=\"description()\"\n  [closeable]=\"closeable()\"\n  [closeLabel]=\"closeLabel()\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n/>\n\n@if (description() && !hasActions()) {\n  <solaris-dialog-content>\n    <p class=\"solaris-dialog__description-text\">{{ description() }}</p>\n  </solaris-dialog-content>\n}\n\n@if (hasActions()) {\n  <div class=\"solaris-dialog__body\"></div>\n  <solaris-dialog-actions\n    [actions]=\"actions()\"\n    [align]=\"actionsAlign()\"\n    [stack]=\"actionsStack()\"\n  />\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;max-height:100%}.solaris-dialog__description-text{margin:0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog__body{flex:1;min-height:0;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: SolarisDialogHeaderComponent, selector: "solaris-dialog-header", inputs: ["icon", "title", "description", "closeable", "closeLabel", "closeLabelKey", "iconDecorative", "size", "variant"] }, { kind: "component", type: SolarisDialogContentComponent, selector: "solaris-dialog-content" }, { kind: "component", type: SolarisDialogActionsComponent, selector: "solaris-dialog-actions", inputs: ["actions", "align", "stack"], outputs: ["actionExecuted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogComponent, isStandalone: true, selector: "solaris-dialog", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.role": "null" }, classAttribute: "solaris-dialog" }, ngImport: i0, template: "<solaris-dialog-header\n  [icon]=\"icon()\"\n  [title]=\"resolvedTitle()\"\n  [variant]=\"variant()\"\n  [description]=\"resolvedDescription()\"\n  [separator]=\"headerSeparator()\"\n  [iconDecorative]=\"iconDecorative()\"\n/>\n\n@if (resolvedDescription() && !hasActions()) {\n  <solaris-dialog-content [density]=\"density()\">\n    <p class=\"solaris-dialog__description-text\">{{ resolvedDescription() }}</p>\n  </solaris-dialog-content>\n}\n\n@if (hasActions()) {\n  <div class=\"solaris-dialog__body\"></div>\n  <solaris-dialog-actions\n    [actions]=\"actions()\"\n    [align]=\"actionsAlign()\"\n    [stack]=\"actionsStack()\"\n    [separator]=\"footerSeparator()\"\n    [density]=\"density()\"\n  />\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;max-height:100%}.solaris-dialog__description-text{margin:0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog__body{flex:1;min-height:0;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: SolarisDialogHeaderComponent, selector: "solaris-dialog-header", inputs: ["icon", "title", "description", "iconDecorative", "variant", "separator"] }, { kind: "component", type: SolarisDialogContentComponent, selector: "solaris-dialog-content", inputs: ["density"] }, { kind: "component", type: SolarisDialogActionsComponent, selector: "solaris-dialog-actions", inputs: ["actions", "align", "stack", "separator", "density"], outputs: ["actionExecuted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogComponent, decorators: [{
             type: Component,
@@ -13830,26 +13891,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-dialog',
                         '[attr.role]': 'null',
-                    }, template: "<solaris-dialog-header\n  [icon]=\"icon()\"\n  [iconDecorative]=\"iconDecorative()\"\n  [title]=\"title()\"\n  [description]=\"description()\"\n  [closeable]=\"closeable()\"\n  [closeLabel]=\"closeLabel()\"\n  [size]=\"size()\"\n  [variant]=\"variant()\"\n/>\n\n@if (description() && !hasActions()) {\n  <solaris-dialog-content>\n    <p class=\"solaris-dialog__description-text\">{{ description() }}</p>\n  </solaris-dialog-content>\n}\n\n@if (hasActions()) {\n  <div class=\"solaris-dialog__body\"></div>\n  <solaris-dialog-actions\n    [actions]=\"actions()\"\n    [align]=\"actionsAlign()\"\n    [stack]=\"actionsStack()\"\n  />\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;max-height:100%}.solaris-dialog__description-text{margin:0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog__body{flex:1;min-height:0;overflow-y:auto}\n"] }]
+                    }, template: "<solaris-dialog-header\n  [icon]=\"icon()\"\n  [title]=\"resolvedTitle()\"\n  [variant]=\"variant()\"\n  [description]=\"resolvedDescription()\"\n  [separator]=\"headerSeparator()\"\n  [iconDecorative]=\"iconDecorative()\"\n/>\n\n@if (resolvedDescription() && !hasActions()) {\n  <solaris-dialog-content [density]=\"density()\">\n    <p class=\"solaris-dialog__description-text\">{{ resolvedDescription() }}</p>\n  </solaris-dialog-content>\n}\n\n@if (hasActions()) {\n  <div class=\"solaris-dialog__body\"></div>\n  <solaris-dialog-actions\n    [actions]=\"actions()\"\n    [align]=\"actionsAlign()\"\n    [stack]=\"actionsStack()\"\n    [separator]=\"footerSeparator()\"\n    [density]=\"density()\"\n  />\n}\n", styles: [":host{display:flex;flex-direction:column;height:100%;max-height:100%}.solaris-dialog__description-text{margin:0;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans);color:var(--solaris-text-muted)}.solaris-dialog__body{flex:1;min-height:0;overflow-y:auto}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
 
+// SECURITY_EXCEPTION_FILE: ElementRef.nativeElement is the standard Angular API to read the panel element for focus management (panel.focus() and [data-autofocus] lookup). No alternative exists.
 class SolarisDialogContainerComponent {
     dialogRef = inject(SOLARIS_DIALOG_REF);
     injector = inject(Injector);
+    themeService = inject(SolarisThemeService, {
+        optional: true,
+    });
+    translateService = inject(SolarisTranslateService, {
+        optional: true,
+    });
     externalComponent = input(null, ...(ngDevMode ? [{ debugName: "externalComponent" }] : /* istanbul ignore next */ []));
     simpleOptions = input(null, ...(ngDevMode ? [{ debugName: "simpleOptions" }] : /* istanbul ignore next */ []));
     externalComponentConfig = input(null, ...(ngDevMode ? [{ debugName: "externalComponentConfig" }] : /* istanbul ignore next */ []));
     _componentHost = viewChild('componentHost', { ...(ngDevMode ? { debugName: "_componentHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    _dialogPanel = viewChild('dialogPanel', ...(ngDevMode ? [{ debugName: "_dialogPanel" }] : /* istanbul ignore next */ []));
+    _focusTrap = viewChild(CdkTrapFocus, ...(ngDevMode ? [{ debugName: "_focusTrap" }] : /* istanbul ignore next */ []));
     componentRef = null;
     get hostAppearance() {
         if (this.simpleOptions())
-            return this.simpleOptions()?.appearance ?? 'surface';
-        return this.externalComponentConfig()?.appearance ?? 'surface';
+            return this.simpleOptions()?.appearance ?? 'outline';
+        return this.externalComponentConfig()?.appearance ?? 'outline';
     }
-    get hostSize() {
-        if (this.simpleOptions())
-            return this.simpleOptions()?.size ?? 'md';
-        return this.externalComponentConfig()?.size ?? 'md';
+    get hostFullscreen() {
+        const fullscreen = this.simpleOptions()
+            ? (this.simpleOptions()?.fullscreen ?? false)
+            : (this.externalComponentConfig()?.fullscreen ?? false);
+        return fullscreen ? '' : null;
     }
     get hostVariant() {
         if (this.simpleOptions())
@@ -13866,22 +13937,79 @@ class SolarisDialogContainerComponent {
             return this.simpleOptions()?.backdrop ?? true;
         return this.externalComponentConfig()?.backdrop ?? true;
     }
+    get hostRadius() {
+        if (this.simpleOptions())
+            return this.simpleOptions()?.radius ?? 'lg';
+        return this.externalComponentConfig()?.radius ?? 'lg';
+    }
+    get hostDensity() {
+        if (this.simpleOptions())
+            return (this.simpleOptions()?.density ?? this.themeService?.density ?? 'normal');
+        return (this.externalComponentConfig()?.density ??
+            this.themeService?.density ??
+            'normal');
+    }
+    get hostHeaderSeparator() {
+        const separator = this.simpleOptions()
+            ? (this.simpleOptions()?.headerSeparator ?? true)
+            : (this.externalComponentConfig()?.headerSeparator ?? true);
+        return separator ? '' : null;
+    }
+    get hostFooterSeparator() {
+        const separator = this.simpleOptions()
+            ? (this.simpleOptions()?.footerSeparator ?? true)
+            : (this.externalComponentConfig()?.footerSeparator ?? true);
+        return separator ? '' : null;
+    }
     get closeable() {
         if (this.simpleOptions())
             return this.simpleOptions()?.closeable ?? true;
         return this.externalComponentConfig()?.closeable ?? true;
     }
-    get closeLabel() {
-        if (this.simpleOptions()) {
-            return this.simpleOptions()?.closeLabel ?? 'Close';
+    get panelAriaLabel() {
+        const options = this.simpleOptions();
+        if (!options)
+            return null;
+        if (options.ariaLabelKey) {
+            return (this.translateService?.translate(options.ariaLabelKey) ??
+                options.ariaLabel ??
+                null);
         }
-        return this.externalComponentConfig()?.closeLabel ?? 'Close';
+        return options.ariaLabel ?? null;
     }
-    get closeLabelKey() {
-        if (this.simpleOptions()) {
-            return this.simpleOptions()?.closeLabelKey;
+    get panelAriaLabelledBy() {
+        const options = this.simpleOptions();
+        if (!options)
+            return null;
+        if (options.ariaLabelledBy)
+            return options.ariaLabelledBy;
+        if (options.ariaLabel ?? options.ariaLabelKey)
+            return null;
+        if (!options.title && !options.titleKey)
+            return null;
+        return `${this.dialogRef.id}-title`;
+    }
+    get panelAriaDescribedBy() {
+        const options = this.simpleOptions();
+        if (!options)
+            return null;
+        if (options.ariaDescribedBy)
+            return options.ariaDescribedBy;
+        if (!options.description && !options.descriptionKey)
+            return null;
+        return `${this.dialogRef.id}-description`;
+    }
+    get resolvedCloseLabel() {
+        const closeLabelKey = this.simpleOptions()
+            ? this.simpleOptions()?.closeLabelKey
+            : this.externalComponentConfig()?.closeLabelKey;
+        const closeLabel = this.simpleOptions()
+            ? (this.simpleOptions()?.closeLabel ?? 'Close')
+            : (this.externalComponentConfig()?.closeLabel ?? 'Close');
+        if (closeLabelKey) {
+            return (this.translateService?.translate(closeLabelKey) ?? closeLabel ?? 'Close');
         }
-        return this.externalComponentConfig()?.closeLabelKey;
+        return closeLabel;
     }
     get panelWidth() {
         if (this.simpleOptions())
@@ -13933,6 +14061,11 @@ class SolarisDialogContainerComponent {
             return this.simpleOptions()?.role ?? 'dialog';
         return this.externalComponentConfig()?.role ?? 'dialog';
     }
+    get resolvedAutoFocus() {
+        if (this.simpleOptions())
+            return this.simpleOptions()?.autoFocus ?? 'first-tabbable';
+        return this.externalComponentConfig()?.autoFocus ?? 'first-tabbable';
+    }
     constructor() {
         effect(() => {
             const comp = this.externalComponent();
@@ -13963,6 +14096,27 @@ class SolarisDialogContainerComponent {
         });
         this.dialogRef.componentInstance = this.componentRef.instance;
     }
+    ngAfterViewInit() {
+        const autoFocus = this.resolvedAutoFocus;
+        if (autoFocus === false)
+            return;
+        const panel = this._dialogPanel()?.nativeElement;
+        if (!panel)
+            return;
+        const autofocusTarget = panel.querySelector('[data-autofocus]');
+        if (autofocusTarget) {
+            autofocusTarget.focus();
+            return;
+        }
+        if (autoFocus === 'panel') {
+            panel.focus();
+            return;
+        }
+        this._focusTrap()?.focusTrap?.focusInitialElement();
+    }
+    closeDialog() {
+        this.dialogRef.close();
+    }
     onEscapePress() {
         if (this.closeOnEscapeEnabled) {
             this.dialogRef.close();
@@ -13976,21 +14130,25 @@ class SolarisDialogContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogContainerComponent, isStandalone: true, selector: "solaris-dialog-container", inputs: { externalComponent: { classPropertyName: "externalComponent", publicName: "externalComponent", isSignal: true, isRequired: false, transformFunction: null }, simpleOptions: { classPropertyName: "simpleOptions", publicName: "simpleOptions", isSignal: true, isRequired: false, transformFunction: null }, externalComponentConfig: { classPropertyName: "externalComponentConfig", publicName: "externalComponentConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" }, properties: { "attr.data-size": "hostSize", "attr.data-variant": "hostVariant", "attr.data-appearance": "hostAppearance", "attr.data-placement": "hostPlacement", "attr.data-backdrop": "hasBackdrop" }, classAttribute: "solaris-dialog-container" }, viewQueries: [{ propertyName: "_componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"solaris-dialog-backdrop\"\n  tabindex=\"-1\"\n  (click)=\"onBackdropClick($event)\"\n  (keydown.escape)=\"onBackdropClick($event)\"\n>\n  <div\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n    [attr.role]=\"dialogRole\"\n    [style.width]=\"panelWidth\"\n    class=\"solaris-dialog-panel\"\n    [style.height]=\"panelHeight\"\n    [style.min-width]=\"panelMinWidth\"\n    [style.max-width]=\"panelMaxWidth\"\n    [style.min-height]=\"panelMinHeight\"\n    [style.max-height]=\"panelMaxHeight\"\n  >\n    @if (isSimpleMode) {\n      <solaris-dialog [options]=\"simpleOptions()!\" />\n    } @else {\n      @if (closeable) {\n        <solaris-dialog-header\n          [closeable]=\"true\"\n          [closeLabel]=\"closeLabel\"\n          [closeLabelKey]=\"closeLabelKey\"\n        />\n      }\n      <ng-template #componentHost></ng-template>\n    }\n  </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 448px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-bg: var( --solaris-surface-raised, var(--solaris-surface-base) );--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));inset:0;display:flex;overflow:hidden;position:fixed;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=bottom]){align-items:flex-end}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);animation:solaris-dialog-enter .2s var(--solaris-motion-easing-decelerate);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-size=sm]) .solaris-dialog-panel{width:896px}:host([data-size=md]) .solaris-dialog-panel{width:1152px}:host([data-size=lg]) .solaris-dialog-panel{width:1536px}:host([data-size=xl]) .solaris-dialog-panel{width:2048px}:host([data-size=fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SolarisDialogComponent, selector: "solaris-dialog", inputs: ["options"] }, { kind: "component", type: SolarisDialogHeaderComponent, selector: "solaris-dialog-header", inputs: ["icon", "title", "description", "closeable", "closeLabel", "closeLabelKey", "iconDecorative", "size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisDialogContainerComponent, isStandalone: true, selector: "solaris-dialog-container", inputs: { externalComponent: { classPropertyName: "externalComponent", publicName: "externalComponent", isSignal: true, isRequired: false, transformFunction: null }, simpleOptions: { classPropertyName: "simpleOptions", publicName: "simpleOptions", isSignal: true, isRequired: false, transformFunction: null }, externalComponentConfig: { classPropertyName: "externalComponentConfig", publicName: "externalComponentConfig", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" }, properties: { "attr.data-fullscreen": "hostFullscreen", "attr.data-radius": "hostRadius", "attr.data-variant": "hostVariant", "attr.data-density": "hostDensity", "attr.data-backdrop": "hasBackdrop", "attr.data-appearance": "hostAppearance", "attr.data-placement": "hostPlacement", "attr.data-header-separator": "hostHeaderSeparator", "attr.data-footer-separator": "hostFooterSeparator" }, classAttribute: "solaris-dialog-container" }, viewQueries: [{ propertyName: "_componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "_dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true, isSignal: true }, { propertyName: "_focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"solaris-dialog-backdrop\"\n  tabindex=\"-1\"\n  (click)=\"onBackdropClick($event)\"\n  (keydown.escape)=\"onBackdropClick($event)\"\n>\n  <div\n    #dialogPanel\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"false\"\n    [attr.role]=\"dialogRole\"\n    [attr.aria-label]=\"panelAriaLabel\"\n    [attr.aria-labelledby]=\"panelAriaLabelledBy\"\n    [attr.aria-describedby]=\"panelAriaDescribedBy\"\n    [style.width]=\"panelWidth\"\n    class=\"solaris-dialog-panel\"\n    [style.height]=\"panelHeight\"\n    [style.min-width]=\"panelMinWidth\"\n    [style.max-width]=\"panelMaxWidth\"\n    [style.min-height]=\"panelMinHeight\"\n    [style.max-height]=\"panelMaxHeight\"\n    [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n  >\n    @if (isSimpleMode) {\n      <solaris-dialog [options]=\"simpleOptions()!\" />\n    } @else {\n      <ng-template #componentHost></ng-template>\n    }\n    @if (closeable) {\n      <button\n        type=\"button\"\n        data-dialog-close\n        (click)=\"closeDialog()\"\n        [attr.aria-label]=\"resolvedCloseLabel\"\n        class=\"solaris-dialog-container__close\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 448px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-panel-bg: var(--solaris-surface-base);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));inset:0;display:flex;position:fixed;overflow:hidden;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=top]){align-items:flex-start}:host([data-placement=bottom]){align-items:flex-end}:host([data-placement=left]){justify-content:flex-start}:host([data-placement=right]){justify-content:flex-end}:host([data-placement=top-left]){align-items:flex-start;justify-content:flex-start}:host([data-placement=top-right]){align-items:flex-start;justify-content:flex-end}:host([data-placement=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([data-placement=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([data-radius=none]){--solaris-dialog-panel-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-dialog-panel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-dialog-panel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-dialog-panel-radius: var(--solaris-radius-lg)}:host([data-radius=full]){--solaris-dialog-panel-radius: var(--solaris-radius-full)}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=top]) .solaris-dialog-backdrop{align-items:flex-start;padding-top:var(--solaris-spacing-4)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-placement=left]) .solaris-dialog-backdrop{justify-content:flex-start;padding-left:var(--solaris-spacing-4)}:host([data-placement=right]) .solaris-dialog-backdrop{justify-content:flex-end;padding-right:var(--solaris-spacing-4)}:host([data-placement=top-left]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-start;padding-top:var(--solaris-spacing-4);padding-left:var(--solaris-spacing-4)}:host([data-placement=top-right]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-end;padding-top:var(--solaris-spacing-4);padding-right:var(--solaris-spacing-4)}:host([data-placement=bottom-left]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-start;padding-left:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-placement=bottom-right]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-end;padding-right:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height);animation:solaris-dialog-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close{border:none;display:flex;cursor:pointer;background:none;aspect-ratio:1/1;position:absolute;align-items:center;top:var(--solaris-spacing-3);right:var(--solaris-spacing-3);width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close:hover{color:var(--solaris-text-strong)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SolarisDialogComponent, selector: "solaris-dialog", inputs: ["options"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisDialogContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'solaris-dialog-container', standalone: true, imports: [CdkTrapFocus, SolarisDialogComponent, SolarisDialogHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.data-size]': 'hostSize',
+            args: [{ selector: 'solaris-dialog-container', standalone: true, imports: [CdkTrapFocus, SolarisDialogComponent, SolarisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-fullscreen]': 'hostFullscreen',
                         class: 'solaris-dialog-container',
+                        '[attr.data-radius]': 'hostRadius',
                         '[attr.data-variant]': 'hostVariant',
+                        '[attr.data-density]': 'hostDensity',
+                        '[attr.data-backdrop]': 'hasBackdrop',
                         '[attr.data-appearance]': 'hostAppearance',
                         '[attr.data-placement]': 'hostPlacement',
-                        '[attr.data-backdrop]': 'hasBackdrop',
-                    }, template: "<div\n  class=\"solaris-dialog-backdrop\"\n  tabindex=\"-1\"\n  (click)=\"onBackdropClick($event)\"\n  (keydown.escape)=\"onBackdropClick($event)\"\n>\n  <div\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n    [attr.role]=\"dialogRole\"\n    [style.width]=\"panelWidth\"\n    class=\"solaris-dialog-panel\"\n    [style.height]=\"panelHeight\"\n    [style.min-width]=\"panelMinWidth\"\n    [style.max-width]=\"panelMaxWidth\"\n    [style.min-height]=\"panelMinHeight\"\n    [style.max-height]=\"panelMaxHeight\"\n  >\n    @if (isSimpleMode) {\n      <solaris-dialog [options]=\"simpleOptions()!\" />\n    } @else {\n      @if (closeable) {\n        <solaris-dialog-header\n          [closeable]=\"true\"\n          [closeLabel]=\"closeLabel\"\n          [closeLabelKey]=\"closeLabelKey\"\n        />\n      }\n      <ng-template #componentHost></ng-template>\n    }\n  </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 448px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-bg: var( --solaris-surface-raised, var(--solaris-surface-base) );--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));inset:0;display:flex;overflow:hidden;position:fixed;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=bottom]){align-items:flex-end}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);animation:solaris-dialog-enter .2s var(--solaris-motion-easing-decelerate);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-size=sm]) .solaris-dialog-panel{width:896px}:host([data-size=md]) .solaris-dialog-panel{width:1152px}:host([data-size=lg]) .solaris-dialog-panel{width:1536px}:host([data-size=xl]) .solaris-dialog-panel{width:2048px}:host([data-size=fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"] }]
+                        '[attr.data-header-separator]': 'hostHeaderSeparator',
+                        '[attr.data-footer-separator]': 'hostFooterSeparator',
+                    }, template: "<div\n  class=\"solaris-dialog-backdrop\"\n  tabindex=\"-1\"\n  (click)=\"onBackdropClick($event)\"\n  (keydown.escape)=\"onBackdropClick($event)\"\n>\n  <div\n    #dialogPanel\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"false\"\n    [attr.role]=\"dialogRole\"\n    [attr.aria-label]=\"panelAriaLabel\"\n    [attr.aria-labelledby]=\"panelAriaLabelledBy\"\n    [attr.aria-describedby]=\"panelAriaDescribedBy\"\n    [style.width]=\"panelWidth\"\n    class=\"solaris-dialog-panel\"\n    [style.height]=\"panelHeight\"\n    [style.min-width]=\"panelMinWidth\"\n    [style.max-width]=\"panelMaxWidth\"\n    [style.min-height]=\"panelMinHeight\"\n    [style.max-height]=\"panelMaxHeight\"\n    [attr.aria-modal]=\"hasBackdrop ? 'true' : 'false'\"\n  >\n    @if (isSimpleMode) {\n      <solaris-dialog [options]=\"simpleOptions()!\" />\n    } @else {\n      <ng-template #componentHost></ng-template>\n    }\n    @if (closeable) {\n      <button\n        type=\"button\"\n        data-dialog-close\n        (click)=\"closeDialog()\"\n        [attr.aria-label]=\"resolvedCloseLabel\"\n        class=\"solaris-dialog-container__close\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{--solaris-dialog-panel-padding: 0;--solaris-dialog-panel-min-width: 448px;--solaris-dialog-backdrop-bg: var(--solaris-backdrop);--solaris-dialog-panel-bg: var(--solaris-surface-base);--solaris-dialog-z-index: var(--solaris-z-index-modal);--solaris-dialog-panel-shadow: var(--solaris-shadow-lg);--solaris-dialog-panel-radius: var(--solaris-radius-lg);--solaris-dialog-panel-border: var(--solaris-border-default);--solaris-dialog-panel-max-width: calc(100vw - var(--solaris-spacing-8));--solaris-dialog-panel-max-height: calc(100dvh - var(--solaris-spacing-8));inset:0;display:flex;position:fixed;overflow:hidden;align-items:center;justify-content:center;z-index:var(--solaris-dialog-z-index)}:host([data-placement=top]){align-items:flex-start}:host([data-placement=bottom]){align-items:flex-end}:host([data-placement=left]){justify-content:flex-start}:host([data-placement=right]){justify-content:flex-end}:host([data-placement=top-left]){align-items:flex-start;justify-content:flex-start}:host([data-placement=top-right]){align-items:flex-start;justify-content:flex-end}:host([data-placement=bottom-left]){align-items:flex-end;justify-content:flex-start}:host([data-placement=bottom-right]){align-items:flex-end;justify-content:flex-end}:host([data-radius=none]){--solaris-dialog-panel-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-dialog-panel-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-dialog-panel-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-dialog-panel-radius: var(--solaris-radius-lg)}:host([data-radius=full]){--solaris-dialog-panel-radius: var(--solaris-radius-full)}:host([data-backdrop=false]){--solaris-dialog-backdrop-bg: transparent;pointer-events:none}.solaris-dialog-backdrop{inset:0;display:flex;position:fixed;align-items:center;justify-content:center;background:var(--solaris-dialog-backdrop-bg)}:host([data-placement=top]) .solaris-dialog-backdrop{align-items:flex-start;padding-top:var(--solaris-spacing-4)}:host([data-placement=bottom]) .solaris-dialog-backdrop{align-items:flex-end;padding-bottom:var(--solaris-spacing-4)}:host([data-placement=left]) .solaris-dialog-backdrop{justify-content:flex-start;padding-left:var(--solaris-spacing-4)}:host([data-placement=right]) .solaris-dialog-backdrop{justify-content:flex-end;padding-right:var(--solaris-spacing-4)}:host([data-placement=top-left]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-start;padding-top:var(--solaris-spacing-4);padding-left:var(--solaris-spacing-4)}:host([data-placement=top-right]) .solaris-dialog-backdrop{align-items:flex-start;justify-content:flex-end;padding-top:var(--solaris-spacing-4);padding-right:var(--solaris-spacing-4)}:host([data-placement=bottom-left]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-start;padding-left:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-placement=bottom-right]) .solaris-dialog-backdrop{align-items:flex-end;justify-content:flex-end;padding-right:var(--solaris-spacing-4);padding-bottom:var(--solaris-spacing-4)}:host([data-backdrop=false]) .solaris-dialog-backdrop{pointer-events:none}:host([data-backdrop=false]) .solaris-dialog-panel{pointer-events:auto}.solaris-dialog-panel{display:flex;overflow:hidden;position:relative;flex-direction:column;box-sizing:border-box;background:var(--solaris-dialog-panel-bg);box-shadow:var(--solaris-dialog-panel-shadow);max-width:var(--solaris-dialog-panel-max-width);min-width:var(--solaris-dialog-panel-min-width);border-radius:var(--solaris-dialog-panel-radius);max-height:var(--solaris-dialog-panel-max-height);animation:solaris-dialog-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close{border:none;display:flex;cursor:pointer;background:none;aspect-ratio:1/1;position:absolute;align-items:center;top:var(--solaris-spacing-3);right:var(--solaris-spacing-3);width:var(--solaris-spacing-4);height:var(--solaris-spacing-4);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-lg);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate)}.solaris-dialog-container__close:hover{color:var(--solaris-text-strong)}:host([data-appearance=outline]) .solaris-dialog-panel{border:var(--solaris-border-width-sm) solid var(--solaris-dialog-panel-border)}:host([data-fullscreen]) .solaris-dialog-panel{width:100vw;height:100dvh;max-width:100vw;border-radius:0;max-height:100dvh}@keyframes solaris-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.solaris-dialog-panel{animation:none}}:host-context([data-reduced-motion=true]) .solaris-dialog-panel{animation:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { externalComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalComponent", required: false }] }], simpleOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "simpleOptions", required: false }] }], externalComponentConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalComponentConfig", required: false }] }], _componentHost: [{ type: i0.ViewChild, args: ['componentHost', { ...{
                             read: ViewContainerRef,
-                        }, isSignal: true }] }], onEscapePress: [{
+                        }, isSignal: true }] }], _dialogPanel: [{ type: i0.ViewChild, args: ['dialogPanel', { isSignal: true }] }], _focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }], onEscapePress: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
@@ -14019,8 +14177,8 @@ class SolarisDialogRef {
 
 const SOLARIS_DIALOG_CONFIG = new InjectionToken('SolarisDialogConfig');
 const SOLARIS_DIALOG_DEFAULT_CONFIG = {
-    appearance: 'surface',
-    size: 'md',
+    appearance: 'outline',
+    fullscreen: false,
     placement: 'center',
     closeable: true,
     backdrop: true,
@@ -14029,14 +14187,18 @@ const SOLARIS_DIALOG_DEFAULT_CONFIG = {
     autoFocus: 'first-tabbable',
     restoreFocus: true,
     role: 'dialog',
+    headerSeparator: true,
+    footerSeparator: true,
     actionsAlign: 'end',
     actionsStack: 'auto',
 };
 
+// SECURITY_EXCEPTION_FILE: Injected DOCUMENT token is the Angular SSR-safe abstraction for document access; used to capture activeElement on open and restore focus on close. No alternative exists.
 let nextDialogId = 0;
 class SolarisDialogService {
     injector = inject(Injector);
     overlay = inject(Overlay);
+    document = inject(DOCUMENT$1);
     config;
     openDialogs = new Set();
     constructor() {
@@ -14057,7 +14219,10 @@ class SolarisDialogService {
         const portal = new ComponentPortal(SolarisDialogContainerComponent, null, injector);
         const componentRef = overlayRef.attach(portal);
         componentRef.setInput('simpleOptions', mergedOptions);
-        this.trackDialog(ref, overlayRef);
+        this.trackDialog(ref, overlayRef, {
+            restoreFocus: mergedOptions.restoreFocus ?? true,
+            previouslyFocused: this.document.activeElement,
+        });
         return ref;
     }
     openComponent(component, config) {
@@ -14070,17 +14235,52 @@ class SolarisDialogService {
         const componentRef = overlayRef.attach(portal);
         componentRef.setInput('externalComponent', component);
         componentRef.setInput('externalComponentConfig', config ?? {});
-        this.trackDialog(ref, overlayRef);
+        this.trackDialog(ref, overlayRef, {
+            restoreFocus: config?.restoreFocus ?? this.config.restoreFocus ?? true,
+            previouslyFocused: this.document.activeElement,
+        });
         return ref;
     }
     createOverlay(placement, backdrop = true) {
         const positionStrategy = this.overlay.position().global();
-        positionStrategy.centerHorizontally();
-        if (placement === 'bottom') {
-            positionStrategy.bottom('0');
-        }
-        else {
-            positionStrategy.centerVertically();
+        switch (placement) {
+            case 'top':
+                positionStrategy.centerHorizontally();
+                positionStrategy.top('24px');
+                break;
+            case 'bottom':
+                positionStrategy.centerHorizontally();
+                positionStrategy.bottom('24px');
+                break;
+            case 'left':
+                positionStrategy.left('24px');
+                positionStrategy.centerVertically();
+                break;
+            case 'right':
+                positionStrategy.right('24px');
+                positionStrategy.centerVertically();
+                break;
+            case 'top-left':
+                positionStrategy.left('24px');
+                positionStrategy.top('24px');
+                break;
+            case 'top-right':
+                positionStrategy.right('24px');
+                positionStrategy.top('24px');
+                break;
+            case 'bottom-left':
+                positionStrategy.left('24px');
+                positionStrategy.bottom('24px');
+                break;
+            case 'bottom-right':
+                positionStrategy.right('24px');
+                positionStrategy.bottom('24px');
+                break;
+            case 'center':
+            default:
+                positionStrategy.centerHorizontally();
+                positionStrategy.centerVertically();
+                break;
         }
         return this.overlay.create({
             hasBackdrop: false,
@@ -14103,20 +14303,35 @@ class SolarisDialogService {
             parent: this.injector,
         });
     }
-    trackDialog(ref, overlayRef) {
+    trackDialog(ref, overlayRef, focus) {
         const entry = { ref, overlayRef };
         this.openDialogs.add(entry);
         ref.afterClosed().subscribe(() => {
             overlayRef.detach();
             overlayRef.dispose();
             this.openDialogs.delete(entry);
+            this.restoreFocus(focus);
         });
     }
+    restoreFocus(focus) {
+        if (!focus.restoreFocus)
+            return;
+        const target = focus.previouslyFocused;
+        if (!target || typeof target.focus !== 'function')
+            return;
+        if (!this.document.contains(target))
+            return;
+        const activeElement = this.document.activeElement;
+        if (activeElement && activeElement !== this.document.body)
+            return;
+        target.focus();
+    }
     resolveOptions(options) {
         return {
+            ...options,
             variant: options.variant ?? 'neutral',
             appearance: options.appearance ?? this.config.appearance,
-            size: options.size ?? this.config.size,
+            fullscreen: options.fullscreen ?? this.config.fullscreen ?? false,
             closeable: options.closeable ?? this.config.closeable ?? true,
             backdrop: options.backdrop ?? this.config.backdrop ?? true,
             closeOnEscape: options.closeOnEscape ?? this.config.closeOnEscape ?? true,
@@ -14127,9 +14342,15 @@ class SolarisDialogService {
             restoreFocus: options.restoreFocus ?? this.config.restoreFocus ?? true,
             role: options.role ?? this.config.role,
             placement: options.placement ?? this.config.placement ?? 'center',
+            headerSeparator: options.headerSeparator ?? this.config.headerSeparator ?? true,
+            footerSeparator: options.footerSeparator ?? this.config.footerSeparator ?? true,
+            radius: options.radius ?? this.config.radius,
+            density: options.density ?? this.config.density,
+            actionsShape: options.actionsShape ?? this.config.actionsShape,
+            actionsDensity: options.actionsDensity ?? this.config.actionsDensity,
+            actionsRadius: options.actionsRadius ?? this.config.actionsRadius,
             actionsAlign: options.actionsAlign ?? this.config.actionsAlign ?? 'end',
             actionsStack: options.actionsStack ?? this.config.actionsStack ?? 'auto',
-            ...options,
         };
     }
     closeAll() {
@@ -16870,6 +17091,8 @@ class SolarisCollapsibleComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     appearance = input('boxed', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    leadingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    leadingIconDecorative = input(true, { ...(ngDevMode ? { debugName: "leadingIconDecorative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     baseId = computed(() => {
         return resolveElementId(this.elementRef, 'solaris-collapsible');
     }, ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
@@ -16939,7 +17162,7 @@ class SolarisCollapsibleComponent {
         this.open.set(!this.open());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisCollapsibleComponent, isStandalone: true, selector: "solaris-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-appearance": "effectiveAppearance()", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null" }, classAttribute: "solaris-collapsible" }, ngImport: i0, template: "@if (headingLevel()) {\n  @switch (headingLevel()) {\n    @case (2) {\n      <h2 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h2>\n    }\n    @case (3) {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n    @case (4) {\n      <h4 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h4>\n    }\n    @case (5) {\n      <h5 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h5>\n    }\n    @case (6) {\n      <h6 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h6>\n    }\n    @default {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n  }\n} @else {\n  <div class=\"solaris-collapsible__header\">\n    <ng-container *ngTemplateOutlet=\"triggerContent\" />\n  </div>\n}\n\n<ng-template #triggerContent>\n  <button\n    type=\"button\"\n    class=\"solaris-collapsible__trigger\"\n    [id]=\"triggerId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"panelId()\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"solaris-collapsible__trigger-label\">\n      {{ labelText() }}\n    </span>\n    <solaris-icon\n      [name]=\"effectiveIcon()\"\n      class=\"solaris-collapsible__trigger-icon\"\n      [decorative]=\"true\"\n    />\n  </button>\n</ng-template>\n\n<div\n  class=\"solaris-collapsible__panel\"\n  [id]=\"panelId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"triggerId()\"\n  [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n  [attr.inert]=\"isOpen() ? null : ''\"\n>\n  <div class=\"solaris-collapsible__panel-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisCollapsibleComponent, isStandalone: true, selector: "solaris-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingIconDecorative: { classPropertyName: "leadingIconDecorative", publicName: "leadingIconDecorative", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-appearance": "effectiveAppearance()", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null" }, classAttribute: "solaris-collapsible" }, ngImport: i0, template: "@if (headingLevel()) {\n  @switch (headingLevel()) {\n    @case (2) {\n      <h2 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h2>\n    }\n    @case (3) {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n    @case (4) {\n      <h4 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h4>\n    }\n    @case (5) {\n      <h5 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h5>\n    }\n    @case (6) {\n      <h6 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h6>\n    }\n    @default {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n  }\n} @else {\n  <div class=\"solaris-collapsible__header\">\n    <ng-container *ngTemplateOutlet=\"triggerContent\" />\n  </div>\n}\n\n<ng-template #triggerContent>\n  <button\n    type=\"button\"\n    class=\"solaris-collapsible__trigger\"\n    [id]=\"triggerId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"panelId()\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"solaris-collapsible__trigger-label\">\n      @if (leadingIcon(); as leadingIconName) {\n        <solaris-icon\n          [name]=\"leadingIconName\"\n          class=\"solaris-collapsible__trigger-leading-icon\"\n          [decorative]=\"leadingIconDecorative()\"\n        />\n      }\n      {{ labelText() }}\n    </span>\n    <solaris-icon\n      [name]=\"effectiveIcon()\"\n      class=\"solaris-collapsible__trigger-icon\"\n      [decorative]=\"true\"\n    />\n  </button>\n</ng-template>\n\n<div\n  class=\"solaris-collapsible__panel\"\n  [id]=\"panelId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"triggerId()\"\n  [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n  [attr.inert]=\"isOpen() ? null : ''\"\n>\n  <div class=\"solaris-collapsible__panel-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-label{flex:1;min-width:0;display:inline-flex;align-items:center;gap:var(--solaris-collapsible-trigger-gap)}.solaris-collapsible__trigger-leading-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCollapsibleComponent, decorators: [{
             type: Component,
@@ -16949,8 +17172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                         '[attr.data-appearance]': 'effectiveAppearance()',
                         '[attr.data-open]': 'isOpen() ? "" : null',
                         '[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
-                    }, template: "@if (headingLevel()) {\n  @switch (headingLevel()) {\n    @case (2) {\n      <h2 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h2>\n    }\n    @case (3) {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n    @case (4) {\n      <h4 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h4>\n    }\n    @case (5) {\n      <h5 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h5>\n    }\n    @case (6) {\n      <h6 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h6>\n    }\n    @default {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n  }\n} @else {\n  <div class=\"solaris-collapsible__header\">\n    <ng-container *ngTemplateOutlet=\"triggerContent\" />\n  </div>\n}\n\n<ng-template #triggerContent>\n  <button\n    type=\"button\"\n    class=\"solaris-collapsible__trigger\"\n    [id]=\"triggerId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"panelId()\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"solaris-collapsible__trigger-label\">\n      {{ labelText() }}\n    </span>\n    <solaris-icon\n      [name]=\"effectiveIcon()\"\n      class=\"solaris-collapsible__trigger-icon\"\n      [decorative]=\"true\"\n    />\n  </button>\n</ng-template>\n\n<div\n  class=\"solaris-collapsible__panel\"\n  [id]=\"panelId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"triggerId()\"\n  [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n  [attr.inert]=\"isOpen() ? null : ''\"\n>\n  <div class=\"solaris-collapsible__panel-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"] }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+                    }, template: "@if (headingLevel()) {\n  @switch (headingLevel()) {\n    @case (2) {\n      <h2 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h2>\n    }\n    @case (3) {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n    @case (4) {\n      <h4 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h4>\n    }\n    @case (5) {\n      <h5 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h5>\n    }\n    @case (6) {\n      <h6 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h6>\n    }\n    @default {\n      <h3 class=\"solaris-collapsible__header\">\n        <ng-container *ngTemplateOutlet=\"triggerContent\" />\n      </h3>\n    }\n  }\n} @else {\n  <div class=\"solaris-collapsible__header\">\n    <ng-container *ngTemplateOutlet=\"triggerContent\" />\n  </div>\n}\n\n<ng-template #triggerContent>\n  <button\n    type=\"button\"\n    class=\"solaris-collapsible__trigger\"\n    [id]=\"triggerId()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-controls]=\"panelId()\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"solaris-collapsible__trigger-label\">\n      @if (leadingIcon(); as leadingIconName) {\n        <solaris-icon\n          [name]=\"leadingIconName\"\n          class=\"solaris-collapsible__trigger-leading-icon\"\n          [decorative]=\"leadingIconDecorative()\"\n        />\n      }\n      {{ labelText() }}\n    </span>\n    <solaris-icon\n      [name]=\"effectiveIcon()\"\n      class=\"solaris-collapsible__trigger-icon\"\n      [decorative]=\"true\"\n    />\n  </button>\n</ng-template>\n\n<div\n  class=\"solaris-collapsible__panel\"\n  [id]=\"panelId()\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"triggerId()\"\n  [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n  [attr.inert]=\"isOpen() ? null : ''\"\n>\n  <div class=\"solaris-collapsible__panel-inner\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-label{flex:1;min-width:0;display:inline-flex;align-items:center;gap:var(--solaris-collapsible-trigger-gap)}.solaris-collapsible__trigger-leading-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], leadingIconDecorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIconDecorative", required: false }] }] } });
 
 class SolarisAccordionComponent {
     appearance = input('boxed', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));