@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/accordion.js

@@ -1,88 +1,88 @@
-import { css as h, LitElement as b, html as p } from "lit";
-import { property as c, customElement as f } from "lit/decorators.js";
-import { SbbConnectedAbortController as d } from "./core/controllers.js";
-import { SbbHydrationMixin as u } from "./core/mixins.js";
-import { SbbExpansionPanelElement as m } from "./expansion-panel.js";
-const v = h`*,:before,:after{box-sizing:border-box}:host{display:block}`;
-var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, e, s, l) => {
-  for (var i = l > 1 ? void 0 : l ? x(e, s) : e, a = t.length - 1, n; a >= 0; a--)
-    (n = t[a]) && (i = (l ? n(e, s, i) : n(i)) || i);
-  return l && i && g(e, s, i), i;
+import { css as c, LitElement as p, html as b } from "lit";
+import { property as h, customElement as _ } from "lit/decorators.js";
+import { SbbConnectedAbortController as u } from "./core/controllers.js";
+import { SbbHydrationMixin as d } from "./core/mixins.js";
+import { SbbExpansionPanelElement as f } from "./expansion-panel.js";
+const m = c`*,:before,:after{box-sizing:border-box}:host{display:block}`;
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, t, l, i) => {
+  for (var s = i > 1 ? void 0 : i ? x(t, l) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (s = (i ? a(t, l, s) : a(s)) || s);
+  return i && s && v(t, l, s), s;
 };
-let r = class extends u(b) {
+let n = class extends d(p) {
   constructor() {
-    super(...arguments), this.c = null, this.b = !1, this.size = "l", this.f = new d(this);
+    super(...arguments), this._titleLevel = null, this._multi = !1, this.size = "l", this._abort = new u(this);
   }
-  set titleLevel(t) {
-    this.c = t, this.d();
+  set titleLevel(e) {
+    this._titleLevel = e, this._setTitleLevelOnChildren();
   }
   get titleLevel() {
-    return this.c;
+    return this._titleLevel;
   }
-  set multi(t) {
-    const e = this.b;
-    this.b = t, this.e(this.b, e);
+  set multi(e) {
+    const t = this._multi;
+    this._multi = e, this._resetExpansionPanels(this._multi, t);
   }
   get multi() {
-    return this.b;
+    return this._multi;
   }
-  g(t) {
-    var e;
-    ((e = t.target) == null ? void 0 : e.localName) !== "sbb-expansion-panel" || this.multi || this.a.filter((s) => s !== t.target).forEach((s) => s.expanded = !1);
+  _closePanels(e) {
+    var t;
+    ((t = e.target) == null ? void 0 : t.localName) !== "sbb-expansion-panel" || this.multi || this._expansionPanels.filter((l) => l !== e.target).forEach((l) => l.expanded = !1);
   }
-  e(t, e) {
-    const s = this.a;
-    s.length > 1 && e && !t && (s[0].expanded = !0, s.filter((l, i) => i > 0).forEach((l) => l.expanded = !1));
+  _resetExpansionPanels(e, t) {
+    const l = this._expansionPanels;
+    l.length > 1 && t && !e && (l[0].expanded = !0, l.filter((i, s) => s > 0).forEach((i) => i.expanded = !1));
   }
-  d() {
-    this.a.forEach(
-      (t) => t.titleLevel = this.titleLevel
+  _setTitleLevelOnChildren() {
+    this._expansionPanels.forEach(
+      (e) => e.titleLevel = this.titleLevel
     );
   }
-  get a() {
-    var t;
-    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-expansion-panel")) ?? []);
+  get _expansionPanels() {
+    var e;
+    return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-expansion-panel")) ?? []);
   }
   connectedCallback() {
     super.connectedCallback();
-    const t = this.f.signal;
+    const e = this._abort.signal;
     this.addEventListener(
-      m.events.willOpen,
-      (e) => this.g(e),
-      { signal: t }
+      f.events.willOpen,
+      (t) => this._closePanels(t),
+      { signal: e }
     );
   }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("size") && this.a.forEach((e) => e.size = this.size);
+  willUpdate(e) {
+    super.willUpdate(e), e.has("size") && this._expansionPanels.forEach((t) => t.size = this.size);
   }
-  h() {
-    this.a.forEach(
-      (t, e, s) => {
-        t.titleLevel = this.titleLevel, t.size = this.size, t.toggleAttribute("data-accordion-first", e === 0), t.toggleAttribute("data-accordion-last", e === s.length - 1);
+  _handleSlotchange() {
+    this._expansionPanels.forEach(
+      (e, t, l) => {
+        e.titleLevel = this.titleLevel, e.size = this.size, e.toggleAttribute("data-accordion-first", t === 0), e.toggleAttribute("data-accordion-last", t === l.length - 1);
       }
     );
   }
   render() {
-    return p`
+    return b`
       <div class="sbb-accordion">
-        <slot @slotchange=${this.h}></slot>
+        <slot @slotchange=${this._handleSlotchange}></slot>
       </div>
     `;
   }
 };
-r.styles = v;
+n.styles = m;
 o([
-  c({ attribute: "title-level" })
-], r.prototype, "titleLevel", 1);
+  h({ attribute: "title-level" })
+], n.prototype, "titleLevel", 1);
 o([
-  c({ type: Boolean })
-], r.prototype, "multi", 1);
+  h({ type: Boolean })
+], n.prototype, "multi", 1);
 o([
-  c({ reflect: !0 })
-], r.prototype, "size", 2);
-r = o([
-  f("sbb-accordion")
-], r);
+  h({ reflect: !0 })
+], n.prototype, "size", 2);
+n = o([
+  _("sbb-accordion")
+], n);
 export {
-  r as SbbAccordionElement
+  n as SbbAccordionElement
 };

package/action-group.js

@@ -10,16 +10,16 @@ let i = class extends p {
   constructor() {
     super(...arguments), this.alignGroup = "start", this.horizontalFrom = "medium", this.orientation = "horizontal", this.buttonSize = "l", this.linkSize = "m";
   }
-  a() {
+  _syncButtons() {
     var t;
     (t = this.querySelectorAll) == null || t.call(this, "[data-sbb-button]").forEach(
       (o) => o.size = this.buttonSize
     );
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("buttonSize") && this.a(), t.has("linkSize") && this.b();
+    super.willUpdate(t), t.has("buttonSize") && this._syncButtons(), t.has("linkSize") && this._syncLinks();
   }
-  b() {
+  _syncLinks() {
     var t;
     (t = this.querySelectorAll) == null || t.call(this, "sbb-block-link, sbb-block-link-button, sbb-block-link-static").forEach((o) => {
       o.size = this.linkSize;

package/alert/alert-group.js

@@ -1,54 +1,54 @@
-import { css as u, LitElement as h, nothing as m } from "lit";
+import { css as h, LitElement as m, nothing as u } from "lit";
 import { property as b, state as f, customElement as v } from "lit/decorators.js";
 import { html as c, unsafeStatic as p } from "lit/static-html.js";
 import { SbbConnectedAbortController as g } from "../core/controllers.js";
 import { EventEmitter as d } from "../core/eventing.js";
-import { SbbHydrationMixin as y } from "../core/mixins.js";
-import { SbbAlertElement as x } from "./alert.js";
-const E = u`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var A = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
-  for (var o = r > 1 ? void 0 : r ? _(t, i) : t, a = e.length - 1, n; a >= 0; a--)
+import { SbbHydrationMixin as _ } from "../core/mixins.js";
+import { SbbAlertElement as y } from "./alert.js";
+const A = h`*,:before,:after{box-sizing:border-box}:host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not([data-empty])){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var x = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var o = r > 1 ? void 0 : r ? E(t, i) : t, a = e.length - 1, n; a >= 0; a--)
     (n = e[a]) && (o = (r ? n(t, i, o) : n(o)) || o);
-  return r && o && A(t, i, o), o;
+  return r && o && x(t, i, o), o;
 };
-let s = class extends y(h) {
+let s = class extends _(m) {
   constructor() {
-    super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this.b = new d(
+    super(...arguments), this.role = "status", this.accessibilityTitleLevel = "2", this._didDismissAlert = new d(
       this,
       s.events.didDismissAlert
-    ), this.c = new d(this, s.events.empty), this.d = new g(this);
+    ), this._empty = new d(this, s.events.empty), this._abort = new g(this);
   }
-  e(e) {
+  _removeAlert(e) {
     var r;
     const t = e.target, i = document.activeElement === t;
-    (r = t.parentNode) == null || r.removeChild(t), this.b.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
+    (r = t.parentNode) == null || r.removeChild(t), this._didDismissAlert.emit(t), i && (this.tabIndex = 0, this.focus(), this.addEventListener("blur", () => this.removeAttribute("tabindex"), {
       once: !0
     }));
   }
   connectedCallback() {
     super.connectedCallback();
-    const e = this.d.signal;
-    this.addEventListener(x.events.dismissalRequested, (t) => this.e(t), {
+    const e = this._abort.signal;
+    this.addEventListener(y.events.dismissalRequested, (t) => this._removeAlert(t), {
       signal: e
     });
   }
-  f(e) {
-    const t = this.a;
-    this.a = e.target.assignedElements().filter((i) => i instanceof Element && i.localName === "sbb-alert").length > 0, !this.a && t && this.c.emit(), this.toggleAttribute("data-empty", !this.a);
+  _slotChanged(e) {
+    const t = this._hasAlerts;
+    this._hasAlerts = e.target.assignedElements().filter((i) => i instanceof Element && i.localName === "sbb-alert").length > 0, !this._hasAlerts && t && this._empty.emit(), this.toggleAttribute("data-empty", !this._hasAlerts);
   }
   render() {
     const e = `h${this.accessibilityTitleLevel}`;
     return c`
       <div class="sbb-alert-group">
-        ${this.a ? c`<${p(e)} class="sbb-alert-group__title">
+        ${this._hasAlerts ? c`<${p(e)} class="sbb-alert-group__title">
               <slot name="accessibility-title">${this.accessibilityTitle}</slot>
-            </${p(e)}>` : m}
-        <slot @slotchange=${(t) => this.f(t)}></slot>
+            </${p(e)}>` : u}
+        <slot @slotchange=${(t) => this._slotChanged(t)}></slot>
       </div>
     `;
   }
 };
-s.styles = E;
+s.styles = A;
 s.events = {
   didDismissAlert: "didDismissAlert",
   empty: "empty"
@@ -64,7 +64,7 @@ l([
 ], s.prototype, "accessibilityTitleLevel", 2);
 l([
   f()
-], s.prototype, "a", 2);
+], s.prototype, "_hasAlerts", 2);
 s = l([
   v("sbb-alert-group")
 ], s);

package/alert/alert.js

@@ -2,49 +2,49 @@ import { css as m, LitElement as v, html as d, nothing as r } from "lit";
 import { property as i, customElement as h } from "lit/decorators.js";
 import { SbbLanguageController as u } from "../core/controllers.js";
 import { EventEmitter as c } from "../core/eventing.js";
-import { i18nFindOutMore as g, i18nCloseAlert as f } from "../core/i18n.js";
-import { SbbIconNameMixin as y } from "../icon.js";
+import { i18nFindOutMore as g, i18nCloseAlert as _ } from "../core/i18n.js";
+import { SbbIconNameMixin as f } from "../icon.js";
 import "../button/transparent-button.js";
 import "../divider.js";
 import "../link.js";
 import "../title.js";
-const _ = m`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );display:block}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([animation=none]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:ease-in;animation-delay:0s,var(--sbb-alert-animation-duration)}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--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:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}`;
-var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (s, n, b, o) => {
-  for (var a = o > 1 ? void 0 : o ? w(n, b) : n, l = s.length - 1, p; l >= 0; l--)
-    (p = s[l]) && (a = (o ? p(n, b, a) : p(a)) || a);
-  return o && a && x(n, b, a), a;
+const y = m`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );display:block}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([animation=none]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:ease-in;animation-delay:0s,var(--sbb-alert-animation-duration)}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--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:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}`;
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (s, n, l, o) => {
+  for (var a = o > 1 ? void 0 : o ? x(n, l) : n, b = s.length - 1, p; b >= 0; b--)
+    (p = s[b]) && (a = (o ? p(n, l, a) : p(a)) || a);
+  return o && a && w(n, l, a), a;
 };
-let t = class extends y(v) {
+let t = class extends f(v) {
   constructor() {
-    super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "open", this.c = new c(this, t.events.willOpen), this.d = new c(this, t.events.didOpen), this.e = new c(
+    super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "open", this._willOpen = new c(this, t.events.willOpen), this._didOpen = new c(this, t.events.didOpen), this._dismissalRequested = new c(
       this,
       t.events.dismissalRequested
-    ), this.b = new u(this);
+    ), this._language = new u(this);
   }
   /** The state of the alert. */
-  get a() {
+  get _state() {
     return this.getAttribute("data-state") ?? "closed";
   }
-  set a(s) {
+  set _state(s) {
     this.setAttribute("data-state", s);
   }
   async firstUpdated(s) {
-    super.firstUpdated(s), this.f();
+    super.firstUpdated(s), this._open();
   }
   /** Requests dismissal of the alert. */
   requestDismissal() {
-    this.e.emit();
+    this._dismissalRequested.emit();
   }
   /** Open the alert. */
-  f() {
-    this.a = "opening", this.c.emit();
+  _open() {
+    this._state = "opening", this._willOpen.emit();
   }
-  g(s) {
-    this.a === "opening" && s.animationName === "open-opacity" && (this.a = "opened", this.d.emit());
+  _onAnimationEnd(s) {
+    this._state === "opening" && s.animationName === "open-opacity" && (this._state = "opened", this._didOpen.emit());
   }
   render() {
     return d`
-      <div class="sbb-alert__transition-wrapper" @animationend=${this.g}>
+      <div class="sbb-alert__transition-wrapper" @animationend=${this._onAnimationEnd}>
         <!-- sub wrapper needed to properly support fade in animation -->
         <div class="sbb-alert__transition-sub-wrapper">
           <div class="sbb-alert">
@@ -68,7 +68,7 @@ let t = class extends y(v) {
                     rel=${this.rel ?? r}
                     negative
                   >
-                    ${this.linkContent ? this.linkContent : g[this.b.current]}
+                    ${this.linkContent ? this.linkContent : g[this._language.current]}
                   </sbb-link>` : r}
             </span>
             ${this.readonly ? r : d`<span class="sbb-alert__close-button-wrapper">
@@ -82,7 +82,7 @@ let t = class extends y(v) {
                     size=${this.size === "l" ? "m" : this.size}
                     icon-name="cross-small"
                     @click=${() => this.requestDismissal()}
-                    aria-label=${f[this.b.current]}
+                    aria-label=${_[this._language.current]}
                     class="sbb-alert__close-button"
                   ></sbb-transparent-button>
                 </span>`}
@@ -92,7 +92,7 @@ let t = class extends y(v) {
     `;
   }
 };
-t.styles = _;
+t.styles = y;
 t.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",