@sbb-esta/lyne-elements 2.6.0 → 2.7.1

package/timetable-occupancy-icon.js

@@ -1,64 +1,4 @@
-var b = (t) => {
-  throw TypeError(t);
-};
-var _ = (t, a, c) => a.has(t) || b("Cannot " + c);
-var d = (t, a, c) => (_(t, a, "read from private field"), c ? c.call(t) : a.get(t)), y = (t, a, c) => a.has(t) ? b("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, c), l = (t, a, c, s) => (_(t, a, "write to private field"), s ? s.call(t, c) : a.set(t, c), c);
-import { __runInitializers as n, __esDecorate as f } from "tslib";
-import { customElement as A, property as C } from "lit/decorators.js";
-import { SbbLanguageController as I, SbbMediaMatcherController as L, SbbMediaQueryForcedColors as g } from "./core/controllers.js";
-import { setOrRemoveAttribute as w } from "./core/dom.js";
-import { i18nOccupancy as M } from "./core/i18n.js";
-import { SbbNegativeMixin as x } from "./core/mixins.js";
-import { SbbIconBase as v } from "./icon.js";
-import { css as z } from "lit";
-const N = z`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
-let Q = (() => {
-  var o, r;
-  let t = [A("sbb-timetable-occupancy-icon")], a, c = [], s, u = x(v), m, h = [], p = [];
-  return r = class extends u {
-    constructor() {
-      super(...arguments);
-      y(this, o);
-      l(this, o, n(this, h, "none")), this._language = (n(this, p), new I(this).withHandler(() => this._setAriaLabel())), this._mediaMatcher = new L(this, {
-        [g]: (e) => {
-          this._forcedColors = e, this._setNameAndAriaLabel();
-        }
-      }), this._forcedColors = this._mediaMatcher.matches(g) ?? !1;
-    }
-    /** Wagon occupancy. */
-    get occupancy() {
-      return d(this, o);
-    }
-    set occupancy(e) {
-      l(this, o, e);
-    }
-    async _setNameAndAriaLabel() {
-      if (!this.occupancy)
-        return;
-      let e = `utilization-${this.occupancy}`;
-      this._forcedColors ? e += "-high-contrast" : this.negative && (e += "-negative"), await this.loadSvgIcon(e);
-    }
-    async fetchSvgIcon(e, i) {
-      return this._setAriaLabel(), super.fetchSvgIcon(e, i);
-    }
-    _setAriaLabel() {
-      var i;
-      const e = (i = M[this.occupancy]) == null ? void 0 : i[this._language.current];
-      w(this, "aria-label", e);
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._setNameAndAriaLabel();
-    }
-    willUpdate(e) {
-      super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
-    }
-  }, o = new WeakMap(), s = r, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    m = [C()], f(r, null, m, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (i) => "occupancy" in i, get: (i) => i.occupancy, set: (i, S) => {
-      i.occupancy = S;
-    } }, metadata: e }, h, p), f(null, a = { value: s }, t, { kind: "class", name: s.name, metadata: e }, null, c), s = a.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), r.styles = [v.styles, N], n(s, c), s;
-})();
+import { SbbTimetableOccupancyIconElement as b } from "./timetable-occupancy-icon/timetable-occupancy-icon.js";
 export {
-  Q as SbbTimetableOccupancyIconElement
+  b as SbbTimetableOccupancyIconElement
 };

package/timetable-occupancy.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './timetable-occupancy/timetable-occupancy.js';
 //# sourceMappingURL=timetable-occupancy.d.ts.map

package/timetable-occupancy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-occupancy.d.ts","sourceRoot":"","sources":["../../src/elements/timetable-occupancy.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAC"}
+{"version":3,"file":"timetable-occupancy.d.ts","sourceRoot":"","sources":["../../src/elements/timetable-occupancy.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,8CAA8C,CAAC"}

package/timetable-occupancy.js

@@ -1,75 +1,4 @@
-var x = (s) => {
-  throw TypeError(s);
-};
-var z = (s, t, a) => t.has(s) || x("Cannot " + a);
-var u = (s, t, a) => (z(s, t, "read from private field"), a ? a.call(s) : t.get(s)), m = (s, t, a) => t.has(s) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, a), o = (s, t, a, i) => (z(s, t, "write to private field"), i ? i.call(s, a) : t.set(s, a), a);
-import { __runInitializers as b, __esDecorate as y } from "tslib";
-import { css as S, LitElement as $, nothing as k, html as h } from "lit";
-import { customElement as E, property as w } from "lit/decorators.js";
-import { SbbLanguageController as I } from "./core/controllers.js";
-import { i18nClass as D } from "./core/i18n.js";
-import { SbbNegativeMixin as j } from "./core/mixins.js";
-import "./screen-reader-only.js";
-import "./timetable-occupancy-icon.js";
-const L = S`*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-timetable-occupancy-color: var(--sbb-color-charcoal);--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem}@media (min-width: 52.5rem){:host{--sbb-icon-svg-width: 1.1875rem;--sbb-icon-svg-height: v1rem}}:host([negative]){--sbb-timetable-occupancy-color: var(--sbb-color-white)}.sbb-timetable-occupancy__list{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-2x)}.sbb-timetable-occupancy__list-item{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sbb-spacing-fixed-1x)}.sbb-timetable-occupancy__list-item-class{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);line-height:1;color:var(--sbb-timetable-occupancy-color)}.sbb-timetable-occupancy__list-item-icon{display:flex}`;
-let J = (() => {
-  var l, r, n;
-  let s = [E("sbb-timetable-occupancy")], t, a = [], i, f = j($), d, _ = [], g = [], O, C = [], v = [];
-  return n = class extends f {
-    constructor() {
-      super(...arguments);
-      m(this, l);
-      m(this, r);
-      o(this, l, b(this, _, null)), o(this, r, (b(this, g), b(this, C, null))), this._language = (b(this, v), new I(this));
-    }
-    /** Occupancy for first class wagons. */
-    get firstClassOccupancy() {
-      return u(this, l);
-    }
-    set firstClassOccupancy(c) {
-      o(this, l, c);
-    }
-    /** Occupancy for second class wagons. */
-    get secondClassOccupancy() {
-      return u(this, r);
-    }
-    set secondClassOccupancy(c) {
-      o(this, r, c);
-    }
-    render() {
-      return h` ${(this.firstClassOccupancy || this.secondClassOccupancy) && h`
-      <ul
-        class="sbb-timetable-occupancy__list"
-        role=${!this.firstClassOccupancy || !this.secondClassOccupancy ? "presentation" : k}
-      >
-        ${[this.firstClassOccupancy, this.secondClassOccupancy].map((c, e) => c && h`
-              <li class="sbb-timetable-occupancy__list-item">
-                <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
-                  ${this.firstClassOccupancy && e === 0 ? "1" : "2"}.
-                </span>
-                <sbb-screen-reader-only>
-                  ${`${D[this.firstClassOccupancy && e === 0 ? "first" : "second"][this._language.current]}.`}
-                </sbb-screen-reader-only>
-                <sbb-timetable-occupancy-icon
-                  class="sbb-timetable-occupancy__list-item-icon"
-                  ?negative=${this.negative}
-                  .occupancy=${c}
-                >
-                </sbb-timetable-occupancy-icon>
-              </li>
-            `)}
-      </ul>
-    `}`;
-    }
-  }, l = new WeakMap(), r = new WeakMap(), i = n, (() => {
-    const c = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    d = [w({ attribute: "first-class-occupancy" })], O = [w({ attribute: "second-class-occupancy" })], y(n, null, d, { kind: "accessor", name: "firstClassOccupancy", static: !1, private: !1, access: { has: (e) => "firstClassOccupancy" in e, get: (e) => e.firstClassOccupancy, set: (e, p) => {
-      e.firstClassOccupancy = p;
-    } }, metadata: c }, _, g), y(n, null, O, { kind: "accessor", name: "secondClassOccupancy", static: !1, private: !1, access: { has: (e) => "secondClassOccupancy" in e, get: (e) => e.secondClassOccupancy, set: (e, p) => {
-      e.secondClassOccupancy = p;
-    } }, metadata: c }, C, v), y(null, t = { value: i }, s, { kind: "class", name: i.name, metadata: c }, null, a), i = t.value, c && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: c });
-  })(), n.styles = L, b(i, a), i;
-})();
+import { SbbTimetableOccupancyElement as c } from "./timetable-occupancy/timetable-occupancy.js";
 export {
-  J as SbbTimetableOccupancyElement
+  c as SbbTimetableOccupancyElement
 };

package/title/title-base.js

@@ -0,0 +1,73 @@
+var S = (t) => {
+  throw TypeError(t);
+};
+var I = (t, i, s) => i.has(t) || S("Cannot " + s);
+var h = (t, i, s) => (I(t, i, "read from private field"), s ? s.call(t) : i.get(t)), g = (t, i, s) => i.has(t) ? S("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), m = (t, i, s, a) => (I(t, i, "write to private field"), a ? a.call(t, s) : i.set(t, s), s);
+import { __esDecorate as f, __runInitializers as r } from "tslib";
+import { css as D, LitElement as T } from "lit";
+import { property as d } from "lit/decorators.js";
+import { html as j } from "lit/static-html.js";
+import { hostAttributes as A, forceType as B } from "../core/decorators.js";
+const E = D`*,:before,:after{box-sizing:border-box}:host{--sbb-title-text-color-normal: var( --sbb-title-text-color-normal-override, var(--sbb-color-charcoal) );display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}.sbb-title{color:var(--sbb-title-text-color-normal)}:host([visually-hidden]) .sbb-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host(:is([level="1"]:not([visual-level]),[visual-level="1"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-1)}:host(:is([level="2"]:not([visual-level]),[visual-level="2"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}:host(:is([level="3"]:not([visual-level]),[visual-level="3"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-3)}:host(:is([level="4"]:not([visual-level]),[visual-level="4"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}:host(:is([level="5"]:not([visual-level]),[visual-level="5"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-5);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}:host(:is([level="6"]:not([visual-level]),[visual-level="6"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}`;
+let K = (() => {
+  var n, o, v, b;
+  let t = [A({
+    role: "heading"
+  })], i, s = [], a, u = T, p, y = [], k = [], _, z = [], x = [], w, L = [], H = [];
+  return b = class extends u {
+    constructor() {
+      super(...arguments);
+      g(this, n, r(this, y, "1"));
+      g(this, o, (r(this, k), r(this, z, null)));
+      g(this, v, (r(this, x), r(this, L, !1)));
+      r(this, H);
+    }
+    /** Title level */
+    get level() {
+      return h(this, n);
+    }
+    set level(l) {
+      m(this, n, l);
+    }
+    /** Visual level for the title. Optional, if not set, the value of level will be used. */
+    get visualLevel() {
+      return h(this, o);
+    }
+    set visualLevel(l) {
+      m(this, o, l);
+    }
+    /**
+     * Sometimes we need a title in the markup to present a proper hierarchy
+     * to the screen readers while we do not want to let that title appear
+     * visually. In this case we set visuallyHidden to true.
+     */
+    get visuallyHidden() {
+      return h(this, v);
+    }
+    set visuallyHidden(l) {
+      m(this, v, l);
+    }
+    willUpdate(l) {
+      super.willUpdate(l), l.has("level") && this.setAttribute("aria-level", this.level);
+    }
+    render() {
+      return j`
+      <div class="sbb-title">
+        <slot></slot>
+      </div>
+    `;
+    }
+  }, n = new WeakMap(), o = new WeakMap(), v = new WeakMap(), a = b, (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    p = [d({ reflect: !0 })], _ = [d({ attribute: "visual-level", reflect: !0 })], w = [B(), d({ attribute: "visually-hidden", reflect: !0, type: Boolean })], f(b, null, p, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (e) => "level" in e, get: (e) => e.level, set: (e, c) => {
+      e.level = c;
+    } }, metadata: l }, y, k), f(b, null, _, { kind: "accessor", name: "visualLevel", static: !1, private: !1, access: { has: (e) => "visualLevel" in e, get: (e) => e.visualLevel, set: (e, c) => {
+      e.visualLevel = c;
+    } }, metadata: l }, z, x), f(b, null, w, { kind: "accessor", name: "visuallyHidden", static: !1, private: !1, access: { has: (e) => "visuallyHidden" in e, get: (e) => e.visuallyHidden, set: (e, c) => {
+      e.visuallyHidden = c;
+    } }, metadata: l }, L, H), f(null, i = { value: a }, t, { kind: "class", name: a.name, metadata: l }, null, s), a = i.value, l && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), b.styles = E, r(a, s), a;
+})();
+export {
+  K as SbbTitleBase
+};

package/title/title.js

@@ -0,0 +1,18 @@
+import { __esDecorate as o, __runInitializers as b } from "tslib";
+import { customElement as v } from "lit/decorators.js";
+import { SbbNegativeMixin as c } from "../core/mixins.js";
+import { SbbTitleBase as r } from "./title-base.js";
+import { css as m } from "lit";
+const u = m`:host{--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end)}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-milk)}:host(:where(:not([visually-hidden]))){--sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);--sbb-title-margin-block-end: var(--sbb-spacing-responsive-s)}:host(:where([level="1"]:not([visual-level]),[visual-level="1"]):where(:not([visually-hidden]))){--sbb-title-margin-block-start: var(--sbb-spacing-responsive-l)}:host(:where([level="2"]:not([visual-level]),[visual-level="2"]):where(:not([visually-hidden]))),:host(:where([level="3"]:not([visual-level]),[visual-level="3"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs)}:host(:where([level="4"]:not([visual-level]),[visual-level="4"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-3x)}:host(:where([level="5"]:not([visual-level]),[visual-level="5"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x)}:host(:where([level="6"]:not([visual-level]),[visual-level="6"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x)}`;
+let k = (() => {
+  var l;
+  let n = [v("sbb-title")], s, i = [], e, a = c(r);
+  return l = class extends a {
+  }, e = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    o(null, s = { value: e }, n, { kind: "class", name: e.name, metadata: t }, null, i), e = s.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = [r.styles, u], b(e, i), e;
+})();
+export {
+  k as SbbTitleElement
+};

package/title.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './title/title.js';
 export * from './title/title-base.js';
 //# sourceMappingURL=title.d.ts.map

package/title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/elements/title.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/elements/title.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC"}

package/title.js

@@ -1,85 +1,6 @@
-var H = (e) => {
-  throw TypeError(e);
-};
-var I = (e, t, s) => t.has(e) || H("Cannot " + s);
-var u = (e, t, s) => (I(e, t, "read from private field"), s ? s.call(e) : t.get(e)), f = (e, t, s) => t.has(e) ? H("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), p = (e, t, s, l) => (I(e, t, "write to private field"), l ? l.call(e, s) : t.set(e, s), s);
-import { __esDecorate as d, __runInitializers as n } from "tslib";
-import { property as y, customElement as T } from "lit/decorators.js";
-import { SbbNegativeMixin as j } from "./core/mixins.js";
-import { css as E, LitElement as O } from "lit";
-import { html as A } from "lit/static-html.js";
-import { hostAttributes as B, forceType as U } from "./core/decorators.js";
-const M = E`*,:before,:after{box-sizing:border-box}:host{--sbb-title-text-color-normal: var( --sbb-title-text-color-normal-override, var(--sbb-color-charcoal) );display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}.sbb-title{color:var(--sbb-title-text-color-normal)}:host([visually-hidden]) .sbb-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host(:is([level="1"]:not([visual-level]),[visual-level="1"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-1)}:host(:is([level="2"]:not([visual-level]),[visual-level="2"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-2)}:host(:is([level="3"]:not([visual-level]),[visual-level="3"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-3)}:host(:is([level="4"]:not([visual-level]),[visual-level="4"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4)}:host(:is([level="5"]:not([visual-level]),[visual-level="5"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-5);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}:host(:is([level="6"]:not([visual-level]),[visual-level="6"])) .sbb-title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text)}`;
-let D = (() => {
-  var c, h, g, r;
-  let e = [B({
-    role: "heading"
-  })], t, s = [], l, v = O, b, k = [], o = [], _, z = [], x = [], w, S = [], L = [];
-  return r = class extends v {
-    constructor() {
-      super(...arguments);
-      f(this, c, n(this, k, "1"));
-      f(this, h, (n(this, o), n(this, z, null)));
-      f(this, g, (n(this, x), n(this, S, !1)));
-      n(this, L);
-    }
-    /** Title level */
-    get level() {
-      return u(this, c);
-    }
-    set level(a) {
-      p(this, c, a);
-    }
-    /** Visual level for the title. Optional, if not set, the value of level will be used. */
-    get visualLevel() {
-      return u(this, h);
-    }
-    set visualLevel(a) {
-      p(this, h, a);
-    }
-    /**
-     * Sometimes we need a title in the markup to present a proper hierarchy
-     * to the screen readers while we do not want to let that title appear
-     * visually. In this case we set visuallyHidden to true.
-     */
-    get visuallyHidden() {
-      return u(this, g);
-    }
-    set visuallyHidden(a) {
-      p(this, g, a);
-    }
-    willUpdate(a) {
-      super.willUpdate(a), a.has("level") && this.setAttribute("aria-level", this.level);
-    }
-    render() {
-      return A`
-      <div class="sbb-title">
-        <slot></slot>
-      </div>
-    `;
-    }
-  }, c = new WeakMap(), h = new WeakMap(), g = new WeakMap(), l = r, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    b = [y({ reflect: !0 })], _ = [y({ attribute: "visual-level", reflect: !0 })], w = [U(), y({ attribute: "visually-hidden", reflect: !0, type: Boolean })], d(r, null, b, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (i) => "level" in i, get: (i) => i.level, set: (i, m) => {
-      i.level = m;
-    } }, metadata: a }, k, o), d(r, null, _, { kind: "accessor", name: "visualLevel", static: !1, private: !1, access: { has: (i) => "visualLevel" in i, get: (i) => i.visualLevel, set: (i, m) => {
-      i.visualLevel = m;
-    } }, metadata: a }, z, x), d(r, null, w, { kind: "accessor", name: "visuallyHidden", static: !1, private: !1, access: { has: (i) => "visuallyHidden" in i, get: (i) => i.visuallyHidden, set: (i, m) => {
-      i.visuallyHidden = m;
-    } }, metadata: a }, S, L), d(null, t = { value: l }, e, { kind: "class", name: l.name, metadata: a }, null, s), l = t.value, a && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), r.styles = M, n(l, s), l;
-})();
-const N = E`:host{--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end)}:host([negative]){--sbb-title-text-color-normal: var(--sbb-color-milk)}:host(:where(:not([visually-hidden]))){--sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);--sbb-title-margin-block-end: var(--sbb-spacing-responsive-s)}:host(:where([level="1"]:not([visual-level]),[visual-level="1"]):where(:not([visually-hidden]))){--sbb-title-margin-block-start: var(--sbb-spacing-responsive-l)}:host(:where([level="2"]:not([visual-level]),[visual-level="2"]):where(:not([visually-hidden]))),:host(:where([level="3"]:not([visual-level]),[visual-level="3"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs)}:host(:where([level="4"]:not([visual-level]),[visual-level="4"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-3x)}:host(:where([level="5"]:not([visual-level]),[visual-level="5"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x)}:host(:where([level="6"]:not([visual-level]),[visual-level="6"]):where(:not([visually-hidden]))){--sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x)}`;
-let Q = (() => {
-  var b;
-  let e = [T("sbb-title")], t, s = [], l, v = j(D);
-  return b = class extends v {
-  }, l = b, (() => {
-    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    d(null, t = { value: l }, e, { kind: "class", name: l.name, metadata: o }, null, s), l = t.value, o && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), b.styles = [D.styles, N], n(l, s), l;
-})();
+import { SbbTitleElement as b } from "./title/title.js";
+import { SbbTitleBase as r } from "./title/title-base.js";
 export {
-  D as SbbTitleBase,
-  Q as SbbTitleElement
+  r as SbbTitleBase,
+  b as SbbTitleElement
 };

package/toast/toast.js

@@ -0,0 +1,195 @@
+var w = (i) => {
+  throw TypeError(i);
+};
+var $ = (i, o, e) => o.has(i) || w("Cannot " + e);
+var u = (i, o, e) => ($(i, o, "read from private field"), e ? e.call(i) : o.get(i)), f = (i, o, e) => o.has(i) ? w("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(i) : o.set(i, e), b = (i, o, e, r) => ($(i, o, "write to private field"), r ? r.call(i, e) : o.set(i, e), e);
+import { __esDecorate as g, __runInitializers as c } from "tslib";
+import { css as R, nothing as D, html as L } from "lit";
+import { customElement as K, property as _ } from "lit/decorators.js";
+import { SbbOpenCloseBaseElement as Y } from "../core/base-elements.js";
+import { SbbLanguageController as Z } from "../core/controllers.js";
+import { hostAttributes as j, slotState as U, forceType as P } from "../core/decorators.js";
+import { isFirefox as H, isZeroAnimationDuration as M, isLean as F } from "../core/dom.js";
+import { composedPathHasAttribute as X } from "../core/eventing.js";
+import { i18nCloseAlert as q } from "../core/i18n.js";
+import { SbbHydrationMixin as G } from "../core/mixins.js";
+import { SbbIconNameMixin as J } from "../icon.js";
+import "../button/transparent-button.js";
+const Q = R`*,:before,:after{box-sizing:border-box}:host{--sbb-toast-max-width: 25rem;--sbb-toast-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-toast-animation-timing-function: ease;--sbb-toast-color: var(--sbb-color-white);--sbb-toast-text-color: var(--sbb-color-milk);--sbb-toast-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-toast-margin: var(--sbb-spacing-responsive-s);--sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toast-border-radius: var(--sbb-border-radius-4x);--sbb-toast-container-display: none;--sbb-toast-container-position: fixed;--sbb-toast-horizontal-position: initial;--sbb-toast-vertical-position: initial;display:none}:host([data-state]:not([data-state=closed])){--sbb-toast-container-display: flex;display:block}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position: flex-start;--sbb-toast-vertical-position: flex-start}:host([position=top-center]){--sbb-toast-horizontal-position: center;--sbb-toast-vertical-position: flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position: flex-end;--sbb-toast-vertical-position: flex-start}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;top:0;right:0;bottom:0;left:0;display:var(--sbb-toast-container-display);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position)}.sbb-toast{z-index:var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);display:flex;color:var(--sbb-toast-color);background-color:var(--sbb-toast-background-color)}:host([data-state=opening]) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host([data-state=closing]) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast__icon{margin-inline-end:var(--sbb-spacing-fixed-2x);line-height:initial}:host(:not([data-slot-names~=icon],[icon-name])) .sbb-toast__icon{display:none}.sbb-toast__content{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);color:var(--sbb-toast-text-color);flex:1 1 0}.sbb-toast__action{position:relative;min-width:2.5rem}:host(:not([data-slot-names~=action],[dismissible])) .sbb-toast__action{display:none}::slotted([data-sbb-button]),.sbb-toast__action-button{margin-inline:var(--sbb-spacing-fixed-2x);position:absolute;top:-.625rem}::slotted(:is(sbb-link,sbb-link-button,sbb-link-static)){margin-inline-start:var(--sbb-spacing-fixed-4x)}@keyframes open{0%{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}to{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes close{0%{visibility:visible;opacity:1;transform:translateY(0)}to{visibility:hidden;opacity:0;transform:translateY(var(--sbb-spacing-fixed-2x))}}`, v = /* @__PURE__ */ new Set();
+let pt = (() => {
+  var d, m, p, h, n;
+  let i = [K("sbb-toast"), j({
+    popover: "manual"
+  }), U()], o, e = [], r, x = J(G(Y)), y, k = [], T = [], z, S = [], N = [], C, A = [], E = [], B, O = [], I = [];
+  return n = class extends x {
+    constructor() {
+      var t;
+      super();
+      f(this, d);
+      f(this, m);
+      f(this, p);
+      f(this, h);
+      b(this, d, c(this, k, 6e3)), b(this, m, (c(this, T), c(this, S, "bottom-center"))), b(this, p, (c(this, N), c(this, A, !1))), b(this, h, (c(this, E), c(this, O, "polite"))), this._closeTimeout = c(this, I), this._language = new Z(this), (t = this.addEventListener) == null || t.call(this, "click", (s) => this._onClick(s));
+    }
+    /**
+     * The length of time in milliseconds to wait before automatically dismissing the toast.
+     * If 0, it stays open indefinitely.
+     */
+    get timeout() {
+      return u(this, d);
+    }
+    set timeout(t) {
+      b(this, d, t);
+    }
+    /** The position where to place the toast. */
+    get position() {
+      return u(this, m);
+    }
+    set position(t) {
+      b(this, m, t);
+    }
+    /** Whether the toast has a close button. */
+    get dismissible() {
+      return u(this, p);
+    }
+    set dismissible(t) {
+      b(this, p, t);
+    }
+    /**
+     * The ARIA politeness level.
+     * Check https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions for further info
+     */
+    get politeness() {
+      return u(this, h);
+    }
+    set politeness(t) {
+      b(this, h, t);
+    }
+    /**
+     * Role of the live region. This is only for Firefox as there is a known issue where Firefox +
+     * JAWS does not read out aria-live message.
+     */
+    get _role() {
+      if (H) {
+        if (this.politeness === "polite")
+          return "status";
+        if (this.politeness === "assertive")
+          return "alert";
+      }
+    }
+    /**
+     * Open the toast.
+     * If there are other opened toasts in the page, close them first.
+     */
+    open() {
+      var t;
+      this.state === "closed" && this.willOpen.emit() && ((t = this.showPopover) == null || t.call(this), this.state = "opening", this._closeOtherToasts(), this._isZeroAnimationDuration() && this._handleOpening());
+    }
+    _isZeroAnimationDuration() {
+      return M(this, "--sbb-toast-animation-duration");
+    }
+    /**
+     * Close the toast.
+     */
+    close() {
+      this.state === "opened" && this.willClose.emit() && (clearTimeout(this._closeTimeout), this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
+    }
+    _handleClosing() {
+      var t;
+      this.state = "closed", (t = this.hidePopover) == null || t.call(this), this.didClose.emit();
+    }
+    _handleOpening() {
+      this.state = "opened", this.didOpen.emit(), this.timeout && (this._closeTimeout = setTimeout(() => this.close(), this.timeout));
+    }
+    // Close the toast on click of any element that has the 'sbb-toast-close' attribute.
+    _onClick(t) {
+      const s = X(t, "sbb-toast-close", this);
+      s && !s.hasAttribute("disabled") && this.close();
+    }
+    connectedCallback() {
+      super.connectedCallback(), v.add(this);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), clearTimeout(this._closeTimeout), v.delete(this);
+    }
+    /**
+     * Slotted text nodes are not read correctly by screen readers on Chrome.
+     * To address the problem, if there is at least a root text node,
+     * we wrap the whole content in a <span> tag
+     */
+    _onContentSlotChange(t) {
+      const s = t.target.assignedNodes();
+      if (s.some((a) => a.nodeType === Node.TEXT_NODE)) {
+        const a = document.createElement("span");
+        this.appendChild(a), a.append(...s);
+      }
+    }
+    _onActionSlotChange(t) {
+      const s = t.target.assignedNodes();
+      s.filter((l) => l.nodeName === "SBB-TRANSPARENT-BUTTON" || l.nodeName === "SBB-TRANSPARENT-BUTTON-LINK").forEach((l) => {
+        l.negative = !0, l.size = F() ? "s" : "m";
+      }), s.filter((l) => ["SBB-LINK", "SBB-LINK-BUTTON", "SBB-LINK-STATIC"].includes(l.nodeName)).forEach((l) => {
+        l.negative = !0;
+      });
+    }
+    // In rare cases it can be that the animationEnd event is triggered twice.
+    // To avoid entering a corrupt state, exit when state is not expected.
+    _onToastAnimationEnd(t) {
+      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
+    }
+    /**
+     * Since we do not stack toasts, we force the closing on other existing opened ones
+     */
+    _closeOtherToasts() {
+      v.forEach((t) => {
+        t.getAttribute("data-state") === "opened" && t.close();
+      });
+    }
+    render() {
+      return L`
+      <div class="sbb-toast__overlay-container">
+        ${/* Firefox needs 'role' to enable screen readers */
+      ""}
+        <div
+          class="sbb-toast"
+          role=${this._role ?? D}
+          @animationend=${this._onToastAnimationEnd}
+        >
+          <div class="sbb-toast__icon">${this.renderIconSlot()}</div>
+
+          <div class="sbb-toast__content" aria-live=${this.politeness}>
+            <slot @slotchange=${this._onContentSlotChange}></slot>
+          </div>
+
+          <div class="sbb-toast__action">
+            <slot name="action" @slotchange=${this._onActionSlotChange}>
+              ${this.dismissible ? L` <sbb-transparent-button
+                    class="sbb-toast__action-button"
+                    icon-name="cross-small"
+                    negative
+                    size="m"
+                    aria-label=${q[this._language.current]}
+                    sbb-toast-close
+                  ></sbb-transparent-button>` : D}
+            </slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+  }, d = new WeakMap(), m = new WeakMap(), p = new WeakMap(), h = new WeakMap(), r = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    y = [P(), _({ type: Number })], z = [_({ reflect: !0 })], C = [P(), _({ type: Boolean, reflect: !0 })], B = [_()], g(n, null, y, { kind: "accessor", name: "timeout", static: !1, private: !1, access: { has: (s) => "timeout" in s, get: (s) => s.timeout, set: (s, a) => {
+      s.timeout = a;
+    } }, metadata: t }, k, T), g(n, null, z, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (s) => "position" in s, get: (s) => s.position, set: (s, a) => {
+      s.position = a;
+    } }, metadata: t }, S, N), g(n, null, C, { kind: "accessor", name: "dismissible", static: !1, private: !1, access: { has: (s) => "dismissible" in s, get: (s) => s.dismissible, set: (s, a) => {
+      s.dismissible = a;
+    } }, metadata: t }, A, E), g(n, null, B, { kind: "accessor", name: "politeness", static: !1, private: !1, access: { has: (s) => "politeness" in s, get: (s) => s.politeness, set: (s, a) => {
+      s.politeness = a;
+    } }, metadata: t }, O, I), g(null, o = { value: r }, i, { kind: "class", name: r.name, metadata: t }, null, e), r = o.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.styles = Q, c(r, e), r;
+})();
+export {
+  pt as SbbToastElement
+};

package/toast.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './toast/toast.js';
 //# sourceMappingURL=toast.d.ts.map

package/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/elements/toast.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/elements/toast.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kBAAkB,CAAC"}