@sbb-esta/lyne-elements 0.52.0 → 0.52.1

package/header/header.js

@@ -1,59 +1,59 @@
 import { css as h, LitElement as c, isServer as b, html as f } from "lit";
-import { property as d, state as u, customElement as v } from "lit/decorators.js";
+import { property as l, state as v, customElement as u } from "lit/decorators.js";
 import { SbbFocusVisibleWithinController as m } from "../core/a11y.js";
 import { findReferencedElement as p } from "../core/dom.js";
 import { SbbHydrationMixin as g } from "../core/mixins.js";
 import "../logo.js";
-const _ = h`*,:before,:after{box-sizing:border-box}:host{--sbb-logo-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0;display:block;height:var(--sbb-header-height)}@media (min-width: 52.5rem){:host{--sbb-logo-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)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::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(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=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)}}`;
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, t, s, r) => {
-  for (var o = r > 1 ? void 0 : r ? x(t, s) : t, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (o = (r ? n(t, s, o) : n(o)) || o);
-  return r && o && w(t, s, o), o;
+const w = h`*,:before,:after{box-sizing:border-box}:host{--sbb-logo-height: 1rem;--sbb-header-position: fixed;--sbb-header-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-header-inset-inline-end: 0;display:block;height:var(--sbb-header-height)}@media (min-width: 52.5rem){:host{--sbb-logo-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)}.sbb-header__logo{flex:0 0 auto;margin-inline-start:auto;padding-inline-start:var(--sbb-spacing-responsive-s)}::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(a[slot=logo]){display:block;padding-block:var(--sbb-spacing-fixed-3x);position:relative;outline:none!important}::slotted(a[slot=logo]):before{content:"";display:block;position:absolute;inset:var(--sbb-spacing-fixed-3x) 0}::slotted(a[slot=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)}}`;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, t, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? y(t, s) : t, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (i = (a ? d(t, s, i) : d(i)) || i);
+  return a && i && x(t, s, i), i;
 };
-const y = "[aria-controls][aria-expanded='true']";
-let i = class extends g(c) {
+const _ = "[aria-controls][aria-expanded='true']";
+let o = class extends g(c) {
   constructor() {
-    super(...arguments), this.expanded = !1, this._scrollOrigin = b ? null : document, this.hideOnScroll = !1, this._headerOnTop = !0, this._lastScroll = 0;
+    super(...arguments), this.expanded = !1, this.b = b ? null : document, this.hideOnScroll = !1, this.f = !0, this.d = 0;
   }
   set scrollOrigin(e) {
-    const t = this._scrollOrigin;
-    this._scrollOrigin = e, this._updateScrollOrigin(this._scrollOrigin, t);
+    const t = this.b;
+    this.b = e, this.i(this.b, t);
   }
   get scrollOrigin() {
-    return this._scrollOrigin;
+    return this.b;
   }
-  _updateScrollOrigin(e, t) {
+  i(e, t) {
     if (e !== t) {
-      this._setListenerOnScrollElement(e);
-      const s = this._getCurrentScrollProperty("scrollTop");
-      this._lastScroll = s <= 0 ? 0 : s;
+      this.h(e);
+      const s = this.e("scrollTop");
+      this.d = s <= 0 ? 0 : s;
     }
   }
   /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
   connectedCallback() {
-    super.connectedCallback(), this._setListenerOnScrollElement(this.scrollOrigin), new m(this);
+    super.connectedCallback(), this.h(this.scrollOrigin), new m(this);
   }
   /** Removes the scroll listener, if previously attached. */
   disconnectedCallback() {
     var e;
-    super.disconnectedCallback(), (e = this._scrollEventsController) == null || e.abort();
+    super.disconnectedCallback(), (e = this.c) == null || e.abort();
   }
   /** Sets the value of `_scrollElement` and `_scrollFunction` and possibly adds the function on the correct element. */
-  _setListenerOnScrollElement(e) {
+  h(e) {
     var t, s;
-    (t = this._scrollEventsController) == null || t.abort(), this._scrollEventsController = new AbortController(), this._scrollElement = p(e) || (b ? null : document), this._scrollFunction = this._getScrollFunction.bind(this), (s = this._scrollElement) == null || s.addEventListener("scroll", this._scrollFunction, {
+    (t = this.c) == null || t.abort(), this.c = new AbortController(), this.a = p(e) || (b ? null : document), this.g = this.j.bind(this), (s = this.a) == null || s.addEventListener("scroll", this.g, {
       passive: !0,
-      signal: this._scrollEventsController.signal
+      signal: this.c.signal
     });
   }
   /** Returns the correct function to attach on scroll. */
-  _getScrollFunction() {
-    return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
+  j() {
+    return this.hideOnScroll ? this.k() : this.l();
   }
   /** Returns the requested property of the scrollContext. */
-  _getCurrentScrollProperty(e) {
+  e(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;
+    return this.a instanceof Document ? this.a.documentElement[e] || this.a.body[e] : ((t = this.a) == null ? void 0 : t[e]) || 0;
   }
   /**
    * Sets the correct value for `scrollTop`, then:
@@ -61,27 +61,27 @@ let i = class extends g(c) {
    * - 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(
+  k() {
+    const e = this.e("scrollTop");
+    this.e("scrollHeight") - window.innerHeight - e <= 0 || (this.toggleAttribute("data-shadow", e !== 0), e > this.offsetHeight && e > 0 && this.d < e && this.m(), e > this.offsetHeight * 2 ? (this.f = !1, e > 0 && this.d < 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(
+    )) : (e === 0 && (this.f = !0), this.f && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach(
       (t) => this.removeAttribute(t)
-    )), this._lastScroll = e <= 0 ? 0 : e);
+    )), this.d = e <= 0 ? 0 : e);
   }
   /** Apply the shadow if the element/document has been scrolled down. */
-  _scrollShadowListener() {
-    this.toggleAttribute("data-shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
+  l() {
+    this.toggleAttribute("data-shadow", this.e("scrollTop") !== 0);
   }
-  _closeOpenOverlays() {
+  m() {
     if (this.hasAttribute("data-has-visible-focus-within"))
       return;
     const e = Array.from(
-      this.querySelectorAll(y)
+      this.querySelectorAll(_)
     );
     for (const t of e) {
-      const s = t.getAttribute("aria-controls"), r = document.getElementById(s);
-      typeof (r == null ? void 0 : r.close) == "function" && r.close();
+      const s = t.getAttribute("aria-controls"), a = document.getElementById(s);
+      typeof (a == null ? void 0 : a.close) == "function" && a.close();
     }
   }
   render() {
@@ -99,22 +99,22 @@ let i = class extends g(c) {
     `;
   }
 };
-i.styles = _;
-a([
-  d({ reflect: !0, type: Boolean })
-], i.prototype, "expanded", 2);
-a([
-  d({ attribute: "scroll-origin" })
-], i.prototype, "scrollOrigin", 1);
-a([
-  d({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })
-], i.prototype, "hideOnScroll", 2);
-a([
-  u()
-], i.prototype, "_headerOnTop", 2);
-i = a([
-  v("sbb-header")
-], i);
+o.styles = w;
+r([
+  l({ reflect: !0, type: Boolean })
+], o.prototype, "expanded", 2);
+r([
+  l({ attribute: "scroll-origin" })
+], o.prototype, "scrollOrigin", 1);
+r([
+  l({ attribute: "hide-on-scroll", reflect: !0, type: Boolean })
+], o.prototype, "hideOnScroll", 2);
+r([
+  v()
+], o.prototype, "f", 2);
+o = r([
+  u("sbb-header")
+], o);
 export {
-  i as SbbHeaderElement
+  o as SbbHeaderElement
 };

package/icon.js

@@ -1,174 +1,174 @@
-import { state as g, property as h, customElement as y } from "lit/decorators.js";
-import { css as N, LitElement as I, html as u, nothing as b } from "lit";
-import { unsafeHTML as $ } from "lit/directives/unsafe-html.js";
+import { state as g, property as f, customElement as $ } from "lit/decorators.js";
+import { css as S, LitElement as _, html as d, nothing as p } from "lit";
+import { unsafeHTML as I } from "lit/directives/unsafe-html.js";
 import { until as A } from "lit/directives/until.js";
-import { hostAttributes as S } from "./core/decorators.js";
-import { readConfig as L } from "./core/config.js";
-const E = (e) => typeof e == "string", _ = (e) => {
-  if (e.nodeType === 1) {
-    if (e.nodeName.toLowerCase() === "script")
+import { hostAttributes as N } from "./core/decorators.js";
+import { readConfig as E } from "./core/config.js";
+const L = (t) => typeof t == "string", w = (t) => {
+  if (t.nodeType === 1) {
+    if (t.nodeName.toLowerCase() === "script")
       return !1;
-    for (let t = 0; t < e.attributes.length; t++) {
-      const o = e.attributes[t].name;
-      if (E(o) && o.toLowerCase().indexOf("on") === 0)
+    for (let e = 0; e < t.attributes.length; e++) {
+      const o = t.attributes[e].name;
+      if (L(o) && o.toLowerCase().indexOf("on") === 0)
         return !1;
     }
-    for (let t = 0; t < e.childNodes.length; t++)
-      if (!_(e.childNodes[t]))
+    for (let e = 0; e < t.childNodes.length; e++)
+      if (!w(t.childNodes[e]))
         return !1;
   }
   return !0;
-}, P = (e, t = !0, o = !1) => {
-  const r = document.createElement("div");
-  r.innerHTML = e;
-  for (let i = r.childNodes.length - 1; i >= 0; i--)
-    r.childNodes[i].nodeName.toLowerCase() !== "svg" && r.removeChild(r.childNodes[i]);
-  const s = r.firstElementChild;
-  return s && s.nodeName.toLowerCase() === "svg" && (o && !s.classList.contains("color-immutable") && s.classList.add("color-immutable"), t === !1 || _(s)) ? r.innerHTML : "";
-}, m = "https://icons.app.sbb.ch/", C = (/* @__PURE__ */ new Map()).set("default", `${m}icons/`).set("picto", `${m}picto/`), v = /* @__PURE__ */ new Map(), O = (e, t, o) => {
-  var p;
-  const r = L().icon ?? {}, s = ((p = r.namespaces) == null ? void 0 : p.get(e)) ?? C.get(e);
-  if (s === void 0)
+}, P = (t, e = !0, o = !1) => {
+  const s = document.createElement("div");
+  s.innerHTML = t;
+  for (let i = s.childNodes.length - 1; i >= 0; i--)
+    s.childNodes[i].nodeName.toLowerCase() !== "svg" && s.removeChild(s.childNodes[i]);
+  const r = s.firstElementChild;
+  return r && r.nodeName.toLowerCase() === "svg" && (o && !r.classList.contains("color-immutable") && r.classList.add("color-immutable"), e === !1 || w(r)) ? s.innerHTML : "";
+}, m = "https://icons.app.sbb.ch/", C = (/* @__PURE__ */ new Map()).set("default", `${m}icons/`).set("picto", `${m}picto/`), v = /* @__PURE__ */ new Map(), O = (t, e, o) => {
+  var b;
+  const s = E().icon ?? {}, r = ((b = s.namespaces) == null ? void 0 : b.get(t)) ?? C.get(t);
+  if (r === void 0)
     throw Error(
-      `Unable to find the namespace "${e}". Please register your custom namespace.`
+      `Unable to find the namespace "${t}". Please register your custom namespace.`
     );
-  const i = `${s}${t}.svg`;
-  let a = v.get(i);
-  if (!a)
+  const i = `${r}${e}.svg`;
+  let n = v.get(i);
+  if (!n)
     if (typeof fetch < "u" && typeof document < "u")
-      a = (r.interceptor ?? ((l) => l.request()))({
-        namespace: e,
-        name: t,
+      n = (s.interceptor ?? ((l) => l.request()))({
+        namespace: t,
+        name: e,
         url: i,
         request: () => fetch(i).then((l) => {
           if (l.ok)
             return l.text().then((c) => (c && (c = P(c, o)), c));
-          throw new Error("Failed to load icon " + e + ":" + t);
+          throw new Error("Failed to load icon " + t + ":" + e);
         }).catch((l) => {
           throw Error(l);
         })
-      }), v.set(i, a);
+      }), v.set(i, n);
     else
       return Promise.resolve("");
-  return a;
-}, x = N`*,: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}`;
-var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, d = (e, t, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? M(t, o) : t, i = e.length - 1, a; i >= 0; i--)
-    (a = e[i]) && (s = (r ? a(t, o, s) : a(s)) || s);
-  return r && s && z(t, o, s), s;
+  return n;
+}, x = S`*,: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}`;
+var z = Object.defineProperty, M = Object.getOwnPropertyDescriptor, h = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? M(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
+  return s && r && z(e, o, r), r;
 };
-let n = class extends I {
+let a = class extends _ {
   constructor() {
-    super(...arguments), this._svgNamespace = n._defaultNamespace, this.noSanitize = !1;
+    super(...arguments), this.b = a.a, this.noSanitize = !1;
   }
-  async loadSvgIcon(e) {
-    if (!e)
+  async loadSvgIcon(t) {
+    if (!t)
       return;
-    const [t, o] = this._splitIconName(e);
-    this._svgNamespace = t, this.setAttribute("data-namespace", this._svgNamespace);
-    const r = this.fetchSvgIcon(this._svgNamespace, o);
-    this._svgIcon = r.then((s) => $(s));
+    const [e, o] = this.d(t);
+    this.b = e, this.setAttribute("data-namespace", this.b);
+    const s = this.fetchSvgIcon(this.b, o);
+    this.c = s.then((r) => I(r));
     try {
-      this.toggleAttribute("data-empty", !await r);
+      this.toggleAttribute("data-empty", !await s);
     } catch {
       this.toggleAttribute("data-empty", !0);
     }
   }
-  async fetchSvgIcon(e, t) {
-    return await O(e, t, !this.noSanitize);
+  async fetchSvgIcon(t, e) {
+    return await O(t, e, !this.noSanitize);
   }
-  _splitIconName(e) {
-    if (!e)
+  d(t) {
+    if (!t)
       return ["", ""];
-    const t = e.split(":");
-    switch (t.length) {
+    const e = t.split(":");
+    switch (e.length) {
       case 1:
-        return [n._defaultNamespace, t[0]];
+        return [a.a, e[0]];
       case 2:
-        return t;
+        return e;
       default:
-        throw Error(`Invalid icon name: "${e}"`);
+        throw Error(`Invalid icon name: "${t}"`);
     }
   }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.setAttribute("role", this.getAttribute("role") ?? "img");
+  firstUpdated(t) {
+    super.firstUpdated(t), this.setAttribute("role", this.getAttribute("role") ?? "img");
   }
   render() {
-    return u`<span class="sbb-icon-inner"
+    return d`<span class="sbb-icon-inner"
       >${A(
-      this._svgIcon,
+      this.c,
       // To reserve space, we need an empty svg to apply dimension to.
-      u`<svg width="0" height="0"></svg>`
+      d`<svg width="0" height="0"></svg>`
     )}</span
     >`;
   }
 };
-n.styles = x;
-n._defaultNamespace = "default";
-d([
+a.styles = x;
+a.a = "default";
+h([
   g()
-], n.prototype, "_svgNamespace", 2);
-d([
+], a.prototype, "b", 2);
+h([
   g()
-], n.prototype, "_svgIcon", 2);
-d([
-  h({ attribute: "no-sanitize", type: Boolean })
-], n.prototype, "noSanitize", 2);
-n = d([
-  S({
-    "data-namespace": n._defaultNamespace,
+], a.prototype, "c", 2);
+h([
+  f({ attribute: "no-sanitize", type: Boolean })
+], a.prototype, "noSanitize", 2);
+a = h([
+  N({
+    "data-namespace": a.a,
     "data-empty": ""
   })
-], n);
-var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, w = (e, t, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? j(t, o) : t, i = e.length - 1, a; i >= 0; i--)
-    (a = e[i]) && (s = (r ? a(t, o, s) : a(s)) || s);
-  return r && s && U(t, o, s), s;
+], a);
+var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, y = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? j(e, o) : e, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = (s ? n(e, o, r) : n(r)) || r);
+  return s && r && U(e, o, r), r;
 };
-let f = class extends n {
+let u = class extends a {
   constructor() {
-    super(...arguments), this._defaultAriaLabel = "";
+    super(...arguments), this.a = "";
   }
-  async fetchSvgIcon(e, t) {
-    return this.getAttribute("aria-label") === this._defaultAriaLabel && this.removeAttribute("aria-label"), this._defaultAriaLabel = `Icon ${t.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && t && this.setAttribute("aria-label", this._defaultAriaLabel), super.fetchSvgIcon(e, t);
+  async fetchSvgIcon(t, e) {
+    return this.getAttribute("aria-label") === this.a && this.removeAttribute("aria-label"), this.a = `Icon ${e.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && e && this.setAttribute("aria-label", this.a), super.fetchSvgIcon(t, e);
   }
-  willUpdate(e) {
-    super.willUpdate(e), e.has("name") && this.loadSvgIcon(this.name);
+  willUpdate(t) {
+    super.willUpdate(t), t.has("name") && this.loadSvgIcon(this.name);
   }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
+  firstUpdated(t) {
+    super.firstUpdated(t), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
   }
 };
-w([
-  h({ reflect: !0 })
-], f.prototype, "name", 2);
-f = w([
-  y("sbb-icon")
-], f);
-var T = Object.defineProperty, q = (e, t, o, r) => {
-  for (var s = void 0, i = e.length - 1, a; i >= 0; i--)
-    (a = e[i]) && (s = a(t, o, s) || s);
-  return s && T(t, o, s), s;
+y([
+  f({ reflect: !0 })
+], u.prototype, "name", 2);
+u = y([
+  $("sbb-icon")
+], u);
+var T = Object.defineProperty, q = (t, e, o, s) => {
+  for (var r = void 0, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (r = n(e, o, r) || r);
+  return r && T(e, o, r), r;
 };
-const J = (e) => {
-  class t extends e {
-    renderIconSlot(r) {
-      return u`
+const J = (t) => {
+  class e extends t {
+    renderIconSlot(s) {
+      return d`
         <slot name="icon">
-          ${this.iconName ? u`<sbb-icon name=${this.iconName} class=${r || b}></sbb-icon>` : b}
+          ${this.iconName ? d`<sbb-icon name=${this.iconName} class=${s || p}></sbb-icon>` : p}
         </slot>
       `;
     }
   }
   return q([
-    h({ attribute: "icon-name", reflect: !0 })
-  ], t.prototype, "iconName"), t;
+    f({ attribute: "icon-name", reflect: !0 })
+  ], e.prototype, "iconName"), e;
 };
 export {
-  n as SbbIconBase,
-  f as SbbIconElement,
+  a as SbbIconBase,
+  u as SbbIconElement,
   J as SbbIconNameMixin,
   O as getSvgContent,
-  _ as isValid,
+  w as isValid,
   P as validateContent
 };

package/image/image.d.ts

@@ -21,6 +21,8 @@ export interface InterfaceImageAttributesSizesConfigMediaQuery {
 /**
  * It displays an image.
  *
+ * @event {Event} load - Emits when the image has been loaded.
+ * @event {Event} error - Emits when the image loading ended in an error.
  * @cssprop [--sbb-image-aspect-ratio=auto] - Can be used to override `aspectRatio` property.
  * This way we can have, for example, an image component with an aspect
  * ratio of 4/3 in smaller viewports and 16/9 in larger viewports.
@@ -29,6 +31,10 @@ export interface InterfaceImageAttributesSizesConfigMediaQuery {
  */
 export declare class SbbImageElement extends LitElement {
     static styles: CSSResultGroup;
+    static readonly events: {
+        readonly error: "error";
+        readonly load: "load";
+    };
     private _captionElement?;
     private _linksInCaption?;
     private _config;
@@ -217,16 +223,19 @@ export declare class SbbImageElement extends LitElement {
      * other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16'
      */
     aspectRatio: 'free' | '1-1' | '1-2' | '2-1' | '2-3' | '3-2' | '3-4' | '4-3' | '4-5' | '5-4' | '9-16' | '16-9';
+    /** Whether the image is finished loading or failed to load. */
+    get complete(): boolean;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
     private _logPerformanceMarks;
     private _matchMediaQueryDesignToken;
     private _addFocusAbilityToLinksInCaption;
     private _prepareImageUrl;
     private _preparePictureSizeConfigs;
     private _createMediaQueryString;
-    connectedCallback(): void;
-    protected render(): TemplateResult;
-    protected updated(changedProperties: PropertyValues<this>): void;
     private _imageLoaded;
+    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/image/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/elements/image/image.ts"],"names":[],"mappings":"AAiBA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,MAAM,WAAW,mCAAmC;IAClD,WAAW,EAAE,6CAA6C,EAAE,CAAC;CAC9D;AAED,MAAM,WAAW,6CAA6C;IAC5D,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,YAAY,EAAE,6CAA6C,EAAE,CAAC;CAC/D;AAED,MAAM,WAAW,6CAA6C;IAC5D,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,iBAAiB,EAAE,KAAK,CAAC;CAC1B;AAkGD;;;;;;;;GAQG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAAC,CAAc;IACtC,OAAO,CAAC,eAAe,CAAC,CAA8B;IACtD,OAAO,CAAC,OAAO,CAGb;IAEF;;;;;;OAMG;IACgB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEhC;;;;;;OAMG;IACyD,QAAQ,UAAS;IAE7E;;;;;OAKG;IACgB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEpC;;;;OAIG;IACgB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEtC;;OAEG;IAEI,eAAe,EAAE,cAAc,GAAG,QAAQ,CAAkB;IAEnE;;;;OAIG;IACkE,gBAAgB,UAAS;IAE9F;;;;;;OAMG;IACgB,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAU;IAEhE;;;OAGG;IACiE,eAAe,UAAS;IAE5F;;OAEG;IAC4D,WAAW,SAAK;IAE/E;;OAEG;IAC4D,WAAW,SAAK;IAE/E;;;;;;;;;OASG;IAC0C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE/D;;;;;;;;OAQG;IACgB,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAU;IAEhE;;;;;;;;;OASG;IACgB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAW;IAEvD;;;;;;;;;;;;OAYG;IACiD,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmEG;IACqD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEpF;;OAEG;IAC6D,YAAY,EACxE,SAAS,GACT,MAAM,GACN,OAAO,CAAa;IAExB;;;;OAIG;IAEI,WAAW,EACd,MAAM,GACN,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,CAAU;IAEpB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,2BAA2B;IAKnC,OAAO,CAAC,gCAAgC;IAMxC,OAAO,CAAC,gBAAgB;IA0CxB,OAAO,CAAC,0BAA0B;IAgElC,OAAO,CAAC,uBAAuB;IAuBf,iBAAiB,IAAI,IAAI;cAStB,MAAM,IAAI,cAAc;cAgGxB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAiBzE,OAAO,CAAC,YAAY;CAIrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/elements/image/image.ts"],"names":[],"mappings":"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"}