@sbb-esta/lyne-elements 1.14.1 → 1.15.1

package/teaser.js

@@ -4,24 +4,25 @@ var j = (t) => {
 var D = (t, s, i) => s.has(t) || j("Cannot " + i);
 var v = (t, s, i) => (D(t, s, "read from private field"), i ? i.call(t) : s.get(t)), m = (t, s, i) => s.has(t) ? j("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, i), p = (t, s, i, o) => (D(t, s, "write to private field"), o ? o.call(t, i) : s.set(t, i), i);
 import { __esDecorate as f, __runInitializers as n } from "tslib";
-import { customElement as O, property as g } from "lit/decorators.js";
-import { html as B } from "lit/static-html.js";
+import { customElement as B, property as _ } from "lit/decorators.js";
+import { html as u } from "lit/static-html.js";
 import { SbbLinkBaseElement as F } from "./core/base-elements.js";
-import { slotState as H, forceType as $, omitEmptyConverter as P } from "./core/decorators.js";
+import { slotState as H, forceType as O, omitEmptyConverter as P } from "./core/decorators.js";
 import { css as U } from "lit";
 import "./chip.js";
+import "./screen-reader-only.js";
 import "./title.js";
-const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser{display:flex;text-decoration:none}.sbb-teaser:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;will-change:transform;display:block;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: 4 / 3}::slotted(img[slot=image]){aspect-ratio:4/3;object-fit:cover}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser:hover .sbb-teaser__image-wrapper{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-hard-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-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:inline-block;color:var(--sbb-teaser-description-color)}`;
-let X = (() => {
-  var b, c, h, d, r;
-  let t = [O("sbb-teaser"), H()], s, i = [], o, u = F, _, w = [], x = [], y, C = [], z = [], k, L = [], S = [], I, T = [], E = [];
-  return r = class extends u {
+const q = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;outline:none!important;--sbb-teaser-scale-hover: 1.02;--sbb-teaser-description-color: var(--sbb-color-granite);--sbb-teaser-flex-direction: row;--sbb-teaser-align-items: center;--sbb-teaser-gap: var(--sbb-spacing-fixed-4x);--sbb-teaser-width: fit-content;--sbb-teaser-border-radius: var(--sbb-border-radius-4x);--sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);--sbb-teaser-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) )}@media (forced-colors: active){:host{--sbb-teaser-description-color: LinkText;--sbb-title-text-color-normal-override: LinkText !important}}:host([alignment=after]){--sbb-teaser-align-items: start}:host([alignment=below]){--sbb-teaser-flex-direction: column;--sbb-teaser-align-items: baseline;--sbb-teaser-gap: var(--sbb-spacing-fixed-3x);--sbb-teaser-width: 100%}.sbb-teaser__wrapper{display:flex;position:relative;cursor:pointer}.sbb-teaser__wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;top:0;right:0;bottom:0;left:0}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-teaser:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors: active){.sbb-teaser{outline-offset:var(--sbb-focus-outline-offset);outline:CanvasText solid var(--sbb-focus-outline-width);border-radius:var(--sbb-teaser-border-radius)}.sbb-teaser:hover{outline-color:Highlight}}.sbb-teaser__container{display:flex;flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);max-width:100%;width:100%;pointer-events:none}.sbb-teaser__text{overflow:hidden;max-width:100%}::slotted([slot=image]){width:18.75rem;will-change:transform;display:block;filter:brightness(var(--sbb-teaser-brightness, 1));transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser__wrapper:hover ::slotted([slot=image]){transform:scale(var(--sbb-teaser-scale-hover));--sbb-teaser-brightness: var(--sbb-teaser-brightness-hover)}}::slotted(sbb-image[slot=image]){--sbb-image-aspect-ratio: 4 / 3}::slotted(img[slot=image]){aspect-ratio:4/3;object-fit:cover}.sbb-teaser__image-wrapper{flex-shrink:0;overflow:hidden;border-radius:var(--sbb-teaser-border-radius);transition:var(--sbb-teaser-animation-duration) var(--sbb-animation-easing)}@media (any-hover: hover){.sbb-teaser__wrapper:hover .sbb-teaser__image-wrapper{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-hard-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-hard-1-color)}}.sbb-teaser__chip{display:block;max-width:fit-content;margin-block-end:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=chip],[chip-content])) .sbb-teaser__chip{display:none}.sbb-teaser__lead{margin:0}.sbb-teaser__description{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:inline-block;color:var(--sbb-teaser-description-color)}`;
+let Y = (() => {
+  var b, c, d, h, r;
+  let t = [B("sbb-teaser"), H()], s, i = [], o, g = F, w, x = [], y = [], C, z = [], k = [], L, S = [], T = [], I, $ = [], E = [];
+  return r = class extends g {
     constructor() {
       super(...arguments);
-      m(this, b, n(this, w, "after-centered"));
-      m(this, c, (n(this, x), n(this, C, "5")));
-      m(this, h, (n(this, z), n(this, L, "")));
-      m(this, d, (n(this, S), n(this, T, "")));
+      m(this, b, n(this, x, "after-centered"));
+      m(this, c, (n(this, y), n(this, z, "5")));
+      m(this, d, (n(this, k), n(this, S, "")));
+      m(this, h, (n(this, T), n(this, $, "")));
       n(this, E);
     }
     /** Teaser variant - define the position and the alignment of the text block. */
@@ -40,20 +41,31 @@ let X = (() => {
     }
     /** Content of title. */
     get titleContent() {
-      return v(this, h);
+      return v(this, d);
     }
     set titleContent(a) {
-      p(this, h, a);
+      p(this, d, a);
     }
     /** Content of chip. */
     get chipContent() {
-      return v(this, d);
+      return v(this, h);
     }
     set chipContent(a) {
-      p(this, d, a);
+      p(this, h, a);
+    }
+    render() {
+      return u`
+      <div class="sbb-teaser__wrapper">
+        ${this.renderLink(
+        // For SEO we add the accessibility hidden as hidden content of the link
+        u`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
+      )}
+        ${this.renderContent()}
+      </div>
+    `;
     }
-    renderTemplate() {
-      return B`
+    renderContent() {
+      return u`
       <span class="sbb-teaser__container">
         <span class="sbb-teaser__image-wrapper">
           <slot name="image"></slot>
@@ -72,19 +84,19 @@ let X = (() => {
       </span>
     `;
     }
-  }, b = new WeakMap(), c = new WeakMap(), h = new WeakMap(), d = new WeakMap(), o = r, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    _ = [g({ reflect: !0 })], y = [g({ attribute: "title-level" })], k = [$(), g({ attribute: "title-content" })], I = [$(), g({ attribute: "chip-content", reflect: !0, converter: P })], f(r, null, _, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (e) => "alignment" in e, get: (e) => e.alignment, set: (e, l) => {
+  }, b = new WeakMap(), c = new WeakMap(), d = new WeakMap(), h = new WeakMap(), o = r, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+    w = [_({ reflect: !0 })], C = [_({ attribute: "title-level" })], L = [O(), _({ attribute: "title-content" })], I = [O(), _({ attribute: "chip-content", reflect: !0, converter: P })], f(r, null, w, { kind: "accessor", name: "alignment", static: !1, private: !1, access: { has: (e) => "alignment" in e, get: (e) => e.alignment, set: (e, l) => {
       e.alignment = l;
-    } }, metadata: a }, w, x), f(r, null, y, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, l) => {
+    } }, metadata: a }, x, y), f(r, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (e) => "titleLevel" in e, get: (e) => e.titleLevel, set: (e, l) => {
       e.titleLevel = l;
-    } }, metadata: a }, C, z), f(r, null, k, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (e) => "titleContent" in e, get: (e) => e.titleContent, set: (e, l) => {
+    } }, metadata: a }, z, k), f(r, null, L, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (e) => "titleContent" in e, get: (e) => e.titleContent, set: (e, l) => {
       e.titleContent = l;
-    } }, metadata: a }, L, S), f(r, null, I, { kind: "accessor", name: "chipContent", static: !1, private: !1, access: { has: (e) => "chipContent" in e, get: (e) => e.chipContent, set: (e, l) => {
+    } }, metadata: a }, S, T), f(r, null, I, { kind: "accessor", name: "chipContent", static: !1, private: !1, access: { has: (e) => "chipContent" in e, get: (e) => e.chipContent, set: (e, l) => {
       e.chipContent = l;
-    } }, metadata: a }, T, E), f(null, s = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = s.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+    } }, metadata: a }, $, E), f(null, s = { value: o }, t, { kind: "class", name: o.name, metadata: a }, null, i), o = s.value, a && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
   })(), r.styles = q, n(o, i), o;
 })();
 export {
-  X as SbbTeaserElement
+  Y as SbbTeaserElement
 };

package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts

@@ -9,8 +9,9 @@ export declare class SbbTimetableOccupancyIconElement extends SbbTimetableOccupa
     static styles: CSSResultGroup;
     /** Wagon occupancy. */
     accessor occupancy: SbbOccupancy;
-    private _abort;
     private _language;
+    private _mediaMatcher;
+    private _forcedColors;
     private _setNameAndAriaLabel;
     protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
     private _setAriaLabel;

package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy-icon/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;;AAIzC;;GAEG;AACH,qBAEM,gCAAiC,SAAQ,qCAA6B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAA+B;IAE5E,uBAAuB;IACvB,SAA4B,SAAS,EAAE,YAAY,CAAU;IAE7D,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAA2E;YAE9E,oBAAoB;cAeT,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAKvF,OAAO,CAAC,aAAa;IAOL,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
+{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy-icon/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;;AAIzC;;GAEG;AACH,qBAEM,gCAAiC,SAAQ,qCAA6B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAA+B;IAE5E,uBAAuB;IACvB,SAA4B,SAAS,EAAE,YAAY,CAAU;IAE7D,OAAO,CAAC,SAAS,CAA2E;IAC5F,OAAO,CAAC,aAAa,CAKlB;IAEH,OAAO,CAAC,aAAa,CAA2E;YAElF,oBAAoB;cAeT,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAKvF,OAAO,CAAC,aAAa;IAOL,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}

package/timetable-occupancy-icon.js

@@ -1,63 +1,64 @@
-var p = (e) => {
-  throw TypeError(e);
+var b = (t) => {
+  throw TypeError(t);
 };
-var d = (e, a, c) => a.has(e) || p("Cannot " + c);
-var y = (e, a, c) => (d(e, a, "read from private field"), c ? c.call(e) : a.get(e)), _ = (e, a, c) => a.has(e) ? p("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, c), r = (e, a, c, i) => (d(e, a, "write to private field"), i ? i.call(e, c) : a.set(e, c), c);
-import { __runInitializers as l, __esDecorate as f } from "tslib";
-import { customElement as A, property as S } from "lit/decorators.js";
-import { SbbConnectedAbortController as w, SbbLanguageController as L } from "./core/controllers.js";
-import { setOrRemoveAttribute as I } from "./core/dom.js";
-import { i18nOccupancy as x } from "./core/i18n.js";
-import { SbbNegativeMixin as z } from "./core/mixins.js";
-import { SbbIconBase as g } from "./icon.js";
-import { css as C } from "lit";
-const N = C`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
-let R = (() => {
-  var o, n;
-  let e = [A("sbb-timetable-occupancy-icon")], a, c = [], i, u = z(g), m, h = [], b = [];
-  return n = class extends u {
+var _ = (t, a, c) => a.has(t) || b("Cannot " + c);
+var d = (t, a, c) => (_(t, a, "read from private field"), c ? c.call(t) : a.get(t)), y = (t, a, c) => a.has(t) ? b("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, c), l = (t, a, c, s) => (_(t, a, "write to private field"), s ? s.call(t, c) : a.set(t, c), c);
+import { __runInitializers as n, __esDecorate as f } from "tslib";
+import { customElement as A, property as C } from "lit/decorators.js";
+import { SbbLanguageController as I, SbbMediaMatcherController as L, SbbMediaQueryForcedColors as g } from "./core/controllers.js";
+import { setOrRemoveAttribute as w } from "./core/dom.js";
+import { i18nOccupancy as M } from "./core/i18n.js";
+import { SbbNegativeMixin as x } from "./core/mixins.js";
+import { SbbIconBase as v } from "./icon.js";
+import { css as z } from "lit";
+const N = z`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
+let Q = (() => {
+  var o, r;
+  let t = [A("sbb-timetable-occupancy-icon")], a, c = [], s, u = x(v), m, h = [], p = [];
+  return r = class extends u {
     constructor() {
       super(...arguments);
-      _(this, o);
-      r(this, o, l(this, h, "none")), this._abort = (l(this, b), new w(this)), this._language = new L(this).withHandler(() => this._setAriaLabel());
+      y(this, o);
+      l(this, o, n(this, h, "none")), this._language = (n(this, p), new I(this).withHandler(() => this._setAriaLabel())), this._mediaMatcher = new L(this, {
+        [g]: (e) => {
+          this._forcedColors = e, this._setNameAndAriaLabel();
+        }
+      }), this._forcedColors = this._mediaMatcher.matches(g) ?? !1;
     }
     /** Wagon occupancy. */
     get occupancy() {
-      return y(this, o);
+      return d(this, o);
     }
-    set occupancy(t) {
-      r(this, o, t);
+    set occupancy(e) {
+      l(this, o, e);
     }
     async _setNameAndAriaLabel() {
-      var s;
       if (!this.occupancy)
         return;
-      let t = `utilization-${this.occupancy}`;
-      (s = globalThis.window) != null && s.matchMedia("(forced-colors: active)").matches ? t += "-high-contrast" : this.negative && (t += "-negative"), await this.loadSvgIcon(t);
+      let e = `utilization-${this.occupancy}`;
+      this._forcedColors ? e += "-high-contrast" : this.negative && (e += "-negative"), await this.loadSvgIcon(e);
     }
-    async fetchSvgIcon(t, s) {
-      return this._setAriaLabel(), super.fetchSvgIcon(t, s);
+    async fetchSvgIcon(e, i) {
+      return this._setAriaLabel(), super.fetchSvgIcon(e, i);
     }
     _setAriaLabel() {
-      var s;
-      const t = (s = x[this.occupancy]) == null ? void 0 : s[this._language.current];
-      I(this, "aria-label", t);
+      var i;
+      const e = (i = M[this.occupancy]) == null ? void 0 : i[this._language.current];
+      w(this, "aria-label", e);
     }
     connectedCallback() {
-      super.connectedCallback(), window.matchMedia("(forced-colors: active)").addEventListener("change", () => this._setNameAndAriaLabel(), {
-        signal: this._abort.signal
-      }), this._setNameAndAriaLabel();
-    }
-    willUpdate(t) {
-      super.willUpdate(t), (t.has("occupancy") || t.has("negative")) && this._setNameAndAriaLabel();
-    }
-  }, o = new WeakMap(), i = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    m = [S()], f(n, null, m, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (s) => "occupancy" in s, get: (s) => s.occupancy, set: (s, v) => {
-      s.occupancy = v;
-    } }, metadata: t }, h, b), f(null, a = { value: i }, e, { kind: "class", name: i.name, metadata: t }, null, c), i = a.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = [g.styles, N], l(i, c), i;
+      super.connectedCallback(), this._setNameAndAriaLabel();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
+    }
+  }, o = new WeakMap(), s = r, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    m = [C()], f(r, null, m, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (i) => "occupancy" in i, get: (i) => i.occupancy, set: (i, S) => {
+      i.occupancy = S;
+    } }, metadata: e }, h, p), f(null, a = { value: s }, t, { kind: "class", name: s.name, metadata: e }, null, c), s = a.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = [v.styles, N], n(s, c), s;
 })();
 export {
-  R as SbbTimetableOccupancyIconElement
+  Q as SbbTimetableOccupancyIconElement
 };

package/toggle-check/toggle-check.d.ts

@@ -21,7 +21,7 @@ export declare class SbbToggleCheckElement extends SbbToggleCheckElement_base {
     accessor iconName: string;
     /** The label position relative to the toggle. Defaults to 'after' */
     accessor labelPosition: 'before' | 'after';
-    protected willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }
 declare global {

package/toggle-check/toggle-check.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-check.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle-check/toggle-check.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;;;;;;GASG;AACH,qBAGM,qBAAsB,SAAQ,0BAA4D;IAC9F,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,uCAAuC;IACvC,SAA6C,IAAI,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAO;IAE1E,gEAAgE;IAChE,SAEyB,QAAQ,EAAE,MAAM,CAAgB;IAEzD,qEAAqE;IACrE,SACgB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAW;cAEnC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cASxE,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"toggle-check.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle-check/toggle-check.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;;;;;;GASG;AACH,qBAGM,qBAAsB,SAAQ,0BAA4D;IAC9F,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,uCAAuC;IACvC,SAA6C,IAAI,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAO;IAE1E,gEAAgE;IAChE,SAEyB,QAAQ,EAAE,MAAM,CAAgB;IAEzD,qEAAqE;IACrE,SACgB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAW;cAEzC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/toggle-check.js

@@ -42,7 +42,7 @@ let J = (() => {
     set labelPosition(s) {
       k(this, n, s);
     }
-    async willUpdate(s) {
+    willUpdate(s) {
       super.willUpdate(s), s.has("checked") && (this.internals.ariaChecked = `${this.checked}`, this.toggleAttribute("data-checked", this.checked));
     }
     render() {