@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/time-input/time-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/elements/time-input/time-input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,uBAAuB,CAAC;AAanF;;;;;GAKG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,iEAAiE;IACjE,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAG3C;IACD,IAAW,KAAK,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAE9C;IACD,OAAO,CAAC,MAAM,CAAqC;IAE1C,OAAO,CAAC,aAAa,CAAiC;IAE/D;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,4DAA4D;IAC5D,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAO,CAAC,gBAAgB,CAAwB;IAChD,OAAO,CAAC,gBAAgB,CAAyB;IACjD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5C,yDAAyD;IAElD,cAAc,IAAI,IAAI,GAAG,IAAI;IAIpC,4DAA4D;IACrD,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAgB9C,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,qBAAqB;IAqC7B,wEAAwE;IACxE,OAAO,CAAC,yBAAyB;IAMjC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAuBpB,8BAA8B;IAC9B,OAAO,CAAC,WAAW;IAKnB,yDAAyD;IACzD,OAAO,CAAC,YAAY;IAMpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAQ1B,uFAAuF;IACvF,OAAO,CAAC,YAAY;IAIpB,kDAAkD;IAClD,OAAO,CAAC,WAAW;IAoBnB,qDAAqD;IACrD,OAAO,CAAC,kBAAkB;IA6B1B,OAAO,CAAC,2BAA2B;cAWhB,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/time-input.d.ts

@@ -0,0 +1,2 @@
+export * from './time-input/time-input.js';
+//# sourceMappingURL=time-input.d.ts.map

package/time-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../src/elements/time-input.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/time-input.js

@@ -0,0 +1,176 @@
+import { css as p, LitElement as m, html as _ } from "lit";
+import { property as d, state as c, customElement as E } from "lit/decorators.js";
+import { ref as g } from "lit/directives/ref.js";
+import { SbbLanguageController as b } from "./core/controllers.js";
+import { findInput as f } from "./core/dom.js";
+import { EventEmitter as o, forwardEventToHost as h } from "./core/eventing.js";
+import { i18nTimeInputChange as C } from "./core/i18n.js";
+const w = p`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`;
+var v = Object.defineProperty, A = Object.getOwnPropertyDescriptor, u = (t, e, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? A(e, i) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (s = (n ? l(e, i, s) : l(s)) || s);
+  return n && s && v(e, i, s), s;
+};
+const V = /[0-9.:,\-;_hH]/, y = /^([0-9]{1,2})([0-9]{2})$/, I = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let r = class extends m {
+  constructor() {
+    super(...arguments), this._input = null, this._inputElement = null, this._didChange = new o(this, r.events.didChange, {
+      bubbles: !0,
+      cancelable: !0
+    }), this._validationChange = new o(
+      this,
+      r.events.validationChange,
+      {
+        bubbles: !0,
+        composed: !1
+      }
+    ), this._abortController = new AbortController(), this._language = new b(this);
+  }
+  set input(t) {
+    this._input = t, this._findInputElement();
+  }
+  get input() {
+    return this._input;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._findInputElement(), this._inputElement && this._updateValue(this._inputElement.value);
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
+  }
+  /** Gets the input value with the correct date format. */
+  // TODO: refactor this to be a get/set
+  getValueAsDate() {
+    var t;
+    return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value));
+  }
+  /** Set the input value to the correctly formatted value. */
+  setValueAsDate(t) {
+    if (!t || !this._inputElement)
+      return;
+    const e = t instanceof Date ? t : new Date(t);
+    this._inputElement.value = this._formatValue({
+      hours: e.getHours(),
+      minutes: e.getMinutes()
+    }), this._inputElement.dispatchEvent(new FocusEvent("blur", { composed: !0 }));
+  }
+  _findInputElement() {
+    const t = this._inputElement;
+    this._inputElement = f(this, this.input), t !== this._inputElement && this._registerInputElement();
+  }
+  _registerInputElement() {
+    var t;
+    (t = this._abortController) == null || t.abort(), this._inputElement && (this._abortController = new AbortController(), this._inputElement.toggleAttribute("data-sbb-time-input", !0), this._inputElement.type = "text", this._inputElement.inputMode = "numeric", this._inputElement.maxLength = 5, this._inputElement.placeholder || (this._inputElement.placeholder = "HH:MM"), this._inputElement.addEventListener(
+      "input",
+      (e) => h(e, this),
+      { signal: this._abortController.signal }
+    ), this._inputElement.addEventListener(
+      "keydown",
+      (e) => this._preventCharInsert(e),
+      { signal: this._abortController.signal }
+    ), this._inputElement.addEventListener(
+      "change",
+      (e) => this._updateValueAndEmitChange(e),
+      {
+        signal: this._abortController.signal
+      }
+    ));
+  }
+  /** Applies the correct format to values and triggers event dispatch. */
+  _updateValueAndEmitChange(t) {
+    this._updateValue(t.target.value), this._emitChange(t), this._updateAccessibilityMessage();
+  }
+  /**
+   * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
+   * to force the input change when the typed value is the same of the current one.
+   */
+  _updateValue(t) {
+    if (this._statusContainer && (this._statusContainer.innerText = ""), !this._inputElement)
+      return;
+    const e = this._parseInput(t), i = !!e && this._isTimeValid(e), n = !t || t.trim() === "" || i;
+    n && e && (this._inputElement.value = this._formatValue(e));
+    const s = !this._inputElement.hasAttribute("data-sbb-invalid");
+    this._inputElement.toggleAttribute("data-sbb-invalid", !n), s !== n && this._validationChange.emit({ valid: n });
+  }
+  /** Emits the change event. */
+  _emitChange(t) {
+    h(t, this), this._didChange.emit();
+  }
+  /** Returns the right format for the `value` property. */
+  _formatValue(t) {
+    const e = String(t.hours).padStart(2, "0"), i = String(t.minutes).padStart(2, "0");
+    return `${e}:${i}`;
+  }
+  /**
+   * Returns the right format for the `valueAsDate` property:
+   * sets the start date at 01.01.1970, then adds the typed hours/minutes.
+   */
+  _formatValueAsDate(t) {
+    return !t || !this._isTimeValid(t) ? null : new Date((/* @__PURE__ */ new Date(0)).setHours(t.hours, t.minutes, 0, 0));
+  }
+  /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
+  _isTimeValid(t) {
+    return t.hours < 24 && t.minutes < 60;
+  }
+  /** Validate input against the defined RegExps. */
+  _parseInput(t) {
+    const e = t == null ? void 0 : t.trim();
+    if (!e)
+      return null;
+    const i = e.match(y);
+    if (i)
+      return { hours: +i[1] || 0, minutes: +i[2] || 0 };
+    const n = e.match(I);
+    return n ? { hours: +n[1] || 0, minutes: +n[2] || 0 } : null;
+  }
+  /**  Only allow typing numbers and separator keys. */
+  _preventCharInsert(t) {
+    const e = [
+      "Backspace",
+      "Tab",
+      "Enter",
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "Home",
+      "End",
+      "PageUp",
+      "PageDown",
+      "Delete"
+    ];
+    !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !V.test(t.key) && t.preventDefault();
+  }
+  // We use a programmatic approach to avoid initial setting the message
+  // and to not immediately change output if language should change (no reason to read out message).
+  _updateAccessibilityMessage() {
+    var e;
+    this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${C[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
+  }
+  render() {
+    return _`
+      <p
+        role="status"
+        ${g((t) => this._statusContainer = t)}
+      ></p>
+    `;
+  }
+};
+r.styles = w;
+r.events = {
+  didChange: "didChange",
+  validationChange: "validationChange"
+};
+u([
+  d()
+], r.prototype, "input", 1);
+u([
+  c()
+], r.prototype, "_inputElement", 2);
+r = u([
+  E("sbb-time-input")
+], r);
+export {
+  r as SbbTimeInputElement
+};

package/timetable-occupancy/timetable-occupancy.d.ts

@@ -0,0 +1,23 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbOccupancy } from '../core/interfaces.js';
+
+declare const SbbTimetableOccupancyElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
+/**
+ * Used in `sbb-timetable-row`, it displays information about wagon occupancy.
+ */
+export declare class SbbTimetableOccupancyElement extends SbbTimetableOccupancyElement_base {
+    static styles: CSSResultGroup;
+    /** Occupancy for first class wagons. */
+    firstClassOccupancy?: SbbOccupancy;
+    /** Occupancy for second class wagons. */
+    secondClassOccupancy?: SbbOccupancy;
+    private _language;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-timetable-occupancy': SbbTimetableOccupancyElement;
+    }
+}
+export {};
+//# sourceMappingURL=timetable-occupancy.d.ts.map

package/timetable-occupancy/timetable-occupancy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-occupancy.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy/timetable-occupancy.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;;AAExC;;GAEG;AACH,qBACa,4BAA6B,SAAQ,iCAA4B;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wCAAwC;IACiB,mBAAmB,CAAC,EAAE,YAAY,CAAC;IAE5F,yCAAyC;IACiB,oBAAoB,CAAC,EAAE,YAAY,CAAC;IAE9F,OAAO,CAAC,SAAS,CAAmC;cAEjC,MAAM,IAAI,cAAc;CAkC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,yBAAyB,EAAE,4BAA4B,CAAC;KACzD;CACF"}

package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts

@@ -0,0 +1,27 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { SbbOccupancy } from '../core/interfaces.js';
+import { SbbIconBase } from '../icon.js';
+
+declare const SbbTimetableOccupancyIconElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof SbbIconBase;
+/**
+ * It displays a wagon's occupancy icon.
+ */
+export declare class SbbTimetableOccupancyIconElement extends SbbTimetableOccupancyIconElement_base {
+    static styles: CSSResultGroup;
+    /** Wagon occupancy. */
+    occupancy: SbbOccupancy;
+    private _abort;
+    private _language;
+    private _setNameAndAriaLabel;
+    protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
+    private _setAriaLabel;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-timetable-occupancy-icon': SbbTimetableOccupancyIconElement;
+    }
+}
+export {};
+//# sourceMappingURL=timetable-occupancy-icon.d.ts.map

package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy-icon/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;;AAIzC;;GAEG;AACH,qBACa,gCAAiC,SAAQ,qCAA6B;IACjF,OAAuB,MAAM,EAAE,cAAc,CAA+B;IAE5E,uBAAuB;IACJ,SAAS,EAAG,YAAY,CAAC;IAE5C,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAA2E;YAE9E,oBAAoB;cAoBT,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAKvF,OAAO,CAAC,aAAa;IAOL,iBAAiB,IAAI,IAAI;cAetB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}

package/timetable-occupancy-icon.d.ts

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

package/timetable-occupancy-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../src/elements/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,cAAc,wDAAwD,CAAC"}

package/timetable-occupancy-icon.js

@@ -0,0 +1,53 @@
+import { property as h, customElement as m } from "lit/decorators.js";
+import { SbbConnectedAbortController as b, SbbLanguageController as p } from "./core/controllers.js";
+import { setOrRemoveAttribute as d } from "./core/dom.js";
+import { i18nOccupancy as f } from "./core/i18n.js";
+import { SbbNegativeMixin as u } from "./core/mixins.js";
+import { SbbIconBase as n } from "./icon.js";
+import { css as g } from "lit";
+const v = g`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? w(t, i) : t, c = e.length - 1, o; c >= 0; c--)
+    (o = e[c]) && (a = (r ? o(t, i, a) : o(a)) || a);
+  return r && a && _(t, i, a), a;
+};
+let s = class extends u(n) {
+  constructor() {
+    super(...arguments), this._abort = new b(this), this._language = new p(this).withHandler(() => this._setAriaLabel());
+  }
+  async _setNameAndAriaLabel() {
+    var t, i;
+    if (!this.occupancy)
+      return;
+    let e = `utilization-${this.occupancy}`;
+    (t = globalThis.window) != null && t.matchMedia("(forced-colors: active)").matches ? e += "-high-contrast" : (this.negative || (i = globalThis.window) != null && i.matchMedia("(prefer-color-scheme: dark)").matches) && (e += "-negative"), await this.loadSvgIcon(e);
+  }
+  async fetchSvgIcon(e, t) {
+    return this._setAriaLabel(), super.fetchSvgIcon(e, t);
+  }
+  _setAriaLabel() {
+    var t;
+    const e = (t = f[this.occupancy]) == null ? void 0 : t[this._language.current];
+    d(this, "aria-label", e);
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.matchMedia("(forced-colors: active)").addEventListener("change", () => this._setNameAndAriaLabel(), {
+      signal: this._abort.signal
+    }), window.matchMedia("(prefer-color-scheme: dark)").addEventListener("change", () => this._setNameAndAriaLabel(), {
+      signal: this._abort.signal
+    }), this._setNameAndAriaLabel();
+  }
+  willUpdate(e) {
+    super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
+  }
+};
+s.styles = [n.styles, v];
+l([
+  h()
+], s.prototype, "occupancy", 2);
+s = l([
+  m("sbb-timetable-occupancy-icon")
+], s);
+export {
+  s as SbbTimetableOccupancyIconElement
+};

package/timetable-occupancy.d.ts

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

package/timetable-occupancy.d.ts.map

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

package/timetable-occupancy.js

@@ -0,0 +1,58 @@
+import { css as p, LitElement as m, html as r, nothing as y } from "lit";
+import { property as b, customElement as u } from "lit/decorators.js";
+import { SbbLanguageController as f } from "./core/controllers.js";
+import { i18nClass as h } from "./core/i18n.js";
+import { SbbNegativeMixin as g } from "./core/mixins.js";
+import "./screen-reader-only.js";
+import "./timetable-occupancy-icon.js";
+const v = p`*,:before,:after{box-sizing:border-box}:host{--sbb-timetable-occupancy-color: var(--sbb-color-charcoal);--sbb-icon-svg-width: .890625rem;--sbb-icon-svg-height: v0.75rem;display:inline-block}@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}`;
+var d = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? _(t, a) : t, n = e.length - 1, o; n >= 0; n--)
+    (o = e[n]) && (s = (i ? o(t, a, s) : o(s)) || s);
+  return i && s && d(t, a, s), s;
+};
+let c = class extends g(m) {
+  constructor() {
+    super(...arguments), this._language = new f(this);
+  }
+  render() {
+    return r` ${(this.firstClassOccupancy || this.secondClassOccupancy) && r`
+      <ul
+        class="sbb-timetable-occupancy__list"
+        role=${!this.firstClassOccupancy || !this.secondClassOccupancy ? "presentation" : y}
+      >
+        ${[this.firstClassOccupancy, this.secondClassOccupancy].map(
+      (e, t) => e && r`
+              <li class="sbb-timetable-occupancy__list-item">
+                <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
+                  ${this.firstClassOccupancy && t === 0 ? "1" : "2"}.
+                </span>
+                <sbb-screen-reader-only>
+                  ${`${h[this.firstClassOccupancy && t === 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=${e}
+                >
+                </sbb-timetable-occupancy-icon>
+              </li>
+            `
+    )}
+      </ul>
+    `}`;
+  }
+};
+c.styles = v;
+l([
+  b({ attribute: "first-class-occupancy" })
+], c.prototype, "firstClassOccupancy", 2);
+l([
+  b({ attribute: "second-class-occupancy" })
+], c.prototype, "secondClassOccupancy", 2);
+c = l([
+  u("sbb-timetable-occupancy")
+], c);
+export {
+  c as SbbTimetableOccupancyElement
+};

package/title/title-base.d.ts

@@ -0,0 +1,26 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+
+export type SbbTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
+declare const SbbTitleBase_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
+/**
+ * It displays a title with a heading role.
+ *
+ * @slot - Use the unnamed slot to display the title.
+ */
+export declare abstract class SbbTitleBase extends SbbTitleBase_base {
+    static styles: CSSResultGroup;
+    /** Title level */
+    level: SbbTitleLevel;
+    /** Visual level for the title. Optional, if not set, the value of level will be used. */
+    visualLevel?: SbbTitleLevel;
+    /**
+     * 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.
+     */
+    visuallyHidden?: boolean;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=title-base.d.ts.map

package/title/title-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-base.d.ts","sourceRoot":"","sources":["../../../src/elements/title/title-base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AASjC,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;;AAE9D;;;;GAIG;AACH,8BAGsB,YAAa,SAAQ,iBAA4B;IACrE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,kBAAkB;IACkB,KAAK,EAAE,aAAa,CAAO;IAE/D,yFAAyF;IAElF,WAAW,CAAC,EAAE,aAAa,CAAC;IAEnC;;;;OAIG;IAEI,cAAc,CAAC,EAAE,OAAO,CAAC;cAEb,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAW5C"}

package/title/title.d.ts

@@ -0,0 +1,16 @@
+import { CSSResultGroup } from 'lit';
+import { SbbTitleBase } from './title-base.js';
+
+/**
+ * @cssprop [--sbb-title-margin-block-start=var(--sbb-spacing-responsive-m)] - Margin block start of the title.
+ * @cssprop [--sbb-title-margin-block-end=var(--sbb-spacing-responsive-s)] - Margin block end of the title.
+ */
+export declare class SbbTitleElement extends SbbTitleBase {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-title': SbbTitleElement;
+    }
+}
+//# sourceMappingURL=title.d.ts.map

package/title/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../src/elements/title/title.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C;;;GAGG;AACH,qBACa,eAAgB,SAAQ,YAAY;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAgC;CAC9E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/title.d.ts

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

package/title.d.ts.map

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

package/title.js

@@ -0,0 +1,58 @@
+import { property as v, customElement as m } from "lit/decorators.js";
+import { css as g, LitElement as c } from "lit";
+import { html as f, unsafeStatic as h } from "lit/static-html.js";
+import { hostAttributes as p } from "./core/decorators.js";
+import { SbbNegativeMixin as d } from "./core/mixins.js";
+const y = g`*,: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([negative]){--sbb-title-text-color-normal: var(--sbb-color-milk)}: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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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)}`;
+var u = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, i, b, l) => {
+  for (var t = l > 1 ? void 0 : l ? k(i, b) : i, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (t = (l ? a(i, b, t) : a(t)) || t);
+  return l && t && u(i, b, t), t;
+};
+let s = class extends d(c) {
+  constructor() {
+    super(...arguments), this.level = "1";
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("level") && this.setAttribute("aria-level", this.level);
+  }
+  render() {
+    const e = `h${this.level}`;
+    return f`
+      <${h(e)} class="sbb-title" role="presentation">
+        <slot></slot>
+      </${h(e)}>
+    `;
+  }
+};
+s.styles = y;
+n([
+  v({ reflect: !0 })
+], s.prototype, "level", 2);
+n([
+  v({ attribute: "visual-level", reflect: !0 })
+], s.prototype, "visualLevel", 2);
+n([
+  v({ attribute: "visually-hidden", reflect: !0, type: Boolean })
+], s.prototype, "visuallyHidden", 2);
+s = n([
+  p({
+    role: "heading"
+  })
+], s);
+const w = g`: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(: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)}`;
+var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, _ = (e, i, b, l) => {
+  for (var t = l > 1 ? void 0 : l ? z(i, b) : i, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (t = (l ? a(i, b, t) : a(t)) || t);
+  return l && t && x(i, b, t), t;
+};
+let r = class extends s {
+};
+r.styles = [s.styles, w];
+r = _([
+  m("sbb-title")
+], r);
+export {
+  s as SbbTitleBase,
+  r as SbbTitleElement
+};

package/toast/toast.d.ts

@@ -0,0 +1,79 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
+
+type SbbToastPositionVertical = 'top' | 'bottom';
+type SbbToastPositionHorizontal = 'left' | 'start' | 'center' | 'right' | 'end';
+export type SbbToastPosition = `${SbbToastPositionVertical}-${SbbToastPositionHorizontal}`;
+declare const SbbToastElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & typeof SbbOpenCloseBaseElement;
+/**
+ * It displays a toast notification.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-toast`.
+ * @slot icon - Assign a custom icon via slot.
+ * @slot action - Provide a custom action for this toast.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-toast` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-toast` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-toast` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-toast` is closed.
+ * @cssprop [--sbb-toast-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+export declare class SbbToastElement extends SbbToastElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The length of time in milliseconds to wait before automatically dismissing the toast.
+     * If 0, it stays open indefinitely.
+     */
+    timeout: number;
+    /** The position where to place the toast. */
+    position: SbbToastPosition;
+    /** Whether the toast has a close button. */
+    dismissible: boolean;
+    /**
+     * The ARIA politeness level.
+     * Check https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions for further info
+     */
+    politeness: 'polite' | 'assertive' | 'off';
+    private _closeTimeout?;
+    private _abort;
+    private _language;
+    /**
+     * 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.
+     */
+    private get _role();
+    /**
+     * Open the toast.
+     * If there are other opened toasts in the page, close them first.
+     */
+    open(): void;
+    /**
+     * Close the toast.
+     */
+    close(): void;
+    private _onClick;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * 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
+     */
+    private _onContentSlotChange;
+    private _onActionSlotChange;
+    private _onToastAnimationEnd;
+    /**
+     * Since we do not stack toasts, we force the closing on other existing opened ones
+     */
+    private _closeOtherToasts;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-toast': SbbToastElement;
+    }
+}
+export {};
+//# sourceMappingURL=toast.d.ts.map

package/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/elements/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAWnE,OAAO,iCAAiC,CAAC;AAIzC,KAAK,wBAAwB,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjD,KAAK,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAChF,MAAM,MAAM,gBAAgB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;;AAK3F;;;;;;;;;;;;;GAaG;AACH,qBACa,eAAgB,SAAQ,oBAAyC;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgC,OAAO,SAAQ;IAElD,6CAA6C;IACT,QAAQ,EAAE,gBAAgB,CAAmB;IAEjF,4CAA4C;IACO,WAAW,UAAS;IAEvE;;;OAGG;IACgB,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAY;IAEzE,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,KAAK,KAAK,GAUhB;IAED;;;OAGG;IACI,IAAI,IAAI,IAAI;IAYnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB,OAAO,CAAC,QAAQ;;IAaA,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAQ5C;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAyB3B,OAAO,CAAC,oBAAoB;IAmB5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;cAQN,MAAM,IAAI,cAAc;CAiC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/toast.d.ts

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

package/toast.d.ts.map

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