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

package/core/mixins/form-associated-mixin.js

@@ -1,12 +1,12 @@
-var _ = (a) => {
+var b = (a) => {
   throw TypeError(a);
 };
-var V = (a, s, r) => s.has(a) || _("Cannot " + r);
-var S = (a, s, r) => (V(a, s, "read from private field"), r ? r.call(a) : s.get(a)), D = (a, s, r) => s.has(a) ? _("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), h = (a, s, r, o) => (V(a, s, "write to private field"), o ? o.call(a, r) : s.set(a, r), r);
-import { __esDecorate as f, __runInitializers as m } from "tslib";
-import { property as E, state as M } from "lit/decorators.js";
-import { isWebkit as w } from "../dom.js";
-const k = {
+var g = (a, s, r) => s.has(a) || b("Cannot " + r);
+var V = (a, s, r) => (g(a, s, "read from private field"), r ? r.call(a) : s.get(a)), _ = (a, s, r) => s.has(a) ? b("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), h = (a, s, r, u) => (g(a, s, "write to private field"), u ? u.call(a, r) : s.set(a, r), r);
+import { __esDecorate as S, __runInitializers as f } from "tslib";
+import { property as w, state as F } from "lit/decorators.js";
+import { isWebkit as O } from "../dom.js";
+const D = {
   badInput: !1,
   customError: !1,
   patternMismatch: !1,
@@ -27,21 +27,21 @@ if (typeof ValidityState > "u") {
       throw new TypeError("Illegal constructor");
     }
   };
-  Object.entries(k).forEach(([s, r]) => Object.assign(a.prototype, {
+  Object.entries(D).forEach(([s, r]) => Object.assign(a.prototype, {
     get [s]() {
       return r;
     }
   })), globalThis.ValidityState = a;
 }
-const z = (a) => (() => {
-  var d, l;
-  let r = a, o = [], y, v, p, b = [], g = [];
-  return l = class extends r {
+const U = (a) => (() => {
+  var d, n;
+  let r = a, u = [], m, y, p = [], v = [];
+  return n = class extends r {
     constructor(...t) {
       var e;
       super(...t);
-      D(this, d);
-      this._value = (m(this, o), null), this.internals = this.attachInternals(), this._validityStates = /* @__PURE__ */ new Map(), h(this, d, m(this, b, !1)), m(this, g), (e = this.addEventListener) == null || e.call(this, "invalid", (i) => i.preventDefault());
+      _(this, d);
+      this._validityStates = (f(this, u), /* @__PURE__ */ new Map()), h(this, d, f(this, p, !1)), f(this, v), (e = this.addEventListener) == null || e.call(this, "invalid", (i) => i.preventDefault());
     }
     /**
      * Returns the form owner of this element.
@@ -65,13 +65,6 @@ const z = (a) => (() => {
     get type() {
       return this.localName;
     }
-    /** Value of the form element. */
-    set value(t) {
-      this._value = t, this.updateFormValue();
-    }
-    get value() {
-      return this._value;
-    }
     /**
      * Returns the ValidityState object for this element.
      */
@@ -99,7 +92,7 @@ const z = (a) => (() => {
     }
     /** Whenever a surrounding form or fieldset is changing its disabled state. */
     get formDisabled() {
-      return S(this, d);
+      return V(this, d);
     }
     set formDisabled(t) {
       h(this, d, t);
@@ -141,11 +134,28 @@ const z = (a) => (() => {
       });
     }
     requestUpdate(t, e, i) {
-      super.requestUpdate(t, e, i), this.hasUpdated && this.shouldValidate(t) && this.validate();
+      super.requestUpdate(t, e, i), t === "value" && this.updateFormValue(), this.hasUpdated && this.shouldValidate(t) && this.validate();
     }
     firstUpdated(t) {
       super.firstUpdated(t), this.validate();
     }
+    /**
+     * Should be called when form value is changed.
+     * Adapts and sets the formValue in the supported format (string | FormData | File | null)
+     * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue
+     */
+    updateFormValue() {
+      var i;
+      let t;
+      const e = this.name ?? this.getAttribute("name");
+      typeof this.value == "string" || this.value == null ? t = this.value : Array.isArray(this.value) ? (t = new FormData(), this.value.forEach((l) => {
+        t.append(e, typeof l == "string" ? l : new Blob([JSON.stringify(l)], {
+          type: "application/json"
+        }));
+      })) : (t = new FormData(), t.append(e, new Blob([JSON.stringify(this.value)], {
+        type: "application/json"
+      }))), this.internals.setFormValue(t, (i = this.formState) == null ? void 0 : i.call(this));
+    }
     /**
      * Marks this element as suffering from the constraint indicated by the
      * flag argument and associates the given message to it.
@@ -172,8 +182,8 @@ const z = (a) => (() => {
      */
     setValidityFlag(t, e, i) {
       i ?? (i = !0);
-      const u = this._validityStates.get(t);
-      (!u || u.message !== e || u.flagValue !== i) && (this._validityStates.set(t, { flagValue: i, message: e }), this._setInternalValidity());
+      const l = this._validityStates.get(t);
+      (!l || l.message !== e || l.flagValue !== i) && (this._validityStates.set(t, { flagValue: i, message: e }), this._setInternalValidity());
     }
     /** Removes the validity state flag entry and updates validity state. */
     removeValidityFlag(t) {
@@ -187,33 +197,31 @@ const z = (a) => (() => {
       return !t;
     }
     _setInternalValidity() {
-      var u;
-      let t = (u = this._validityStates.get("customError")) == null ? void 0 : u.message;
+      var l;
+      let t = (l = this._validityStates.get("customError")) == null ? void 0 : l.message;
       const e = {};
-      this._validityStates.forEach(({ flagValue: n, message: c }, I) => {
-        e[I] = n, t || (t = c);
+      this._validityStates.forEach(({ flagValue: o, message: c }, E) => {
+        e[E] = o, t || (t = c);
       });
-      const i = Object.keys(ValidityState.prototype).filter((n) => !(n in k) && n !== "valid");
-      for (const n of i) {
-        const c = n in e ? e[n] : !1;
-        Object.defineProperty(this.internals.validity, n, { value: c, configurable: !0 }), c && (e.customError = !0);
+      const i = Object.keys(ValidityState.prototype).filter((o) => !(o in D) && o !== "valid");
+      for (const o of i) {
+        const c = o in e ? e[o] : !1;
+        Object.defineProperty(this.internals.validity, o, { value: c, configurable: !0 }), c && (e.customError = !0);
       }
-      this.internals.setValidity(e, t), w && Object.defineProperty(this.internals.validity, "customError", {
+      this.internals.setValidity(e, t), O && Object.defineProperty(this.internals.validity, "customError", {
         value: this._validityStates.has("customError") || !!e.customError,
         configurable: !0
       });
     }
   }, d = new WeakMap(), (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    y = [E()], v = [E()], p = [M()], f(l, null, y, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (e) => "name" in e, set: (e, i) => {
+    m = [w()], y = [F()], S(n, null, m, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (e) => "name" in e, set: (e, i) => {
       e.name = i;
-    } }, metadata: t }, null, o), f(l, null, v, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
-      e.value = i;
-    } }, metadata: t }, null, o), f(l, null, p, { kind: "accessor", name: "formDisabled", static: !1, private: !1, access: { has: (e) => "formDisabled" in e, get: (e) => e.formDisabled, set: (e, i) => {
+    } }, metadata: t }, null, u), S(n, null, y, { kind: "accessor", name: "formDisabled", static: !1, private: !1, access: { has: (e) => "formDisabled" in e, get: (e) => e.formDisabled, set: (e, i) => {
       e.formDisabled = i;
-    } }, metadata: t }, b, g), t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.formAssociated = !0, l;
+    } }, metadata: t }, p, v), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.formAssociated = !0, n;
 })();
 export {
-  z as SbbFormAssociatedMixin
+  U as SbbFormAssociatedMixin
 };

package/core/mixins/form-associated-radio-button-mixin.d.ts

@@ -1,9 +1,6 @@
 import { LitElement } from 'lit';
-import { SbbConnectedAbortController } from '../controllers.js';
-import { Constructor } from './constructor.js';
-import { SbbDisabledMixinType } from './disabled-mixin.js';
-import { FormRestoreReason, FormRestoreState, SbbFormAssociatedMixinType } from './form-associated-mixin.js';
-import { SbbRequiredMixinType } from './required-mixin.js';
+import { AbstractConstructor } from './constructor.js';
+import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.js';
 /**
  * A static registry that holds a collection of grouped `radio-buttons`.
  * Groups of radio buttons are local to the form they belong (or the `renderRoot` if they're not part of any form)
@@ -12,18 +9,12 @@ import { SbbRequiredMixinType } from './required-mixin.js';
  * @internal
  */
 export declare const radioButtonRegistry: WeakMap<Node, Map<string, Set<SbbFormAssociatedRadioButtonMixinType>>>;
-export declare class SbbFormAssociatedRadioButtonMixinType extends SbbFormAssociatedMixinType implements Partial<SbbDisabledMixinType>, Partial<SbbRequiredMixinType> {
+declare const SbbFormAssociatedRadioButtonMixinType_base: AbstractConstructor<import('./disabled-mixin.js').SbbDisabledMixinType> & AbstractConstructor<import('./required-mixin.js').SbbRequiredMixinType> & AbstractConstructor<import('./form-associated-mixin.js').SbbFormAssociatedMixinType> & AbstractConstructor<import('./element-internals-mixin.js').SbbElementInternalsMixinType> & typeof LitElement & import('./element-internals-mixin.js').SbbElementInternalsConstructor;
+export declare abstract class SbbFormAssociatedRadioButtonMixinType extends SbbFormAssociatedRadioButtonMixinType_base {
     accessor checked: boolean;
-    accessor disabled: boolean;
-    accessor required: boolean;
     protected associatedRadioButtons?: Set<SbbFormAssociatedRadioButtonMixinType>;
-    /** @deprecated No longer used internally. */
-    protected abort: SbbConnectedAbortController;
     formResetCallback(): void;
     formStateRestoreCallback(state: FormRestoreState | null, reason: FormRestoreReason): void;
-    protected isDisabledExternally(): boolean;
-    protected isRequiredExternally(): boolean;
-    protected withUserInteraction?(): void;
     protected updateFormValue(): void;
     protected updateFocusableRadios(): void;
     protected emitChangeEvents(): void;
@@ -32,5 +23,6 @@ export declare class SbbFormAssociatedRadioButtonMixinType extends SbbFormAssoci
 /**
  * The SbbFormAssociatedRadioButtonMixin enables native form support for radio controls.
  */
-export declare const SbbFormAssociatedRadioButtonMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SbbFormAssociatedRadioButtonMixinType> & T;
+export declare const SbbFormAssociatedRadioButtonMixin: <T extends AbstractConstructor<LitElement>>(superClass: T) => AbstractConstructor<SbbFormAssociatedRadioButtonMixinType> & T;
+export {};
 //# sourceMappingURL=form-associated-radio-button-mixin.d.ts.map

package/core/mixins/form-associated-radio-button-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-radio-button-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-radio-button-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAAuB,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAE,2BAA2B,EAAyB,MAAM,mBAAmB,CAAC;AAGvF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAErB,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAElF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,wEAG7B,CAAC;AAEJ,MAAM,CAAC,OAAO,OAAO,qCACnB,SAAQ,0BACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEvE,SAAgB,OAAO,EAAE,OAAO,CAAC;IACjC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAElC,SAAS,CAAC,sBAAsB,CAAC,EAAE,GAAG,CAAC,qCAAqC,CAAC,CAAC;IAC9E,6CAA6C;IAC7C,SAAS,CAAC,KAAK,EAAE,2BAA2B,CAAC;IAEtC,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,mBAAmB,CAAC,IAAI,IAAI;IACtC,SAAS,CAAC,eAAe,IAAI,IAAI;IACjC,SAAS,CAAC,qBAAqB,IAAI,IAAI;IACvC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAClC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,qCAAqC,GAAG,OAAO,CAAC,IAAI,CAAC;CAC1F;AAED;;GAEG;AAEH,eAAO,MAAM,iCAAiC,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EACjF,YAAY,CAAC,KACZ,WAAW,CAAC,qCAAqC,CAAC,GAAG,CA8SvD,CAAC"}
+{"version":3,"file":"form-associated-radio-button-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-radio-button-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAAuB,MAAM,KAAK,CAAC;AAOrE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAEtB,MAAM,4BAA4B,CAAC;AAGpC;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,wEAG7B,CAAC;;AAEJ,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,qCAAsC,SAAQ,0CAE3E;IACC,SAAgB,OAAO,EAAE,OAAO,CAAC;IAEjC,SAAS,CAAC,sBAAsB,CAAC,EAAE,GAAG,CAAC,qCAAqC,CAAC,CAAC;IAEvE,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,eAAe,IAAI,IAAI;IACjC,SAAS,CAAC,qBAAqB,IAAI,IAAI;IACvC,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAClC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,qCAAqC,GAAG,OAAO,CAAC,IAAI,CAAC;CAC1F;AAED;;GAEG;AAEH,eAAO,MAAM,iCAAiC,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACzF,YAAY,CAAC,KACZ,mBAAmB,CAAC,qCAAqC,CAAC,GAAG,CAsT/D,CAAC"}

package/core/mixins/form-associated-radio-button-mixin.js

@@ -1,16 +1,17 @@
-import { __esDecorate as l, __runInitializers as u } from "tslib";
-import { isServer as p } from "lit";
-import { property as m } from "lit/decorators.js";
-import { interactivityChecker as b, isArrowKeyPressed as f, getNextElementIndex as _ } from "../a11y.js";
-import { SbbConnectedAbortController as R, SbbLanguageController as y } from "../controllers.js";
+import { __esDecorate as h, __runInitializers as m } from "tslib";
+import { isServer as f } from "lit";
+import { property as l } from "lit/decorators.js";
+import { interactivityChecker as b, isArrowKeyPressed as _, getNextElementIndex as y } from "../a11y.js";
+import { SbbLanguageController as R } from "../controllers.js";
 import { i18nSelectionRequired as k } from "../i18n.js";
 import { SbbDisabledMixin as g } from "./disabled-mixin.js";
-import { SbbFormAssociatedMixin as B } from "./form-associated-mixin.js";
-import { SbbRequiredMixin as v } from "./required-mixin.js";
-const c = /* @__PURE__ */ new WeakMap(), D = (h) => (() => {
+import { SbbElementInternalsMixin as B } from "./element-internals-mixin.js";
+import { SbbFormAssociatedMixin as v } from "./form-associated-mixin.js";
+import { SbbRequiredMixin as S } from "./required-mixin.js";
+const u = /* @__PURE__ */ new WeakMap(), V = (p) => (() => {
   var a;
-  let o = g(v(B(h))), r = [], d;
-  return a = class extends o {
+  let r = g(S(v(B(p)))), o = [], n, d;
+  return a = class extends r {
     /**
      * Whether the radio button is checked.
      */
@@ -35,7 +36,7 @@ const c = /* @__PURE__ */ new WeakMap(), D = (h) => (() => {
     }
     constructor() {
       var e;
-      super(), this._checked = (u(this, r), !1), this.abort = new R(this), this._languageController = new y(this), this.internals.role = "radio", (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleArrowKeyDown(t));
+      super(), this._checked = (m(this, o), !1), this._languageController = new R(this), (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleArrowKeyDown(t));
     }
     connectedCallback() {
       super.connectedCallback(), this._connectToRegistry(), this._synchronizeGroupState();
@@ -57,7 +58,13 @@ const c = /* @__PURE__ */ new WeakMap(), D = (h) => (() => {
      * @internal
      */
     formStateRestoreCallback(e, t) {
-      e && (this.checked = e === this.value);
+      typeof e == "string" || e == null ? this.checked = e === this.value : e instanceof FormData && this._readFormData(e).then((i) => {
+        this.checked = i === this.value;
+      });
+    }
+    async _readFormData(e) {
+      const t = e.get(this.name);
+      return t instanceof Blob ? JSON.parse(await t.text()) : t;
     }
     willUpdate(e) {
       super.willUpdate(e), e.has("disabled") && this.updateFocusableRadios();
@@ -70,7 +77,7 @@ const c = /* @__PURE__ */ new WeakMap(), D = (h) => (() => {
      * If 'checked', update the value. Otherwise, do nothing.
      */
     updateFormValue() {
-      this.checked ? this.internals.setFormValue(this.value, this.value) : this.internals.setFormValue(null);
+      this.checked ? super.updateFormValue() : this.internals.setFormValue(null);
     }
     shouldValidate(e) {
       return super.shouldValidate(e) || e === "checked" || e === "required";
@@ -111,10 +118,10 @@ const c = /* @__PURE__ */ new WeakMap(), D = (h) => (() => {
      * Add `this` to the radioButton registry
      */
     _connectToRegistry() {
-      if (!this.name || p)
+      if (!this.name || f)
         return;
       const e = this.form ?? this.getRootNode();
-      this._radioButtonGroupsMap = c.get(e), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), c.set(e, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
+      this._radioButtonGroupsMap = u.get(e), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), u.set(e, this._radioButtonGroupsMap)), this.associatedRadioButtons = this._radioButtonGroupsMap.get(this.name), this.associatedRadioButtons || (this.associatedRadioButtons = /* @__PURE__ */ new Set(), this._radioButtonGroupsMap.set(this.name, this.associatedRadioButtons));
       const t = Array.from(this.associatedRadioButtons);
       this.associatedRadioButtons.clear();
       const i = t.findIndex((s) => this.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_FOLLOWING);
@@ -140,20 +147,22 @@ const c = /* @__PURE__ */ new WeakMap(), D = (h) => (() => {
       Array.from(this.associatedRadioButtons ?? []).filter((e) => e !== this).forEach((e) => e.checked = !1);
     }
     async _handleArrowKeyDown(e) {
-      if (!f(e))
+      if (!_(e))
         return;
       e.preventDefault();
-      const t = this._interactableGroupedRadios().filter((n) => !n.disabled && !n.formDisabled), i = t.indexOf(this), s = _(e, i, t.length);
+      const t = this._interactableGroupedRadios().filter((c) => !c.disabled && !c.formDisabled), i = t.indexOf(this), s = y(e, i, t.length);
       await this.navigateByKeyboard(t[s]);
     }
   }, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    d = [m({ type: Boolean })], l(a, null, d, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, set: (t, i) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n = [l({ type: Boolean })], d = [l()], h(a, null, n, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, set: (t, i) => {
       t.checked = i;
-    } }, metadata: e }, null, r), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a;
+    } }, metadata: e }, null, o), h(a, null, d, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (t) => "name" in t, set: (t, i) => {
+      t.name = i;
+    } }, metadata: e }, null, o), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.role = "radio", a;
 })();
 export {
-  D as SbbFormAssociatedRadioButtonMixin,
-  c as radioButtonRegistry
+  V as SbbFormAssociatedRadioButtonMixin,
+  u as radioButtonRegistry
 };

package/core/mixins/readonly-mixin.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+import { AbstractConstructor } from './constructor.js';
+export declare class SbbReadonlyMixinType {
+    accessor readOnly: boolean;
+}
+/**
+ * Enhance your component with a readonly property.
+ */
+export declare const SbbReadonlyMixin: <T extends AbstractConstructor<LitElement>>(superClass: T) => AbstractConstructor<SbbReadonlyMixinType> & T;
+//# sourceMappingURL=readonly-mixin.d.ts.map

package/core/mixins/readonly-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"readonly-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/readonly-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,SAAgB,QAAQ,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACxE,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAiB9C,CAAC"}

package/core/mixins/readonly-mixin.js

@@ -0,0 +1,30 @@
+import { __esDecorate as i, __runInitializers as d } from "tslib";
+import { property as u } from "lit/decorators.js";
+import { forceType as y } from "../decorators/force-type.js";
+const f = (s) => (() => {
+  var e;
+  let r = s, l = [], n;
+  return e = class extends r {
+    /**
+     * Whether the component is readonly.
+     */
+    set readOnly(a) {
+      var t;
+      this.toggleAttribute("readonly", a), (t = this.requestUpdate) == null || t.call(this);
+    }
+    get readOnly() {
+      return this.hasAttribute("readonly");
+    }
+    constructor() {
+      super(...arguments), d(this, l);
+    }
+  }, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n = [y(), u({ type: Boolean, attribute: "readonly" })], i(e, null, n, { kind: "setter", name: "readOnly", static: !1, private: !1, access: { has: (t) => "readOnly" in t, set: (t, o) => {
+      t.readOnly = o;
+    } }, metadata: a }, null, l), a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), e;
+})();
+export {
+  f as SbbReadonlyMixin
+};

package/core/mixins/required-mixin.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { AbstractConstructor } from './constructor.js';
-import { SbbFormAssociatedMixinType } from './form-associated-mixin.js';
+import { SbbElementInternalsMixinType } from './element-internals-mixin.js';
 export declare class SbbRequiredMixinType {
     accessor required: boolean;
     protected isRequiredExternally(): boolean;
@@ -8,5 +8,5 @@ export declare class SbbRequiredMixinType {
 /**
  * Enhance your component with a required property.
  */
-export declare const SbbRequiredMixin: <T extends AbstractConstructor<LitElement & SbbFormAssociatedMixinType<V>>, V>(superClass: T) => AbstractConstructor<SbbRequiredMixinType> & T;
+export declare const SbbRequiredMixin: <T extends AbstractConstructor<LitElement & SbbElementInternalsMixinType>>(superClass: T) => AbstractConstructor<SbbRequiredMixinType> & T;
 //# sourceMappingURL=required-mixin.d.ts.map

package/core/mixins/required-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"required-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/required-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAE7E,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAS,CAAC,oBAAoB,IAAI,OAAO;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,0BAA0B,CAAC,CAAC,CAAC,CAAC,EACzE,CAAC,EAED,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAiC9C,CAAC"}
+{"version":3,"file":"required-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/required-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AAEjF,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAS,CAAC,oBAAoB,IAAI,OAAO;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,4BAA4B,CAAC,EAExE,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAiC9C,CAAC"}

package/core/mixins.d.ts

@@ -4,6 +4,7 @@
 export * from './mixins/animation-complete-mixin.js';
 export * from './mixins/constructor.js';
 export * from './mixins/disabled-mixin.js';
+export * from './mixins/element-internals-mixin.js';
 export * from './mixins/form-associated-checkbox-mixin.js';
 export * from './mixins/form-associated-input-mixin.js';
 export * from './mixins/form-associated-mixin.js';
@@ -13,5 +14,6 @@ export * from './mixins/named-slot-list-mixin.js';
 export * from './mixins/negative-mixin.js';
 export * from './mixins/panel-mixin.js';
 export * from './mixins/required-mixin.js';
+export * from './mixins/readonly-mixin.js';
 export * from './mixins/update-scheduler-mixin.js';
 //# sourceMappingURL=mixins.d.ts.map

package/core/mixins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qCAAqC,CAAC;AACpD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}

package/core/mixins.js

@@ -1,32 +1,36 @@
 import { SbbAnimationCompleteMixin as r } from "./mixins/animation-complete-mixin.js";
 import { SbbDisabledInteractiveMixin as a, SbbDisabledMixin as t, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
-import { SbbFormAssociatedCheckboxMixin as c } from "./mixins/form-associated-checkbox-mixin.js";
-import { SbbFormAssociatedInputMixin as u } from "./mixins/form-associated-input-mixin.js";
-import { SbbFormAssociatedMixin as v } from "./mixins/form-associated-mixin.js";
-import { SbbFormAssociatedRadioButtonMixin as f, radioButtonRegistry as h } from "./mixins/form-associated-radio-button-mixin.js";
-import { SbbHydrationMixin as S } from "./mixins/hydration-mixin.js";
-import { SbbNamedSlotListMixin as w } from "./mixins/named-slot-list-mixin.js";
-import { SbbNegativeMixin as y } from "./mixins/negative-mixin.js";
-import { SbbPanelMixin as C } from "./mixins/panel-mixin.js";
+import { SbbElementInternalsMixin as c } from "./mixins/element-internals-mixin.js";
+import { SbbFormAssociatedCheckboxMixin as x } from "./mixins/form-associated-checkbox-mixin.js";
+import { SbbFormAssociatedInputMixin as v } from "./mixins/form-associated-input-mixin.js";
+import { SbbFormAssociatedMixin as f } from "./mixins/form-associated-mixin.js";
+import { SbbFormAssociatedRadioButtonMixin as g, radioButtonRegistry as S } from "./mixins/form-associated-radio-button-mixin.js";
+import { SbbHydrationMixin as M } from "./mixins/hydration-mixin.js";
+import { SbbNamedSlotListMixin as y } from "./mixins/named-slot-list-mixin.js";
+import { SbbNegativeMixin as C } from "./mixins/negative-mixin.js";
+import { SbbPanelMixin as I } from "./mixins/panel-mixin.js";
 import { SbbRequiredMixin as D } from "./mixins/required-mixin.js";
-import { SbbUpdateSchedulerMixin as R } from "./mixins/update-scheduler-mixin.js";
+import { SbbReadonlyMixin as N } from "./mixins/readonly-mixin.js";
+import { SbbUpdateSchedulerMixin as q } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const s = e`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
   r as SbbAnimationCompleteMixin,
   a as SbbDisabledInteractiveMixin,
   t as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
-  c as SbbFormAssociatedCheckboxMixin,
-  u as SbbFormAssociatedInputMixin,
-  v as SbbFormAssociatedMixin,
-  f as SbbFormAssociatedRadioButtonMixin,
-  S as SbbHydrationMixin,
-  w as SbbNamedSlotListMixin,
-  y as SbbNegativeMixin,
-  C as SbbPanelMixin,
+  c as SbbElementInternalsMixin,
+  x as SbbFormAssociatedCheckboxMixin,
+  v as SbbFormAssociatedInputMixin,
+  f as SbbFormAssociatedMixin,
+  g as SbbFormAssociatedRadioButtonMixin,
+  M as SbbHydrationMixin,
+  y as SbbNamedSlotListMixin,
+  C as SbbNegativeMixin,
+  I as SbbPanelMixin,
+  N as SbbReadonlyMixin,
   D as SbbRequiredMixin,
-  R as SbbUpdateSchedulerMixin,
-  s as panelCommonStyle,
-  h as radioButtonRegistry
+  q as SbbUpdateSchedulerMixin,
+  n as panelCommonStyle,
+  S as radioButtonRegistry
 };

package/core/styles/core.scss

@@ -28,7 +28,6 @@
 
     // Time Input
     --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
-    --sbb-time-input-s-max-width: #{functions.px-to-rem-build(51)};
 
     // Overlay
     --sbb-overlay-default-z-index: 1000;
@@ -55,7 +54,6 @@
 
       // Time Input
       --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
-      --sbb-time-input-s-max-width: #{functions.px-to-rem-build(58)};
 
       &:has(sbb-header[size='s']) {
         --sbb-header-height: var(--sbb-spacing-fixed-14x);
@@ -78,7 +76,7 @@ html {
 }
 
 sbb-form-field {
-  :where(input, select, textarea, sbb-select, sbb-date-input) {
+  :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
     @include typo.text-m--regular;
     @include helpers.ellipsis;
     @include inputs.input-reset;
@@ -108,8 +106,8 @@ sbb-form-field {
   }
 
   &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
-  // This covers the placeholder of the sbb-date-input
-  &[floating-label] sbb-date-input::after {
+  // This covers the placeholder of the sbb-date-input and sbb-time-input
+  &[floating-label] :where(sbb-date-input, sbb-time-input)::after {
     color: transparent !important;
     -webkit-text-fill-color: transparent !important;
 
@@ -134,7 +132,7 @@ sbb-form-field {
     padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
   }
 
-  &[size='s'] :where(input, sbb-date-input) {
+  &[size='s'] :where(input, sbb-date-input, sbb-time-input) {
     // We shrink the input's height to support all types of inputs (especially type=number).
     // Factor 1.25 ensures, letters are not cut.
     height: calc(var(--sbb-form-field-input-text-size) * 1.25);
@@ -169,6 +167,29 @@ sbb-form-field {
   &[negative] :where(textarea) {
     @include scrollbar.scrollbar($negative: true);
   }
+
+  &:has(
+      :is(
+        :is(input, textarea, select):user-invalid,
+        :is(:state(interacted), [state--interacted]):invalid,
+        .ng-touched.ng-invalid,
+        .sbb-invalid
+      )
+    ),
+  :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
+    --sbb-form-field-border-color: var(--sbb-color-red125);
+    --sbb-form-field-text-color: var(--sbb-color-red125);
+
+    &[negative] {
+      --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
+      --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
+    }
+
+    @include a11y.if-forced-colors {
+      --sbb-form-field-border-color: LinkText !important;
+      --sbb-form-field-text-color: LinkText !important;
+    }
+  }
 }
 
 // Hiding components until they are instantiated
@@ -244,14 +265,6 @@ sbb-title + p {
   margin-block-start: 0;
 }
 
-input[data-sbb-time-input] {
-  max-width: var(--sbb-time-input-max-width);
-
-  sbb-form-field[size='s'] & {
-    max-width: var(--sbb-time-input-s-max-width);
-  }
-}
-
 img {
   aspect-ratio: var(--sbb-image-aspect-ratio);
   object-fit: var(--sbb-image-object-fit);
@@ -501,3 +514,14 @@ sbb-toggle:has(:focus-visible) {
 
   --sbb-focus-outline-offset: #{functions.px-to-rem-build(5)};
 }
+
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s']
+  :where(sbb-option, sbb-autocomplete-grid-option) {
+  --sbb-option-min-height: var(--sbb-size-element-xxs);
+  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
+}
+
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] sbb-optgroup {
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+}