@sbb-esta/lyne-elements 4.10.0 → 4.12.0

package/custom-elements.json

@@ -3951,7 +3951,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "Base class for autocomplete components.",
           "name": "SbbAutocompleteBaseElement",
           "members": [
             {
@@ -4129,9 +4129,9 @@
             },
             {
               "kind": "field",
-              "name": "_originResizeObserver",
+              "name": "_resizeObserver",
               "privacy": "private",
-              "default": "new ResizeController(this, { target: null, skipInitial: true, callback: () => { if (this.state === 'opened') { this._setOverlayPosition(); } }, })"
+              "default": "new ResizeController(this, { target: null, skipInitial: true, // This is an IIFE, because we need to keep track of the timeout state // for debouncing the resize callbacks. callback: (() => { let timeoutId: ReturnType<typeof setTimeout>; return () => { clearTimeout(timeoutId); timeoutId = setTimeout(() => this._setOverlayPosition(), 10); }; })(), })"
             },
             {
               "kind": "field",
@@ -4195,6 +4195,14 @@
               "privacy": "private",
               "default": "0"
             },
+            {
+              "kind": "field",
+              "name": "_previousElements",
+              "type": {
+                "text": "Element[] | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_lastUserInput",
@@ -4881,6 +4889,66 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the autocomplete's trigger when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change"
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires  on the autocomplete's trigger when the value has been changed as a direct result of a user action.",
+              "name": "input"
+            },
+            {
+              "name": "beforeopen",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits whenever the component starts the opening transition. Can be canceled.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits whenever the component is opened.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "name": "beforeclose",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits whenever the component begins the closing transition. Can be canceled.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "name": "close",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits whenever the component is closed.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "origin",
@@ -4987,53 +5055,7 @@
             "name": "SbbOpenCloseBaseElement",
             "module": "core/base-elements.js"
           },
-          "classGenerics": "T = string",
-          "events": [
-            {
-              "name": "beforeopen",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emits whenever the component starts the opening transition. Can be canceled.",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "name": "open",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emits whenever the component is opened.",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "name": "beforeclose",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emits whenever the component begins the closing transition. Can be canceled.",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "name": "close",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emits whenever the component is closed.",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            }
-          ]
+          "classGenerics": "T = string"
         }
       ],
       "exports": [
@@ -5486,9 +5508,9 @@
             },
             {
               "kind": "field",
-              "name": "_originResizeObserver",
+              "name": "_resizeObserver",
               "privacy": "private",
-              "default": "new ResizeController(this, { target: null, skipInitial: true, callback: () => { if (this.state === 'opened') { this._setOverlayPosition(); } }, })",
+              "default": "new ResizeController(this, { target: null, skipInitial: true, // This is an IIFE, because we need to keep track of the timeout state // for debouncing the resize callbacks. callback: (() => { let timeoutId: ReturnType<typeof setTimeout>; return () => { clearTimeout(timeoutId); timeoutId = setTimeout(() => this._setOverlayPosition(), 10); }; })(), })",
               "inheritedFrom": {
                 "name": "SbbAutocompleteBaseElement",
                 "module": "autocomplete/autocomplete-base-element.js"
@@ -5588,6 +5610,18 @@
                 "module": "autocomplete/autocomplete-base-element.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "_previousElements",
+              "type": {
+                "text": "Element[] | undefined"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SbbAutocompleteBaseElement",
+                "module": "autocomplete/autocomplete-base-element.js"
+              }
+            },
             {
               "kind": "field",
               "name": "_lastUserInput",
@@ -6370,6 +6404,28 @@
             }
           ],
           "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the autocomplete's trigger when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change",
+              "inheritedFrom": {
+                "name": "SbbAutocompleteBaseElement",
+                "module": "autocomplete/autocomplete-base-element.js"
+              }
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires  on the autocomplete's trigger when the value has been changed as a direct result of a user action.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "SbbAutocompleteBaseElement",
+                "module": "autocomplete/autocomplete-base-element.js"
+              }
+            },
             {
               "name": "beforeopen",
               "type": {
@@ -9403,6 +9459,205 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "chip-label/chip-label.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "It displays brief and compact information.",
+          "name": "SbbChipLabelElement",
+          "slots": [
+            {
+              "description": "Use the unnamed slot to add content to the `sbb-chip-label`.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "elementName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "static": true,
+              "readonly": true,
+              "default": "'sbb-chip-label'",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'xxs' | 'xs' | 's'"
+              },
+              "privacy": "public",
+              "default": "'xxs'",
+              "description": "Size of the chip.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "'milk' | 'charcoal' | 'white' | 'granite'"
+              },
+              "privacy": "public",
+              "default": "'milk'",
+              "description": "Color of the chip.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_hydrationRequired",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "!!this.shadowRoot",
+              "inheritedFrom": {
+                "name": "SbbHydrationMixin",
+                "module": "core/mixins/hydration-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hydrationComplete",
+              "privacy": "private",
+              "default": "new Promise<boolean>( (resolve) => (this._resolveHydration = resolve), )",
+              "inheritedFrom": {
+                "name": "SbbHydrationMixin",
+                "module": "core/mixins/hydration-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_resolveHydration",
+              "type": {
+                "text": "(hydrationRequired: boolean) => void"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SbbHydrationMixin",
+                "module": "core/mixins/hydration-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hydrationRequired",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Returns whether hydration is required and not completed.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "SbbHydrationMixin",
+                "module": "core/mixins/hydration-mixin.js"
+              },
+              "default": "!!this.shadowRoot"
+            },
+            {
+              "kind": "method",
+              "name": "toggleState",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "force",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "SbbElementInternalsMixin",
+                "module": "core/mixins/element-internals-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "['_$sbbElement$']",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "static": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_controllers",
+              "type": {
+                "text": "Set<SbbReactiveController> | undefined"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'xxs' | 'xs' | 's'"
+              },
+              "default": "'xxs'",
+              "description": "Size of the chip.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "'milk' | 'charcoal' | 'white' | 'granite'"
+              },
+              "default": "'milk'",
+              "description": "Color of the chip.",
+              "fieldName": "color"
+            }
+          ],
+          "superclass": {
+            "name": "SbbElement",
+            "module": "core/base-elements.js"
+          },
+          "tagName": "sbb-chip-label",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbbChipLabelElement",
+          "declaration": {
+            "name": "SbbChipLabelElement",
+            "module": "chip-label/chip-label.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "clock/clock.component.js",
@@ -9833,205 +10088,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "chip-label/chip-label.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "It displays brief and compact information.",
-          "name": "SbbChipLabelElement",
-          "slots": [
-            {
-              "description": "Use the unnamed slot to add content to the `sbb-chip-label`.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "elementName",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "static": true,
-              "readonly": true,
-              "default": "'sbb-chip-label'",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'xxs' | 'xs' | 's'"
-              },
-              "privacy": "public",
-              "default": "'xxs'",
-              "description": "Size of the chip.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "'milk' | 'charcoal' | 'white' | 'granite'"
-              },
-              "privacy": "public",
-              "default": "'milk'",
-              "description": "Color of the chip.",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_hydrationRequired",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "!!this.shadowRoot",
-              "inheritedFrom": {
-                "name": "SbbHydrationMixin",
-                "module": "core/mixins/hydration-mixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_hydrationComplete",
-              "privacy": "private",
-              "default": "new Promise<boolean>( (resolve) => (this._resolveHydration = resolve), )",
-              "inheritedFrom": {
-                "name": "SbbHydrationMixin",
-                "module": "core/mixins/hydration-mixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_resolveHydration",
-              "type": {
-                "text": "(hydrationRequired: boolean) => void"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SbbHydrationMixin",
-                "module": "core/mixins/hydration-mixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hydrationRequired",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "description": "Returns whether hydration is required and not completed.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "SbbHydrationMixin",
-                "module": "core/mixins/hydration-mixin.js"
-              },
-              "default": "!!this.shadowRoot"
-            },
-            {
-              "kind": "method",
-              "name": "toggleState",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "force",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "SbbElementInternalsMixin",
-                "module": "core/mixins/element-internals-mixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "['_$sbbElement$']",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_controllers",
-              "type": {
-                "text": "Set<SbbReactiveController> | undefined"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "'xxs' | 'xs' | 's'"
-              },
-              "default": "'xxs'",
-              "description": "Size of the chip.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "'milk' | 'charcoal' | 'white' | 'granite'"
-              },
-              "default": "'milk'",
-              "description": "Color of the chip.",
-              "fieldName": "color"
-            }
-          ],
-          "superclass": {
-            "name": "SbbElement",
-            "module": "core/base-elements.js"
-          },
-          "tagName": "sbb-chip-label",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SbbChipLabelElement",
-          "declaration": {
-            "name": "SbbChipLabelElement",
-            "module": "chip-label/chip-label.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "container/container.js",
@@ -19755,6 +19811,12 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_resizeController",
+              "privacy": "private",
+              "default": "new ResizeController(this, { target: null, callback: () => this._setPopoverPosition(), })"
+            },
             {
               "kind": "field",
               "name": "_escapableOverlayController",
@@ -20683,6 +20745,16 @@
                 "module": "popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "_resizeController",
+              "privacy": "private",
+              "default": "new ResizeController(this, { target: null, callback: () => this._setPopoverPosition(), })",
+              "inheritedFrom": {
+                "name": "SbbPopoverBaseElement",
+                "module": "popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "_escapableOverlayController",
@@ -69416,7 +69488,8 @@
                 "text": "number"
               }
             }
-          ]
+          ],
+          "deprecated": "true"
         }
       ],
       "exports": [
@@ -78273,7 +78346,7 @@
         },
         {
           "kind": "class",
-          "description": "",
+          "description": "Base component for datepicker's buttons.",
           "name": "SbbDatepickerButtonBase",
           "members": [
             {
@@ -79046,6 +79119,22 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the datepicker's input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change"
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires on the datepicker's input when the value has been changed as a direct result of a user action.",
+              "name": "input"
+            }
+          ],
           "attributes": [
             {
               "name": "input",
@@ -80107,6 +80196,30 @@
                 "module": "core/mixins/form-associated-mixin.js"
               }
             }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the datepicker's input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change",
+              "inheritedFrom": {
+                "name": "SbbDatepickerButtonBase",
+                "module": "datepicker/common/datepicker-button.js"
+              }
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires on the datepicker's input when the value has been changed as a direct result of a user action.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "SbbDatepickerButtonBase",
+                "module": "datepicker/common/datepicker-button.js"
+              }
+            }
           ]
         }
       ],
@@ -80420,6 +80533,16 @@
                 "module": "popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "_resizeController",
+              "privacy": "private",
+              "default": "new ResizeController(this, { target: null, callback: () => this._setPopoverPosition(), })",
+              "inheritedFrom": {
+                "name": "SbbPopoverBaseElement",
+                "module": "popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "_escapableOverlayController",
@@ -80978,6 +81101,20 @@
               "description": "Event emitted on date selection.",
               "name": "dateselected"
             },
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the datepicker's input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change"
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires  on the datepicker's input when the value has been changed as a direct result of a user action.",
+              "name": "input"
+            },
             {
               "name": "beforeclose",
               "type": {
@@ -82118,6 +82255,30 @@
                 "module": "core/mixins/form-associated-mixin.js"
               }
             }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the datepicker's input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change",
+              "inheritedFrom": {
+                "name": "SbbDatepickerButtonBase",
+                "module": "datepicker/common/datepicker-button.js"
+              }
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires on the datepicker's input when the value has been changed as a direct result of a user action.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "SbbDatepickerButtonBase",
+                "module": "datepicker/common/datepicker-button.js"
+              }
+            }
           ]
         }
       ],
@@ -83159,6 +83320,30 @@
                 "module": "core/mixins/form-associated-mixin.js"
               }
             }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the datepicker's input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change",
+              "inheritedFrom": {
+                "name": "SbbDatepickerButtonBase",
+                "module": "datepicker/common/datepicker-button.js"
+              }
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires on the datepicker's input when the value has been changed as a direct result of a user action.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "SbbDatepickerButtonBase",
+                "module": "datepicker/common/datepicker-button.js"
+              }
+            }
           ]
         }
       ],
@@ -84102,7 +84287,31 @@
           },
           "tagName": "sbb-datepicker-toggle",
           "customElement": true,
-          "classGenerics": "T = Date"
+          "classGenerics": "T = Date",
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the datepicker's input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change",
+              "inheritedFrom": {
+                "name": "SbbDatepickerButtonBase",
+                "module": "datepicker/common/datepicker-button.js"
+              }
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires on the datepicker's input when the value has been changed as a direct result of a user action.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "SbbDatepickerButtonBase",
+                "module": "datepicker/common/datepicker-button.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -93941,6 +94150,15 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_previousType",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "method",
               "name": "_handleWrapperClick",
@@ -95142,6 +95360,22 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the component's associated input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change"
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires on the component's associated input when the value has been changed as a direct result of a user action.",
+              "name": "input"
+            }
+          ],
           "mixins": [
             {
               "name": "SbbNegativeMixin",
@@ -120224,16 +120458,20 @@
     },
     {
       "kind": "javascript-module",
-      "path": "sidebar/sidebar-container/sidebar-container.component.js",
+      "path": "sidebar/sidebar/sidebar.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "This is the parent component to one or two `<sbb-sidebar>`s that validates the state internally\nand coordinates the backdrop and content styling.",
-          "name": "SbbSidebarContainerElement",
+          "description": "This component corresponds to a sidebar that can be opened on the sidebar container.",
+          "name": "SbbSidebarElement",
           "slots": [
             {
-              "description": "Use the unnamed slot to add `sbb-sidebar` and `sbb-sidebar-content` elements.",
+              "description": "Use the unnamed slot to slot any content into the sidebar.",
               "name": ""
+            },
+            {
+              "description": "Use the title slot to add an <sbb-title>.",
+              "name": "title"
             }
           ],
           "members": [
@@ -120246,123 +120484,212 @@
               "privacy": "public",
               "static": true,
               "readonly": true,
-              "default": "'sbb-sidebar-container'",
               "inheritedFrom": {
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
-              }
+              },
+              "default": "'sbb-sidebar'"
             },
             {
               "kind": "field",
-              "name": "sidebars",
+              "name": "color",
               "type": {
-                "text": "SbbSidebarElement[]"
+                "text": "'white' | 'milk'"
               },
               "privacy": "public",
-              "description": "The sidebar children.",
-              "readonly": true
+              "default": "'white'",
+              "description": "Background color of the sidebar. Either `white` or `milk`.",
+              "attribute": "color",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "start",
+              "name": "mode",
               "type": {
-                "text": "SbbSidebarElement | null"
+                "text": "'side' | 'over'"
               },
               "privacy": "public",
-              "description": "The sidebar child with the `start` position.",
-              "readonly": true
+              "default": "'side'",
+              "description": "Mode of the sidebar; one of 'side' or 'over'.",
+              "attribute": "mode",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "end",
+              "name": "position",
               "type": {
-                "text": "SbbSidebarElement | null"
+                "text": "'start' | 'end'"
               },
               "privacy": "public",
-              "description": "The sidebar child with the `end` position.",
-              "readonly": true
+              "default": "'start'",
+              "description": "The side that the sidebar is attached to.",
+              "attribute": "position",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_forcedClosedSidebars",
+              "name": "opened",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the sidebar is opened or closed.\nCan be used to initially set the opened state, where\nthe animation will be skipped.",
+              "attribute": "opened",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "focusOnOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the sidebar should focus the first focusable element automatically when opened.\nDefaults to false in when mode is set to `side`, otherwise defaults to true.\nIf explicitly enabled, focus will be moved into the sidebar in `side` mode as well.",
+              "attribute": "focus-on-open"
+            },
+            {
+              "kind": "field",
+              "name": "container",
+              "type": {
+                "text": "SbbSidebarContainerElement | null"
+              },
+              "privacy": "public",
+              "description": "Returns the SbbSidebarContainerElement where this sidebar is contained.",
+              "readonly": true,
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_container",
+              "type": {
+                "text": "SbbSidebarContainerElement | null"
+              },
               "privacy": "private",
-              "default": "new WeakSet<SbbSidebarElement>()"
+              "default": "null"
             },
             {
-              "kind": "method",
-              "name": "_handleWidthChange",
+              "kind": "field",
+              "name": "_lastFocusedElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_focusTrapController",
+              "privacy": "private",
+              "default": "new SbbFocusTrapController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_escapableOverlayController",
               "privacy": "private",
+              "default": "new SbbEscapableOverlayController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_closeOnNavigation",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Toggles the sidebar visibility."
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
                 }
+              },
+              "description": "Opens the sidebar.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
               }
             },
             {
               "kind": "method",
-              "name": "_calculateSpaceState",
+              "name": "_isZeroAnimationDuration",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "boolean"
                 }
-              },
-              "description": "Closes and opens sidebars depending on available width\nof the container and its parent container."
+              }
             },
             {
-              "kind": "field",
-              "name": "_hydrationRequired",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "_handleOpening",
               "privacy": "private",
-              "default": "!!this.shadowRoot",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Closes the sidebar.",
               "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
               }
             },
             {
-              "kind": "field",
-              "name": "_hydrationComplete",
+              "kind": "method",
+              "name": "_handleClosing",
               "privacy": "private",
-              "default": "new Promise<boolean>( (resolve) => (this._resolveHydration = resolve), )",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
-              "kind": "field",
-              "name": "_resolveHydration",
-              "type": {
-                "text": "(hydrationRequired: boolean) => void"
-              },
+              "kind": "method",
+              "name": "_takeFocus",
               "privacy": "private",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
-              "kind": "field",
-              "name": "hydrationRequired",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "cedeFocus",
               "privacy": "protected",
-              "description": "Returns whether hydration is required and not completed.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              },
-              "default": "!!this.shadowRoot"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "toggleState",
-              "privacy": "protected",
+              "name": "_updateSidebarWidth",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -120370,167 +120697,598 @@
               },
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "oldPosition",
+                  "optional": true,
                   "type": {
-                    "text": "string"
+                    "text": "this['position']"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_buildCssWidthVar",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
                 {
-                  "name": "force",
-                  "optional": true,
+                  "name": "position",
+                  "default": "this.position"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isModeOver",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onTransitionEnd",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
                   "type": {
-                    "text": "boolean"
+                    "text": "TransitionEvent"
                   }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_detectScrolledState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
               "kind": "field",
-              "name": "['_$sbbElement$']",
+              "name": "isAnimating",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
-              "static": true,
-              "default": "true",
+              "default": "false",
+              "description": "Whether the component is currently animating.",
               "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
+                "name": "SbbAnimationCompleteMixin",
+                "module": "core/mixins/animation-complete-mixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "_controllers",
+              "name": "animationComplete",
               "type": {
-                "text": "Set<SbbReactiveController> | undefined"
+                "text": "Promise<void>"
               },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "SbbElement",
-            "module": "core/base-elements.js"
-          },
-          "tagName": "sbb-sidebar-container",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SbbSidebarContainerElement",
-          "declaration": {
-            "name": "SbbSidebarContainerElement",
-            "module": "sidebar/sidebar-container/sidebar-container.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "sidebar/sidebar-close-button/sidebar-close-button.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Sidebar close button, intended to be placed inside sbb-sidebar.",
-          "name": "SbbSidebarCloseButtonElement",
-          "slots": [
-            {
-              "description": "Use the unnamed slot to add content to the sidebar-close-button. Not intended to be used in this context.",
-              "name": "",
+              "privacy": "public",
+              "description": "Returns a promise which completes whenever an animation ends.\nWhen a new animation starts, a new Promise is returned.",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "SbbSecondaryButtonElement",
-                "module": "button/secondary-button/secondary-button.component.js"
+                "name": "SbbAnimationCompleteMixin",
+                "module": "core/mixins/animation-complete-mixin.js"
               }
             },
-            {
-              "description": "Slot used to display the icon, if one is set. Not intended to be used in this context.",
-              "name": "icon",
-              "inheritedFrom": {
-                "name": "SbbSecondaryButtonElement",
-                "module": "button/secondary-button/secondary-button.component.js"
-              }
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "elementName",
+              "name": "_animationPromise",
               "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "static": true,
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
+                "text": "Promise<void>"
               },
-              "default": "'sbb-sidebar-close-button'"
-            },
-            {
-              "kind": "field",
-              "name": "_languageController",
               "privacy": "private",
-              "default": "new SbbLanguageController(this)"
+              "inheritedFrom": {
+                "name": "SbbAnimationCompleteMixin",
+                "module": "core/mixins/animation-complete-mixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "renderTemplate",
+              "name": "startAnimation",
               "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "void"
                 }
               },
-              "description": "Override this method to render the component template.",
               "inheritedFrom": {
-                "name": "SbbActionBaseElement",
-                "module": "core/base-elements/action-base-element.js"
+                "name": "SbbAnimationCompleteMixin",
+                "module": "core/mixins/animation-complete-mixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderIconName",
+              "name": "stopAnimation",
               "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "string"
+                  "text": "void"
                 }
               },
+              "description": "Overriding stopAnimation() breaks functionality.",
               "inheritedFrom": {
-                "name": "SbbIconNameMixin",
-                "module": "icon/icon-name-mixin.js"
+                "name": "SbbAnimationCompleteMixin",
+                "module": "core/mixins/animation-complete-mixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "SbbButtonSize"
+              "kind": "method",
+              "name": "_enqueueAnimation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
               },
-              "privacy": "public",
-              "description": "Size variant, either l, m or s.",
-              "default": "'s'",
-              "attribute": "size",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "SbbButtonCommonElementMixin",
-                "module": "button/common/button-common.js"
+                "name": "SbbAnimationCompleteMixin",
+                "module": "core/mixins/animation-complete-mixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "loading",
-              "type": {
+              "name": "events",
+              "privacy": "public",
+              "static": true,
+              "readonly": true,
+              "default": "{ beforeopen: 'beforeopen', open: 'open', beforeclose: 'beforeclose', close: 'close', }",
+              "type": {
+                "text": "{\n    beforeopen: 'beforeopen',\n    open: 'open',\n    beforeclose: 'beforeclose',\n    close: 'close',\n  }"
+              },
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "privacy": "protected",
+              "description": "The state of the component.",
+              "type": {
+                "text": "SbbOpenedClosedState"
+              },
+              "default": "'closed'",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_state",
+              "type": {
+                "text": "SbbOpenedClosedState"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "description": "Whether the element is open.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "escapeStrategy",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The method which is called on escape key press. Defaults to calling close()",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchBeforeOpenEvent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchOpenEvent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchBeforeCloseEvent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchCloseEvent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hydrationRequired",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "!!this.shadowRoot",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hydrationComplete",
+              "privacy": "private",
+              "default": "new Promise<boolean>( (resolve) => (this._resolveHydration = resolve), )",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_resolveHydration",
+              "type": {
+                "text": "(hydrationRequired: boolean) => void"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hydrationRequired",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Returns whether hydration is required and not completed.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              },
+              "default": "!!this.shadowRoot"
+            },
+            {
+              "kind": "method",
+              "name": "toggleState",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "force",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "['_$sbbElement$']",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "static": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_controllers",
+              "type": {
+                "text": "Set<SbbReactiveController> | undefined"
+              },
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "'white' | 'milk'"
+              },
+              "default": "'white'",
+              "description": "Background color of the sidebar. Either `white` or `milk`.",
+              "fieldName": "color"
+            },
+            {
+              "name": "mode",
+              "type": {
+                "text": "'side' | 'over'"
+              },
+              "default": "'side'",
+              "description": "Mode of the sidebar; one of 'side' or 'over'.",
+              "fieldName": "mode"
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "'start' | 'end'"
+              },
+              "default": "'start'",
+              "description": "The side that the sidebar is attached to.",
+              "fieldName": "position"
+            },
+            {
+              "name": "opened",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the sidebar is opened or closed.\nCan be used to initially set the opened state, where\nthe animation will be skipped.",
+              "fieldName": "opened"
+            },
+            {
+              "name": "focus-on-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the sidebar should focus the first focusable element automatically when opened.\nDefaults to false in when mode is set to `side`, otherwise defaults to true.\nIf explicitly enabled, focus will be moved into the sidebar in `side` mode as well.",
+              "fieldName": "focusOnOpen"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "SbbAnimationCompleteMixin",
+              "module": "core/mixins.js"
+            }
+          ],
+          "superclass": {
+            "name": "SbbOpenCloseBaseElement",
+            "module": "core/base-elements.js"
+          },
+          "tagName": "sbb-sidebar",
+          "customElement": true,
+          "events": [
+            {
+              "name": "beforeopen",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits whenever the component starts the opening transition. Can be canceled.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits whenever the component is opened.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "name": "beforeclose",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits whenever the component begins the closing transition. Can be canceled.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            },
+            {
+              "name": "close",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emits whenever the component is closed.",
+              "inheritedFrom": {
+                "name": "SbbOpenCloseBaseElement",
+                "module": "core/base-elements/open-close-base-element.js"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbbSidebarElement",
+          "declaration": {
+            "name": "SbbSidebarElement",
+            "module": "sidebar/sidebar/sidebar.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "sidebar/sidebar-close-button/sidebar-close-button.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Sidebar close button, intended to be placed inside sbb-sidebar.",
+          "name": "SbbSidebarCloseButtonElement",
+          "slots": [
+            {
+              "description": "Use the unnamed slot to add content to the sidebar-close-button. Not intended to be used in this context.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "SbbSecondaryButtonElement",
+                "module": "button/secondary-button/secondary-button.component.js"
+              }
+            },
+            {
+              "description": "Slot used to display the icon, if one is set. Not intended to be used in this context.",
+              "name": "icon",
+              "inheritedFrom": {
+                "name": "SbbSecondaryButtonElement",
+                "module": "button/secondary-button/secondary-button.component.js"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "elementName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "static": true,
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              },
+              "default": "'sbb-sidebar-close-button'"
+            },
+            {
+              "kind": "field",
+              "name": "_languageController",
+              "privacy": "private",
+              "default": "new SbbLanguageController(this)"
+            },
+            {
+              "kind": "method",
+              "name": "renderTemplate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Override this method to render the component template.",
+              "inheritedFrom": {
+                "name": "SbbActionBaseElement",
+                "module": "core/base-elements/action-base-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderIconName",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "inheritedFrom": {
+                "name": "SbbIconNameMixin",
+                "module": "icon/icon-name-mixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SbbButtonSize"
+              },
+              "privacy": "public",
+              "description": "Size variant, either l, m or s.",
+              "default": "'s'",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SbbButtonCommonElementMixin",
+                "module": "button/common/button-common.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
                 "text": "boolean"
               },
               "privacy": "public",
@@ -121456,15 +122214,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "sidebar/sidebar-content/sidebar-content.component.js",
+      "path": "sidebar/sidebar-container/sidebar-container.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Container for the sidebar content. Intended to be placed inside an `sbb-sidebar-container` element.",
-          "name": "SbbSidebarContentElement",
+          "description": "This is the parent component to one or two `<sbb-sidebar>`s that validates the state internally\nand coordinates the backdrop and content styling.",
+          "name": "SbbSidebarContainerElement",
           "slots": [
             {
-              "description": "Use the unnamed slot to add any content elements. Further `sbb-sidebar-container`s are possible.",
+              "description": "Use the unnamed slot to add `sbb-sidebar` and `sbb-sidebar-content` elements.",
               "name": ""
             }
           ],
@@ -121478,428 +122236,51 @@
               "privacy": "public",
               "static": true,
               "readonly": true,
-              "default": "'sbb-sidebar-content'",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_hydrationRequired",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "!!this.shadowRoot",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_hydrationComplete",
-              "privacy": "private",
-              "default": "new Promise<boolean>( (resolve) => (this._resolveHydration = resolve), )",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_resolveHydration",
-              "type": {
-                "text": "(hydrationRequired: boolean) => void"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hydrationRequired",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "description": "Returns whether hydration is required and not completed.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              },
-              "default": "!!this.shadowRoot"
-            },
-            {
-              "kind": "method",
-              "name": "toggleState",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "force",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "['_$sbbElement$']",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "static": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_controllers",
-              "type": {
-                "text": "Set<SbbReactiveController> | undefined"
-              },
-              "privacy": "private",
+              "default": "'sbb-sidebar-container'",
               "inheritedFrom": {
                 "name": "SbbElement",
                 "module": "core/base-elements/element.js"
               }
-            }
-          ],
-          "superclass": {
-            "name": "SbbElement",
-            "module": "core/base-elements.js"
-          },
-          "tagName": "sbb-sidebar-content",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SbbSidebarContentElement",
-          "declaration": {
-            "name": "SbbSidebarContentElement",
-            "module": "sidebar/sidebar-content/sidebar-content.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "sidebar/sidebar/sidebar.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "This component corresponds to a sidebar that can be opened on the sidebar container.",
-          "name": "SbbSidebarElement",
-          "slots": [
-            {
-              "description": "Use the unnamed slot to slot any content into the sidebar.",
-              "name": ""
-            },
-            {
-              "description": "Use the title slot to add an <sbb-title>.",
-              "name": "title"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "elementName",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "static": true,
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "SbbElement",
-                "module": "core/base-elements/element.js"
-              },
-              "default": "'sbb-sidebar'"
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "'white' | 'milk'"
-              },
-              "privacy": "public",
-              "default": "'white'",
-              "description": "Background color of the sidebar. Either `white` or `milk`.",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "'side' | 'over'"
-              },
-              "privacy": "public",
-              "default": "'side'",
-              "description": "Mode of the sidebar; one of 'side' or 'over'.",
-              "attribute": "mode",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "position",
-              "type": {
-                "text": "'start' | 'end'"
-              },
-              "privacy": "public",
-              "default": "'start'",
-              "description": "The side that the sidebar is attached to.",
-              "attribute": "position",
-              "reflects": true
             },
             {
               "kind": "field",
-              "name": "opened",
+              "name": "sidebars",
               "type": {
-                "text": "boolean"
+                "text": "SbbSidebarElement[]"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "Whether the sidebar is opened or closed.\nCan be used to initially set the opened state, where\nthe animation will be skipped.",
-              "attribute": "opened",
-              "reflects": true
+              "description": "The sidebar children.",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "focusOnOpen",
+              "name": "start",
               "type": {
-                "text": "boolean"
+                "text": "SbbSidebarElement | null"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "Whether the sidebar should focus the first focusable element automatically when opened.\nDefaults to false in when mode is set to `side`, otherwise defaults to true.\nIf explicitly enabled, focus will be moved into the sidebar in `side` mode as well.",
-              "attribute": "focus-on-open"
+              "description": "The sidebar child with the `start` position.",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "container",
+              "name": "end",
               "type": {
-                "text": "SbbSidebarContainerElement | null"
+                "text": "SbbSidebarElement | null"
               },
               "privacy": "public",
-              "description": "Returns the SbbSidebarContainerElement where this sidebar is contained.",
-              "readonly": true,
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "_container",
-              "type": {
-                "text": "SbbSidebarContainerElement | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "_lastFocusedElement",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "_focusTrapController",
-              "privacy": "private",
-              "default": "new SbbFocusTrapController(this)"
+              "description": "The sidebar child with the `end` position.",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "_escapableOverlayController",
-              "privacy": "private",
-              "default": "new SbbEscapableOverlayController(this)"
-            },
-            {
-              "kind": "method",
-              "name": "toggle",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Toggles the sidebar visibility."
-            },
-            {
-              "kind": "method",
-              "name": "open",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Opens the sidebar.",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_isZeroAnimationDuration",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_handleOpening",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "close",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Closes the sidebar.",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_handleClosing",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_takeFocus",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "cedeFocus",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_updateSidebarWidth",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "oldPosition",
-                  "optional": true,
-                  "type": {
-                    "text": "this['position']"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_buildCssWidthVar",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "position",
-                  "default": "this.position"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_isModeOver",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_onTransitionEnd",
+              "name": "_forcedClosedSidebars",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "TransitionEvent"
-                  }
-                }
-              ]
+              "default": "new WeakSet<SbbSidebarElement>()"
             },
             {
               "kind": "method",
-              "name": "_detectScrolledState",
+              "name": "_handleWidthChange",
               "privacy": "private",
               "return": {
                 "type": {
@@ -121907,214 +122288,16 @@
                 }
               }
             },
-            {
-              "kind": "field",
-              "name": "isAnimating",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the component is currently animating.",
-              "inheritedFrom": {
-                "name": "SbbAnimationCompleteMixin",
-                "module": "core/mixins/animation-complete-mixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "animationComplete",
-              "type": {
-                "text": "Promise<void>"
-              },
-              "privacy": "public",
-              "description": "Returns a promise which completes whenever an animation ends.\nWhen a new animation starts, a new Promise is returned.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "SbbAnimationCompleteMixin",
-                "module": "core/mixins/animation-complete-mixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_animationPromise",
-              "type": {
-                "text": "Promise<void>"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SbbAnimationCompleteMixin",
-                "module": "core/mixins/animation-complete-mixin.js"
-              }
-            },
             {
               "kind": "method",
-              "name": "startAnimation",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "SbbAnimationCompleteMixin",
-                "module": "core/mixins/animation-complete-mixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "stopAnimation",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Overriding stopAnimation() breaks functionality.",
-              "inheritedFrom": {
-                "name": "SbbAnimationCompleteMixin",
-                "module": "core/mixins/animation-complete-mixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_enqueueAnimation",
+              "name": "_calculateSpaceState",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "Promise<void>"
                 }
               },
-              "inheritedFrom": {
-                "name": "SbbAnimationCompleteMixin",
-                "module": "core/mixins/animation-complete-mixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "events",
-              "privacy": "public",
-              "static": true,
-              "readonly": true,
-              "default": "{ beforeopen: 'beforeopen', open: 'open', beforeclose: 'beforeclose', close: 'close', }",
-              "type": {
-                "text": "{\n    beforeopen: 'beforeopen',\n    open: 'open',\n    beforeclose: 'beforeclose',\n    close: 'close',\n  }"
-              },
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "state",
-              "privacy": "protected",
-              "description": "The state of the component.",
-              "type": {
-                "text": "SbbOpenedClosedState"
-              },
-              "default": "'closed'",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_state",
-              "type": {
-                "text": "SbbOpenedClosedState"
-              },
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "description": "Whether the element is open.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "escapeStrategy",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "The method which is called on escape key press. Defaults to calling close()",
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchBeforeOpenEvent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchOpenEvent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchBeforeCloseEvent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchCloseEvent",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
+              "description": "Closes and opens sidebars depending on available width\nof the container and its parent container."
             },
             {
               "kind": "field",
@@ -122222,120 +122405,176 @@
               }
             }
           ],
-          "attributes": [
+          "superclass": {
+            "name": "SbbElement",
+            "module": "core/base-elements.js"
+          },
+          "tagName": "sbb-sidebar-container",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SbbSidebarContainerElement",
+          "declaration": {
+            "name": "SbbSidebarContainerElement",
+            "module": "sidebar/sidebar-container/sidebar-container.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "sidebar/sidebar-content/sidebar-content.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Container for the sidebar content. Intended to be placed inside an `sbb-sidebar-container` element.",
+          "name": "SbbSidebarContentElement",
+          "slots": [
             {
-              "name": "color",
+              "description": "Use the unnamed slot to add any content elements. Further `sbb-sidebar-container`s are possible.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "elementName",
               "type": {
-                "text": "'white' | 'milk'"
+                "text": "string"
               },
-              "default": "'white'",
-              "description": "Background color of the sidebar. Either `white` or `milk`.",
-              "fieldName": "color"
+              "privacy": "public",
+              "static": true,
+              "readonly": true,
+              "default": "'sbb-sidebar-content'",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
             },
             {
-              "name": "mode",
+              "kind": "field",
+              "name": "_hydrationRequired",
               "type": {
-                "text": "'side' | 'over'"
+                "text": "boolean"
               },
-              "default": "'side'",
-              "description": "Mode of the sidebar; one of 'side' or 'over'.",
-              "fieldName": "mode"
+              "privacy": "private",
+              "default": "!!this.shadowRoot",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
             },
             {
-              "name": "position",
-              "type": {
-                "text": "'start' | 'end'"
-              },
-              "default": "'start'",
-              "description": "The side that the sidebar is attached to.",
-              "fieldName": "position"
+              "kind": "field",
+              "name": "_hydrationComplete",
+              "privacy": "private",
+              "default": "new Promise<boolean>( (resolve) => (this._resolveHydration = resolve), )",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
             },
             {
-              "name": "opened",
+              "kind": "field",
+              "name": "_resolveHydration",
               "type": {
-                "text": "boolean"
+                "text": "(hydrationRequired: boolean) => void"
               },
-              "default": "false",
-              "description": "Whether the sidebar is opened or closed.\nCan be used to initially set the opened state, where\nthe animation will be skipped.",
-              "fieldName": "opened"
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              }
             },
             {
-              "name": "focus-on-open",
+              "kind": "field",
+              "name": "hydrationRequired",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Whether the sidebar should focus the first focusable element automatically when opened.\nDefaults to false in when mode is set to `side`, otherwise defaults to true.\nIf explicitly enabled, focus will be moved into the sidebar in `side` mode as well.",
-              "fieldName": "focusOnOpen"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "SbbAnimationCompleteMixin",
-              "module": "core/mixins.js"
-            }
-          ],
-          "superclass": {
-            "name": "SbbOpenCloseBaseElement",
-            "module": "core/base-elements.js"
-          },
-          "tagName": "sbb-sidebar",
-          "customElement": true,
-          "events": [
-            {
-              "name": "beforeopen",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emits whenever the component starts the opening transition. Can be canceled.",
+              "privacy": "protected",
+              "description": "Returns whether hydration is required and not completed.",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
-              }
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
+              },
+              "default": "!!this.shadowRoot"
             },
             {
-              "name": "open",
-              "type": {
-                "text": "Event"
+              "kind": "method",
+              "name": "toggleState",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Emits whenever the component is opened.",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "force",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
               }
             },
             {
-              "name": "beforeclose",
+              "kind": "field",
+              "name": "['_$sbbElement$']",
               "type": {
-                "text": "Event"
+                "text": "boolean"
               },
-              "description": "Emits whenever the component begins the closing transition. Can be canceled.",
+              "privacy": "public",
+              "static": true,
+              "default": "true",
               "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
               }
             },
             {
-              "name": "close",
+              "kind": "field",
+              "name": "_controllers",
               "type": {
-                "text": "Event"
+                "text": "Set<SbbReactiveController> | undefined"
               },
-              "description": "Emits whenever the component is closed.",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "SbbOpenCloseBaseElement",
-                "module": "core/base-elements/open-close-base-element.js"
+                "name": "SbbElement",
+                "module": "core/base-elements/element.js"
               }
             }
-          ]
+          ],
+          "superclass": {
+            "name": "SbbElement",
+            "module": "core/base-elements.js"
+          },
+          "tagName": "sbb-sidebar-content",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SbbSidebarElement",
+          "name": "SbbSidebarContentElement",
           "declaration": {
-            "name": "SbbSidebarElement",
-            "module": "sidebar/sidebar/sidebar.component.js"
+            "name": "SbbSidebarContentElement",
+            "module": "sidebar/sidebar-content/sidebar-content.component.js"
           }
         }
       ]
@@ -125029,6 +125268,14 @@
               "privacy": "private",
               "default": "new ResizeController(this, { target: null, skipInitial: true, callback: () => this._onTabGroupElementResize(), })"
             },
+            {
+              "kind": "field",
+              "name": "_contentSlotChangeDebounceId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -125154,14 +125401,24 @@
               }
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "_onContentSlotChange",
-              "privacy": "private"
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "_onLabelSlotChange",
-              "privacy": "private"
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "method",
@@ -129341,6 +129598,19 @@
                 "module": "form-field/form-field/form-field.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "_previousType",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "SbbFormFieldElement",
+                "module": "form-field/form-field/form-field.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "_handleWrapperClick",
@@ -130847,6 +131117,22 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "Event"
+              },
+              "description": "The change event is fired on the associated inputs when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.",
+              "name": "change"
+            },
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires on the associated inputs when the value has been changed as a direct result of a user action.",
+              "name": "input"
+            }
+          ],
           "superclass": {
             "name": "SbbSecondaryButtonElement",
             "module": "button.pure.js"
@@ -132127,6 +132413,15 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "The input event fires when the value has been changed as a direct result of a user action.",
+              "name": "input"
+            }
+          ],
           "attributes": [
             {
               "name": "checked",