@sbb-esta/lyne-elements 5.0.1 → 5.1.0

package/development/overlay/overlay-base-element.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
+import { type CSSResultGroup, type PropertyDeclaration, type PropertyValues } from 'lit';
 import { SbbEscapableOverlayController, SbbFocusTrapController, SbbInertController, SbbLanguageController, SbbOpenCloseBaseElement, SbbScrollHandler } from '../core.ts';
 export declare class SbbOverlayCloseEvent<T = any> extends Event {
     /**
@@ -24,7 +24,7 @@ export declare class SbbOverlayCloseEvent<T = any> extends Event {
 }
 export declare function assignOverlayResult<T>(element: HTMLElement, result: T): void;
 export declare const overlayRefs: SbbOverlayBaseElement[];
-declare const SbbOverlayBaseElement_base: import('../core.ts').AbstractConstructor<import('../core.ts').SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
+declare const SbbOverlayBaseElement_base: import("../core.ts").AbstractConstructor<import("../core.ts").SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
 export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElement_base {
     static styles: CSSResultGroup;
     /**
@@ -85,4 +85,3 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     protected onOverlayAnimationEnd(event: AnimationEvent): void;
 }
 export {};
-//# sourceMappingURL=overlay-base-element.d.ts.map

package/development/overlay/overlay.component.d.ts

@@ -1,5 +1,5 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { SbbElementType } from '../core.ts';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { type SbbElementType } from '../core.ts';
 import { SbbOverlayBaseElement } from './overlay-base-element.ts';
 /**
  * It displays an interactive overlay element.
@@ -41,4 +41,3 @@ declare global {
         'sbb-overlay': SbbOverlayElement;
     }
 }
-//# sourceMappingURL=overlay.component.d.ts.map

package/development/overlay.d.ts

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

package/development/overlay.js

@@ -1,10 +1,9 @@
-import { SbbOverlayBaseElement, SbbOverlayCloseEvent, assignOverlayResult, overlayRefs } from "./overlay/overlay-base-element.js";
-import { t as SbbOverlayElement } from "./overlay.component-D_BLhfdG.js";
-import "./overlay.pure.js";
+import { SbbOverlayElement } from "./overlay.pure.js";
+
+export * from "./overlay.pure.js"
+
 //#region src/elements/overlay.ts
 /** @entrypoint */
 SbbOverlayElement.define();
-//#endregion
-export { SbbOverlayBaseElement, SbbOverlayCloseEvent, SbbOverlayElement, assignOverlayResult, overlayRefs };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmxheS5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvb3ZlcmxheS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGVudHJ5cG9pbnQgKi9cbmltcG9ydCB7IFNiYk92ZXJsYXlFbGVtZW50IH0gZnJvbSAnLi9vdmVybGF5LnB1cmUudHMnO1xuXG5leHBvcnQgKiBmcm9tICcuL292ZXJsYXkucHVyZS50cyc7XG5cblNiYk92ZXJsYXlFbGVtZW50LmRlZmluZSgpO1xuIl0sIm1hcHBpbmdzIjoiOzs7OztBQUtBLGtCQUFrQixPQUFNIn0=
+//#endregion

package/development/overlay.pure.d.ts

@@ -1,4 +1,3 @@
 /** @entrypoint */
 export * from './overlay/overlay-base-element.ts';
 export * from './overlay/overlay.component.ts';
-//# sourceMappingURL=overlay.pure.d.ts.map

package/development/overlay.pure.js

@@ -1,3 +1,435 @@
-import { SbbOverlayBaseElement, SbbOverlayCloseEvent, assignOverlayResult, overlayRefs } from "./overlay/overlay-base-element.js";
-import { t as SbbOverlayElement } from "./overlay.component-D_BLhfdG.js";
-export { SbbOverlayBaseElement, SbbOverlayCloseEvent, SbbOverlayElement, assignOverlayResult, overlayRefs };
+import { __esDecorate, __runInitializers } from "tslib";
+import { isServer, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbEscapableOverlayController, SbbFocusTrapController, SbbInertController, SbbLanguageController, SbbNegativeMixin, SbbOpenCloseBaseElement, SbbScrollHandler, forceType, forwardEvent, i18nCloseDialog, i18nDialog, idReference, isZeroAnimationDuration, popoverResetStyles, removeAriaOverlayTriggerProperties, screenReaderOnlyStyles, scrollbarStyles, setAriaOverlayTriggerProperties } from "./core.js";
+import { ref } from "lit/directives/ref.js";
+import { html } from "lit/static-html.js";
+import { SbbSecondaryButtonElement } from "./button.pure.js";
+import { SbbContainerElement } from "./container.pure.js";
+
+//#region src/elements/overlay/overlay-base-element.ts
+const overlayResultMap = /* @__PURE__ */ new WeakMap();
+var SbbOverlayCloseEvent = class extends Event {
+	constructor(name, { cancelable, closeAttribute, closeTarget, result }) {
+		super(name, { cancelable });
+		this.result = result ?? (!closeTarget ? null : overlayResultMap.get(closeTarget) ?? (closeTarget.getAttribute(closeAttribute)?.trim() || null));
+		this.closeTarget = closeTarget ?? null;
+	}
+};
+function assignOverlayResult(element, result) {
+	overlayResultMap.set(element, result);
+}
+const overlayRefs = [];
+let SbbOverlayBaseElement = (() => {
+	let _classSuper = SbbNegativeMixin(SbbOpenCloseBaseElement);
+	let _trigger_decorators;
+	let _trigger_initializers = [];
+	let _trigger_extraInitializers = [];
+	let _accessibilityLabel_decorators;
+	let _accessibilityLabel_initializers = [];
+	let _accessibilityLabel_extraInitializers = [];
+	let _skipFocusRestoration_decorators;
+	let _skipFocusRestoration_initializers = [];
+	let _skipFocusRestoration_extraInitializers = [];
+	return class SbbOverlayBaseElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.#trigger_accessor_storage = __runInitializers(this, _trigger_initializers, null);
+			this.#accessibilityLabel_accessor_storage = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _accessibilityLabel_initializers, ""));
+			this.#skipFocusRestoration_accessor_storage = (__runInitializers(this, _accessibilityLabel_extraInitializers), __runInitializers(this, _skipFocusRestoration_initializers, false));
+			this.lastFocusedElement = __runInitializers(this, _skipFocusRestoration_extraInitializers);
+			this.focusTrapController = new SbbFocusTrapController(this);
+			this.scrollHandler = new SbbScrollHandler();
+			this.language = new SbbLanguageController(this);
+			this.inertController = new SbbInertController(this);
+			this.escapableOverlayController = new SbbEscapableOverlayController(this);
+			this._ariaLiveRefToggle = false;
+			this._triggerElement = null;
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_trigger_decorators = [idReference(), property()];
+			_accessibilityLabel_decorators = [forceType(), property({ attribute: "accessibility-label" })];
+			_skipFocusRestoration_decorators = [forceType(), property({ type: Boolean })];
+			__esDecorate(this, null, _trigger_decorators, {
+				kind: "accessor",
+				name: "trigger",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "trigger" in obj,
+					get: (obj) => obj.trigger,
+					set: (obj, value) => {
+						obj.trigger = value;
+					}
+				},
+				metadata: _metadata
+			}, _trigger_initializers, _trigger_extraInitializers);
+			__esDecorate(this, null, _accessibilityLabel_decorators, {
+				kind: "accessor",
+				name: "accessibilityLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "accessibilityLabel" in obj,
+					get: (obj) => obj.accessibilityLabel,
+					set: (obj, value) => {
+						obj.accessibilityLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _accessibilityLabel_initializers, _accessibilityLabel_extraInitializers);
+			__esDecorate(this, null, _skipFocusRestoration_decorators, {
+				kind: "accessor",
+				name: "skipFocusRestoration",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "skipFocusRestoration" in obj,
+					get: (obj) => obj.skipFocusRestoration,
+					set: (obj, value) => {
+						obj.skipFocusRestoration = value;
+					}
+				},
+				metadata: _metadata
+			}, _skipFocusRestoration_initializers, _skipFocusRestoration_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.styles = [popoverResetStyles, screenReaderOnlyStyles];
+		}
+		#trigger_accessor_storage;
+		/**
+		* The element that will trigger the menu overlay.
+		*
+		* For attribute usage, provide an id reference.
+		*/
+		get trigger() {
+			return this.#trigger_accessor_storage;
+		}
+		set trigger(value) {
+			this.#trigger_accessor_storage = value;
+		}
+		#accessibilityLabel_accessor_storage;
+		/** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
+		get accessibilityLabel() {
+			return this.#accessibilityLabel_accessor_storage;
+		}
+		set accessibilityLabel(value) {
+			this.#accessibilityLabel_accessor_storage = value;
+		}
+		#skipFocusRestoration_accessor_storage;
+		/**
+		* Whether to skip restoring focus to the previously-focused element when the overlay is closed.
+		* Note that automatic focus restoration is an accessibility feature, and it is recommended that
+		* you provide your own equivalent, if you decide to turn it off.
+		*/
+		get skipFocusRestoration() {
+			return this.#skipFocusRestoration_accessor_storage;
+		}
+		set skipFocusRestoration(value) {
+			this.#skipFocusRestoration_accessor_storage = value;
+		}
+		/** Opens the component. */
+		open() {
+			if (this.state === "opening" || this.state === "opened" || this._hasClosedParent() || !this.dispatchBeforeOpenEvent()) return;
+			this.lastFocusedElement = document.activeElement;
+			this.showPopover?.();
+			this.state = "opening";
+			if (this._triggerElement) this._triggerElement.ariaExpanded = "true";
+			overlayRefs.push(this);
+			this.scrollHandler.disableScroll();
+			this.escapableOverlayController.connect();
+			this.attachOpenOverlayEvents();
+			if (this.isZeroAnimationDuration()) this.handleOpening();
+		}
+		/** Closes the component. */
+		close(result) {
+			this._close(result, void 0);
+		}
+		_close(result, target) {
+			if (this.state === "closing" || this.state === "closed") return;
+			this.lastResult = result ?? null;
+			this.lastClosedTarget = target;
+			if (!this.dispatchBeforeCloseEvent()) return;
+			this.state = "closing";
+			if (this._triggerElement) this._triggerElement.ariaExpanded = "false";
+			this.removeAriaLiveRefContent();
+			if (this.isZeroAnimationDuration()) this.handleClosing();
+		}
+		/**
+		* Check if there is a parent dialog or overlay in the DOM that is closed.
+		* In this case, the overlay should not be opened because it would break the state.
+		* Not nested but stacked overlays are supported so this logic does not apply in this case.
+		*/
+		_hasClosedParent() {
+			const parentDialog = this.parentElement?.closest("sbb-dialog, sbb-overlay");
+			return parentDialog?.state === "closed" || parentDialog?.state === "closing";
+		}
+		connectedCallback() {
+			this.popover = "manual";
+			super.connectedCallback();
+			if (this.hasUpdated) this._configureTrigger();
+		}
+		_configureTrigger() {
+			if (this.trigger === this._triggerElement) return;
+			this._triggerAbortController?.abort();
+			removeAriaOverlayTriggerProperties(this._triggerElement);
+			this._triggerElement = this.trigger;
+			if (!this._triggerElement) return;
+			setAriaOverlayTriggerProperties(this, this._triggerElement, "dialog", this.state);
+			this._triggerAbortController = new AbortController();
+			this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal });
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._ariaLiveRef = this.shadowRoot.querySelector(".sbb-screen-reader-only");
+			this._configureTrigger();
+			if (this.isOpen) setTimeout(() => {
+				this.focusTrapController.focusInitialElement();
+			}, 0);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.openOverlayController?.abort();
+			this.removeInstanceFromGlobalCollection();
+			this.scrollHandler.enableScroll();
+			this._triggerElement = null;
+			this._triggerAbortController?.abort();
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (!isServer && (!name || name === "trigger") && this.hasUpdated) this._configureTrigger();
+		}
+		attachOpenOverlayEvents() {
+			this.openOverlayController = new AbortController();
+			window.addEventListener("keydown", () => {
+				this.removeAriaLiveRefContent();
+			}, { signal: this.openOverlayController.signal });
+			window.addEventListener("click", () => this.removeAriaLiveRefContent(), { signal: this.openOverlayController.signal });
+		}
+		removeInstanceFromGlobalCollection() {
+			const indexInOverlayRefs = overlayRefs.indexOf(this);
+			if (indexInOverlayRefs > -1) overlayRefs.splice(indexInOverlayRefs, 1);
+		}
+		closeOnSbbOverlayCloseClick(event) {
+			const overlayCloseElement = event.composedPath().find((el, i, a) => el instanceof HTMLElement && i < a.indexOf(this) && (el.hasAttribute(this.closeAttribute) || el.localName === this.closeTag) && !el.hasAttribute("disabled") && (el.closest(this.localName) === this || (this.shadowRoot?.contains(el) ?? false)));
+			if (!overlayCloseElement) return;
+			if (overlayRefs.length) overlayRefs[overlayRefs.length - 1]._close(null, overlayCloseElement);
+		}
+		removeAriaLiveRefContent() {
+			if (!this._ariaLiveRef) return;
+			this._ariaLiveRef.textContent = "";
+		}
+		setAriaLiveRefContent(label) {
+			if (!this._ariaLiveRef) return;
+			this._ariaLiveRefToggle = !this._ariaLiveRefToggle;
+			this._ariaLiveRef.textContent = `${i18nDialog[this.language.current]}${label ? `, ${label}` : ""}${this._ariaLiveRefToggle ? "\xA0" : ""}`;
+		}
+		onOverlayAnimationEnd(event) {
+			if (event.animationName === "open" && this.state === "opening") this.handleOpening();
+			else if (event.animationName === "close" && this.state === "closing") this.handleClosing();
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/overlay/overlay.scss?inline
+var overlay_default = ":host {\n  --_sbb-overlay-padding-block: calc(\n    var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l)\n  );\n  --sbb-overlay-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: var(--sbb-overlay-display);\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\n  z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));\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  --sbb-overlay-display: block;\n  --sbb-overlay-container-display: flex;\n}\n\n:host(:is(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]))) {\n  --sbb-overlay-pointer-events: all;\n}\n\n:host([negative]) {\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-overlay-color: var(--sbb-color-1-negative);\n  --sbb-overlay-background-color: var(--sbb-background-color-3-negative);\n}\n\n:host(:not(:is(:state(state-closed),[state--state-closed]))) {\n  --sbb-overlay-inset: 0;\n}\n\n.sbb-overlay__container {\n  background-color: var(--sbb-overlay-background-color);\n  pointer-events: var(--sbb-overlay-pointer-events);\n  display: var(--sbb-overlay-container-display);\n  align-items: center;\n  position: fixed;\n  inset: var(--sbb-overlay-inset);\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-overlay__container {\n  animation-name: open;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container {\n  pointer-events: none;\n  animation-name: close;\n}\n\n.sbb-overlay {\n  position: absolute;\n  inset-inline: 0;\n  margin: auto;\n  padding: 0;\n  border: none;\n  height: var(--sbb-overlay-height);\n  color: var(--sbb-overlay-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-overlay {\n  animation-name: open-move-in;\n  animation-duration: var(--sbb-overlay-animation-duration);\n  animation-timing-function: var(--sbb-overlay-animation-easing);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay {\n  animation-name: close-move-out;\n}\n\n.sbb-overlay__wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: var(--sbb-overlay-height);\n  outline: none;\n  position: fixed;\n}\n@media (min-width: calc(64rem)) {\n  .sbb-overlay__wrapper {\n    position: sticky;\n    inset-block-start: 0;\n    height: auto;\n  }\n}\n\n.sbb-overlay__header {\n  position: absolute;\n  inset-inline-start: 0;\n  display: flex;\n  pointer-events: none;\n  align-items: start;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--sbb-spacing-responsive-xs);\n  padding-block-end: 0;\n  z-index: 1;\n}\n.sbb-overlay__header * {\n  pointer-events: all;\n}\n\n.sbb-overlay__close {\n  margin-inline-start: auto;\n}\n\n.sbb-overlay__content {\n  height: 100vh;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.sbb-overlay__content-container {\n  padding-block: var(--_sbb-overlay-padding-block);\n}\n\n@keyframes open {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes open-move-in {\n  from {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n@keyframes close {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes close-move-out {\n  from {\n    transform: translateY(0%);\n  }\n  to {\n    transform: translateY(var(--sbb-spacing-fixed-4x));\n  }\n}\n";
+
+//#endregion
+//#region src/elements/overlay/overlay.component.ts
+/**
+* It displays an interactive overlay element.
+*
+* @slot - Use the unnamed slot to provide a content for the overlay.
+* @cssprop [--sbb-overlay-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 SbbOverlayElement = (() => {
+	let _classSuper = SbbOverlayBaseElement;
+	let _expanded_decorators;
+	let _expanded_initializers = [];
+	let _expanded_extraInitializers = [];
+	let _accessibilityCloseLabel_decorators;
+	let _accessibilityCloseLabel_initializers = [];
+	let _accessibilityCloseLabel_extraInitializers = [];
+	return class SbbOverlayElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.#expanded_accessor_storage = __runInitializers(this, _expanded_initializers, false);
+			this.#accessibilityCloseLabel_accessor_storage = (__runInitializers(this, _expanded_extraInitializers), __runInitializers(this, _accessibilityCloseLabel_initializers, ""));
+			this.closeAttribute = (__runInitializers(this, _accessibilityCloseLabel_extraInitializers), "sbb-overlay-close");
+			this._overlayContentElement = null;
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_expanded_decorators = [forceType(), property({
+				reflect: true,
+				type: Boolean
+			})];
+			_accessibilityCloseLabel_decorators = [forceType(), property({ attribute: "accessibility-close-label" })];
+			__esDecorate(this, null, _expanded_decorators, {
+				kind: "accessor",
+				name: "expanded",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "expanded" in obj,
+					get: (obj) => obj.expanded,
+					set: (obj, value) => {
+						obj.expanded = value;
+					}
+				},
+				metadata: _metadata
+			}, _expanded_initializers, _expanded_extraInitializers);
+			__esDecorate(this, null, _accessibilityCloseLabel_decorators, {
+				kind: "accessor",
+				name: "accessibilityCloseLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "accessibilityCloseLabel" in obj,
+					get: (obj) => obj.accessibilityCloseLabel,
+					set: (obj, value) => {
+						obj.accessibilityCloseLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _accessibilityCloseLabel_initializers, _accessibilityCloseLabel_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-overlay";
+		}
+		static {
+			this.elementDependencies = [SbbSecondaryButtonElement, SbbContainerElement];
+		}
+		static {
+			this.styles = [scrollbarStyles, unsafeCSS(overlay_default)];
+		}
+		static {
+			this.events = {
+				beforeopen: "beforeopen",
+				open: "open",
+				beforeclose: "beforeclose",
+				close: "close"
+			};
+		}
+		#expanded_accessor_storage;
+		/**
+		* Whether to allow the overlay content to stretch to full width.
+		* By default, the content has the appropriate page size.
+		*/
+		get expanded() {
+			return this.#expanded_accessor_storage;
+		}
+		set expanded(value) {
+			this.#expanded_accessor_storage = value;
+		}
+		#accessibilityCloseLabel_accessor_storage;
+		/** This will be forwarded as aria-label to the close button element. */
+		get accessibilityCloseLabel() {
+			return this.#accessibilityCloseLabel_accessor_storage;
+		}
+		set accessibilityCloseLabel(value) {
+			this.#accessibilityCloseLabel_accessor_storage = value;
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			if (this.isOpen) this.setAriaLiveRefContent();
+		}
+		isZeroAnimationDuration() {
+			return isZeroAnimationDuration(this, "--sbb-overlay-animation-duration");
+		}
+		handleOpening() {
+			this.state = "opened";
+			this.inertController.activate();
+			this.focusTrapController.focusInitialElement();
+			setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel));
+			this.focusTrapController.enabled = true;
+			this.dispatchOpenEvent();
+		}
+		handleClosing() {
+			this._overlayContentElement?.scrollTo(0, 0);
+			this.state = "closed";
+			this.hidePopover?.();
+			this.inertController.deactivate();
+			if (!this.skipFocusRestoration) this.lastFocusedElement?.focus();
+			this.openOverlayController?.abort();
+			this.focusTrapController.enabled = false;
+			this.removeInstanceFromGlobalCollection();
+			if (!overlayRefs.length) this.scrollHandler.enableScroll();
+			this.escapableOverlayController.disconnect();
+			this.dispatchCloseEvent();
+		}
+		dispatchBeforeCloseEvent() {
+			/** @type {SbbOverlayCloseEvent} 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 {SbbOverlayCloseEvent} Emits whenever the component is closed. */
+			return this.dispatchEvent(new SbbOverlayCloseEvent("close", {
+				closeAttribute: this.closeAttribute,
+				closeTarget: this.lastClosedTarget,
+				result: this.lastResult
+			}));
+		}
+		render() {
+			return html`
+      <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
+        <div class="sbb-overlay">
+          <div
+            @click=${(event) => this.closeOnSbbOverlayCloseClick(event)}
+            class="sbb-overlay__wrapper"
+          >
+            <div class="sbb-overlay__header">
+              <sbb-secondary-button
+                class="sbb-overlay__close"
+                aria-label="${this.accessibilityCloseLabel || i18nCloseDialog[this.language.current]}"
+                ?negative=${this.negative}
+                size="m"
+                icon-name="cross-small"
+                sbb-overlay-close
+              ></sbb-secondary-button>
+            </div>
+            <div
+              class="sbb-overlay__content ${this.negative ? "sbb-scrollbar-negative" : "sbb-scrollbar"}"
+              ${ref((el) => this._overlayContentElement = el)}
+              @scroll=${(e) => forwardEvent(e, document)}
+            >
+              <sbb-container
+                class="sbb-overlay__content-container"
+                ?expanded=${this.expanded}
+                color="transparent"
+              >
+                <slot></slot>
+              </sbb-container>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span class="sbb-screen-reader-only" aria-live="polite"></span>
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbOverlayBaseElement, SbbOverlayCloseEvent, SbbOverlayElement, assignOverlayResult, overlayRefs };

package/development/paginator/common/paginator-common.d.ts

@@ -1,5 +1,5 @@
-import { TemplateResult } from 'lit';
-import { AbstractConstructor, SbbElement, SbbElementConstructor, SbbLanguageController } from '../../core.ts';
+import { type TemplateResult } from 'lit';
+import { type AbstractConstructor, type SbbElement, type SbbElementConstructor, SbbLanguageController } from '../../core.ts';
 export declare class SbbPaginatorPageEvent extends Event {
     private readonly _length;
     private readonly _pageSize;
@@ -11,7 +11,7 @@ export declare class SbbPaginatorPageEvent extends Event {
     get previousPageIndex(): number;
     constructor({ length, pageSize, pageIndex, previousPageIndex, }: Omit<SbbPaginatorPageEvent, keyof Event>);
 }
-declare const SbbPaginatorCommonElementMixinType_base: AbstractConstructor<import('../../core.ts').SbbNegativeMixinType> & AbstractConstructor<import('../../core.ts').SbbDisabledMixinType> & typeof SbbElement;
+declare const SbbPaginatorCommonElementMixinType_base: AbstractConstructor<import("../../core.ts").SbbNegativeMixinType> & AbstractConstructor<import("../../core.ts").SbbDisabledMixinType> & typeof SbbElement;
 export declare abstract class SbbPaginatorCommonElementMixinType extends SbbPaginatorCommonElementMixinType_base {
     accessor length: number;
     accessor pageSize: number;
@@ -41,4 +41,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=paginator-common.d.ts.map

package/development/paginator/compact-paginator/compact-paginator.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
-import { SbbElement, SbbElementType } from '../../core.ts';
-declare const SbbCompactPaginatorElement_base: import('../../core.ts').AbstractConstructor<import('../common/paginator-common.ts').SbbPaginatorCommonElementMixinType> & typeof SbbElement;
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+import { SbbElement, type SbbElementType } from '../../core.ts';
+declare const SbbCompactPaginatorElement_base: import("../../core.ts").AbstractConstructor<import("../common/paginator-common.ts").SbbPaginatorCommonElementMixinType> & typeof SbbElement;
 /**
  * It displays a paginator component in compact mode.
  */
@@ -18,4 +18,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=compact-paginator.component.d.ts.map

package/development/paginator/paginator/paginator.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { SbbElement, SbbElementType } from '../../core.ts';
-declare const SbbPaginatorElement_base: import('../../core.ts').AbstractConstructor<import('../common/paginator-common.ts').SbbPaginatorCommonElementMixinType> & typeof SbbElement;
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { SbbElement, type SbbElementType } from '../../core.ts';
+declare const SbbPaginatorElement_base: import("../../core.ts").AbstractConstructor<import("../common/paginator-common.ts").SbbPaginatorCommonElementMixinType> & typeof SbbElement;
 /**
  * It displays a paginator component.
  */
@@ -45,4 +45,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=paginator.component.d.ts.map

package/development/paginator.d.ts

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

package/development/paginator.js

@@ -1,12 +1,10 @@
-import { n as SbbPaginatorPageEvent, t as SbbPaginatorCommonElementMixin } from "./paginator-common-B9EN1Fjx.js";
-import { t as SbbCompactPaginatorElement } from "./compact-paginator.component-CKHS0U1v.js";
-import { t as SbbPaginatorElement } from "./paginator.component-DisPJ2Qa.js";
-import "./paginator.pure.js";
+import { SbbCompactPaginatorElement, SbbPaginatorElement } from "./paginator.pure.js";
+
+export * from "./paginator.pure.js"
+
 //#region src/elements/paginator.ts
 /** @entrypoint */
 SbbCompactPaginatorElement.define();
 SbbPaginatorElement.define();
-//#endregion
-export { SbbCompactPaginatorElement, SbbPaginatorCommonElementMixin, SbbPaginatorElement, SbbPaginatorPageEvent };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdG9yLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9wYWdpbmF0b3IudHMiXSwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBlbnRyeXBvaW50ICovXG5pbXBvcnQgeyBTYmJDb21wYWN0UGFnaW5hdG9yRWxlbWVudCwgU2JiUGFnaW5hdG9yRWxlbWVudCB9IGZyb20gJy4vcGFnaW5hdG9yLnB1cmUudHMnO1xuXG5leHBvcnQgKiBmcm9tICcuL3BhZ2luYXRvci5wdXJlLnRzJztcblxuU2JiQ29tcGFjdFBhZ2luYXRvckVsZW1lbnQuZGVmaW5lKCk7XG5TYmJQYWdpbmF0b3JFbGVtZW50LmRlZmluZSgpO1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFLQSwyQkFBMkIsT0FBTTtBQUNqQyxvQkFBb0IsT0FBTSJ9
+//#endregion

package/development/paginator.pure.d.ts

@@ -2,4 +2,3 @@
 export * from './paginator/common/paginator-common.ts';
 export * from './paginator/compact-paginator/compact-paginator.component.ts';
 export * from './paginator/paginator/paginator.component.ts';
-//# sourceMappingURL=paginator.pure.d.ts.map