@sbb-esta/lyne-elements-dev 4.7.0-dev.1773149675 → 4.7.0-dev.1773159918

package/overlay/overlay.component.js

@@ -1,72 +1,72 @@
-var k = (t) => {
-  throw TypeError(t);
+var y = (e) => {
+  throw TypeError(e);
 };
-var w = (t, s, a) => s.has(t) || k("Cannot " + a);
-var v = (t, s, a) => (w(t, s, "read from private field"), a ? a.call(t) : s.get(t)), p = (t, s, a) => s.has(t) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, a), b = (t, s, a, r) => (w(t, s, "write to private field"), r ? r.call(t, a) : s.set(t, a), a);
-import { __runInitializers as c, __esDecorate as h } from "tslib";
-import { customElement as O, property as C } from "lit/decorators.js";
-import { ref as z } from "lit/directives/ref.js";
-import { html as S } from "lit/static-html.js";
-import { forceType as E } from "../core/decorators.js";
-import { isZeroAnimationDuration as A } from "../core/dom.js";
-import { forwardEvent as T } from "../core/eventing.js";
-import { i18nCloseDialog as $ } from "../core/i18n.js";
-import { boxSizingStyles as I } from "../core/styles.js";
-import { SbbOverlayBaseElement as D, overlayRefs as R, SbbOverlayCloseEvent as L } from "./overlay-base-element.js";
-import { css as V } from "lit";
+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 Y = V`: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 j = 0, se = (() => {
-  var l, n, i;
-  let t = [O("sbb-overlay")], s, a = [], r, m = D, u, y = [], g = [], _, f = [], x = [];
-  return i = class extends m {
+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);
-      p(this, n);
-      b(this, l, c(this, y, !1)), b(this, n, (c(this, g), c(this, f, ""))), this.closeAttribute = (c(this, x), "sbb-overlay-close"), this._overlayContentElement = null;
+      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, l);
+      return v(this, i);
     }
-    set expanded(e) {
-      b(this, l, e);
+    set expanded(t) {
+      b(this, i, t);
     }
     /** This will be forwarded as aria-label to the close button element. */
     get accessibilityCloseLabel() {
-      return v(this, n);
+      return v(this, l);
     }
-    set accessibilityCloseLabel(e) {
-      b(this, n, e);
+    set accessibilityCloseLabel(t) {
+      b(this, l, t);
     }
     connectedCallback() {
-      this.id ||= `sbb-overlay-${j++}`, super.connectedCallback();
+      this.id ||= `sbb-overlay-${I++}`, super.connectedCallback();
     }
-    firstUpdated(e) {
-      super.firstUpdated(e), this.isOpen && this.setAriaLiveRefContent();
+    firstUpdated(t) {
+      super.firstUpdated(t), this.isOpen && this.setAriaLiveRefContent();
     }
     isZeroAnimationDuration() {
-      return A(this, "--sbb-overlay-animation-duration");
+      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(), R.length || this.scrollHandler.enableScroll(), this.escapableOverlayController.disconnect(), this.dispatchCloseEvent({
+      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(e) {
-      return this.dispatchEvent(new L("beforeclose", {
+    dispatchBeforeCloseEvent(t) {
+      return this.dispatchEvent(new k("beforeclose", {
         cancelable: !0,
         closeAttribute: this.closeAttribute,
         closeTarget: this.overlayCloseElement,
@@ -74,25 +74,25 @@ let j = 0, se = (() => {
       }));
     }
     // TODO: remove parameter `detail`
-    dispatchCloseEvent(e) {
-      return this.dispatchEvent(new L("close", {
+    dispatchCloseEvent(t) {
+      return this.dispatchEvent(new k("close", {
         closeAttribute: this.closeAttribute,
         closeTarget: this.overlayCloseElement,
         result: this.returnValue
       }));
     }
     render() {
-      return S`
+      return C`
       <div class="sbb-overlay__container" @animationend=${this.onOverlayAnimationEnd}>
         <div class="sbb-overlay">
           <div
-            @click=${(e) => this.closeOnSbbOverlayCloseClick(e)}
+            @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 || $[this.language.current]}"
+                aria-label="${this.accessibilityCloseLabel || z[this.language.current]}"
                 ?negative=${this.negative}
                 size="m"
                 type="button"
@@ -102,8 +102,8 @@ let j = 0, se = (() => {
             </div>
             <div
               class="sbb-overlay__content"
-              ${z((e) => this._overlayContentElement = e)}
-              @scroll=${(e) => T(e, document)}
+              ${w((t) => this._overlayContentElement = t)}
+              @scroll=${(t) => L(t, document)}
             >
               <sbb-container
                 class="sbb-overlay__content-container"
@@ -119,20 +119,20 @@ let j = 0, se = (() => {
       <sbb-screen-reader-only aria-live="polite"></sbb-screen-reader-only>
     `;
     }
-  }, l = new WeakMap(), n = new WeakMap(), r = i, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-    u = [E(), C({ reflect: !0, type: Boolean })], _ = [E(), C({ attribute: "accessibility-close-label" })], h(i, null, u, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (o) => "expanded" in o, get: (o) => o.expanded, set: (o, d) => {
-      o.expanded = d;
-    } }, metadata: e }, y, g), h(i, null, _, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (o) => "accessibilityCloseLabel" in o, get: (o) => o.accessibilityCloseLabel, set: (o, d) => {
-      o.accessibilityCloseLabel = d;
-    } }, metadata: e }, f, x), h(null, s = { value: r }, t, { kind: "class", name: r.name, metadata: e }, null, a), r = s.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), i.styles = [I, Y], i.events = {
+  }, 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"
-  }, c(r, a), r;
+  }, a;
 })();
 export {
-  se as SbbOverlayElement
+  Q as SbbOverlayElement
 };

package/overlay.js

@@ -1,9 +1,10 @@
-import { SbbOverlayElement as r } from "./overlay/overlay.component.js";
-import { SbbOverlayBaseElement as b, SbbOverlayCloseEvent as o, assignOverlayResult as s, overlayRefs as t } from "./overlay/overlay-base-element.js";
+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 {
-  b as SbbOverlayBaseElement,
-  o as SbbOverlayCloseEvent,
-  r as SbbOverlayElement,
-  s as assignOverlayResult,
-  t as overlayRefs
+  o as SbbOverlayBaseElement,
+  t as SbbOverlayCloseEvent,
+  e as SbbOverlayElement,
+  b as assignOverlayResult,
+  s as overlayRefs
 };

package/overlay.pure.js

@@ -0,0 +1,9 @@
+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
+};