@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/dialog.js

@@ -1,9 +1,7 @@
-import { t as SbbDialogActionsElement } from "./dialog-actions.component-Dyzg7z-B.js";
-import { t as SbbDialogCloseButtonElement } from "./dialog-close-button.component-dgLnsaLx.js";
-import { t as SbbDialogContentElement } from "./dialog-content.component-DDtVV0Lh.js";
-import { t as SbbDialogTitleElement } from "./dialog-title.component-DyItyahT.js";
-import { n as SbbDialogElement, r as assignDialogResult, t as SbbDialogCloseEvent } from "./dialog.component-B1Tke2ym.js";
-import "./dialog.pure.js";
+import { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement } from "./dialog.pure.js";
+
+export * from "./dialog.pure.js"
+
 //#region src/elements/dialog.ts
 /** @entrypoint */
 SbbDialogElement.define();
@@ -11,7 +9,5 @@ SbbDialogActionsElement.define();
 SbbDialogCloseButtonElement.define();
 SbbDialogContentElement.define();
 SbbDialogTitleElement.define();
-//#endregion
-export { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogCloseEvent, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement, assignDialogResult };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9kaWFsb2cudHMiXSwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBlbnRyeXBvaW50ICovXG5pbXBvcnQge1xuICBTYmJEaWFsb2dBY3Rpb25zRWxlbWVudCxcbiAgU2JiRGlhbG9nQ2xvc2VCdXR0b25FbGVtZW50LFxuICBTYmJEaWFsb2dDb250ZW50RWxlbWVudCxcbiAgU2JiRGlhbG9nRWxlbWVudCxcbiAgU2JiRGlhbG9nVGl0bGVFbGVtZW50LFxufSBmcm9tICcuL2RpYWxvZy5wdXJlLnRzJztcblxuZXhwb3J0ICogZnJvbSAnLi9kaWFsb2cucHVyZS50cyc7XG5cblNiYkRpYWxvZ0VsZW1lbnQuZGVmaW5lKCk7XG5TYmJEaWFsb2dBY3Rpb25zRWxlbWVudC5kZWZpbmUoKTtcblNiYkRpYWxvZ0Nsb3NlQnV0dG9uRWxlbWVudC5kZWZpbmUoKTtcblNiYkRpYWxvZ0NvbnRlbnRFbGVtZW50LmRlZmluZSgpO1xuU2JiRGlhbG9nVGl0bGVFbGVtZW50LmRlZmluZSgpO1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQVdBLGlCQUFpQixPQUFNO0FBQ3ZCLHdCQUF3QixPQUFNO0FBQzlCLDRCQUE0QixPQUFNO0FBQ2xDLHdCQUF3QixPQUFNO0FBQzlCLHNCQUFzQixPQUFNIn0=
+//#endregion

package/development/dialog.pure.d.ts

@@ -4,4 +4,3 @@ export * from './dialog/dialog-close-button/dialog-close-button.component.ts';
 export * from './dialog/dialog-content/dialog-content.component.ts';
 export * from './dialog/dialog-title/dialog-title.component.ts';
 export * from './dialog/dialog/dialog.component.ts';
-//# sourceMappingURL=dialog.pure.d.ts.map

package/development/dialog.pure.js

@@ -1,6 +1,349 @@
-import { t as SbbDialogActionsElement } from "./dialog-actions.component-Dyzg7z-B.js";
-import { t as SbbDialogCloseButtonElement } from "./dialog-close-button.component-dgLnsaLx.js";
-import { t as SbbDialogContentElement } from "./dialog-content.component-DDtVV0Lh.js";
-import { t as SbbDialogTitleElement } from "./dialog-title.component-DyItyahT.js";
-import { n as SbbDialogElement, r as assignDialogResult, t as SbbDialogCloseEvent } from "./dialog.component-B1Tke2ym.js";
-export { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogCloseEvent, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement, assignDialogResult };
+import { html, unsafeCSS } from "lit";
+import { SbbActionGroupElement } from "./action-group.pure.js";
+import { SbbSecondaryButtonElement } from "./button.pure.js";
+import { SbbElement, SbbLanguageController, SbbNegativeMixin, SbbPropertyWatcherController, hostScrollbarStyles, i18nCloseDialog, isZeroAnimationDuration, screenReaderOnlyStyles } from "./core.js";
+import { SbbTitleBase } from "./title.pure.js";
+import { __esDecorate, __runInitializers } from "tslib";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { property } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { html as html$1 } from "lit/static-html.js";
+import { SbbOverlayBaseElement, SbbOverlayCloseEvent, SbbOverlayCloseEvent as SbbDialogCloseEvent, assignOverlayResult as assignDialogResult, overlayRefs } from "./overlay.pure.js";
+
+//#region src/elements/dialog/dialog-actions/dialog-actions.scss?inline
+var dialog_actions_default = ":host {\n  grid-area: actions;\n  padding-inline: var(--sbb-dialog-padding-inline);\n  padding-block: var(--sbb-dialog-padding-block);\n  margin-block-start: auto;\n  background-color: var(--sbb-dialog-background-color);\n  transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  box-shadow: var(--sbb-dialog-block-end-box-shadow, none);\n  position: relative;\n}\n:host::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  align-self: start;\n  border-block-start: var(--sbb-border-width-1x) solid var(--sbb-dialog-actions-border-color);\n  transition: border-color var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  inset: 0 auto auto 0;\n  width: 100%;\n}\n@media (forced-colors: active) {\n  :host::before {\n    border-color: CanvasText;\n  }\n}\n";
+
+//#endregion
+//#region src/elements/dialog/dialog-actions/dialog-actions.component.ts
+/**
+* Use this component to display a footer into an `sbb-dialog` with an action group.
+*
+* @slot - Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-dialog-actions`.
+*/
+var SbbDialogActionsElement = class extends SbbActionGroupElement {
+	static {
+		this.elementName = "sbb-dialog-actions";
+	}
+	static {
+		this.styles = [unsafeCSS(dialog_actions_default)];
+	}
+};
+
+//#endregion
+//#region src/elements/dialog/dialog-close-button/dialog-close-button.scss?inline
+var dialog_close_button_default = ":host {\n  display: block;\n  height: fit-content;\n  grid-area: close-button;\n  margin-inline: var(--sbb-dialog-close-button-margin-inline);\n  inset-inline-end: var(--sbb-dialog-close-button-inset-inline-end);\n  margin-block-start: calc(var(--sbb-dialog-padding-block) + 0.5 * (var(--sbb-typo-line-height-heading) * var(--_sbb-dialog-title-size, var(--sbb-heading-font-size-4)) - var(--sbb-size-element-xs)));\n}\n";
+
+//#endregion
+//#region src/elements/dialog/dialog-close-button/dialog-close-button.component.ts
+/**
+* Dialog close button, intended to be placed inside sbb-dialog.
+*
+* @slot - Use the unnamed slot to add content to the dialog-close-button. Not intended to be used in this context.
+* @slot icon - Slot used to display the icon, if one is set. Not intended to be used in this context.
+*/
+var SbbDialogCloseButtonElement = class extends SbbSecondaryButtonElement {
+	static {
+		this.elementName = "sbb-dialog-close-button";
+	}
+	static {
+		this.styles = [unsafeCSS(dialog_close_button_default)];
+	}
+	constructor() {
+		super();
+		this._languageController = new SbbLanguageController(this);
+		this.size = "s";
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		this.internals.ariaLabel = i18nCloseDialog[this._languageController.current];
+	}
+	renderTemplate() {
+		return super.renderIconSlot();
+	}
+	renderIconName() {
+		return super.renderIconName() || "cross-small";
+	}
+};
+
+//#endregion
+//#region src/elements/dialog/dialog-content/dialog-content.scss?inline
+var dialog_content_default = ":host {\n  display: block;\n  padding-block: var(--sbb-dialog-padding-block);\n  padding-inline: var(--sbb-dialog-padding-inline);\n  grid-area: content;\n  overflow: auto;\n}\n\n:host(:is(:state(negative),[state--negative])) {\n  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);\n  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);\n}\n\n:host(:focus-visible) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  --sbb-focus-outline-offset: calc(var(--sbb-focus-outline-width) * -1);\n}\n";
+
+//#endregion
+//#region src/elements/dialog/dialog-content/dialog-content.component.ts
+/**
+* Use this component to provide a content for an `sbb-dialog`.
+*
+* @slot - Use the unnamed slot to provide a dialog content.
+*/
+var SbbDialogContentElement = class extends SbbElement {
+	static {
+		this.elementName = "sbb-dialog-content";
+	}
+	static {
+		this.styles = [hostScrollbarStyles, unsafeCSS(dialog_content_default)];
+	}
+	constructor() {
+		super();
+		this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-dialog"), { negative: (d) => {
+			this.toggleState("negative", d.negative);
+			this._setScrollbar(d.negative);
+		} }));
+	}
+	_setScrollbar(negative = this.closest?.("sbb-dialog")?.negative ?? false) {
+		this.classList.remove("sbb-scrollbar", "sbb-scrollbar-negative");
+		this.classList.add(`sbb-scrollbar${negative ? "-negative" : ""}`);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._setScrollbar();
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+
+//#endregion
+//#region src/elements/dialog/dialog-title/dialog-title.scss?inline
+var dialog_title_default = ":host {\n  padding-block: var(--sbb-dialog-padding-block);\n  padding-inline: var(--sbb-dialog-padding-inline);\n  hyphens: auto;\n  grid-area: title;\n  position: relative;\n}\n\n:host([negative]) {\n  --sbb-title-color: var(--sbb-color-3-negative);\n}\n\n:host::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  inset: 0 -10rem 0 0;\n  transition: box-shadow var(--sbb-animation-easing) var(--sbb-dialog-shadow-animation-duration);\n  box-shadow: var(--sbb-dialog-block-start-box-shadow, none);\n}\n";
+
+//#endregion
+//#region src/elements/dialog/dialog-title/dialog-title.component.ts
+/**
+* It displays a title inside a dialog header.
+*
+* @slot - Use the unnamed slot for the content of the dialog-title.
+*/
+var SbbDialogTitleElement = class extends SbbNegativeMixin(SbbTitleBase) {
+	static {
+		this.elementName = "sbb-dialog-title";
+	}
+	static {
+		this.styles = [unsafeCSS(dialog_title_default)];
+	}
+	constructor() {
+		super();
+		this.level = "2";
+		this.visualLevel = "4";
+	}
+};
+
+//#endregion
+//#region src/elements/dialog/dialog/dialog.scss?inline
+var dialog_default = ":host {\n  --sbb-dialog-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  --sbb-dialog-padding-block: var(--sbb-spacing-responsive-xs);\n  --sbb-dialog-shadow-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  display: none;\n  position: fixed;\n  inset: var(--sbb-dialog-inset);\n  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));\n}\n\n:host(:is(:state(top-shadow),[state--top-shadow])) {\n  --sbb-dialog-block-start-box-shadow: var(--_sbb-dialog-block-shadow);\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) {\n  display: block;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-dialog-pointer-events: all;\n  --sbb-dialog-backdrop-color: var(--sbb-background-color-3);\n  --sbb-dialog-backdrop-visibility: visible;\n  --sbb-dialog-backdrop-pointer-events: all;\n}\n\n:host([backdrop=translucent]:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-dialog-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 50%, transparent);\n}\n\n:host([backdrop=opaque]:not([negative]):is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-dialog-backdrop-color: var(--sbb-background-color-3);\n}\n\n:host(:not([negative])) {\n  --_sbb-dialog-color: var(--sbb-dialog-color);\n  --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow);\n  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);\n  --sbb-dialog-background-color: var(--sbb-background-color-1);\n}\n\n:host([negative]) {\n  --_sbb-dialog-color: var(--sbb-dialog-color-negative);\n  --_sbb-dialog-block-shadow: var(--sbb-dialog-block-shadow-negative);\n  --sbb-dialog-background-color: var(--sbb-background-color-1-negative);\n  --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);\n  --sbb-dialog-backdrop-color: var(--sbb-background-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:is(:state(bottom-shadow),[state--bottom-shadow])) {\n  --sbb-dialog-block-end-box-shadow: var(--_sbb-dialog-block-shadow);\n  --sbb-dialog-actions-border-color: transparent;\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-dialog-inset-block: 0;\n  --sbb-dialog-inset-inline: 0;\n}\n\n.sbb-dialog__container {\n  pointer-events: var(--sbb-dialog-pointer-events);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  inset-block: var(--sbb-dialog-inset-block);\n  inset-inline: var(--sbb-dialog-inset-inline);\n}\n.sbb-dialog__container::before {\n  content: \"\";\n  visibility: var(--sbb-dialog-backdrop-visibility);\n  pointer-events: var(--sbb-dialog-backdrop-pointer-events);\n  position: fixed;\n  inset-block: var(--sbb-dialog-inset-block);\n  inset-inline: var(--sbb-dialog-inset-inline);\n  background-color: var(--sbb-dialog-backdrop-color);\n  transition-duration: var(--sbb-dialog-animation-duration);\n  transition-timing-function: var(--sbb-dialog-animation-easing);\n  transition-property: background-color, visibility;\n}\n\n.sbb-dialog {\n  display: none;\n  position: absolute;\n  inset-inline: 0;\n  inset-block: auto 0;\n  border: none;\n  border-radius: var(--sbb-dialog-border-radius) var(--sbb-dialog-border-radius) 0 0;\n  max-width: var(--sbb-dialog-max-width);\n  max-height: var(--sbb-dialog-max-height);\n  color: var(--_sbb-dialog-color);\n  background-color: var(--sbb-dialog-background-color);\n}\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-dialog {\n  display: block;\n  animation-name: open;\n  animation-duration: var(--sbb-dialog-animation-duration);\n  animation-timing-function: ease;\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-dialog {\n  pointer-events: none;\n  animation-name: close;\n}\n@media (forced-colors: active) {\n  .sbb-dialog {\n    outline: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n@media (min-width: calc(37.5rem)) {\n  .sbb-dialog {\n    height: var(--sbb-dialog-height);\n    width: var(--sbb-dialog-width);\n    inset: unset;\n    border-radius: var(--sbb-dialog-border-radius);\n    overflow: hidden;\n  }\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n.sbb-dialog__wrapper {\n  max-height: var(--sbb-dialog-max-height);\n}\n@media (min-width: calc(37.5rem)) {\n  :host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n  .sbb-dialog__wrapper {\n    width: var(--sbb-dialog-width);\n    height: var(--sbb-dialog-height);\n  }\n}\n\n:host(:is(:state(has-intermediate-element),[state--has-intermediate-element])) ::slotted(:first-child),\n:host(:not(:is(:state(has-intermediate-element),[state--has-intermediate-element]))) .sbb-dialog__wrapper {\n  display: grid;\n  grid-template: \"title close-button\" auto \"content content\" 1fr \"actions actions\" auto/1fr auto;\n  gap: 0;\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n    translate: 0 var(--sbb-dialog-translate-y, 100%);\n  }\n  to {\n    opacity: 1;\n    translate: 0 0;\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n    translate: 0 0;\n  }\n  to {\n    opacity: 0;\n    translate: 0 var(--sbb-dialog-translate-y, 100%);\n  }\n}\n";
+
+//#endregion
+//#region src/elements/dialog/dialog/dialog.component.ts
+/**
+* It displays an interactive overlay element.
+*
+* @slot - Use the unnamed slot to provide a `sbb-dialog-title`, `sbb-dialog-content` and an optional `sbb-dialog-actions`.
+* @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+* component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+*/
+let SbbDialogElement = (() => {
+	let _classSuper = SbbOverlayBaseElement;
+	let _backdropAction_decorators;
+	let _backdropAction_initializers = [];
+	let _backdropAction_extraInitializers = [];
+	let _backdrop_decorators;
+	let _backdrop_initializers = [];
+	let _backdrop_extraInitializers = [];
+	return class SbbDialogElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_backdropAction_decorators = [property({ attribute: "backdrop-action" })];
+			_backdrop_decorators = [property({
+				attribute: "backdrop",
+				reflect: true
+			})];
+			__esDecorate(this, null, _backdropAction_decorators, {
+				kind: "accessor",
+				name: "backdropAction",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "backdropAction" in obj,
+					get: (obj) => obj.backdropAction,
+					set: (obj, value) => {
+						obj.backdropAction = value;
+					}
+				},
+				metadata: _metadata
+			}, _backdropAction_initializers, _backdropAction_extraInitializers);
+			__esDecorate(this, null, _backdrop_decorators, {
+				kind: "accessor",
+				name: "backdrop",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "backdrop" in obj,
+					get: (obj) => obj.backdrop,
+					set: (obj, value) => {
+						obj.backdrop = value;
+					}
+				},
+				metadata: _metadata
+			}, _backdrop_initializers, _backdrop_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-dialog";
+		}
+		static {
+			this.styles = [screenReaderOnlyStyles, unsafeCSS(dialog_default)];
+		}
+		#backdropAction_accessor_storage;
+		/** Backdrop click action. */
+		get backdropAction() {
+			return this.#backdropAction_accessor_storage;
+		}
+		set backdropAction(value) {
+			this.#backdropAction_accessor_storage = value;
+		}
+		#backdrop_accessor_storage;
+		/** Backdrop density. */
+		get backdrop() {
+			return this.#backdrop_accessor_storage;
+		}
+		set backdrop(value) {
+			this.#backdrop_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.#backdropAction_accessor_storage = __runInitializers(this, _backdropAction_initializers, "close");
+			this.#backdrop_accessor_storage = (__runInitializers(this, _backdropAction_extraInitializers), __runInitializers(this, _backdrop_initializers, "opaque"));
+			this._dialogContentResizeObserver = (__runInitializers(this, _backdrop_extraInitializers), new ResizeController(this, {
+				target: null,
+				skipInitial: true,
+				callback: () => setTimeout(() => this._updateOverflowState())
+			}));
+			this._isPointerDownEventOnDialog = false;
+			this.closeAttribute = "sbb-dialog-close";
+			this.closeTag = "sbb-dialog-close-button";
+			/** Check if the pointerdown event target is triggered on the dialog. */
+			this._pointerDownListener = (event) => {
+				if (this.backdropAction !== "close") return;
+				this._isPointerDownEventOnDialog = !!this._dialogElement && event.composedPath().includes(this._dialogElement);
+			};
+			/** Close dialog on backdrop click. */
+			this._closeOnBackdropClick = (event) => {
+				if (this.backdropAction === "close" && !this._isPointerDownEventOnDialog && this._dialogElement && !event.composedPath().includes(this._dialogElement)) this.close();
+			};
+			this.addEventListener?.("pointerdown", this._pointerDownListener);
+			this.addEventListener?.("pointerup", this._closeOnBackdropClick);
+			this.addEventListener("scroll", () => this._updateOverflowState(), {
+				passive: true,
+				capture: true
+			});
+		}
+		/** Announce the accessibility label or dialog title for screen readers. */
+		announceTitle() {
+			this.setAriaLiveRefContent(this.accessibilityLabel || this.querySelector("sbb-dialog-title")?.textContent.trim());
+		}
+		isZeroAnimationDuration() {
+			return isZeroAnimationDuration(this, "--sbb-dialog-animation-duration");
+		}
+		handleClosing() {
+			const contentElement = this._contentElement();
+			contentElement?.scrollTo(0, 0);
+			this.state = "closed";
+			this.hidePopover?.();
+			this.inertController.deactivate();
+			if (!this.skipFocusRestoration) this.lastFocusedElement?.focus();
+			this.openOverlayController?.abort();
+			this.focusTrapController.enabled = false;
+			if (contentElement) this._dialogContentResizeObserver.hostDisconnected();
+			this.removeInstanceFromGlobalCollection();
+			if (!overlayRefs.length) this.scrollHandler.enableScroll();
+			this.escapableOverlayController.disconnect();
+			this.dispatchCloseEvent();
+		}
+		handleOpening() {
+			this.state = "opened";
+			this.inertController.activate();
+			this.focusTrapController.focusInitialElement();
+			this.focusTrapController.enabled = true;
+			setTimeout(() => this.announceTitle());
+			const contentElement = this._contentElement();
+			if (contentElement) this._dialogContentResizeObserver.observe(contentElement);
+			this.dispatchOpenEvent();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			if (this.isOpen) this.announceTitle();
+			this._syncTitleNegative();
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("negative")) this._syncTitleNegative();
+		}
+		_handleSlotChange() {
+			this._syncTitleNegative();
+			this._detectIntermediateElement();
+		}
+		_syncTitleNegative() {
+			const dialogTitle = this.querySelector?.("sbb-dialog-title");
+			const closeButton = this.querySelector?.("sbb-dialog-close-button");
+			if (dialogTitle) dialogTitle.negative = this.negative;
+			if (closeButton) closeButton.negative = this.negative;
+		}
+		_detectIntermediateElement() {
+			const hasNoExpectedDirectChildren = this.querySelector(":scope > :is(sbb-dialog-title, sbb-dialog-close-button, sbb-dialog-content, sbb-dialog-actions)") === null;
+			this.toggleState("has-intermediate-element", hasNoExpectedDirectChildren);
+		}
+		_updateOverflowState() {
+			const contentElement = this._contentElement();
+			this.toggleState("top-shadow", (contentElement?.scrollTop ?? 0) > 0);
+			this.toggleState("bottom-shadow", (contentElement?.scrollTop ?? 0) + (contentElement?.offsetHeight ?? 0) < (contentElement?.scrollHeight ?? 0));
+		}
+		_contentElement() {
+			return this.querySelector("sbb-dialog-content");
+		}
+		dispatchBeforeCloseEvent() {
+			/** @type {SbbDialogCloseEvent} Emits whenever the component begins the closing transition. Can be canceled. */
+			return this.dispatchEvent(new SbbOverlayCloseEvent("beforeclose", {
+				cancelable: true,
+				closeAttribute: this.closeAttribute,
+				closeTarget: this.lastClosedTarget,
+				result: this.lastResult
+			}));
+		}
+		dispatchCloseEvent() {
+			/** @type {SbbDialogCloseEvent} Emits whenever the component is closed. */
+			return this.dispatchEvent(new SbbOverlayCloseEvent("close", {
+				closeAttribute: this.closeAttribute,
+				closeTarget: this.lastClosedTarget,
+				result: this.lastResult
+			}));
+		}
+		render() {
+			return html$1`
+      <div class="sbb-dialog__container">
+        <div
+          @animationend=${this.onOverlayAnimationEnd}
+          class="sbb-dialog"
+          ${ref((el) => this._dialogElement = el)}
+        >
+          <div
+            @click=${(event) => this.closeOnSbbOverlayCloseClick(event)}
+            class="sbb-dialog__wrapper"
+          >
+            <slot @slotchange=${() => this._handleSlotChange()}></slot>
+          </div>
+        </div>
+      </div>
+      <span class="sbb-screen-reader-only" aria-live="polite"></span>
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbDialogActionsElement, SbbDialogCloseButtonElement, SbbDialogCloseEvent, SbbDialogContentElement, SbbDialogElement, SbbDialogTitleElement, assignDialogResult };

package/development/divider/divider.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 import { SbbElement } from '../core.ts';
-declare const SbbDividerElement_base: import('../core.ts').AbstractConstructor<import('../core.ts').SbbNegativeMixinType> & typeof SbbElement;
+declare const SbbDividerElement_base: import("../core.ts").AbstractConstructor<import("../core.ts").SbbNegativeMixinType> & typeof SbbElement;
 /**
  * Displays a divider between sections.
  */
@@ -19,4 +19,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=divider.component.d.ts.map

package/development/divider.d.ts

@@ -1,2 +1 @@
 export * from './divider.pure.ts';
-//# sourceMappingURL=divider.d.ts.map

package/development/divider.js

@@ -1,9 +1,9 @@
-import { t as SbbDividerElement } from "./divider.component-CYP23U4q.js";
-import "./divider.pure.js";
+import { SbbDividerElement } from "./divider.pure.js";
+
+export * from "./divider.pure.js"
+
 //#region src/elements/divider.ts
 /** @entrypoint */
 SbbDividerElement.define();
-//#endregion
-export { SbbDividerElement };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGl2aWRlci5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvZGl2aWRlci50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGVudHJ5cG9pbnQgKi9cbmltcG9ydCB7IFNiYkRpdmlkZXJFbGVtZW50IH0gZnJvbSAnLi9kaXZpZGVyLnB1cmUudHMnO1xuXG5leHBvcnQgKiBmcm9tICcuL2RpdmlkZXIucHVyZS50cyc7XG5cblNiYkRpdmlkZXJFbGVtZW50LmRlZmluZSgpO1xuIl0sIm1hcHBpbmdzIjoiOzs7O0FBS0Esa0JBQWtCLE9BQU0ifQ==
+//#endregion

package/development/divider.pure.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './divider/divider.component.ts';
-//# sourceMappingURL=divider.pure.d.ts.map

package/development/divider.pure.js

@@ -1,2 +1,76 @@
-import { t as SbbDividerElement } from "./divider.component-CYP23U4q.js";
-export { SbbDividerElement };
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbElement, SbbNegativeMixin } from "./core.js";
+
+//#region src/elements/divider/divider.scss?inline
+var divider_default = ":host {\n  display: block;\n}\n\n:host([orientation=vertical]) {\n  height: 100%;\n}\n\n:host([negative]) {\n  --sbb-divider-color: var(--sbb-divider-color-negative);\n}\n\n:host(:is([orientation=horizontal], :not([orientation]))) .sbb-divider {\n  border-top: var(--sbb-divider-border-width) solid var(--sbb-divider-color);\n}\n:host([orientation=vertical]) .sbb-divider {\n  height: 100%;\n  border-left: var(--sbb-divider-border-width) solid var(--sbb-divider-color);\n}\n";
+
+//#endregion
+//#region src/elements/divider/divider.component.ts
+/**
+* Displays a divider between sections.
+*/
+let SbbDividerElement = (() => {
+	let _classSuper = SbbNegativeMixin(SbbElement);
+	let _orientation_decorators;
+	let _orientation_initializers = [];
+	let _orientation_extraInitializers = [];
+	return class SbbDividerElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_orientation_decorators = [property({ reflect: true })];
+			__esDecorate(this, null, _orientation_decorators, {
+				kind: "accessor",
+				name: "orientation",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "orientation" in obj,
+					get: (obj) => obj.orientation,
+					set: (obj, value) => {
+						obj.orientation = value;
+					}
+				},
+				metadata: _metadata
+			}, _orientation_initializers, _orientation_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-divider";
+		}
+		static {
+			this.role = "separator";
+		}
+		static {
+			this.styles = [unsafeCSS(divider_default)];
+		}
+		#orientation_accessor_storage = __runInitializers(this, _orientation_initializers, "horizontal");
+		/** Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal. */
+		get orientation() {
+			return this.#orientation_accessor_storage;
+		}
+		set orientation(value) {
+			this.#orientation_accessor_storage = value;
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("orientation")) this.internals.ariaOrientation = this.orientation;
+		}
+		render() {
+			return html`<div class="sbb-divider"></div> `;
+		}
+		constructor() {
+			super(...arguments);
+			__runInitializers(this, _orientation_extraInitializers);
+		}
+	};
+})();
+
+//#endregion
+export { SbbDividerElement };

package/development/expansion-panel/expansion-panel/expansion-panel.component.d.ts

@@ -1,5 +1,5 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
-import { SbbElement, SbbHeadingLevel } from '../../core.ts';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+import { SbbElement, type SbbHeadingLevel } from '../../core.ts';
 /**
  * It displays an expandable summary-details widget.
  *
@@ -59,4 +59,3 @@ declare global {
         'sbb-expansion-panel': SbbExpansionPanelElement;
     }
 }
-//# sourceMappingURL=expansion-panel.component.d.ts.map

package/development/expansion-panel/expansion-panel-content/expansion-panel-content.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 import { SbbElement } from '../../core.ts';
 /**
  * It can be used as a container for the content of the `sbb-expansion-panel` component.
@@ -19,4 +19,3 @@ declare global {
         'sbb-expansion-panel-content': SbbExpansionPanelContentElement;
     }
 }
-//# sourceMappingURL=expansion-panel-content.component.d.ts.map

package/development/expansion-panel/expansion-panel-header/expansion-panel-header.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 import { SbbButtonBaseElement } from '../../core.ts';
-declare const SbbExpansionPanelHeaderElement_base: import('../../core.ts').AbstractConstructor<import('../../core.ts').SbbDisabledMixinType & import('../../core.ts').SbbDisabledInteractiveMixinType> & import('../../core.ts').AbstractConstructor<import('../../icon.pure.ts').SbbIconNameMixinType> & typeof SbbButtonBaseElement;
+declare const SbbExpansionPanelHeaderElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbDisabledMixinType & import("../../core.ts").SbbDisabledInteractiveMixinType> & import("../../core.ts").AbstractConstructor<import("../../icon.pure.ts").SbbIconNameMixinType> & typeof SbbButtonBaseElement;
 /**
  * It acts as a native `summary` tag for the `sbb-expansion-panel` component.
  *
@@ -34,4 +34,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=expansion-panel-header.component.d.ts.map

package/development/expansion-panel.d.ts

@@ -1,2 +1 @@
 export * from './expansion-panel.pure.ts';
-//# sourceMappingURL=expansion-panel.d.ts.map

package/development/expansion-panel.js

@@ -1,13 +1,11 @@
-import { t as SbbExpansionPanelContentElement } from "./expansion-panel-content.component-CKhGtjji.js";
-import { t as SbbExpansionPanelHeaderElement } from "./expansion-panel-header.component-Do3pLbzs.js";
-import { t as SbbExpansionPanelElement } from "./expansion-panel.component-BnbRiLrk.js";
-import "./expansion-panel.pure.js";
+import { SbbExpansionPanelContentElement, SbbExpansionPanelElement, SbbExpansionPanelHeaderElement } from "./expansion-panel.pure.js";
+
+export * from "./expansion-panel.pure.js"
+
 //#region src/elements/expansion-panel.ts
 /** @entrypoint */
 SbbExpansionPanelElement.define();
 SbbExpansionPanelContentElement.define();
 SbbExpansionPanelHeaderElement.define();
-//#endregion
-export { SbbExpansionPanelContentElement, SbbExpansionPanelElement, SbbExpansionPanelHeaderElement };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5zaW9uLXBhbmVsLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9leHBhbnNpb24tcGFuZWwudHMiXSwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBlbnRyeXBvaW50ICovXG5pbXBvcnQge1xuICBTYmJFeHBhbnNpb25QYW5lbENvbnRlbnRFbGVtZW50LFxuICBTYmJFeHBhbnNpb25QYW5lbEVsZW1lbnQsXG4gIFNiYkV4cGFuc2lvblBhbmVsSGVhZGVyRWxlbWVudCxcbn0gZnJvbSAnLi9leHBhbnNpb24tcGFuZWwucHVyZS50cyc7XG5cbmV4cG9ydCAqIGZyb20gJy4vZXhwYW5zaW9uLXBhbmVsLnB1cmUudHMnO1xuXG5TYmJFeHBhbnNpb25QYW5lbEVsZW1lbnQuZGVmaW5lKCk7XG5TYmJFeHBhbnNpb25QYW5lbENvbnRlbnRFbGVtZW50LmRlZmluZSgpO1xuU2JiRXhwYW5zaW9uUGFuZWxIZWFkZXJFbGVtZW50LmRlZmluZSgpO1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFTQSx5QkFBeUIsT0FBTTtBQUMvQixnQ0FBZ0MsT0FBTTtBQUN0QywrQkFBK0IsT0FBTSJ9
+//#endregion

package/development/expansion-panel.pure.d.ts

@@ -2,4 +2,3 @@
 export * from './expansion-panel/expansion-panel-content/expansion-panel-content.component.ts';
 export * from './expansion-panel/expansion-panel-header/expansion-panel-header.component.ts';
 export * from './expansion-panel/expansion-panel/expansion-panel.component.ts';
-//# sourceMappingURL=expansion-panel.pure.d.ts.map