@sbb-esta/lyne-elements 2.3.0 → 2.5.0

package/time-input.js

@@ -1,41 +1,41 @@
 var v = (n) => {
   throw TypeError(n);
 };
-var w = (n, i, s) => i.has(n) || v("Cannot " + s);
-var A = (n, i, s) => (w(n, i, "read from private field"), s ? s.call(n) : i.get(n)), y = (n, i, s) => i.has(n) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(n) : i.set(n, s), c = (n, i, s, l) => (w(n, i, "write to private field"), l ? l.call(n, s) : i.set(n, s), s);
-import { __runInitializers as p, __esDecorate as m } from "tslib";
+var w = (n, s, a) => s.has(n) || v("Cannot " + a);
+var I = (n, s, a) => (w(n, s, "read from private field"), a ? a.call(n) : s.get(n)), A = (n, s, a) => s.has(n) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(n) : s.set(n, a), c = (n, s, a, l) => (w(n, s, "write to private field"), l ? l.call(n, a) : s.set(n, a), a);
+import { __runInitializers as h, __esDecorate as m } from "tslib";
 import { css as S, LitElement as O, html as k } from "lit";
-import { customElement as L, property as I, state as x } from "lit/decorators.js";
+import { customElement as L, property as y, state as x } from "lit/decorators.js";
 import { ref as H } from "lit/directives/ref.js";
 import { SbbLanguageController as R } from "./core/controllers.js";
 import { findInput as M } from "./core/dom.js";
 import { EventEmitter as D, forwardEvent as V } from "./core/eventing.js";
-import { i18nTimeInputChange as $ } from "./core/i18n.js";
-const P = S`: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}`, z = /[0-9.:,\-;_hH]/, G = /^([0-9]{1,2})([0-9]{2})$/, U = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+import { i18nTimeInputChange as U } from "./core/i18n.js";
+const $ = S`: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}`, P = /[0-9.:,\-;_hH]/, z = /^([0-9]{1,2})([0-9]{2})$/, G = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
 let Z = (() => {
   var o, r;
-  let n = [L("sbb-time-input")], i, s = [], l, d = O, _ = [], E, b, g = [], f = [], C;
-  var h = (r = class extends d {
+  let n = [L("sbb-time-input")], s, a = [], l, d = O, _ = [], E, b, g = [], f = [], C;
+  var p = (r = class extends d {
     constructor() {
       super(...arguments);
-      y(this, o);
-      this._input = (p(this, _), null), c(this, o, p(this, g, null)), this._didChange = (p(this, f), new D(this, h.events.didChange, {
+      A(this, o);
+      this._input = (h(this, _), null), c(this, o, h(this, g, null)), this._didChange = (h(this, f), new D(this, p.events.didChange, {
         bubbles: !0,
         cancelable: !0
-      })), this._validationChange = new D(this, h.events.validationChange, {
+      })), this._validationChange = new D(this, p.events.validationChange, {
         bubbles: !0,
         composed: !1
       }), this._abortController = new AbortController(), this._language = new R(this);
     }
     /** Reference of the native input connected to the datepicker. */
     set input(t) {
-      this._input = t, this._findInputElement();
+      this._input = t, this._setupInputElement();
     }
     get input() {
       return this._input;
     }
     get _inputElement() {
-      return A(this, o);
+      return I(this, o);
     }
     set _inputElement(t) {
       c(this, o, t);
@@ -55,15 +55,23 @@ let Z = (() => {
       return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value)) ?? null;
     }
     connectedCallback() {
-      super.connectedCallback(), this._findInputElement(), this._inputElement && this._updateValue(this._inputElement.value);
+      super.connectedCallback(), this._setupInputElement();
     }
     disconnectedCallback() {
       var t;
       super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
     }
-    _findInputElement() {
-      const t = this._inputElement;
-      this._inputElement = M(this, this.input), t !== this._inputElement && this._registerInputElement();
+    firstUpdated(t) {
+      super.firstUpdated(t), this._setupInputElement();
+    }
+    _setupInputElement() {
+      var i;
+      const t = M(this, this.input);
+      if (!t) {
+        (i = this._abortController) == null || i.abort();
+        return;
+      }
+      this._inputElement !== t && (this._inputElement = t, this._registerInputElement(), this._updateValue(this._inputElement.value));
     }
     _registerInputElement() {
       var t;
@@ -85,7 +93,7 @@ let Z = (() => {
     _updateValue(t) {
       if (this._statusContainer && (this._statusContainer.innerText = ""), !this._inputElement)
         return;
-      const e = this._parseInput(t), a = !!e && this._isTimeValid(e), u = !t || t.trim() === "" || a;
+      const e = this._parseInput(t), i = !!e && this._isTimeValid(e), u = !t || t.trim() === "" || i;
       u && e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this._inputElement, this._formatValue(e)), this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })));
       const T = !this._inputElement.hasAttribute("data-sbb-invalid");
       this._inputElement.toggleAttribute("data-sbb-invalid", !u), T !== u && this._validationChange.emit({ valid: u });
@@ -96,8 +104,8 @@ let Z = (() => {
     }
     /** Returns the right format for the `value` property. */
     _formatValue(t) {
-      const e = String(t.hours).padStart(2, "0"), a = String(t.minutes).padStart(2, "0");
-      return `${e}:${a}`;
+      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:
@@ -115,10 +123,10 @@ let Z = (() => {
       const e = t == null ? void 0 : t.trim();
       if (!e)
         return null;
-      const a = e.match(G);
-      if (a)
-        return { hours: +a[1] || 0, minutes: +a[2] || 0 };
-      const u = e.match(U);
+      const i = e.match(z);
+      if (i)
+        return { hours: +i[1] || 0, minutes: +i[2] || 0 };
+      const u = e.match(G);
       return u ? { hours: +u[1] || 0, minutes: +u[2] || 0 } : null;
     }
     /**  Only allow typing numbers and separator keys. */
@@ -137,13 +145,13 @@ let Z = (() => {
         "PageDown",
         "Delete"
       ];
-      !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !z.test(t.key) && t.preventDefault();
+      !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !P.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 = `${$[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
+      this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${U[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
     }
     render() {
       return k`
@@ -155,18 +163,18 @@ let Z = (() => {
     }
   }, o = new WeakMap(), l = r, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    E = [I()], b = [x()], C = [I({ attribute: !1 })], m(r, null, E, { kind: "setter", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, set: (e, a) => {
-      e.input = a;
-    } }, metadata: t }, null, _), m(r, null, b, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, a) => {
-      e._inputElement = a;
-    } }, metadata: t }, g, f), m(r, null, C, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, a) => {
-      e.valueAsDate = a;
-    } }, metadata: t }, null, _), m(null, i = { value: l }, n, { kind: "class", name: l.name, metadata: t }, null, s), h = l = i.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = P, r.events = {
+    E = [y()], b = [x()], C = [y({ attribute: !1 })], m(r, null, E, { kind: "setter", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, set: (e, i) => {
+      e.input = i;
+    } }, metadata: t }, null, _), m(r, null, b, { 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 }, g, f), m(r, null, C, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, i) => {
+      e.valueAsDate = i;
+    } }, metadata: t }, null, _), m(null, s = { value: l }, n, { kind: "class", name: l.name, metadata: t }, null, a), p = l = s.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = $, r.events = {
     didChange: "didChange",
     validationChange: "validationChange"
-  }, p(l, s), r);
-  return h = l;
+  }, h(l, a), r);
+  return p = l;
 })();
 export {
   Z as SbbTimeInputElement

package/title/title-base.d.ts

@@ -1,12 +1,11 @@
 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.
+ * @slot - Use the unnamed slot to place the content of the title.
  */
-export declare abstract class SbbTitleBase extends SbbTitleBase_base {
+export declare abstract class SbbTitleBase extends LitElement {
     static styles: CSSResultGroup;
     /** Title level */
     accessor level: SbbTitleLevel;
@@ -21,5 +20,4 @@ export declare abstract class SbbTitleBase extends SbbTitleBase_base {
     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;AASjC,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;;AAE9D;;;;GAIG;AACH,8BAIe,YAAa,SAAQ,iBAA4B;IAC9D,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;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"}

package/title/title.d.ts

@@ -1,10 +1,11 @@
 import { CSSResultGroup } from 'lit';
 import { SbbTitleBase } from './title-base.js';
+declare const SbbTitleElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof SbbTitleBase;
 /**
  * @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 {
+export declare class SbbTitleElement extends SbbTitleElement_base {
     static styles: CSSResultGroup;
 }
 declare global {
@@ -12,4 +13,5 @@ declare global {
         'sbb-title': SbbTitleElement;
     }
 }
+export {};
 //# sourceMappingURL=title.d.ts.map

package/title/title.d.ts.map

@@ -1 +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,qBAEM,eAAgB,SAAQ,YAAY;IACxC,OAAuB,MAAM,EAAE,cAAc,CAAgC;CAC9E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../src/elements/title/title.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;;AAG/C;;;GAGG;AACH,qBAEM,eAAgB,SAAQ,oBAA8B;IAC1D,OAAuB,MAAM,EAAE,cAAc,CAAgC;CAC9E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/title.js

@@ -5,16 +5,16 @@ 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 { css as E, LitElement as j } from "lit";
-import { html as O } from "lit/static-html.js";
-import { hostAttributes as A, forceType as B } from "./core/decorators.js";
-import { SbbNegativeMixin as U } from "./core/mixins.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([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;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)}`;
+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 = [A({
+  let e = [B({
     role: "heading"
-  })], t, s = [], l, v = U(j), b, k = [], o = [], _, z = [], x = [], w, S = [], L = [];
+  })], t, s = [], l, v = O, b, k = [], o = [], _, z = [], x = [], w, S = [], L = [];
   return r = class extends v {
     constructor() {
       super(...arguments);
@@ -52,7 +52,7 @@ let D = (() => {
       super.willUpdate(a), a.has("level") && this.setAttribute("aria-level", this.level);
     }
     render() {
-      return O`
+      return A`
       <div class="sbb-title">
         <slot></slot>
       </div>
@@ -60,7 +60,7 @@ let D = (() => {
     }
   }, 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 = [B(), 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) => {
+    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;
@@ -69,10 +69,10 @@ let D = (() => {
     } }, 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(: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)}`;
+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 = D;
+  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;