@sbb-esta/lyne-elements 3.0.0-next.1 → 3.0.0-next.2

package/option/option/option.component.js

@@ -1,16 +1,16 @@
-import { __esDecorate as h, __runInitializers as u } from "tslib";
-import { css as g, nothing as r, html as b } from "lit";
-import { customElement as v } from "lit/decorators.js";
-import { EventEmitter as d } from "../../core/eventing.js";
-import { SbbOptionBaseElement as m } from "./option-base-element.js";
+import { __esDecorate as d, __runInitializers as p } from "tslib";
+import { css as h, nothing as s, html as a } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { EventEmitter as l } from "../../core/eventing.js";
+import { SbbOptionBaseElement as g } from "./option-base-element.js";
 import "../../visual-checkbox.js";
-const f = g`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-color-milk);--sbb-option-background-color-active: var(--sbb-color-cloud);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-background-color: var(--sbb-color-milk);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke);--sbb-option-background-color-hover: var(--sbb-color-charcoal);--sbb-option-background-color-active: var(--sbb-color-iron);--sbb-option-disabled-border-color: var(--sbb-color-smoke);--sbb-option-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__container{background-color:var(--sbb-option-background-color)}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;top:.375rem;right:.375rem;bottom:.375rem;left:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{white-space:initial}`;
-let z = (() => {
+const v = h`*,:before,:after{box-sizing:border-box}:host{--sbb-option-color: var(--sbb-color-charcoal);--sbb-option-background-color: inherit;--sbb-option-background-color-hover: var(--sbb-color-milk);--sbb-option-background-color-active: var(--sbb-color-cloud);--sbb-option-disabled-border-color: var(--sbb-color-graphite);--sbb-option-disabled-background-color: var(--sbb-color-milk);--sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-option-min-height: var(--sbb-size-element-s);--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);--sbb-option-justify-content: start;--sbb-option-cursor: pointer;--sbb-option-border-radius: var(--sbb-border-radius-4x);--sbb-option-icon-color: var(--sbb-color-metal);--sbb-option-focus-outline-color: transparent;--sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);display:block}:host([data-negative]){--sbb-option-color: var(--sbb-color-milk);--sbb-option-icon-color: var(--sbb-color-smoke);--sbb-option-background-color-hover: var(--sbb-color-charcoal);--sbb-option-background-color-active: var(--sbb-color-iron);--sbb-option-disabled-border-color: var(--sbb-color-smoke);--sbb-option-disabled-background-color: var(--sbb-color-charcoal);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@media (any-hover: hover){:host(:hover:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-hover)}}:host(:active:not([disabled],[data-group-disabled])){--sbb-option-background-color: var(--sbb-option-background-color-active)}:host(:not([data-disable-highlight])) .sbb-option__label slot{display:none}:host(:is([data-group-disabled],[disabled])){--sbb-option-cursor: default}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled])){--sbb-option-color: GrayText}}:host([data-variant=select]){--sbb-option-column-gap: var(--sbb-spacing-fixed-2x);--sbb-option-justify-content: space-between}:host([data-variant=select][data-multiple]){--sbb-option-justify-content: start}:host([data-active]){--sbb-option-focus-outline-color: var(--sbb-focus-outline-color)}:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{font-weight:700}@media (forced-colors: active){:host(:not(:is([disabled],[data-group-disabled]))) .sbb-option__label--highlight{color:Highlight}}.sbb-option__container{background-color:var(--sbb-option-background-color)}.sbb-option{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:flex;min-height:var(--sbb-option-min-height);align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}.sbb-option:after{content:"";display:block;position:absolute;inset:var(--sbb-option-focus-outline-inset);pointer-events:none;border:var(--sbb-focus-outline-width) solid var(--sbb-option-focus-outline-color);border-radius:var(--sbb-option-border-radius)}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option{position:relative;z-index:0}:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{content:"";display:block;position:absolute;inset:.375rem;border:var(--sbb-border-width-1x) dashed var(--sbb-option-disabled-border-color);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-option-disabled-background-color);z-index:-1}@media (forced-colors: active){:host(:is([data-group-disabled],[disabled]):not([data-multiple])) .sbb-option:before{border-color:GrayText}}.sbb-option__icon{display:flex;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);color:var(--sbb-option-icon-color)}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-option__icon{display:var(--sbb-option-icon-container-display, none)}.sbb-option__label{white-space:initial}`;
+let S = (() => {
   var o;
-  let p = [v("sbb-option")], n, l = [], i, c = m;
-  var a = (o = class extends c {
+  let c = [u("sbb-option")], r, b = [], i, n = g;
+  var e = (o = class extends n {
     constructor() {
-      super(...arguments), this.optionId = "sbb-option", this.selectionChange = new d(this, a.events.selectionChange), this.optionSelected = new d(this, a.events.optionSelected);
+      super(...arguments), this.optionId = "sbb-option", this.selectionChange = new l(this, e.events.selectionChange), this.optionSelected = new l(this, e.events.optionSelected);
     }
     set _variant(t) {
       t && this.setAttribute("data-variant", t);
@@ -25,13 +25,11 @@ let z = (() => {
       return !this.hydrationRequired && this.hasAttribute("data-multiple");
     }
     setAttributeFromParent() {
-      var e, s;
-      const t = (e = this.closest) == null ? void 0 : e.call(this, "sbb-optgroup");
-      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.negative = !!((s = this.closest) != null && s.call(
-        this,
+      const t = this.closest?.("sbb-optgroup");
+      t && (this.disabledFromGroup = t.disabled, this.updateAriaDisabled()), this.negative = !!this.closest?.(
         // :is() selector not possible due to test environment
         "sbb-autocomplete[negative],sbb-form-field[negative]"
-      )), this.toggleAttribute("data-negative", this.negative), this.toggleAttribute("data-multiple", this._isMultiple);
+      ), this.toggleAttribute("data-negative", this.negative), this.toggleAttribute("data-multiple", this._isMultiple);
     }
     selectByClick(t) {
       if (this.disabled || this.disabledFromGroup) {
@@ -47,8 +45,7 @@ let z = (() => {
       super.init(), this._setVariantByContext(), this.handleHighlightState();
     }
     _setVariantByContext() {
-      var t, e, s;
-      (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (e = this.closest) != null && e.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((s = this.closest) != null && s.call(this, "sbb-select[multiple]"));
+      this.closest?.("sbb-autocomplete") ? this._variant = "autocomplete" : this.closest?.("sbb-select") && (this._variant = "select"), this._isMultiple = !!this.closest?.("sbb-select[multiple]");
     }
     handleHighlightState() {
       if (this._variant !== "autocomplete") {
@@ -58,35 +55,35 @@ let z = (() => {
       super.handleHighlightState();
     }
     renderIcon() {
-      return b`
+      return a`
       <!-- Icon -->
-      ${this._isMultiple ? r : b` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
+      ${this._isMultiple ? s : a` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
 
       <!-- Checkbox -->
-      ${this._isMultiple ? b`
+      ${this._isMultiple ? a`
             <sbb-visual-checkbox
               ?checked=${this.selected}
               ?disabled=${this.disabled || this.disabledFromGroup}
               ?negative=${this.negative}
             ></sbb-visual-checkbox>
-          ` : r}
+          ` : s}
     `;
     }
     renderLabel() {
-      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : r;
+      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : s;
     }
     renderTick() {
-      return this._variant === "select" && !this._isMultiple && this.selected ? b`<sbb-icon name="tick-small"></sbb-icon>` : r;
+      return this._variant === "select" && !this._isMultiple && this.selected ? a`<sbb-icon name="tick-small"></sbb-icon>` : s;
     }
   }, i = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    h(null, n = { value: i }, p, { kind: "class", name: i.name, metadata: t }, null, l), a = i = n.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.role = "option", o.styles = f, o.events = {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    d(null, r = { value: i }, c, { kind: "class", name: i.name, metadata: t }, null, b), e = i = r.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), o.role = "option", o.styles = v, o.events = {
     selectionChange: "optionSelectionChange",
     optionSelected: "optionSelected"
-  }, u(i, l), o);
-  return a = i;
+  }, p(i, b), o);
+  return e = i;
 })();
 export {
-  z as SbbOptionElement
+  S as SbbOptionElement
 };

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

@@ -1,16 +1,27 @@
-import { PropertyValues } from 'lit';
+import { PropertyDeclaration, PropertyValues } from 'lit';
 import { SbbFocusTrapController } from '../core/a11y.js';
 import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
 import { SbbEscapableOverlayController, SbbInertController, 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 {
+    /**
+     * The element that will trigger the menu overlay.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    accessor trigger: HTMLElement | null;
     /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
     accessor accessibilityLabel: string;
+    /**
+     * 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.
+     */
+    accessor skipFocusRestoration: boolean;
     /** Emits whenever the component is closed. */
     protected didClose: EventEmitter<SbbOverlayCloseEventDetails>;
     protected lastFocusedElement?: HTMLElement;
@@ -19,25 +30,32 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     protected focusTrapController: SbbFocusTrapController;
     protected scrollHandler: SbbScrollHandler;
     protected returnValue: any;
-    protected ariaLiveRefToggle: boolean;
-    protected ariaLiveRef: SbbScreenReaderOnlyElement;
     protected language: SbbLanguageController;
     protected inertController: SbbInertController;
-    protected sbbEscapableOverlayController: SbbEscapableOverlayController;
+    protected escapableOverlayController: SbbEscapableOverlayController;
+    private _ariaLiveRefToggle;
+    private _ariaLiveRef;
+    private _triggerElement;
+    private _triggerAbortController;
     protected abstract closeAttribute: string;
-    protected abstract onOverlayAnimationEnd(event: AnimationEvent): void;
+    protected abstract handleOpening(): void;
     protected abstract handleClosing(): void;
     protected abstract isZeroAnimationDuration(): boolean;
+    /** Opens the component. */
+    open(): void;
     /** Closes the component. */
     close(result?: any, target?: HTMLElement): any;
     connectedCallback(): void;
+    private _configureTrigger;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
     disconnectedCallback(): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
     protected attachOpenOverlayEvents(): void;
     protected removeInstanceFromGlobalCollection(): void;
     protected closeOnSbbOverlayCloseClick(event: Event): void;
     protected removeAriaLiveRefContent(): void;
     protected setAriaLiveRefContent(label?: string): void;
+    protected onOverlayAnimationEnd(event: AnimationEvent): void;
 }
 export {};
 //# sourceMappingURL=overlay-base-element.d.ts.map

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

@@ -1 +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,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAA6B,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EACL,6BAA6B,EAC7B,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAG3E,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F,kHAAkH;IAClH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAIpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,mBAAmB,yBAAoC;IACjE,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;IACrD,SAAS,CAAC,eAAe,qBAAgC;IACzD,SAAS,CAAC,6BAA6B,gCAA2C;IAElF,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IACrE,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,uBAAuB,IAAI,OAAO;IAErD,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IAyBrC,iBAAiB,IAAI,IAAI;cAKtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAO5C,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAiBzC,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"}
+{"version":3,"file":"overlay-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAA6B,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EACL,6BAA6B,EAC7B,kBAAkB,EAClB,qBAAqB,EACtB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AASzE,eAAO,MAAM,WAAW,EAAE,qBAAqB,EAAO,CAAC;;AAEvD,8BAAsB,qBAAsB,SAAQ,0BAAyC;IAC3F;;;;OAIG;IACH,SAEgB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEnD,kHAAkH;IAClH,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD;;;;OAIG;IACH,SAEgB,oBAAoB,EAAE,OAAO,CAAS;IAEtD,8CAA8C;IAC9C,UAAmB,QAAQ,EAAE,YAAY,CAAC,2BAA2B,CAAC,CAIpE;IAGF,SAAS,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC3C,SAAS,CAAC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAC5C,SAAS,CAAC,qBAAqB,EAAG,eAAe,CAAC;IAClD,SAAS,CAAC,mBAAmB,yBAAoC;IACjE,SAAS,CAAC,aAAa,mBAA0B;IACjD,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC;IAC3B,SAAS,CAAC,QAAQ,wBAAmC;IACrD,SAAS,CAAC,eAAe,qBAAgC;IACzD,SAAS,CAAC,0BAA0B,gCAA2C;IAE/E,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,eAAe,CAA4B;IACnD,OAAO,CAAC,uBAAuB,CAAmB;IAElD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IACxC,SAAS,CAAC,QAAQ,CAAC,uBAAuB,IAAI,OAAO;IAErD,2BAA2B;IACpB,IAAI,IAAI,IAAI;IA2BnB,4BAA4B;IACrB,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,GAAG;IA0BrC,iBAAiB,IAAI,IAAI;IASzC,OAAO,CAAC,iBAAiB;cAoBN,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ9D,oBAAoB,IAAI,IAAI;IAS5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;IAQP,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAiBzC,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;IAarD,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;CAO7D"}

package/overlay/overlay-base-element.js

@@ -1,56 +1,93 @@
-var m = (e) => {
-  throw TypeError(e);
+var E = (i) => {
+  throw TypeError(i);
 };
-var u = (e, i, l) => i.has(e) || m("Cannot " + l);
-var d = (e, i, l) => (u(e, i, "read from private field"), l ? l.call(e) : i.get(e)), f = (e, i, l) => i.has(e) ? m("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, l), h = (e, i, l, o) => (u(e, i, "write to private field"), o ? o.call(e, l) : i.set(e, l), l);
-import { __runInitializers as p, __esDecorate as v } from "tslib";
-import "lit";
-import { property as y } from "lit/decorators.js";
-import { SbbFocusTrapController as C } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as g } from "../core/base-elements.js";
-import { SbbLanguageController as L, SbbInertController as w, SbbEscapableOverlayController as S } from "../core/controllers.js";
-import { forceType as O } from "../core/decorators.js";
-import { SbbScrollHandler as R } from "../core/dom.js";
-import { EventEmitter as E } from "../core/eventing.js";
-import { i18nDialog as A } from "../core/i18n.js";
-import { SbbNegativeMixin as _ } from "../core/mixins.js";
-const b = [];
-let P = (() => {
-  var a, s;
-  let e = _(g), i, l = [], o = [];
-  return s = class extends e {
+var k = (i, r, s) => r.has(i) || E("Cannot " + s);
+var d = (i, r, s) => (k(i, r, "read from private field"), s ? s.call(i) : r.get(i)), p = (i, r, s) => r.has(i) ? E("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, s), l = (i, r, s, u) => (k(i, r, "write to private field"), u ? u.call(i, s) : r.set(i, s), s);
+import { __runInitializers as h, __esDecorate as f } from "tslib";
+import { isServer as O } 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 z } from "../core/controllers.js";
+import { idReference as I, forceType as w } from "../core/decorators.js";
+import { SbbScrollHandler as U } from "../core/dom.js";
+import { EventEmitter as D } from "../core/eventing.js";
+import { i18nDialog as H } from "../core/i18n.js";
+import { SbbNegativeMixin as $ } from "../core/mixins.js";
+import { removeAriaOverlayTriggerAttributes as q, setAriaOverlayTriggerAttributes as N } from "../core/overlay.js";
+const m = [];
+let te = (() => {
+  var n, c, g, a;
+  let i = $(F), r, s = [], u = [], v, C = [], y = [], L, R = [], A = [];
+  return a = class extends i {
     constructor() {
       super(...arguments);
-      f(this, a);
-      h(this, a, p(this, l, "")), this.didClose = (p(this, o), new E(this, s.events.didClose, { cancelable: !0 })), this.focusTrapController = new C(this), this.scrollHandler = new R(), this.ariaLiveRefToggle = !1, this.language = new L(this), this.inertController = new w(this), this.sbbEscapableOverlayController = new S(this);
+      p(this, n);
+      p(this, c);
+      p(this, g);
+      l(this, n, h(this, s, null)), l(this, c, (h(this, u), h(this, C, ""))), l(this, g, (h(this, y), h(this, R, !1))), this.didClose = (h(this, A), new D(this, a.events.didClose, { cancelable: !0 })), this.focusTrapController = new S(this), this.scrollHandler = new U(), this.language = new T(this), this.inertController = new x(this), this.escapableOverlayController = new z(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 d(this, n);
+    }
+    set trigger(e) {
+      l(this, n, e);
     }
     /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
     get accessibilityLabel() {
-      return d(this, a);
+      return d(this, c);
+    }
+    set accessibilityLabel(e) {
+      l(this, c, 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 d(this, g);
     }
-    set accessibilityLabel(t) {
-      h(this, a, t);
+    set skipFocusRestoration(e) {
+      l(this, g, e);
+    }
+    /** Opens the component. */
+    open() {
+      this.state === "closed" && (this.lastFocusedElement = document.activeElement, this.willOpen.emit() && (this.showPopover?.(), this.state = "opening", this._triggerElement?.setAttribute("aria-expanded", "true"), m.push(this), this.scrollHandler.disableScroll(), this.isZeroAnimationDuration() && this.handleOpening()));
     }
     /** Closes the component. */
-    close(t, r) {
+    close(e, t) {
       if (this.state !== "opened")
         return;
-      this.returnValue = t, this.overlayCloseElement = r;
-      const n = {
+      this.returnValue = e, this.overlayCloseElement = t;
+      const o = {
         returnValue: this.returnValue,
         closeTarget: this.overlayCloseElement
       };
-      this.willClose.emit(n) && (this.state = "closing", this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing());
+      this.willClose.emit(o) && (this.state = "closing", this._triggerElement?.setAttribute("aria-expanded", "false"), this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing());
     }
     connectedCallback() {
-      this.popover = "manual", super.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(), q(this._triggerElement), this._triggerElement = this.trigger, this._triggerElement && (N(this._triggerElement, "dialog", this.id, this.state), this._triggerAbortController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+        signal: this._triggerAbortController.signal
+      })));
     }
-    firstUpdated(t) {
-      this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(t);
+    firstUpdated(e) {
+      super.firstUpdated(e), this._ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), this._configureTrigger();
     }
     disconnectedCallback() {
-      var t;
-      super.disconnectedCallback(), (t = this.openOverlayController) == null || t.abort(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
+      super.disconnectedCallback(), this.openOverlayController?.abort(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll(), this._triggerElement = null, this._triggerAbortController?.abort();
+    }
+    requestUpdate(e, t, o) {
+      super.requestUpdate(e, t, o), !O && (!e || e === "trigger") && this.hasUpdated && this._configureTrigger();
     }
     attachOpenOverlayEvents() {
       this.openOverlayController = new AbortController(), window.addEventListener("keydown", () => {
@@ -62,30 +99,40 @@ let P = (() => {
       });
     }
     removeInstanceFromGlobalCollection() {
-      b.splice(b.indexOf(this), 1);
+      m.splice(m.indexOf(this), 1);
     }
     // Close the component on click of any element that has the `closeAttribute` attribute.
-    closeOnSbbOverlayCloseClick(t) {
-      const r = t.composedPath().filter((c) => c instanceof window.HTMLElement).find((c) => c.hasAttribute(this.closeAttribute) && !c.hasAttribute("disabled"));
-      if (!r)
+    closeOnSbbOverlayCloseClick(e) {
+      const t = e.composedPath().filter((b) => b instanceof window.HTMLElement).find((b) => b.hasAttribute(this.closeAttribute) && !b.hasAttribute("disabled"));
+      if (!t)
         return;
-      const n = r.getAttribute("type") === "submit" ? r.form ?? null : null;
-      b[b.length - 1].close(n, r);
+      const o = t.getAttribute("type") === "submit" ? t.form ?? null : null;
+      m[m.length - 1].close(o, t);
     }
     removeAriaLiveRefContent() {
-      this.ariaLiveRef.textContent = "";
+      this._ariaLiveRef.textContent = "";
+    }
+    setAriaLiveRefContent(e) {
+      this._ariaLiveRefToggle = !this._ariaLiveRefToggle, this._ariaLiveRef.textContent = `${H[this.language.current]}${e ? `, ${e}` : ""}${this._ariaLiveRefToggle ? " " : ""}`;
     }
-    setAriaLiveRefContent(t) {
-      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${A[this.language.current]}${t ? `, ${t}` : ""}${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();
     }
-  }, a = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
-    i = [O(), y({ attribute: "accessibility-label" })], v(s, null, i, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (r) => "accessibilityLabel" in r, get: (r) => r.accessibilityLabel, set: (r, n) => {
-      r.accessibilityLabel = n;
-    } }, metadata: t }, l, o), t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), s;
+  }, n = new WeakMap(), c = new WeakMap(), g = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    r = [I(), _()], v = [w(), _({ attribute: "accessibility-label" })], L = [w(), _({ type: Boolean })], f(a, null, r, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (t) => "trigger" in t, get: (t) => t.trigger, set: (t, o) => {
+      t.trigger = o;
+    } }, metadata: e }, s, u), f(a, null, v, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (t) => "accessibilityLabel" in t, get: (t) => t.accessibilityLabel, set: (t, o) => {
+      t.accessibilityLabel = o;
+    } }, metadata: e }, C, y), f(a, null, L, { kind: "accessor", name: "skipFocusRestoration", static: !1, private: !1, access: { has: (t) => "skipFocusRestoration" in t, get: (t) => t.skipFocusRestoration, set: (t, o) => {
+      t.skipFocusRestoration = o;
+    } }, metadata: e }, R, A), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a;
 })();
 export {
-  P as SbbOverlayBaseElement,
-  b as overlayRefs
+  te as SbbOverlayBaseElement,
+  m as overlayRefs
 };

package/overlay/overlay.component.d.ts

@@ -8,7 +8,6 @@ import { SbbOverlayBaseElement } from './overlay-base-element.js';
  * @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`.
@@ -20,29 +19,20 @@ export declare class SbbOverlayElement extends SbbOverlayBaseElement {
         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.
      */
     accessor expanded: boolean;
-    /** Whether a back button is displayed next to the title. */
-    accessor backButton: boolean;
     /** This will be forwarded as aria-label to the close button element. */
     accessor accessibilityCloseLabel: string;
-    /** This will be forwarded as aria-label to the back button element. */
-    accessor accessibilityBackLabel: string;
     protected closeAttribute: string;
-    /** Emits whenever the back button is clicked. */
-    private _backClick;
     private _overlayContentElement;
-    /** Opens the component. */
-    open(): void;
+    connectedCallback(): void;
     protected isZeroAnimationDuration(): boolean;
-    private _handleOpening;
+    protected handleOpening(): void;
     protected handleClosing(): void;
-    protected onOverlayAnimationEnd(event: AnimationEvent): void;
     protected render(): TemplateResult;
 }
 declare global {

package/overlay/overlay.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.component.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;GAYG;AACH,qBAEM,iBAAkB,SAAQ,qBAAqB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;;MAM3B;IAEX;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,4DAA4D;IAC5D,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,uEAAuE;IACvE,SAEgB,sBAAsB,EAAE,MAAM,CAAM;IAEpD,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IAEvD,iDAAiD;IACjD,OAAO,CAAC,UAAU,CAGhB;IACF,OAAO,CAAC,sBAAsB,CAA4B;IAE1D,2BAA2B;IACpB,IAAI,IAAI,IAAI;IA8BnB,SAAS,CAAC,uBAAuB,IAAI,OAAO;IAI5C,OAAO,CAAC,cAAc;cAYH,aAAa,IAAI,IAAI;IAwBxC,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;cAQzC,MAAM,IAAI,cAAc;CAsD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"version":3,"file":"overlay.component.d.ts","sourceRoot":"","sources":["../../../src/elements/overlay/overlay.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,EAAe,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG/E,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AACzB,OAAO,0BAA0B,CAAC;AAIlC;;;;;;;;;;;GAWG;AACH,qBAEM,iBAAkB,SAAQ,qBAAqB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,gBAAgC,MAAM;;;;;MAK3B;IAEX;;;OAGG;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,wEAAwE;IACxE,SAEgB,uBAAuB,EAAE,MAAM,CAAM;IAErD,SAAS,CAAC,cAAc,EAAE,MAAM,CAAuB;IACvD,OAAO,CAAC,sBAAsB,CAA4B;IAE1C,iBAAiB,IAAI,IAAI;IAMzC,SAAS,CAAC,uBAAuB,IAAI,OAAO;IAI5C,SAAS,CAAC,aAAa,IAAI,IAAI;cAYZ,aAAa,IAAI,IAAI;cAuBrB,MAAM,IAAI,cAAc;CA4C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}