@sbb-esta/lyne-elements-dev 4.7.0-dev.1773148895 → 4.7.0-dev.1773157346

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

@@ -1,166 +1,169 @@
-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;
-})();
+import { __esDecorate as l, __runInitializers as f } from "tslib";
+import { isServer as b } from "lit";
+import { property as u } from "lit/decorators.js";
+import { interactivityChecker as _, isArrowKeyPressed as y, getNextElementIndex as R } from "../a11y.js";
+import { SbbLanguageController as k } from "../controllers.js";
+import { i18nSelectionRequired as g } from "../i18n.js";
+import { SbbDisabledMixin as B } from "./disabled-mixin.js";
+import { SbbElementInternalsMixin as v } from "./element-internals-mixin.js";
+import { SbbFormAssociatedMixin as S } from "./form-associated-mixin.js";
+import { SbbRequiredMixin as x } from "./required-mixin.js";
+const p = /* @__PURE__ */ new WeakMap(), z = (o) => {
+  const m = o._$sbbElement$ ? o : v(o);
+  return (() => {
+    var a;
+    let n = B(x(S(m))), r = [], d, c;
+    return a = class extends n {
+      /**
+       * 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 = (f(this, r), !1), this._languageController = new k(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((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();
+      }
+      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 i of this.associatedRadioButtons)
+          e ||= i.required, t ||= i.checked;
+        e && !t ? this.associatedRadioButtons.forEach((i) => i.setValidityFlag("valueMissing", g[this._languageController.current])) : this.associatedRadioButtons.forEach((i) => i.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((s) => s.checked && !s.disabled && !s.formDisabled), i = t !== -1 ? t : e.findIndex((s) => !s.disabled && !s.formDisabled);
+        i !== -1 && (e[i].tabIndex = 0, e.splice(i, 1)), e.forEach((s) => s.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 || b)
+          return;
+        const e = this.form ?? this.getRootNode();
+        this._radioButtonGroupsMap = p.get(e), this._radioButtonGroupsMap || (this._radioButtonGroupsMap = /* @__PURE__ */ new Map(), p.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);
+        i !== -1 ? t.splice(i, 0, this) : t.push(this), t.forEach((s) => this.associatedRadioButtons.add(s)), 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) => _.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 (!y(e))
+          return;
+        e.preventDefault();
+        const t = this._interactableGroupedRadios().filter((h) => !h.disabled && !h.formDisabled), i = t.indexOf(this), s = R(e, i, t.length);
+        await this.navigateByKeyboard(t[s]);
+      }
+    }, (() => {
+      const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+      d = [u({ type: Boolean })], c = [u()], l(a, null, d, { kind: "setter", name: "checked", static: !1, private: !1, access: { has: (t) => "checked" in t, set: (t, i) => {
+        t.checked = i;
+      } }, metadata: e }, null, r), l(a, null, c, { kind: "setter", name: "name", static: !1, private: !1, access: { has: (t) => "name" in t, set: (t, i) => {
+        t.name = i;
+      } }, metadata: e }, null, r), 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
+  z as SbbFormAssociatedRadioButtonMixin,
+  p as radioButtonRegistry
 };

package/core/mixins/named-slot-list-mixin.js

@@ -1,102 +1,105 @@
-var C = (l) => {
-  throw TypeError(l);
+var S = (e) => {
+  throw TypeError(e);
 };
-var p = (l, i, s) => i.has(l) || C("Cannot " + s);
-var S = (l, i, s) => (p(l, i, "read from private field"), s ? s.call(l) : i.get(l)), f = (l, i, s) => i.has(l) ? C("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(l) : i.set(l, s), c = (l, i, s, o) => (p(l, i, "write to private field"), o ? o.call(l, s) : i.set(l, s), s);
-import { __runInitializers as _, __esDecorate as $ } from "tslib";
+var f = (e, i, n) => i.has(e) || S("Cannot " + n);
+var p = (e, i, n) => (f(e, i, "read from private field"), n ? n.call(e) : i.get(e)), _ = (e, i, n) => i.has(e) ? S("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, n), c = (e, i, n, o) => (f(e, i, "write to private field"), o ? o.call(e, n) : i.set(e, n), n);
+import { __runInitializers as g, __esDecorate as E } from "tslib";
 import { nothing as m, html as h } from "lit";
 import { state as L } from "lit/decorators.js";
 import { SbbHydrationMixin as N } from "./hydration-mixin.js";
 import "../../screen-reader-only.js";
-const g = "data-ssr-child-count", y = "li", O = (l) => (() => {
-  var a, n;
-  let s = N(l), o, u = [], b = [];
-  return n = class extends s {
-    constructor() {
-      super(...arguments);
-      f(this, a);
-      c(this, a, _(this, u, [])), this._handleSlotchange = (_(this, b), () => {
-        const e = Array.from(this.children ?? []).filter((t) => this.listChildLocalNames.includes(t.localName));
-        e.length === this.listChildren.length && this.listChildren.every((t, r) => e[r] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((t) => t.removeAttribute("slot")), this.listChildren = e, this.listChildren.forEach((t, r) => t.setAttribute("slot", `${y}-${r}`)), this.removeAttribute(g));
-      });
-    }
-    /**
-     * A list of children with the defined tag names.
-     * This array is only updated if there is an actual change
-     * to the child elements.
-     */
-    get listChildren() {
-      return S(this, a);
-    }
-    set listChildren(e) {
-      c(this, a, e);
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.shadowRoot?.addEventListener("slotchange", this._handleSlotchange, { passive: !0 });
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback(), this.shadowRoot?.removeEventListener("slotchange", this._handleSlotchange);
-    }
-    /**
-     * Renders list and list slots for slotted children or a number of list slots
-     * corresponding to the `data-ssr-child-count` attribute value.
-     *
-     * This is a possible optimization for SSR, as in an SSR Lit environment
-     * other elements are not available, but might be available in the meta
-     * framework wrapper (like e.g. React). This allows to provide the number of
-     * children to be passed via the `data-ssr-child-count` attribute value.
-     */
-    renderList(e = {}, t = {}) {
-      const r = this.listSlotEntries(t);
-      return r.length >= 2 ? h`
+const $ = "data-ssr-child-count", y = "li", R = (e) => {
+  const i = e._$sbbElement$ ? e : N(e);
+  return (() => {
+    var a, r;
+    let o = i, u, b = [], C = [];
+    return r = class extends o {
+      constructor() {
+        super(...arguments);
+        _(this, a);
+        c(this, a, g(this, b, [])), this._handleSlotchange = (g(this, C), () => {
+          const t = Array.from(this.children ?? []).filter((l) => this.listChildLocalNames.includes(l.localName));
+          t.length === this.listChildren.length && this.listChildren.every((l, s) => t[s] === l) || (this.listChildren.filter((l) => !t.includes(l)).forEach((l) => l.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach((l, s) => l.setAttribute("slot", `${y}-${s}`)), this.removeAttribute($));
+        });
+      }
+      /**
+       * A list of children with the defined tag names.
+       * This array is only updated if there is an actual change
+       * to the child elements.
+       */
+      get listChildren() {
+        return p(this, a);
+      }
+      set listChildren(t) {
+        c(this, a, t);
+      }
+      connectedCallback() {
+        super.connectedCallback(), this.shadowRoot?.addEventListener("slotchange", this._handleSlotchange, { passive: !0 });
+      }
+      disconnectedCallback() {
+        super.disconnectedCallback(), this.shadowRoot?.removeEventListener("slotchange", this._handleSlotchange);
+      }
+      /**
+       * Renders list and list slots for slotted children or a number of list slots
+       * corresponding to the `data-ssr-child-count` attribute value.
+       *
+       * This is a possible optimization for SSR, as in an SSR Lit environment
+       * other elements are not available, but might be available in the meta
+       * framework wrapper (like e.g. React). This allows to provide the number of
+       * children to be passed via the `data-ssr-child-count` attribute value.
+       */
+      renderList(t = {}, l = {}) {
+        const s = this.listSlotEntries(l);
+        return s.length >= 2 ? h`
           <ul
-            class=${e.class || this.localName}
-            aria-label=${e.ariaLabel || m}
-            aria-labelledby=${e.ariaLabelledby || m}
+            class=${t.class || this.localName}
+            aria-label=${t.ariaLabel || m}
+            aria-labelledby=${t.ariaLabelledby || m}
           >
-            ${r.map((d) => h`
+            ${s.map((d) => h`
                 <li aria-hidden=${d.ariaHidden || m}>
                   <slot name=${d.name}></slot>
                 </li>
               `)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : r.length === 1 ? h`<sbb-screen-reader-only>${e.ariaLabel}</sbb-screen-reader-only>
-          <span class=${e.class || this.localName}>
-            <span><slot name=${r[0].name}></slot></span>
+        ` : s.length === 1 ? h`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
+          <span class=${t.class || this.localName}>
+            <span><slot name=${s[0].name}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
-    }
-    /**
-     * Returns an array of SbbNamedSlotProperties, which holds the list slot names and the hidden property;
-     * its length corresponds to the number of matched children or the `data-ssr-child-count` attribute value.
-     *
-     * This is a possible optimization for SSR, as in an SSR Lit environment
-     * other elements are not available, but might be available in the meta
-     * framework wrapper (like e.g. React). This allows to provide the number of
-     * children to be passed via the `data-ssr-child-count` attribute value.
-     */
-    listSlotEntries(e) {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(g) ?? 0) })).map((r, d) => ({
-        name: `${y}-${d}`,
-        ariaHidden: e?.localNameVisualOnly?.includes(r.localName) ?? !1
-      }));
-    }
-    /**
-     * Returns a hidden slot, which is intended as the children change detection.
-     * When an element without a slot attribute is slotted to the element, it triggers
-     * the slotchange event, which can be used to assign it to the appropriate named slot.
-     */
-    renderHiddenSlot() {
-      return h`<span hidden><slot></slot></span>`;
-    }
-  }, a = new WeakMap(), (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    o = [L()], $(n, null, o, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (t) => "listChildren" in t, get: (t) => t.listChildren, set: (t, r) => {
-      t.listChildren = r;
-    } }, metadata: e }, u, b), e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n;
-})();
+      }
+      /**
+       * Returns an array of SbbNamedSlotProperties, which holds the list slot names and the hidden property;
+       * its length corresponds to the number of matched children or the `data-ssr-child-count` attribute value.
+       *
+       * This is a possible optimization for SSR, as in an SSR Lit environment
+       * other elements are not available, but might be available in the meta
+       * framework wrapper (like e.g. React). This allows to provide the number of
+       * children to be passed via the `data-ssr-child-count` attribute value.
+       */
+      listSlotEntries(t) {
+        return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute($) ?? 0) })).map((s, d) => ({
+          name: `${y}-${d}`,
+          ariaHidden: t?.localNameVisualOnly?.includes(s.localName) ?? !1
+        }));
+      }
+      /**
+       * Returns a hidden slot, which is intended as the children change detection.
+       * When an element without a slot attribute is slotted to the element, it triggers
+       * the slotchange event, which can be used to assign it to the appropriate named slot.
+       */
+      renderHiddenSlot() {
+        return h`<span hidden><slot></slot></span>`;
+      }
+    }, a = new WeakMap(), (() => {
+      const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+      u = [L()], E(r, null, u, { kind: "accessor", name: "listChildren", static: !1, private: !1, access: { has: (l) => "listChildren" in l, get: (l) => l.listChildren, set: (l, s) => {
+        l.listChildren = s;
+      } }, metadata: t }, b, C), t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    })(), r;
+  })();
+};
 export {
-  O as SbbNamedSlotListMixin
+  R as SbbNamedSlotListMixin
 };

package/core/mixins/selection-panel-mixin.js

@@ -1,7 +1,8 @@
-import { SbbPropertyWatcherController as o } from "../controllers.js";
-import { SbbElementInternalsMixin as r } from "./element-internals-mixin.js";
-const h = (t) => {
-  class s extends r(t) {
+import { SbbPropertyWatcherController as r } from "../controllers.js";
+import { SbbElementInternalsMixin as n } from "./element-internals-mixin.js";
+const c = (t) => {
+  const s = t._$sbbElement$ ? t : n(t);
+  class i extends s {
     /** Group element if present */
     get group() {
       return this.closest?.("sbb-radio-button-group, sbb-checkbox-group") ?? null;
@@ -10,8 +11,8 @@ const h = (t) => {
     get panel() {
       return this.querySelector?.("sbb-radio-button-panel, sbb-checkbox-panel") ?? null;
     }
-    constructor(...i) {
-      super(i), this._propertyWatcher = new o(this, () => this.panel, {
+    constructor(...o) {
+      super(o), this._propertyWatcher = new r(this, () => this.panel, {
         checked: (e) => {
           this.toggleState("checked", e.checked), this.onInputStateChange?.();
         },
@@ -32,8 +33,8 @@ const h = (t) => {
     onInputStateChange() {
     }
   }
-  return s;
+  return i;
 };
 export {
-  h as SbbSelectionPanelMixin
+  c as SbbSelectionPanelMixin
 };

package/core/styles/core.scss

@@ -51,10 +51,10 @@ $theme: 'standard' !default;
 @use '../../core/mixins/panel-common.global' as panel-common with (
   $theme: $theme
 );
-@use '../../checkbox/checkbox/checkbox.global' as checkbox with (
+@use '../../checkbox/checkbox.global' as checkbox with (
   $theme: $theme
 );
-@use '../../checkbox/checkbox-group/checkbox-group.global' as checkbox-group with (
+@use '../../checkbox-group/checkbox-group.global' as checkbox-group with (
   $theme: $theme
 );
 @use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
@@ -122,7 +122,7 @@ $theme: 'standard' !default;
 @use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
   $theme: $theme
 );
-@use '../../radio-button/radio-button-group/radio-button-group.global' as radio-button-group with (
+@use '../../radio-button-group/radio-button-group.global' as radio-button-group with (
   $theme: $theme
 );
 @use '../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (