@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

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

@@ -0,0 +1,191 @@
+import { __esDecorate as l, __runInitializers as f } from "tslib";
+import { isServer as r, html as m } from "lit";
+import { property as c, eventOptions as b } from "lit/decorators.js";
+import { sbbInputModalityDetector as p } from "../a11y.js";
+import { SbbLanguageController as g, SbbMediaQueryPointerCoarse as _ } from "../controllers.js";
+import { isWebkit as v, isBlink as y } from "../dom.js";
+import { i18nInputRequired as C } from "../i18n.js";
+import { SbbDisabledMixin as E } from "./disabled-mixin.js";
+import { SbbElementInternalsMixin as S } from "./element-internals-mixin.js";
+import { SbbFormAssociatedMixin as x } from "./form-associated-mixin.js";
+import { SbbReadonlyMixin as k } from "./readonly-mixin.js";
+import { SbbRequiredMixin as w } from "./required-mixin.js";
+const A = () => {
+  if (r)
+    return !1;
+  const a = document.createElement("div");
+  return a.setAttribute("contenteditable", "PLAINTEXT-ONLY"), a.contentEditable === "plaintext-only";
+}, O = A(), z = (a) => (() => {
+  var s;
+  let h = k(E(w(x(S(a))))), n = [], d, u, o;
+  return s = class extends h {
+    /**
+     * Form type of element.
+     * @default 'text'
+     */
+    get type() {
+      return "text";
+    }
+    /**
+     * The value of the input. Reflects the current text value of this input.
+     */
+    set value(e) {
+      this._value = this._cleanText(e), this.hasUpdated && this._assignValue(this._value), this.dispatchEvent(new Event("displayvaluechange", { bubbles: !0, composed: !0 }));
+    }
+    get value() {
+      return this._value ?? "";
+    }
+    set placeholder(e) {
+      e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder"), this.internals.ariaPlaceholder = e || null;
+    }
+    get placeholder() {
+      return this.getAttribute("placeholder") ?? "";
+    }
+    constructor() {
+      super(), this._shouldEmitChange = (f(this, n), !1), this._shouldTriggerSubmit = !1, this.language = new g(this), this._value = "", this.addEventListener?.("input", () => {
+        const e = this._value;
+        this._value = this._cleanText(this.textContent ?? ""), this.requestUpdate("value", e), this.internals.states.add("interacted"), this._shouldEmitChange = !0;
+      }, { capture: !0 }), this.addEventListener?.("change", () => this._shouldEmitChange = !1, { capture: !0 }), this.addEventListener?.("keydown", (e) => {
+        if (this._requiresEmptyPatch() && this._assignValue(""), (e.key === "Enter" || e.key === `
+`) && e.isTrusted)
+          e.preventDefault(), e.stopImmediatePropagation(), this._shouldTriggerSubmit = this.dispatchEvent(new KeyboardEvent("keydown", e));
+        else if (v && this.value && (e.key === "Backspace" || e.key === "Delete") && e.isTrusted) {
+          if (e.preventDefault(), e.stopImmediatePropagation(), !this.dispatchEvent(new KeyboardEvent("keydown", e)))
+            return;
+          const t = window.getSelection()?.getRangeAt(0);
+          if (!t)
+            return;
+          t.startOffset !== t.endOffset ? (t.deleteContents(), this._dispatchInputEvent()) : e.key === "Backspace" && t.startOffset > 0 ? (t.setStart(t.startContainer, t.startOffset - 1), t.deleteContents(), this._dispatchInputEvent()) : e.key === "Delete" && t.endOffset < this.value.length && (t.setEnd(t.endContainer, t.endOffset + 1), t.deleteContents(), this._dispatchInputEvent());
+        }
+      }, { capture: !0 }), this.addEventListener?.("keyup", (e) => {
+        e.key === "Enter" || e.key === `
+` ? (this._emitChangeIfNecessary(), this._shouldTriggerSubmit && (this._shouldTriggerSubmit = !1, this.form?.requestSubmit())) : this._requiresEmptyPatch() && this._setCursorAt(0);
+      }, { capture: !0 }), this.addEventListener?.("paste", (e) => {
+        e.preventDefault(), this._requiresEmptyPatch() && this._assignValue("");
+        const t = this._cleanText(e.clipboardData?.getData("text/plain") ?? ""), i = window.getSelection()?.getRangeAt(0);
+        !i || !t || (i.deleteContents(), i.insertNode(document.createTextNode(this.preparePastedText(t))), i.setStart(i.endContainer, i.endOffset), this._dispatchInputEvent());
+      }), this.addEventListener?.("focus", () => {
+        p.mostRecentModality === "keyboard" && window.getSelection()?.selectAllChildren(this);
+      }), this.addEventListener?.("touchend", () => {
+        this._requiresEmptyPatch() && (this._assignValue("&nbsp;"), this._setCursorAt(0));
+      }), this.addEventListener?.("click", () => {
+        this._requiresEmptyPatch() && p.mostRecentModality === "touch" && this._setCursorAt(0);
+      }), this.addEventListener?.("blur", () => {
+        window.getSelection()?.removeAllRanges(), this.value === "" && this._assignValue(""), this._emitChangeIfNecessary(), this.scrollLeft = 0;
+      }, { capture: !0 });
+    }
+    isDisabledExternally() {
+      return this.formDisabled;
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.internals.ariaMultiLine = "false", this._updateContenteditable(), this._assignValue(this.value);
+    }
+    focus(e) {
+      if (super.focus(e), this._canSelect()) {
+        const t = window.getSelection();
+        if (!t)
+          return;
+        const i = t.rangeCount > 0 ? t.getRangeAt(0) : null;
+        if (i && i.startOffset !== 0)
+          return;
+        this._setCursorAt(this.textContent.length);
+      }
+    }
+    attributeChangedCallback(e, t, i) {
+      (e !== "value" || !this.internals.states.has("interacted")) && super.attributeChangedCallback(e, t, i);
+    }
+    /**
+     * Is called whenever the form is being reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+      this.internals.states.delete("interacted"), 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);
+    }
+    /**
+     * Makes the selection equal to the current object.
+     *
+     * @link https://developer.mozilla.org/docs/Web/API/HTMLInputElement/select
+     */
+    select() {
+      window.getSelection()?.selectAllChildren(this);
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.value && !this.innerHTML.length && this._assignValue(this.value);
+    }
+    requestUpdate(e, t, i) {
+      super.requestUpdate(e, t, i), this.isConnected && (e === "disabled" || e === "formDisabled" || e === "readOnly") && this._updateContenteditable();
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || e === "value" || e === "required";
+    }
+    validate() {
+      super.validate(), this.required && !this.value ? this.setValidityFlag("valueMissing", C[this.language.current]) : this.removeValidityFlag("valueMissing");
+    }
+    preparePastedText(e) {
+      return e;
+    }
+    _requiresEmptyPatch() {
+      return r ? !1 : y && this.value === "" && window.matchMedia(_).matches;
+    }
+    _assignValue(e) {
+      this.innerHTML = e;
+    }
+    _setCursorAt(e) {
+      const t = window.getSelection();
+      if (!t)
+        return;
+      const i = document.createRange();
+      i.setStart(this.firstChild, e), i.collapse(!0), t.removeAllRanges(), t.addRange(i);
+    }
+    _cleanText(e) {
+      return e === null ? "" : `${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 (!r && this.isConnected) {
+        this.internals.ariaReadOnly = this.readOnly ? "true" : null, this.internals.ariaDisabled = this.disabled ? "true" : null;
+        const e = this.disabled || this.readOnly ? "false" : O ? "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 })));
+    }
+    _canSelect() {
+      return !r && !this.disabled && !this.readOnly && !!this.value;
+    }
+    render() {
+      return m`<slot @slotchange=${this._cleanChildren}></slot>`;
+    }
+  }, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    d = [c()], u = [c({ attribute: !1 })], o = [b({ passive: !0 })], l(s, null, d, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
+      t.value = i;
+    } }, metadata: e }, null, n), l(s, null, u, { kind: "setter", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, set: (t, i) => {
+      t.placeholder = i;
+    } }, metadata: e }, null, n), l(s, null, o, { kind: "method", name: "_cleanChildren", static: !1, private: !1, access: { has: (t) => "_cleanChildren" in t, get: (t) => t._cleanChildren }, metadata: e }, null, n), e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.role = "textbox", s.formFieldAssociated = !0, s;
+})();
+export {
+  z as SbbFormAssociatedInputMixin
+};

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

@@ -0,0 +1,230 @@
+var b = (a) => {
+  throw TypeError(a);
+};
+var v = (a, s, r) => s.has(a) || b("Cannot " + r);
+var g = (a, s, r) => (v(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, d) => (v(a, s, "write to private field"), d ? d.call(a, r) : s.set(a, r), r);
+import { __esDecorate as V, __runInitializers as c } from "tslib";
+import { property as E, state as w } from "lit/decorators.js";
+import { isWebkit as F } from "../dom.js";
+const S = {
+  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(S).forEach(([s, r]) => Object.assign(a.prototype, {
+    get [s]() {
+      return r;
+    }
+  })), globalThis.ValidityState = a;
+}
+const C = (a) => (() => {
+  var o, n;
+  let r = a, d = [], f, m, y = [], p = [];
+  return n = class extends r {
+    constructor(...t) {
+      super(...t);
+      _(this, o);
+      this._validityStates = (c(this, d), /* @__PURE__ */ new Map()), h(this, o, c(this, y, !1)), c(this, p), this.addEventListener?.("invalid", (e) => e.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;
+    }
+    /**
+     * 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 g(this, o);
+    }
+    set formDisabled(t) {
+      h(this, o, 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 fieldset changes disabled state.
+     *
+     * @internal
+     */
+    formDisabledCallback(t) {
+      this.formDisabled = this._hasDisabledAncestor();
+    }
+    _hasDisabledAncestor() {
+      let t = this.parentElement;
+      for (; t; ) {
+        if (t.localName === "fieldset" && t.hasAttribute("disabled"))
+          return !0;
+        t = t.parentElement;
+      }
+      return !1;
+    }
+    requestUpdate(t, e, i) {
+      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() {
+      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((i) => {
+        t.append(e, typeof i == "string" ? i : new Blob([JSON.stringify(i)], {
+          type: "application/json"
+        }));
+      })) : (t = new FormData(), t.append(e, new Blob([JSON.stringify(this.value)], {
+        type: "application/json"
+      }))), this.internals.setFormValue(t, this.formState?.());
+    }
+    /**
+     * 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 ??= !0;
+      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) {
+      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() {
+      let t = this._validityStates.get("customError")?.message;
+      const e = {};
+      this._validityStates.forEach(({ flagValue: l, message: u }, D) => {
+        e[D] = l, t ||= u;
+      });
+      const i = Object.keys(ValidityState.prototype).filter((l) => !(l in S) && l !== "valid");
+      for (const l of i) {
+        const u = l in e ? e[l] : !1;
+        Object.defineProperty(this.internals.validity, l, { value: u, configurable: !0 }), u && (e.customError = !0);
+      }
+      this.internals.setValidity(e, t), F && Object.defineProperty(this.internals.validity, "customError", {
+        value: this._validityStates.has("customError") || !!e.customError,
+        configurable: !0
+      });
+    }
+  }, o = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    f = [E()], m = [w()], V(n, null, f, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (e) => "name" in e, set: (e, i) => {
+      e.name = i;
+    } }, metadata: t }, null, d), V(n, null, m, { 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 }, y, p), t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.formAssociated = !0, n;
+})();
+export {
+  C as SbbFormAssociatedMixin
+};

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

@@ -0,0 +1,166 @@
+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 { 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 r = g(S(v(B(p)))), o = [], n, d;
+  return a = class extends r {
+    /**
+     * Whether the radio button is checked.
+     */
+    set checked(e) {
+      this._checked = !!e, this.toggleState("checked", this.checked), this.internals.ariaChecked = this.checked.toString(), this.updateFormValue(), this._synchronizeGroupState();
+    }
+    get checked() {
+      return this._checked;
+    }
+    set name(e) {
+      super.name = e, this._disconnectFromRegistry(), this._connectToRegistry(), this._synchronizeGroupState();
+    }
+    get name() {
+      return super.name;
+    }
+    /**
+     * Form type of element.
+     * @default 'radio'
+     */
+    get type() {
+      return "radio";
+    }
+    constructor() {
+      super(), this._checked = (m(this, o), !1), this._languageController = new R(this), this.addEventListener?.("keydown", (e) => this._handleArrowKeyDown(e));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._connectToRegistry(), this._synchronizeGroupState();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._disconnectFromRegistry();
+    }
+    /**
+     * Is called whenever the form is being reset.
+     * @internal
+     */
+    formResetCallback() {
+      this.checked = this.hasAttribute("checked");
+    }
+    /**
+     *  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".
+     * @internal
+     */
+    formStateRestoreCallback(e, t) {
+      typeof e == "string" || e == null ? this.checked = e === this.value : e instanceof FormData && this._readFormData(e).then((s) => {
+        this.checked = s === 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();
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.updateFocusableRadios();
+    }
+    /**
+     * Called on `value` change
+     * If 'checked', update the value. Otherwise, do nothing.
+     */
+    updateFormValue() {
+      this.checked ? super.updateFormValue() : this.internals.setFormValue(null);
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || e === "checked" || e === "required";
+    }
+    /**
+     * Sets the validity of all associated radio buttons.
+     * If any radio button is required, all associated are required as well.
+     */
+    validate() {
+      if (super.validate(), !this.associatedRadioButtons)
+        return;
+      let e = !1, t = !1;
+      for (const s of this.associatedRadioButtons)
+        e ||= s.required, t ||= s.checked;
+      e && !t ? this.associatedRadioButtons.forEach((s) => s.setValidityFlag("valueMissing", k[this._languageController.current])) : this.associatedRadioButtons.forEach((s) => s.removeValidityFlag("valueMissing"));
+    }
+    /**
+     * Only a single radio should be focusable in the group. Defined as:
+     * - the checked radio;
+     * - the first non-disabled radio in DOM order;
+     */
+    updateFocusableRadios() {
+      if (!this.hasUpdated)
+        return;
+      const e = this._interactableGroupedRadios(), t = e.findIndex((i) => i.checked && !i.disabled && !i.formDisabled), s = t !== -1 ? t : e.findIndex((i) => !i.disabled && !i.formDisabled);
+      s !== -1 && (e[s].tabIndex = 0, e.splice(s, 1)), e.forEach((i) => i.removeAttribute("tabindex"));
+    }
+    async navigateByKeyboard(e) {
+      e.checked = !0, this.emitChangeEvents(), await e.updateComplete, e.focus();
+    }
+    emitChangeEvents() {
+      this.dispatchEvent(new InputEvent("input", { bubbles: !0, cancelable: !0, composed: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }
+    _synchronizeGroupState() {
+      this.checked && this._deselectGroupedRadios(), this.updateFocusableRadios();
+    }
+    /**
+     * Add `this` to the radioButton registry
+     */
+    _connectToRegistry() {
+      if (!this.name || f)
+        return;
+      const e = this.form ?? this.getRootNode();
+      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 s = t.findIndex((i) => this.compareDocumentPosition(i) & Node.DOCUMENT_POSITION_FOLLOWING);
+      s !== -1 ? t.splice(s, 0, this) : t.push(this), t.forEach((i) => this.associatedRadioButtons.add(i)), this.validate();
+    }
+    /**
+     * Remove `this` from the radioButton registry and, if the group is empty, delete the entry from the groups Map
+     */
+    _disconnectFromRegistry() {
+      this.associatedRadioButtons?.delete(this), this.associatedRadioButtons?.size === 0 ? this._radioButtonGroupsMap?.delete(this.name) : this.validate(), this.associatedRadioButtons = void 0, this._radioButtonGroupsMap = void 0;
+    }
+    /**
+     * Return a list of 'interactable' grouped radios, ordered in DOM order
+     */
+    _interactableGroupedRadios() {
+      return Array.from(this.associatedRadioButtons ?? []).filter((e) => b.isVisible(e));
+    }
+    /**
+     * Deselect other radio of the same group
+     */
+    _deselectGroupedRadios() {
+      Array.from(this.associatedRadioButtons ?? []).filter((e) => e !== this).forEach((e) => e.checked = !1);
+    }
+    async _handleArrowKeyDown(e) {
+      if (!_(e))
+        return;
+      e.preventDefault();
+      const t = this._interactableGroupedRadios().filter((c) => !c.disabled && !c.formDisabled), s = t.indexOf(this), i = y(e, s, t.length);
+      await this.navigateByKeyboard(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, s) => {
+      t.checked = s;
+    } }, metadata: e }, null, o), h(a, null, d, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (t) => "name" in t, set: (t, s) => {
+      t.name = s;
+    } }, metadata: e }, null, o), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a.role = "radio", a;
+})();
+export {
+  V as SbbFormAssociatedRadioButtonMixin,
+  u as radioButtonRegistry
+};

package/core/mixins/hydration-mixin.js

@@ -0,0 +1,38 @@
+const h = (o) => {
+  class n extends o {
+    /**
+     * Returns a Promise that resolves when the element has completed hydration.
+     * The Promise value is a boolean that is `true` if the element required hydration
+     * and `false` if not.
+     *
+     * @return A promise of a boolean that resolves to true once the hydration completed.
+     * @internal
+     */
+    get hydrationComplete() {
+      return this._hydrationComplete;
+    }
+    /** Returns whether hydration is required and not completed. */
+    get hydrationRequired() {
+      return this._hydrationRequired;
+    }
+    constructor(...i) {
+      if (super(...i), this._hydrationComplete = new Promise((t) => this._resolveHydration = t), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
+        this._resolveHydration(!1);
+      else {
+        const t = (e) => {
+          this._hydrationRequired && e.stopImmediatePropagation();
+        }, s = { capture: !0 }, r = this.shadowRoot?.querySelectorAll("slot");
+        r?.length && (r.forEach((e) => e.addEventListener("slotchange", t, s)), this.hydrationComplete.then(() => r.forEach((e) => {
+          e.removeEventListener("slotchange", t, s), e.assignedNodes().length && e.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+        })));
+      }
+    }
+    update(i) {
+      super.update(i), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
+    }
+  }
+  return n;
+};
+export {
+  h as SbbHydrationMixin
+};