@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773396165

package/option.js

@@ -1,9 +1,15 @@
-import { t as e } from "./optgroup-base-element-DWKHCat8.js";
-import { SbbOptGroupElement as t } from "./option/optgroup/optgroup.component.js";
-import { t as n } from "./option-hint.component-Goyhv5ss.js";
-import { SbbOptionBaseElement as r } from "./option/option/option-base-element.js";
-import { t as i } from "./option.component-uzmmREt4.js";
-import "./option.pure.js";
-t.define(), i.define(), n.define();
-//#endregion
-export { t as SbbOptGroupElement, e as SbbOptgroupBaseElement, r as SbbOptionBaseElement, i as SbbOptionElement, n as SbbOptionHintElement };
+import { SbbOptgroupBaseElement as i } from "./option/optgroup/optgroup-base-element.js";
+import { SbbOptGroupElement as e } from "./option/optgroup/optgroup.component.js";
+import { SbbOptionHintElement as t } from "./option/option-hint/option-hint.component.js";
+import { SbbOptionBaseElement as l } from "./option/option/option-base-element.js";
+import { SbbOptionElement as o } from "./option/option/option.component.js";
+e.define();
+o.define();
+t.define();
+export {
+  e as SbbOptGroupElement,
+  i as SbbOptgroupBaseElement,
+  l as SbbOptionBaseElement,
+  o as SbbOptionElement,
+  t as SbbOptionHintElement
+};

package/option.pure.js

@@ -1,6 +1,12 @@
-import { t as e } from "./optgroup-base-element-DWKHCat8.js";
-import { SbbOptGroupElement as t } from "./option/optgroup/optgroup.component.js";
-import { t as n } from "./option-hint.component-Goyhv5ss.js";
-import { SbbOptionBaseElement as r } from "./option/option/option-base-element.js";
-import { t as i } from "./option.component-uzmmREt4.js";
-export { t as SbbOptGroupElement, e as SbbOptgroupBaseElement, r as SbbOptionBaseElement, i as SbbOptionElement, n as SbbOptionHintElement };
+import { SbbOptgroupBaseElement as o } from "./option/optgroup/optgroup-base-element.js";
+import { SbbOptGroupElement as r } from "./option/optgroup/optgroup.component.js";
+import { SbbOptionHintElement as m } from "./option/option-hint/option-hint.component.js";
+import { SbbOptionBaseElement as f } from "./option/option/option-base-element.js";
+import { SbbOptionElement as x } from "./option/option/option.component.js";
+export {
+  r as SbbOptGroupElement,
+  o as SbbOptgroupBaseElement,
+  f as SbbOptionBaseElement,
+  x as SbbOptionElement,
+  m as SbbOptionHintElement
+};

package/overlay/overlay-base-element.js

@@ -1,157 +1,152 @@
-import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { isServer as n } from "lit";
-import { property as r } from "lit/decorators.js";
-import { SbbOpenCloseBaseElement as i } from "../core/base-elements.js";
-import { forceType as a, idReference as o } from "../core/decorators.js";
-import { SbbScrollHandler as s } from "../core/dom.js";
-import { SbbNegativeMixin as c } from "../core/mixins.js";
-import { SbbEscapableOverlayController as l, SbbInertController as u, SbbLanguageController as d } from "../core/controllers.js";
-import { i18nDialog as f } from "../core/i18n.js";
-import { removeAriaOverlayTriggerAttributes as p, setAriaOverlayTriggerAttributes as m } from "../core/overlay.js";
-import { SbbFocusTrapController as h } from "../core/a11y.js";
-//#region src/elements/overlay/overlay-base-element.ts
-var g = /* @__PURE__ */ new WeakMap(), _ = class extends CustomEvent {
-	constructor(e, { cancelable: t, closeAttribute: n, closeTarget: r, result: i }) {
-		super(e, {
-			cancelable: t,
-			detail: {
-				returnValue: i,
-				closeTarget: r
-			}
-		}), this.result = i ?? (r ? g.get(r) ?? (r.getAttribute(n)?.trim() || null) : null), this.closeTarget = r ?? null;
-	}
+var E = (i) => {
+  throw TypeError(i);
 };
-function v(e, t) {
-	g.set(e, t);
+var O = (i, s, r) => s.has(i) || E("Cannot " + r);
+var f = (i, s, r) => (O(i, s, "read from private field"), r ? r.call(i) : s.get(i)), m = (i, s, r) => s.has(i) ? E("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, r), c = (i, s, r, n) => (O(i, s, "write to private field"), n ? n.call(i, r) : s.set(i, r), r);
+import { __runInitializers as p, __esDecorate as v } from "tslib";
+import { isServer as w } from "lit";
+import { property as _ } from "lit/decorators.js";
+import { SbbFocusTrapController as S } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as F } from "../core/base-elements.js";
+import { SbbLanguageController as T, SbbInertController as x, SbbEscapableOverlayController as I } from "../core/controllers.js";
+import { idReference as z, forceType as A } from "../core/decorators.js";
+import { SbbScrollHandler as U } from "../core/dom.js";
+import { i18nDialog as D } from "../core/i18n.js";
+import { SbbNegativeMixin as H } from "../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as N, setAriaOverlayTriggerAttributes as P } from "../core/overlay.js";
+const k = /* @__PURE__ */ new WeakMap();
+class Y extends CustomEvent {
+  constructor(s, { cancelable: r, closeAttribute: n, closeTarget: l, result: b }) {
+    super(s, { cancelable: r, detail: { returnValue: b, closeTarget: l } }), this.result = b ?? (l ? k.get(l) ?? (l.getAttribute(n)?.trim() || null) : null), this.closeTarget = l ?? null;
+  }
 }
-var y = [], b = (() => {
-	let g = c(i), _, v = [], b = [], x, S = [], C = [], w, T = [], E = [];
-	return class extends g {
-		constructor() {
-			super(...arguments), this.#e = t(this, v, null), this.#t = (t(this, b), t(this, S, "")), this.#n = (t(this, C), t(this, T, !1)), this.lastFocusedElement = t(this, E), this.focusTrapController = new h(this), this.scrollHandler = new s(), this.language = new d(this), this.inertController = new u(this), this.escapableOverlayController = new l(this), this._ariaLiveRefToggle = !1, this._triggerElement = null;
-		}
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-			_ = [o(), r()], x = [a(), r({ attribute: "accessibility-label" })], w = [a(), r({ type: Boolean })], e(this, null, _, {
-				kind: "accessor",
-				name: "trigger",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "trigger" in e,
-					get: (e) => e.trigger,
-					set: (e, t) => {
-						e.trigger = t;
-					}
-				},
-				metadata: t
-			}, v, b), e(this, null, x, {
-				kind: "accessor",
-				name: "accessibilityLabel",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "accessibilityLabel" in e,
-					get: (e) => e.accessibilityLabel,
-					set: (e, t) => {
-						e.accessibilityLabel = t;
-					}
-				},
-				metadata: t
-			}, S, C), e(this, null, w, {
-				kind: "accessor",
-				name: "skipFocusRestoration",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "skipFocusRestoration" in e,
-					get: (e) => e.skipFocusRestoration,
-					set: (e, t) => {
-						e.skipFocusRestoration = t;
-					}
-				},
-				metadata: t
-			}, T, E), t && Object.defineProperty(this, Symbol.metadata, {
-				enumerable: !0,
-				configurable: !0,
-				writable: !0,
-				value: t
-			});
-		}
-		#e;
-		get trigger() {
-			return this.#e;
-		}
-		set trigger(e) {
-			this.#e = e;
-		}
-		#t;
-		get accessibilityLabel() {
-			return this.#t;
-		}
-		set accessibilityLabel(e) {
-			this.#t = e;
-		}
-		#n;
-		get skipFocusRestoration() {
-			return this.#n;
-		}
-		set skipFocusRestoration(e) {
-			this.#n = e;
-		}
-		open() {
-			this.state === "opening" || this.state === "opened" || this._hasClosedParent() || !this.dispatchBeforeOpenEvent() || (this.lastFocusedElement = document.activeElement, this.showPopover?.(), this.state = "opening", this._triggerElement?.setAttribute("aria-expanded", "true"), y.push(this), this.scrollHandler.disableScroll(), this.escapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.isZeroAnimationDuration() && this.handleOpening());
-		}
-		close(e, t) {
-			this._close(e, t);
-		}
-		_close(e, t) {
-			this.state === "closing" || this.state === "closed" || (this.returnValue = e, this.overlayCloseElement = t, this.dispatchBeforeCloseEvent() && (this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing()));
-		}
-		_hasClosedParent() {
-			let e = this.parentElement?.closest("sbb-dialog, sbb-overlay");
-			return e?.state === "closed" || e?.state === "closing";
-		}
-		connectedCallback() {
-			this.popover = "manual", super.connectedCallback(), this.hasUpdated && this._configureTrigger();
-		}
-		_configureTrigger() {
-			this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), p(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (m(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), { signal: this._triggerAbortController.signal })));
-		}
-		firstUpdated(e) {
-			super.firstUpdated(e), this._ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), this._configureTrigger(), 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(e, t, r) {
-			super.requestUpdate(e, t, r), !n && (!e || e === "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() {
-			let e = y.indexOf(this);
-			e > -1 && y.splice(e, 1);
-		}
-		closeOnSbbOverlayCloseClick(e) {
-			let t = e.composedPath().filter((e) => e instanceof window.HTMLElement).find((e) => (e.hasAttribute(this.closeAttribute) || e.localName === this.closeTag) && !e.hasAttribute("disabled"));
-			!t || t.closest(this.localName) !== this && !this.shadowRoot?.contains(t) || y.length && y[y.length - 1]._close(null, t);
-		}
-		removeAriaLiveRefContent() {
-			this._ariaLiveRef && (this._ariaLiveRef.textContent = "");
-		}
-		setAriaLiveRefContent(e) {
-			this._ariaLiveRef && (this._ariaLiveRefToggle = !this._ariaLiveRefToggle, this._ariaLiveRef.textContent = `${f[this.language.current]}${e ? `, ${e}` : ""}${this._ariaLiveRefToggle ? "\xA0" : ""}`);
-		}
-		onOverlayAnimationEnd(e) {
-			e.animationName === "open" && this.state === "opening" ? this.handleOpening() : e.animationName === "close" && this.state === "closing" && this.handleClosing();
-		}
-	};
+function ee(i, s) {
+  k.set(i, s);
+}
+const d = [];
+let te = (() => {
+  var h, g, u, o;
+  let i = H(F), s, r = [], n = [], l, b = [], C = [], y, R = [], L = [];
+  return o = class extends i {
+    constructor() {
+      super(...arguments);
+      m(this, h);
+      m(this, g);
+      m(this, u);
+      c(this, h, p(this, r, null)), c(this, g, (p(this, n), p(this, b, ""))), c(this, u, (p(this, C), p(this, R, !1))), this.lastFocusedElement = p(this, L), this.focusTrapController = new S(this), this.scrollHandler = new U(), this.language = new T(this), this.inertController = new x(this), this.escapableOverlayController = new I(this), this._ariaLiveRefToggle = !1, this._triggerElement = null;
+    }
+    /**
+     * The element that will trigger the menu overlay.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    get trigger() {
+      return f(this, h);
+    }
+    set trigger(e) {
+      c(this, h, e);
+    }
+    /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
+    get accessibilityLabel() {
+      return f(this, g);
+    }
+    set accessibilityLabel(e) {
+      c(this, g, e);
+    }
+    /**
+     * 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 f(this, u);
+    }
+    set skipFocusRestoration(e) {
+      c(this, u, e);
+    }
+    /** Opens the component. */
+    open() {
+      this.state === "opening" || this.state === "opened" || this._hasClosedParent() || !this.dispatchBeforeOpenEvent() || (this.lastFocusedElement = document.activeElement, this.showPopover?.(), this.state = "opening", this._triggerElement?.setAttribute("aria-expanded", "true"), d.push(this), this.scrollHandler.disableScroll(), this.escapableOverlayController.connect(), this.attachOpenOverlayEvents(), this.isZeroAnimationDuration() && this.handleOpening());
+    }
+    close(e, t) {
+      this._close(e, t);
+    }
+    _close(e, t) {
+      this.state === "closing" || this.state === "closed" || (this.returnValue = e, this.overlayCloseElement = t, this.dispatchBeforeCloseEvent() && (this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this.removeAriaLiveRefContent(), 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 e = this.parentElement?.closest("sbb-dialog, sbb-overlay");
+      return (e?.state === "closed" || e?.state === "closing") ?? !1;
+    }
+    connectedCallback() {
+      this.popover = "manual", super.connectedCallback(), this.hasUpdated && this._configureTrigger();
+    }
+    // Check if the trigger is valid and attach click event listeners.
+    _configureTrigger() {
+      this.trigger !== this._triggerElement && (this._triggerAbortController?.abort(), N(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (P(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+        signal: this._triggerAbortController.signal
+      })));
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this._ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), this._configureTrigger(), 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(e, t, a) {
+      super.requestUpdate(e, t, a), !w && (!e || e === "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 e = d.indexOf(this);
+      e > -1 && d.splice(e, 1);
+    }
+    // Close the component on click of any element that has the `closeAttribute` attribute.
+    closeOnSbbOverlayCloseClick(e) {
+      const t = e.composedPath().filter((a) => a instanceof window.HTMLElement).find((a) => (a.hasAttribute(this.closeAttribute) || a.localName === this.closeTag) && !a.hasAttribute("disabled"));
+      !t || t.closest(this.localName) !== this && !this.shadowRoot?.contains(t) || d.length && d[d.length - 1]._close(null, t);
+    }
+    removeAriaLiveRefContent() {
+      this._ariaLiveRef && (this._ariaLiveRef.textContent = "");
+    }
+    setAriaLiveRefContent(e) {
+      this._ariaLiveRef && (this._ariaLiveRefToggle = !this._ariaLiveRefToggle, this._ariaLiveRef.textContent = `${D[this.language.current]}${e ? `, ${e}` : ""}${this._ariaLiveRefToggle ? " " : ""}`);
+    }
+    // Wait for dialog transition to complete.
+    // In rare cases, it can be that the animationEnd event is triggered twice.
+    // To avoid entering a corrupt state, exit when state is not expected.
+    onOverlayAnimationEnd(e) {
+      e.animationName === "open" && this.state === "opening" ? this.handleOpening() : e.animationName === "close" && this.state === "closing" && this.handleClosing();
+    }
+  }, h = new WeakMap(), g = new WeakMap(), u = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    s = [z(), _()], l = [A(), _({ attribute: "accessibility-label" })], y = [A(), _({ type: Boolean })], v(o, null, s, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, a) => {
+      t.trigger = a;
+    } }, metadata: e }, r, n), v(o, null, l, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, a) => {
+      t.accessibilityLabel = a;
+    } }, metadata: e }, b, C), v(o, null, y, { kind: "accessor", name: "skipFocusRestoration", static: !1, private: !1, access: { has: (t) => "skipFocusRestoration" in t, get: (t) => t.skipFocusRestoration, set: (t, a) => {
+      t.skipFocusRestoration = a;
+    } }, metadata: e }, R, L), e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o;
 })();
-//#endregion
-export { b as SbbOverlayBaseElement, _ as SbbOverlayCloseEvent, v as assignOverlayResult, y as overlayRefs };
+export {
+  te as SbbOverlayBaseElement,
+  Y as SbbOverlayCloseEvent,
+  ee as assignOverlayResult,
+  d as overlayRefs
+};

package/overlay/overlay.component.js

@@ -1,2 +1,138 @@
-import { t as e } from "../overlay.component-r0Rp_b-3.js";
-export { e as SbbOverlayElement };
+var y = (e) => {
+  throw TypeError(e);
+};
+var g = (e, s, o) => s.has(e) || y("Cannot " + o);
+var v = (e, s, o) => (g(e, s, "read from private field"), o ? o.call(e) : s.get(e)), p = (e, s, o) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, o), b = (e, s, o, n) => (g(e, s, "write to private field"), n ? n.call(e, o) : s.set(e, o), o);
+import { __runInitializers as c, __esDecorate as f } from "tslib";
+import { property as _ } from "lit/decorators.js";
+import { ref as w } from "lit/directives/ref.js";
+import { html as C } from "lit/static-html.js";
+import { forceType as x } from "../core/decorators.js";
+import { isZeroAnimationDuration as E } from "../core/dom.js";
+import { forwardEvent as L } from "../core/eventing.js";
+import { i18nCloseDialog as z } from "../core/i18n.js";
+import { boxSizingStyles as A } from "../core/styles.js";
+import { SbbOverlayBaseElement as T, overlayRefs as O, SbbOverlayCloseEvent as k } from "./overlay-base-element.js";
+import { css as $ } from "lit";
+import "../button/secondary-button.js";
+import "../button/transparent-button.js";
+import "../container.js";
+import "../screen-reader-only.js";
+const S = $`:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-background-color-3);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));--sbb-overlay-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;display:none;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]))){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-1-negative);--sbb-overlay-background-color: var(--sbb-background-color-3-negative)}:host(:not(:is(:state(state-closed),[state--state-closed]))){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:none;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}: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{display:flex;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay__container{pointer-events:none;animation-name:close}.sbb-overlay{position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}: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{animation-name:open-move-in;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:var(--sbb-overlay-animation-easing)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-overlay{animation-name:close-move-out}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media(min-width:64rem){.sbb-overlay__wrapper{position:sticky;inset-block-start:0;height:auto}}.sbb-overlay__header{position:absolute;inset-inline-start:0;display:flex;pointer-events:none;align-items:start;justify-content:space-between;width:100%;padding:var(--sbb-spacing-responsive-xs);padding-block-end:0;z-index:1}.sbb-overlay__header *{pointer-events:all}.sbb-overlay__close{margin-inline-start:auto}.sbb-overlay__content{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-overlay__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-overlay__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-overlay__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-overlay__content::-webkit-scrollbar-button,.sbb-overlay__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-overlay__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-overlay__content{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.sbb-overlay__content-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0}to{opacity:1}}@keyframes open-move-in{0%{transform:translateY(var(--sbb-spacing-fixed-4x))}to{transform:translateY(0)}}@keyframes close{0%{opacity:1}to{opacity:0}}@keyframes close-move-out{0%{transform:translateY(0)}to{transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
+let I = 0, Q = (() => {
+  var i, l, a;
+  let e = T, s, o = [], n = [], h, m = [], u = [];
+  return a = class extends e {
+    constructor() {
+      super(...arguments);
+      p(this, i);
+      p(this, l);
+      b(this, i, c(this, o, !1)), b(this, l, (c(this, n), c(this, m, ""))), this.closeAttribute = (c(this, u), "sbb-overlay-close"), this._overlayContentElement = null;
+    }
+    /**
+     * Whether to allow the overlay content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    get expanded() {
+      return v(this, i);
+    }
+    set expanded(t) {
+      b(this, i, t);
+    }
+    /** This will be forwarded as aria-label to the close button element. */
+    get accessibilityCloseLabel() {
+      return v(this, l);
+    }
+    set accessibilityCloseLabel(t) {
+      b(this, l, t);
+    }
+    connectedCallback() {
+      this.id ||= `sbb-overlay-${I++}`, super.connectedCallback();
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this.isOpen && this.setAriaLiveRefContent();
+    }
+    isZeroAnimationDuration() {
+      return E(this, "--sbb-overlay-animation-duration");
+    }
+    handleOpening() {
+      this.state = "opened", this.inertController.activate(), this.focusTrapController.focusInitialElement(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusTrapController.enabled = !0, this.dispatchOpenEvent();
+    }
+    handleClosing() {
+      this._overlayContentElement?.scrollTo(0, 0), this.state = "closed", this.hidePopover?.(), this.inertController.deactivate(), this.skipFocusRestoration || this.lastFocusedElement?.focus(), this.openOverlayController?.abort(), this.focusTrapController.enabled = !1, this.removeInstanceFromGlobalCollection(), O.length || this.scrollHandler.enableScroll(), this.escapableOverlayController.disconnect(), this.dispatchCloseEvent({
+        returnValue: this.returnValue,
+        closeTarget: this.overlayCloseElement
+      });
+    }
+    // TODO: remove parameter `detail`
+    dispatchBeforeCloseEvent(t) {
+      return this.dispatchEvent(new k("beforeclose", {
+        cancelable: !0,
+        closeAttribute: this.closeAttribute,
+        closeTarget: this.overlayCloseElement,
+        result: this.returnValue
+      }));
+    }
+    // TODO: remove parameter `detail`
+    dispatchCloseEvent(t) {
+      return this.dispatchEvent(new k("close", {
+        closeAttribute: this.closeAttribute,
+        closeTarget: this.overlayCloseElement,
+        result: this.returnValue
+      }));
+    }
+    render() {
+      return C`
+      <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
+        <div class="sbb-overlay">
+          <div
+            @click=${(t) => this.closeOnSbbOverlayCloseClick(t)}
+            class="sbb-overlay__wrapper"
+          >
+            <div class="sbb-overlay__header">
+              <sbb-secondary-button
+                class="sbb-overlay__close"
+                aria-label="${this.accessibilityCloseLabel || z[this.language.current]}"
+                ?negative=${this.negative}
+                size="m"
+                type="button"
+                icon-name="cross-small"
+                sbb-overlay-close
+              ></sbb-secondary-button>
+            </div>
+            <div
+              class="sbb-overlay__content"
+              ${w((t) => this._overlayContentElement = t)}
+              @scroll=${(t) => L(t, document)}
+            >
+              <sbb-container
+                class="sbb-overlay__content-container"
+                ?expanded=${this.expanded}
+                color="transparent"
+              >
+                <slot></slot>
+              </sbb-container>
+            </div>
+          </div>
+        </div>
+      </div>
+      <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
+    `;
+    }
+  }, i = new WeakMap(), l = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    s = [x(), _({ reflect: !0, type: Boolean })], h = [x(), _({ attribute: "accessibility-close-label" })], f(a, null, s, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (r) => "expanded" in r, get: (r) => r.expanded, set: (r, d) => {
+      r.expanded = d;
+    } }, metadata: t }, o, n), f(a, null, h, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (r) => "accessibilityCloseLabel" in r, get: (r) => r.accessibilityCloseLabel, set: (r, d) => {
+      r.accessibilityCloseLabel = d;
+    } }, metadata: t }, m, u), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.elementName = "sbb-overlay", a.styles = [A, S], a.events = {
+    beforeopen: "beforeopen",
+    open: "open",
+    beforeclose: "beforeclose",
+    close: "close"
+  }, a;
+})();
+export {
+  Q as SbbOverlayElement
+};

package/overlay.js

@@ -1,7 +1,10 @@
-import { SbbOverlayBaseElement as e, SbbOverlayCloseEvent as t, assignOverlayResult as n, overlayRefs as r } from "./overlay/overlay-base-element.js";
-import { t as i } from "./overlay.component-r0Rp_b-3.js";
-import "./overlay.pure.js";
-//#region src/elements/overlay.ts
-i.define();
-//#endregion
-export { e as SbbOverlayBaseElement, t as SbbOverlayCloseEvent, i as SbbOverlayElement, n as assignOverlayResult, r as overlayRefs };
+import { SbbOverlayBaseElement as o, SbbOverlayCloseEvent as t, assignOverlayResult as b, overlayRefs as s } from "./overlay/overlay-base-element.js";
+import { SbbOverlayElement as e } from "./overlay/overlay.component.js";
+e.define();
+export {
+  o as SbbOverlayBaseElement,
+  t as SbbOverlayCloseEvent,
+  e as SbbOverlayElement,
+  b as assignOverlayResult,
+  s as overlayRefs
+};

package/overlay.pure.js

@@ -1,3 +1,9 @@
-import { SbbOverlayBaseElement as e, SbbOverlayCloseEvent as t, assignOverlayResult as n, overlayRefs as r } from "./overlay/overlay-base-element.js";
-import { t as i } from "./overlay.component-r0Rp_b-3.js";
-export { e as SbbOverlayBaseElement, t as SbbOverlayCloseEvent, i as SbbOverlayElement, n as assignOverlayResult, r as overlayRefs };
+import { SbbOverlayBaseElement as r, SbbOverlayCloseEvent as a, assignOverlayResult as b, overlayRefs as o } from "./overlay/overlay-base-element.js";
+import { SbbOverlayElement as t } from "./overlay/overlay.component.js";
+export {
+  r as SbbOverlayBaseElement,
+  a as SbbOverlayCloseEvent,
+  t as SbbOverlayElement,
+  b as assignOverlayResult,
+  o as overlayRefs
+};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "4.7.0-dev.1773388991",
+  "version": "4.7.0-dev.1773396165",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
     "storybook",
-    "https://github.com/sbb-design-systems/lyne-components/commit/a53df7a865e5e9799d60718ee7796e7cc0d6646e"
+    "https://github.com/sbb-design-systems/lyne-components/commit/a8df81a0cd578eeaa62e976b373520766496d43d"
   ],
   "type": "module",
   "exports": {