@sbb-esta/lyne-elements 0.52.1 → 0.52.2

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 l, state as v, customElement as u } from "lit/decorators.js";
+import { property as d, state as u, customElement as v } 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 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 _ = 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 _ = "[aria-controls][aria-expanded='true']";
-let o = class extends g(c) {
+const y = "[aria-controls][aria-expanded='true']";
+let i = class extends g(c) {
   constructor() {
-    super(...arguments), this.expanded = !1, this.b = b ? null : document, this.hideOnScroll = !1, this.f = !0, this.d = 0;
+    super(...arguments), this.expanded = !1, this._scrollOrigin = b ? null : document, this.hideOnScroll = !1, this._headerOnTop = !0, this._lastScroll = 0;
   }
   set scrollOrigin(e) {
-    const t = this.b;
-    this.b = e, this.i(this.b, t);
+    const t = this._scrollOrigin;
+    this._scrollOrigin = e, this._updateScrollOrigin(this._scrollOrigin, t);
   }
   get scrollOrigin() {
-    return this.b;
+    return this._scrollOrigin;
   }
-  i(e, t) {
+  _updateScrollOrigin(e, t) {
     if (e !== t) {
-      this.h(e);
-      const s = this.e("scrollTop");
-      this.d = s <= 0 ? 0 : s;
+      this._setListenerOnScrollElement(e);
+      const s = this._getCurrentScrollProperty("scrollTop");
+      this._lastScroll = s <= 0 ? 0 : s;
     }
   }
   /** If `hideOnScroll` is set, checks the element to hook the listener on, and possibly add it.*/
   connectedCallback() {
-    super.connectedCallback(), this.h(this.scrollOrigin), new m(this);
+    super.connectedCallback(), this._setListenerOnScrollElement(this.scrollOrigin), new m(this);
   }
   /** Removes the scroll listener, if previously attached. */
   disconnectedCallback() {
     var e;
-    super.disconnectedCallback(), (e = this.c) == null || e.abort();
+    super.disconnectedCallback(), (e = this._scrollEventsController) == null || e.abort();
   }
   /** Sets the value of `_scrollElement` and `_scrollFunction` and possibly adds the function on the correct element. */
-  h(e) {
+  _setListenerOnScrollElement(e) {
     var t, s;
-    (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, {
+    (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, {
       passive: !0,
-      signal: this.c.signal
+      signal: this._scrollEventsController.signal
     });
   }
   /** Returns the correct function to attach on scroll. */
-  j() {
-    return this.hideOnScroll ? this.k() : this.l();
+  _getScrollFunction() {
+    return this.hideOnScroll ? this._scrollListener() : this._scrollShadowListener();
   }
   /** Returns the requested property of the scrollContext. */
-  e(e) {
+  _getCurrentScrollProperty(e) {
     var t;
-    return this.a instanceof Document ? this.a.documentElement[e] || this.a.body[e] : ((t = this.a) == null ? void 0 : t[e]) || 0;
+    return this._scrollElement instanceof Document ? this._scrollElement.documentElement[e] || this._scrollElement.body[e] : ((t = this._scrollElement) == null ? void 0 : t[e]) || 0;
   }
   /**
    * Sets the correct value for `scrollTop`, then:
@@ -61,27 +61,27 @@ let o = 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.
    */
-  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(
+  _scrollListener() {
+    const e = this._getCurrentScrollProperty("scrollTop");
+    this._getCurrentScrollProperty("scrollHeight") - window.innerHeight - e <= 0 || (this.toggleAttribute("data-shadow", e !== 0), e > this.offsetHeight && e > 0 && this._lastScroll < e && this._closeOpenOverlays(), e > this.offsetHeight * 2 ? (this._headerOnTop = !1, e > 0 && this._lastScroll < e ? ["data-shadow", "data-visible"].forEach((t) => this.removeAttribute(t)) : ["data-fixed", "data-shadow", "data-animated", "data-visible"].forEach(
       (t) => this.toggleAttribute(t, !0)
-    )) : (e === 0 && (this.f = !0), this.f && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach(
+    )) : (e === 0 && (this._headerOnTop = !0), this._headerOnTop && ["data-shadow", "data-animated", "data-fixed", "data-visible"].forEach(
       (t) => this.removeAttribute(t)
-    )), this.d = e <= 0 ? 0 : e);
+    )), this._lastScroll = e <= 0 ? 0 : e);
   }
   /** Apply the shadow if the element/document has been scrolled down. */
-  l() {
-    this.toggleAttribute("data-shadow", this.e("scrollTop") !== 0);
+  _scrollShadowListener() {
+    this.toggleAttribute("data-shadow", this._getCurrentScrollProperty("scrollTop") !== 0);
   }
-  m() {
+  _closeOpenOverlays() {
     if (this.hasAttribute("data-has-visible-focus-within"))
       return;
     const e = Array.from(
-      this.querySelectorAll(_)
+      this.querySelectorAll(y)
     );
     for (const t of e) {
-      const s = t.getAttribute("aria-controls"), a = document.getElementById(s);
-      typeof (a == null ? void 0 : a.close) == "function" && a.close();
+      const s = t.getAttribute("aria-controls"), r = document.getElementById(s);
+      typeof (r == null ? void 0 : r.close) == "function" && r.close();
     }
   }
   render() {
@@ -99,22 +99,22 @@ let o = class extends g(c) {
     `;
   }
 };
-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);
+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);
 export {
-  o as SbbHeaderElement
+  i as SbbHeaderElement
 };

package/icon.js

@@ -1,174 +1,174 @@
-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 { 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 { until as A } from "lit/directives/until.js";
-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")
+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")
       return !1;
-    for (let e = 0; e < t.attributes.length; e++) {
-      const o = t.attributes[e].name;
-      if (L(o) && o.toLowerCase().indexOf("on") === 0)
+    for (let t = 0; t < e.attributes.length; t++) {
+      const o = e.attributes[t].name;
+      if (E(o) && o.toLowerCase().indexOf("on") === 0)
         return !1;
     }
-    for (let e = 0; e < t.childNodes.length; e++)
-      if (!w(t.childNodes[e]))
+    for (let t = 0; t < e.childNodes.length; t++)
+      if (!_(e.childNodes[t]))
         return !1;
   }
   return !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)
+}, 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)
     throw Error(
-      `Unable to find the namespace "${t}". Please register your custom namespace.`
+      `Unable to find the namespace "${e}". Please register your custom namespace.`
     );
-  const i = `${r}${e}.svg`;
-  let n = v.get(i);
-  if (!n)
+  const i = `${s}${t}.svg`;
+  let a = v.get(i);
+  if (!a)
     if (typeof fetch < "u" && typeof document < "u")
-      n = (s.interceptor ?? ((l) => l.request()))({
-        namespace: t,
-        name: e,
+      a = (r.interceptor ?? ((l) => l.request()))({
+        namespace: e,
+        name: t,
         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 " + t + ":" + e);
+          throw new Error("Failed to load icon " + e + ":" + t);
         }).catch((l) => {
           throw Error(l);
         })
-      }), v.set(i, n);
+      }), v.set(i, a);
     else
       return Promise.resolve("");
-  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;
+  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;
 };
-let a = class extends _ {
+let n = class extends I {
   constructor() {
-    super(...arguments), this.b = a.a, this.noSanitize = !1;
+    super(...arguments), this._svgNamespace = n._defaultNamespace, this.noSanitize = !1;
   }
-  async loadSvgIcon(t) {
-    if (!t)
+  async loadSvgIcon(e) {
+    if (!e)
       return;
-    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));
+    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));
     try {
-      this.toggleAttribute("data-empty", !await s);
+      this.toggleAttribute("data-empty", !await r);
     } catch {
       this.toggleAttribute("data-empty", !0);
     }
   }
-  async fetchSvgIcon(t, e) {
-    return await O(t, e, !this.noSanitize);
+  async fetchSvgIcon(e, t) {
+    return await O(e, t, !this.noSanitize);
   }
-  d(t) {
-    if (!t)
+  _splitIconName(e) {
+    if (!e)
       return ["", ""];
-    const e = t.split(":");
-    switch (e.length) {
+    const t = e.split(":");
+    switch (t.length) {
       case 1:
-        return [a.a, e[0]];
+        return [n._defaultNamespace, t[0]];
       case 2:
-        return e;
+        return t;
       default:
-        throw Error(`Invalid icon name: "${t}"`);
+        throw Error(`Invalid icon name: "${e}"`);
     }
   }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.setAttribute("role", this.getAttribute("role") ?? "img");
+  firstUpdated(e) {
+    super.firstUpdated(e), this.setAttribute("role", this.getAttribute("role") ?? "img");
   }
   render() {
-    return d`<span class="sbb-icon-inner"
+    return u`<span class="sbb-icon-inner"
       >${A(
-      this.c,
+      this._svgIcon,
       // To reserve space, we need an empty svg to apply dimension to.
-      d`<svg width="0" height="0"></svg>`
+      u`<svg width="0" height="0"></svg>`
     )}</span
     >`;
   }
 };
-a.styles = x;
-a.a = "default";
-h([
+n.styles = x;
+n._defaultNamespace = "default";
+d([
   g()
-], a.prototype, "b", 2);
-h([
+], n.prototype, "_svgNamespace", 2);
+d([
   g()
-], a.prototype, "c", 2);
-h([
-  f({ attribute: "no-sanitize", type: Boolean })
-], a.prototype, "noSanitize", 2);
-a = h([
-  N({
-    "data-namespace": a.a,
+], n.prototype, "_svgIcon", 2);
+d([
+  h({ attribute: "no-sanitize", type: Boolean })
+], n.prototype, "noSanitize", 2);
+n = d([
+  S({
+    "data-namespace": n._defaultNamespace,
     "data-empty": ""
   })
-], 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;
+], 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;
 };
-let u = class extends a {
+let f = class extends n {
   constructor() {
-    super(...arguments), this.a = "";
+    super(...arguments), this._defaultAriaLabel = "";
   }
-  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);
+  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);
   }
-  willUpdate(t) {
-    super.willUpdate(t), t.has("name") && this.loadSvgIcon(this.name);
+  willUpdate(e) {
+    super.willUpdate(e), e.has("name") && this.loadSvgIcon(this.name);
   }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
+  firstUpdated(e) {
+    super.firstUpdated(e), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
   }
 };
-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;
+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;
 };
-const J = (t) => {
-  class e extends t {
-    renderIconSlot(s) {
-      return d`
+const J = (e) => {
+  class t extends e {
+    renderIconSlot(r) {
+      return u`
         <slot name="icon">
-          ${this.iconName ? d`<sbb-icon name=${this.iconName} class=${s || p}></sbb-icon>` : p}
+          ${this.iconName ? u`<sbb-icon name=${this.iconName} class=${r || b}></sbb-icon>` : b}
         </slot>
       `;
     }
   }
   return q([
-    f({ attribute: "icon-name", reflect: !0 })
-  ], e.prototype, "iconName"), e;
+    h({ attribute: "icon-name", reflect: !0 })
+  ], t.prototype, "iconName"), t;
 };
 export {
-  a as SbbIconBase,
-  u as SbbIconElement,
+  n as SbbIconBase,
+  f as SbbIconElement,
   J as SbbIconNameMixin,
   O as getSvgContent,
-  w as isValid,
+  _ as isValid,
   P as validateContent
 };