@sbb-esta/lyne-elements 2.11.0 → 3.0.0-next.0

package/time-input/time-input.component.js

@@ -1,130 +1,104 @@
-var T = (n) => {
-  throw TypeError(n);
-};
-var V = (n, s, a) => s.has(n) || T("Cannot " + a);
-var E = (n, s, a) => (V(n, s, "read from private field"), a ? a.call(n) : s.get(n)), g = (n, s, a) => s.has(n) ? T("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(n) : s.set(n, a), c = (n, s, a, u) => (V(n, s, "write to private field"), u ? u.call(n, a) : s.set(n, a), a);
-import { __runInitializers as m, __esDecorate as b } from "tslib";
-import { css as x, LitElement as H, isServer as R, html as M } from "lit";
-import { customElement as U, property as L, state as z } from "lit/decorators.js";
-import { ref as $ } from "lit/directives/ref.js";
-import { SbbIdReferenceController as P, SbbLanguageController as G } from "../core/controllers.js";
-import { EventEmitter as O, forwardEvent as k } from "../core/eventing.js";
-import { i18nTimeInputChange as j } from "../core/i18n.js";
-const q = x`: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}`, K = /[0-9.:,\-;_hH]/, W = /^([0-9]{1,2})([0-9]{2})$/, X = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let it = (() => {
-  var p, h, r;
-  let n = [U("sbb-time-input")], s, a = [], u, f = H, C = [], v, A = [], w = [], y, I = [], D = [], S;
-  var _ = (r = class extends f {
-    constructor() {
-      super(...arguments);
-      g(this, p);
-      g(this, h);
-      c(this, p, (m(this, C), m(this, A, null))), c(this, h, (m(this, w), m(this, I, null))), this._didChange = (m(this, D), new O(this, _.events.didChange, {
-        bubbles: !0,
-        cancelable: !0
-      })), this._validationChange = new O(this, _.events.validationChange, {
-        bubbles: !0,
-        composed: !1
-      }), this._inputAbortController = new AbortController(), this._inputIdReferenceController = new P(this, "input"), this._language = new G(this);
-    }
-    // TODO: Replace HTMLElement by HTMLInputElement
-    /** Reference of the native input connected to the datepicker. */
-    get input() {
-      return E(this, p);
-    }
-    set input(t) {
-      c(this, p, t);
-    }
-    get _inputElement() {
-      return E(this, h);
-    }
-    set _inputElement(t) {
-      c(this, h, t);
+import { __esDecorate as c, __runInitializers as h } from "tslib";
+import { css as p, LitElement as v, isServer as g } from "lit";
+import { customElement as b, property as A } from "lit/decorators.js";
+import { sbbLiveAnnouncer as m } from "../core/a11y.js";
+import { SbbLanguageController as T } from "../core/controllers.js";
+import { i18nTimeInputChange as y, i18nTimeInvalid as D, i18nTimeMax as E, i18nTimeMaxLength as V } from "../core/i18n.js";
+import { SbbFormAssociatedInputMixin as w } from "../core/mixins.js";
+const x = p`*,:before,:after{box-sizing:border-box}:host{display:inline-flex;min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center}@media (forced-colors: active){:host{color:FieldText}}:host(:disabled){cursor:default}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}@media (forced-colors: active){:host(:empty):after{color:GrayText}}`, S = /[0-9.:,\-;_hH]/, d = /[^0-9.:,\-;_hH]/g, C = /^([0-9]{1,2})([0-9]{2})$/, O = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let P = (() => {
+  var s;
+  let _ = [b("sbb-time-input")], r, l = [], i, n = w(v), o = [], u;
+  return s = class extends n {
+    /**
+     * The value of the time input. Reflects the current text value
+     * of this input.
+     */
+    set value(e) {
+      e = typeof e == "string" ? e.replace(d, "").substring(0, 5) : "", this._tryParseValue(e), !g && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatTime()), super.value = e;
+    }
+    get value() {
+      return super.value ?? "";
     }
     /** Formats the current input's value as date. */
-    set valueAsDate(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 }));
+    set valueAsDate(e) {
+      if (e instanceof Date && !isNaN(e.valueOf())) {
+        this._valueAsTime = {
+          hours: e.getHours(),
+          minutes: e.getMinutes()
+        };
+        const t = this._formatTime();
+        this.value !== t && (this.value = t);
+      } else
+        this._valueAsTime = null, this.value = "";
     }
     get valueAsDate() {
-      var t;
-      return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value)) ?? null;
+      if (this._valueAsTime && this._isTimeValid(this._valueAsTime)) {
+        const e = /* @__PURE__ */ new Date(0);
+        return e.setHours(this._valueAsTime.hours), e.setMinutes(this._valueAsTime.minutes), e;
+      } else
+        return null;
+    }
+    constructor() {
+      var e, t, a;
+      super(), this._valueAsTime = h(this, o), this._language = new T(this), (e = this.addEventListener) == null || e.call(this, "change", () => this._updateValueDateFormat(), { capture: !0 }), (t = this.addEventListener) == null || t.call(this, "change", () => m.announce(y(this.value)[this._language.current])), (a = this.addEventListener) == null || a.call(this, "keydown", (f) => this._preventCharInsert(f));
     }
     connectedCallback() {
-      super.connectedCallback(), this._configureInputElement();
+      super.connectedCallback(), this.inputMode || (this.inputMode = "numeric"), this.placeholder || (this.placeholder = "HH:MM");
     }
     disconnectedCallback() {
-      var t;
-      super.disconnectedCallback(), (t = this._inputAbortController) == null || t.abort(), this._inputElement = null;
-    }
-    requestUpdate(t, e, i) {
-      super.requestUpdate(t, e, i), !R && (!t || t === "input") && this.hasUpdated && this._configureInputElement();
-    }
-    _configureInputElement() {
-      var e, i, l, d;
-      const t = this.input instanceof HTMLInputElement ? this.input : this._inputIdReferenceController.find() ?? ((i = (e = this.closest) == null ? void 0 : e.call(this, "sbb-form-field")) == null ? void 0 : i.querySelector("input")) ?? null;
-      t !== this._inputElement && ((l = this._inputAbortController) == null || l.abort(), (d = this._inputElement) == null || d.removeAttribute("data-sbb-time-input"), this._inputElement = t, this._inputElement && (this._updateValue(this._inputElement.value), this._inputAbortController = 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", (o) => k(o, this), {
-        signal: this._inputAbortController.signal
-      }), this._inputElement.addEventListener("keydown", (o) => this._preventCharInsert(o), { signal: this._inputAbortController.signal }), this._inputElement.addEventListener("change", (o) => this._updateValue(o.target.value), {
-        signal: this._inputAbortController.signal,
-        capture: !0
-      }), this._inputElement.addEventListener("change", (o) => {
-        this._emitChange(o), this._updateAccessibilityMessage();
-      }, {
-        signal: this._inputAbortController.signal
-      })));
+      super.disconnectedCallback();
     }
-    /**
-     * 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), l = !t || t.trim() === "" || i;
-      l && e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this._inputElement, this._formatValue(e)), this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })));
-      const d = !this._inputElement.hasAttribute("data-sbb-invalid");
-      this._inputElement.toggleAttribute("data-sbb-invalid", !l), d !== l && this._validationChange.emit({ valid: l });
-    }
-    /** Emits the change event. */
-    _emitChange(t) {
-      k(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));
+    updateFormValue() {
+      this._tryParseValue();
+      const e = this.valueAsDate !== null ? this._formatTime() : null;
+      this.internals.setFormValue(e, this.value);
     }
-    /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
-    _isTimeValid(t) {
-      return t.hours < 24 && t.minutes < 60;
+    _tryParseValue(e = this.value) {
+      var t;
+      ((t = this._valueCache) == null ? void 0 : t[0]) !== e && (this._valueAsTime = this._parseValue(e), this._valueCache = [e, this._valueAsTime ?? null]);
     }
     /** Validate input against the defined RegExps. */
-    _parseInput(t) {
-      const e = t == null ? void 0 : t.trim();
-      if (!e)
+    _parseValue(e) {
+      const t = e == null ? void 0 : e.trim();
+      if (!t)
         return null;
-      const i = e.match(W);
-      if (i)
-        return { hours: +i[1] || 0, minutes: +i[2] || 0 };
-      const l = e.match(X);
-      return l ? { hours: +l[1] || 0, minutes: +l[2] || 0 } : null;
+      const a = t.match(C) ?? t.match(O);
+      return a ? { hours: +a[1] || 0, minutes: +a[2] || 0 } : null;
+    }
+    _updateValueDateFormat() {
+      if (this.valueAsDate) {
+        const e = this._formatTime();
+        this.value !== e && (super.value = e);
+      }
+    }
+    _formatTime() {
+      const e = this.valueAsDate;
+      if (!e)
+        return "";
+      const t = String(e.getHours()).padStart(2, "0"), a = String(e.getMinutes()).padStart(2, "0");
+      return `${t}:${a}`;
+    }
+    preparePastedText(e) {
+      var t;
+      return e.replace(d, "").substring(0, 5 - (((t = this.textContent) == null ? void 0 : t.length) ?? 0));
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || ["valueAsDate", "min", "max", "dateFilter"].includes(e);
+    }
+    validate() {
+      super.validate(), this.value ? this._valueAsTime ? this._isTimeValid(this._valueAsTime) ? this._removeValidityErrors() : this.setValidityFlag("rangeOverflow", E[this.language.current]) : this.setValidityFlag("badInput", D[this.language.current]) : this._removeValidityErrors();
+    }
+    _removeValidityErrors() {
+      ["badInput", "rangeOverflow"].forEach((e) => this.removeValidityFlag(e));
+    }
+    /** Checks if values of hours and minutes are possible, to avoid non-existent times. */
+    _isTimeValid(e) {
+      return e.hours < 24 && e.minutes < 60;
     }
     /**  Only allow typing numbers and separator keys. */
-    _preventCharInsert(t) {
-      const e = [
+    _preventCharInsert(e) {
+      const t = [
         "Backspace",
         "Tab",
         "Enter",
@@ -138,37 +112,20 @@ let it = (() => {
         "PageDown",
         "Delete"
       ];
-      !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !K.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 = `${j[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
-    }
-    render() {
-      return M`
-      <p
-        role="status"
-        ${$((t) => this._statusContainer = t)}
-      ></p>
-    `;
-    }
-  }, p = new WeakMap(), h = new WeakMap(), u = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    v = [L()], y = [z()], S = [L({ attribute: !1 })], b(r, null, v, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, get: (e) => e.input, set: (e, i) => {
-      e.input = i;
-    } }, metadata: t }, A, w), b(r, null, y, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, i) => {
-      e._inputElement = i;
-    } }, metadata: t }, I, D), b(r, null, S, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, i) => {
-      e.valueAsDate = i;
-    } }, metadata: t }, null, C), b(null, s = { value: u }, n, { kind: "class", name: u.name, metadata: t }, null, a), _ = u = s.value, t && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = q, r.events = {
-    didChange: "didChange",
-    validationChange: "validationChange"
-  }, m(u, a), r);
-  return _ = u;
+      e.ctrlKey || e.altKey || e.metaKey || t.includes(e.key) || S.test(e.key) && (this.value.length < 5 || this._hasSelection()) || (e.preventDefault(), this.value.length >= 5 && m.announce(V[this._language.current]));
+    }
+    _hasSelection() {
+      var t;
+      const e = (t = window.getSelection()) == null ? void 0 : t.getRangeAt(0);
+      return !!e && e.startOffset !== e.endOffset;
+    }
+  }, i = s, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    u = [A({ attribute: !1 })], c(s, null, u, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (t) => "valueAsDate" in t, set: (t, a) => {
+      t.valueAsDate = a;
+    } }, metadata: e }, null, o), c(null, r = { value: i }, _, { kind: "class", name: i.name, metadata: e }, null, l), i = r.value, e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.styles = x, h(i, l), i;
 })();
 export {
-  it as SbbTimeInputElement
+  P as SbbTimeInputElement
 };

package/title/title-base.d.ts

@@ -1,11 +1,13 @@
 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').SbbElementInternalsMixinType> & typeof LitElement & import('../core/mixins.js').SbbElementInternalsConstructor;
 /**
  * It displays a title with a heading role.
  *
  * @slot - Use the unnamed slot to place the content of the title.
  */
-export declare abstract class SbbTitleBase extends LitElement {
+export declare abstract class SbbTitleBase extends SbbTitleBase_base {
+    static role: string;
     static styles: CSSResultGroup;
     /** Title level */
     accessor level: SbbTitleLevel;
@@ -20,4 +22,5 @@ export declare abstract class SbbTitleBase extends LitElement {
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }
+export {};
 //# sourceMappingURL=title-base.d.ts.map

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

@@ -1 +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;AAQjC,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE9D;;;;GAIG;AACH,8BAIe,YAAa,SAAQ,UAAU;IAC5C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,kBAAkB;IAClB,SAA6C,KAAK,EAAE,aAAa,CAAO;IAExE,yFAAyF;IACzF,SACgB,WAAW,EAAE,aAAa,GAAG,IAAI,CAAQ;IAEzD;;;;OAIG;IACH,SAEgB,cAAc,EAAE,OAAO,CAAS;cAE7B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAO5C"}
+{"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,8BAAsB,YAAa,SAAQ,iBAAoC;IAC7E,OAAuB,IAAI,SAAa;IACxC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,kBAAkB;IAClB,SAA6C,KAAK,EAAE,aAAa,CAAO;IAExE,yFAAyF;IACzF,SACgB,WAAW,EAAE,aAAa,GAAG,IAAI,CAAQ;IAEzD;;;;OAIG;IACH,SAEgB,cAAc,EAAE,OAAO,CAAS;cAE7B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAO5C"}

package/title/title-base.js

@@ -1,37 +1,36 @@
-var S = (t) => {
+var x = (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";
+var w = (t, i, s) => i.has(t) || x("Cannot " + s);
+var c = (t, i, s) => (w(t, i, "read from private field"), s ? s.call(t) : i.get(t)), g = (t, i, s) => i.has(t) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, s), m = (t, i, s, r) => (w(t, i, "write to private field"), r ? r.call(t, s) : i.set(t, s), s);
+import { __esDecorate as f, __runInitializers as b } from "tslib";
+import { css as L, LitElement as H } 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 {
+import { html as I } from "lit/static-html.js";
+import { forceType as j } from "../core/decorators.js";
+import { SbbElementInternalsMixin as E } from "../core/mixins.js";
+const O = L`*,: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 G = (() => {
+  var n, o, v, a;
+  let t = E(H), i, s = [], r = [], u, p = [], y = [], k, z = [], _ = [];
+  return a = class extends t {
     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);
+      g(this, n, b(this, s, "1"));
+      g(this, o, (b(this, r), b(this, p, null)));
+      g(this, v, (b(this, y), b(this, z, !1)));
+      b(this, _);
     }
     /** Title level */
     get level() {
-      return h(this, n);
+      return c(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);
+      return c(this, o);
     }
     set visualLevel(l) {
       m(this, o, l);
@@ -42,32 +41,32 @@ let K = (() => {
      * visually. In this case we set visuallyHidden to true.
      */
     get visuallyHidden() {
-      return h(this, v);
+      return c(this, v);
     }
     set visuallyHidden(l) {
       m(this, v, l);
     }
     willUpdate(l) {
-      super.willUpdate(l), l.has("level") && this.setAttribute("aria-level", this.level);
+      super.willUpdate(l), l.has("level") && (this.internals.ariaLevel = this.level);
     }
     render() {
-      return j`
+      return I`
       <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;
+  }, n = new WeakMap(), o = new WeakMap(), v = new WeakMap(), (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    i = [d({ reflect: !0 })], u = [d({ attribute: "visual-level", reflect: !0 })], k = [j(), d({ attribute: "visually-hidden", reflect: !0, type: Boolean })], f(a, null, i, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (e) => "level" in e, get: (e) => e.level, set: (e, h) => {
+      e.level = h;
+    } }, metadata: l }, s, r), f(a, null, u, { kind: "accessor", name: "visualLevel", static: !1, private: !1, access: { has: (e) => "visualLevel" in e, get: (e) => e.visualLevel, set: (e, h) => {
+      e.visualLevel = h;
+    } }, metadata: l }, p, y), f(a, null, k, { kind: "accessor", name: "visuallyHidden", static: !1, private: !1, access: { has: (e) => "visuallyHidden" in e, get: (e) => e.visuallyHidden, set: (e, h) => {
+      e.visuallyHidden = h;
+    } }, metadata: l }, z, _), l && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), a.role = "heading", a.styles = O, a;
 })();
 export {
-  K as SbbTitleBase
+  G as SbbTitleBase
 };

package/toast/toast.component.d.ts

@@ -3,7 +3,7 @@ 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> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
+declare const SbbToastElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbReadonlyMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays a toast notification.
  *
@@ -22,13 +22,12 @@ 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.
+     * If 0 (default), it stays open indefinitely.
+     * From accessibility perspective, it is recommended to set a timeout of at least 20 seconds.
      */
     accessor timeout: number;
     /** The position where to place the toast. */
     accessor position: SbbToastPosition;
-    /** Whether the toast has a close button. */
-    accessor 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

package/toast/toast.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.component.d.ts","sourceRoot":"","sources":["../../../src/elements/toast/toast.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAYnE,OAAO,iCAAiC,CAAC;AAEzC,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,qBAMM,eAAgB,SAAQ,oBAA4D;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAEgB,OAAO,EAAE,MAAM,CAAQ;IAEvC,6CAA6C;IAC7C,SAA6C,QAAQ,EAAE,gBAAgB,CAAmB;IAE1F,4CAA4C;IAC5C,SAEgB,WAAW,EAAE,OAAO,CAAS;IAE7C;;;OAGG;IACH,SAA4B,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAY;IAElF,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;;IAOpC,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;cAQzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E;;;OAGG;IACI,IAAI,IAAI,IAAI;IAoBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAkBpB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,wBAAwB;IAIhC;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAyB3B,OAAO,CAAC,oBAAoB;IAS5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;cAQN,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"toast.component.d.ts","sourceRoot":"","sources":["../../../src/elements/toast/toast.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAYnE,OAAO,iCAAiC,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,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,qBAEM,eAAgB,SAAQ,oBAE7B;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;;OAIG;IACH,SAEgB,OAAO,EAAE,MAAM,CAAK;IAEpC,6CAA6C;IAC7C,SAA6C,QAAQ,EAAE,gBAAgB,CAAmB;IAE1F;;;OAGG;IACH,SAA4B,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAY;IAElF,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,SAAS,CAAmC;;IAOpC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;cAQzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E;;;OAGG;IACI,IAAI,IAAI,IAAI;IAoBnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAkBpB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,wBAAwB;IAIhC;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAyB3B,OAAO,CAAC,oBAAoB;IAS5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;cAQN,MAAM,IAAI,cAAc;CAgC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}