@sbb-esta/lyne-elements 2.6.0 → 2.7.0

package/option/option.js

@@ -1,320 +1,6 @@
-var R = (a) => {
-  throw TypeError(a);
-};
-var q = (a, o, l) => o.has(a) || R("Cannot " + l);
-var m = (a, o, l) => (q(a, o, "read from private field"), l ? l.call(a) : o.get(a)), _ = (a, o, l) => o.has(a) ? R("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, l), v = (a, o, l, r) => (q(a, o, "write to private field"), r ? r.call(a, l) : o.set(a, l), l);
-import { __esDecorate as h, __runInitializers as n } from "tslib";
-import { LitElement as Q, html as c, nothing as f, css as W } from "lit";
-import { property as X, state as x, customElement as Y } from "lit/decorators.js";
-import { slotState as Z, hostAttributes as tt } from "../core/decorators.js";
-import { EventEmitter as J } from "../core/eventing.js";
-import { MutationController as et } from "@lit-labs/observers/mutation-controller.js";
-import { isSafari as it, setOrRemoveAttribute as st, isAndroid as at } from "../core/dom.js";
-import { SbbDisabledMixin as ot, SbbHydrationMixin as rt } from "../core/mixins.js";
-import { SbbIconNameMixin as lt } from "../icon.js";
-import "../screen-reader-only.js";
-import "../visual-checkbox.js";
-let nt = 0;
-const z = it, bt = {
-  attributeFilter: ["data-group-disabled", "data-negative"],
-  attributes: !0,
-  childList: !0,
-  subtree: !0,
-  characterData: !0
-};
-let dt = (() => {
-  var y, S, A, G, C, H, b;
-  let a = [Z()], o, l = [], r, k = ot(lt(rt(Q))), u = [], d, L, s, p = [], g = [], I, $ = [], w = [], E, F = [], D = [], M, O = [], T = [], N, j = [], U = [], B, P = [], V = [];
-  return b = class extends k {
-    constructor() {
-      var t;
-      super();
-      _(this, y, (n(this, u), n(this, p, !1)));
-      _(this, S, (n(this, g), n(this, $, !1)));
-      _(this, A, (n(this, w), n(this, F, void 0)));
-      _(this, G, (n(this, D), n(this, O, !1)));
-      _(this, C, (n(this, T), n(this, j, null)));
-      _(this, H, (n(this, U), n(this, P, !1)));
-      n(this, V), (t = this.addEventListener) == null || t.call(this, "click", (e) => this.selectByClick(e), {
-        passive: !0
-      }), this.addController(new et(this, {
-        config: bt,
-        callback: (e) => this.onOptionAttributesChange(e)
-      })), z && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = z) : this._inertAriaGroups = z);
-    }
-    /**
-     * Value of the option.
-     *
-     * @description Developer note: In this case updating the attribute must be synchronous.
-     * Due to this, it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
-     */
-    set value(t) {
-      this.setAttribute("value", `${t}`);
-    }
-    get value() {
-      return this.getAttribute("value") ?? "";
-    }
-    /** Whether the option is selected. */
-    set selected(t) {
-      this.toggleAttribute("selected", t), this._updateAriaSelected();
-    }
-    get selected() {
-      return this.hasAttribute("selected");
-    }
-    /** Whether to apply the negative styling */
-    get negative() {
-      return m(this, y);
-    }
-    set negative(t) {
-      v(this, y, t);
-    }
-    /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
-    get disabledFromGroup() {
-      return m(this, S);
-    }
-    set disabledFromGroup(t) {
-      v(this, S, t);
-    }
-    get label() {
-      return m(this, A);
-    }
-    set label(t) {
-      v(this, A, t);
-    }
-    /** Disable the highlight of the label. */
-    get disableLabelHighlight() {
-      return m(this, G);
-    }
-    set disableLabelHighlight(t) {
-      v(this, G, t);
-    }
-    /** The portion of the highlighted label. */
-    get _highlightString() {
-      return m(this, C);
-    }
-    set _highlightString(t) {
-      v(this, C, t);
-    }
-    get _inertAriaGroups() {
-      return m(this, H);
-    }
-    set _inertAriaGroups(t) {
-      v(this, H, t);
-    }
-    attributeChangedCallback(t, e, i) {
-      (t !== "value" || e !== i) && super.attributeChangedCallback(t, e, i);
-    }
-    /**
-     * Highlight the label of the option
-     * @param value the highlighted portion of the label
-     * @internal
-     */
-    highlight(t) {
-      this._highlightString = t;
-    }
-    /**
-     * @internal
-     */
-    setSelectedViaUserInteraction(t) {
-      this.selected = t, this.selectionChange.emit(), this.selected && this.optionSelected.emit();
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = `${this.optionId}-${nt++}`), this.hydrationRequired ? this.hydrationComplete.then(() => this.init()) : this.init();
-    }
-    willUpdate(t) {
-      super.willUpdate(t), t.has("disabled") && (st(this, "tabindex", at && !this.disabled && 0), this.updateAriaDisabled());
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._updateAriaSelected();
-    }
-    updateDisableHighlight(t) {
-      this.disableLabelHighlight = t, this.toggleAttribute("data-disable-highlight", t);
-    }
-    /**
-     * Whether the option is currently active.
-     * @internal
-     */
-    setActive(t) {
-      this.toggleAttribute("data-active", t);
-    }
-    init() {
-      this.setAttributeFromParent();
-    }
-    updateAriaDisabled() {
-      this.disabled || this.disabledFromGroup ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
-    }
-    _updateAriaSelected() {
-      this.setAttribute("aria-selected", `${this.selected}`);
-    }
-    /** @deprecated use onExternalMutation() as replacement. Will be removed with next major change. */
-    onOptionAttributesChange(t) {
-      this.onExternalMutation(t);
-    }
-    /** Observe changes on data attributes + slotted content and set the appropriate values. */
-    onExternalMutation(t) {
-      for (const e of t)
-        if (e.attributeName === "data-group-disabled")
-          this.disabledFromGroup = this.hasAttribute("data-group-disabled"), this.updateAriaDisabled();
-        else if (e.attributeName === "data-negative")
-          this.negative = this.hasAttribute("data-negative");
-        else {
-          this.dispatchEvent(new Event("optionLabelChanged", { bubbles: !0 }));
-          return;
-        }
-    }
-    handleHighlightState() {
-      const t = Array.from(this.childNodes ?? []).filter((i) => i.nodeType !== Node.COMMENT_NODE && (!(i instanceof Element) || i.slot !== "icon")), e = t.filter((i) => i.nodeType === Node.TEXT_NODE);
-      if (e.length === 0 || t.filter((i) => !(i instanceof Element) || i.localName !== "template").length !== e.length) {
-        this.updateDisableHighlight(!0);
-        return;
-      }
-      this.label = e.map((i) => i.wholeText).filter((i) => i.trim()).join();
-    }
-    getHighlightedLabel() {
-      if (!this._highlightString || !this._highlightString.trim())
-        return c`${this.label}`;
-      const t = this.label.toLowerCase().indexOf(this._highlightString.toLowerCase());
-      if (t === -1)
-        return c`${this.label}`;
-      const e = this.label.substring(0, t), i = this.label.substring(t, t + this._highlightString.length), K = this.label.substring(t + this._highlightString.length);
-      return c`
-      <span class="sbb-option__label--highlight">${e}</span><span>${i}</span
-      ><span class="sbb-option__label--highlight">${K}</span>
-    `;
-    }
-    renderIcon() {
-      return c` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`;
-    }
-    renderLabel() {
-      return this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : f;
-    }
-    renderTick() {
-      return f;
-    }
-    render() {
-      return c`
-      <div class="sbb-option__container">
-        <div class="sbb-option">
-          ${this.renderIcon()}
-          <span class="sbb-option__label">
-            <slot @slotchange=${this.handleHighlightState}></slot>
-            ${this.renderLabel()}
-            ${this._inertAriaGroups && this.getAttribute("data-group-label") ? c` <sbb-screen-reader-only>
-                  (${this.getAttribute("data-group-label")})</sbb-screen-reader-only
-                >` : f}
-          </span>
-          ${this.renderTick()}
-        </div>
-      </div>
-    `;
-    }
-  }, y = new WeakMap(), S = new WeakMap(), A = new WeakMap(), G = new WeakMap(), C = new WeakMap(), H = new WeakMap(), r = b, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    d = [X()], L = [X({ type: Boolean })], s = [x()], I = [x()], E = [x()], M = [x()], N = [x()], B = [x()], h(b, null, d, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
-      e.value = i;
-    } }, metadata: t }, null, u), h(b, null, L, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (e) => "selected" in e, set: (e, i) => {
-      e.selected = i;
-    } }, metadata: t }, null, u), h(b, null, s, { kind: "accessor", name: "negative", static: !1, private: !1, access: { has: (e) => "negative" in e, get: (e) => e.negative, set: (e, i) => {
-      e.negative = i;
-    } }, metadata: t }, p, g), h(b, null, I, { kind: "accessor", name: "disabledFromGroup", static: !1, private: !1, access: { has: (e) => "disabledFromGroup" in e, get: (e) => e.disabledFromGroup, set: (e, i) => {
-      e.disabledFromGroup = i;
-    } }, metadata: t }, $, w), h(b, null, E, { kind: "accessor", name: "label", static: !1, private: !1, access: { has: (e) => "label" in e, get: (e) => e.label, set: (e, i) => {
-      e.label = i;
-    } }, metadata: t }, F, D), h(b, null, M, { kind: "accessor", name: "disableLabelHighlight", static: !1, private: !1, access: { has: (e) => "disableLabelHighlight" in e, get: (e) => e.disableLabelHighlight, set: (e, i) => {
-      e.disableLabelHighlight = i;
-    } }, metadata: t }, O, T), h(b, null, N, { kind: "accessor", name: "_highlightString", static: !1, private: !1, access: { has: (e) => "_highlightString" in e, get: (e) => e._highlightString, set: (e, i) => {
-      e._highlightString = i;
-    } }, metadata: t }, j, U), h(b, null, B, { kind: "accessor", name: "_inertAriaGroups", static: !1, private: !1, access: { has: (e) => "_inertAriaGroups" in e, get: (e) => e._inertAriaGroups, set: (e, i) => {
-      e._inertAriaGroups = i;
-    } }, metadata: t }, P, V), h(null, o = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, l), r = o.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), n(r, l);
-  })(), r;
-})();
-const ht = W`*,: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-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));--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);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)}:host([data-active]){--sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x))}@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(: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);display:flex;align-items:center;column-gap:var(--sbb-option-column-gap);padding-inline:var(--sbb-option-padding-inline);padding-block:var(--sbb-option-padding-block);justify-content:var(--sbb-option-justify-content);color:var(--sbb-option-color);background-color:var(--sbb-option-background-color);cursor:var(--sbb-option-cursor);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--sbb-option-color)}:host([data-active]) .sbb-option{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);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 Gt = (() => {
-  var d;
-  let a = [Y("sbb-option"), tt({
-    role: "option"
-  })], o, l = [], r, k = dt;
-  var u = (d = class extends k {
-    constructor() {
-      super(...arguments), this.optionId = "sbb-option", this.selectionChange = new J(this, u.events.selectionChange), this.optionSelected = new J(this, u.events.optionSelected);
-    }
-    set _variant(s) {
-      s && this.setAttribute("data-variant", s);
-    }
-    get _variant() {
-      return this.getAttribute("data-variant");
-    }
-    set _isMultiple(s) {
-      this.toggleAttribute("data-multiple", s);
-    }
-    get _isMultiple() {
-      return !this.hydrationRequired && this.hasAttribute("data-multiple");
-    }
-    setAttributeFromParent() {
-      var p, g;
-      const s = (p = this.closest) == null ? void 0 : p.call(this, "sbb-optgroup");
-      s && (this.disabledFromGroup = s.disabled, this.updateAriaDisabled()), this.negative = !!((g = this.closest) != null && g.call(
-        this,
-        // :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);
-    }
-    selectByClick(s) {
-      if (this.disabled || this.disabledFromGroup) {
-        s.stopPropagation();
-        return;
-      }
-      this._isMultiple ? (s.stopPropagation(), this.setSelectedViaUserInteraction(!this.selected)) : this.setSelectedViaUserInteraction(!0);
-    }
-    connectedCallback() {
-      super.connectedCallback();
-    }
-    init() {
-      super.init(), this._setVariantByContext(), this.handleHighlightState();
-    }
-    _setVariantByContext() {
-      var s, p, g;
-      (s = this.closest) != null && s.call(this, "sbb-autocomplete") ? this._variant = "autocomplete" : (p = this.closest) != null && p.call(this, "sbb-select") && (this._variant = "select"), this._isMultiple = !!((g = this.closest) != null && g.call(this, "sbb-select[multiple]"));
-    }
-    handleHighlightState() {
-      if (this._variant !== "autocomplete") {
-        this.updateDisableHighlight(!0);
-        return;
-      }
-      super.handleHighlightState();
-    }
-    renderIcon() {
-      return c`
-      <!-- Icon -->
-      ${this._isMultiple ? f : c` <span class="sbb-option__icon"> ${this.renderIconSlot()} </span>`}
-
-      <!-- Checkbox -->
-      ${this._isMultiple ? c`
-            <sbb-visual-checkbox
-              ?checked=${this.selected}
-              ?disabled=${this.disabled || this.disabledFromGroup}
-              ?negative=${this.negative}
-            ></sbb-visual-checkbox>
-          ` : f}
-    `;
-    }
-    renderLabel() {
-      return this._variant === "autocomplete" && this.label && !this.disableLabelHighlight ? this.getHighlightedLabel() : f;
-    }
-    renderTick() {
-      return this._variant === "select" && !this._isMultiple && this.selected ? c`<sbb-icon name="tick-small"></sbb-icon>` : f;
-    }
-  }, r = d, (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    h(null, o = { value: r }, a, { kind: "class", name: r.name, metadata: s }, null, l), u = r = o.value, s && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), d.styles = ht, d.events = {
-    selectionChange: "optionSelectionChange",
-    optionSelected: "optionSelected"
-  }, n(r, l), d);
-  return u = r;
-})();
+import { SbbOptionElement as t } from "./option/option.js";
+import { SbbOptionBaseElement as m } from "./option/option-base-element.js";
 export {
-  dt as SbbOptionBaseElement,
-  Gt as SbbOptionElement
+  m as SbbOptionBaseElement,
+  t as SbbOptionElement
 };

package/option.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './option/optgroup.js';
 export * from './option/option.js';
 //# sourceMappingURL=option.d.ts.map

package/option.d.ts.map

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

package/option.js

@@ -1,2 +1,10 @@
-export * from "./option/optgroup.js";
-export * from "./option/option.js";
+import { SbbOptGroupElement as t } from "./option/optgroup/optgroup.js";
+import { SbbOptgroupBaseElement as r } from "./option/optgroup/optgroup-base-element.js";
+import { SbbOptionElement as m } from "./option/option/option.js";
+import { SbbOptionBaseElement as f } from "./option/option/option-base-element.js";
+export {
+  t as SbbOptGroupElement,
+  r as SbbOptgroupBaseElement,
+  f as SbbOptionBaseElement,
+  m as SbbOptionElement
+};

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { SbbFocusHandler } from '../core/a11y.js';
+import { SbbFocusTrapController } from '../core/a11y.js';
 import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
 import { SbbInertController, SbbLanguageController, SbbEscapableOverlayController } from '../core/controllers.js';
 import { SbbScrollHandler } from '../core/dom.js';
@@ -18,7 +18,7 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     /** @deprecated */
     protected overlayController: AbortController;
     protected openOverlayController: AbortController;
-    protected focusHandler: SbbFocusHandler;
+    protected focusTrapController: SbbFocusTrapController;
     protected scrollHandler: SbbScrollHandler;
     protected returnValue: any;
     protected ariaLiveRefToggle: boolean;
@@ -28,7 +28,6 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     protected sbbEscapableOverlayController: SbbEscapableOverlayController;
     protected abstract closeAttribute: string;
     protected abstract onOverlayAnimationEnd(event: AnimationEvent): void;
-    protected abstract setOverlayFocus(): void;
     protected abstract handleClosing(): void;
     protected abstract isZeroAnimationDuration(): boolean;
     /** Closes the component. */
@@ -41,6 +40,11 @@ export declare abstract class SbbOverlayBaseElement extends SbbOverlayBaseElemen
     protected closeOnSbbOverlayCloseClick(event: Event): void;
     protected removeAriaLiveRefContent(): void;
     protected setAriaLiveRefContent(label?: string): void;
+    /**
+     * Focuses the element marked with sbb-focus-initial or the first focusable element.
+     * @deprecated. Will be removed with next major version.
+     */
+    protected setOverlayFocus(): 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,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAA6B,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,6BAA6B,EAC9B,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,8BAIe,qBAAsB,SAAQ,0BAAyC;IACpF,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,kBAAkB;IAClB,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;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,eAAe,IAAI,IAAI;IAC1C,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;cAStB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAS5C,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,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,kBAAkB,EAClB,qBAAqB,EACrB,6BAA6B,EAC9B,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,8BAIe,qBAAsB,SAAQ,0BAAyC;IACpF,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,kBAAkB;IAClB,SAAS,CAAC,iBAAiB,EAAG,eAAe,CAAC;IAC9C,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;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAQ5C,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;IAUrD;;;OAGG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;CAGlC"}

package/overlay/overlay-base-element.js

@@ -0,0 +1,102 @@
+var y = (t) => {
+  throw TypeError(t);
+};
+var C = (t, l, r) => l.has(t) || y("Cannot " + r);
+var g = (t, l, r) => (C(t, l, "read from private field"), r ? r.call(t) : l.get(t)), L = (t, l, r) => l.has(t) ? y("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(t) : l.set(t, r), m = (t, l, r, a) => (C(t, l, "write to private field"), a ? a.call(t, r) : l.set(t, r), r);
+import { __runInitializers as u, __esDecorate as w } from "tslib";
+import "lit";
+import { property as S } from "lit/decorators.js";
+import { SbbFocusTrapController as _ } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as O } from "../core/base-elements.js";
+import { SbbLanguageController as E, SbbInertController as R, SbbEscapableOverlayController as A } from "../core/controllers.js";
+import { hostAttributes as T, forceType as k } from "../core/decorators.js";
+import { SbbScrollHandler as x } from "../core/dom.js";
+import { EventEmitter as I } from "../core/eventing.js";
+import { i18nDialog as D } from "../core/i18n.js";
+import { SbbNegativeMixin as F } from "../core/mixins.js";
+const b = [];
+let J = (() => {
+  var o, s;
+  let t = [T({
+    popover: "manual"
+  })], l, r = [], a, v = F(O), d, f = [], p = [];
+  var h = (s = class extends v {
+    constructor() {
+      super(...arguments);
+      L(this, o);
+      m(this, o, u(this, f, "")), this.didClose = (u(this, p), new I(this, h.events.didClose, { cancelable: !0 })), this.focusTrapController = new _(this), this.scrollHandler = new x(), this.ariaLiveRefToggle = !1, this.language = new E(this), this.inertController = new R(this), this.sbbEscapableOverlayController = new A(this);
+    }
+    /** This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. */
+    get accessibilityLabel() {
+      return g(this, o);
+    }
+    set accessibilityLabel(e) {
+      m(this, o, e);
+    }
+    /** Closes the component. */
+    close(e, i) {
+      if (this.state !== "opened")
+        return;
+      this.returnValue = e, this.overlayCloseElement = i;
+      const n = {
+        returnValue: this.returnValue,
+        closeTarget: this.overlayCloseElement
+      };
+      this.willClose.emit(n) && (this.state = "closing", this.removeAriaLiveRefContent(), this.isZeroAnimationDuration() && this.handleClosing());
+    }
+    connectedCallback() {
+      var e;
+      super.connectedCallback(), (e = this.overlayController) == null || e.abort(), this.overlayController = new AbortController();
+    }
+    firstUpdated(e) {
+      this.ariaLiveRef = this.shadowRoot.querySelector("sbb-screen-reader-only"), super.firstUpdated(e);
+    }
+    disconnectedCallback() {
+      var e, i;
+      super.disconnectedCallback(), (e = this.overlayController) == null || e.abort(), (i = this.openOverlayController) == null || i.abort(), this.removeInstanceFromGlobalCollection(), this.scrollHandler.enableScroll();
+    }
+    attachOpenOverlayEvents() {
+      this.openOverlayController = new AbortController(), window.addEventListener("keydown", () => {
+        this.removeAriaLiveRefContent();
+      }, {
+        signal: this.openOverlayController.signal
+      }), window.addEventListener("click", () => this.removeAriaLiveRefContent(), {
+        signal: this.openOverlayController.signal
+      });
+    }
+    removeInstanceFromGlobalCollection() {
+      b.splice(b.indexOf(this), 1);
+    }
+    // Close the component on click of any element that has the `closeAttribute` attribute.
+    closeOnSbbOverlayCloseClick(e) {
+      const i = e.composedPath().filter((c) => c instanceof window.HTMLElement).find((c) => c.hasAttribute(this.closeAttribute) && !c.hasAttribute("disabled"));
+      if (!i)
+        return;
+      const n = i.getAttribute("type") === "submit" ? i.form ?? null : null;
+      b[b.length - 1].close(n, i);
+    }
+    removeAriaLiveRefContent() {
+      this.ariaLiveRef.textContent = "";
+    }
+    setAriaLiveRefContent(e) {
+      this.ariaLiveRefToggle = !this.ariaLiveRefToggle, this.ariaLiveRef.textContent = `${D[this.language.current]}${e ? `, ${e}` : ""}${this.ariaLiveRefToggle ? " " : ""}`;
+    }
+    /**
+     * Focuses the element marked with sbb-focus-initial or the first focusable element.
+     * @deprecated. Will be removed with next major version.
+     */
+    setOverlayFocus() {
+      this.focusTrapController.focusInitialElement();
+    }
+  }, o = new WeakMap(), a = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    d = [k(), S({ attribute: "accessibility-label" })], w(s, null, d, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (i) => "accessibilityLabel" in i, get: (i) => i.accessibilityLabel, set: (i, n) => {
+      i.accessibilityLabel = n;
+    } }, metadata: e }, f, p), w(null, l = { value: a }, t, { kind: "class", name: a.name, metadata: e }, null, r), h = a = l.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), u(a, r);
+  })(), s);
+  return h = a;
+})();
+export {
+  J as SbbOverlayBaseElement,
+  b as overlayRefs
+};

package/overlay/overlay.d.ts

@@ -43,7 +43,6 @@ export declare class SbbOverlayElement extends SbbOverlayBaseElement {
     private _handleOpening;
     protected handleClosing(): void;
     protected onOverlayAnimationEnd(event: AnimationEvent): void;
-    protected setOverlayFocus(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/overlay/overlay.d.ts.map

@@ -1 +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;AAW1D,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;IAyBxC,SAAS,CAAC,qBAAqB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAS5D,SAAS,CAAC,eAAe,IAAI,IAAI;cAUd,MAAM,IAAI,cAAc;CAsD5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
+{"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;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"}