@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/time-input.js

@@ -1,131 +1,131 @@
-import { css as c, LitElement as p, html as d } from "lit";
-import { property as m, state as b, customElement as f } from "lit/decorators.js";
+import { css as p, LitElement as m, html as _ } from "lit";
+import { property as d, state as c, customElement as E } from "lit/decorators.js";
 import { ref as g } from "lit/directives/ref.js";
-import { SbbLanguageController as w } from "./core/controllers.js";
-import { findInput as E } from "./core/dom.js";
-import { EventEmitter as l, forwardEventToHost as u } from "./core/eventing.js";
-import { i18nTimeInputChange as v } from "./core/i18n.js";
-const C = c`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`;
-var A = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, e, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? _(e, s) : e, a = t.length - 1, h; a >= 0; a--)
-    (h = t[a]) && (n = (i ? h(e, s, n) : h(n)) || n);
-  return i && n && A(e, s, n), n;
+import { SbbLanguageController as b } from "./core/controllers.js";
+import { findInput as f } from "./core/dom.js";
+import { EventEmitter as o, forwardEventToHost as h } from "./core/eventing.js";
+import { i18nTimeInputChange as C } from "./core/i18n.js";
+const w = p`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`;
+var v = Object.defineProperty, A = Object.getOwnPropertyDescriptor, u = (t, e, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? A(e, i) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (s = (n ? l(e, i, s) : l(s)) || s);
+  return n && s && v(e, i, s), s;
 };
-const y = /[0-9.:,\-;_hH]/, O = /^([0-9]{1,2})([0-9]{2})$/, D = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let r = class extends p {
+const V = /[0-9.:,\-;_hH]/, y = /^([0-9]{1,2})([0-9]{2})$/, I = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let r = class extends m {
   constructor() {
-    super(...arguments), this.d = null, this.a = null, this.j = new l(this, r.events.didChange, {
+    super(...arguments), this._input = null, this._inputElement = null, this._didChange = new o(this, r.events.didChange, {
       bubbles: !0,
       cancelable: !0
-    }), this.k = new l(
+    }), this._validationChange = new o(
       this,
       r.events.validationChange,
       {
         bubbles: !0,
         composed: !1
       }
-    ), this.b = new AbortController(), this.l = new w(this);
+    ), this._abortController = new AbortController(), this._language = new b(this);
   }
   set input(t) {
-    this.d = t, this.e();
+    this._input = t, this._findInputElement();
   }
   get input() {
-    return this.d;
+    return this._input;
   }
   connectedCallback() {
-    super.connectedCallback(), this.e(), this.a && this.f(this.a.value);
+    super.connectedCallback(), this._findInputElement(), this._inputElement && this._updateValue(this._inputElement.value);
   }
   disconnectedCallback() {
     var t;
-    super.disconnectedCallback(), (t = this.b) == null || t.abort();
+    super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
   }
   /** Gets the input value with the correct date format. */
   // TODO: refactor this to be a get/set
   getValueAsDate() {
     var t;
-    return this.m(this.g((t = this.a) == null ? void 0 : t.value));
+    return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value));
   }
   /** Set the input value to the correctly formatted value. */
   setValueAsDate(t) {
-    if (!t || !this.a)
+    if (!t || !this._inputElement)
       return;
     const e = t instanceof Date ? t : new Date(t);
-    this.a.value = this.h({
+    this._inputElement.value = this._formatValue({
       hours: e.getHours(),
       minutes: e.getMinutes()
-    }), this.a.dispatchEvent(new FocusEvent("blur", { composed: !0 }));
+    }), this._inputElement.dispatchEvent(new FocusEvent("blur", { composed: !0 }));
   }
-  e() {
-    const t = this.a;
-    this.a = E(this, this.input), t !== this.a && this.n();
+  _findInputElement() {
+    const t = this._inputElement;
+    this._inputElement = f(this, this.input), t !== this._inputElement && this._registerInputElement();
   }
-  n() {
+  _registerInputElement() {
     var t;
-    (t = this.b) == null || t.abort(), this.a && (this.b = new AbortController(), this.a.toggleAttribute("data-sbb-time-input", !0), this.a.type = "text", this.a.inputMode = "numeric", this.a.maxLength = 5, this.a.placeholder || (this.a.placeholder = "HH:MM"), this.a.addEventListener(
+    (t = this._abortController) == null || t.abort(), this._inputElement && (this._abortController = new AbortController(), this._inputElement.toggleAttribute("data-sbb-time-input", !0), this._inputElement.type = "text", this._inputElement.inputMode = "numeric", this._inputElement.maxLength = 5, this._inputElement.placeholder || (this._inputElement.placeholder = "HH:MM"), this._inputElement.addEventListener(
       "input",
-      (e) => u(e, this),
-      { signal: this.b.signal }
-    ), this.a.addEventListener(
+      (e) => h(e, this),
+      { signal: this._abortController.signal }
+    ), this._inputElement.addEventListener(
       "keydown",
-      (e) => this.o(e),
-      { signal: this.b.signal }
-    ), this.a.addEventListener(
+      (e) => this._preventCharInsert(e),
+      { signal: this._abortController.signal }
+    ), this._inputElement.addEventListener(
       "change",
-      (e) => this.p(e),
+      (e) => this._updateValueAndEmitChange(e),
       {
-        signal: this.b.signal
+        signal: this._abortController.signal
       }
     ));
   }
   /** Applies the correct format to values and triggers event dispatch. */
-  p(t) {
-    this.f(t.target.value), this.q(t), this.r();
+  _updateValueAndEmitChange(t) {
+    this._updateValue(t.target.value), this._emitChange(t), this._updateAccessibilityMessage();
   }
   /**
    * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
    * to force the input change when the typed value is the same of the current one.
    */
-  f(t) {
-    if (this.c && (this.c.innerText = ""), !this.a)
+  _updateValue(t) {
+    if (this._statusContainer && (this._statusContainer.innerText = ""), !this._inputElement)
       return;
-    const e = this.g(t), s = !!e && this.i(e), i = !t || t.trim() === "" || s;
-    i && e && (this.a.value = this.h(e));
-    const n = !this.a.hasAttribute("data-sbb-invalid");
-    this.a.toggleAttribute("data-sbb-invalid", !i), n !== i && this.k.emit({ valid: i });
+    const e = this._parseInput(t), i = !!e && this._isTimeValid(e), n = !t || t.trim() === "" || i;
+    n && e && (this._inputElement.value = this._formatValue(e));
+    const s = !this._inputElement.hasAttribute("data-sbb-invalid");
+    this._inputElement.toggleAttribute("data-sbb-invalid", !n), s !== n && this._validationChange.emit({ valid: n });
   }
   /** Emits the change event. */
-  q(t) {
-    u(t, this), this.j.emit();
+  _emitChange(t) {
+    h(t, this), this._didChange.emit();
   }
   /** Returns the right format for the `value` property. */
-  h(t) {
-    const e = String(t.hours).padStart(2, "0"), s = String(t.minutes).padStart(2, "0");
-    return `${e}:${s}`;
+  _formatValue(t) {
+    const e = String(t.hours).padStart(2, "0"), i = String(t.minutes).padStart(2, "0");
+    return `${e}:${i}`;
   }
   /**
    * Returns the right format for the `valueAsDate` property:
    * sets the start date at 01.01.1970, then adds the typed hours/minutes.
    */
-  m(t) {
-    return !t || !this.i(t) ? null : new Date((/* @__PURE__ */ new Date(0)).setHours(t.hours, t.minutes, 0, 0));
+  _formatValueAsDate(t) {
+    return !t || !this._isTimeValid(t) ? null : new Date((/* @__PURE__ */ new Date(0)).setHours(t.hours, t.minutes, 0, 0));
   }
   /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
-  i(t) {
+  _isTimeValid(t) {
     return t.hours < 24 && t.minutes < 60;
   }
   /** Validate input against the defined RegExps. */
-  g(t) {
+  _parseInput(t) {
     const e = t == null ? void 0 : t.trim();
     if (!e)
       return null;
-    const s = e.match(O);
-    if (s)
-      return { hours: +s[1] || 0, minutes: +s[2] || 0 };
-    const i = e.match(D);
-    return i ? { hours: +i[1] || 0, minutes: +i[2] || 0 } : null;
+    const i = e.match(y);
+    if (i)
+      return { hours: +i[1] || 0, minutes: +i[2] || 0 };
+    const n = e.match(I);
+    return n ? { hours: +n[1] || 0, minutes: +n[2] || 0 } : null;
   }
   /**  Only allow typing numbers and separator keys. */
-  o(t) {
+  _preventCharInsert(t) {
     const e = [
       "Backspace",
       "Tab",
@@ -140,36 +140,36 @@ let r = class extends p {
       "PageDown",
       "Delete"
     ];
-    !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !y.test(t.key) && t.preventDefault();
+    !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !V.test(t.key) && t.preventDefault();
   }
   // We use a programmatic approach to avoid initial setting the message
   // and to not immediately change output if language should change (no reason to read out message).
-  r() {
+  _updateAccessibilityMessage() {
     var e;
-    this.a.hasAttribute("data-sbb-invalid") || (this.c.innerText = `${v[this.l.current]} ${(e = this.a) == null ? void 0 : e.value}.`);
+    this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${C[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
   }
   render() {
-    return d`
+    return _`
       <p
         role="status"
-        ${g((t) => this.c = t)}
+        ${g((t) => this._statusContainer = t)}
       ></p>
     `;
   }
 };
-r.styles = C;
+r.styles = w;
 r.events = {
   didChange: "didChange",
   validationChange: "validationChange"
 };
-o([
-  m()
+u([
+  d()
 ], r.prototype, "input", 1);
-o([
-  b()
-], r.prototype, "a", 2);
-r = o([
-  f("sbb-time-input")
+u([
+  c()
+], r.prototype, "_inputElement", 2);
+r = u([
+  E("sbb-time-input")
 ], r);
 export {
   r as SbbTimeInputElement

package/timetable-occupancy-icon.js

@@ -1,21 +1,21 @@
-import { property as h, customElement as p } from "lit/decorators.js";
-import { SbbConnectedAbortController as m, SbbLanguageController as b } from "./core/controllers.js";
+import { property as h, customElement as m } from "lit/decorators.js";
+import { SbbConnectedAbortController as b, SbbLanguageController as p } from "./core/controllers.js";
 import { setOrRemoveAttribute as d } from "./core/dom.js";
 import { i18nOccupancy as f } from "./core/i18n.js";
 import { SbbNegativeMixin as u } from "./core/mixins.js";
 import { SbbIconBase as n } from "./icon.js";
-import { css as v } from "lit";
-const g = v`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (e, t, i, a) => {
-  for (var c = a > 1 ? void 0 : a ? y(t, i) : t, s = e.length - 1, r; s >= 0; s--)
-    (r = e[s]) && (c = (a ? r(t, i, c) : r(c)) || c);
-  return a && c && w(t, i, c), c;
+import { css as g } from "lit";
+const v = g`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? w(t, i) : t, c = e.length - 1, o; c >= 0; c--)
+    (o = e[c]) && (a = (r ? o(t, i, a) : o(a)) || a);
+  return r && a && _(t, i, a), a;
 };
-let o = class extends u(n) {
+let s = class extends u(n) {
   constructor() {
-    super(...arguments), this.b = new m(this), this.d = new b(this).withHandler(() => this.c());
+    super(...arguments), this._abort = new b(this), this._language = new p(this).withHandler(() => this._setAriaLabel());
   }
-  async a() {
+  async _setNameAndAriaLabel() {
     var t, i;
     if (!this.occupancy)
       return;
@@ -23,31 +23,31 @@ let o = class extends u(n) {
     (t = globalThis.window) != null && t.matchMedia("(forced-colors: active)").matches ? e += "-high-contrast" : (this.negative || (i = globalThis.window) != null && i.matchMedia("(prefer-color-scheme: dark)").matches) && (e += "-negative"), await this.loadSvgIcon(e);
   }
   async fetchSvgIcon(e, t) {
-    return this.c(), super.fetchSvgIcon(e, t);
+    return this._setAriaLabel(), super.fetchSvgIcon(e, t);
   }
-  c() {
+  _setAriaLabel() {
     var t;
-    const e = (t = f[this.occupancy]) == null ? void 0 : t[this.d.current];
+    const e = (t = f[this.occupancy]) == null ? void 0 : t[this._language.current];
     d(this, "aria-label", e);
   }
   connectedCallback() {
-    super.connectedCallback(), window.matchMedia("(forced-colors: active)").addEventListener("change", () => this.a(), {
-      signal: this.b.signal
-    }), window.matchMedia("(prefer-color-scheme: dark)").addEventListener("change", () => this.a(), {
-      signal: this.b.signal
-    }), this.a();
+    super.connectedCallback(), window.matchMedia("(forced-colors: active)").addEventListener("change", () => this._setNameAndAriaLabel(), {
+      signal: this._abort.signal
+    }), window.matchMedia("(prefer-color-scheme: dark)").addEventListener("change", () => this._setNameAndAriaLabel(), {
+      signal: this._abort.signal
+    }), this._setNameAndAriaLabel();
   }
   willUpdate(e) {
-    super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this.a();
+    super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
   }
 };
-o.styles = [n.styles, g];
+s.styles = [n.styles, v];
 l([
   h()
-], o.prototype, "occupancy", 2);
-o = l([
-  p("sbb-timetable-occupancy-icon")
-], o);
+], s.prototype, "occupancy", 2);
+s = l([
+  m("sbb-timetable-occupancy-icon")
+], s);
 export {
-  o as SbbTimetableOccupancyIconElement
+  s as SbbTimetableOccupancyIconElement
 };

package/timetable-occupancy.js

@@ -1,19 +1,19 @@
 import { css as p, LitElement as m, html as r, nothing as y } from "lit";
-import { property as l, customElement as u } from "lit/decorators.js";
+import { property as b, customElement as u } from "lit/decorators.js";
 import { SbbLanguageController as f } from "./core/controllers.js";
 import { i18nClass as h } from "./core/i18n.js";
 import { SbbNegativeMixin as g } from "./core/mixins.js";
 import "./screen-reader-only.js";
 import "./timetable-occupancy-icon.js";
 const v = p`*,:before,:after{box-sizing:border-box}:host{--sbb-timetable-occupancy-color: var(--sbb-color-charcoal);--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;display:inline-block}@media (min-width: 52.5rem){:host{--sbb-icon-svg-width: 1.1875rem;--sbb-icon-svg-height: v1rem}}:host([negative]){--sbb-timetable-occupancy-color: var(--sbb-color-white)}.sbb-timetable-occupancy__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-2x)}.sbb-timetable-occupancy__list-item{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x)}.sbb-timetable-occupancy__list-item-class{--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);line-height:1;color:var(--sbb-timetable-occupancy-color)}.sbb-timetable-occupancy__list-item-icon{display:flex}`;
-var d = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, b = (e, t, a, i) => {
+var d = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, a, i) => {
   for (var s = i > 1 ? void 0 : i ? _(t, a) : t, n = e.length - 1, o; n >= 0; n--)
     (o = e[n]) && (s = (i ? o(t, a, s) : o(s)) || s);
   return i && s && d(t, a, s), s;
 };
 let c = class extends g(m) {
   constructor() {
-    super(...arguments), this.a = new f(this);
+    super(...arguments), this._language = new f(this);
   }
   render() {
     return r` ${(this.firstClassOccupancy || this.secondClassOccupancy) && r`
@@ -28,7 +28,7 @@ let c = class extends g(m) {
                   ${this.firstClassOccupancy && t === 0 ? "1" : "2"}.
                 </span>
                 <sbb-screen-reader-only>
-                  ${`${h[this.firstClassOccupancy && t === 0 ? "first" : "second"][this.a.current]}.`}
+                  ${`${h[this.firstClassOccupancy && t === 0 ? "first" : "second"][this._language.current]}.`}
                 </sbb-screen-reader-only>
                 <sbb-timetable-occupancy-icon
                   class="sbb-timetable-occupancy__list-item-icon"
@@ -44,13 +44,13 @@ let c = class extends g(m) {
   }
 };
 c.styles = v;
-b([
-  l({ attribute: "first-class-occupancy" })
+l([
+  b({ attribute: "first-class-occupancy" })
 ], c.prototype, "firstClassOccupancy", 2);
-b([
-  l({ attribute: "second-class-occupancy" })
+l([
+  b({ attribute: "second-class-occupancy" })
 ], c.prototype, "secondClassOccupancy", 2);
-c = b([
+c = l([
   u("sbb-timetable-occupancy")
 ], c);
 export {

package/toast.js

@@ -2,28 +2,28 @@ import { css as m, html as d, nothing as p } from "lit";
 import { property as b, customElement as h } from "lit/decorators.js";
 import { SbbOpenCloseBaseElement as f } from "./core/base-elements.js";
 import { SbbConnectedAbortController as v, SbbLanguageController as g, SbbSlotStateController as u } from "./core/controllers.js";
-import { isFirefox as x } from "./core/dom.js";
-import { composedPathHasAttribute as y } from "./core/eventing.js";
-import { i18nCloseAlert as _ } from "./core/i18n.js";
-import { SbbIconNameMixin as N } from "./icon.js";
+import { isFirefox as _ } from "./core/dom.js";
+import { composedPathHasAttribute as x } from "./core/eventing.js";
+import { i18nCloseAlert as y } from "./core/i18n.js";
+import { SbbIconNameMixin as T } from "./icon.js";
 import "./button/transparent-button.js";
 const k = m`*,:before,:after{box-sizing:border-box}:host{--sbb-toast-max-width: 25rem;--sbb-toast-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-toast-animation-timing-function: ease;--sbb-toast-color: var(--sbb-color-white);--sbb-toast-text-color: var(--sbb-color-milk);--sbb-toast-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-toast-margin: var(--sbb-spacing-responsive-s);--sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toast-border-radius: var(--sbb-border-radius-4x);--sbb-toast-container-display: flex;--sbb-toast-container-position: fixed;--sbb-toast-horizontal-position: initial;--sbb-toast-vertical-position: initial;display:block}:host(:not([data-state])),:host([data-state=closed]){--sbb-toast-container-display: none}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-start}:host([position=top-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-start}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;top:0;right:0;bottom:0;left:0;display:var(--sbb-toast-container-display);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position)}.sbb-toast{z-index:var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);display:flex;color:var(--sbb-toast-color);background-color:var(--sbb-toast-background-color)}:host([data-state=opening]) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host([data-state=closing]) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast__icon{margin-inline-end:var(--sbb-spacing-fixed-2x);line-height:initial}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-toast__icon{display:none}.sbb-toast__content{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);color:var(--sbb-toast-text-color);flex:1 1 0}.sbb-toast__action{position:relative;min-width:2.5rem}:host(:not([data-slot-names~=action],[dismissible])) .sbb-toast__action{display:none}::slotted([data-sbb-button]),.sbb-toast__action-button{margin-inline:var(--sbb-spacing-fixed-2x);position:absolute;top:-.625rem}::slotted(:is(sbb-link,sbb-link-button,sbb-link-static)){margin-inline-start:var(--sbb-spacing-fixed-4x)}@keyframes open{0%{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}to{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes close{0%{visibility:visible;opacity:1;transform:translateY(0)}to{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}}`;
-var z = Object.defineProperty, T = Object.getOwnPropertyDescriptor, n = (s, o, i, a) => {
-  for (var t = a > 1 ? void 0 : a ? T(o, i) : o, r = s.length - 1, l; r >= 0; r--)
-    (l = s[r]) && (t = (a ? l(o, i, t) : l(t)) || t);
-  return a && t && z(o, i, t), t;
+var N = Object.defineProperty, C = Object.getOwnPropertyDescriptor, n = (o, s, i, a) => {
+  for (var t = a > 1 ? void 0 : a ? C(s, i) : s, r = o.length - 1, l; r >= 0; r--)
+    (l = o[r]) && (t = (a ? l(s, i, t) : l(t)) || t);
+  return a && t && N(s, i, t), t;
 };
 const c = /* @__PURE__ */ new Set();
-let e = class extends N(f) {
+let e = class extends T(f) {
   constructor() {
-    super(), this.timeout = 6e3, this.position = "bottom-center", this.dismissible = !1, this.politeness = "polite", this.b = new v(this), this.c = new g(this), new u(this);
+    super(), this.timeout = 6e3, this.position = "bottom-center", this.dismissible = !1, this.politeness = "polite", this._abort = new v(this), this._language = new g(this), new u(this);
   }
   /**
    * Role of the live region. This is only for Firefox as there is a known issue where Firefox +
    * JAWS does not read out aria-live message.
    */
-  get d() {
-    if (x) {
+  get _role() {
+    if (_) {
       if (this.politeness === "polite")
         return "status";
       if (this.politeness === "assertive")
@@ -35,46 +35,46 @@ let e = class extends N(f) {
    * If there are other opened toasts in the page, close them first.
    */
   open() {
-    this.state === "closed" && this.willOpen.emit() && (this.state = "opening", this.e());
+    this.state === "closed" && this.willOpen.emit() && (this.state = "opening", this._closeOtherToasts());
   }
   /**
    * Close the toast.
    */
   close() {
-    this.state === "opened" && this.willClose.emit() && (clearTimeout(this.a), this.state = "closing");
+    this.state === "opened" && this.willClose.emit() && (clearTimeout(this._closeTimeout), this.state = "closing");
   }
   // Close the toast on click of any element that has the 'sbb-toast-close' attribute.
-  f(s) {
-    const o = y(s, "sbb-toast-close", this);
-    o && !o.hasAttribute("disabled") && this.close();
+  _onClick(o) {
+    const s = x(o, "sbb-toast-close", this);
+    s && !s.hasAttribute("disabled") && this.close();
   }
   connectedCallback() {
     super.connectedCallback();
-    const s = this.b.signal;
-    this.addEventListener("click", (o) => this.f(o), { signal: s }), c.add(this);
+    const o = this._abort.signal;
+    this.addEventListener("click", (s) => this._onClick(s), { signal: o }), c.add(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), clearTimeout(this.a), c.delete(this);
+    super.disconnectedCallback(), clearTimeout(this._closeTimeout), c.delete(this);
   }
   /**
    * Slotted text nodes are not read correctly by screen readers on Chrome.
    * To address the problem, if there is at least a root text node,
    * we wrap the whole content in a <span> tag
    */
-  g(s) {
-    const o = s.target.assignedNodes();
-    if (o.some((i) => i.nodeType === Node.TEXT_NODE)) {
+  _onContentSlotChange(o) {
+    const s = o.target.assignedNodes();
+    if (s.some((i) => i.nodeType === Node.TEXT_NODE)) {
       const i = document.createElement("span");
-      this.appendChild(i), i.append(...o);
+      this.appendChild(i), i.append(...s);
     }
   }
-  h(s) {
-    const o = s.target.assignedNodes();
-    o.filter(
+  _onActionSlotChange(o) {
+    const s = o.target.assignedNodes();
+    s.filter(
       (t) => t.nodeName === "SBB-TRANSPARENT-BUTTON" || t.nodeName === "SBB-TRANSPARENT-BUTTON-LINK"
     ).forEach((t) => {
       t.negative = !0, t.size = "m";
-    }), o.filter(
+    }), s.filter(
       (t) => ["SBB-LINK", "SBB-LINK-BUTTON", "SBB-LINK-STATIC"].includes(t.nodeName)
     ).forEach((t) => {
       t.negative = !0;
@@ -82,15 +82,15 @@ let e = class extends N(f) {
   }
   // In rare cases it can be that the animationEnd event is triggered twice.
   // To avoid entering a corrupt state, exit when state is not expected.
-  i(s) {
-    s.animationName === "open" && this.state === "opening" && (this.state = "opened", this.didOpen.emit(), this.timeout && (this.a = setTimeout(() => this.close(), this.timeout))), s.animationName === "close" && this.state === "closing" && (this.state = "closed", this.didClose.emit());
+  _onToastAnimationEnd(o) {
+    o.animationName === "open" && this.state === "opening" && (this.state = "opened", this.didOpen.emit(), this.timeout && (this._closeTimeout = setTimeout(() => this.close(), this.timeout))), o.animationName === "close" && this.state === "closing" && (this.state = "closed", this.didClose.emit());
   }
   /**
    * Since we do not stack toasts, we force the closing on other existing opened ones
    */
-  e() {
-    c.forEach((s) => {
-      s.getAttribute("data-state") === "opened" && s.close();
+  _closeOtherToasts() {
+    c.forEach((o) => {
+      o.getAttribute("data-state") === "opened" && o.close();
     });
   }
   render() {
@@ -100,23 +100,23 @@ let e = class extends N(f) {
           class="sbb-toast"
           ${/* Firefox needs 'role' to enable screen readers */
     ""}
-          role=${this.d ?? p}
-          @animationend=${this.i}
+          role=${this._role ?? p}
+          @animationend=${this._onToastAnimationEnd}
         >
           <div class="sbb-toast__icon">${this.renderIconSlot()}</div>
 
           <div class="sbb-toast__content" aria-live=${this.politeness}>
-            <slot @slotchange=${this.g}></slot>
+            <slot @slotchange=${this._onContentSlotChange}></slot>
           </div>
 
           <div class="sbb-toast__action">
-            <slot name="action" @slotchange=${this.h}>
+            <slot name="action" @slotchange=${this._onActionSlotChange}>
               ${this.dismissible ? d` <sbb-transparent-button
                     class="sbb-toast__action-button"
                     icon-name="cross-small"
                     negative
                     size="m"
-                    aria-label=${_[this.c.current]}
+                    aria-label=${y[this._language.current]}
                     sbb-toast-close
                   ></sbb-transparent-button>` : p}
             </slot>