@sbb-esta/lyne-elements-dev 4.7.0-dev.1773333589 → 4.7.0-dev.1773388991

package/header/header/header.component.js

@@ -1,154 +1,2 @@
-var U = (s) => {
-  throw TypeError(s);
-};
-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{--sbb-logo-height: 1rem;--sbb-signet-height: 1rem;--sbb-header-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) )}@media(min-width:64rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host{display:block;height:var(--sbb-header-height)}: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)}: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-header-background);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-header-box-shadow)}@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)}::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();
-      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 p(this, d);
-    }
-    set expanded(e) {
-      n(this, d, e);
-    }
-    /**
-     * The element's id or the element on which the scroll listener is attached.
-     *
-     * For attribute usage, provide an id reference.
-     */
-    get scrollOrigin() {
-      return p(this, h);
-    }
-    set scrollOrigin(e) {
-      n(this, h, e);
-    }
-    /** Whether the header should hide and show on scroll. */
-    get hideOnScroll() {
-      return p(this, c);
-    }
-    set hideOnScroll(e) {
-      n(this, c, e);
-    }
-    /**
-     * Size of the header, either m or s.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return p(this, b);
-    }
-    set size(e) {
-      n(this, b, e);
-    }
-    get _headerOnTop() {
-      return p(this, f);
-    }
-    set _headerOnTop(e) {
-      n(this, f, e);
-    }
-    /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
-    connectedCallback() {
-      super.connectedCallback(), this.hasUpdated && this._updateScrollListener();
-    }
-    /** Removes the scroll listener, if previously attached. */
-    disconnectedCallback() {
-      super.disconnectedCallback(), this._scrollElement = null, this._scrollEventsController?.abort();
-    }
-    requestUpdate(e, t, o) {
-      super.requestUpdate(e, t, o), !j && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
-    }
-    firstUpdated(e) {
-      super.firstUpdated(e), this._updateScrollListener();
-    }
-    _updateScrollListener() {
-      const e = this.scrollOrigin ?? document;
-      if (e === this._scrollElement || (this._scrollEventsController?.abort(), this._scrollElement = e, !this._scrollElement))
-        return;
-      this._scrollEventsController = new AbortController(), this._scrollFunction = this._getScrollFunction.bind(this), this._scrollElement.addEventListener("scroll", this._scrollFunction, {
-        passive: !0,
-        signal: this._scrollEventsController.signal
-      });
-      const t = this._getCurrentScrollProperty("scrollTop");
-      this._lastScroll = t <= 0 ? 0 : t;
-    }
-    /** Returns the correct function to attach on scroll. */
-    _getScrollFunction() {
-      return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
-    }
-    /** Returns the requested property of the scrollContext. */
-    _getCurrentScrollProperty(e) {
-      return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : this._scrollElement?.[e] || 0;
-    }
-    /**
-     * Sets the correct value for `scrollTop`, then:
-     * - apply the shadow if the element/document has been scrolled down;
-     * - hides the header, remove the shadow and possibly close any open menu on the header if it is not visible anymore;
-     * - shows the header and re-apply the shadow if the element/document has been scrolled up.
-     */
-    _scrollListener() {
-      const e = this._getCurrentScrollProperty("scrollTop");
-      this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - e <= 0 || (this.toggleState("shadow", e !== 0), e > this.offsetHeight && e > 0 && this._lastScroll < e && this._closeOpenOverlays(), e > this.offsetHeight * 2 ? (this._headerOnTop = !1, e > 0 && this._lastScroll < e ? ["shadow", "visible"].forEach((t) => this.internals.states.delete(t)) : ["fixed", "shadow", "animated", "visible"].forEach((t) => this.internals.states.add(t))) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && ["shadow", "animated", "fixed", "visible"].forEach((t) => this.internals.states.delete(t))), this._lastScroll = e <= 0 ? 0 : e);
-    }
-    /** Apply the shadow if the element/document has been scrolled down. */
-    _scrollShadowListener() {
-      this.toggleState("shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
-    }
-    _closeOpenOverlays() {
-      if (this.matches(":is(:state(has-visible-focus-within),[state--has-visible-focus-within])"))
-        return;
-      const e = Array.from(this.querySelectorAll(V));
-      for (const t of e) {
-        const o = t.getAttribute("aria-controls"), I = document.getElementById(o);
-        typeof I?.close == "function" && I.close();
-      }
-    }
-    render() {
-      return q`
-      <header class="sbb-header">
-        <div class="sbb-header__wrapper">
-          <slot></slot>
-        </div>
-      </header>
-    `;
-    }
-  }, 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 {
-  se as SbbHeaderElement
-};
+import { t as e } from "../../header.component-BssLZ6b7.js";
+export { e as SbbHeaderElement };

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

@@ -1,9 +1,10 @@
-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 {
-  e as SbbHeaderButtonElement
+import { SbbButtonBaseElement as e } from "../../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as t } from "../common/header-action-common.js";
+//#region src/elements/header/header-button/header-button.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-header-button";
+	}
 };
+//#endregion
+export { n as SbbHeaderButtonElement };

package/header/header-button.js

@@ -1,7 +1,4 @@
 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 {
-  e as SbbHeaderButtonElement
-};
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/header/header-button.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
+//#endregion
+export { e as SbbHeaderButtonElement };

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

@@ -1,29 +1,2 @@
-import { MutationController as s } from "@lit-labs/observers/mutation-controller.js";
-import { css as n, html as r } from "lit";
-import { SbbElement as o } from "../../core/base-elements.js";
-import { boxSizingStyles as a } from "../../core/styles.js";
-const i = n`:host{position:absolute;inset-inline-end:0;inset-block-start:0;display:flex;align-items:center;justify-content:center;font-size:var(--sbb-text-font-size-xxs);font-weight:700;letter-spacing:var(--sbb-typo-letter-spacing-text)}: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{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 s(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.elementName = "sbb-header-environment", e.styles = [a, i];
-let t = e;
-export {
-  t as SbbHeaderEnvironmentElement
-};
+import { t as e } from "../../header-environment.component-KqUmsOPQ.js";
+export { e as SbbHeaderEnvironmentElement };

package/header/header-environment.js

@@ -1,7 +1,4 @@
-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 {
-  e as SbbHeaderEnvironmentElement
-};
+import { t as e } from "../header-environment.component-KqUmsOPQ.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/header/header-environment.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
+//#endregion
+export { e as SbbHeaderEnvironmentElement };

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

@@ -1,9 +1,10 @@
-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 {
-  e as SbbHeaderLinkElement
+import { SbbLinkBaseElement as e } from "../../core/base-elements.js";
+import { SbbHeaderActionCommonElementMixin as t } from "../common/header-action-common.js";
+//#region src/elements/header/header-link/header-link.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-header-link";
+	}
 };
+//#endregion
+export { n as SbbHeaderLinkElement };

package/header/header-link.js

@@ -1,7 +1,4 @@
 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 {
-  e as SbbHeaderLinkElement
-};
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/header/header-link.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
+//#endregion
+export { e as SbbHeaderLinkElement };

package/header/header.js

@@ -1,7 +1,4 @@
-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 {
-  e as SbbHeaderElement
-};
+import { t as e } from "../header.component-BssLZ6b7.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/header/header.js' has been deprecated.\nUse either '@sbb-esta/elements/header.js' or '@sbb-esta/elements/header.pure.js' instead.");
+//#endregion
+export { e as SbbHeaderElement };

package/header-action-common-C2YPvOxq.js

@@ -0,0 +1,62 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { boxSizingStyles as i } from "./core/styles.js";
+import { html as a } from "lit/static-html.js";
+import { SbbIconNameMixin as o } from "./icon.js";
+//#region src/elements/header/common/header-action.scss?lit&inline
+var s = n`:host{--sbb-header-action-active-border-margin-inline:var(--sbb-header-action-padding-inline);--sbb-header-action-min-width:var(--sbb-header-action-min-height);--sbb-header-action-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--_sbb-header-first-item-padding-shift:calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-margin-inline-start:calc(var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift));display:inline-block;outline:none!important}@media (any-hover:hover){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color:var(--sbb-background-color-3);--sbb-header-action-translate-y:-.0625rem;--sbb-header-action-background-inset:calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color:Highlight}}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color:var(--sbb-background-color-4)}@media (forced-colors:active){:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color:Highlight}}:host(.sbb-active){--sbb-header-action-active-border-scale:1}@media (forced-colors:active){:host(.sbb-active){--sbb-header-action-border-color:Highlight}:host(:is(:state(button),[state--button])){--sbb-header-action-color:ButtonText}}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))){--sbb-header-first-item-margin-inline-start:var(--_sbb-header-first-item-padding-shift)}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;color:var(--sbb-header-action-color);min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero,var(--sbb-header-action-padding-inline));cursor:var(--sbb-cursor-pointer);-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--sbb-header-action-background-inset,0);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color);transition-property:inset,background-color;position:absolute}@media (forced-colors:active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible) .sbb-action-base:before,.sbb-action-base: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)}.sbb-action-base:after{content:"";border-block-end:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale,0);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);position:absolute}.sbb-header-action__wrapper{align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y,0));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%;display:flex}.sbb-header-action__icon{--sbb-icon-svg-stroke-color:currentcolor;--sbb-icon-svg-stroke-width:1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon{display:none}.sbb-header-action__text{--sbb-text-font-size:var(--sbb-text-font-size-xs);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);white-space:nowrap;text-overflow:ellipsis;font-weight:700;display:block;overflow:hidden}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{display:none}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}@media (width<=37.4375rem){:host([expand-from=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([expand-from=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=63.9375rem){:host([expand-from=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([expand-from=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=89.9375rem){:host([expand-from=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([expand-from=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=98.9375rem){:host([expand-from=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([expand-from=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}::slotted([slot=icon]:is(sbb-image,img)){width:var(--sbb-header-action-icon-dimension);height:var(--sbb-header-action-icon-dimension);border-radius:var(--sbb-border-radius-infinity)}`, c = (n) => (() => {
+	let c = o(n), l, u = [], d = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [r({
+				attribute: "expand-from",
+				reflect: !0
+			})], e(this, null, l, {
+				kind: "accessor",
+				name: "expandFrom",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "expandFrom" in e,
+					get: (e) => e.expandFrom,
+					set: (e, t) => {
+						e.expandFrom = t;
+					}
+				},
+				metadata: t
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.styles = [i, s];
+		}
+		#e = t(this, u, "large");
+		get expandFrom() {
+			return this.#e;
+		}
+		set expandFrom(e) {
+			this.#e = e;
+		}
+		renderTemplate() {
+			return a`
+        <span class="sbb-header-action__wrapper">
+          <span class="sbb-header-action__icon"> ${super.renderIconSlot()} </span>
+          <span class="sbb-header-action__text">
+            <slot></slot>
+          </span>
+        </span>
+      `;
+		}
+		constructor() {
+			super(...arguments), t(this, d);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/header-environment.component-KqUmsOPQ.js

@@ -0,0 +1,36 @@
+import { css as e, html as t } from "lit";
+import { SbbElement as n } from "./core/base-elements.js";
+import { boxSizingStyles as r } from "./core/styles.js";
+import { MutationController as i } from "@lit-labs/observers/mutation-controller.js";
+//#region src/elements/header/header-environment/header-environment.scss?lit&inline
+var a = e`:host{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset-block-start:0;inset-inline-end:0}: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{color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x);position:absolute}`, o = class extends n {
+	static {
+		this.elementName = "sbb-header-environment";
+	}
+	static {
+		this.styles = [r, a];
+	}
+	constructor() {
+		super(), this._env = null, this.addController(new i(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 t`
+      <span class="sbb-header-environment__text">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+//#endregion
+export { o as t };

package/header.component-BssLZ6b7.js

@@ -0,0 +1,203 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r, isServer as i } from "lit";
+import { property as a, state as o } from "lit/decorators.js";
+import { SbbElement as s } from "./core/base-elements.js";
+import { forceType as c, idReference as l } from "./core/decorators.js";
+import { isLean as u } from "./core/dom.js";
+import { boxSizingStyles as d } from "./core/styles.js";
+import { SbbFocusVisibleWithinController as f } from "./core/a11y.js";
+//#region src/elements/header/header/header.scss?lit&inline
+var p = n`:host{--sbb-logo-height:1rem;--sbb-signet-height:1rem;--sbb-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x))}@media (width>=64rem){:host{--sbb-logo-height:1.25rem;--sbb-signet-height:1.25rem}}:host{height:var(--sbb-header-height);display:block}: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)}: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-header-background);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-header-box-shadow)}@media (forced-colors:active){.sbb-header{border-block-end:var(--sbb-border-width-1x) solid CanvasText}}.sbb-header__wrapper{height:var(--sbb-header-height);justify-content:flex-start;align-items:center;display:flex}:host(:not([expanded])) .sbb-header__wrapper{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (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)}::slotted(*){flex:none}::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){padding-block:var(--sbb-spacing-fixed-3x);display:block;position:relative;outline:none!important}::slotted(a.sbb-header-logo):before{content:"";inset:var(--sbb-spacing-fixed-3x) 0;display:block;position:absolute}::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:translateY(-100%)}to{transform:translate(0,0)}}@keyframes hide{0%{transform:translate(0,0)}to{transform:translateY(-100%)}}`, m = "[aria-controls][aria-expanded='true']", h = (() => {
+	let n = s, h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [], w, T = [], E = [], D, O = [], k = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			h = [c(), a({
+				reflect: !0,
+				type: Boolean
+			})], v = [l(), a({ attribute: "scroll-origin" })], x = [c(), a({
+				attribute: "hide-on-scroll",
+				reflect: !0,
+				type: Boolean
+			})], w = [a({ reflect: !0 })], D = [o()], e(this, null, h, {
+				kind: "accessor",
+				name: "expanded",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "expanded" in e,
+					get: (e) => e.expanded,
+					set: (e, t) => {
+						e.expanded = t;
+					}
+				},
+				metadata: t
+			}, g, _), e(this, null, v, {
+				kind: "accessor",
+				name: "scrollOrigin",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "scrollOrigin" in e,
+					get: (e) => e.scrollOrigin,
+					set: (e, t) => {
+						e.scrollOrigin = t;
+					}
+				},
+				metadata: t
+			}, y, b), e(this, null, x, {
+				kind: "accessor",
+				name: "hideOnScroll",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "hideOnScroll" in e,
+					get: (e) => e.hideOnScroll,
+					set: (e, t) => {
+						e.hideOnScroll = t;
+					}
+				},
+				metadata: t
+			}, S, C), e(this, null, w, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, T, E), e(this, null, D, {
+				kind: "accessor",
+				name: "_headerOnTop",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "_headerOnTop" in e,
+					get: (e) => e._headerOnTop,
+					set: (e, t) => {
+						e._headerOnTop = t;
+					}
+				},
+				metadata: t
+			}, O, k), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-header";
+		}
+		static {
+			this.styles = [d, p];
+		}
+		#e;
+		get expanded() {
+			return this.#e;
+		}
+		set expanded(e) {
+			this.#e = e;
+		}
+		#t;
+		get scrollOrigin() {
+			return this.#t;
+		}
+		set scrollOrigin(e) {
+			this.#t = e;
+		}
+		#n;
+		get hideOnScroll() {
+			return this.#n;
+		}
+		set hideOnScroll(e) {
+			this.#n = e;
+		}
+		#r;
+		get size() {
+			return this.#r;
+		}
+		set size(e) {
+			this.#r = e;
+		}
+		#i;
+		get _headerOnTop() {
+			return this.#i;
+		}
+		set _headerOnTop(e) {
+			this.#i = e;
+		}
+		constructor() {
+			super(), this.#e = t(this, g, !1), this.#t = (t(this, _), t(this, y, null)), this.#n = (t(this, b), t(this, S, !1)), this.#r = (t(this, C), t(this, T, u() ? "s" : "m")), this.#i = (t(this, E), t(this, O, !0)), this._scrollElement = t(this, k), this._lastScroll = 0, this.addController(new f(this));
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.hasUpdated && this._updateScrollListener();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this._scrollElement = null, this._scrollEventsController?.abort();
+		}
+		requestUpdate(e, t, n) {
+			super.requestUpdate(e, t, n), !i && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), this._updateScrollListener();
+		}
+		_updateScrollListener() {
+			let e = this.scrollOrigin ?? document;
+			if (e === this._scrollElement || (this._scrollEventsController?.abort(), this._scrollElement = e, !this._scrollElement)) return;
+			this._scrollEventsController = new AbortController(), this._scrollFunction = this._getScrollFunction.bind(this), this._scrollElement.addEventListener("scroll", this._scrollFunction, {
+				passive: !0,
+				signal: this._scrollEventsController.signal
+			});
+			let t = this._getCurrentScrollProperty("scrollTop");
+			this._lastScroll = t <= 0 ? 0 : t;
+		}
+		_getScrollFunction() {
+			return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
+		}
+		_getCurrentScrollProperty(e) {
+			return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : this._scrollElement?.[e] || 0;
+		}
+		_scrollListener() {
+			let e = this._getCurrentScrollProperty("scrollTop");
+			this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - e <= 0 || (this.toggleState("shadow", e !== 0), e > this.offsetHeight && e > 0 && this._lastScroll < e && this._closeOpenOverlays(), e > this.offsetHeight * 2 ? (this._headerOnTop = !1, e > 0 && this._lastScroll < e ? ["shadow", "visible"].forEach((e) => this.internals.states.delete(e)) : [
+				"fixed",
+				"shadow",
+				"animated",
+				"visible"
+			].forEach((e) => this.internals.states.add(e))) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && [
+				"shadow",
+				"animated",
+				"fixed",
+				"visible"
+			].forEach((e) => this.internals.states.delete(e))), this._lastScroll = e <= 0 ? 0 : e);
+		}
+		_scrollShadowListener() {
+			this.toggleState("shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
+		}
+		_closeOpenOverlays() {
+			if (this.matches(":is(:state(has-visible-focus-within),[state--has-visible-focus-within])")) return;
+			let e = Array.from(this.querySelectorAll(m));
+			for (let t of e) {
+				let e = t.getAttribute("aria-controls"), n = document.getElementById(e);
+				typeof n?.close == "function" && n.close();
+			}
+		}
+		render() {
+			return r`
+      <header class="sbb-header">
+        <div class="sbb-header__wrapper">
+          <slot></slot>
+        </div>
+      </header>
+    `;
+		}
+	};
+})();
+//#endregion
+export { h as t };

package/header.js

@@ -1,16 +1,9 @@
-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";
-r.define();
-e.define();
-m.define();
-n.define();
-export {
-  p as SbbHeaderActionCommonElementMixin,
-  e as SbbHeaderButtonElement,
-  r as SbbHeaderElement,
-  m as SbbHeaderEnvironmentElement,
-  n as SbbHeaderLinkElement
-};
+import { t as e } from "./header-action-common-C2YPvOxq.js";
+import { SbbHeaderButtonElement as t } from "./header/header-button/header-button.component.js";
+import { t as n } from "./header-environment.component-KqUmsOPQ.js";
+import { SbbHeaderLinkElement as r } from "./header/header-link/header-link.component.js";
+import { t as i } from "./header.component-BssLZ6b7.js";
+import "./header.pure.js";
+i.define(), t.define(), n.define(), r.define();
+//#endregion
+export { e as SbbHeaderActionCommonElementMixin, t as SbbHeaderButtonElement, i as SbbHeaderElement, n as SbbHeaderEnvironmentElement, r as SbbHeaderLinkElement };