@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/elements/option.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC"}

package/option.js

@@ -0,0 +1,2 @@
+export * from "./option/optgroup.js";
+export * from "./option/option.js";

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

@@ -0,0 +1,43 @@
+import { PropertyValues } from 'lit';
+import { SbbFocusHandler } from '../core/a11y.js';
+import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
+import { SbbLanguageController } from '../core/controllers.js';
+import { SbbScrollHandler } from '../core/dom.js';
+import { EventEmitter } from '../core/eventing.js';
+import { SbbOverlayCloseEventDetails } from '../core/interfaces.js';
+import { SbbScreenReaderOnlyElement } from '../screen-reader-only.js';
+
+export declare const overlayRefs: SbbOverlayBaseElement[];
+declare const SbbOverlayBaseElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
+export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElement_base {
+    /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
+    accessibilityLabel: string | undefined;
+    /** Emits whenever the component is closed. */
+    protected didClose: EventEmitter<SbbOverlayCloseEventDetails>;
+    protected lastFocusedElement?: HTMLElement;
+    protected overlayCloseElement?: HTMLElement;
+    protected overlayController: AbortController;
+    protected openOverlayController: AbortController;
+    protected focusHandler: SbbFocusHandler;
+    protected scrollHandler: SbbScrollHandler;
+    protected returnValue: any;
+    protected ariaLiveRefToggle: boolean;
+    protected ariaLiveRef: SbbScreenReaderOnlyElement;
+    protected language: SbbLanguageController;
+    protected abstract onOverlayAnimationEnd(event: AnimationEvent): void;
+    protected abstract setOverlayFocus(): void;
+    protected abstract closeAttribute: string;
+    /** Closes the component. */
+    close(result?: any, target?: HTMLElement): any;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected attachOpenOverlayEvents(): void;
+    protected onKeydownEvent(event: KeyboardEvent): void;
+    protected removeInstanceFromGlobalCollection(): void;
+    protected closeOnSbbOverlayCloseClick(event: Event): void;
+    protected removeAriaLiveRefContent(): void;
+    protected setAriaLiveRefContent(label?: string): void;
+}
+export {};
+//# sourceMappingURL=overlay-base-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAe,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAGzE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F,kHAAkH;IAC3D,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAGpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,YAAY,kBAAyB;IAC/C,SAAS,CAAC,aAAa,mBAA0B;IACjD,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC;IAC3B,SAAS,CAAC,iBAAiB,UAAS;IACpC,SAAS,CAAC,WAAW,EAAG,0BAA0B,CAAC;IACnD,SAAS,CAAC,QAAQ,wBAAmC;IAErD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IACrE,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,IAAI;IAC1C,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAE1C,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAmBrC,iBAAiB,IAAI,IAAI;cAUtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAS5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAkBzC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWpD,SAAS,CAAC,kCAAkC,IAAI,IAAI;IAKpD,SAAS,CAAC,2BAA2B,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAoBzD,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C,SAAS,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;CAStD"}

package/overlay/overlay.d.ts

@@ -0,0 +1,52 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbOverlayBaseElement } from './overlay-base-element.js';
+
+/**
+ * It displays an interactive overlay element.
+ *
+ * @slot - Use the unnamed slot to provide a content for the overlay.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-overlay` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<SbbOverlayCloseEventDetails>} didClose - Emits whenever the `sbb-overlay` is closed.
+ * @event {CustomEvent<void>} requestBackAction - Emits whenever the back button is clicked.
+ * @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`.
+ */
+export declare class SbbOverlayElement extends SbbOverlayBaseElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly willOpen: "willOpen";
+        readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
+        readonly backClick: "requestBackAction";
+    };
+    /**
+     * Whether to allow the overlay content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    expanded: boolean;
+    /** Whether a back button is displayed next to the title. */
+    backButton: boolean;
+    /** This will be forwarded as aria-label to the close button element. */
+    accessibilityCloseLabel: string | undefined;
+    /** This will be forwarded as aria-label to the back button element. */
+    accessibilityBackLabel: string | undefined;
+    protected closeAttribute: string;
+    /** Emits whenever the back button is clicked. */
+    private _backClick;
+    private _overlayContentElement;
+    /** Opens the component. */
+    open(): void;
+    protected onOverlayAnimationEnd(event: AnimationEvent): void;
+    protected setOverlayFocus(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-overlay': SbbOverlayElement;
+    }
+}
+//# sourceMappingURL=overlay.d.ts.map

package/overlay/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAE/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,qBAAqB;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,4DAA4D;IACE,UAAU,UAAS;IAEjF,wEAAwE;IACX,uBAAuB,EAChF,MAAM,GACN,SAAS,CAAC;IAEd,uEAAuE;IACX,sBAAsB,EAC9E,MAAM,GACN,SAAS,CAAC;IAEd,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IAEvD,iDAAiD;IACjD,OAAO,CAAC,UAAU,CAGhB;IACF,OAAO,CAAC,sBAAsB,CAA4B;IAE1D,2BAA2B;IACpB,IAAI,IAAI,IAAI;IAyBnB,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IA8B5D,SAAS,CAAC,eAAe,IAAI,IAAI;cAUd,MAAM,IAAI,cAAc;CAyD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/overlay.d.ts

@@ -0,0 +1,3 @@
+export * from './overlay/overlay.js';
+export * from './overlay/overlay-base-element.js';
+//# sourceMappingURL=overlay.d.ts.map

package/overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/elements/overlay.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC"}

package/overlay.js

@@ -0,0 +1,210 @@
+import { css as g, nothing as w } from "lit";
+import { property as b, customElement as _ } from "lit/decorators.js";
+import { html as d, unsafeStatic as v } from "lit/static-html.js";
+import { SbbFocusHandler as k, setModalityOnNextFocus as h, getFirstFocusableElement as C } from "./core/a11y.js";
+import { EventEmitter as p } from "./core/eventing.js";
+import { i18nDialog as x, i18nCloseDialog as O, i18nGoBack as E } from "./core/i18n.js";
+import { applyInertMechanism as y, removeInertMechanism as m } from "./core/overlay.js";
+import { SbbOpenCloseBaseElement as L } from "./core/base-elements.js";
+import { SbbLanguageController as $ } from "./core/controllers.js";
+import { SbbScrollHandler as A, hostContext as R } from "./core/dom.js";
+import { SbbNegativeMixin as S } from "./core/mixins.js";
+import "./button/secondary-button.js";
+import "./button/transparent-button.js";
+import "./container.js";
+import "./screen-reader-only.js";
+var B = Object.defineProperty, F = (t, e, o, a) => {
+  for (var r = void 0, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = n(e, o, r) || r);
+  return r && B(e, o, r), r;
+};
+const l = [], u = class f extends S(L) {
+  constructor() {
+    super(...arguments), this.didClose = new p(
+      this,
+      f.events.didClose
+    ), this.focusHandler = new k(), this.scrollHandler = new A(), this.ariaLiveRefToggle = !1, this.language = new $(this);
+  }
+  /** Closes the component. */
+  close(e, o) {
+    if (this.state !== "opened")
+      return;
+    this.returnValue = e, this.overlayCloseElement = o;
+    const a = {
+      returnValue: this.returnValue,
+      closeTarget: this.overlayCloseElement
+    };
+    this.willClose.emit(a) && (this.state = "closing", this.removeAriaLiveRefContent());
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController(), this.state === "opened" && y(this);
+  }
+  firstUpdated(e) {
+    this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(e);
+  }
+  disconnectedCallback() {
+    var e, o;
+    super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (o = this.openOverlayController) == null || o.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), m();
+  }
+  attachOpenOverlayEvents() {
+    this.openOverlayController = new AbortController(), window.addEventListener(
+      "keydown",
+      (e) => {
+        this.removeAriaLiveRefContent(), this.onKeydownEvent(e);
+      },
+      {
+        signal: this.openOverlayController.signal
+      }
+    ), window.addEventListener("click", () => this.removeAriaLiveRefContent(), {
+      signal: this.openOverlayController.signal
+    });
+  }
+  onKeydownEvent(e) {
+    if (this.state === "opened" && e.key === "Escape") {
+      l[l.length - 1].close();
+      return;
+    }
+  }
+  removeInstanceFromGlobalCollection() {
+    l.splice(l.indexOf(this), 1);
+  }
+  // Close the component on click of any element that has the `closeAttribute` attribute.
+  closeOnSbbOverlayCloseClick(e) {
+    const o = e.composedPath().filter((r) => r instanceof window.HTMLElement).find(
+      (r) => r.hasAttribute(this.closeAttribute) && !r.hasAttribute("disabled")
+    );
+    if (!o)
+      return;
+    const a = o.getAttribute("type") === "submit" ? R("form", o) : void 0;
+    l[l.length - 1].close(a, o);
+  }
+  removeAriaLiveRefContent() {
+    this.ariaLiveRef.textContent = "";
+  }
+  setAriaLiveRefContent(e) {
+    this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${x[this.language.current]}${e ? `, ${e}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
+  }
+};
+F([
+  b({ attribute: "accessibility-label" })
+], u.prototype, "accessibilityLabel");
+let H = u;
+const T = g`*,:before,:after{box-sizing:border-box}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-overlay-background-color: var(--sbb-color-milk);--sbb-overlay-height: 100%;--sbb-overlay-inset: 0 auto auto 0;--sbb-overlay-padding-block: calc( var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l) );--sbb-overlay-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-overlay-animation-easing: ease;--sbb-overlay-pointer-events: none;--sbb-overlay-content-transition: transform var(--sbb-overlay-animation-duration) var(--sbb-overlay-animation-easing);display:block;position:fixed;inset:var(--sbb-overlay-inset);z-index:var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index))}@media (min-width: 64rem){:host{--sbb-overlay-padding-block: var(--sbb-spacing-responsive-xl)}}:host(:is([data-state=opened],[data-state=opening])){--sbb-overlay-pointer-events: all}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-overlay-color: var(--sbb-color-white);--sbb-overlay-background-color: var(--sbb-color-midnight)}:host(:not([data-state=closed])){--sbb-overlay-inset: 0}.sbb-overlay__container{background-color:var(--sbb-overlay-background-color);pointer-events:var(--sbb-overlay-pointer-events);display:flex;align-items:center;position:fixed;inset:var(--sbb-overlay-inset)}.sbb-overlay{display:none;position:absolute;inset-inline:0;margin:auto;padding:0;border:none;height:var(--sbb-overlay-height);overflow:auto;color:var(--sbb-overlay-color)}:host([data-state]:not([data-state=closed])) .sbb-overlay{display:block;animation-name:open;animation-duration:var(--sbb-overlay-animation-duration);animation-timing-function:ease}:host([data-state][data-state=closing]) .sbb-overlay{pointer-events:none;animation-name:close}.sbb-overlay__wrapper{display:flex;flex-direction:column;width:100%;height:var(--sbb-overlay-height);outline:none;position:fixed}@media (min-width: 52.5rem){.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);height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}.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-container{padding-block:var(--sbb-overlay-padding-block)}@keyframes open{0%{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-spacing-fixed-4x))}}`;
+var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, c = (t, e, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? M(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (a ? n(e, o, r) : n(r)) || r);
+  return a && r && z(e, o, r), r;
+};
+let s = class extends H {
+  constructor() {
+    super(...arguments), this.expanded = !1, this.backButton = !1, this.closeAttribute = "sbb-overlay-close", this._backClick = new p(
+      this,
+      s.events.backClick
+    ), this._overlayContentElement = null;
+  }
+  /** Opens the component. */
+  open() {
+    var t;
+    this.state === "closed" && (this.lastFocusedElement = document.activeElement, this._overlayContentElement = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
+      ".sbb-overlay__content"
+    ), this.willOpen.emit() && (this.state = "opening", l.push(this), this.scrollHandler.disableScroll()));
+  }
+  // Wait for overlay 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(t) {
+    var e, o, a;
+    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), y(this), this.attachOpenOverlayEvents(), this.setOverlayFocus(), setTimeout(() => this.setAriaLiveRefContent(this.accessibilityLabel)), this.focusHandler.trap(this)) : t.animationName === "close" && this.state === "closing" && ((e = this._overlayContentElement) == null || e.scrollTo(0, 0), this.state = "closed", m(), h(this.lastFocusedElement), (o = this.lastFocusedElement) == null || o.focus(), (a = this.openOverlayController) == null || a.abort(), this.focusHandler.disconnect(), this.removeInstanceFromGlobalCollection(), !l.length && this.scrollHandler.enableScroll(), this.didClose.emit({
+      returnValue: this.returnValue,
+      closeTarget: this.overlayCloseElement
+    }));
+  }
+  // Set focus on the first focusable element.
+  setOverlayFocus() {
+    const t = C(
+      Array.from(this.shadowRoot.children).filter(
+        (e) => e instanceof window.HTMLElement
+      )
+    );
+    h(t), t == null || t.focus();
+  }
+  render() {
+    const t = this.negative ? "sbb-transparent-button" : "sbb-secondary-button", e = d`
+      <${v(t)}
+        class="sbb-overlay__close"
+        aria-label=${this.accessibilityCloseLabel || O[this.language.current]}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="cross-small"
+        sbb-overlay-close
+      ></${v(t)}>
+    `, o = d`
+      <${v(t)}
+        class="sbb-overlay__back"
+        aria-label=${this.accessibilityBackLabel || E[this.language.current]}
+        ?negative=${this.negative}
+        size="m"
+        type="button"
+        icon-name="chevron-small-left-small"
+        @click=${() => this._backClick.emit()}
+      ></${v(t)}>
+    `;
+    return d`
+      <div class="sbb-overlay__container">
+        <div
+          @animationend=${(a) => this.onOverlayAnimationEnd(a)}
+          class="sbb-overlay"
+        >
+          <div
+            @click=${(a) => this.closeOnSbbOverlayCloseClick(a)}
+            class="sbb-overlay__wrapper"
+          >
+            <div class="sbb-overlay__header">
+              ${this.backButton ? o : w} ${e}
+            </div>
+            <div class="sbb-overlay__content">
+              <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>
+    `;
+  }
+};
+s.styles = T;
+s.events = {
+  willOpen: "willOpen",
+  didOpen: "didOpen",
+  willClose: "willClose",
+  didClose: "didClose",
+  backClick: "requestBackAction"
+};
+c([
+  b({ reflect: !0, type: Boolean })
+], s.prototype, "expanded", 2);
+c([
+  b({ attribute: "back-button", type: Boolean })
+], s.prototype, "backButton", 2);
+c([
+  b({ attribute: "accessibility-close-label" })
+], s.prototype, "accessibilityCloseLabel", 2);
+c([
+  b({ attribute: "accessibility-back-label" })
+], s.prototype, "accessibilityBackLabel", 2);
+s = c([
+  _("sbb-overlay")
+], s);
+export {
+  H as SbbOverlayBaseElement,
+  s as SbbOverlayElement,
+  l as overlayRefs
+};