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

package/header/header/header.component.js

@@ -1,39 +1,39 @@
-var F = (s) => {
+var U = (s) => {
   throw TypeError(s);
 };
-var A = (s, i, r) => i.has(s) || F("Cannot " + r);
-var u = (s, i, r) => (A(s, i, "read from private field"), r ? r.call(s) : i.get(s)), m = (s, i, r) => i.has(s) ? F("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, d) => (A(s, i, "write to private field"), d ? d.call(s, r) : i.set(s, r), r);
-import { __esDecorate as _, __runInitializers as l } from "tslib";
-import { css as q, LitElement as B, isServer as M, html as N } from "lit";
-import { customElement as R, property as g, state as Z } from "lit/decorators.js";
-import { SbbFocusVisibleWithinController as Q } from "../../core/a11y.js";
-import { forceType as j, idReference as V } from "../../core/decorators.js";
-import { isLean as W } from "../../core/dom.js";
-import { SbbHydrationMixin as Y, SbbElementInternalsMixin as G } from "../../core/mixins.js";
-import { boxSizingStyles as J } from "../../core/styles.js";
-const K = q`:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media(min-width:64rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-background-color-1);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-box-shadow-level-9-soft)}@media(forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a.sbb-header-logo:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`, X = "[aria-controls][aria-expanded='true']";
-let de = (() => {
-  var h, c, b, f, p, o;
-  let s = [R("sbb-header")], i, r = [], d, v = Y(G(B)), x, S = [], O = [], w, y = [], E = [], z, k = [], T = [], C, I = [], L = [], U, P = [], H = [];
-  return o = class extends v {
+var P = (s, i, r) => i.has(s) || U("Cannot " + r);
+var p = (s, i, r) => (P(s, i, "read from private field"), r ? r.call(s) : i.get(s)), u = (s, i, r) => i.has(s) ? U("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, m) => (P(s, i, "write to private field"), m ? m.call(s, r) : i.set(s, r), r);
+import { __esDecorate as g, __runInitializers as l } from "tslib";
+import { css as A, isServer as j, html as q } from "lit";
+import { property as _, state as B } from "lit/decorators.js";
+import { SbbFocusVisibleWithinController as D } from "../../core/a11y.js";
+import { SbbElement as N } from "../../core/base-elements.js";
+import { forceType as F, idReference as R } from "../../core/decorators.js";
+import { isLean as Z } from "../../core/dom.js";
+import { boxSizingStyles as M } from "../../core/styles.js";
+const Q = A`:host{display:block;height:var(--sbb-header-height);--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0}@media(min-width:64rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll]:is(:state(fixed),[state--fixed])){--sbb-header-position: fixed;--sbb-header-animation-name: hide;--sbb-header-transform: translate3d(0, -100%, 0);--sbb-header-inset-inline-end: var(--sbb-scrollbar-width, 0)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(animated),[state--animated])){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(visible),[state--visible])){--sbb-header-animation-name: show;--sbb-header-transform: translate3d(0, 0, 0);--sbb-header-transition-timing: cubic-bezier(0, 0, .2, 1)}:host([hide-on-scroll]:is(:state(fixed),[state--fixed]):is(:state(has-visible-focus-within),[state--has-visible-focus-within])){--sbb-header-transition-duration: 0;--sbb-header-transform: translate3d(0, 0, 0)}.sbb-header{position:var(--sbb-header-position);inset:0 var(--sbb-header-inset-inline-end) auto 0;background:var(--sbb-background-color-1);z-index:var(--sbb-header-z-index, 10);transform:var(--sbb-header-transform);transition-property:box-shadow;transition-duration:var(--sbb-header-transition-duration);transition-timing-function:var(--sbb-header-transition-timing);animation-name:var(--sbb-header-animation-name);animation-duration:var(--sbb-header-transition-duration);animation-timing-function:var(--sbb-header-transition-timing)}:host(:is(:is(:state(shadow),[state--shadow]),:is(:state(has-visible-focus-within),[state--has-visible-focus-within]):is(:state(fixed),[state--fixed]))) .sbb-header{box-shadow:var(--sbb-box-shadow-level-9-soft)}@media(forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{display:flex;align-items:center;justify-content:flex-start;height:var(--sbb-header-height)}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-header__wrapper{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}::slotted(:is(sbb-header-button,sbb-header-link):first-child){margin-inline-start:var(--sbb-header-first-item-margin-inline-start)}:host([size=s]) ::slotted(:is(sbb-header-button,sbb-header-link)){--sbb-header-action-min-height: var(--sbb-size-element-xs);--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(*){flex:0 0 auto}::slotted(.sbb-header-shrinkable){flex-shrink:1;min-width:0}::slotted(.sbb-header-spacer){flex-grow:1}::slotted(.sbb-header-logo){margin-inline-start:var(--sbb-spacing-responsive-s)}::slotted(a.sbb-header-logo){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a.sbb-header-logo:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-3x);border-radius:1px}@keyframes show{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}@keyframes hide{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}`, V = "[aria-controls][aria-expanded='true']";
+let se = (() => {
+  var d, h, c, b, f, a;
+  let s = N, i, r = [], m = [], v, x = [], O = [], w, y = [], S = [], z, k = [], E = [], T, C = [], L = [];
+  return a = class extends s {
     constructor() {
       super();
-      m(this, h);
-      m(this, c);
-      m(this, b);
-      m(this, f);
-      m(this, p);
-      n(this, h, l(this, S, !1)), n(this, c, (l(this, O), l(this, y, null))), n(this, b, (l(this, E), l(this, k, !1))), n(this, f, (l(this, T), l(this, I, W() ? "s" : "m"))), n(this, p, (l(this, L), l(this, P, !0))), this._scrollElement = l(this, H), this._lastScroll = 0, this.addController(new Q(this));
+      u(this, d);
+      u(this, h);
+      u(this, c);
+      u(this, b);
+      u(this, f);
+      n(this, d, l(this, r, !1)), n(this, h, (l(this, m), l(this, x, null))), n(this, c, (l(this, O), l(this, y, !1))), n(this, b, (l(this, S), l(this, k, Z() ? "s" : "m"))), n(this, f, (l(this, E), l(this, C, !0))), this._scrollElement = l(this, L), this._lastScroll = 0, this.addController(new D(this));
     }
     /**
      * Whether to allow the header content to stretch to full width.
      * By default, the content has the appropriate page size.
      */
     get expanded() {
-      return u(this, h);
+      return p(this, d);
     }
     set expanded(e) {
-      n(this, h, e);
+      n(this, d, e);
     }
     /**
      * The element's id or the element on which the scroll listener is attached.
@@ -41,33 +41,33 @@ let de = (() => {
      * For attribute usage, provide an id reference.
      */
     get scrollOrigin() {
-      return u(this, c);
+      return p(this, h);
     }
     set scrollOrigin(e) {
-      n(this, c, e);
+      n(this, h, e);
     }
     /** Whether the header should hide and show on scroll. */
     get hideOnScroll() {
-      return u(this, b);
+      return p(this, c);
     }
     set hideOnScroll(e) {
-      n(this, b, e);
+      n(this, c, e);
     }
     /**
      * Size of the header, either m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return u(this, f);
+      return p(this, b);
     }
     set size(e) {
-      n(this, f, e);
+      n(this, b, e);
     }
     get _headerOnTop() {
-      return u(this, p);
+      return p(this, f);
     }
     set _headerOnTop(e) {
-      n(this, p, e);
+      n(this, f, e);
     }
     /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
     connectedCallback() {
@@ -77,8 +77,8 @@ let de = (() => {
     disconnectedCallback() {
       super.disconnectedCallback(), this._scrollElement = null, this._scrollEventsController?.abort();
     }
-    requestUpdate(e, t, a) {
-      super.requestUpdate(e, t, a), !M && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
+    requestUpdate(e, t, o) {
+      super.requestUpdate(e, t, o), !j && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
     }
     firstUpdated(e) {
       super.firstUpdated(e), this._updateScrollListener();
@@ -119,14 +119,14 @@ let de = (() => {
     _closeOpenOverlays() {
       if (this.matches(":is(:state(has-visible-focus-within),[state--has-visible-focus-within])"))
         return;
-      const e = Array.from(this.querySelectorAll(X));
+      const e = Array.from(this.querySelectorAll(V));
       for (const t of e) {
-        const a = t.getAttribute("aria-controls"), D = document.getElementById(a);
-        typeof D?.close == "function" && D.close();
+        const o = t.getAttribute("aria-controls"), I = document.getElementById(o);
+        typeof I?.close == "function" && I.close();
       }
     }
     render() {
-      return N`
+      return q`
       <header class="sbb-header">
         <div class="sbb-header__wrapper">
           <slot></slot>
@@ -134,21 +134,21 @@ let de = (() => {
       </header>
     `;
     }
-  }, h = new WeakMap(), c = new WeakMap(), b = new WeakMap(), f = new WeakMap(), p = new WeakMap(), d = o, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    x = [j(), g({ reflect: !0, type: Boolean })], w = [V(), g({ attribute: "scroll-origin" })], z = [j(), g({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })], C = [g({ reflect: !0 })], U = [Z()], _(o, null, x, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, a) => {
-      t.expanded = a;
-    } }, metadata: e }, S, O), _(o, null, w, { kind: "accessor", name: "scrollOrigin", static: !1, private: !1, access: { has: (t) => "scrollOrigin" in t, get: (t) => t.scrollOrigin, set: (t, a) => {
-      t.scrollOrigin = a;
-    } }, metadata: e }, y, E), _(o, null, z, { kind: "accessor", name: "hideOnScroll", static: !1, private: !1, access: { has: (t) => "hideOnScroll" in t, get: (t) => t.hideOnScroll, set: (t, a) => {
-      t.hideOnScroll = a;
-    } }, metadata: e }, k, T), _(o, null, C, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, a) => {
-      t.size = a;
-    } }, metadata: e }, I, L), _(o, null, U, { kind: "accessor", name: "_headerOnTop", static: !1, private: !1, access: { has: (t) => "_headerOnTop" in t, get: (t) => t._headerOnTop, set: (t, a) => {
-      t._headerOnTop = a;
-    } }, metadata: e }, P, H), _(null, i = { value: d }, s, { kind: "class", name: d.name, metadata: e }, null, r), d = i.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.styles = [J, K], l(d, r), d;
+  }, d = new WeakMap(), h = new WeakMap(), c = new WeakMap(), b = new WeakMap(), f = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    i = [F(), _({ reflect: !0, type: Boolean })], v = [R(), _({ attribute: "scroll-origin" })], w = [F(), _({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })], z = [_({ reflect: !0 })], T = [B()], g(a, null, i, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, o) => {
+      t.expanded = o;
+    } }, metadata: e }, r, m), g(a, null, v, { kind: "accessor", name: "scrollOrigin", static: !1, private: !1, access: { has: (t) => "scrollOrigin" in t, get: (t) => t.scrollOrigin, set: (t, o) => {
+      t.scrollOrigin = o;
+    } }, metadata: e }, x, O), g(a, null, w, { kind: "accessor", name: "hideOnScroll", static: !1, private: !1, access: { has: (t) => "hideOnScroll" in t, get: (t) => t.hideOnScroll, set: (t, o) => {
+      t.hideOnScroll = o;
+    } }, metadata: e }, y, S), g(a, null, z, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, o) => {
+      t.size = o;
+    } }, metadata: e }, k, E), g(a, null, T, { kind: "accessor", name: "_headerOnTop", static: !1, private: !1, access: { has: (t) => "_headerOnTop" in t, get: (t) => t._headerOnTop, set: (t, o) => {
+      t._headerOnTop = o;
+    } }, metadata: e }, C, L), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.elementName = "sbb-header", a.styles = [M, Q], a;
 })();
 export {
-  de as SbbHeaderElement
+  se as SbbHeaderElement
 };

package/header/header-button/header-button.component.js

@@ -1,16 +1,9 @@
-import { __esDecorate as m, __runInitializers as n } from "tslib";
-import { customElement as i } from "lit/decorators.js";
-import { SbbButtonBaseElement as c } from "../../core/base-elements.js";
-import { SbbHeaderActionCommonElementMixin as u } from "../common.js";
-let p = (() => {
-  var t;
-  let s = [i("sbb-header-button")], l, r = [], e, o = u(c);
-  return t = class extends o {
-  }, e = t, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    m(null, l = { value: e }, s, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), n(e, r);
-  })(), e;
-})();
+import { SbbButtonBaseElement as m } from "../../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as o } from "../common/header-action-common.js";
+const t = class t extends o(m) {
+};
+t.elementName = "sbb-header-button";
+let e = t;
 export {
-  p as SbbHeaderButtonElement
+  e as SbbHeaderButtonElement
 };

package/header/header-button.js

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

package/header/header-environment/header-environment.component.js

@@ -1,37 +1,29 @@
-import { __esDecorate as i, __runInitializers as b } from "tslib";
-import { MutationController as l } from "@lit-labs/observers/mutation-controller.js";
-import { css as c, LitElement as v, html as d } from "lit";
-import { customElement as m } from "lit/decorators.js";
-import { SbbElementInternalsMixin as h } from "../../core/mixins.js";
-import { boxSizingStyles as u } from "../../core/styles.js";
-const f = c`:host{--sbb-header-environment-background-color: var(--sbb-color-granite);--sbb-header-environment-color: var(--sbb-color-1-negative);--sbb-header-environment-size: 2.375rem;--sbb-header-environment-rotate: 45deg;position:absolute;inset-inline-end:0;inset-block-start:0;display:flex;align-items:center;justify-content:center}:host(:dir(rtl)){--sbb-header-environment-rotate: -45deg}:host(:is(:state(env-dev),[state--env-dev])){--sbb-header-environment-background-color: var(--sbb-color-orange)}:host(:is(:state(env-edu),[state--env-edu])){--sbb-header-environment-background-color: var(--sbb-color-green)}:host(:is(:state(env-int),[state--env-int])),:host(:is(:state(env-inte),[state--env-inte])){--sbb-header-environment-background-color: var(--sbb-color-granite)}:host(:is(:state(env-loc),[state--env-loc])){--sbb-header-environment-background-color: var(--sbb-color-pink)}:host(:is(:state(env-test),[state--env-test])){--sbb-header-environment-background-color: var(--sbb-color-sky)}:host:before{content:"";border-block-start:var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);border-inline-start:var(--sbb-header-environment-size) solid transparent}.sbb-header-environment__text{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;position:absolute;color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x)}`;
-let z = (() => {
-  var t;
-  let a = [m("sbb-header-environment")], r, s = [], e, o = h(v);
-  return t = class extends o {
-    constructor() {
-      super(), this._env = null, this.addController(new l(this, {
-        config: { characterData: !0, subtree: !0 },
-        callback: () => {
-          this._slottedTextChange();
-        }
-      }));
-    }
-    _slottedTextChange() {
-      this._env && this.internals.states.delete(`env-${this._env}`), this._env = this.textContent?.trim() ?? "", this._env && this.internals.states.add(`env-${this._env}`);
-    }
-    render() {
-      return d`
+import { MutationController as n } from "@lit-labs/observers/mutation-controller.js";
+import { css as s, html as r } from "lit";
+import { SbbElement as o } from "../../core/base-elements.js";
+import { boxSizingStyles as a } from "../../core/styles.js";
+const i = s`:host{--sbb-header-environment-background-color: var(--sbb-color-granite);--sbb-header-environment-color: var(--sbb-color-1-negative);--sbb-header-environment-size: 2.375rem;--sbb-header-environment-rotate: 45deg;position:absolute;inset-inline-end:0;inset-block-start:0;display:flex;align-items:center;justify-content:center}:host(:dir(rtl)){--sbb-header-environment-rotate: -45deg}:host(:is(:state(env-dev),[state--env-dev])){--sbb-header-environment-background-color: var(--sbb-color-orange)}:host(:is(:state(env-edu),[state--env-edu])){--sbb-header-environment-background-color: var(--sbb-color-green)}:host(:is(:state(env-int),[state--env-int])),:host(:is(:state(env-inte),[state--env-inte])){--sbb-header-environment-background-color: var(--sbb-color-granite)}:host(:is(:state(env-loc),[state--env-loc])){--sbb-header-environment-background-color: var(--sbb-color-pink)}:host(:is(:state(env-test),[state--env-test])){--sbb-header-environment-background-color: var(--sbb-color-sky)}:host:before{content:"";border-block-start:var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);border-inline-start:var(--sbb-header-environment-size) solid transparent}.sbb-header-environment__text{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;position:absolute;color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x)}`, e = class e extends o {
+  constructor() {
+    super(), this._env = null, this.addController(new n(this, {
+      config: { characterData: !0, subtree: !0 },
+      callback: () => {
+        this._slottedTextChange();
+      }
+    }));
+  }
+  _slottedTextChange() {
+    this._env && this.internals.states.delete(`env-${this._env}`), this._env = this.textContent?.trim() ?? "", this._env && this.internals.states.add(`env-${this._env}`);
+  }
+  render() {
+    return r`
       <span class="sbb-header-environment__text">
         <slot></slot>
       </span>
     `;
-    }
-  }, e = t, (() => {
-    const n = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    i(null, r = { value: e }, a, { kind: "class", name: e.name, metadata: n }, null, s), e = r.value, n && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: n });
-  })(), t.styles = [u, f], b(e, s), e;
-})();
+  }
+};
+e.elementName = "sbb-header-environment", e.styles = [a, i];
+let t = e;
 export {
-  z as SbbHeaderEnvironmentElement
+  t as SbbHeaderEnvironmentElement
 };

package/header/header-environment.js

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

package/header/header-link/header-link.component.js

@@ -1,16 +1,9 @@
-import { __esDecorate as m, __runInitializers as n } from "tslib";
-import { customElement as o } from "lit/decorators.js";
-import { SbbLinkBaseElement as c } from "../../core/base-elements.js";
-import { SbbHeaderActionCommonElementMixin as b } from "../common.js";
-let p = (() => {
-  var t;
-  let s = [o("sbb-header-link")], l, r = [], e, i = b(c);
-  return t = class extends i {
-  }, e = t, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    m(null, l = { value: e }, s, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), n(e, r);
-  })(), e;
-})();
+import { SbbLinkBaseElement as m } from "../../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as o } from "../common/header-action-common.js";
+const t = class t extends o(m) {
+};
+t.elementName = "sbb-header-link";
+let e = t;
 export {
-  p as SbbHeaderLinkElement
+  e as SbbHeaderLinkElement
 };

package/header/header-link.js

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

package/header/header.js

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

package/header.js

@@ -1,10 +1,16 @@
+import { SbbHeaderActionCommonElementMixin as p } from "./header/common/header-action-common.js";
+import { SbbHeaderButtonElement as e } from "./header/header-button/header-button.component.js";
+import { SbbHeaderEnvironmentElement as m } from "./header/header-environment/header-environment.component.js";
+import { SbbHeaderLinkElement as n } from "./header/header-link/header-link.component.js";
 import { SbbHeaderElement as r } from "./header/header/header.component.js";
-import { SbbHeaderButtonElement as m } from "./header/header-button/header-button.component.js";
-import { SbbHeaderLinkElement as b } from "./header/header-link/header-link.component.js";
-import { SbbHeaderActionCommonElementMixin as a } from "./header/common/header-action-common.js";
+r.define();
+e.define();
+m.define();
+n.define();
 export {
-  a as SbbHeaderActionCommonElementMixin,
-  m as SbbHeaderButtonElement,
+  p as SbbHeaderActionCommonElementMixin,
+  e as SbbHeaderButtonElement,
   r as SbbHeaderElement,
-  b as SbbHeaderLinkElement
+  m as SbbHeaderEnvironmentElement,
+  n as SbbHeaderLinkElement
 };

package/header.pure.js

@@ -0,0 +1,12 @@
+import { SbbHeaderActionCommonElementMixin as o } from "./header/common/header-action-common.js";
+import { SbbHeaderButtonElement as m } from "./header/header-button/header-button.component.js";
+import { SbbHeaderEnvironmentElement as b } from "./header/header-environment/header-environment.component.js";
+import { SbbHeaderLinkElement as E } from "./header/header-link/header-link.component.js";
+import { SbbHeaderElement as d } from "./header/header/header.component.js";
+export {
+  o as SbbHeaderActionCommonElementMixin,
+  m as SbbHeaderButtonElement,
+  d as SbbHeaderElement,
+  b as SbbHeaderEnvironmentElement,
+  E as SbbHeaderLinkElement
+};

package/icon/icon-base.js

@@ -1,21 +1,21 @@
-var S = (s) => {
+var I = (s) => {
   throw TypeError(s);
 };
-var w = (s, a, i) => a.has(s) || S("Cannot " + i);
-var h = (s, a, i) => (w(s, a, "read from private field"), i ? i.call(s) : a.get(s)), g = (s, a, i) => a.has(s) ? S("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), u = (s, a, i, l) => (w(s, a, "write to private field"), l ? l.call(s, i) : a.set(s, i), i);
+var w = (s, a, i) => a.has(s) || I("Cannot " + i);
+var h = (s, a, i) => (w(s, a, "read from private field"), i ? i.call(s) : a.get(s)), g = (s, a, i) => a.has(s) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), u = (s, a, i, l) => (w(s, a, "write to private field"), l ? l.call(s, i) : a.set(s, i), i);
 import { __esDecorate as v, __runInitializers as r } from "tslib";
-import { css as E, LitElement as j, html as N } from "lit";
-import { state as k, property as L } from "lit/decorators.js";
-import { unsafeHTML as M } from "lit/directives/unsafe-html.js";
-import { until as O } from "lit/directives/until.js";
-import { forceType as T } from "../core/decorators.js";
-import { SbbElementInternalsMixin as C } from "../core/mixins.js";
-import { boxSizingStyles as D } from "../core/styles.js";
-import { getSvgContent as H } from "./icon-request.js";
-const P = E`:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host(:is(:state(empty),[state--empty])){--sbb-icon-default-dimension: 0}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-extra-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-extra-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`, x = "default";
-let X = (() => {
+import { css as j, html as N } from "lit";
+import { state as k, property as E } from "lit/decorators.js";
+import { unsafeHTML as O } from "lit/directives/unsafe-html.js";
+import { until as T } from "lit/directives/until.js";
+import { SbbElement as C } from "../core/base-elements.js";
+import { forceType as D } from "../core/decorators.js";
+import { boxSizingStyles as H } from "../core/styles.js";
+import { getSvgContent as L } from "./icon-request.js";
+const M = j`:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host(:is(:state(empty),[state--empty])){--sbb-icon-default-dimension: 0}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-extra-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-extra-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host(:is(:state(empty),[state--empty]):is(:state(namespace-default),[state--namespace-default])[name$=-large]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-large)}svg{width:var(--sbb-icon-svg-width, var(--sbb-icon-default-dimension));height:var(--sbb-icon-svg-height, var(--sbb-icon-default-dimension));stroke:var(--sbb-icon-svg-stroke-color);stroke-width:var(--sbb-icon-svg-stroke-width)}svg:not(.color-immutable) [fill]:not([fill=none]){fill:currentcolor}svg:not(.color-immutable) [stroke]:not([stroke=none]){stroke:currentcolor}svg:not(.color-immutable)>:where(path,polygon,polyline):where(:not([stroke]):not([fill])),svg:not(.color-immutable) :where(:not([stroke]):not([fill])) :where(path,polygon,polyline):where(:not([stroke]):not([fill])){fill:currentcolor}`, x = "default";
+let W = (() => {
   var c, m, p, n;
-  let s = C(j), a, i = [], l = [], d, f = [], _ = [], b, y = [], z = [];
+  let s = C, a, i = [], l = [], d, f = [], _ = [], b, y = [], z = [];
   return n = class extends s {
     constructor() {
       super();
@@ -56,16 +56,16 @@ let X = (() => {
         return;
       const [t, o] = this._splitIconName(e);
       this._svgNamespace && this.internals.states.delete(`namespace-${this._svgNamespace}`), this._svgNamespace = t, this._svgNamespace && this.internals.states.add(`namespace-${this._svgNamespace}`);
-      const I = this.fetchSvgIcon(this._svgNamespace, o);
-      this._svgIcon = I.then(($) => M($));
+      const S = this.fetchSvgIcon(this._svgNamespace, o);
+      this._svgIcon = S.then(($) => O($));
       try {
-        this.toggleState("empty", !await I);
+        this.toggleState("empty", !await S);
       } catch {
         this.internals.states.add("empty");
       }
     }
     async fetchSvgIcon(e, t) {
-      return await H(e, t, !this.noSanitize);
+      return await L(e, t, !this.noSanitize);
     }
     _splitIconName(e) {
       if (!e)
@@ -82,7 +82,7 @@ let X = (() => {
     }
     render() {
       return N`<span class="sbb-icon-inner"
-      >${O(
+      >${T(
         this._svgIcon,
         // To reserve space, we need an empty svg to apply dimension to.
         N`<svg width="0" height="0"></svg>`
@@ -91,15 +91,15 @@ let X = (() => {
     }
   }, c = new WeakMap(), m = new WeakMap(), p = new WeakMap(), (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    a = [k()], d = [k()], b = [T(), L({ attribute: "no-sanitize", type: Boolean })], v(n, null, a, { kind: "accessor", name: "_svgNamespace", static: !1, private: !1, access: { has: (t) => "_svgNamespace" in t, get: (t) => t._svgNamespace, set: (t, o) => {
+    a = [k()], d = [k()], b = [D(), E({ attribute: "no-sanitize", type: Boolean })], v(n, null, a, { kind: "accessor", name: "_svgNamespace", static: !1, private: !1, access: { has: (t) => "_svgNamespace" in t, get: (t) => t._svgNamespace, set: (t, o) => {
       t._svgNamespace = o;
     } }, metadata: e }, i, l), v(n, null, d, { kind: "accessor", name: "_svgIcon", static: !1, private: !1, access: { has: (t) => "_svgIcon" in t, get: (t) => t._svgIcon, set: (t, o) => {
       t._svgIcon = o;
     } }, metadata: e }, f, _), v(n, null, b, { kind: "accessor", name: "noSanitize", static: !1, private: !1, access: { has: (t) => "noSanitize" in t, get: (t) => t.noSanitize, set: (t, o) => {
       t.noSanitize = o;
     } }, metadata: e }, y, z), e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.styles = [D, P], n.role = "img", n;
+  })(), n.styles = [H, M], n.role = "img", n;
 })();
 export {
-  X as SbbIconBase
+  W as SbbIconBase
 };

package/icon/icon.component.js

@@ -1,22 +1,22 @@
-var A = (t) => {
+var d = (t) => {
   throw TypeError(t);
 };
-var I = (t, i, s) => i.has(t) || A("Cannot " + s);
-var m = (t, i, s) => (I(t, i, "read from private field"), s ? s.call(t) : i.get(t)), u = (t, i, s) => i.has(t) ? A("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), _ = (t, i, s, r) => (I(t, i, "write to private field"), r ? r.call(t, s) : i.set(t, s), s);
-import { __esDecorate as p, __runInitializers as b } from "tslib";
-import { html as S } from "lit";
-import { customElement as k, property as z, state as x } from "lit/decorators.js";
-import { forceType as E, omitEmptyConverter as w } from "../core/decorators.js";
-import { SbbIconBase as D } from "./icon-base.js";
-let $ = (() => {
-  var o, c, l;
-  let t = [k("sbb-icon")], i, s = [], r, g = D, d, h = [], y = [], f, C = [], v = [];
-  return l = class extends g {
+var y = (t, i, r) => i.has(t) || d("Cannot " + r);
+var m = (t, i, r) => (y(t, i, "read from private field"), r ? r.call(t) : i.get(t)), u = (t, i, r) => i.has(t) ? d("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, r), p = (t, i, r, n) => (y(t, i, "write to private field"), n ? n.call(t, r) : i.set(t, r), r);
+import { __esDecorate as f, __runInitializers as c } from "tslib";
+import { html as C } from "lit";
+import { property as A, state as v } from "lit/decorators.js";
+import { forceType as S, omitEmptyConverter as k } from "../core/decorators.js";
+import { SbbIconBase as I } from "./icon-base.js";
+let D = (() => {
+  var o, b, s;
+  let t = I, i, r = [], n = [], _, g = [], h = [];
+  return s = class extends t {
     constructor() {
       super(...arguments);
-      u(this, o, b(this, h, ""));
-      u(this, c, (b(this, y), b(this, C, !1)));
-      b(this, v);
+      u(this, o, c(this, r, ""));
+      u(this, b, (c(this, n), c(this, g, !1)));
+      c(this, h);
     }
     /**
      * We need to additionally observe the svgicon attribute
@@ -35,7 +35,7 @@ let $ = (() => {
       return m(this, o);
     }
     set name(e) {
-      _(this, o, e);
+      p(this, o, e);
     }
     /**
      * The sbb-angular library has a sbb-icon component as well. In order to provide
@@ -43,10 +43,10 @@ let $ = (() => {
      * components) we need to check whether the attribute svgicon is used.
      */
     get _sbbAngularCompatibility() {
-      return m(this, c);
+      return m(this, b);
     }
     set _sbbAngularCompatibility(e) {
-      _(this, c, e);
+      p(this, b, e);
     }
     connectedCallback() {
       super.connectedCallback(), this.internals.ariaHidden = "true";
@@ -57,21 +57,21 @@ let $ = (() => {
     willUpdate(e) {
       super.willUpdate(e), e.has("name") && this.name && this.loadSvgIcon(this.name);
     }
-    attributeChangedCallback(e, a, n) {
-      e === "svgicon" ? this._sbbAngularCompatibility = !!n : super.attributeChangedCallback(e, a, n);
+    attributeChangedCallback(e, a, l) {
+      e === "svgicon" ? this._sbbAngularCompatibility = !!l : super.attributeChangedCallback(e, a, l);
     }
     render() {
-      return this._sbbAngularCompatibility ? S`<slot></slot>` : super.render();
+      return this._sbbAngularCompatibility ? C`<slot></slot>` : super.render();
     }
-  }, o = new WeakMap(), c = new WeakMap(), r = l, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    d = [E(), z({ reflect: !0, converter: w })], f = [x()], p(l, null, d, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (a) => "name" in a, get: (a) => a.name, set: (a, n) => {
-      a.name = n;
-    } }, metadata: e }, h, y), p(l, null, f, { kind: "accessor", name: "_sbbAngularCompatibility", static: !1, private: !1, access: { has: (a) => "_sbbAngularCompatibility" in a, get: (a) => a._sbbAngularCompatibility, set: (a, n) => {
-      a._sbbAngularCompatibility = n;
-    } }, metadata: e }, C, v), p(null, i = { value: r }, t, { kind: "class", name: r.name, metadata: e }, null, s), r = i.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), b(r, s);
-  })(), r;
+  }, o = new WeakMap(), b = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    i = [S(), A({ reflect: !0, converter: k })], _ = [v()], f(s, null, i, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (a) => "name" in a, get: (a) => a.name, set: (a, l) => {
+      a.name = l;
+    } }, metadata: e }, r, n), f(s, null, _, { kind: "accessor", name: "_sbbAngularCompatibility", static: !1, private: !1, access: { has: (a) => "_sbbAngularCompatibility" in a, get: (a) => a._sbbAngularCompatibility, set: (a, l) => {
+      a._sbbAngularCompatibility = l;
+    } }, metadata: e }, g, h), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.elementName = "sbb-icon", s;
 })();
 export {
-  $ as SbbIconElement
+  D as SbbIconElement
 };