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

package/container/sticky-bar/sticky-bar.component.js

@@ -1,25 +1,26 @@
-var x = (s) => {
+var p = (s) => {
   throw TypeError(s);
 };
-var w = (s, i, e) => i.has(s) || x("Cannot " + e);
-var k = (s, i, e) => (w(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, n) => (w(s, i, "write to private field"), n ? n.call(s, e) : i.set(s, e), e);
-import { __esDecorate as y, __runInitializers as d } from "tslib";
-import { IntersectionController as E } from "@lit-labs/observers/intersection-controller.js";
-import { css as C, LitElement as I, html as R } from "lit";
-import { customElement as A, property as z } from "lit/decorators.js";
-import { isLean as B, isZeroAnimationDuration as D } from "../../core/dom.js";
-import { SbbUpdateSchedulerMixin as U, SbbElementInternalsMixin as T } from "../../core/mixins.js";
-import { boxSizingStyles as H } from "../../core/styles.js";
-const L = C`:host{--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name, unset);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:0s;animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border, none)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 100%,-100% 100%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color, transparent);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
-let F = (() => {
-  var o, c, r;
-  let s = [A("sbb-sticky-bar")], i, e = [], n, h = U(T(I)), g, p = [], v = [], m, _ = [], f = [];
-  return r = class extends h {
+var v = (s, i, e) => i.has(s) || p("Cannot " + e);
+var k = (s, i, e) => (v(s, i, "read from private field"), e ? e.call(s) : i.get(s)), u = (s, i, e) => i.has(s) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, c) => (v(s, i, "write to private field"), c ? c.call(s, e) : i.set(s, e), e);
+import { __esDecorate as m, __runInitializers as d } from "tslib";
+import { IntersectionController as x } from "@lit-labs/observers/intersection-controller.js";
+import { css as w, html as z } from "lit";
+import { property as _ } from "lit/decorators.js";
+import { SbbElement as C } from "../../core/base-elements.js";
+import { isLean as E, isZeroAnimationDuration as S } from "../../core/dom.js";
+import { SbbUpdateSchedulerMixin as I } from "../../core/mixins.js";
+import { boxSizingStyles as R } from "../../core/styles.js";
+const A = w`:host{--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration: 0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name, unset);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:0s;animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border, none)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 100%,-100% 100%)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color, transparent);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
+let j = (() => {
+  var r, o, n;
+  let s = I(C), i, e = [], c = [], h, y = [], g = [];
+  return n = class extends s {
     constructor() {
       super();
+      u(this, r);
       u(this, o);
-      u(this, c);
-      l(this, o, d(this, p, null)), l(this, c, (d(this, v), d(this, _, B() ? "s" : "m"))), this._stateInternal = d(this, f), this._observer = new E(this, {
+      l(this, r, d(this, e, null)), l(this, o, (d(this, c), d(this, y, E() ? "s" : "m"))), this._stateInternal = d(this, g), this._observer = new x(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -28,20 +29,20 @@ let F = (() => {
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
-      return k(this, o);
+      return k(this, r);
     }
     set color(t) {
-      l(this, o, t);
+      l(this, r, t);
     }
     /**
      * Size of the container.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return k(this, c);
+      return k(this, o);
     }
     set size(t) {
-      l(this, c, t);
+      l(this, o, t);
     }
     /** The state of the component. */
     set _state(t) {
@@ -62,12 +63,12 @@ let F = (() => {
       super.firstUpdated(t), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
     }
     _isZeroAnimationDuration() {
-      return D(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
+      return S(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
     }
     _detectStickyState(t) {
       this.internals.states.add("initialized");
-      const a = !t.isIntersecting && t.boundingClientRect.top > 0, b = this._intersector?.getBoundingClientRect(), S = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
-      this.toggleState("slide-vertically", a && this._intersector && Math.abs(b.bottom - S.bottom) > 30), this.toggleState("sticking", a), this.completeUpdate();
+      const a = !t.isIntersecting && t.boundingClientRect.top > 0, b = this._intersector?.getBoundingClientRect(), f = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+      this.toggleState("slide-vertically", a && this._intersector && Math.abs(b.bottom - f.bottom) > 30), this.toggleState("sticking", a), this.completeUpdate();
     }
     /** Animates from normal content flow position to `position: sticky`. */
     stick() {
@@ -93,7 +94,7 @@ let F = (() => {
       return this.dispatchEvent(new Event("beforeunstick", { cancelable: !0 }));
     }
     render() {
-      return R`
+      return z`
       <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
         <div class="sbb-sticky-bar">
           <slot></slot>
@@ -102,20 +103,20 @@ let F = (() => {
       <div class="sbb-sticky-bar__intersector"></div>
     `;
     }
-  }, o = new WeakMap(), c = new WeakMap(), n = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    g = [z({ reflect: !0 })], m = [z({ reflect: !0 })], y(r, null, g, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
+  }, r = new WeakMap(), o = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    i = [_({ reflect: !0 })], h = [_({ reflect: !0 })], m(n, null, i, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (a) => "color" in a, get: (a) => a.color, set: (a, b) => {
       a.color = b;
-    } }, metadata: t }, p, v), y(r, null, m, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
+    } }, metadata: t }, e, c), m(n, null, h, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (a) => "size" in a, get: (a) => a.size, set: (a, b) => {
       a.size = b;
-    } }, metadata: t }, _, f), y(null, i = { value: n }, s, { kind: "class", name: n.name, metadata: t }, null, e), n = i.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = [H, L], r.events = {
+    } }, metadata: t }, y, g), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.elementName = "sbb-sticky-bar", n.styles = [R, A], n.events = {
     beforestick: "beforestick",
     stick: "stick",
     beforeunstick: "beforeunstick",
     unstick: "unstick"
-  }, d(n, e), n;
+  }, n;
 })();
 export {
-  F as SbbStickyBarElement
+  j as SbbStickyBarElement
 };

package/container/sticky-bar.js

@@ -1,4 +1,7 @@
-import { SbbStickyBarElement as t } from "./sticky-bar/sticky-bar.component.js";
+import { SbbStickyBarElement as e } from "./sticky-bar/sticky-bar.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/container/sticky-bar.js' has been deprecated.
+Use either '@sbb-esta/elements/container.js' or '@sbb-esta/elements/container.pure.js' instead.`);
 export {
-  t as SbbStickyBarElement
+  e as SbbStickyBarElement
 };

package/container.js

@@ -1,6 +1,8 @@
-import { SbbContainerElement as t } from "./container/container/container.component.js";
-import { SbbStickyBarElement as b } from "./container/sticky-bar/sticky-bar.component.js";
+import { SbbContainerElement as e } from "./container/container/container.component.js";
+import { SbbStickyBarElement as r } from "./container/sticky-bar/sticky-bar.component.js";
+e.define();
+r.define();
 export {
-  t as SbbContainerElement,
-  b as SbbStickyBarElement
+  e as SbbContainerElement,
+  r as SbbStickyBarElement
 };

package/container.pure.js

@@ -0,0 +1,6 @@
+import { SbbContainerElement as t } from "./container/container/container.component.js";
+import { SbbStickyBarElement as b } from "./container/sticky-bar/sticky-bar.component.js";
+export {
+  t as SbbContainerElement,
+  b as SbbStickyBarElement
+};

package/core/base-elements/action-base-element.js

@@ -1,6 +1,6 @@
-import { LitElement as t, html as a } from "lit";
-import { SbbElementInternalsMixin as s } from "../mixins.js";
-class l extends s(t) {
+import { html as t } from "lit";
+import { SbbElement as a } from "./element.js";
+class i extends a {
   get maybeDisabled() {
     const e = this;
     return e.disabled || e.formDisabled;
@@ -31,9 +31,9 @@ class l extends s(t) {
   }
   /** Default render method for button-like components. */
   render() {
-    return a`<span class="sbb-action-base ${this.localName}">${this.renderTemplate()}</span>`;
+    return t`<span class="sbb-action-base ${this.localName}">${this.renderTemplate()}</span>`;
   }
 }
 export {
-  l as SbbActionBaseElement
+  i as SbbActionBaseElement
 };

package/core/base-elements/element.js

@@ -0,0 +1,64 @@
+import { LitElement as a } from "lit";
+import { SbbElementInternalsMixin as m } from "../mixins/element-internals-mixin.js";
+import { SbbHydrationMixin as h } from "../mixins/hydration-mixin.js";
+const r = class r extends h(m(a)) {
+  /**
+   * Register the custom element to the specified CustomElementRegistry.
+   * If none is provided, defaults to the global `customElements` registry.
+   * @param customElementRegistry Optional CustomElementRegistry to register this element to.
+   *   Defaults to the global `customElements` instance.
+   */
+  static define(e = customElements) {
+    e.get(this.elementName) || e.define(this.elementName, this);
+  }
+  /**
+   * Registers a `ReactiveController` to participate in the element's reactive
+   * update cycle. The element automatically calls into any registered
+   * controllers during its lifecycle callbacks.
+   *
+   * If the element is connected when `addController()` is called, the
+   * controller's `hostConnected()` callback will be immediately called.
+   */
+  addController(e) {
+    super.addController(e), (this._controllers ??= /* @__PURE__ */ new Set()).add(e);
+  }
+  /**
+   * Removes a `ReactiveController` from the element.
+   */
+  removeController(e) {
+    super.removeController(e), this._controllers?.delete(e);
+  }
+  /**
+   * Requests an update which is processed asynchronously. This should be called
+   * when an element should update based on some state not triggered by setting
+   * a reactive property. In this case, pass no arguments. It should also be
+   * called when manually implementing a property setter. In this case, pass the
+   * property `name` and `oldValue` to ensure that any configured property
+   * options are honored.
+   *
+   * @param name name of requesting property
+   * @param oldValue old value of requesting property
+   * @param options property options to use instead of the previously
+   *     configured options
+   * @param useNewValue if true, the newValue argument is used instead of
+   *     reading the property value. This is important to use if the reactive
+   *     property is a standard private accessor, as opposed to a plain
+   *     property, since private members can't be dynamically read by name.
+   * @param newValue the new value of the property. This is only used if
+   *     `useNewValue` is true.
+   */
+  requestUpdate(e, t, s, o, i) {
+    if (super.requestUpdate(e, t, s, o, i), e) {
+      const n = {
+        oldValue: t,
+        value: o ? i : this[e]
+      };
+      this._controllers?.forEach((d) => d.hostPropertyUpdate?.(e, n, s));
+    }
+  }
+};
+r._$sbbElement$ = !0;
+let l = r;
+export {
+  l as SbbElement
+};

package/core/base-elements/link-base-element.js

@@ -1,43 +1,42 @@
-var H = (i) => {
+var W = (i) => {
   throw TypeError(i);
 };
-var P = (i, s, a) => s.has(i) || H("Cannot " + a);
-var h = (i, s, a) => (P(i, s, "read from private field"), a ? a.call(i) : s.get(i)), d = (i, s, a) => s.has(i) ? H("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), r = (i, s, a, v) => (P(i, s, "write to private field"), v ? v.call(i, a) : s.set(i, a), a);
+var H = (i, s, a) => s.has(i) || W("Cannot " + a);
+var h = (i, s, a) => (H(i, s, "read from private field"), a ? a.call(i) : s.get(i)), d = (i, s, a) => s.has(i) ? W("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, a), r = (i, s, a, v) => (H(i, s, "write to private field"), v ? v.call(i, a) : s.set(i, a), a);
 import { __esDecorate as m, __runInitializers as c } from "tslib";
-import { nothing as n, isServer as F, html as W } from "lit";
+import { nothing as o, isServer as F, html as P } from "lit";
 import { property as p } from "lit/decorators.js";
 import { SbbLanguageController as G } from "../controllers.js";
-import { forceType as w, omitEmptyConverter as z } from "../decorators.js";
+import { forceType as w, omitEmptyConverter as $ } from "../decorators.js";
 import { i18nTargetOpensInNewWindow as J } from "../i18n.js";
 import { SbbActionBaseElement as K } from "./action-base-element.js";
-import "../../screen-reader-only.js";
-let te = (() => {
-  var u, b, _, f, y, g, l;
-  let i = K, s, a = [], v = [], C, $ = [], x = [], I, L = [], k = [], R, S = [], D = [], q, A = [], O = [], T, j = [], N = [];
+let ee = (() => {
+  var b, u, _, f, g, y, l;
+  let i = K, s, a = [], v = [], z, C = [], k = [], x, I = [], L = [], R, S = [], D = [], q, A = [], N = [], O, T = [], j = [];
   return l = class extends i {
     constructor() {
       super();
-      d(this, u);
       d(this, b);
+      d(this, u);
       d(this, _);
       d(this, f);
-      d(this, y);
       d(this, g);
-      r(this, u, c(this, a, "")), r(this, b, (c(this, v), c(this, $, ""))), r(this, _, (c(this, x), c(this, L, ""))), r(this, f, (c(this, k), c(this, S, !1))), r(this, y, (c(this, D), c(this, A, ""))), r(this, g, (c(this, O), c(this, j, ""))), this.language = (c(this, N), new G(this)), this.anchorRole = null, this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : n, this.internals.states.add("link"), F || this.setupBaseEventHandlers();
+      d(this, y);
+      r(this, b, c(this, a, "")), r(this, u, (c(this, v), c(this, C, ""))), r(this, _, (c(this, k), c(this, I, ""))), r(this, f, (c(this, L), c(this, S, !1))), r(this, g, (c(this, D), c(this, A, ""))), r(this, y, (c(this, N), c(this, T, ""))), this.language = (c(this, j), new G(this)), this.anchorRole = null, this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : o, this.internals.states.add("link"), F || this.setupBaseEventHandlers();
     }
     /** The href value you want to link to. */
     get href() {
-      return h(this, u);
+      return h(this, b);
     }
     set href(t) {
-      r(this, u, t);
+      r(this, b, t);
     }
     /** Where to display the linked URL. */
     get target() {
-      return h(this, b);
+      return h(this, u);
     }
     set target(t) {
-      r(this, b, t);
+      r(this, u, t);
     }
     /** The relationship of the linked URL as space-separated link types. */
     get rel() {
@@ -55,17 +54,17 @@ let te = (() => {
     }
     /** This will be forwarded as aria-label to the inner anchor element. */
     get accessibilityLabel() {
-      return h(this, y);
+      return h(this, g);
     }
     set accessibilityLabel(t) {
-      r(this, y, t);
+      r(this, g, t);
     }
     /** This will be forwarded as aria-current to the inner anchor element. */
     get accessibilityCurrent() {
-      return h(this, g);
+      return h(this, y);
     }
     set accessibilityCurrent(t) {
-      r(this, g, t);
+      r(this, y, t);
     }
     /** @internal */
     focus(t) {
@@ -84,43 +83,45 @@ let te = (() => {
       return this.renderLink(this.renderTemplate());
     }
     renderLink(t) {
-      return W`
+      const e = !!this.href && this.target === "_blank";
+      return P`
       <a
         class="sbb-action-base ${this.localName}"
-        href=${this.href || n}
+        href=${this.href || o}
         ?download=${this.download}
-        target=${this.target || n}
+        target=${this.target || o}
         rel=${this._evaluateRelAttribute()}
-        role=${this.anchorRole || n}
-        aria-label=${this.accessibilityLabel || n}
-        aria-current=${this.accessibilityCurrent || n}
-        tabindex=${this.maybeDisabled && !this.maybeDisabledInteractive ? "-1" : n}
-        aria-disabled=${this.maybeDisabled ? "true" : n}
+        role=${this.anchorRole || o}
+        aria-label=${this.accessibilityLabel || o}
+        aria-current=${this.accessibilityCurrent || o}
+        tabindex=${this.maybeDisabled && !this.maybeDisabledInteractive ? "-1" : o}
+        aria-disabled=${this.maybeDisabled ? "true" : o}
+        aria-describedby=${e ? "sbb-link-new-window" : o}
       >
         ${t}
-        ${this.href && this.target === "_blank" ? W`<sbb-screen-reader-only
-              >. ${J[this.language.current]}</sbb-screen-reader-only
-            >` : n}
       </a>
+      ${e ? P`<span id="sbb-link-new-window" hidden
+            >${J[this.language.current]}</span
+          >` : o}
     `;
     }
-  }, u = new WeakMap(), b = new WeakMap(), _ = new WeakMap(), f = new WeakMap(), y = new WeakMap(), g = new WeakMap(), (() => {
+  }, b = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), f = new WeakMap(), g = new WeakMap(), y = new WeakMap(), (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    s = [w(), p({ reflect: !0, converter: z })], C = [w(), p({ reflect: !0, converter: z })], I = [w(), p({ reflect: !0, converter: z })], R = [w(), p({ type: Boolean, reflect: !0 })], q = [w(), p({ attribute: "accessibility-label" })], T = [w(), p({ attribute: "accessibility-current" })], m(l, null, s, { kind: "accessor", name: "href", static: !1, private: !1, access: { has: (e) => "href" in e, get: (e) => e.href, set: (e, o) => {
-      e.href = o;
-    } }, metadata: t }, a, v), m(l, null, C, { kind: "accessor", name: "target", static: !1, private: !1, access: { has: (e) => "target" in e, get: (e) => e.target, set: (e, o) => {
-      e.target = o;
-    } }, metadata: t }, $, x), m(l, null, I, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (e) => "rel" in e, get: (e) => e.rel, set: (e, o) => {
-      e.rel = o;
-    } }, metadata: t }, L, k), m(l, null, R, { kind: "accessor", name: "download", static: !1, private: !1, access: { has: (e) => "download" in e, get: (e) => e.download, set: (e, o) => {
-      e.download = o;
-    } }, metadata: t }, S, D), m(l, null, q, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, o) => {
-      e.accessibilityLabel = o;
-    } }, metadata: t }, A, O), m(l, null, T, { kind: "accessor", name: "accessibilityCurrent", static: !1, private: !1, access: { has: (e) => "accessibilityCurrent" in e, get: (e) => e.accessibilityCurrent, set: (e, o) => {
-      e.accessibilityCurrent = o;
-    } }, metadata: t }, j, N), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    s = [w(), p({ reflect: !0, converter: $ })], z = [w(), p({ reflect: !0, converter: $ })], x = [w(), p({ reflect: !0, converter: $ })], R = [w(), p({ type: Boolean, reflect: !0 })], q = [w(), p({ attribute: "accessibility-label" })], O = [w(), p({ attribute: "accessibility-current" })], m(l, null, s, { kind: "accessor", name: "href", static: !1, private: !1, access: { has: (e) => "href" in e, get: (e) => e.href, set: (e, n) => {
+      e.href = n;
+    } }, metadata: t }, a, v), m(l, null, z, { kind: "accessor", name: "target", static: !1, private: !1, access: { has: (e) => "target" in e, get: (e) => e.target, set: (e, n) => {
+      e.target = n;
+    } }, metadata: t }, C, k), m(l, null, x, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (e) => "rel" in e, get: (e) => e.rel, set: (e, n) => {
+      e.rel = n;
+    } }, metadata: t }, I, L), m(l, null, R, { kind: "accessor", name: "download", static: !1, private: !1, access: { has: (e) => "download" in e, get: (e) => e.download, set: (e, n) => {
+      e.download = n;
+    } }, metadata: t }, S, D), m(l, null, q, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, n) => {
+      e.accessibilityLabel = n;
+    } }, metadata: t }, A, N), m(l, null, O, { kind: "accessor", name: "accessibilityCurrent", static: !1, private: !1, access: { has: (e) => "accessibilityCurrent" in e, get: (e) => e.accessibilityCurrent, set: (e, n) => {
+      e.accessibilityCurrent = n;
+    } }, metadata: t }, T, j), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), l;
 })();
 export {
-  te as SbbLinkBaseElement
+  ee as SbbLinkBaseElement
 };

package/core/base-elements/open-close-base-element.js

@@ -1,6 +1,5 @@
-import { LitElement as n } from "lit";
-import { SbbElementInternalsMixin as i } from "../mixins.js";
-const e = class e extends i(n) {
+import { SbbElement as n } from "./element.js";
+const e = class e extends n {
   /** The state of the component. */
   set state(s) {
     this._state && this.internals.states.delete(`state-${this._state}`), this._state = s, this._state && this.internals.states.add(`state-${this._state}`);

package/core/base-elements.js

@@ -1,11 +1,13 @@
 import { SbbActionBaseElement as o } from "./base-elements/action-base-element.js";
-import { SbbButtonBaseElement as n, SbbButtonLikeBaseElement as m } from "./base-elements/button-base-element.js";
-import { SbbLinkBaseElement as B } from "./base-elements/link-base-element.js";
-import { SbbOpenCloseBaseElement as s } from "./base-elements/open-close-base-element.js";
+import { SbbButtonBaseElement as m, SbbButtonLikeBaseElement as n } from "./base-elements/button-base-element.js";
+import { SbbElement as l } from "./base-elements/element.js";
+import { SbbLinkBaseElement as p } from "./base-elements/link-base-element.js";
+import { SbbOpenCloseBaseElement as E } from "./base-elements/open-close-base-element.js";
 export {
   o as SbbActionBaseElement,
-  n as SbbButtonBaseElement,
-  m as SbbButtonLikeBaseElement,
-  B as SbbLinkBaseElement,
-  s as SbbOpenCloseBaseElement
+  m as SbbButtonBaseElement,
+  n as SbbButtonLikeBaseElement,
+  l as SbbElement,
+  p as SbbLinkBaseElement,
+  E as SbbOpenCloseBaseElement
 };