@sbb-esta/lyne-elements 1.2.0 → 1.2.1

package/icon.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Lyne Design System",
   "keywords": [
     "design system",

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

@@ -15,8 +15,8 @@ export declare class SbbToggleCheckElement extends SbbToggleCheckElement_base {
     static readonly events: {
         readonly didChange: "didChange";
     };
-    /** Size variant, either m or s. */
-    size: 's' | 'm';
+    /** Size variant, either m, s or xs. */
+    size: 'xs' | 's' | 'm';
     /** The svg name for the true state - default -> 'tick-small' */
     iconName: string;
     /** The label position relative to the toggle. Defaults to 'after' */

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;;;;;;;;GAQG;AACH,qBACa,qBAAsB,SAAQ,0BAE1C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,gEAAgE;IACV,QAAQ,SAAgB;IAE9E,qEAAqE;IAE9D,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAW;;cAO3B,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;;;;;;;;GAQG;AACH,qBACa,qBAAsB,SAAQ,0BAE1C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,uCAAuC;IACH,IAAI,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAO;IAEjE,gEAAgE;IACV,QAAQ,SAAgB;IAE9E,qEAAqE;IAE9D,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAW;;cAO3B,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"}

package/visual-checkbox.js

@@ -1,13 +1,13 @@
-import { css as v, LitElement as h, html as t, nothing as d } from "lit";
+import { css as d, LitElement as v, html as t, nothing as h } from "lit";
 import { property as n, customElement as u } from "lit/decorators.js";
 import { SbbDisabledMixin as k, SbbNegativeMixin as x } from "./core/mixins.js";
-const m = v`*,:before,:after{box-sizing:border-box}:host{--sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-visual-checkbox-background-color: var(--sbb-color-white);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: solid;--sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);--sbb-visual-checkbox-selection-color: var(--sbb-color-red);--sbb-visual-checkbox-cursor: pointer;display:block}@media (forced-colors: active){:host{--sbb-visual-checkbox-selection-color: Canvas;--sbb-visual-checkbox-border-width: 0}}:host([negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-midnight);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-red)}@media (forced-colors: active){:host([negative]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled]){--sbb-visual-checkbox-background-color: var(--sbb-color-milk);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: dashed;--sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled][negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-white)}@media (forced-colors: active){:host([disabled][negative]){--sbb-visual-checkbox-selection-color: Canvas}}@media (forced-colors: active){:host([indeterminate]){--sbb-visual-checkbox-selection-color: ButtonBorder}}@media (forced-colors: active){:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color: GrayText}}.sbb-visual-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);border:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor)}@media (forced-colors: active){.sbb-visual-checkbox{outline:var(--sbb-border-width-2x) solid ButtonBorder;outline-offset:calc(-1 * var(--sbb-border-width-2x))}:host([checked]) .sbb-visual-checkbox{background-color:HighLight;outline:none}:host([disabled]) .sbb-visual-checkbox{outline-color:GrayText}:host([checked][disabled]) .sbb-visual-checkbox{background-color:GrayText}}.sbb-visual-checkbox__icon{display:inline-flex;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension)}.sbb-visual-checkbox__icon svg{margin:auto}.sbb-visual-checkbox__icon path{stroke:var(--sbb-visual-checkbox-selection-color)}`;
+const m = d`*,:before,:after{box-sizing:border-box}:host{--sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-visual-checkbox-background-color: var(--sbb-color-white);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: solid;--sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);--sbb-visual-checkbox-selection-color: var(--sbb-color-red);--sbb-visual-checkbox-cursor: pointer;display:block}@media (forced-colors: active){:host{--sbb-visual-checkbox-selection-color: Canvas;--sbb-visual-checkbox-border-width: 0}}:host([negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-midnight);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-red)}@media (forced-colors: active){:host([negative]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled]){--sbb-visual-checkbox-background-color: var(--sbb-color-milk);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-border-style: dashed;--sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-visual-checkbox-selection-color: Canvas}}:host([disabled][negative]){--sbb-visual-checkbox-background-color: var(--sbb-color-charcoal);--sbb-visual-checkbox-border-color: var(--sbb-color-smoke);--sbb-visual-checkbox-selection-color: var(--sbb-color-white)}@media (forced-colors: active){:host([disabled][negative]){--sbb-visual-checkbox-selection-color: Canvas}}@media (forced-colors: active){:host([indeterminate]){--sbb-visual-checkbox-selection-color: ButtonBorder}}@media (forced-colors: active){:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color: GrayText}}.sbb-visual-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);border:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor)}@media (forced-colors: active){.sbb-visual-checkbox{outline:var(--sbb-border-width-2x) solid ButtonBorder;outline-offset:calc(-1 * var(--sbb-border-width-2x))}:host([checked]:not([indeterminate])) .sbb-visual-checkbox{background-color:HighLight;outline:none}:host([disabled]) .sbb-visual-checkbox{outline-color:GrayText}:host([checked][disabled]:not([indeterminate])) .sbb-visual-checkbox{background-color:GrayText}}.sbb-visual-checkbox__icon{display:inline-flex;width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension)}.sbb-visual-checkbox__icon svg{margin:auto}.sbb-visual-checkbox__icon path{stroke:var(--sbb-visual-checkbox-selection-color)}`;
 var p = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (l, s, c, b) => {
   for (var o = b > 1 ? void 0 : b ? g(s, c) : s, r = l.length - 1, i; r >= 0; r--)
     (i = l[r]) && (o = (b ? i(s, c, o) : i(o)) || o);
   return b && o && p(s, c, o), o;
 };
-let e = class extends k(x(h)) {
+let e = class extends k(x(v)) {
   constructor() {
     super(...arguments), this.checked = !1, this.indeterminate = !1;
   }
@@ -28,7 +28,7 @@ let e = class extends k(x(h)) {
                   stroke-linecap="round"
                   stroke-linejoin="round"
                 />
-              </svg>` : d}
+              </svg>` : h}
         </span>
       </span>
     `;