@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.210

package/Controls/Components/Overlays/Dialog/DialogStackBehavior.js

@@ -0,0 +1,246 @@
+// #region Imports
+import { DIALOG_STACK_DEFAULT_CONFIG } from './IDialogStackConfig';
+import { DIALOG_STACKED_CLASS } from './DialogService';
+// #endregion
+/**
+ * Behavior that manages a stack of dialogs with decreasing sizes.
+ * Each dialog in the stack is offset from the previous one, creating
+ * a cascading visual effect.
+ *
+ * @public
+ */
+export class DialogStackBehavior {
+    // #region Fields
+    _config;
+    _stack;
+    // #endregion
+    // #region Ctor
+    /**
+     * Constructs a new instance of the `DialogStackBehavior` class.
+     *
+     * @public
+     * @param config - Optional configuration for stack behavior.
+     */
+    constructor(config) {
+        this._config = {
+            ...DIALOG_STACK_DEFAULT_CONFIG,
+            ...config
+        };
+        this._stack = new Array();
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the current number of dialogs in the stack.
+     *
+     * @public
+     * @readonly
+     */
+    get stackSize() {
+        return this._stack.length;
+    }
+    /**
+     * Returns the current stack configuration.
+     *
+     * @public
+     * @readonly
+     */
+    get config() {
+        return this._config;
+    }
+    /**
+     * Returns an array of all dialog references in stack order (oldest first).
+     *
+     * @public
+     * @readonly
+     */
+    get stack() {
+        return this._stack;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Configures the dialog options before opening.
+     * Validates stack depth limits.
+     *
+     * @public
+     * @param options - The dialog options to configure.
+     */
+    configure(options) {
+        if (!options.enableStack) {
+            return;
+        }
+        // Check max stack depth
+        if (this._config.maxStackDepth !== undefined && this._stack.length >= this._config.maxStackDepth) {
+            throw new Error(`Cannot open dialog: maximum stack depth (${this._config.maxStackDepth}) reached.`);
+        }
+    }
+    /**
+     * Attaches a dialog to the stack and applies stack styling.
+     *
+     * @public
+     * @param ref - The dialog reference to attach.
+     */
+    attach(ref) {
+        if (!ref.options?.enableStack) {
+            return;
+        }
+        // Add stacked class to previous dialogs
+        this.applyStackedClasses();
+        // Calculate and apply stack styles
+        const stackLevel = this._stack.length;
+        const computedWidth = this.calculateWidth(stackLevel, ref.options.stackBaseWidth);
+        const computedHeight = this.calculateHeight(stackLevel, ref.options.stackBaseHeight);
+        this.applyStackStyles(ref, stackLevel, computedWidth, computedHeight);
+        // Add to stack
+        this._stack.push(ref);
+    }
+    /**
+     * Detaches a dialog from the stack.
+     *
+     * @public
+     * @param ref - The dialog reference to detach.
+     */
+    detach(ref) {
+        const index = this._stack.indexOf(ref);
+        if (index !== -1) {
+            this._stack.splice(index, 1);
+            // Recalculate sizes for remaining dialogs
+            this.recalculateStackSizes();
+            // Update stacked classes
+            this.applyStackedClasses();
+        }
+    }
+    /**
+     * Disposes of all resources and clears the stack.
+     *
+     * @public
+     */
+    dispose() {
+        this._stack.length = 0;
+    }
+    /**
+     * Calculates the width for a dialog at a specific stack level.
+     *
+     * @public
+     * @param stackLevel - The zero-based index of the dialog in the stack.
+     * @param baseWidthOverride - Optional override for the base width.
+     * @returns The calculated CSS width string.
+     */
+    calculateWidth(stackLevel, baseWidthOverride) {
+        const baseWidth = baseWidthOverride ?? this._config.baseWidth;
+        if (baseWidth === 'auto') {
+            return 'auto';
+        }
+        const reduction = stackLevel * this._config.stackThreshold;
+        // Parse the base width to determine format (%, px, vw, etc.)
+        const match = (/^(\d+(?:\.\d+)?)(%.*)$/).exec(baseWidth);
+        if (match) {
+            const numericValue = parseFloat(match[1]);
+            const unit = match[2];
+            const calculatedValue = Math.max(0, numericValue - reduction);
+            return `${calculatedValue}${unit}`;
+        }
+        // For calc(), vw, or other complex values, use CSS calc
+        return `calc(${baseWidth} - ${reduction}%)`;
+    }
+    /**
+     * Calculates the height for a dialog at a specific stack level.
+     *
+     * @public
+     * @param stackLevel - The zero-based index of the dialog in the stack.
+     * @param baseHeightOverride - Optional override for the base height.
+     * @returns The calculated CSS height string.
+     */
+    calculateHeight(stackLevel, baseHeightOverride) {
+        const baseHeight = baseHeightOverride ?? this._config.baseHeight;
+        if (baseHeight === 'auto') {
+            return 'auto';
+        }
+        const reduction = stackLevel * this._config.stackThreshold;
+        // Parse the base height to determine format (%, px, vh, etc.)
+        const match = (/^(\d+(?:\.\d+)?)(%.*)$/).exec(baseHeight);
+        if (match) {
+            const numericValue = parseFloat(match[1]);
+            const unit = match[2];
+            const calculatedValue = Math.max(0, numericValue - reduction);
+            return `${calculatedValue}${unit}`;
+        }
+        // For calc(), vh, or other complex values, use CSS calc
+        return `calc(${baseHeight} - ${reduction}%)`;
+    }
+    /**
+     * Calculates the z-index for a dialog at a specific stack level.
+     *
+     * @private
+     * @param stackLevel - The zero-based index of the dialog in the stack.
+     * @returns The calculated z-index value.
+     */
+    calculateZIndex(stackLevel) {
+        const baseZIndex = 1000;
+        return baseZIndex + (stackLevel * this._config.zIndexIncrement);
+    }
+    /**
+     * Applies the stacked CSS class to all dialogs except the topmost one.
+     *
+     * @private
+     */
+    applyStackedClasses() {
+        for (let i = 0; i < this._stack.length; i++) {
+            const ref = this._stack[i];
+            const isTopmost = i === this._stack.length - 1;
+            if (isTopmost) {
+                ref.dialogElement.classList.remove(DIALOG_STACKED_CLASS);
+            }
+            else {
+                ref.dialogElement.classList.add(DIALOG_STACKED_CLASS);
+            }
+        }
+    }
+    /**
+     * Recalculates and applies sizes for all remaining dialogs in the stack.
+     *
+     * @private
+     */
+    recalculateStackSizes() {
+        for (let i = 0; i < this._stack.length; i++) {
+            const ref = this._stack[i];
+            const newWidth = this.calculateWidth(i, ref.options?.stackBaseWidth);
+            const newHeight = this.calculateHeight(i, ref.options?.stackBaseHeight);
+            this.applyStackStyles(ref, i, newWidth, newHeight);
+        }
+    }
+    /**
+     * Applies stack-related styles to a dialog element.
+     *
+     * @private
+     * @param ref - The dialog reference.
+     * @param stackLevel - The stack level for this dialog.
+     * @param computedWidth - The computed width for this dialog.
+     * @param computedHeight - The computed height for this dialog.
+     */
+    applyStackStyles(ref, stackLevel, computedWidth, computedHeight) {
+        // Use data attributes for CSS styling hooks
+        ref.dialogElement.setAttribute('data-stack-level', String(stackLevel));
+        ref.dialogElement.setAttribute('data-computed-width', computedWidth);
+        ref.dialogElement.setAttribute('data-computed-height', computedHeight);
+        // Apply size directly via the component's properties
+        if (computedWidth !== 'auto') {
+            ref.dialogElement.width = computedWidth;
+        }
+        if (computedHeight !== 'auto') {
+            ref.dialogElement.height = computedHeight;
+        }
+    }
+}
+/**
+ * Creates a dialog stack behavior with the specified configuration.
+ *
+ * @public
+ * @param config - Optional configuration for the stack behavior.
+ * @returns A new DialogStackBehavior instance.
+ */
+export function withDialogStackBehavior(config) {
+    return new DialogStackBehavior(config);
+}
+//# sourceMappingURL=DialogStackBehavior.js.map

package/Controls/Components/Overlays/Dialog/DialogStackBehavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogStackBehavior.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Dialog/DialogStackBehavior.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAKlB,OAAO,EAA2B,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,aAAa;AAEb;;;;;;GAMG;AACH,MAAM,OAAO,mBAAmB;IAE5B,iBAAiB;IAEA,OAAO,CAAqB;IAC5B,MAAM,CAAoB;IAE3C,aAAa;IAEb,eAAe;IAEf;;;;;OAKG;IACH,YAAmB,MAAoC;QACnD,IAAI,CAAC,OAAO,GAAG;YACX,GAAG,2BAA2B;YAC9B,GAAG,MAAM;SACZ,CAAC;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,KAAK,EAAc,CAAC;IAC1C,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;OAKG;IACH,IAAW,SAAS;QAChB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IAC9B,CAAC;IAED;;;;;OAKG;IACH,IAAW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED;;;;;OAKG;IACH,IAAW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;;;;OAMG;IACI,SAAS,CAAC,OAAgC;QAC7C,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;YACvB,OAAO;QACX,CAAC;QAED,wBAAwB;QACxB,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;YAC/F,MAAM,IAAI,KAAK,CAAC,4CAA4C,IAAI,CAAC,OAAO,CAAC,aAAa,YAAY,CAAC,CAAC;QACxG,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACI,MAAM,CAAC,GAAe;QACzB,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC;YAC5B,OAAO;QACX,CAAC;QAED,wCAAwC;QACxC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE3B,mCAAmC;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QACtC,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAClF,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,GAAG,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACrF,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC;QAEtE,eAAe;QACf,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED;;;;;OAKG;IACI,MAAM,CAAC,GAAe;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACf,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YAE7B,0CAA0C;YAC1C,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAE7B,yBAAyB;YACzB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC/B,CAAC;IACL,CAAC;IAED;;;;OAIG;IACI,OAAO;QACV,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3B,CAAC;IAED;;;;;;;OAOG;IACI,cAAc,CAAC,UAAkB,EAAE,iBAA0B;QAChE,MAAM,SAAS,GAAG,iBAAiB,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;QAE9D,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;YACvB,OAAO,MAAM,CAAC;QAClB,CAAC;QAED,MAAM,SAAS,GAAG,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAE3D,6DAA6D;QAC7D,MAAM,KAAK,GAAG,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzD,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACtB,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC,CAAC;YAE9D,OAAO,GAAG,eAAe,GAAG,IAAI,EAAE,CAAC;QACvC,CAAC;QAED,wDAAwD;QACxD,OAAO,QAAQ,SAAS,MAAM,SAAS,IAAI,CAAC;IAChD,CAAC;IAED;;;;;;;OAOG;IACI,eAAe,CAAC,UAAkB,EAAE,kBAA2B;QAClE,MAAM,UAAU,GAAG,kBAAkB,IAAI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;QAEjE,IAAI,UAAU,KAAK,MAAM,EAAE,CAAC;YACxB,OAAO,MAAM,CAAC;QAClB,CAAC;QAED,MAAM,SAAS,GAAG,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAE3D,8DAA8D;QAC9D,MAAM,KAAK,GAAG,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1D,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YACtB,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC,CAAC;YAE9D,OAAO,GAAG,eAAe,GAAG,IAAI,EAAE,CAAC;QACvC,CAAC;QAED,wDAAwD;QACxD,OAAO,QAAQ,UAAU,MAAM,SAAS,IAAI,CAAC;IACjD,CAAC;IAED;;;;;;OAMG;IACK,eAAe,CAAC,UAAkB;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC;QAExB,OAAO,UAAU,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACpE,CAAC;IAED;;;;OAIG;IACK,mBAAmB;QACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAC3B,MAAM,SAAS,GAAG,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAE/C,IAAI,SAAS,EAAE,CAAC;gBACZ,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;YAC7D,CAAC;iBAAM,CAAC;gBACJ,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;YAC1D,CAAC;QACL,CAAC;IACL,CAAC;IAED;;;;OAIG;IACK,qBAAqB;QACzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;YACrE,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;YAExE,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC;IACL,CAAC;IAED;;;;;;;;OAQG;IACK,gBAAgB,CAAC,GAAe,EAAE,UAAkB,EAAE,aAAqB,EAAE,cAAsB;QACvG,4CAA4C;QAC5C,GAAG,CAAC,aAAa,CAAC,YAAY,CAAC,kBAAkB,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;QACvE,GAAG,CAAC,aAAa,CAAC,YAAY,CAAC,qBAAqB,EAAE,aAAa,CAAC,CAAC;QACrE,GAAG,CAAC,aAAa,CAAC,YAAY,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC;QAEvE,qDAAqD;QACrD,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;YAC3B,GAAG,CAAC,aAAa,CAAC,KAAK,GAAG,aAA0B,CAAC;QACzD,CAAC;QACD,IAAI,cAAc,KAAK,MAAM,EAAE,CAAC;YAC5B,GAAG,CAAC,aAAa,CAAC,MAAM,GAAG,cAA2B,CAAC;QAC3D,CAAC;IACL,CAAC;CAIJ;AAED;;;;;;GAMG;AACH,MAAM,UAAU,uBAAuB,CAAC,MAAoC;IACxE,OAAO,IAAI,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAC3C,CAAC"}

package/Controls/Components/Overlays/Dialog/IDialogServiceConfig.d.ts

@@ -0,0 +1,30 @@
+import type { IOverlayServiceConfig } from '../Abstracts/IOverlayServiceConfig';
+import type { IDialogRef, IDialogOptions } from './DialogService';
+import type { IOverlayBehavior } from '../Abstracts/IOverlayBehavior';
+/**
+ * Dialog behavior type.
+ *
+ * @public
+ */
+export type IDialogBehavior = IOverlayBehavior<IDialogRef, IDialogOptions>;
+/**
+ * Configuration for the dialog service.
+ * Extends the base overlay service config with dialog-specific options.
+ *
+ * @public
+ */
+export interface IDialogServiceConfig extends IOverlayServiceConfig<IDialogBehavior> {
+    /**
+     * Whether to close dialogs when navigating away (popstate event).
+     *
+     * @default true
+     */
+    readonly closeOnNavigation?: boolean;
+}
+/**
+ * Default configuration for the dialog service.
+ *
+ * @public
+ */
+export declare const DIALOG_SERVICE_DEFAULT_CONFIG: IDialogServiceConfig;
+//# sourceMappingURL=IDialogServiceConfig.d.ts.map

package/Controls/Components/Overlays/Dialog/IDialogServiceConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDialogServiceConfig.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Dialog/IDialogServiceConfig.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAItE;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAE3E;;;;;GAKG;AACH,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB,CAAC,eAAe,CAAC;IAIhF;;;;OAIG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAIxC;AAED;;;;GAIG;AACH,eAAO,MAAM,6BAA6B,EAAE,oBAG3C,CAAC"}

package/Controls/Components/Overlays/Dialog/IDialogServiceConfig.js

@@ -0,0 +1,11 @@
+// #region Imports
+/**
+ * Default configuration for the dialog service.
+ *
+ * @public
+ */
+export const DIALOG_SERVICE_DEFAULT_CONFIG = {
+    behaviors: [],
+    closeOnNavigation: true
+};
+//# sourceMappingURL=IDialogServiceConfig.js.map

package/Controls/Components/Overlays/Dialog/IDialogServiceConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDialogServiceConfig.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Dialog/IDialogServiceConfig.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAoClB;;;;GAIG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAyB;IAC/D,SAAS,EAAE,EAAE;IACb,iBAAiB,EAAE,IAAI;CAC1B,CAAC"}

package/Controls/Components/Overlays/Dialog/IDialogStackConfig.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Display modes for the dialog service.
+ * - 'default': Normal dialog behavior, each dialog opens independently.
+ * - 'stacked': Dialogs cascade with configurable size reduction per level.
+ *
+ * @public
+ */
+export type DialogDisplayMode = 'default' | 'stacked';
+/**
+ * Configuration for the dialog stack behavior.
+ * Controls how multiple dialogs are displayed in a cascaded/stacked manner.
+ *
+ * @public
+ */
+export interface IDialogStackConfig {
+    /**
+     * The display mode for dialogs opened through this service.
+     * - 'default': Normal dialog behavior, each dialog opens independently.
+     * - 'stacked': Dialogs cascade with configurable size reduction per level.
+     *
+     * @default 'default'
+     */
+    readonly displayMode: DialogDisplayMode;
+    /**
+     * The base width of the first dialog in the stack.
+     * Can be a percentage (e.g., '80%', '90%') or a fixed value (e.g., '800px').
+     *
+     * @default 'auto'
+     */
+    readonly baseWidth: string;
+    /**
+     * The base height of the first dialog in the stack.
+     * Can be a percentage (e.g., '80%', '90%') or a fixed value (e.g., '600px').
+     *
+     * @default 'auto'
+     */
+    readonly baseHeight: string;
+    /**
+     * The percentage threshold to reduce size for each subsequent dialog in the stack.
+     * For example, if baseWidth is 80% and threshold is 4, the second dialog will be 76%, third 72%, etc.
+     *
+     * @default 4
+     */
+    readonly stackThreshold: number;
+    /**
+     * The maximum number of dialogs that can be stacked.
+     * When this limit is reached, opening a new dialog will throw an error.
+     * Set to undefined for unlimited stacking.
+     *
+     * @default undefined
+     */
+    readonly maxStackDepth?: number;
+    /**
+     * The z-index increment for each stacked dialog.
+     * Ensures that newer dialogs appear above older ones.
+     *
+     * @default 10
+     */
+    readonly zIndexIncrement: number;
+    /**
+     * Whether to show a visual indicator (shadow/edge) of dialogs beneath the top one.
+     *
+     * @default true
+     */
+    readonly showStackIndicator: boolean;
+    /**
+     * The visual offset (in pixels) to show a hint of the dialog beneath.
+     * Only applies when showStackIndicator is true.
+     *
+     * @default 8
+     */
+    readonly stackIndicatorOffset: number;
+}
+/**
+ * Default configuration for dialog stacking behavior.
+ *
+ * @public
+ */
+export declare const DIALOG_STACK_DEFAULT_CONFIG: IDialogStackConfig;
+//# sourceMappingURL=IDialogStackConfig.d.ts.map

package/Controls/Components/Overlays/Dialog/IDialogStackConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDialogStackConfig.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Dialog/IDialogStackConfig.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IAI/B;;;;;;OAMG;IACH,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IAExC;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAE3B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAE5B;;;;;OAKG;IACH,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAEhC;;;;;;OAMG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEhC;;;;;OAKG;IACH,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IAEjC;;;;OAIG;IACH,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAErC;;;;;OAKG;IACH,QAAQ,CAAC,oBAAoB,EAAE,MAAM,CAAC;CAIzC;AAED;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAE,kBASzC,CAAC"}

package/Controls/Components/Overlays/Dialog/IDialogStackConfig.js

@@ -0,0 +1,17 @@
+// #region Imports
+/**
+ * Default configuration for dialog stacking behavior.
+ *
+ * @public
+ */
+export const DIALOG_STACK_DEFAULT_CONFIG = {
+    displayMode: 'default',
+    baseWidth: 'auto',
+    baseHeight: 'auto',
+    stackThreshold: 4,
+    maxStackDepth: undefined,
+    zIndexIncrement: 10,
+    showStackIndicator: true,
+    stackIndicatorOffset: 8
+};
+//# sourceMappingURL=IDialogStackConfig.js.map

package/Controls/Components/Overlays/Dialog/IDialogStackConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IDialogStackConfig.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Dialog/IDialogStackConfig.ts"],"names":[],"mappings":"AAAA,kBAAkB;AA4FlB;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAuB;IAC3D,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,MAAM;IAClB,cAAc,EAAE,CAAC;IACjB,aAAa,EAAE,SAAS;IACxB,eAAe,EAAE,EAAE;IACnB,kBAAkB,EAAE,IAAI;IACxB,oBAAoB,EAAE,CAAC;CAC1B,CAAC"}

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Joy.js

@@ -13,7 +13,7 @@ import { css } from '../../../../../Dom/Css';
 export function dialogElementJoyStyle() {
     return css `
 :host {
-  --dialog-background-color: var(--joy-scheme-background);
+  --dialog-background-color: var(--joy-scheme-surface);
   --dialog-border-color: var(--joy-scheme-highlight);
   --dialog-border-radius: var(--joy-layout-radius);
   --dialog-border-style: solid;

package/Controls/Components/Overlays/Dialog/Themes/DialogHeaderSubTextElement.Joy.js

@@ -13,7 +13,7 @@ import { css } from '../../../../../Dom/Css';
 export function dialogHeaderSubTextElementJoyStyle() {
     return css `
 :host {
-  --dialog-header-sub-text-background-color: var(--joy-scheme-background);
+  --dialog-header-sub-text-background-color: var(--joy-scheme-transparent);
   --dialog-header-sub-text-border-color: var(--joy-scheme-highlight);
   --dialog-header-sub-text-font-family: var(--joy-font-family);
   --dialog-header-sub-text-font-letter-spacing: var(--joy-typography-subtitle2-letter-spacing);

package/Controls/Components/Overlays/Dialog/Themes/DialogHeaderTextElement.Joy.js

@@ -13,7 +13,7 @@ import { css } from '../../../../../Dom/Css';
 export function dialogHeaderTextElementJoyStyle() {
     return css `
 :host {
-  --dialog-header-text-background-color: var(--joy-scheme-background);
+  --dialog-header-text-background-color: var(--joy-scheme-transparent);
   --dialog-header-text-border-color: var(--joy-scheme-highlight);
   --dialog-header-text-font-family: var(--joy-font-family);
   --dialog-header-text-font-letter-spacing: var(--joy-typography-headline6-letter-spacing);

package/Controls/Components/Overlays/Drawer/DrawerContentElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContentElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerContentElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;;AAQ1E;;;;;;;;GAQG;AACH,qBAca,oBACT,SAAQ,yBACR,YAAW,0BAA0B;IAIrC,OAAO,CAAC,OAAO,CAAU;IAMzB;;OAEG;;IAWH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,OAAO,KAAK,MAAM,QAIjB;IAMD;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAkB1C;;;OAGG;IAEH,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;CAU3E;AAED;;EAEE;AACF,yBAAiB,oBAAoB,CAAC;IAClC,KAAY,KAAK,GAAG,0BAA0B,CAAC;CAClD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,oBAAoB,CAAC;KACjD;CACJ"}
+{"version":3,"file":"DrawerContentElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerContentElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;;AAQ1E;;;;;;;;GAQG;AACH,qBAca,oBACT,SAAQ,yBACR,YAAW,0BAA0B;IAIrC,OAAO,CAAC,OAAO,CAAU;IAMzB;;OAEG;;IAWH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,OAAO,KAAK,MAAM,QAIjB;IAMD;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAmB1C;;;OAGG;IAEH,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;CAU3E;AAED;;EAEE;AACF,yBAAiB,oBAAoB,CAAC;IAClC,KAAY,KAAK,GAAG,0BAA0B,CAAC;CAClD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,oBAAoB,CAAC;KACjD;CACJ"}

package/Controls/Components/Overlays/Drawer/DrawerContentElement.js

@@ -77,12 +77,13 @@ let DrawerContentElement = class DrawerContentElement extends Themeable(CustomEl
      */
     onApplyTemplate() {
         super.onApplyTemplate();
-        const container = DomServiceLocator.current.findAncestor(this, DrawerContainerElement, { strict: true });
+        // we use strict false here because for standalone drawers (DrawerService) the container is not necessarily.
+        const container = DomServiceLocator.current.findAncestor(this, DrawerContainerElement, { strict: false });
         // If the container is not the parent of this element, then return.
         // if (container.content !== this) {
         //     return;
         // }
-        container.on('contentMarginChanged', (e) => {
+        container?.on('contentMarginChanged', (e) => {
             RendererServiceLocator.current.setStyle(this, 'margin-left', `${e.detail.left}px`);
             RendererServiceLocator.current.setStyle(this, 'margin-right', `${e.detail.right}px`);
             this.opened = container.drawer?.isOpen ?? false;

package/Controls/Components/Overlays/Drawer/DrawerContentElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContentElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerContentElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DrawerContentElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerContentElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts

@@ -1,8 +1,10 @@
+import { IAnimatable } from '../../../Behaviors/Animatable';
 import { DrawerMode } from '../../../Types/DrawerMode';
 import { DrawerPosition } from '../../../Types/DrawerPosition';
 import { OverlayElement } from '../Abstracts/OverlayElement';
 import type { IDrawerElementProps } from './IDrawerElementProps';
-declare const DrawerElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Animatable").IAnimatableProps & import("../../../Behaviors/Animatable").IAnimatable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Dimensionable").IDimensionableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Elevatable").IElevatableProps) & typeof OverlayElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+import { ISlottable } from '../../../Behaviors/Slottable';
+declare const DrawerElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Animatable").IAnimatableProps & IAnimatable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Dimensionable").IDimensionableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Elevatable").IElevatableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & typeof OverlayElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
  * Drawer - A hidden side view or container that can be opened from the side or bottom to display additional content.
  *
@@ -23,7 +25,7 @@ declare const DrawerElement_base: (abstract new (...args: Array<any>) => import(
  *
  * @public
  */
-export declare class DrawerElement extends DrawerElement_base implements IDrawerElementProps {
+export declare class DrawerElement extends DrawerElement_base implements IDrawerElementProps, ISlottable, IAnimatable {
     private _isComposed;
     private _header;
     private _subHeader;
@@ -92,6 +94,15 @@ export declare class DrawerElement extends DrawerElement_base implements IDrawer
      */
     get hasShadow(): boolean;
     set hasShadow(value: boolean);
+    /**
+     * Gets the animation target element.
+     * For the drawer, animations are applied to the root template part instead of the host element.
+     *
+     * @public
+     * @override
+     * @readonly
+     */
+    get animationTarget(): HTMLElement;
     /**
      * Opens the drawer.
      *
@@ -118,6 +129,14 @@ export declare class DrawerElement extends DrawerElement_base implements IDrawer
      * @public
      */
     innerOffsetWidth(): number;
+    /**
+     * Handles the backdrop click event.
+     * Only closes the drawer if `clickOutsideToClose` is enabled.
+     *
+     * @private
+     * @template
+     */
+    onBackdrop(): void;
     /**
      * @protected
      * @override

package/Controls/Components/Overlays/Drawer/DrawerElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerElement.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAM/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAUjE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAea,aACT,SAAQ,kBACR,YAAW,mBAAmB;IAI9B,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,UAAU,CAAU;IAM5B;;OAEG;;IA2BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAKjC;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,cAAc,CAEpC;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,cAAc,EAKxC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,UAAU,CAE5B;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,UAAU,EAKhC;IAED;;;;;;OAMG;IACH,IAIW,UAAU,IAAI,OAAO,CAE/B;IAED,OAAO,KAAK,UAAU,QAKrB;IAED;;;;;OAKG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAMD;;;;;OAKG;IACmB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAM3C;;;;;OAKG;IACmB,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC;IAI/C;;;;OAIG;IACU,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQpC;;;;OAIG;IACI,gBAAgB,IAAI,MAAM;IAIjC;;;OAGG;cACgB,eAAe,IAAI,IAAI;CAU7C;AAED;;EAEE;AACF,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}
+{"version":3,"file":"DrawerElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Drawer/DrawerElement.ts"],"names":[],"mappings":"AAMA,OAAO,EAAc,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAKxE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAM/D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAYjE,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;;AAIrE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAoBa,aACT,SAAQ,kBACR,YAAW,mBAAmB,EAAE,UAAU,EAAE,WAAW;IAIvD,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,UAAU,CAAU;IAM5B;;OAEG;;IA2BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,MAAM,CAE7B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAKjC;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,cAAc,CAEpC;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,cAAc,EAKxC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,UAAU,CAE5B;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,UAAU,EAKhC;IAED;;;;;;OAMG;IACH,IAIW,UAAU,IAAI,OAAO,CAE/B;IAED,OAAO,KAAK,UAAU,QAKrB;IAED;;;;;OAKG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAED;;;;;;;OAOG;IACH,IAAoB,eAAe,IAAI,WAAW,CAEjD;IAMD;;;;;OAKG;IACmB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAM3C;;;;;OAKG;IACmB,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC;IAI/C;;;;OAIG;IACU,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAQpC;;;;OAIG;IACI,gBAAgB,IAAI,MAAM;IAIjC;;;;;;OAMG;IACI,UAAU,IAAI,IAAI;IAMzB;;;OAGG;cACgB,eAAe,IAAI,IAAI;CAU7C;AAED;;EAEE;AACF,yBAAiB,aAAa,CAAC;IAC3B,KAAY,KAAK,GAAG,mBAAmB,CAAC;CAC3C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,eAAe,EAAE,aAAa,CAAC;KAClC;CACJ"}

package/Controls/Components/Overlays/Drawer/DrawerElement.js

@@ -20,8 +20,8 @@ import { DrawerMode } from '../../../Types/DrawerMode';
 import { DrawerPosition } from '../../../Types/DrawerPosition';
 import { ElevationWeight } from '../../../Types/ElevationWeight';
 import { ButtonElement } from '../../Buttons/Button/ButtonElement';
-import { ToolbarElement } from '../../Grouping/Toolbar/ToolbarElement';
 import { BackdropElement } from '../../Primitives/Backdrop/BackdropElement';
+import { DismissElement } from '../../Primitives/Dismiss/DismissElement';
 import { ElevationElement } from '../../Primitives/Elevation/ElevationElement';
 import { OverlayElement } from '../Abstracts/OverlayElement';
 import { drawerElementTemplate } from './DrawerElementTemplate';
@@ -31,6 +31,12 @@ import { drawerElementMemphisStyle } from './Themes/DrawerElement.Memphis';
 import { drawerElementCosmopolitanStyle } from './Themes/DrawerElement.Cosmopolitan';
 import { DrawerContainerElement } from './DrawerContainerElement';
 import { Themeable } from '../../../Behaviors/Themeable';
+import { TextElement } from '../../Primitives/Text/TextElement';
+import { DrawerHeaderElement } from './DrawerHeaderElement';
+import { DrawerHeaderTextElement } from './DrawerHeaderTextElement';
+import { DrawerHeaderSubTextElement } from './DrawerHeaderSubTextElement';
+import { DrawerFooterElement } from './DrawerFooterElement';
+import { Slottable } from '../../../Behaviors/Slottable';
 // #endregion
 /**
  * Drawer - A hidden side view or container that can be opened from the side or bottom to display additional content.
@@ -52,7 +58,7 @@ import { Themeable } from '../../../Behaviors/Themeable';
  *
  * @public
  */
-let DrawerElement = class DrawerElement extends Themeable(Animatable(Dimensionable(Elevatable(OverlayElement)))) {
+let DrawerElement = class DrawerElement extends Themeable(Animatable(Dimensionable(Elevatable(Slottable(OverlayElement))))) {
     // #region Fields
     _isComposed;
     _header;
@@ -187,6 +193,17 @@ let DrawerElement = class DrawerElement extends Themeable(Animatable(Dimensionab
             this.requestUpdate('hasShadow');
         }
     }
+    /**
+     * Gets the animation target element.
+     * For the drawer, animations are applied to the root template part instead of the host element.
+     *
+     * @public
+     * @override
+     * @readonly
+     */
+    get animationTarget() {
+        return this.getTemplatePart('root');
+    }
     // #endregion
     // #region Methods
     /**
@@ -228,6 +245,18 @@ let DrawerElement = class DrawerElement extends Themeable(Animatable(Dimensionab
     innerOffsetWidth() {
         return this.getTemplatePart('root').offsetWidth;
     }
+    /**
+     * Handles the backdrop click event.
+     * Only closes the drawer if `clickOutsideToClose` is enabled.
+     *
+     * @private
+     * @template
+     */
+    onBackdrop() {
+        if (this.clickOutsideToClose) {
+            void this.close();
+        }
+    }
     /**
      * @protected
      * @override
@@ -285,10 +314,15 @@ DrawerElement = __decorate([
             cosmopolitan: drawerElementCosmopolitanStyle
         },
         imports: [
-            ToolbarElement,
             ButtonElement,
+            TextElement,
             BackdropElement,
-            ElevationElement
+            DismissElement,
+            ElevationElement,
+            DrawerHeaderElement,
+            DrawerHeaderTextElement,
+            DrawerHeaderSubTextElement,
+            DrawerFooterElement
         ]
     }),
     __metadata("design:paramtypes", [])