@sbb-esta/lyne-elements 1.2.1 → 1.3.0

package/datepicker/datepicker.js

@@ -1,78 +1,75 @@
-import { css as c, LitElement as b, html as f } from "lit";
-import { property as u, state as E, customElement as g } from "lit/decorators.js";
-import { readConfig as v } from "../core/config.js";
-import { SbbConnectedAbortController as C, SbbLanguageController as w } from "../core/controllers.js";
-import { defaultDateAdapter as m } from "../core/datetime.js";
-import { findReferencedElement as D, findInput as h } from "../core/dom.js";
+import { css as v, LitElement as b, html as f } from "lit";
+import { property as u, state as g, customElement as A } from "lit/decorators.js";
+import { readConfig as c } from "../core/config.js";
+import { SbbConnectedAbortController as D, SbbLanguageController as E } from "../core/controllers.js";
+import { defaultDateAdapter as _ } from "../core/datetime.js";
+import { findReferencedElement as w, findInput as C } from "../core/dom.js";
 import { EventEmitter as d } from "../core/eventing.js";
-import { i18nDatePickerPlaceholder as p, i18nDateChangedTo as A } from "../core/i18n.js";
-import { AgnosticMutationObserver as y } from "../core/observers.js";
-const V = c`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
-var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (t, e, n, a) => {
-  for (var i = a > 1 ? void 0 : a ? P(e, n) : e, s = t.length - 1, o; s >= 0; s--)
-    (o = t[s]) && (i = (a ? o(e, n, i) : o(i)) || i);
-  return a && i && x(e, n, i), i;
+import { i18nDatePickerPlaceholder as h, i18nDateChangedTo as y } from "../core/i18n.js";
+import { AgnosticMutationObserver as I } from "../core/observers.js";
+const P = v`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var U = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? k(e, i) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (s = (a ? o(e, i, s) : o(s)) || s);
+  return a && s && U(e, i, s), s;
 };
-const U = /(^0?[1-9]?|[12]?[0-9]?|3?[01]?)[.,\\/\-\s](0?[1-9]?|1?[0-2]?)?[.,\\/\-\s](\d{1,4}$)?/;
-function N(t, e) {
-  var n;
-  if (!e) {
-    const a = (n = t.closest) == null ? void 0 : n.call(t, "sbb-form-field");
-    return a == null ? void 0 : a.querySelector("sbb-datepicker");
-  }
-  return D(e);
+function R(t, e) {
+  var i, a;
+  return e ? w(e) : (a = (i = t.closest) == null ? void 0 : i.call(t, "sbb-form-field")) == null ? void 0 : a.querySelector("sbb-datepicker");
 }
-function _(t, e, n, a) {
-  let i = a.addCalendarDays(t, e);
-  if (n)
-    for (; !n(i); )
-      i = a.addCalendarDays(i, e);
-  return i;
+function m(t, e, i, a) {
+  let s = a.addCalendarDays(t, e);
+  if (i)
+    for (; !i(s); )
+      s = a.addCalendarDays(s, e);
+  return s;
 }
-function $(t, e, n, a) {
-  const i = _(t, -1, e, n), s = n.deserialize(a);
-  return !s || n.isValid(s) && n.compareDate(i, s) >= 0 ? i : t;
+function j(t, e, i, a) {
+  const s = m(t, -1, e, i), r = i.deserialize(a);
+  return !r || i.isValid(r) && i.compareDate(s, r) >= 0 ? s : t;
 }
-function H(t, e, n, a) {
-  const i = _(t, 1, e, n), s = n.deserialize(a);
-  return !s || n.isValid(s) && n.compareDate(i, s) <= 0 ? i : t;
+function q(t, e, i, a) {
+  const s = m(t, 1, e, i), r = i.deserialize(a);
+  return !r || i.isValid(r) && i.compareDate(s, r) <= 0 ? s : t;
 }
-function k(t, e, n, a) {
-  const i = m, s = i.deserialize(n), o = i.deserialize(a);
-  return i.isValid(s) && i.compareDate(t, s) < 0 || i.isValid(o) && i.compareDate(t, o) > 0 ? !1 : e ? e(t) : !0;
+function x(t, e, i, a) {
+  var p;
+  const s = ((p = c().datetime) == null ? void 0 : p.dateAdapter) ?? _, r = s.deserialize(i), o = s.deserialize(a);
+  return s.isValid(r) && s.compareDate(t, r) < 0 || s.isValid(o) && s.compareDate(t, o) > 0 ? !1 : e ? e(t) : !0;
 }
-const j = () => new CustomEvent("datepickerControlRegistered", {
+const $ = () => new CustomEvent("datepickerControlRegistered", {
   bubbles: !1,
   composed: !0
 });
-let r = class extends b {
+let n = class extends b {
   constructor() {
     var t;
-    super(...arguments), this.wide = !1, this.dateFilter = () => !0, this._now = null, this._didChange = new d(this, r.events.didChange, {
+    super(...arguments), this.wide = !1, this.dateFilter = () => !0, this._didChange = new d(this, n.events.didChange, {
       bubbles: !0,
       cancelable: !0
-    }), this._change = new d(this, r.events.change, {
+    }), this._change = new d(this, n.events.change, {
       bubbles: !0
     }), this._inputUpdated = new d(
       this,
-      r.events.inputUpdated,
+      n.events.inputUpdated,
       { bubbles: !0, cancelable: !0 }
     ), this._datePickerUpdated = new d(
       this,
-      r.events.datePickerUpdated,
+      n.events.datePickerUpdated,
       {
         bubbles: !0,
         cancelable: !0
       }
     ), this._validationChange = new d(
       this,
-      r.events.validationChange
-    ), this._inputElementState = null, this._inputObserver = new y(this._onInputPropertiesChange.bind(this)), this._dateAdapter = ((t = v().datetime) == null ? void 0 : t.dateAdapter) ?? m, this._abort = new C(this), this._language = new w(this).withHandler(() => {
-      if (this._inputElement) {
-        this._inputElement.placeholder = p[this._language.current];
-        const e = this.getValueAsDate();
-        e && (this._inputElement.value = this._format(e));
+      n.events.validationChange
+    ), this._inputElement = null, this._inputElementPlaceholderMutable = !1, this._inputObserver = new I((e) => {
+      if (this._emitInputUpdated(), this._inputElement && (e != null && e.some((i) => i.attributeName === "value"))) {
+        const i = this._inputElement.getAttribute("value");
+        this.valueAsDate = this._dateAdapter.parse(i, this.now) ?? i;
       }
+    }), this._dateAdapter = ((t = c().datetime) == null ? void 0 : t.dateAdapter) ?? _, this._abort = new D(this), this._language = new E(this).withHandler(() => {
+      this._inputElement && (this._inputElementPlaceholderMutable && (this._inputElement.placeholder = h[this._language.current]), this.valueAsDate && (this._inputElement.value = this._format(this.valueAsDate)));
     });
   }
   set now(t) {
@@ -81,145 +78,111 @@ let r = class extends b {
   get now() {
     return this._now ?? this._dateAdapter.today();
   }
-  get _inputElement() {
-    return this._inputElementState;
-  }
-  set _inputElement(t) {
-    const e = this._inputElementState;
-    this._inputElementState = t, this._registerInputElement(this._inputElementState, e);
-  }
-  _findInput(t, e) {
-    t !== e && (this._inputElement = h(this, this.input));
-  }
-  _registerInputElement(t, e) {
-    var n, a;
-    if (t !== e) {
-      if ((n = this._datePickerController) == null || n.abort(), this._datePickerController = new AbortController(), !this._inputElement)
-        return;
-      (a = this._inputObserver) == null || a.disconnect(), this._inputObserver.observe(this._inputElement, {
-        attributeFilter: ["disabled", "readonly", "min", "max", "value"]
-      }), this._inputElement.type = "text", this._inputElement.placeholder || (this._inputElement.placeholder = p[this._language.current]), this._inputElement.addEventListener(
-        "change",
-        (i) => {
-          i instanceof CustomEvent || this._valueChanged(i);
-        },
-        {
-          signal: this._datePickerController.signal
-        }
-      );
-    }
-  }
-  /** Gets the input value with the correct date format. */
-  getValueAsDate() {
-    if (this._inputElement && this._inputElement.value)
-      return this._parse(this._inputElement.value);
-  }
-  /** Set the input value to the correctly formatted value. */
-  setValueAsDate(t) {
-    const e = t instanceof Date ? t : new Date(t);
-    this._inputElement && (this._formatAndUpdateValue(this._inputElement.value, e), this._inputElement.dispatchEvent(new Event("blur", { composed: !0 })));
+  set valueAsDate(t) {
+    this._valueAsDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t)), this._tryApplyFormatToInput() && this._inputElement.dispatchEvent(new Event("blur", { composed: !0 }));
   }
-  /**
-   * @internal
-   * Whether a custom now is configured.
-   */
-  hasCustomNow() {
-    return !!this._now;
-  }
-  _onInputPropertiesChange(t) {
-    var e, n, a, i;
-    this._inputUpdated.emit({
-      disabled: (e = this._inputElement) == null ? void 0 : e.disabled,
-      readonly: (n = this._inputElement) == null ? void 0 : n.readOnly,
-      min: (a = this._inputElement) == null ? void 0 : a.min,
-      max: (i = this._inputElement) == null ? void 0 : i.max
-    }), this._inputElement && t && Array.from(t).some((s) => s.attributeName === "value") && (this._inputElement.value = this._getValidValue(this._inputElement.getAttribute("value")));
+  get valueAsDate() {
+    return this._valueAsDate ?? null;
   }
   connectedCallback() {
-    super.connectedCallback();
-    const t = this._abort.signal;
-    this.addEventListener("datepickerControlRegistered", () => this._onInputPropertiesChange(), {
-      signal: t
-    }), this._inputElement = h(this, this.input), this._inputElement && (this._inputElement.value = this._getValidValue(this._inputElement.value), this._inputUpdated.emit({
-      disabled: this._inputElement.disabled,
-      readonly: this._inputElement.readOnly,
-      min: this._inputElement.min,
-      max: this._inputElement.max
-    }));
+    super.connectedCallback(), this.addEventListener("datepickerControlRegistered", () => this._emitInputUpdated(), {
+      signal: this._abort.signal
+    }), this._attachInput(), this._inputElement && this._emitInputUpdated();
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("input") && this._findInput(this.input, t.get("input")), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this._datePickerUpdated.emit();
+    super.willUpdate(t), t.has("input") && this._attachInput(), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this._datePickerUpdated.emit(), t.has("valueAsDate") && this._setAriaLiveMessage();
   }
   disconnectedCallback() {
     var t, e;
     super.disconnectedCallback(), (t = this._inputObserver) == null || t.disconnect(), (e = this._datePickerController) == null || e.abort();
   }
   firstUpdated(t) {
-    super.firstUpdated(t), this._setAriaLiveMessage(this.getValueAsDate());
+    super.firstUpdated(t), this._setAriaLiveMessage();
   }
-  _parseAndFormatValue(t) {
-    const e = this._parse(t);
-    return this._dateAdapter.isValid(e) ? this._format(e) : t;
+  /**
+   * Gets the input value with the correct date format.
+   * @deprecated Use property valueAsDate instead.
+   */
+  getValueAsDate() {
+    return this.valueAsDate ?? void 0;
   }
-  _createAndComposeDate(t) {
-    const e = new Date(t);
-    return this._format(e);
+  /**
+   * Set the input value to the correctly formatted value.
+   * @deprecated Use property valueAsDate instead.
+   */
+  setValueAsDate(t) {
+    this.valueAsDate = t;
   }
-  _valueChanged(t) {
-    const e = t.target.value;
-    this._formatAndUpdateValue(e, this._parse(e));
+  /**
+   * @internal
+   * Whether a custom now is configured.
+   */
+  hasCustomNow() {
+    return !!this._now;
   }
-  /** Applies the correct format to values and triggers event dispatch. */
-  _formatAndUpdateValue(t, e) {
-    var n, a;
-    if (this._inputElement) {
-      this._inputElement.value = this._dateAdapter.isValid(e) ? this._format(e) : t;
-      const i = !t || !!e && k(
-        e,
-        this.dateFilter,
-        (n = this._inputElement) == null ? void 0 : n.min,
-        (a = this._inputElement) == null ? void 0 : a.max
-      ), s = !this._inputElement.hasAttribute("data-sbb-invalid");
-      this._inputElement.toggleAttribute("data-sbb-invalid", !i), s !== i && this._validationChange.emit({ valid: i }), this._emitChange(e);
+  _attachInput() {
+    var e, i;
+    const t = C(this, this.input);
+    if (this._inputElement !== t && (this._inputElement && ((e = this._datePickerController) == null || e.abort(), (i = this._inputObserver) == null || i.disconnect()), this._inputElement = t, t)) {
+      this._datePickerController = new AbortController(), this._inputObserver.observe(t, {
+        attributeFilter: ["disabled", "readonly", "min", "max", "value"]
+      }), this._inputElementPlaceholderMutable = !t.placeholder, t.type = "text", this._inputElementPlaceholderMutable && (t.placeholder = h[this._language.current]);
+      const a = { signal: this._datePickerController.signal };
+      t.addEventListener("input", () => this._parseInput(), a), t.addEventListener("change", () => this._handleInputChange(), a), this._parseInput(!0), this._tryApplyFormatToInput(), this._validateDate();
     }
   }
-  /** Emits the change event. */
-  _emitChange(t) {
-    this._setAriaLiveMessage(t), this._change.emit(), this._didChange.emit(), this._inputElement && (this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._inputElement.dispatchEvent(
-      new CustomEvent("change", { bubbles: !0, composed: !0 })
+  _emitInputUpdated() {
+    const { disabled: t, readOnly: e, min: i, max: a } = this._inputElement ?? {};
+    this._inputUpdated.emit({ disabled: t, readonly: e, min: i, max: a });
+  }
+  _handleInputChange() {
+    this._tryApplyFormatToInput() || (this._validateDate(), this._setAriaLiveMessage(), this._change.emit(), this._didChange.emit());
+  }
+  _tryApplyFormatToInput() {
+    if (!this._inputElement)
+      return !1;
+    const t = this.valueAsDate ? this._format(this.valueAsDate) : "";
+    return t && this._inputElement.value !== t ? (this._inputElement.value = t, this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._inputElement.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), !0) : !1;
+  }
+  _validateDate() {
+    var i, a;
+    if (!this._inputElement)
+      return;
+    const t = !this._inputElement.value || !!this.valueAsDate && x(
+      this.valueAsDate,
+      this.dateFilter,
+      (i = this._inputElement) == null ? void 0 : i.min,
+      (a = this._inputElement) == null ? void 0 : a.max
+    ), e = !this._inputElement.hasAttribute("data-sbb-invalid");
+    this._inputElement.toggleAttribute("data-sbb-invalid", !t), e !== t && this._validationChange.emit({ valid: t });
+  }
+  _parseInput(t = !1) {
+    const e = this._inputElement.value, i = this.dateParser ?? ((a) => this._dateAdapter.parse(a, this.now));
+    this._valueAsDate = this._dateAdapter.getValidDateOrNull(i(e)), t && !this._valueAsDate && (this._valueAsDate = this._dateAdapter.getValidDateOrNull(
+      this._dateAdapter.deserialize(e)
     ));
   }
-  _getValidValue(t) {
-    if (!t)
-      return "";
-    const e = t.match(U);
-    return (e == null ? void 0 : e.index) === 0 ? this._parseAndFormatValue(t) : Number.isInteger(+t) ? this._createAndComposeDate(+t) : this._dateAdapter.isValid(new Date(t)) ? this._createAndComposeDate(t) : t;
-  }
-  _parse(t) {
-    return this.dateParser ? this.dateParser(t) : this._dateAdapter.parse(t, this.now);
-  }
   _format(t) {
     return this.format ? this.format(t) : this._dateAdapter.format(t);
   }
-  _setAriaLiveMessage(t) {
-    var i, s;
-    const e = new Intl.DateTimeFormat(`${this._language.current}-CH`, {
-      weekday: "long"
-    }), n = new Intl.DateTimeFormat("de-CH", {
-      day: "2-digit",
-      month: "2-digit",
-      year: "numeric"
-    }), a = (s = (i = this.shadowRoot) == null ? void 0 : i.querySelector) == null ? void 0 : s.call(i, "#status-container");
-    a && (a.innerText = t ? `${A[this._language.current]} ${e.format(
-      t
-    )}, ${n.format(t)}` : "");
+  _setAriaLiveMessage() {
+    var e, i;
+    const t = (i = (e = this.shadowRoot) == null ? void 0 : e.querySelector) == null ? void 0 : i.call(e, "#status-container");
+    if (t)
+      if (!this.valueAsDate)
+        t.innerText = "";
+      else {
+        const a = this._dateAdapter.format(this.valueAsDate, { weekdayStyle: "long" });
+        t.innerText = `${y[this._language.current]} ${a}`;
+      }
+    else return;
   }
   render() {
     return f`<p id="status-container" role="status"></p>`;
   }
 };
-r.styles = V;
-r.events = {
+n.styles = P;
+n.events = {
   didChange: "didChange",
   change: "change",
   inputUpdated: "inputUpdated",
@@ -228,34 +191,37 @@ r.events = {
 };
 l([
   u({ type: Boolean })
-], r.prototype, "wide", 2);
+], n.prototype, "wide", 2);
 l([
-  u({ attribute: "date-filter" })
-], r.prototype, "dateFilter", 2);
+  u({ attribute: !1 })
+], n.prototype, "dateFilter", 2);
 l([
-  u({ attribute: "date-parser" })
-], r.prototype, "dateParser", 2);
+  u({ attribute: !1 })
+], n.prototype, "dateParser", 2);
 l([
-  u()
-], r.prototype, "format", 2);
+  u({ attribute: !1 })
+], n.prototype, "format", 2);
 l([
   u()
-], r.prototype, "input", 2);
+], n.prototype, "input", 2);
 l([
   u()
-], r.prototype, "now", 1);
+], n.prototype, "now", 1);
+l([
+  u({ attribute: !1 })
+], n.prototype, "valueAsDate", 1);
 l([
-  E()
-], r.prototype, "_inputElement", 1);
-r = l([
-  g("sbb-datepicker")
-], r);
+  g()
+], n.prototype, "_inputElement", 2);
+n = l([
+  A("sbb-datepicker")
+], n);
 export {
-  r as SbbDatepickerElement,
-  j as datepickerControlRegisteredEventFactory,
-  H as findNextAvailableDate,
-  $ as findPreviousAvailableDate,
-  _ as getAvailableDate,
-  N as getDatePicker,
-  k as isDateAvailable
+  n as SbbDatepickerElement,
+  $ as datepickerControlRegisteredEventFactory,
+  q as findNextAvailableDate,
+  j as findPreviousAvailableDate,
+  m as getAvailableDate,
+  R as getDatePicker,
+  x as isDateAvailable
 };

package/development/button/common/button-common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-common.d.ts","sourceRoot":"","sources":["../../../../../src/elements/button/common/button-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGxE,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE5E,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,GAAG,oBAAoB,CAAC;AAE5F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,+BACnB,YAAW,oBAAoB,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEtF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CAC1B;AAGD,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cACjF,CAAC,KACZ,mBAAmB,CAAC,+BAA+B,CAAC,GAAG,CA2BzD,CAAC"}
+{"version":3,"file":"button-common.d.ts","sourceRoot":"","sources":["../../../../../src/elements/button/common/button-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE5E,MAAM,MAAM,sBAAsB,GAAG,+BAA+B,GAAG,oBAAoB,CAAC;AAE5F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,+BACnB,YAAW,oBAAoB,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEtF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CAC1B;AAGD,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,mBAAmB,CAAC,oBAAoB,CAAC,cACjF,CAAC,KACZ,mBAAmB,CAAC,+BAA+B,CAAC,GAAG,CAuBzD,CAAC"}

package/development/button/common.js

@@ -1,7 +1,6 @@
 import { property } from "lit/decorators.js";
 import { html } from "lit/static-html.js";
-import { SbbSlotStateController } from "../core/controllers.js";
-import { hostAttributes } from "../core/decorators.js";
+import { hostAttributes, slotState } from "../core/decorators.js";
 import { SbbNegativeMixin } from "../core/mixins.js";
 import { SbbIconNameMixin } from "../icon.js";
 import { css } from "lit";
@@ -17,10 +16,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const SbbButtonCommonElementMixin = (superClass) => {
   let SbbButtonCommonElementClass = class extends SbbNegativeMixin(SbbIconNameMixin(superClass)) {
-    constructor(...args) {
-      super(args);
+    constructor() {
+      super(...arguments);
       this.size = "l";
-      new SbbSlotStateController(this);
     }
     renderTemplate() {
       return html`
@@ -37,7 +35,8 @@ const SbbButtonCommonElementMixin = (superClass) => {
   SbbButtonCommonElementClass = __decorateClass([
     hostAttributes({
       "data-sbb-button": ""
-    })
+    }),
+    slotState()
   ], SbbButtonCommonElementClass);
   return SbbButtonCommonElementClass;
 };
@@ -112,6 +111,30 @@ const buttonCommon = css`/**
   :host {
     --sbb-button-color-default-border: CanvasText !important;
     --sbb-button-color-active-border: Highlight !important;
+    --sbb-button-color-default-background: Canvas !important;
+    --sbb-button-color-hover-background: Canvas !important;
+    --sbb-button-color-active-background: Canvas !important;
+    --sbb-button-color-disabled-background: Canvas !important;
+    --sbb-button-color-disabled-text: GrayText !important;
+    --sbb-button-color-default-text: CanvasText !important;
+    --sbb-button-color-hover-text: CanvasText !important;
+    --sbb-button-color-active-text: CanvasText !important;
+  }
+}
+
+@media (forced-colors: active) {
+  :host([data-button]) {
+    --sbb-button-color-default-text: ButtonText !important;
+    --sbb-button-color-hover-text: ButtonText !important;
+    --sbb-button-color-active-text: ButtonText !important;
+  }
+}
+
+@media (forced-colors: active) {
+  :host([data-link]) {
+    --sbb-button-color-default-text: LinkText !important;
+    --sbb-button-color-hover-text: LinkText !important;
+    --sbb-button-color-active-text: LinkText !important;
   }
 }
 
@@ -145,12 +168,6 @@ const buttonCommon = css`/**
   --sbb-button-padding-inline: 0;
 }
 
-@media (forced-colors: active) {
-  :host([disabled]) {
-    --sbb-button-color-disabled-text: GrayText !important;
-  }
-}
-
 @media (any-hover: hover) {
   :host(:not([disabled], :active, [data-active]):hover) {
     --sbb-button-translate-y-content-hover: -0.0625rem;
@@ -167,18 +184,6 @@ const buttonCommon = css`/**
   }
 }
 
-@media (forced-colors: active) {
-  :host([role=button]) {
-    --sbb-button-color-default-text: ButtonText !important;
-    --sbb-button-color-hover-text: ButtonText !important;
-    --sbb-button-color-active-text: ButtonText !important;
-    --sbb-button-color-default-background: Canvas !important;
-    --sbb-button-color-hover-background: Canvas !important;
-    --sbb-button-color-active-background: Canvas !important;
-    --sbb-button-color-disabled-background: Canvas !important;
-  }
-}
-
 .sbb-action-base {
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
   font-family: var(--sbb-typo-font-family);
@@ -382,4 +387,4 @@ export {
   tertiaryButton as buttonTertiaryStyle,
   transparentButton as buttonTransparentStyle
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbW9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvYnV0dG9uL2NvbW1vbi9idXR0b24tY29tbW9uLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHR5cGUgeyBTYmJBY3Rpb25CYXNlRWxlbWVudCB9IGZyb20gJy4uLy4uL2NvcmUvYmFzZS1lbGVtZW50cy5qcyc7XG5pbXBvcnQgeyBTYmJTbG90U3RhdGVDb250cm9sbGVyIH0gZnJvbSAnLi4vLi4vY29yZS9jb250cm9sbGVycy5qcyc7XG5pbXBvcnQgeyBob3N0QXR0cmlidXRlcyB9IGZyb20gJy4uLy4uL2NvcmUvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgdHlwZSB7XG4gIEFic3RyYWN0Q29uc3RydWN0b3IsXG4gIFNiYkRpc2FibGVkTWl4aW5UeXBlLFxuICBTYmJOZWdhdGl2ZU1peGluVHlwZSxcbn0gZnJvbSAnLi4vLi4vY29yZS9taXhpbnMuanMnO1xuaW1wb3J0IHsgU2JiTmVnYXRpdmVNaXhpbiB9IGZyb20gJy4uLy4uL2NvcmUvbWl4aW5zLmpzJztcbmltcG9ydCB7IFNiYkljb25OYW1lTWl4aW4sIHR5cGUgU2JiSWNvbk5hbWVNaXhpblR5cGUgfSBmcm9tICcuLi8uLi9pY29uLmpzJztcblxuZXhwb3J0IHR5cGUgU2JiQnV0dG9uQ29tbW9uRWxlbWVudCA9IFNiYkJ1dHRvbkNvbW1vbkVsZW1lbnRNaXhpblR5cGUgJiBTYmJBY3Rpb25CYXNlRWxlbWVudDtcblxuZXhwb3J0IHR5cGUgU2JiQnV0dG9uU2l6ZSA9ICdsJyB8ICdtJyB8ICdzJztcblxuZXhwb3J0IGRlY2xhcmUgY2xhc3MgU2JiQnV0dG9uQ29tbW9uRWxlbWVudE1peGluVHlwZVxuICBpbXBsZW1lbnRzIFNiYk5lZ2F0aXZlTWl4aW5UeXBlLCBQYXJ0aWFsPFNiYkRpc2FibGVkTWl4aW5UeXBlPiwgUGFydGlhbDxTYmJJY29uTmFtZU1peGluVHlwZT5cbntcbiAgcHVibGljIHNpemU/OiBTYmJCdXR0b25TaXplO1xuICBwdWJsaWMgZGlzYWJsZWQ6IGJvb2xlYW47XG4gIHB1YmxpYyBpY29uTmFtZT86IHN0cmluZztcbiAgcHVibGljIG5lZ2F0aXZlOiBib29sZWFuO1xufVxuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG5leHBvcnQgY29uc3QgU2JiQnV0dG9uQ29tbW9uRWxlbWVudE1peGluID0gPFQgZXh0ZW5kcyBBYnN0cmFjdENvbnN0cnVjdG9yPFNiYkFjdGlvbkJhc2VFbGVtZW50Pj4oXG4gIHN1cGVyQ2xhc3M6IFQsXG4pOiBBYnN0cmFjdENvbnN0cnVjdG9yPFNiYkJ1dHRvbkNvbW1vbkVsZW1lbnRNaXhpblR5cGU+ICYgVCA9PiB7XG4gIEBob3N0QXR0cmlidXRlcyh7XG4gICAgJ2RhdGEtc2JiLWJ1dHRvbic6ICcnLFxuICB9KVxuICBhYnN0cmFjdCBjbGFzcyBTYmJCdXR0b25Db21tb25FbGVtZW50Q2xhc3NcbiAgICBleHRlbmRzIFNiYk5lZ2F0aXZlTWl4aW4oU2JiSWNvbk5hbWVNaXhpbihzdXBlckNsYXNzKSlcbiAgICBpbXBsZW1lbnRzIFBhcnRpYWw8U2JiQnV0dG9uQ29tbW9uRWxlbWVudE1peGluVHlwZT5cbiAge1xuICAgIC8qKiBTaXplIHZhcmlhbnQsIGVpdGhlciBsIG9yIG0uICovXG4gICAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgc2l6ZT86IFNiYkJ1dHRvblNpemUgPSAnbCc7XG5cbiAgICBwcm90ZWN0ZWQgY29uc3RydWN0b3IoLi4uYXJnczogYW55W10pIHtcbiAgICAgIHN1cGVyKGFyZ3MpO1xuICAgICAgbmV3IFNiYlNsb3RTdGF0ZUNvbnRyb2xsZXIodGhpcyk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlclRlbXBsYXRlKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICAgIHJldHVybiBodG1sYFxuICAgICAgICAke3N1cGVyLnJlbmRlckljb25TbG90KCl9XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWJ1dHRvbl9fbGFiZWxcIj5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIGA7XG4gICAgfVxuICB9XG4gIHJldHVybiBTYmJCdXR0b25Db21tb25FbGVtZW50Q2xhc3MgYXMgdW5rbm93biBhcyBBYnN0cmFjdENvbnN0cnVjdG9yPFNiYkJ1dHRvbkNvbW1vbkVsZW1lbnRNaXhpblR5cGU+ICZcbiAgICBUO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7OztBQTZCYSxNQUFBLDhCQUE4QixDQUN6QyxlQUM2RDtBQUk3RCxNQUFlLDhCQUFmLGNBQ1UsaUJBQWlCLGlCQUFpQixVQUFVLENBQUMsRUFFdkQ7QUFBQSxJQUlZLGVBQWUsTUFBYTtBQUNwQyxZQUFNLElBQUk7QUFIaUIsV0FBTyxPQUF1QjtBQUl6RCxVQUFJLHVCQUF1QixJQUFJO0FBQUEsSUFDakM7QUFBQSxJQUVtQixpQkFBaUM7QUFDM0MsYUFBQTtBQUFBLFVBQ0gsTUFBTSxnQkFBZ0I7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLElBSzVCO0FBQUEsRUFBQTtBQWRvQyxrQkFBQTtBQUFBLElBQW5DLFNBQVMsRUFBRSxTQUFTLE1BQU07QUFBQSxFQUFBLEdBTGQsNEJBS3VCLFdBQUEsUUFBQSxDQUFBO0FBTHRDLGdDQUFBLGdCQUFBO0FBQUEsSUFIQyxlQUFlO0FBQUEsTUFDZCxtQkFBbUI7QUFBQSxJQUFBLENBQ3BCO0FBQUEsRUFDYyxHQUFBLDJCQUFBO0FBcUJSLFNBQUE7QUFFVDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbW9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvYnV0dG9uL2NvbW1vbi9idXR0b24tY29tbW9uLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHR5cGUgeyBTYmJBY3Rpb25CYXNlRWxlbWVudCB9IGZyb20gJy4uLy4uL2NvcmUvYmFzZS1lbGVtZW50cy5qcyc7XG5pbXBvcnQgeyBob3N0QXR0cmlidXRlcywgc2xvdFN0YXRlIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB0eXBlIHtcbiAgQWJzdHJhY3RDb25zdHJ1Y3RvcixcbiAgU2JiRGlzYWJsZWRNaXhpblR5cGUsXG4gIFNiYk5lZ2F0aXZlTWl4aW5UeXBlLFxufSBmcm9tICcuLi8uLi9jb3JlL21peGlucy5qcyc7XG5pbXBvcnQgeyBTYmJOZWdhdGl2ZU1peGluIH0gZnJvbSAnLi4vLi4vY29yZS9taXhpbnMuanMnO1xuaW1wb3J0IHsgU2JiSWNvbk5hbWVNaXhpbiwgdHlwZSBTYmJJY29uTmFtZU1peGluVHlwZSB9IGZyb20gJy4uLy4uL2ljb24uanMnO1xuXG5leHBvcnQgdHlwZSBTYmJCdXR0b25Db21tb25FbGVtZW50ID0gU2JiQnV0dG9uQ29tbW9uRWxlbWVudE1peGluVHlwZSAmIFNiYkFjdGlvbkJhc2VFbGVtZW50O1xuXG5leHBvcnQgdHlwZSBTYmJCdXR0b25TaXplID0gJ2wnIHwgJ20nIHwgJ3MnO1xuXG5leHBvcnQgZGVjbGFyZSBjbGFzcyBTYmJCdXR0b25Db21tb25FbGVtZW50TWl4aW5UeXBlXG4gIGltcGxlbWVudHMgU2JiTmVnYXRpdmVNaXhpblR5cGUsIFBhcnRpYWw8U2JiRGlzYWJsZWRNaXhpblR5cGU+LCBQYXJ0aWFsPFNiYkljb25OYW1lTWl4aW5UeXBlPlxue1xuICBwdWJsaWMgc2l6ZT86IFNiYkJ1dHRvblNpemU7XG4gIHB1YmxpYyBkaXNhYmxlZDogYm9vbGVhbjtcbiAgcHVibGljIGljb25OYW1lPzogc3RyaW5nO1xuICBwdWJsaWMgbmVnYXRpdmU6IGJvb2xlYW47XG59XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbmV4cG9ydCBjb25zdCBTYmJCdXR0b25Db21tb25FbGVtZW50TWl4aW4gPSA8VCBleHRlbmRzIEFic3RyYWN0Q29uc3RydWN0b3I8U2JiQWN0aW9uQmFzZUVsZW1lbnQ+PihcbiAgc3VwZXJDbGFzczogVCxcbik6IEFic3RyYWN0Q29uc3RydWN0b3I8U2JiQnV0dG9uQ29tbW9uRWxlbWVudE1peGluVHlwZT4gJiBUID0+IHtcbiAgQGhvc3RBdHRyaWJ1dGVzKHtcbiAgICAnZGF0YS1zYmItYnV0dG9uJzogJycsXG4gIH0pXG4gIEBzbG90U3RhdGUoKVxuICBhYnN0cmFjdCBjbGFzcyBTYmJCdXR0b25Db21tb25FbGVtZW50Q2xhc3NcbiAgICBleHRlbmRzIFNiYk5lZ2F0aXZlTWl4aW4oU2JiSWNvbk5hbWVNaXhpbihzdXBlckNsYXNzKSlcbiAgICBpbXBsZW1lbnRzIFBhcnRpYWw8U2JiQnV0dG9uQ29tbW9uRWxlbWVudE1peGluVHlwZT5cbiAge1xuICAgIC8qKiBTaXplIHZhcmlhbnQsIGVpdGhlciBsIG9yIG0uICovXG4gICAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgc2l6ZT86IFNiYkJ1dHRvblNpemUgPSAnbCc7XG5cbiAgICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgICAgcmV0dXJuIGh0bWxgXG4gICAgICAgICR7c3VwZXIucmVuZGVySWNvblNsb3QoKX1cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItYnV0dG9uX19sYWJlbFwiPlxuICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgYDtcbiAgICB9XG4gIH1cbiAgcmV0dXJuIFNiYkJ1dHRvbkNvbW1vbkVsZW1lbnRDbGFzcyBhcyB1bmtub3duIGFzIEFic3RyYWN0Q29uc3RydWN0b3I8U2JiQnV0dG9uQ29tbW9uRWxlbWVudE1peGluVHlwZT4gJlxuICAgIFQ7XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7QUE0QmEsTUFBQSw4QkFBOEIsQ0FDekMsZUFDNkQ7QUFLN0QsTUFBZSw4QkFBZixjQUNVLGlCQUFpQixpQkFBaUIsVUFBVSxDQUFDLEVBRXZEO0FBQUEsSUFIQSxjQUFBO0FBQUEsWUFBQSxHQUFBLFNBQUE7QUFLK0IsV0FBTyxPQUF1QjtBQUFBLElBQUE7QUFBQSxJQUV4QyxpQkFBaUM7QUFDM0MsYUFBQTtBQUFBLFVBQ0gsTUFBTSxnQkFBZ0I7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLElBSzVCO0FBQUEsRUFBQTtBQVRvQyxrQkFBQTtBQUFBLElBQW5DLFNBQVMsRUFBRSxTQUFTLE1BQU07QUFBQSxFQUFBLEdBTGQsNEJBS3VCLFdBQUEsUUFBQSxDQUFBO0FBTHRDLGdDQUFBLGdCQUFBO0FBQUEsSUFKQyxlQUFlO0FBQUEsTUFDZCxtQkFBbUI7QUFBQSxJQUFBLENBQ3BCO0FBQUEsSUFDQSxVQUFVO0FBQUEsRUFDSSxHQUFBLDJCQUFBO0FBZ0JSLFNBQUE7QUFFVDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ==

package/development/button/mini-button/mini-button.d.ts

@@ -10,7 +10,6 @@ declare const SbbMiniButtonElement_base: import('../../core/mixins.js').Abstract
  */
 export declare class SbbMiniButtonElement extends SbbMiniButtonElement_base {
     static styles: CSSResultGroup;
-    constructor();
     protected renderTemplate(): TemplateResult;
 }
 declare global {

package/development/button/mini-button/mini-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mini-button.d.ts","sourceRoot":"","sources":["../../../../../src/elements/button/mini-button/mini-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAOnE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,yBAEzC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;;cAOnC,cAAc,IAAI,cAAc;CAGpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}
+{"version":3,"file":"mini-button.d.ts","sourceRoot":"","sources":["../../../../../src/elements/button/mini-button/mini-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;;AAOnE;;;;;GAKG;AACH,qBAEa,oBAAqB,SAAQ,yBAEzC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,cAAc,IAAI,cAAc;CAGpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}