@sbb-esta/lyne-elements 2.6.0 → 2.7.1

package/header/header/header.js

@@ -0,0 +1,151 @@
+var F = (s) => {
+  throw TypeError(s);
+};
+var U = (s, i, a) => i.has(s) || F("Cannot " + a);
+var m = (s, i, a) => (U(s, i, "read from private field"), a ? a.call(s) : i.get(s)), _ = (s, i, a) => i.has(s) ? F("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, a), l = (s, i, a, d) => (U(s, i, "write to private field"), d ? d.call(s, a) : i.set(s, a), a);
+import { __esDecorate as p, __runInitializers as n } from "tslib";
+import { css as q, LitElement as B, isServer as R, html as M } from "lit";
+import { customElement as N, property as v, state as Z } from "lit/decorators.js";
+import { SbbFocusVisibleWithinController as Q } from "../../core/a11y.js";
+import { SbbIdReferenceController as V } from "../../core/controllers.js";
+import { forceType as j } from "../../core/decorators.js";
+import { isLean as W } from "../../core/dom.js";
+import { SbbHydrationMixin as Y } from "../../core/mixins.js";
+const G = q`*,:before,:after{box-sizing:border-box}: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: 52.5rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-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][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-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][data-fixed][data-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-color-white);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([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@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-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{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-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)}}`, J = "[aria-controls][aria-expanded='true']";
+let le = (() => {
+  var h, b, c, f, u, o;
+  let s = [N("sbb-header")], i, a = [], d, x = Y(B), w, O = [], S = [], y, E = [], z = [], k, T = [], C = [], I, L = [], A = [], H, P = [], D = [];
+  return o = class extends x {
+    constructor() {
+      super();
+      _(this, h);
+      _(this, b);
+      _(this, c);
+      _(this, f);
+      _(this, u);
+      l(this, h, n(this, O, !1)), l(this, b, (n(this, S), n(this, E, R ? null : document))), l(this, c, (n(this, z), n(this, T, !1))), l(this, f, (n(this, C), n(this, L, W() ? "s" : "m"))), l(this, u, (n(this, A), n(this, P, !0))), this._scrollElement = n(this, D), this._lastScroll = 0, this._scrollOriginIdReferenceController = new V(this, "scrollOrigin"), this.addController(new Q(this));
+    }
+    /**
+     * Whether to allow the header content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    get expanded() {
+      return m(this, h);
+    }
+    set expanded(e) {
+      l(this, h, e);
+    }
+    // TODO: Remove the document as default assignment and refactor logic to return document
+    /** The element's id or the element on which the scroll listener is attached. */
+    get scrollOrigin() {
+      return m(this, b);
+    }
+    set scrollOrigin(e) {
+      l(this, b, e);
+    }
+    /** Whether the header should hide and show on scroll. */
+    get hideOnScroll() {
+      return m(this, c);
+    }
+    set hideOnScroll(e) {
+      l(this, c, e);
+    }
+    /**
+     * Size of the header, either m or s.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return m(this, f);
+    }
+    set size(e) {
+      l(this, f, e);
+    }
+    get _headerOnTop() {
+      return m(this, u);
+    }
+    set _headerOnTop(e) {
+      l(this, u, e);
+    }
+    /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
+    connectedCallback() {
+      super.connectedCallback(), this._updateScrollListener();
+    }
+    /** Removes the scroll listener, if previously attached. */
+    disconnectedCallback() {
+      var e;
+      super.disconnectedCallback(), this._scrollElement = null, (e = this._scrollEventsController) == null || e.abort();
+    }
+    requestUpdate(e, t, r) {
+      super.requestUpdate(e, t, r), !R && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
+    }
+    _updateScrollListener() {
+      var r;
+      const e = this.scrollOrigin instanceof HTMLElement ? this.scrollOrigin : this._scrollOriginIdReferenceController.find() ?? document;
+      if (e === this._scrollElement || ((r = this._scrollEventsController) == null || r.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) {
+      var t;
+      return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : ((t = this._scrollElement) == null ? void 0 : t[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.toggleAttribute("data-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 ? ["data-shadow", "data-visible"].forEach((t) => this.removeAttribute(t)) : ["data-fixed", "data-shadow", "data-animated", "data-visible"].forEach((t) => this.toggleAttribute(t, !0))) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach((t) => this.removeAttribute(t))), this._lastScroll = e <= 0 ? 0 : e);
+    }
+    /** Apply the shadow if the element/document has been scrolled down. */
+    _scrollShadowListener() {
+      this.toggleAttribute("data-shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
+    }
+    _closeOpenOverlays() {
+      if (this.hasAttribute("data-has-visible-focus-within"))
+        return;
+      const e = Array.from(this.querySelectorAll(J));
+      for (const t of e) {
+        const r = t.getAttribute("aria-controls"), g = document.getElementById(r);
+        typeof (g == null ? void 0 : g.close) == "function" && g.close();
+      }
+    }
+    render() {
+      return M`
+      <header class="sbb-header">
+        <div class="sbb-header__wrapper">
+          <slot></slot>
+        </div>
+      </header>
+    `;
+    }
+  }, h = new WeakMap(), b = new WeakMap(), c = new WeakMap(), f = new WeakMap(), u = new WeakMap(), d = o, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    w = [j(), v({ reflect: !0, type: Boolean })], y = [v({ attribute: "scroll-origin" })], k = [j(), v({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })], I = [v({ reflect: !0 })], H = [Z()], p(o, null, w, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, r) => {
+      t.expanded = r;
+    } }, metadata: e }, O, S), p(o, null, y, { kind: "accessor", name: "scrollOrigin", static: !1, private: !1, access: { has: (t) => "scrollOrigin" in t, get: (t) => t.scrollOrigin, set: (t, r) => {
+      t.scrollOrigin = r;
+    } }, metadata: e }, E, z), p(o, null, k, { kind: "accessor", name: "hideOnScroll", static: !1, private: !1, access: { has: (t) => "hideOnScroll" in t, get: (t) => t.hideOnScroll, set: (t, r) => {
+      t.hideOnScroll = r;
+    } }, metadata: e }, T, C), p(o, null, I, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
+      t.size = r;
+    } }, metadata: e }, L, A), p(o, null, H, { kind: "accessor", name: "_headerOnTop", static: !1, private: !1, access: { has: (t) => "_headerOnTop" in t, get: (t) => t._headerOnTop, set: (t, r) => {
+      t._headerOnTop = r;
+    } }, metadata: e }, P, D), p(null, i = { value: d }, s, { kind: "class", name: d.name, metadata: e }, null, a), d = i.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.styles = G, n(d, a), d;
+})();
+export {
+  le as SbbHeaderElement
+};

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

@@ -0,0 +1,16 @@
+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;
+})();
+export {
+  p as SbbHeaderButtonElement
+};

package/header/header-button.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './header-button/header-button.js';
 //# sourceMappingURL=header-button.d.ts.map

package/header/header-button.d.ts.map

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

package/header/header-button.js

@@ -1,16 +1,4 @@
-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 { SbbHeaderButtonElement as o } from "./header-button/header-button.js";
 export {
-  p as SbbHeaderButtonElement
+  o as SbbHeaderButtonElement
 };

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

@@ -0,0 +1,16 @@
+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;
+})();
+export {
+  p as SbbHeaderLinkElement
+};

package/header/header-link.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './header-link/header-link.js';
 //# sourceMappingURL=header-link.d.ts.map

package/header/header-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-link.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-link.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"header-link.d.ts","sourceRoot":"","sources":["../../../src/elements/header/header-link.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8BAA8B,CAAC"}

package/header/header-link.js

@@ -1,16 +1,4 @@
-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 { SbbHeaderLinkElement as b } from "./header-link/header-link.js";
 export {
-  p as SbbHeaderLinkElement
+  b as SbbHeaderLinkElement
 };

package/header/header.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './header/header.js';
 //# sourceMappingURL=header.d.ts.map

package/header/header.d.ts.map

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

package/header/header.js

@@ -1,151 +1,4 @@
-var F = (s) => {
-  throw TypeError(s);
-};
-var U = (s, r, a) => r.has(s) || F("Cannot " + a);
-var m = (s, r, a) => (U(s, r, "read from private field"), a ? a.call(s) : r.get(s)), _ = (s, r, a) => r.has(s) ? F("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, a), l = (s, r, a, d) => (U(s, r, "write to private field"), d ? d.call(s, a) : r.set(s, a), a);
-import { __esDecorate as p, __runInitializers as n } from "tslib";
-import { css as q, LitElement as B, isServer as R, html as M } from "lit";
-import { customElement as N, property as v, state as Z } from "lit/decorators.js";
-import { SbbFocusVisibleWithinController as Q } from "../core/a11y.js";
-import { SbbIdReferenceController as V } from "../core/controllers.js";
-import { forceType as j } from "../core/decorators.js";
-import { isLean as W } from "../core/dom.js";
-import { SbbHydrationMixin as Y } from "../core/mixins.js";
-const G = q`*,:before,:after{box-sizing:border-box}: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: 52.5rem){:host{--sbb-logo-height: 1.25rem;--sbb-signet-height: 1.25rem}}:host([hide-on-scroll]){--sbb-header-position: absolute}:host([hide-on-scroll][data-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][data-fixed][data-animated]){--sbb-header-transition-timing: cubic-bezier(.4, 0, 1, 1)}:host([hide-on-scroll][data-fixed][data-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][data-fixed][data-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-color-white);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([data-shadow],[data-has-visible-focus-within][data-fixed])) .sbb-header{box-shadow:var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color),var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color)}@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-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-header__wrapper{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-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:not([data-focus-origin=mouse],[data-focus-origin=touch])):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) 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)}}`, J = "[aria-controls][aria-expanded='true']";
-let le = (() => {
-  var h, c, b, f, u, o;
-  let s = [N("sbb-header")], r, a = [], d, x = Y(B), w, O = [], S = [], y, E = [], z = [], k, T = [], C = [], I, L = [], A = [], H, P = [], D = [];
-  return o = class extends x {
-    constructor() {
-      super();
-      _(this, h);
-      _(this, c);
-      _(this, b);
-      _(this, f);
-      _(this, u);
-      l(this, h, n(this, O, !1)), l(this, c, (n(this, S), n(this, E, R ? null : document))), l(this, b, (n(this, z), n(this, T, !1))), l(this, f, (n(this, C), n(this, L, W() ? "s" : "m"))), l(this, u, (n(this, A), n(this, P, !0))), this._scrollElement = n(this, D), this._lastScroll = 0, this._scrollOriginIdReferenceController = new V(this, "scrollOrigin"), this.addController(new Q(this));
-    }
-    /**
-     * Whether to allow the header content to stretch to full width.
-     * By default, the content has the appropriate page size.
-     */
-    get expanded() {
-      return m(this, h);
-    }
-    set expanded(e) {
-      l(this, h, e);
-    }
-    // TODO: Remove the document as default assignment and refactor logic to return document
-    /** The element's id or the element on which the scroll listener is attached. */
-    get scrollOrigin() {
-      return m(this, c);
-    }
-    set scrollOrigin(e) {
-      l(this, c, e);
-    }
-    /** Whether the header should hide and show on scroll. */
-    get hideOnScroll() {
-      return m(this, b);
-    }
-    set hideOnScroll(e) {
-      l(this, b, e);
-    }
-    /**
-     * Size of the header, either m or s.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return m(this, f);
-    }
-    set size(e) {
-      l(this, f, e);
-    }
-    get _headerOnTop() {
-      return m(this, u);
-    }
-    set _headerOnTop(e) {
-      l(this, u, e);
-    }
-    /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
-    connectedCallback() {
-      super.connectedCallback(), this._updateScrollListener();
-    }
-    /** Removes the scroll listener, if previously attached. */
-    disconnectedCallback() {
-      var e;
-      super.disconnectedCallback(), this._scrollElement = null, (e = this._scrollEventsController) == null || e.abort();
-    }
-    requestUpdate(e, t, i) {
-      super.requestUpdate(e, t, i), !R && (!e || e === "scrollOrigin") && this.hasUpdated && this._updateScrollListener();
-    }
-    _updateScrollListener() {
-      var i;
-      const e = this.scrollOrigin instanceof HTMLElement ? this.scrollOrigin : this._scrollOriginIdReferenceController.find() ?? document;
-      if (e === this._scrollElement || ((i = this._scrollEventsController) == null || i.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) {
-      var t;
-      return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : ((t = this._scrollElement) == null ? void 0 : t[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.toggleAttribute("data-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 ? ["data-shadow", "data-visible"].forEach((t) => this.removeAttribute(t)) : ["data-fixed", "data-shadow", "data-animated", "data-visible"].forEach((t) => this.toggleAttribute(t, !0))) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach((t) => this.removeAttribute(t))), this._lastScroll = e <= 0 ? 0 : e);
-    }
-    /** Apply the shadow if the element/document has been scrolled down. */
-    _scrollShadowListener() {
-      this.toggleAttribute("data-shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
-    }
-    _closeOpenOverlays() {
-      if (this.hasAttribute("data-has-visible-focus-within"))
-        return;
-      const e = Array.from(this.querySelectorAll(J));
-      for (const t of e) {
-        const i = t.getAttribute("aria-controls"), g = document.getElementById(i);
-        typeof (g == null ? void 0 : g.close) == "function" && g.close();
-      }
-    }
-    render() {
-      return M`
-      <header class="sbb-header">
-        <div class="sbb-header__wrapper">
-          <slot></slot>
-        </div>
-      </header>
-    `;
-    }
-  }, h = new WeakMap(), c = new WeakMap(), b = new WeakMap(), f = new WeakMap(), u = new WeakMap(), d = o, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    w = [j(), v({ reflect: !0, type: Boolean })], y = [v({ attribute: "scroll-origin" })], k = [j(), v({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })], I = [v({ reflect: !0 })], H = [Z()], p(o, null, w, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (t) => "expanded" in t, get: (t) => t.expanded, set: (t, i) => {
-      t.expanded = i;
-    } }, metadata: e }, O, S), p(o, null, y, { kind: "accessor", name: "scrollOrigin", static: !1, private: !1, access: { has: (t) => "scrollOrigin" in t, get: (t) => t.scrollOrigin, set: (t, i) => {
-      t.scrollOrigin = i;
-    } }, metadata: e }, E, z), p(o, null, k, { kind: "accessor", name: "hideOnScroll", static: !1, private: !1, access: { has: (t) => "hideOnScroll" in t, get: (t) => t.hideOnScroll, set: (t, i) => {
-      t.hideOnScroll = i;
-    } }, metadata: e }, T, C), p(o, null, I, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
-      t.size = i;
-    } }, metadata: e }, L, A), p(o, null, H, { kind: "accessor", name: "_headerOnTop", static: !1, private: !1, access: { has: (t) => "_headerOnTop" in t, get: (t) => t._headerOnTop, set: (t, i) => {
-      t._headerOnTop = i;
-    } }, metadata: e }, P, D), p(null, r = { value: d }, s, { kind: "class", name: d.name, metadata: e }, null, a), d = r.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.styles = G, n(d, a), d;
-})();
+import { SbbHeaderElement as b } from "./header/header.js";
 export {
-  le as SbbHeaderElement
+  b as SbbHeaderElement
 };

package/header.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './header/header.js';
 export * from './header/header-button.js';
 export * from './header/header-link.js';

package/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/elements/header.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/elements/header.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC"}

package/header.js

@@ -1,4 +1,10 @@
-export * from "./header/header.js";
-export * from "./header/header-button.js";
-export * from "./header/header-link.js";
-export * from "./header/common.js";
+import { SbbHeaderElement as r } from "./header/header/header.js";
+import { SbbHeaderButtonElement as m } from "./header/header-button/header-button.js";
+import { SbbHeaderLinkElement as b } from "./header/header-link/header-link.js";
+import { SbbHeaderActionCommonElementMixin as a } from "./header/common/header-action-common.js";
+export {
+  a as SbbHeaderActionCommonElementMixin,
+  m as SbbHeaderButtonElement,
+  r as SbbHeaderElement,
+  b as SbbHeaderLinkElement
+};

package/icon/icon-base.js

@@ -0,0 +1,109 @@
+var A = (s) => {
+  throw TypeError(s);
+};
+var $ = (s, a, i) => a.has(s) || A("Cannot " + i);
+var h = (s, a, i) => ($(s, a, "read from private field"), i ? i.call(s) : a.get(s)), u = (s, a, i) => a.has(s) ? A("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), p = (s, a, i, n) => ($(s, a, "write to private field"), n ? n.call(s, i) : a.set(s, i), i);
+import { __esDecorate as d, __runInitializers as l } from "tslib";
+import { css as j, LitElement as B, html as D } from "lit";
+import { state as E, property as L } from "lit/decorators.js";
+import { unsafeHTML as O } from "lit/directives/unsafe-html.js";
+import { until as U } from "lit/directives/until.js";
+import { hostAttributes as C, forceType as H } from "../core/decorators.js";
+import { getSvgContent as M } from "./icon-request.js";
+const P = j`*,:before,:after{box-sizing:border-box}:host{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent}:host([data-empty]){--sbb-icon-default-dimension: 0}:host([data-empty][data-namespace=default][name$=-small]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-small)}:host([data-empty][data-namespace=default][name$=-medium]){--sbb-icon-default-dimension: var(--sbb-size-icon-ui-medium)}:host([data-empty][data-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}`, _ = "default";
+let X = (() => {
+  var c, m, g, o;
+  let s = [C({
+    "data-namespace": _,
+    "data-empty": ""
+  })], a, i = [], n, v = B, b, f = [], y = [], I, z = [], S = [], k, w = [], N = [];
+  return o = class extends v {
+    constructor() {
+      super(...arguments);
+      u(this, c, l(this, f, _));
+      u(this, m, (l(this, y), l(this, z, null)));
+      u(this, g, (l(this, S), l(this, w, !1)));
+      l(this, N);
+    }
+    get _svgNamespace() {
+      return h(this, c);
+    }
+    set _svgNamespace(e) {
+      p(this, c, e);
+    }
+    /**
+     * The icon svg content rendered on the page: <svg>...</svg>.
+     */
+    get _svgIcon() {
+      return h(this, m);
+    }
+    set _svgIcon(e) {
+      p(this, m, e);
+    }
+    /**
+     * When set to `true`, SVG content that is HTTP fetched will not be checked
+     * if the response SVG content has any `<script>` elements, or any attributes
+     * that start with `on`, such as `onclick`.
+     * @default false
+     */
+    get noSanitize() {
+      return h(this, g);
+    }
+    set noSanitize(e) {
+      p(this, g, e);
+    }
+    async loadSvgIcon(e) {
+      if (!e)
+        return;
+      const [t, r] = this._splitIconName(e);
+      this._svgNamespace = t, this.setAttribute("data-namespace", this._svgNamespace);
+      const x = this.fetchSvgIcon(this._svgNamespace, r);
+      this._svgIcon = x.then((T) => O(T));
+      try {
+        this.toggleAttribute("data-empty", !await x);
+      } catch {
+        this.toggleAttribute("data-empty", !0);
+      }
+    }
+    async fetchSvgIcon(e, t) {
+      return await M(e, t, !this.noSanitize);
+    }
+    _splitIconName(e) {
+      if (!e)
+        return ["", ""];
+      const t = e.split(":");
+      switch (t.length) {
+        case 1:
+          return [_, t[0]];
+        case 2:
+          return t;
+        default:
+          throw Error(`Invalid icon name: "${e}"`);
+      }
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.setAttribute("role", this.getAttribute("role") ?? "img");
+    }
+    render() {
+      return D`<span class="sbb-icon-inner"
+      >${U(
+        this._svgIcon,
+        // To reserve space, we need an empty svg to apply dimension to.
+        D`<svg width="0" height="0"></svg>`
+      )}</span
+    >`;
+    }
+  }, c = new WeakMap(), m = new WeakMap(), g = new WeakMap(), n = o, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    b = [E()], I = [E()], k = [H(), L({ attribute: "no-sanitize", type: Boolean })], d(o, null, b, { kind: "accessor", name: "_svgNamespace", static: !1, private: !1, access: { has: (t) => "_svgNamespace" in t, get: (t) => t._svgNamespace, set: (t, r) => {
+      t._svgNamespace = r;
+    } }, metadata: e }, f, y), d(o, null, I, { kind: "accessor", name: "_svgIcon", static: !1, private: !1, access: { has: (t) => "_svgIcon" in t, get: (t) => t._svgIcon, set: (t, r) => {
+      t._svgIcon = r;
+    } }, metadata: e }, z, S), d(o, null, k, { kind: "accessor", name: "noSanitize", static: !1, private: !1, access: { has: (t) => "noSanitize" in t, get: (t) => t.noSanitize, set: (t, r) => {
+      t.noSanitize = r;
+    } }, metadata: e }, w, N), d(null, a = { value: n }, s, { kind: "class", name: n.name, metadata: e }, null, i), n = a.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.styles = P, l(n, i), n;
+})();
+export {
+  X as SbbIconBase
+};

package/icon/icon-name-mixin.js

@@ -0,0 +1,47 @@
+var l = (e) => {
+  throw TypeError(e);
+};
+var u = (e, t, a) => t.has(e) || l("Cannot " + a);
+var b = (e, t, a) => (u(e, t, "read from private field"), a ? a.call(e) : t.get(e)), p = (e, t, a) => t.has(e) ? l("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), N = (e, t, a, i) => (u(e, t, "write to private field"), i ? i.call(e, a) : t.set(e, a), a);
+import { __esDecorate as y, __runInitializers as f } from "tslib";
+import { nothing as _, html as d } from "lit";
+import { property as S } from "lit/decorators.js";
+import { forceType as g, omitEmptyConverter as v } from "../core/decorators.js";
+import "./icon.js";
+const k = (e) => (() => {
+  var n, o;
+  let a = e, i, s = [], m = [];
+  return o = class extends a {
+    constructor() {
+      super(...arguments);
+      p(this, n, f(this, s, ""));
+      f(this, m);
+    }
+    /**
+     * The icon name we want to use, choose from the small icon variants
+     * from the ui-icons category from here
+     * https://icons.app.sbb.ch.
+     */
+    get iconName() {
+      return b(this, n);
+    }
+    set iconName(r) {
+      N(this, n, r);
+    }
+    renderIconSlot(r) {
+      return d`
+        <slot name="icon">
+          ${this.iconName ? d`<sbb-icon name=${this.iconName} class=${r || _}></sbb-icon>` : _}
+        </slot>
+      `;
+    }
+  }, n = new WeakMap(), (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    i = [g(), S({ attribute: "icon-name", reflect: !0, converter: v })], y(o, null, i, { kind: "accessor", name: "iconName", static: !1, private: !1, access: { has: (c) => "iconName" in c, get: (c) => c.iconName, set: (c, h) => {
+      c.iconName = h;
+    } }, metadata: r }, s, m), r && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), o;
+})();
+export {
+  k as SbbIconNameMixin
+};