@sbb-esta/lyne-elements 1.12.1 → 1.14.0

package/icon.js

@@ -1,191 +1,256 @@
-import { isServer as y, css as w, LitElement as A, html as c, nothing as m } from "lit";
-import { state as d, property as p, customElement as N } from "lit/decorators.js";
-import { unsafeHTML as C } from "lit/directives/unsafe-html.js";
-import { until as I } from "lit/directives/until.js";
-import { hostAttributes as $ } from "./core/decorators.js";
-import { readConfig as S } from "./core/config.js";
-const L = (t) => typeof t == "string", _ = (t) => {
+var T = (t) => {
+  throw TypeError(t);
+};
+var M = (t, e, i) => e.has(t) || T("Cannot " + i);
+var I = (t, e, i) => (M(t, e, "read from private field"), i ? i.call(t) : e.get(t)), N = (t, e, i) => e.has(t) ? T("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), _ = (t, e, i, a) => (M(t, e, "write to private field"), a ? a.call(t, i) : e.set(t, i), i);
+import { __esDecorate as v, __runInitializers as d } from "tslib";
+import { isServer as P, css as B, html as C, LitElement as F, nothing as O } from "lit";
+import { state as x, property as L, customElement as V } from "lit/decorators.js";
+import { hostAttributes as G, forceType as E, omitEmptyConverter as D } from "./core/decorators.js";
+import { unsafeHTML as J } from "lit/directives/unsafe-html.js";
+import { until as K } from "lit/directives/until.js";
+import { readConfig as Q } from "./core/config.js";
+const R = (t) => typeof t == "string", q = (t) => {
   if (t.nodeType === 1) {
     if (t.nodeName.toLowerCase() === "script")
       return !1;
     for (let e = 0; e < t.attributes.length; e++) {
       const i = t.attributes[e].name;
-      if (L(i) && i.toLowerCase().indexOf("on") === 0)
+      if (R(i) && i.toLowerCase().indexOf("on") === 0)
         return !1;
     }
     for (let e = 0; e < t.childNodes.length; e++)
-      if (!_(t.childNodes[e]))
+      if (!q(t.childNodes[e]))
         return !1;
   }
   return !0;
-}, E = (t, e = !0, i = !1) => {
-  const r = document.createElement("div");
-  r.innerHTML = t;
-  for (let o = r.childNodes.length - 1; o >= 0; o--)
-    r.childNodes[o].nodeName.toLowerCase() !== "svg" && r.removeChild(r.childNodes[o]);
-  const s = r.firstElementChild;
-  return s && s.nodeName.toLowerCase() === "svg" && (i && !s.classList.contains("color-immutable") && s.classList.add("color-immutable"), e === !1 || _(s)) ? r.innerHTML : "";
-}, g = "https://icons.app.sbb.ch/", P = (/* @__PURE__ */ new Map()).set("default", `${g}icons/`).set("picto", `${g}picto/`), v = /* @__PURE__ */ new Map(), O = (t, e, i) => {
-  var f;
-  const r = S().icon ?? {}, s = ((f = r.namespaces) == null ? void 0 : f.get(t)) ?? P.get(t);
-  if (s == null)
-    throw Error(
-      `Unable to find the namespace "${t}". Please register your custom namespace.`
-    );
-  const o = `${s}${e}.svg`;
-  let a = v.get(o);
-  if (!a)
-    if (typeof fetch < "u" && !y)
-      a = (r.interceptor ?? ((l) => l.request()))({
+}, W = (t, e = !0, i = !1) => {
+  const a = document.createElement("div");
+  a.innerHTML = t;
+  for (let l = a.childNodes.length - 1; l >= 0; l--)
+    a.childNodes[l].nodeName.toLowerCase() !== "svg" && a.removeChild(a.childNodes[l]);
+  const c = a.firstElementChild;
+  return c && c.nodeName.toLowerCase() === "svg" && (i && !c.classList.contains("color-immutable") && c.classList.add("color-immutable"), e === !1 || q(c)) ? a.innerHTML : "";
+}, U = "https://icons.app.sbb.ch/", X = (/* @__PURE__ */ new Map()).set("default", `${U}icons/`).set("picto", `${U}picto/`), j = /* @__PURE__ */ new Map(), Y = (t, e, i) => {
+  var u;
+  const a = Q().icon ?? {}, c = ((u = a.namespaces) == null ? void 0 : u.get(t)) ?? X.get(t);
+  if (c == null)
+    throw Error(`Unable to find the namespace "${t}". Please register your custom namespace.`);
+  const l = `${c}${e}.svg`;
+  let m = j.get(l);
+  if (!m)
+    if (typeof fetch < "u" && !P)
+      m = (a.interceptor ?? ((h) => h.request()))({
         namespace: t,
         name: e,
-        url: o,
-        request: () => fetch(o).then(async (l) => {
-          if (!l.ok)
+        url: l,
+        request: () => fetch(l).then(async (h) => {
+          if (!h.ok)
             throw new Error("Failed to load icon " + t + ":" + e);
-          return E(await l.text(), i);
-        }).catch((l) => {
-          throw Error(l);
+          return W(await h.text(), i);
+        }).catch((h) => {
+          throw Error(h);
         })
-      }), v.set(o, a);
+      }), j.set(l, m);
     else
       return Promise.resolve("");
-  return a;
-}, x = w`*,: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, b = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? M(e, i) : e, o = t.length - 1, a; o >= 0; o--)
-    (a = t[o]) && (s = (r ? a(e, i, s) : a(s)) || s);
-  return r && s && z(e, i, s), s;
-};
-let n = class extends A {
-  constructor() {
-    super(...arguments), this._svgNamespace = n._defaultNamespace, this.noSanitize = !1;
-  }
-  async loadSvgIcon(t) {
-    if (!t)
-      return;
-    const [e, i] = this._splitIconName(t);
-    this._svgNamespace = e, this.setAttribute("data-namespace", this._svgNamespace);
-    const r = this.fetchSvgIcon(this._svgNamespace, i);
-    this._svgIcon = r.then((s) => C(s));
-    try {
-      this.toggleAttribute("data-empty", !await r);
-    } catch {
-      this.toggleAttribute("data-empty", !0);
+  return m;
+}, Z = B`*,: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}`, k = "default";
+let tt = (() => {
+  var z, A, r, s;
+  let t = [G({
+    "data-namespace": k,
+    "data-empty": ""
+  })], e, i = [], a, c = F, l, m = [], u = [], w, h = [], g = [], b, p = [], f = [];
+  return s = class extends c {
+    constructor() {
+      super(...arguments);
+      N(this, z, d(this, m, k));
+      N(this, A, (d(this, u), d(this, h, null)));
+      N(this, r, (d(this, g), d(this, p, !1)));
+      d(this, f);
     }
-  }
-  async fetchSvgIcon(t, e) {
-    return await O(t, e, !this.noSanitize);
-  }
-  _splitIconName(t) {
-    if (!t)
-      return ["", ""];
-    const e = t.split(":");
-    switch (e.length) {
-      case 1:
-        return [n._defaultNamespace, e[0]];
-      case 2:
-        return e;
-      default:
-        throw Error(`Invalid icon name: "${t}"`);
+    get _svgNamespace() {
+      return I(this, z);
     }
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.setAttribute("role", this.getAttribute("role") ?? "img");
-  }
-  render() {
-    return c`<span class="sbb-icon-inner"
-      >${I(
-      this._svgIcon,
-      // To reserve space, we need an empty svg to apply dimension to.
-      c`<svg width="0" height="0"></svg>`
-    )}</span
+    set _svgNamespace(o) {
+      _(this, z, o);
+    }
+    /**
+     * The icon svg content rendered on the page: <svg>...</svg>.
+     */
+    get _svgIcon() {
+      return I(this, A);
+    }
+    set _svgIcon(o) {
+      _(this, A, o);
+    }
+    /**
+     * When set to `true`, SVG content that is HTTP fetched will not be checked
+     * if the response SVG content has any `<script>` elements, or any attributes
+     * that start with `on`, such as `onclick`.
+     * @default false
+     */
+    get noSanitize() {
+      return I(this, r);
+    }
+    set noSanitize(o) {
+      _(this, r, o);
+    }
+    async loadSvgIcon(o) {
+      if (!o)
+        return;
+      const [n, S] = this._splitIconName(o);
+      this._svgNamespace = n, this.setAttribute("data-namespace", this._svgNamespace);
+      const $ = this.fetchSvgIcon(this._svgNamespace, S);
+      this._svgIcon = $.then((H) => J(H));
+      try {
+        this.toggleAttribute("data-empty", !await $);
+      } catch {
+        this.toggleAttribute("data-empty", !0);
+      }
+    }
+    async fetchSvgIcon(o, n) {
+      return await Y(o, n, !this.noSanitize);
+    }
+    _splitIconName(o) {
+      if (!o)
+        return ["", ""];
+      const n = o.split(":");
+      switch (n.length) {
+        case 1:
+          return [k, n[0]];
+        case 2:
+          return n;
+        default:
+          throw Error(`Invalid icon name: "${o}"`);
+      }
+    }
+    firstUpdated(o) {
+      super.firstUpdated(o), this.setAttribute("role", this.getAttribute("role") ?? "img");
+    }
+    render() {
+      return C`<span class="sbb-icon-inner"
+      >${K(
+        this._svgIcon,
+        // To reserve space, we need an empty svg to apply dimension to.
+        C`<svg width="0" height="0"></svg>`
+      )}</span
     >`;
-  }
-};
-n.styles = x;
-n._defaultNamespace = "default";
-b([
-  d()
-], n.prototype, "_svgNamespace", 2);
-b([
-  d()
-], n.prototype, "_svgIcon", 2);
-b([
-  p({ attribute: "no-sanitize", type: Boolean })
-], n.prototype, "noSanitize", 2);
-n = b([
-  $({
-    "data-namespace": n._defaultNamespace,
-    "data-empty": ""
-  })
-], n);
-var U = Object.defineProperty, j = Object.getOwnPropertyDescriptor, h = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? j(e, i) : e, o = t.length - 1, a; o >= 0; o--)
-    (a = t[o]) && (s = (r ? a(e, i, s) : a(s)) || s);
-  return r && s && U(e, i, s), s;
-};
-let u = class extends n {
-  constructor() {
-    super(...arguments), this._defaultAriaLabel = "", this._sbbAngularCompatibility = !1;
-  }
-  /**
-   * We need to additionally observe the svgicon attribute
-   * for sbb-angular compatibility.
-   * @internal
-   */
-  static get observedAttributes() {
-    return super.observedAttributes.concat("svgicon");
-  }
-  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(t) {
-    super.willUpdate(t), t.has("name") && this.loadSvgIcon(this.name);
-  }
-  attributeChangedCallback(t, e, i) {
-    t === "svgicon" ? this._sbbAngularCompatibility = !!i : super.attributeChangedCallback(t, e, i);
-  }
-  firstUpdated(t) {
-    super.firstUpdated(t), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
-  }
-  render() {
-    return this._sbbAngularCompatibility ? c`<slot></slot>` : super.render();
-  }
-};
-h([
-  p({ reflect: !0 })
-], u.prototype, "name", 2);
-h([
-  d()
-], u.prototype, "_sbbAngularCompatibility", 2);
-u = h([
-  N("sbb-icon")
-], u);
-var k = Object.defineProperty, T = (t, e, i, r) => {
-  for (var s = void 0, o = t.length - 1, a; o >= 0; o--)
-    (a = t[o]) && (s = a(e, i, s) || s);
-  return s && k(e, i, s), s;
-};
-const J = (t) => {
-  class e extends t {
-    renderIconSlot(r) {
-      return c`
+    }
+  }, z = new WeakMap(), A = new WeakMap(), r = new WeakMap(), a = s, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    l = [x()], w = [x()], b = [E(), L({ attribute: "no-sanitize", type: Boolean })], v(s, null, l, { kind: "accessor", name: "_svgNamespace", static: !1, private: !1, access: { has: (n) => "_svgNamespace" in n, get: (n) => n._svgNamespace, set: (n, S) => {
+      n._svgNamespace = S;
+    } }, metadata: o }, m, u), v(s, null, w, { kind: "accessor", name: "_svgIcon", static: !1, private: !1, access: { has: (n) => "_svgIcon" in n, get: (n) => n._svgIcon, set: (n, S) => {
+      n._svgIcon = S;
+    } }, metadata: o }, h, g), v(s, null, b, { kind: "accessor", name: "noSanitize", static: !1, private: !1, access: { has: (n) => "noSanitize" in n, get: (n) => n.noSanitize, set: (n, S) => {
+      n.noSanitize = S;
+    } }, metadata: o }, p, f), v(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: o }, null, i), a = e.value, o && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), s.styles = Z, d(a, i), a;
+})(), ct = (() => {
+  var b, p, f;
+  let t = [V("sbb-icon")], e, i = [], a, c = tt, l, m = [], u = [], w, h = [], g = [];
+  return f = class extends c {
+    constructor() {
+      super(...arguments);
+      N(this, b);
+      N(this, p);
+      _(this, b, d(this, m, "")), this._defaultAriaLabel = (d(this, u), ""), _(this, p, d(this, h, !1)), d(this, g);
+    }
+    /**
+     * We need to additionally observe the svgicon attribute
+     * for sbb-angular compatibility.
+     * @internal
+     */
+    static get observedAttributes() {
+      return super.observedAttributes.concat("svgicon");
+    }
+    /**
+     * The provided name consisting of the namespace and the name of the icon.
+     * If the namespace is missing, the default namespace "sbb" will be used.
+     * E.g. `name` (will use "sbb" as namespace) or `namespace:name`.
+     */
+    get name() {
+      return I(this, b);
+    }
+    set name(r) {
+      _(this, b, r);
+    }
+    /**
+     * The sbb-angular library has a sbb-icon component as well. In order to provide
+     * compatibility with it (as some icons are used internally inside the other sbb-angular
+     * components) we need to check whether the attribute svgicon is used.
+     */
+    get _sbbAngularCompatibility() {
+      return I(this, p);
+    }
+    set _sbbAngularCompatibility(r) {
+      _(this, p, r);
+    }
+    async fetchSvgIcon(r, s) {
+      return this.getAttribute("aria-label") === this._defaultAriaLabel && this.removeAttribute("aria-label"), this._defaultAriaLabel = `Icon ${s.replace(/-/g, " ")}`, this.getAttribute("aria-hidden") === "false" && !this.hasAttribute("aria-label") && s && this.setAttribute("aria-label", this._defaultAriaLabel), super.fetchSvgIcon(r, s);
+    }
+    willUpdate(r) {
+      super.willUpdate(r), r.has("name") && this.name && this.loadSvgIcon(this.name);
+    }
+    attributeChangedCallback(r, s, y) {
+      r === "svgicon" ? this._sbbAngularCompatibility = !!y : super.attributeChangedCallback(r, s, y);
+    }
+    firstUpdated(r) {
+      super.firstUpdated(r), this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true");
+    }
+    render() {
+      return this._sbbAngularCompatibility ? C`<slot></slot>` : super.render();
+    }
+  }, b = new WeakMap(), p = new WeakMap(), a = f, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    l = [E(), L({ reflect: !0, converter: D })], w = [x()], v(f, null, l, { kind: "accessor", name: "name", static: !1, private: !1, access: { has: (s) => "name" in s, get: (s) => s.name, set: (s, y) => {
+      s.name = y;
+    } }, metadata: r }, m, u), v(f, null, w, { kind: "accessor", name: "_sbbAngularCompatibility", static: !1, private: !1, access: { has: (s) => "_sbbAngularCompatibility" in s, get: (s) => s._sbbAngularCompatibility, set: (s, y) => {
+      s._sbbAngularCompatibility = y;
+    } }, metadata: r }, h, g), v(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: r }, null, i), a = e.value, r && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r }), d(a, i);
+  })(), a;
+})();
+const mt = (t) => (() => {
+  var m, u;
+  let i = t, a, c = [], l = [];
+  return u = class extends i {
+    constructor() {
+      super(...arguments);
+      N(this, m, d(this, c, ""));
+      d(this, l);
+    }
+    /**
+     * The icon name we want to use, choose from the small icon variants
+     * from the ui-icons category from here
+     * https://icons.app.sbb.ch.
+     */
+    get iconName() {
+      return I(this, m);
+    }
+    set iconName(g) {
+      _(this, m, g);
+    }
+    renderIconSlot(g) {
+      return C`
         <slot name="icon">
-          ${this.iconName ? c`<sbb-icon name=${this.iconName} class=${r || m}></sbb-icon>` : m}
+          ${this.iconName ? C`<sbb-icon name=${this.iconName} class=${g || O}></sbb-icon>` : O}
         </slot>
       `;
     }
-  }
-  return T([
-    p({ attribute: "icon-name", reflect: !0 })
-  ], e.prototype, "iconName"), e;
-};
+  }, m = new WeakMap(), (() => {
+    const g = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    a = [E(), L({ attribute: "icon-name", reflect: !0, converter: D })], v(u, null, a, { kind: "accessor", name: "iconName", static: !1, private: !1, access: { has: (b) => "iconName" in b, get: (b) => b.iconName, set: (b, p) => {
+      b.iconName = p;
+    } }, metadata: g }, c, l), g && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: g });
+  })(), u;
+})();
 export {
-  n as SbbIconBase,
-  u as SbbIconElement,
-  J as SbbIconNameMixin,
-  O as getSvgContent,
-  _ as isValid,
-  E as validateContent
+  tt as SbbIconBase,
+  ct as SbbIconElement,
+  mt as SbbIconNameMixin,
+  Y as getSvgContent,
+  q as isValid,
+  W as validateContent
 };

package/image/image.d.ts

@@ -46,7 +46,7 @@ export declare class SbbImageElement extends LitElement {
      * still needs to be present. That way we can signal assistive
      * technology, that they can skip the image.
      */
-    alt?: string;
+    accessor alt: string;
     /**
      * If set to false, we show a blurred version of the image as
      * placeholder before the actual image shows up. This will help
@@ -54,30 +54,30 @@ export declare class SbbImageElement extends LitElement {
      * the idea of lqip here:
      * https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62
      */
-    skipLqip: boolean;
+    accessor skipLqip: boolean;
     /**
      * A caption can provide additional context to the image (e.g.
      * descriptions and the like).
      * Links will automatically receive tabindex=-1 if hideFromScreenreader
      * is set to true. That way they will no longer become focusable.
      */
-    caption?: string;
+    accessor caption: string;
     /**
      * If a copyright text is provided, we will add it to the caption
      * and create a structured data json-ld block with the copyright
      * information.
      */
-    copyright?: string;
+    accessor copyright: string;
     /**
      * Copyright holder can either be an Organization or a Person
      */
-    copyrightHolder: 'Organization' | 'Person';
+    accessor copyrightHolder: 'Organization' | 'Person';
     /**
      * Set this to true, if you want to pass a custom focal point
      * for the image. See full documentation here:
      * https://docs.imgix.com/apis/rendering/focalpoint-crop
      */
-    customFocalPoint: boolean;
+    accessor customFocalPoint: boolean;
     /**
      * If the lazy property is set to true, the module will automatically
      * change the decoding to async, otherwise the decoding is set to auto
@@ -85,20 +85,20 @@ export declare class SbbImageElement extends LitElement {
      * decoding attribute here:
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding
      */
-    decoding: 'sync' | 'async' | 'auto';
+    accessor decoding: 'sync' | 'async' | 'auto';
     /**
      * Set this to true, to receive visual guidance where the custom focal
      * point is currently set.
      */
-    focalPointDebug: boolean;
+    accessor focalPointDebug: boolean;
     /**
      * Pass in a floating number between 0 (left) and 1 (right).
      */
-    focalPointX: number;
+    accessor focalPointX: number;
     /**
      * Pass in a floating number between 0 (top) and 1 (bottom).
      */
-    focalPointY: number;
+    accessor focalPointY: number;
     /**
      * Right now the module is heavily coupled with the image delivery
      * service imgix and depends on the original files being stored
@@ -109,7 +109,7 @@ export declare class SbbImageElement extends LitElement {
      * images coming from a different source, please contact the
      * LYNE Core Team.
      */
-    imageSrc?: string;
+    accessor imageSrc: string;
     /**
      * The importance attribute is fairly new attribute which should
      * help the browser decide which resources it should prioritise
@@ -119,7 +119,7 @@ export declare class SbbImageElement extends LitElement {
      * attribute value to 'high'. 'lazy', which we use for images below
      * the fold, will set the attribute value to 'low'.
      */
-    importance: 'auto' | 'high' | 'low';
+    accessor importance: 'auto' | 'high' | 'low';
     /**
      * With the support of native image lazy loading, we can now
      * decide whether we want to load the image immediately or only
@@ -130,7 +130,7 @@ export declare class SbbImageElement extends LitElement {
      * which are further down the page or invisible during the loading
      * of the initial viewport.
      */
-    loading: 'eager' | 'lazy';
+    accessor loading: 'eager' | 'lazy';
     /**
      * With performance.mark you can log a timestamp associated with
      * the name you define in performanceMark when a certain event is
@@ -144,7 +144,7 @@ export declare class SbbImageElement extends LitElement {
      * increases or decreases over time. Best to use lowercase strings
      * here, separate words with underscores or dashes.
      */
-    performanceMark?: string;
+    accessor performanceMark: string;
     /**
      * With the pictureSizesConfig object, you can pass in information
      * into image about what kind of source elements should get
@@ -213,17 +213,17 @@ export declare class SbbImageElement extends LitElement {
      *    ]
      *  }
      */
-    pictureSizesConfig?: string;
+    accessor pictureSizesConfig: string;
     /**
      * Border radius of the image. Choose between a default radius, no radius and a completely round image.
      */
-    borderRadius: 'default' | 'none' | 'round';
+    accessor borderRadius: 'default' | 'none' | 'round';
     /**
      * Set an aspect ratio
      * default is '16-9' (16/9)
      * other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16'
      */
-    aspectRatio: 'free' | '1-1' | '1-2' | '2-1' | '2-3' | '3-2' | '3-4' | '4-3' | '4-5' | '5-4' | '9-16' | '16-9';
+    accessor aspectRatio: 'free' | '1-1' | '1-2' | '2-1' | '2-3' | '3-2' | '3-4' | '4-3' | '4-5' | '5-4' | '9-16' | '16-9';
     /** Whether the image is finished loading or failed to load. */
     get complete(): boolean;
     connectedCallback(): void;

package/image/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/elements/image/image.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/elements/image/image.ts"],"names":[],"mappings":"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"}