@sbb-esta/lyne-elements 4.0.0-next.2 → 4.0.0-next.4

package/core/mixins/element-internals-mixin.js

@@ -1,11 +1,11 @@
-import { isServer as p } from "lit";
-import { SbbSlotStateController as E } from "../controllers.js";
-const g = p || !CSS.supports("selector(:state(loading))") ? class extends Set {
+import { isServer as b } from "lit";
+import { SbbSlotStateController as y } from "../controllers/slot-state-controller.js";
+const g = b || !CSS.supports("selector(:is(:state(loading),[state--loading]))") ? class extends Set {
   constructor(e) {
-    super(), this._host = e, this._host.addController(this);
+    super(), this._host = e, this._applied = b, this._host.addController(this), b || Promise.resolve().then(() => this._applyStates());
   }
   add(e) {
-    return this._host.isConnected && this._toggleState(e, !0), super.add(e);
+    return this._applied && this._toggleState(e, !0), super.add(e);
   }
   delete(e) {
     return this._toggleState(e, !1), super.delete(e);
@@ -14,51 +14,54 @@ const g = p || !CSS.supports("selector(:state(loading))") ? class extends Set {
     this.forEach((e) => this.delete(e));
   }
   hostConnected() {
-    this.forEach((e) => this._toggleState(e, !0));
+    this._applyStates();
   }
-  _toggleState(e, a) {
-    this._host.toggleAttribute(`state--${e}`, a);
+  _toggleState(e, i) {
+    this._host.toggleAttribute(`state--${e}`, i);
+  }
+  _applyStates() {
+    this._applied || (this._applied = !0, this.forEach((e) => this._toggleState(e, !0)));
   }
 } : null;
-if (!p) {
-  let h = 0;
-  const e = (r) => r.shadowRoot?.host ?? (r instanceof Element ? r : (() => {
+if (!b) {
+  let c = 0;
+  const e = (l) => l.shadowRoot?.host ?? (l instanceof Element ? l : (() => {
     throw new Error("Unable to resolve related element! This should never happen.");
-  })()), a = { attributes: !0, attributeFilter: ["id"] }, c = (r, d, m) => {
-    const i = m[Element.name] ?? m[ElementInternals.name];
-    r.setAttribute(d, i.id ||= `aria-ref-${h++}`);
-  }, u = (r, d, m) => {
-    r.setAttribute(d, Object.values(m).reduce((i, l) => i.concat(l)).filter((i, l, t) => t.indexOf(i) === l).map((i) => i.id || (i.id = `aria-ref-${h++}`)).join(" "));
+  })()), i = { attributes: !0, attributeFilter: ["id"] }, t = (l, u, d) => {
+    const h = d[Element.name] ?? d[ElementInternals.name];
+    l.setAttribute(u, h.id ||= `aria-ref-${c++}`);
+  }, f = (l, u, d) => {
+    l.setAttribute(u, Object.values(d).reduce((h, a) => h.concat(a)).filter((h, a, s) => s.indexOf(h) === a).map((h) => h.id || (h.id = `aria-ref-${c++}`)).join(" "));
   };
-  for (const r of [ElementInternals, Element]) {
-    const d = r.prototype;
-    if (!("ariaActiveDescendantElement" in d)) {
-      const m = "aria-activedescendant", i = /* @__PURE__ */ new WeakMap();
-      Object.defineProperty(d, "ariaActiveDescendantElement", {
+  for (const l of [ElementInternals, Element]) {
+    const u = l.prototype;
+    if (!("ariaActiveDescendantElement" in u)) {
+      const d = "aria-activedescendant", h = /* @__PURE__ */ new WeakMap();
+      Object.defineProperty(u, "ariaActiveDescendantElement", {
         enumerable: !0,
         configurable: !0,
         get() {
-          const l = e(this), t = l.getAttribute(m)?.split(/\s+/)[0] ?? null;
-          return t ? l.getRootNode().getElementById?.(t) ?? null : null;
+          const a = e(this), s = a.getAttribute(d)?.split(/\s+/)[0] ?? null;
+          return s ? a.getRootNode().getElementById?.(s) ?? null : null;
         },
-        set(l) {
-          if (l !== null && !(l instanceof Element))
-            throw new TypeError(`Failed to set the 'ariaActiveDescendantElement' property on '${r.name}': Failed to convert value to 'Element'.`);
-          const t = e(this), n = i.get(t);
-          if (n?.observer?.disconnect(), l === null)
-            n && (delete n.elements[r.name], Object.keys(n).length ? n.observer.observe(Object.values(n.elements)[0], a) : (i.delete(t), t.removeAttribute(m)));
-          else if (n)
-            n.elements[r.name] = l, c(t, m, n.elements), Object.values(n.elements).forEach((s) => n.observer.observe(s, a));
+        set(a) {
+          if (a !== null && !(a instanceof Element))
+            throw new TypeError(`Failed to set the 'ariaActiveDescendantElement' property on '${l.name}': Failed to convert value to 'Element'.`);
+          const s = e(this), r = h.get(s);
+          if (r?.observer?.disconnect(), a === null)
+            r && (delete r.elements[l.name], Object.keys(r).length ? r.observer.observe(Object.values(r.elements)[0], i) : (h.delete(s), s.removeAttribute(d)));
+          else if (r)
+            r.elements[l.name] = a, t(s, d, r.elements), Object.values(r.elements).forEach((n) => r.observer.observe(n, i));
           else {
-            const s = { [r.name]: l };
-            c(t, m, s);
-            const o = new MutationObserver(() => c(t, m, s));
-            o.observe(l, a), i.set(t, { elements: s, observer: o });
+            const n = { [l.name]: a };
+            t(s, d, n);
+            const o = new MutationObserver(() => t(s, d, n));
+            o.observe(a, i), h.set(s, { elements: n, observer: o });
           }
         }
       });
     }
-    for (const m of [
+    for (const d of [
       "ariaControlsElements",
       "ariaDescribedByElements",
       "ariaDetailsElements",
@@ -66,47 +69,70 @@ if (!p) {
       "ariaLabelledByElements",
       "ariaOwnsElements"
     ])
-      if (!(m in d)) {
-        const i = /* @__PURE__ */ new WeakMap(), l = `aria-${m.slice(4, -8).toLowerCase()}`;
-        Object.defineProperty(d, m, {
+      if (!(d in u)) {
+        const h = /* @__PURE__ */ new WeakMap(), a = `aria-${d.slice(4, -8).toLowerCase()}`;
+        Object.defineProperty(u, d, {
           enumerable: !0,
           configurable: !0,
           get() {
-            const t = e(this), n = t.getAttribute(l)?.split(/\s+/).filter((s, o, f) => f.indexOf(s) === o).map((s) => t.getRootNode().getElementById?.(s)).filter((s) => s instanceof Element);
-            return n?.length ? Object.freeze(n) : null;
+            const s = e(this), r = s.getAttribute(a)?.split(/\s+/).filter((n, o, m) => m.indexOf(n) === o).map((n) => s.getRootNode().getElementById?.(n)).filter((n) => n instanceof Element);
+            return r?.length ? Object.freeze(r) : null;
           },
-          set(t) {
-            if (t !== null && (!Array.isArray(t) || t.some((o) => !(o instanceof Element))))
-              throw new TypeError(`Failed to set the '${m}' property on '${r.name}': Failed to convert value to 'Element'.`);
-            const n = e(this);
-            t = t?.filter((o, f, b) => b.indexOf(o) === f) ?? null;
-            const s = i.get(n);
-            if (s?.observer?.disconnect(), t === null)
-              s && (delete s.elements[r.name], Object.keys(s.elements).length ? Object.values(s.elements).reduce((o, f) => o.concat(f)).forEach((o) => s.observer.observe(o, a)) : i.delete(n));
-            else if (s)
-              s.elements[r.name] = t, u(n, l, s.elements), Object.values(s.elements).reduce((o, f) => o.concat(f)).forEach((o) => s.observer.observe(o, a));
+          set(s) {
+            if (s !== null && (!Array.isArray(s) || s.some((o) => !(o instanceof Element))))
+              throw new TypeError(`Failed to set the '${d}' property on '${l.name}': Failed to convert value to 'Element'.`);
+            const r = e(this);
+            s = s?.filter((o, m, p) => p.indexOf(o) === m) ?? null;
+            const n = h.get(r);
+            if (n?.observer?.disconnect(), s === null)
+              n && (delete n.elements[l.name], Object.keys(n.elements).length ? Object.values(n.elements).reduce((o, m) => o.concat(m)).forEach((o) => n.observer.observe(o, i)) : h.delete(r));
+            else if (n)
+              n.elements[l.name] = s, f(r, a, n.elements), Object.values(n.elements).reduce((o, m) => o.concat(m)).forEach((o) => n.observer.observe(o, i));
             else {
-              const o = { [r.name]: t };
-              u(n, l, o);
-              const f = new MutationObserver(() => u(n, l, o));
-              t.forEach((b) => f.observe(b, a)), i.set(n, { elements: o, observer: f });
+              const o = { [l.name]: s };
+              f(r, a, o);
+              const m = new MutationObserver(() => f(r, a, o));
+              s.forEach((p) => m.observe(p, i)), h.set(r, { elements: o, observer: m });
             }
           }
         });
       }
   }
 }
-const S = (h, ...e) => {
-  const a = e.filter((c) => !!c);
-  return h?.length ? h.concat(a) : e.length ? a : null;
-}, w = (h, ...e) => {
-  e = e.filter((c) => !!c);
-  const a = h?.filter((c) => !e.includes(c)) ?? null;
-  return a?.length ? a : null;
-}, A = (h) => {
-  class e extends h {
-    constructor(...c) {
-      if (super(...c), this.internals = this.attachInternals(), g)
+const E = /* @__PURE__ */ new WeakMap();
+function O(c) {
+  if (!c)
+    return null;
+  const e = E.get(c)?.states, i = function(t, f) {
+    f || f !== !1 && !this.has(t) ? this.add(t) : this.delete(t);
+  };
+  return e ? {
+    add(t) {
+      return e.add(t), this;
+    },
+    delete: (t) => e.delete(t),
+    has: (t) => e.has(t),
+    toggle: i
+  } : {
+    add(t) {
+      return c.toggleAttribute(`state--${t}`, !0), this;
+    },
+    delete: (t) => c.toggleAttribute(`state--${t}`, !1),
+    has: (t) => c.hasAttribute(`state--${t}`),
+    toggle: i
+  };
+}
+const w = (c, ...e) => {
+  const i = e.filter((t) => !!t);
+  return c?.length ? c.concat(i) : e.length ? i : null;
+}, _ = (c, ...e) => {
+  e = e.filter((t) => !!t);
+  const i = c?.filter((t) => !e.includes(t)) ?? null;
+  return i?.length ? i : null;
+}, j = (c) => {
+  class e extends c {
+    constructor(...t) {
+      if (super(...t), this.internals = this.attachInternals(), E.set(this, this.internals), g)
         Object.defineProperty(this.internals, "states", {
           value: new g(this),
           writable: !1,
@@ -114,19 +140,20 @@ const S = (h, ...e) => {
           enumerable: !1
         });
       else
-        for (const r of this.getAttributeNames().filter((d) => d.startsWith("state--")))
-          this.internals.states.add(r.slice(7)), this.removeAttribute(r);
-      const u = this.constructor.role;
-      u && (this.internals.role = u), this.addController(new E(this, this.internals));
+        for (const l of this.getAttributeNames().filter((u) => u.startsWith("state--")))
+          this.internals.states.add(l.slice(7)), this.removeAttribute(l);
+      const f = this.constructor.role;
+      f && (this.internals.role = f), this.addController(new y(this, this.internals));
     }
-    toggleState(c, u) {
-      u || u !== !1 && !this.internals.states.has(c) ? this.internals.states.add(c) : this.internals.states.delete(c);
+    toggleState(t, f) {
+      f || f !== !1 && !this.internals.states.has(t) ? this.internals.states.add(t) : this.internals.states.delete(t);
     }
   }
   return e;
 };
 export {
-  A as SbbElementInternalsMixin,
-  S as appendAriaElements,
-  w as removeAriaElements
+  j as SbbElementInternalsMixin,
+  w as appendAriaElements,
+  _ as removeAriaElements,
+  O as ɵstateController
 };

package/core/mixins/form-associated-checkbox-mixin.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
-import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.js';
-declare const SbbFormAssociatedCheckboxMixinType_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;
+import { AbstractConstructor } from './constructor.ts';
+import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.ts';
+declare const SbbFormAssociatedCheckboxMixinType_base: AbstractConstructor<import('./disabled-mixin.ts').SbbDisabledMixinType> & AbstractConstructor<import('./required-mixin.ts').SbbRequiredMixinType> & AbstractConstructor<import('./form-associated-mixin.ts').SbbFormAssociatedMixinType> & AbstractConstructor<import('./element-internals-mixin.ts').SbbElementInternalsMixinType> & typeof LitElement & import('./element-internals-mixin.ts').SbbElementInternalsConstructor;
 export declare abstract class SbbFormAssociatedCheckboxMixinType extends SbbFormAssociatedCheckboxMixinType_base {
     accessor checked: boolean;
     formResetCallback(): void;

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

@@ -1,8 +1,8 @@
 import { LitElement } from 'lit';
-import { SbbLanguageController } from '../controllers.js';
-import { AbstractConstructor } from './constructor.js';
-import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.js';
-declare const SbbFormAssociatedInputMixinType_base: 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;
+import { SbbLanguageController } from '../controllers.ts';
+import { AbstractConstructor } from './constructor.ts';
+import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.ts';
+declare const SbbFormAssociatedInputMixinType_base: AbstractConstructor<import('./required-mixin.ts').SbbRequiredMixinType> & AbstractConstructor<import('./form-associated-mixin.ts').SbbFormAssociatedMixinType> & AbstractConstructor<import('./element-internals-mixin.ts').SbbElementInternalsMixinType> & typeof LitElement & import('./element-internals-mixin.ts').SbbElementInternalsConstructor;
 export declare abstract class SbbFormAssociatedInputMixinType extends SbbFormAssociatedInputMixinType_base {
     static readonly formFieldAssociated = true;
     set value(value: string);

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
-import { SbbElementInternalsMixinType } from './element-internals-mixin.js';
+import { AbstractConstructor } from './constructor.ts';
+import { SbbElementInternalsMixinType } from './element-internals-mixin.ts';
 declare global {
     /**
      * Defines custom validity state properties.

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

@@ -76,7 +76,7 @@ const C = (a) => (() => {
      * 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
+     * returned, if it is still applicable). Also, a custom validity message
      * (see below) has precedence over native validation messages.
      */
     get validationMessage() {

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
-import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.js';
+import { AbstractConstructor } from './constructor.ts';
+import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.ts';
 /**
  * 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)
@@ -9,7 +9,7 @@ import { FormRestoreReason, FormRestoreState } from './form-associated-mixin.js'
  * @internal
  */
 export declare const radioButtonRegistry: WeakMap<Node, Map<string, Set<SbbFormAssociatedRadioButtonMixinType>>>;
-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;
+declare const SbbFormAssociatedRadioButtonMixinType_base: AbstractConstructor<import('./disabled-mixin.ts').SbbDisabledMixinType> & AbstractConstructor<import('./required-mixin.ts').SbbRequiredMixinType> & AbstractConstructor<import('./form-associated-mixin.ts').SbbFormAssociatedMixinType> & AbstractConstructor<import('./element-internals-mixin.ts').SbbElementInternalsMixinType> & typeof LitElement & import('./element-internals-mixin.ts').SbbElementInternalsConstructor;
 export declare abstract class SbbFormAssociatedRadioButtonMixinType extends SbbFormAssociatedRadioButtonMixinType_base {
     accessor checked: boolean;
     protected associatedRadioButtons?: Set<SbbFormAssociatedRadioButtonMixinType>;

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

@@ -16,7 +16,7 @@ const u = /* @__PURE__ */ new WeakMap(), V = (p) => (() => {
      * Whether the radio button is checked.
      */
     set checked(e) {
-      this._checked = !!e, this.toggleAttribute("data-checked", this.checked), this.internals.ariaChecked = this.checked.toString(), this.updateFormValue(), this._synchronizeGroupState();
+      this._checked = !!e, this.toggleState("checked", this.checked), this.internals.ariaChecked = this.checked.toString(), this.updateFormValue(), this._synchronizeGroupState();
     }
     get checked() {
       return this._checked;
@@ -57,8 +57,8 @@ const u = /* @__PURE__ */ new WeakMap(), V = (p) => (() => {
      * @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;
+      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) {
@@ -89,9 +89,9 @@ const u = /* @__PURE__ */ new WeakMap(), V = (p) => (() => {
       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", k[this._languageController.current])) : this.associatedRadioButtons.forEach((i) => i.removeValidityFlag("valueMissing"));
+      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:
@@ -101,8 +101,8 @@ const u = /* @__PURE__ */ new WeakMap(), V = (p) => (() => {
     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"));
+      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();
@@ -123,8 +123,8 @@ const u = /* @__PURE__ */ new WeakMap(), V = (p) => (() => {
       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);
-      i !== -1 ? t.splice(i, 0, this) : t.push(this), t.forEach((s) => this.associatedRadioButtons.add(s)), this.validate();
+      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
@@ -148,15 +148,15 @@ const u = /* @__PURE__ */ new WeakMap(), V = (p) => (() => {
       if (!_(e))
         return;
       e.preventDefault();
-      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 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, i) => {
-      t.checked = i;
-    } }, 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;
+    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;
 })();

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
+import { AbstractConstructor } from './constructor.ts';
 export declare abstract class SbbHydrationMixinType {
     /**
      * Returns a Promise that resolves when the element has completed hydration.

package/core/mixins/named-slot-list-mixin.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
-import { AbstractConstructor } from './constructor.js';
-import { SbbHydrationMixinType } from './hydration-mixin.js';
+import { AbstractConstructor } from './constructor.ts';
+import { SbbHydrationMixinType } from './hydration-mixin.ts';
 export type SbbNamedSlotProperties = {
     name: string;
     ariaHidden: boolean;

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
+import { AbstractConstructor } from './constructor.ts';
 export declare class SbbNegativeMixinType {
     accessor negative: boolean;
 }

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

@@ -1,13 +1,21 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
+import { SbbCheckboxGroupElement } from '../../checkbox/checkbox-group.ts';
+import { SbbCheckboxSize } from '../../checkbox/common/checkbox-common.ts';
+import { SbbRadioButtonSize } from '../../radio-button/common/radio-button-common.ts';
+import { SbbRadioButtonGroupElement } from '../../radio-button/radio-button-group.ts';
+import { AbstractConstructor } from './constructor.ts';
+interface SbbPanelWithGroup {
+    group: SbbCheckboxGroupElement | SbbRadioButtonGroupElement | null;
+}
 export declare class SbbPanelMixinType {
     accessor color: 'white' | 'milk';
     accessor borderless: boolean;
     accessor expansionState: string;
+    accessor size: SbbCheckboxSize | SbbRadioButtonSize;
 }
-export type SbbPanelSize = 's' | 'm';
 /**
  * Mixin for common panel behaviors
  */
-export declare const SbbPanelMixin: <T extends AbstractConstructor<LitElement>>(superClass: T) => AbstractConstructor<SbbPanelMixinType> & T;
+export declare const SbbPanelMixin: <T extends AbstractConstructor<LitElement & SbbPanelWithGroup>>(superClass: T) => AbstractConstructor<SbbPanelMixinType> & T;
+export {};
 //# sourceMappingURL=panel-mixin.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"panel-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/panel-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,iBAAiB;IACpC,SAAgB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxC,SAAgB,UAAU,EAAE,OAAO,CAAC;IACpC,SAAgB,cAAc,EAAE,MAAM,CAAC;CACxC;AAED,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,CAAC;AAErC;;GAEG;AAEH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACrE,YAAY,CAAC,KACZ,mBAAmB,CAAC,iBAAiB,CAAC,GAAG,CA6B3C,CAAC"}
+{"version":3,"file":"panel-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/panel-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAChF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0CAA0C,CAAC;AAI3F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,UAAU,iBAAiB;IACzB,KAAK,EAAE,uBAAuB,GAAG,0BAA0B,GAAG,IAAI,CAAC;CACpE;AAED,MAAM,CAAC,OAAO,OAAO,iBAAiB;IACpC,SAAgB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxC,SAAgB,UAAU,EAAE,OAAO,CAAC;IACpC,SAAgB,cAAc,EAAE,MAAM,CAAC;IACvC,SAAgB,IAAI,EAAE,eAAe,GAAG,kBAAkB,CAAC;CAC5D;AAED;;GAEG;AAEH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,GAAG,iBAAiB,CAAC,EACzF,YAAY,CAAC,KACZ,mBAAmB,CAAC,iBAAiB,CAAC,GAAG,CAiC3C,CAAC"}

package/core/mixins/panel-mixin.js

@@ -1,57 +1,71 @@
-var I = (e) => {
-  throw TypeError(e);
+var C = (t) => {
+  throw TypeError(t);
 };
-var w = (e, s, a) => s.has(e) || I("Cannot " + a);
-var p = (e, s, a) => (w(e, s, "read from private field"), a ? a.call(e) : s.get(e)), u = (e, s, a) => s.has(e) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, a), _ = (e, s, a, l) => (w(e, s, "write to private field"), l ? l.call(e, a) : s.set(e, a), a);
-import { __esDecorate as h, __runInitializers as i } from "tslib";
-import { property as m } from "lit/decorators.js";
-import { forceType as j } from "../decorators.js";
-const E = (e) => (() => {
-  var n, c, d, o;
-  let a = e, l, f = [], x = [], g, S = [], y = [], v, z = [], k = [];
-  return o = class extends a {
+var B = (t, a, r) => a.has(t) || C("Cannot " + r);
+var u = (t, a, r) => (B(t, a, "read from private field"), r ? r.call(t) : a.get(t)), h = (t, a, r) => a.has(t) ? C("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), m = (t, a, r, n) => (B(t, a, "write to private field"), n ? n.call(t, r) : a.set(t, r), r);
+import { __esDecorate as b, __runInitializers as l } from "tslib";
+import { property as f } from "lit/decorators.js";
+import { forceType as D, getOverride as L } from "../decorators.js";
+import { isLean as M } from "../dom.js";
+const H = (t) => (() => {
+  var c, d, _, p, i;
+  let r = t, n, z = [], x = [], g, S = [], v = [], y, k = [], I = [], w, O = [], j = [];
+  return i = class extends r {
     constructor() {
       super(...arguments);
-      u(this, n, i(this, f, "white"));
-      u(this, c, (i(this, x), i(this, S, !1)));
-      u(this, d, (i(this, y), i(this, z, "")));
-      i(this, k);
+      h(this, c, l(this, z, "white"));
+      h(this, d, (l(this, x), l(this, S, !1)));
+      h(this, _, (l(this, v), l(this, k, "")));
+      h(this, p, (l(this, I), l(this, O, M() ? "xs" : "m")));
+      l(this, j);
     }
     /** The background color of the panel. */
     get color() {
-      return p(this, n);
+      return u(this, c);
     }
-    set color(r) {
-      _(this, n, r);
+    set color(s) {
+      m(this, c, s);
     }
     /** Whether the unselected panel has a border. */
     get borderless() {
-      return p(this, c);
+      return u(this, d);
     }
-    set borderless(r) {
-      _(this, c, r);
+    set borderless(s) {
+      m(this, d, s);
     }
     /** @internal used for accessibility label when in expansion panel */
     get expansionState() {
-      return p(this, d);
+      return u(this, _);
     }
-    set expansionState(r) {
-      _(this, d, r);
+    set expansionState(s) {
+      m(this, _, s);
+    }
+    /**
+     * Size variant, either xs, s or m.
+     * @default 'm' / 'xs' (lean)
+     */
+    get size() {
+      return u(this, p);
+    }
+    set size(s) {
+      m(this, p, s);
     }
     connectedCallback() {
-      super.connectedCallback(), this.dispatchEvent(new Event("panelconnected", { bubbles: !0 })), this.closest?.("sbb-radio-button-group, sbb-checkbox-group")?.toggleAttribute("data-has-panel", !0);
-    }
-  }, n = new WeakMap(), c = new WeakMap(), d = new WeakMap(), (() => {
-    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    l = [m({ reflect: !0 })], g = [j(), m({ reflect: !0, type: Boolean })], v = [j(), m()], h(o, null, l, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (t) => "color" in t, get: (t) => t.color, set: (t, b) => {
-      t.color = b;
-    } }, metadata: r }, f, x), h(o, null, g, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, b) => {
-      t.borderless = b;
-    } }, metadata: r }, S, y), h(o, null, v, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (t) => "expansionState" in t, get: (t) => t.expansionState, set: (t, b) => {
-      t.expansionState = b;
-    } }, metadata: r }, z, k), r && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
-  })(), o;
+      super.connectedCallback(), this.dispatchEvent(new Event("panelconnected", { bubbles: !0 }));
+    }
+  }, c = new WeakMap(), d = new WeakMap(), _ = new WeakMap(), p = new WeakMap(), (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n = [f({ reflect: !0 })], g = [D(), f({ reflect: !0, type: Boolean })], y = [D(), f()], w = [f({ reflect: !0 }), L((e, o) => e.group?.size ?? o)], b(i, null, n, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, o) => {
+      e.color = o;
+    } }, metadata: s }, z, x), b(i, null, g, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, o) => {
+      e.borderless = o;
+    } }, metadata: s }, S, v), b(i, null, y, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (e) => "expansionState" in e, get: (e) => e.expansionState, set: (e, o) => {
+      e.expansionState = o;
+    } }, metadata: s }, k, I), b(i, null, w, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, o) => {
+      e.size = o;
+    } }, metadata: s }, O, j), s && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), i;
 })();
 export {
-  E as SbbPanelMixin
+  H as SbbPanelMixin
 };

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
+import { AbstractConstructor } from './constructor.ts';
 export declare class SbbReadonlyMixinType {
     accessor readOnly: boolean;
 }

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
-import { SbbElementInternalsMixinType } from './element-internals-mixin.js';
+import { AbstractConstructor } from './constructor.ts';
+import { SbbElementInternalsMixinType } from './element-internals-mixin.ts';
 export declare class SbbRequiredMixinType {
     accessor required: boolean;
     protected isRequiredExternally(): boolean;

package/core/mixins/selection-panel-mixin.d.ts

@@ -1,20 +1,14 @@
 import { LitElement } from 'lit';
-import { SbbCheckboxGroupElement } from '../../checkbox/checkbox-group.js';
-import { SbbRadioButtonGroupElement } from '../../radio-button/radio-button-group.js';
-import { SbbStateChange } from '../interfaces/types.js';
-import { AbstractConstructor } from './constructor.js';
-import { SbbElementInternalsMixinType } from './element-internals-mixin.js';
+import { SbbCheckboxGroupElement } from '../../checkbox/checkbox-group.ts';
+import { SbbCheckboxPanelElement } from '../../checkbox/checkbox-panel.ts';
+import { SbbRadioButtonGroupElement } from '../../radio-button/radio-button-group.ts';
+import { SbbRadioButtonPanelElement } from '../../radio-button/radio-button-panel.ts';
+import { AbstractConstructor } from './constructor.ts';
+import { SbbElementInternalsMixinType } from './element-internals-mixin.ts';
 export declare class SbbSelectionPanelMixinType {
-    accessor color: 'white' | 'milk';
-    accessor borderless: boolean;
-    protected set checked(checked: boolean);
-    protected get checked(): boolean;
-    protected set disabled(disabled: boolean);
-    protected get disabled(): boolean;
-    protected group: SbbRadioButtonGroupElement | SbbCheckboxGroupElement | null;
-    protected sizeAttributeObserver: MutationObserver | null;
-    protected initFromInput(event: Event): void;
-    protected onInputStateChange(event: CustomEvent<SbbStateChange>): void;
+    get panel(): SbbRadioButtonPanelElement | SbbCheckboxPanelElement | null;
+    get group(): SbbRadioButtonGroupElement | SbbCheckboxGroupElement | null;
+    protected onInputStateChange?(): void;
 }
 /**
  * Mixin for common selection panel behaviors