@carbon/ibm-products-web-components 0.35.0 → 0.36.0

package/es/components/tearsheet-preview/tearsheet.js

@@ -1,362 +1,240 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2020, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { __decorate } from 'tslib';
-import { LitElement, html } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { prefix } from '../../globals/settings.js';
-import styles from './tearsheet.scss.js';
-import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { MatchMediaController } from '../../globals/js/utils/match-media-controller.js';
-import { breakpoints } from '../../node_modules/@carbon/layout/es/index.js';
-import { updateTearsheetSignals, blockClass } from './tearsheet-signal.js';
-import { SignalWatcher } from '@lit-labs/signals';
-import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { stackManager } from './stack-signal.js';
+import { prefix } from "../../globals/settings.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import tearsheet_default$1 from "./tearsheet.scss.js";
+import { MatchMediaController } from "../../globals/js/utils/match-media-controller.js";
+import { blockClass, updateTearsheetSignals } from "./tearsheet-signal.js";
+import { stackManager } from "./stack-signal.js";
+import { LitElement, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
+import { classMap } from "lit-html/directives/class-map.js";
+import { breakpoints } from "@carbon/layout";
+import { SignalWatcher } from "@lit-labs/signals";
+import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener";
+import { ifDefined } from "lit/directives/if-defined.js";
 
+//#region src/components/tearsheet-preview/tearsheet.ts
 /**
- * @license
- *
- * Copyright IBM Corp. 2026
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
+* @license
+*
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 /**
- * Tearsheet component - A slide-out panel for displaying detailed content.
- *
- * @element c4p-preview-tearsheet
- * @slot header - The header content of the tearsheet
- * @slot influencer - Optional left sidebar content (wide variant only)
- * @slot body - Main body content
- * @slot footer - Footer content with actions
- * @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close
- * @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed
- */
+* Tearsheet component - A slide-out panel for displaying detailed content.
+*
+* @element c4p-preview-tearsheet
+* @slot header - The header content of the tearsheet
+* @slot influencer - Optional left sidebar content (wide variant only)
+* @slot body - Main body content
+* @slot footer - Footer content with actions
+* @fires c4p-preview-tearsheet-beingclosed - Fired when the tearsheet is about to close
+* @fires c4p-preview-tearsheet-closed - Fired after the tearsheet has closed
+*/
 let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(LitElement)) {
-    constructor() {
-        super(...arguments);
-        /**
-         * Specifies whether the tearsheet is currently open.
-         */
-        this.open = false;
-        /**
-         * User can pass any class names that will be added to the modal container
-         */
-        this.containerClassName = '';
-        /**
-         * Default influencer takes 256px, this allows override eg: 300px, 20rem
-         */
-        this.influencerWidth = '';
-        /**
-         * Default summary content takes 256px, this allows override eg: 300px, 20rem
-         */
-        this.summaryContentWidth = '';
-        /**
-         * Defines the gap from top of the viewport. Defaulted to 3rem
-         */
-        this.verticalGap = '';
-        /**
-         * Default to wide variant. Pass in narrow for narrow tearsheet
-         */
-        this.variant = 'wide';
-        /**
-         * Specify the CSS selectors that match the floating menus (comma-separated)
-         */
-        this.selectorsFloatingMenus = '';
-        /**
-         * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
-         */
-        this.selectorPrimaryFocus = '';
-        /**
-         * Prevents the modal from closing when clicking outside
-         */
-        this.preventCloseOnClickOutside = false;
-        /**
-         * Unique ID for this tearsheet instance
-         */
-        this.uniqueId = `tearsheet-${Math.random().toString(36).substr(2, 9)}`;
-        /**
-         * Internal state for tracking if the tearsheet is in small screen mode
-         */
-        this.isSm = false;
-        this.smMediaQuery = `(max-width: ${breakpoints.md.width})`;
-        this.isSmallDevice = new MatchMediaController(this, this.smMediaQuery, false);
-        /**
-         * Handle influencer slot change
-         */
-        this.handleInfluencerSlotChange = (e) => {
-            const slot = e.target;
-            this.updateInfluencerVisibility(slot);
-        };
-        /**
-         * Handle close button click from the header
-         * This is an internal event that triggers the tearsheet to close
-         */
-        this.handleHeaderCloseButtonClick = (event) => {
-            // Stop the internal event from propagating
-            event.stopPropagation();
-            this.closeTearsheet();
-        };
-        /**
-         * Handle close event from the modal (ESC key, click outside, etc.)
-         */
-        this.handleClose = (event) => {
-            this.closeTearsheet(event, true);
-        };
-    }
-    /**
-     * Checks if the tearsheet has a decorator (AI label or other)
-     */
-    get hasDecorator() {
-        const headerElement = this.querySelector(`${prefix}-tearsheet-header`);
-        if (!headerElement) {
-            return false;
-        }
-        const decorator = headerElement.querySelector('[slot="decorator"]');
-        return !!decorator;
-    }
-    /**
-     * Checks if the tearsheet has an AI label decorator
-     */
-    get hasAILabel() {
-        const headerElement = this.querySelector(`${prefix}-tearsheet-header`);
-        if (!headerElement) {
-            return false;
-        }
-        const decorator = headerElement.querySelector('[slot="decorator"]');
-        if (!decorator) {
-            return false;
-        }
-        const tagName = decorator.tagName.toLowerCase();
-        return tagName === 'cds-ai-label' || tagName === `${prefix}-ai-label`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Set visibility class
-        if (this.open) {
-            this.classList.add('is-visible');
-        }
-        else {
-            this.classList.remove('is-visible');
-        }
-        // Listen for close button click from header
-        this.addEventListener(`${prefix}-tearsheet-header-close-button-clicked`, this.handleHeaderCloseButtonClick);
-    }
-    firstUpdated(_changedProperties) {
-        var _a;
-        this.updateCSSCustomProperties();
-        this.isSm = ((_a = this.isSmallDevice) === null || _a === void 0 ? void 0 : _a.matches) || this.variant === 'narrow';
-        // Initialize all signals on first update
-        updateTearsheetSignals({
-            variant: this.variant,
-            isSm: this.isSm,
-            open: this.open,
-            hasAILabel: this.hasAILabel,
-        });
-    }
-    updated(_changedProperties) {
-        this.updateIsSmState(_changedProperties);
-        this.handleOpenPropertyChange(_changedProperties);
-        this.updateCSSPropertiesIfNeeded(_changedProperties);
-        if (_changedProperties.has('variant')) {
-            updateTearsheetSignals({ variant: this.variant });
-        }
-        if (_changedProperties.has('isSm')) {
-            this.updateInfluencerVisibility();
-        }
-        this.updateStackPropertiesIfNeeded();
-    }
-    updateIsSmState(_changedProperties) {
-        var _a;
-        const previousIsSm = this.isSm;
-        this.isSm = ((_a = this.isSmallDevice) === null || _a === void 0 ? void 0 : _a.matches) || this.variant === 'narrow';
-        if (this.isSm !== previousIsSm) {
-            updateTearsheetSignals({ isSm: this.isSm });
-        }
-    }
-    handleOpenPropertyChange(_changedProperties) {
-        if (!_changedProperties.has('open')) {
-            return;
-        }
-        updateTearsheetSignals({ open: this.open });
-        if (this.modalBodyElement) {
-            stackManager.notifyStack(this.uniqueId, this.open, this.modalBodyElement);
-        }
-        this.classList.toggle('is-visible', this.open);
-        this.updateStackProperties();
-    }
-    updateCSSPropertiesIfNeeded(_changedProperties) {
-        const hasRelevantChanges = _changedProperties.has('influencerWidth') ||
-            _changedProperties.has('summaryContentWidth') ||
-            _changedProperties.has('verticalGap');
-        if (hasRelevantChanges) {
-            this.updateCSSCustomProperties();
-        }
-    }
-    updateStackPropertiesIfNeeded() {
-        const stackState = stackManager.state;
-        if (stackState.stack.length > 0) {
-            this.updateStackProperties();
-        }
-    }
-    /**
-     * Update CSS custom properties for stacking
-     */
-    updateStackProperties() {
-        const stackState = stackManager.state;
-        const depth = stackManager.getDepth(this.uniqueId);
-        const scaleFactor = stackManager.getScaleFactor(this.uniqueId);
-        const blockSizeChange = stackManager.getBlockSizeChange(this.uniqueId);
-        // Manage --stack-activated class on host element
-        if (stackState.stack.length > 1) {
-            this.classList.add(`${blockClass}--stack-activated`);
-        }
-        else {
-            this.classList.remove(`${blockClass}--stack-activated`);
-        }
-        if (depth !== -1) {
-            this.style.setProperty('--stack-depth', depth.toString());
-            this.style.setProperty('--scale-factor', scaleFactor.toString());
-            this.style.setProperty('--block-size-change', blockSizeChange);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Remove event listener
-        this.removeEventListener(`${prefix}-tearsheet-header-close-button-clicked`, this.handleHeaderCloseButtonClick);
-        // Notify stack manager that this tearsheet is closing
-        stackManager.notifyStack(this.uniqueId, false, null);
-        // Clean up CSS custom properties
-        if (this.influencerWidth) {
-            document.documentElement.style.removeProperty('--tearsheet-influencer-width');
-        }
-        if (this.summaryContentWidth) {
-            document.documentElement.style.removeProperty('--tearsheet-summary-content-width');
-        }
-        if (this.verticalGap) {
-            document.documentElement.style.removeProperty('--tearsheet-vertical-gap');
-        }
-    }
-    /**
-     * Update CSS custom properties for dynamic styling
-     */
-    updateCSSCustomProperties() {
-        if (this.influencerWidth) {
-            document.documentElement.style.setProperty('--tearsheet-influencer-width', this.influencerWidth);
-        }
-        if (this.summaryContentWidth) {
-            document.documentElement.style.setProperty('--tearsheet-summary-content-width', this.summaryContentWidth);
-        }
-        if (this.verticalGap) {
-            document.documentElement.style.setProperty('--tearsheet-vertical-gap', this.verticalGap);
-        }
-    }
-    /**
-     * Update influencer visibility based on slot content and screen size
-     * Handles both slot changes and screen size changes
-     */
-    updateInfluencerVisibility(slot) {
-        var _a;
-        const influencerSlot = slot ||
-            ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="influencer"]'));
-        if (!influencerSlot) {
-            return;
-        }
-        const hasContent = influencerSlot.assignedNodes({ flatten: true }).length > 0;
-        const shouldShow = hasContent && !this.isSm;
-        // Update CSS class on modal body
-        if (this.modalBodyElement) {
-            if (shouldShow) {
-                this.modalBodyElement.classList.add(`${blockClass}__body-layout--has-influencer`);
-            }
-            else {
-                this.modalBodyElement.classList.remove(`${blockClass}__body-layout--has-influencer`);
-            }
-        }
-    }
-    /**
-     * Common method to handle tearsheet close with proper event dispatching
-     * @param originalEvent - The original event that triggered the close (optional)
-     * @param useAsync - Whether to dispatch closed event asynchronously
-     */
-    closeTearsheet(originalEvent, useAsync = false) {
-        // Dispatch the beingclosed event (cancelable)
-        const beforeCloseEvent = new CustomEvent(`${prefix}-preview-tearsheet-beingclosed`, {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: {},
-        });
-        if (!this.dispatchEvent(beforeCloseEvent)) {
-            // If event was cancelled, prevent closing
-            if (originalEvent) {
-                originalEvent.preventDefault();
-            }
-            return;
-        }
-        // Close the tearsheet
-        this.open = false;
-        // Dispatch closed event
-        const dispatchClosedEvent = () => {
-            this.dispatchEvent(new CustomEvent(`${prefix}-preview-tearsheet-closed`, {
-                bubbles: true,
-                composed: true,
-                detail: {},
-            }));
-        };
-        if (useAsync) {
-            // Use microtask for async scenarios (e.g., click outside)
-            Promise.resolve().then(dispatchClosedEvent);
-        }
-        else {
-            dispatchClosedEvent();
-        }
-    }
-    /**
-     * Parse floating menu selectors from comma-separated string
-     */
-    getFloatingMenuSelectors() {
-        const defaultSelectors = [
-            `.${prefix}--overflow-menu-options`,
-            `.${prefix}--tooltip`,
-            '.flatpickr-calendar',
-            `.${blockClass}__container`,
-            `.${prefix}--menu`,
-        ];
-        const customSelectors = this.selectorsFloatingMenus
-            ? this.selectorsFloatingMenus.split(',').map((s) => s.trim())
-            : [];
-        return [...defaultSelectors, ...customSelectors].join(',');
-    }
-    render() {
-        const classes = classMap({
-            [blockClass]: true,
-            [`${blockClass}--wide`]: this.variant === 'wide',
-            [`${blockClass}--narrow`]: this.variant === 'narrow',
-            [`${blockClass}--has-ai-label`]: this.hasAILabel,
-            [`${blockClass}--has-decorator`]: this.hasDecorator && !this.hasAILabel,
-        });
-        const containerClasses = `${blockClass}__container ${this.containerClassName}`;
-        return html `<cds-modal
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.containerClassName = "";
+		this.influencerWidth = "";
+		this.summaryContentWidth = "";
+		this.verticalGap = "";
+		this.variant = "wide";
+		this.selectorsFloatingMenus = "";
+		this.selectorPrimaryFocus = "";
+		this.preventCloseOnClickOutside = false;
+		this.uniqueId = `tearsheet-${Math.random().toString(36).substr(2, 9)}`;
+		this.isSm = false;
+		this.smMediaQuery = `(max-width: ${breakpoints.md.width})`;
+		this.isSmallDevice = new MatchMediaController(this, this.smMediaQuery, false);
+		this.handleInfluencerSlotChange = (e) => {
+			const slot = e.target;
+			this.updateInfluencerVisibility(slot);
+		};
+		this.handleHeaderCloseButtonClick = (event) => {
+			event.stopPropagation();
+			this.closeTearsheet();
+		};
+		this.handleClose = (event) => {
+			this.closeTearsheet(event, true);
+		};
+	}
+	/**
+	* Checks if the tearsheet has a decorator (AI label or other)
+	*/
+	get hasDecorator() {
+		const headerElement = this.querySelector(`${prefix}-tearsheet-header`);
+		if (!headerElement) return false;
+		return !!headerElement.querySelector("[slot=\"decorator\"]");
+	}
+	/**
+	* Checks if the tearsheet has an AI label decorator
+	*/
+	get hasAILabel() {
+		const headerElement = this.querySelector(`${prefix}-tearsheet-header`);
+		if (!headerElement) return false;
+		const decorator = headerElement.querySelector("[slot=\"decorator\"]");
+		if (!decorator) return false;
+		const tagName = decorator.tagName.toLowerCase();
+		return tagName === "cds-ai-label" || tagName === `${prefix}-ai-label`;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.open) this.classList.add("is-visible");
+		else this.classList.remove("is-visible");
+		this.addEventListener(`${prefix}-tearsheet-header-close-button-clicked`, this.handleHeaderCloseButtonClick);
+	}
+	firstUpdated(_changedProperties) {
+		this.updateCSSCustomProperties();
+		this.isSm = this.isSmallDevice?.matches || this.variant === "narrow";
+		updateTearsheetSignals({
+			variant: this.variant,
+			isSm: this.isSm,
+			open: this.open,
+			hasAILabel: this.hasAILabel
+		});
+	}
+	updated(_changedProperties) {
+		this.updateIsSmState(_changedProperties);
+		this.handleOpenPropertyChange(_changedProperties);
+		this.updateCSSPropertiesIfNeeded(_changedProperties);
+		if (_changedProperties.has("variant")) updateTearsheetSignals({ variant: this.variant });
+		if (_changedProperties.has("isSm")) this.updateInfluencerVisibility();
+		this.updateStackPropertiesIfNeeded();
+	}
+	updateIsSmState(_changedProperties) {
+		const previousIsSm = this.isSm;
+		this.isSm = this.isSmallDevice?.matches || this.variant === "narrow";
+		if (this.isSm !== previousIsSm) updateTearsheetSignals({ isSm: this.isSm });
+	}
+	handleOpenPropertyChange(_changedProperties) {
+		if (!_changedProperties.has("open")) return;
+		updateTearsheetSignals({ open: this.open });
+		if (this.modalBodyElement) stackManager.notifyStack(this.uniqueId, this.open, this.modalBodyElement);
+		this.classList.toggle("is-visible", this.open);
+		this.updateStackProperties();
+	}
+	updateCSSPropertiesIfNeeded(_changedProperties) {
+		if (_changedProperties.has("influencerWidth") || _changedProperties.has("summaryContentWidth") || _changedProperties.has("verticalGap")) this.updateCSSCustomProperties();
+	}
+	updateStackPropertiesIfNeeded() {
+		if (stackManager.state.stack.length > 0) this.updateStackProperties();
+	}
+	/**
+	* Update CSS custom properties for stacking
+	*/
+	updateStackProperties() {
+		const stackState = stackManager.state;
+		const depth = stackManager.getDepth(this.uniqueId);
+		const scaleFactor = stackManager.getScaleFactor(this.uniqueId);
+		const blockSizeChange = stackManager.getBlockSizeChange(this.uniqueId);
+		if (stackState.stack.length > 1) this.classList.add(`${blockClass}--stack-activated`);
+		else this.classList.remove(`${blockClass}--stack-activated`);
+		if (depth !== -1) {
+			this.style.setProperty("--stack-depth", depth.toString());
+			this.style.setProperty("--scale-factor", scaleFactor.toString());
+			this.style.setProperty("--block-size-change", blockSizeChange);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`${prefix}-tearsheet-header-close-button-clicked`, this.handleHeaderCloseButtonClick);
+		stackManager.notifyStack(this.uniqueId, false, null);
+		if (this.influencerWidth) document.documentElement.style.removeProperty("--tearsheet-influencer-width");
+		if (this.summaryContentWidth) document.documentElement.style.removeProperty("--tearsheet-summary-content-width");
+		if (this.verticalGap) document.documentElement.style.removeProperty("--tearsheet-vertical-gap");
+	}
+	/**
+	* Update CSS custom properties for dynamic styling
+	*/
+	updateCSSCustomProperties() {
+		if (this.influencerWidth) document.documentElement.style.setProperty("--tearsheet-influencer-width", this.influencerWidth);
+		if (this.summaryContentWidth) document.documentElement.style.setProperty("--tearsheet-summary-content-width", this.summaryContentWidth);
+		if (this.verticalGap) document.documentElement.style.setProperty("--tearsheet-vertical-gap", this.verticalGap);
+	}
+	/**
+	* Update influencer visibility based on slot content and screen size
+	* Handles both slot changes and screen size changes
+	*/
+	updateInfluencerVisibility(slot) {
+		const influencerSlot = slot || this.shadowRoot?.querySelector("slot[name=\"influencer\"]");
+		if (!influencerSlot) return;
+		const shouldShow = influencerSlot.assignedNodes({ flatten: true }).length > 0 && !this.isSm;
+		if (this.modalBodyElement) if (shouldShow) this.modalBodyElement.classList.add(`${blockClass}__body-layout--has-influencer`);
+		else this.modalBodyElement.classList.remove(`${blockClass}__body-layout--has-influencer`);
+	}
+	/**
+	* Common method to handle tearsheet close with proper event dispatching
+	* @param originalEvent - The original event that triggered the close (optional)
+	* @param useAsync - Whether to dispatch closed event asynchronously
+	*/
+	closeTearsheet(originalEvent, useAsync = false) {
+		const beforeCloseEvent = new CustomEvent(`${prefix}-preview-tearsheet-beingclosed`, {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail: {}
+		});
+		if (!this.dispatchEvent(beforeCloseEvent)) {
+			if (originalEvent) originalEvent.preventDefault();
+			return;
+		}
+		this.open = false;
+		const dispatchClosedEvent = () => {
+			this.dispatchEvent(new CustomEvent(`${prefix}-preview-tearsheet-closed`, {
+				bubbles: true,
+				composed: true,
+				detail: {}
+			}));
+		};
+		if (useAsync) Promise.resolve().then(dispatchClosedEvent);
+		else dispatchClosedEvent();
+	}
+	/**
+	* Parse floating menu selectors from comma-separated string
+	*/
+	getFloatingMenuSelectors() {
+		const defaultSelectors = [
+			`.${prefix}--overflow-menu-options`,
+			`.${prefix}--tooltip`,
+			".flatpickr-calendar",
+			`.${blockClass}__container`,
+			`.${prefix}--menu`
+		];
+		const customSelectors = this.selectorsFloatingMenus ? this.selectorsFloatingMenus.split(",").map((s) => s.trim()) : [];
+		return [...defaultSelectors, ...customSelectors].join(",");
+	}
+	render() {
+		const classes = classMap({
+			[blockClass]: true,
+			[`${blockClass}--wide`]: this.variant === "wide",
+			[`${blockClass}--narrow`]: this.variant === "narrow",
+			[`${blockClass}--has-ai-label`]: this.hasAILabel,
+			[`${blockClass}--has-decorator`]: this.hasDecorator && !this.hasAILabel
+		});
+		const containerClasses = `${blockClass}__container ${this.containerClassName}`;
+		return html`<cds-modal
       class=${classes}
-      size=${this.variant === 'narrow' ? 'sm' : 'lg'}
+      size=${this.variant === "narrow" ? "sm" : "lg"}
       ?open="${this.open}"
       container-class="${containerClasses}"
       ?prevent-close-on-click-outside="${this.preventCloseOnClickOutside}"
-      aria-label="${ifDefined(this.ariaLabel || undefined)}"
-      selector-primary-focus="${ifDefined(this.selectorPrimaryFocus || undefined)}"
+      aria-label="${ifDefined(this.ariaLabel || void 0)}"
+      selector-primary-focus="${ifDefined(this.selectorPrimaryFocus || void 0)}"
       selectors-floating-menus="${this.getFloatingMenuSelectors()}"
       @cds-modal-beingclosed="${this.handleClose}"
       @cds-modal-closed="${this.handleClose}"
       ?full-width="${true}"
-      ai-label="${ifDefined(this.hasAILabel || undefined)}"
+      ai-label="${ifDefined(this.hasAILabel || void 0)}"
     >
       <slot name="decorator"></slot>
       <slot name="header"></slot>
@@ -369,46 +247,31 @@ let CDSTearsheet = class CDSTearsheet extends SignalWatcher(HostListenerMixin(Li
         <slot name="footer"></slot>
       </cds-modal-body>
     </cds-modal>`;
-    }
+	}
+	static {
+		this.styles = tearsheet_default$1;
+	}
 };
-CDSTearsheet.styles = styles;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], CDSTearsheet.prototype, "open", void 0);
-__decorate([
-    property({ attribute: 'container-class-name' })
-], CDSTearsheet.prototype, "containerClassName", void 0);
-__decorate([
-    property({ attribute: 'influencer-width' })
-], CDSTearsheet.prototype, "influencerWidth", void 0);
-__decorate([
-    property({ attribute: 'summary-content-width' })
-], CDSTearsheet.prototype, "summaryContentWidth", void 0);
-__decorate([
-    property({ attribute: 'vertical-gap' })
-], CDSTearsheet.prototype, "verticalGap", void 0);
-__decorate([
-    property({ reflect: true })
-], CDSTearsheet.prototype, "variant", void 0);
-__decorate([
-    property({ attribute: 'selectors-floating-menus' })
-], CDSTearsheet.prototype, "selectorsFloatingMenus", void 0);
-__decorate([
-    property({ attribute: 'selector-primary-focus' })
-], CDSTearsheet.prototype, "selectorPrimaryFocus", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })
-], CDSTearsheet.prototype, "preventCloseOnClickOutside", void 0);
-__decorate([
-    state()
-], CDSTearsheet.prototype, "isSm", void 0);
-__decorate([
-    query('cds-modal-body')
-], CDSTearsheet.prototype, "modalBodyElement", void 0);
-CDSTearsheet = __decorate([
-    carbonElement(`${prefix}-preview-tearsheet`)
-], CDSTearsheet);
-var CDSTearsheet_default = CDSTearsheet;
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSTearsheet.prototype, "open", void 0);
+__decorate([property({ attribute: "container-class-name" })], CDSTearsheet.prototype, "containerClassName", void 0);
+__decorate([property({ attribute: "influencer-width" })], CDSTearsheet.prototype, "influencerWidth", void 0);
+__decorate([property({ attribute: "summary-content-width" })], CDSTearsheet.prototype, "summaryContentWidth", void 0);
+__decorate([property({ attribute: "vertical-gap" })], CDSTearsheet.prototype, "verticalGap", void 0);
+__decorate([property({ reflect: true })], CDSTearsheet.prototype, "variant", void 0);
+__decorate([property({ attribute: "selectors-floating-menus" })], CDSTearsheet.prototype, "selectorsFloatingMenus", void 0);
+__decorate([property({ attribute: "selector-primary-focus" })], CDSTearsheet.prototype, "selectorPrimaryFocus", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "prevent-close-on-click-outside"
+})], CDSTearsheet.prototype, "preventCloseOnClickOutside", void 0);
+__decorate([state()], CDSTearsheet.prototype, "isSm", void 0);
+__decorate([query("cds-modal-body")], CDSTearsheet.prototype, "modalBodyElement", void 0);
+CDSTearsheet = __decorate([carbonElement(`${prefix}-preview-tearsheet`)], CDSTearsheet);
+var tearsheet_default = CDSTearsheet;
 
-export { CDSTearsheet_default as default };
-//# sourceMappingURL=tearsheet.js.map
+//#endregion
+export { tearsheet_default as default };
+//# sourceMappingURL=tearsheet.js.map