@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/core/images.js

@@ -0,0 +1,15 @@
+const n = [
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Billetkontrolle.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Kaufmann-frau.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Corona-Schutzkonzept.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Digitale-Werbung-SBB.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Bahnhof-Luzern.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Einheitswagen-IV-EuroCity.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Einsatzstrecken_EW4-Eurocity.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Frau-No-Results.png",
+  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Help-Teaser-Landscape.png"
+];
+export {
+  n as default
+};

package/core/interfaces.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './interfaces/overlay-close-details.js';
 export * from './interfaces/paginator-page.js';
 export * from './interfaces/types.js';

package/core/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/elements/core/interfaces.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/elements/core/interfaces.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC"}

package/core/mixins/animation-complete-mixin.js

@@ -0,0 +1,43 @@
+const a = (t) => {
+  class n extends t {
+    constructor() {
+      super(...arguments), this.isAnimating = !1, this._animationPromise = Promise.resolve();
+    }
+    /**
+     * Returns a promise which completes whenever an animation ends.
+     * When a new animation starts, a new Promise is returned.
+     */
+    get animationComplete() {
+      return this._animationPromise;
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.stopAnimation();
+    }
+    startAnimation() {
+      this.isAnimating || (this._animationPromise = this._enqueueAnimation());
+    }
+    /**
+     * Overriding stopAnimation() breaks functionality.
+     */
+    stopAnimation() {
+    }
+    async _enqueueAnimation() {
+      this.isAnimating = !0;
+      const s = this.stopAnimation, e = new Promise((i) => {
+        this.stopAnimation = () => {
+          s(), this.isAnimating = !1, i();
+        };
+      });
+      try {
+        await this._animationPromise;
+      } catch (i) {
+        Promise.reject(i);
+      }
+      return e;
+    }
+  }
+  return n;
+};
+export {
+  a as SbbAnimationCompleteMixin
+};

package/core/mixins/constructor.js

@@ -0,0 +1 @@
+

package/core/mixins/disabled-mixin.js

@@ -0,0 +1,72 @@
+var v = (e) => {
+  throw TypeError(e);
+};
+var p = (e, a, t) => a.has(e) || v("Cannot " + t);
+var u = (e, a, t) => (p(e, a, "read from private field"), t ? t.call(e) : a.get(e)), m = (e, a, t) => a.has(e) ? v("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), f = (e, a, t, r) => (p(e, a, "write to private field"), r ? r.call(e, t) : a.set(e, t), t);
+import { __esDecorate as _, __runInitializers as o } from "tslib";
+import { property as h } from "lit/decorators.js";
+import { forceType as I, getOverride as S } from "../decorators.js";
+const x = (e) => (() => {
+  var l, i;
+  let t = e, r, n = [], b = [];
+  return i = class extends t {
+    constructor() {
+      super(...arguments);
+      m(this, l, o(this, n, !1));
+      o(this, b);
+    }
+    /** Whether the component is disabled. */
+    get disabled() {
+      return u(this, l);
+    }
+    set disabled(d) {
+      f(this, l, d);
+    }
+    /**
+     * Will be used as 'or' check to the current disabled state.
+     * Can e.g. be used to read disabled state of a group.
+     */
+    isDisabledExternally() {
+      return !1;
+    }
+  }, l = new WeakMap(), (() => {
+    const d = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    r = [I(), h({ reflect: !0, type: Boolean }), S((s, c) => c || s.isDisabledExternally())], _(i, null, r, { kind: "accessor", name: "disabled", static: !1, private: !1, access: { has: (s) => "disabled" in s, get: (s) => s.disabled, set: (s, c) => {
+      s.disabled = c;
+    } }, metadata: d }, n, b), d && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: d });
+  })(), i;
+})(), D = (e) => (() => {
+  var l, i;
+  let t = e, r, n = [], b = [];
+  return i = class extends t {
+    constructor() {
+      super(...arguments);
+      m(this, l, o(this, n, !1));
+      o(this, b);
+    }
+    /** Whether the button should be aria-disabled but stay interactive. */
+    get disabledInteractive() {
+      return u(this, l);
+    }
+    set disabledInteractive(d) {
+      f(this, l, d);
+    }
+  }, l = new WeakMap(), (() => {
+    const d = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    r = [I(), h({ attribute: "disabled-interactive", type: Boolean, reflect: !0 })], _(i, null, r, { kind: "accessor", name: "disabledInteractive", static: !1, private: !1, access: { has: (s) => "disabledInteractive" in s, get: (s) => s.disabledInteractive, set: (s, c) => {
+      s.disabledInteractive = c;
+    } }, metadata: d }, n, b), d && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: d });
+  })(), i;
+})(), w = (e) => {
+  class a extends D(x(e)) {
+    willUpdate(r) {
+      super.willUpdate(r), r.has("disabledInteractive") && (this.internals.ariaDisabled = this.disabledInteractive ? "true" : null), r.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0"));
+    }
+  }
+  return a;
+};
+export {
+  D as SbbDisabledInteractiveMixin,
+  x as SbbDisabledMixin,
+  w as SbbDisabledTabIndexActionMixin
+};

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

@@ -0,0 +1,92 @@
+import { __esDecorate as b, __runInitializers as m } from "tslib";
+import { defaultConverter as k } from "lit";
+import { property as _ } from "lit/decorators.js";
+import { SbbLanguageController as v } from "../controllers.js";
+import { hostAttributes as y } from "../decorators.js";
+import { preventScrollOnSpacebarPress as g } from "../eventing.js";
+import { i18nCheckboxRequired as S } from "../i18n.js";
+import { SbbDisabledMixin as x } from "./disabled-mixin.js";
+import { SbbFormAssociatedMixin as C } from "./form-associated-mixin.js";
+import { SbbRequiredMixin as E } from "./required-mixin.js";
+const R = (p) => (() => {
+  var a;
+  let f = [y({
+    tabindex: "0"
+  })], o, l = [], r, c = x(E(C(p))), n = [], h;
+  return a = class extends c {
+    /** Whether the checkbox is checked. */
+    set checked(e) {
+      const t = typeof e == "object" ? e.attribute : !1;
+      t && (e = e.value), this.hasUpdated && !t && (this._attributeMutationBlocked = !0), this._checked = !!e, this.updateFormValue();
+    }
+    get checked() {
+      return this._checked;
+    }
+    /**
+     * Form type of element.
+     * @default 'checkbox'
+     */
+    get type() {
+      return "checkbox";
+    }
+    constructor() {
+      var e, t, i;
+      super(), this._attributeMutationBlocked = (m(this, n), !1), this._languageController = new v(this), this._checked = !1, this._handleKeyboardInteraction = (s) => {
+        s.key === " " && this._handleUserInteraction();
+      }, this._handleUserInteraction = () => {
+        var s;
+        this.disabled || ((s = this.withUserInteraction) == null || s.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })));
+      }, this.internals.role = "checkbox", (e = this.addEventListener) == null || e.call(this, "click", this._handleUserInteraction), (t = this.addEventListener) == null || t.call(this, "keydown", g), (i = this.addEventListener) == null || i.call(this, "keyup", this._handleKeyboardInteraction);
+    }
+    attributeChangedCallback(e, t, i) {
+      (e !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(e, t, i);
+    }
+    /**
+     * Is called whenever the form is being reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+      this.checked = this.hasAttribute("checked"), this._attributeMutationBlocked = !1;
+    }
+    /**
+     *  Called when the browser is trying to restore element’s state to state in which case
+     *  reason is "restore", or when the browser is trying to fulfill autofill on behalf of
+     *  user in which case reason is "autocomplete".
+     *  In the case of "restore", state is a string, File, or FormData object
+     *  previously set as the second argument to setFormValue.
+     *
+     * @internal
+     */
+    formStateRestoreCallback(e, t) {
+      e && (this.checked = e === "true");
+    }
+    updateFormValue() {
+      this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || e === "checked" || e === "required";
+    }
+    validate() {
+      super.validate(), this.required && !this.checked ? this.setValidityFlag("valueMissing", S[this._languageController.current]) : this.removeValidityFlag("valueMissing");
+    }
+  }, r = a, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    h = [_({
+      type: Boolean,
+      converter: {
+        ...k,
+        // We need to pass information to the setter so that we know it was called by attribute change.
+        fromAttribute: (t, i) => {
+          var d, u;
+          return { value: (u = (d = k).fromAttribute) == null ? void 0 : u.call(d, t, i), attribute: !0 };
+        }
+      }
+    })], b(a, null, h, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, set: (t, i) => {
+      t.checked = i;
+    } }, metadata: e }, null, n), b(null, o = { value: r }, f, { kind: "class", name: r.name, metadata: e }, null, l), r = o.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), m(r, l);
+  })(), r;
+})();
+export {
+  R as SbbFormAssociatedCheckboxMixin
+};

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

@@ -1 +1 @@
-{"version":3,"file":"form-associated-input-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-input-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,UAAU,EAAuB,MAAM,KAAK,CAAC;AAI3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAErB,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAElF,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,+BAC5B,SAAQ,0BACR,YAAW,OAAO,CAAC,oBAAoB,CAAC;IAExC,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE;IACtC,IAAW,WAAW,IAAI,MAAM,CAAC;IAE1B,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,mBAAmB,CAAC,IAAI,IAAI;IACtC,SAAS,CAAC,eAAe,IAAI,IAAI;IACjC,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;CAC3C;AAED;;GAEG;AAEH,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC3E,YAAY,CAAC,KACZ,WAAW,CAAC,+BAA+B,CAAC,GAAG,CAmWjD,CAAC"}
+{"version":3,"file":"form-associated-input-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-input-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,UAAU,EAAuB,MAAM,KAAK,CAAC;AAI3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAErB,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAElF,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,+BAC5B,SAAQ,0BACR,YAAW,OAAO,CAAC,oBAAoB,CAAC;IAExC,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE;IACtC,IAAW,WAAW,IAAI,MAAM,CAAC;IAE1B,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,mBAAmB,CAAC,IAAI,IAAI;IACtC,SAAS,CAAC,eAAe,IAAI,IAAI;IACjC,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;CAC3C;AAgBD;;GAEG;AAEH,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC3E,YAAY,CAAC,KACZ,WAAW,CAAC,+BAA+B,CAAC,GAAG,CAuWjD,CAAC"}

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

@@ -0,0 +1,182 @@
+import { __esDecorate as o, __runInitializers as k } from "tslib";
+import { isServer as h, html as x } from "lit";
+import { property as u, eventOptions as O } from "lit/decorators.js";
+import { sbbInputModalityDetector as S } from "../a11y.js";
+import { SbbLanguageController as w } from "../controllers.js";
+import { isWebkit as A } from "../dom.js";
+import { i18nInputRequired as T } from "../i18n.js";
+import { SbbFormAssociatedMixin as L } from "./form-associated-mixin.js";
+import { SbbRequiredMixin as I } from "./required-mixin.js";
+const R = () => {
+  if (h)
+    return !1;
+  const d = document.createElement("div");
+  return d.setAttribute("contenteditable", "PLAINTEXT-ONLY"), d.contentEditable === "plaintext-only";
+}, M = R(), z = (d) => (() => {
+  var n;
+  let c = I(L(d)), l = [], p, f, b, g;
+  return n = class extends c {
+    /**
+     * Form type of element.
+     * @default 'text'
+     */
+    get type() {
+      return "text";
+    }
+    /**
+     * The text value of the input element.
+     */
+    set value(e) {
+      super.value = this._cleanText(e), this.hasUpdated && (this.innerHTML = super.value);
+    }
+    get value() {
+      return super.value ?? "";
+    }
+    /**
+     * Whether the component is readonly.
+     * @attr readonly
+     * @default false
+     */
+    set readOnly(e) {
+      this.toggleAttribute("readonly", !!e), this.internals.ariaReadOnly = e ? "true" : null, this._updateContenteditable();
+    }
+    get readOnly() {
+      return this.hasAttribute("readonly");
+    }
+    /**
+     * Whether the component is disabled.
+     * @attr disabled
+     * @default false
+     */
+    set disabled(e) {
+      this.toggleAttribute("disabled", !!e), this.internals.ariaDisabled = e ? "true" : null, this._updateContenteditable();
+    }
+    get disabled() {
+      return this.hasAttribute("disabled");
+    }
+    set placeholder(e) {
+      e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder"), this.internals.ariaPlaceholder = e || null;
+    }
+    get placeholder() {
+      return this.getAttribute("placeholder") ?? "";
+    }
+    constructor() {
+      var e, t, a, m, y, _, v;
+      super(), this._interacted = (k(this, l), !1), this._shouldEmitChange = !1, this._shouldTriggerSubmit = !1, this.language = new w(this), this.internals.role = "textbox", (e = this.addEventListener) == null || e.call(this, "input", () => {
+        super.value = this._cleanText(this.textContent ?? ""), this._interacted = !0, this._shouldEmitChange = !0;
+      }, { capture: !0 }), (t = this.addEventListener) == null || t.call(this, "change", () => this._shouldEmitChange = !1, { capture: !0 }), (a = this.addEventListener) == null || a.call(this, "keydown", (i) => {
+        var r;
+        if ((i.key === "Enter" || i.key === `
+`) && i.isTrusted)
+          i.preventDefault(), i.stopImmediatePropagation(), this._shouldTriggerSubmit = this.dispatchEvent(new KeyboardEvent("keydown", i));
+        else if (A && this.value && (i.key === "Backspace" || i.key === "Delete") && i.isTrusted) {
+          if (i.preventDefault(), i.stopImmediatePropagation(), !this.dispatchEvent(new KeyboardEvent("keydown", i)))
+            return;
+          const s = (r = window.getSelection()) == null ? void 0 : r.getRangeAt(0);
+          if (!s)
+            return;
+          s.startOffset !== s.endOffset ? (s.deleteContents(), this._dispatchInputEvent()) : i.key === "Backspace" && s.startOffset > 0 ? (s.setStart(s.startContainer, s.startOffset - 1), s.deleteContents(), this._dispatchInputEvent()) : i.key === "Delete" && s.endOffset < this.value.length && (s.setEnd(s.endContainer, s.endOffset + 1), s.deleteContents(), this._dispatchInputEvent());
+        }
+      }, { capture: !0 }), (m = this.addEventListener) == null || m.call(this, "keyup", (i) => {
+        var r;
+        (i.key === "Enter" || i.key === `
+`) && (this._emitChangeIfNecessary(), this._shouldTriggerSubmit && (this._shouldTriggerSubmit = !1, (r = this.form) == null || r.requestSubmit()));
+      }, { capture: !0 }), (y = this.addEventListener) == null || y.call(this, "paste", (i) => {
+        var C, E;
+        i.preventDefault();
+        const r = this._cleanText(((C = i.clipboardData) == null ? void 0 : C.getData("text/plain")) ?? ""), s = (E = window.getSelection()) == null ? void 0 : E.getRangeAt(0);
+        !s || !r || (s.deleteContents(), s.insertNode(document.createTextNode(r)), s.setStart(s.endContainer, s.endOffset), this._dispatchInputEvent());
+      }), (_ = this.addEventListener) == null || _.call(this, "focus", () => {
+        var i;
+        S.mostRecentModality === "keyboard" && ((i = window.getSelection()) == null || i.selectAllChildren(this));
+      }), (v = this.addEventListener) == null || v.call(this, "blur", () => {
+        var i;
+        (i = window.getSelection()) == null || i.removeAllRanges(), this._emitChangeIfNecessary(), this.scrollLeft = 0;
+      }, { capture: !0 });
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.internals.ariaMultiLine = "false", this._updateContenteditable(), this.innerHTML = this.value;
+    }
+    focus(e) {
+      if (super.focus(e), !h && !this.disabled && !this.readOnly && this.value) {
+        const t = window.getSelection();
+        if (!t)
+          return;
+        let a = t.rangeCount > 0 ? t.getRangeAt(0) : null;
+        if (a && a.startOffset !== 0)
+          return;
+        a = document.createRange(), a.setStart(this.firstChild, this.textContent.length), a.collapse(!0), t.removeAllRanges(), t.addRange(a);
+      }
+    }
+    attributeChangedCallback(e, t, a) {
+      (e !== "value" || !this._interacted) && super.attributeChangedCallback(e, t, a);
+    }
+    /**
+     * Is called whenever the form is being reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+      this._interacted = !1, this.value = this.getAttribute("value") ?? "";
+    }
+    /**
+     *  Called when the browser is trying to restore element’s state to state in which case
+     *  reason is "restore", or when the browser is trying to fulfill autofill on behalf of
+     *  user in which case reason is "autocomplete".
+     *  In the case of "restore", state is a string, File, or FormData object
+     *  previously set as the second argument to setFormValue.
+     *
+     * @internal
+     */
+    formStateRestoreCallback(e, t) {
+      e && typeof e == "string" && (this.value = e);
+    }
+    async firstUpdated(e) {
+      super.firstUpdated(e), this.value && !this.innerHTML.length && (this.innerHTML = this.value);
+    }
+    updateFormValue() {
+      this.internals.setFormValue(this.value, this.value);
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || e === "value" || e === "required";
+    }
+    validate() {
+      super.validate(), this.required && !this.value ? this.setValidityFlag("valueMissing", T[this.language.current]) : this.removeValidityFlag("valueMissing");
+    }
+    _cleanText(e) {
+      return `${e}`.replace(/[\n\r]+/g, "");
+    }
+    _dispatchInputEvent() {
+      this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }));
+    }
+    _cleanChildren() {
+      if (this.childElementCount)
+        for (const e of this.children)
+          e.remove();
+    }
+    _updateContenteditable() {
+      if (!h && this.isConnected) {
+        const e = this.disabled || this.readOnly ? "false" : M ? "plaintext-only" : "true";
+        this.setAttribute("contenteditable", e), this.readOnly ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex");
+      }
+    }
+    _emitChangeIfNecessary() {
+      this._shouldEmitChange && (this._shouldEmitChange = !1, this.dispatchEvent(new Event("change", { bubbles: !0 })));
+    }
+    render() {
+      return x`<slot @slotchange=${this._cleanChildren}></slot>`;
+    }
+  }, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    p = [u({ type: Boolean })], f = [u({ type: Boolean })], b = [u({ attribute: !1 })], g = [O({ passive: !0 })], o(n, null, p, { kind: "setter", name: "readOnly", static: !1, private: !1, access: { has: (t) => "readOnly" in t, set: (t, a) => {
+      t.readOnly = a;
+    } }, metadata: e }, null, l), o(n, null, f, { kind: "setter", name: "disabled", static: !1, private: !1, access: { has: (t) => "disabled" in t, set: (t, a) => {
+      t.disabled = a;
+    } }, metadata: e }, null, l), o(n, null, b, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, set: (t, a) => {
+      t.placeholder = a;
+    } }, metadata: e }, null, l), o(n, null, g, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (t) => "_cleanChildren" in t, get: (t) => t._cleanChildren }, metadata: e }, null, l), e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n;
+})();
+export {
+  z as SbbFormAssociatedInputMixin
+};

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

@@ -0,0 +1,219 @@
+var _ = (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 = {
+  badInput: !1,
+  customError: !1,
+  patternMismatch: !1,
+  rangeOverflow: !1,
+  rangeUnderflow: !1,
+  stepMismatch: !1,
+  tooLong: !1,
+  tooShort: !1,
+  typeMismatch: !1,
+  valueMissing: !1
+};
+if (typeof ValidityState > "u") {
+  const a = class {
+    get valid() {
+      return !0;
+    }
+    constructor() {
+      throw new TypeError("Illegal constructor");
+    }
+  };
+  Object.entries(k).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 {
+    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());
+    }
+    /**
+     * Returns the form owner of this element.
+     */
+    get form() {
+      return this.internals.form;
+    }
+    /**
+     * Name of the form element. Will be read from name attribute.
+     *
+     * @description Developer note: In this case updating the attribute must be synchronous.
+     * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+     */
+    set name(t) {
+      this.setAttribute("name", `${t}`), this.updateFormValue();
+    }
+    get name() {
+      return this.getAttribute("name") ?? "";
+    }
+    /** @internal */
+    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.
+     */
+    get validity() {
+      return this.internals.validity;
+    }
+    /**
+     * Returns the current error message, if available, which corresponds
+     * to the current validation state.
+     * Please note that only one message is returned at a time (e.g. if
+     * multiple validity states are invalid, only the chronologically first one
+     * is returned until it is fixed, at which point the next message might be
+     * returned, if it is still applicable). Also a custom validity message
+     * (see below) has precedence over native validation messages.
+     */
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    /**
+     * Returns true if this element will be validated
+     * when the form is submitted; false otherwise.
+     */
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    /** Whenever a surrounding form or fieldset is changing its disabled state. */
+    get formDisabled() {
+      return S(this, d);
+    }
+    set formDisabled(t) {
+      h(this, d, t);
+    }
+    attributeChangedCallback(t, e, i) {
+      (t !== "name" || e !== i) && super.attributeChangedCallback(t, e, i);
+    }
+    /**
+     * Returns true if this element has no validity problems; false otherwise.
+     * Fires an invalid event at the element in the latter case.
+     */
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    /**
+     * Returns true if this element has no validity problems; otherwise,
+     * returns false, fires an invalid event at the element,
+     * and (if the event isn't canceled) reports the problem to the user.
+     */
+    reportValidity() {
+      return this.internals.reportValidity();
+    }
+    /**
+     * Sets the custom validity message for this element. Use the empty string
+     * to indicate that the element does not have a custom validity error.
+     */
+    setCustomValidity(t) {
+      t ? this.setValidityFlag("customError", t) : this.removeValidityFlag("customError");
+    }
+    /**
+     * Is called whenever a surrounding form / fieldset changes disabled state.
+     * @param disabled
+     *
+     * @internal
+     */
+    formDisabledCallback(t) {
+      Promise.resolve().then(() => {
+        this.formDisabled = t;
+      });
+    }
+    requestUpdate(t, e, i) {
+      super.requestUpdate(t, e, i), this.hasUpdated && this.shouldValidate(t) && this.validate();
+    }
+    firstUpdated(t) {
+      super.firstUpdated(t), this.validate();
+    }
+    /**
+     * Marks this element as suffering from the constraint indicated by the
+     * flag argument and associates the given message to it.
+     * Note that only one message is displayed at a time and custom messages by
+     * consumers are always displayed before internal messages and internal
+     * messages are displayed in the order they were added.
+     * To set/define custom validity state flags, you need to extend the
+     * ValidityState prototype (and the CustomValidityState interface).
+     *
+     * @example
+     *
+     *   // The type of the custom validity state does not need to be boolean.
+     *   Object.assign(ValidityState.prototype, {
+     *     get myError(): boolean {
+     *       return false;
+     *     },
+     *   });
+     *
+     *   declare global {
+     *     interface CustomValidityState {
+     *       myError: boolean;
+     *     }
+     *   }
+     */
+    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());
+    }
+    /** Removes the validity state flag entry and updates validity state. */
+    removeValidityFlag(t) {
+      this._validityStates.has(t) && (this._validityStates.delete(t), this._setInternalValidity());
+    }
+    /** To be called whenever the current element needs to be validated. */
+    validate() {
+    }
+    /** Whether validation should be run on a property change with the given name. */
+    shouldValidate(t) {
+      return !t;
+    }
+    _setInternalValidity() {
+      var u;
+      let t = (u = this._validityStates.get("customError")) == null ? void 0 : u.message;
+      const e = {};
+      this._validityStates.forEach(({ flagValue: n, message: c }, I) => {
+        e[I] = n, 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);
+      }
+      this.internals.setValidity(e, t), w && 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) => {
+      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) => {
+      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;
+})();
+export {
+  z as SbbFormAssociatedMixin
+};