@sbb-esta/lyne-elements 2.4.1 → 2.5.1

package/development/sidebar/sidebar-container.js

@@ -0,0 +1,153 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, LitElement, isServer, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { sidebarContainerCommonStyle } from "./common.js";
+const style = css`:host {
+  display: block;
+  overflow: hidden;
+  --sbb-sidebar-container-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-4x)
+  );
+  --sbb-sidebar-container-animation-easing: var(--sbb-animation-easing);
+  --sbb-sidebar-container-backdrop-opacity: 0;
+  --sbb-sidebar-container__backdrop-visibility: hidden;
+  --sbb-sidebar-container-backdrop-animation-duration: var(
+    --sbb-sidebar-container-animation-duration
+  );
+}
+@media (forced-colors: active) {
+  :host {
+    --sbb-sidebar-container-backdrop-opacity: 0.5;
+  }
+}
+
+.sbb-sidebar-container-backdrop {
+  position: absolute;
+  inset: 0;
+  visibility: var(--sbb-sidebar-container__backdrop-visibility);
+  opacity: var(--sbb-sidebar-container-backdrop-opacity);
+  background-color: var(--sbb-color-black);
+  z-index: 3;
+  transition-duration: var(--sbb-sidebar-container-backdrop-animation-duration);
+  transition-timing-function: var(--sbb-sidebar-container-animation-easing);
+  transition-property: opacity, visibility;
+}`;
+const sidebarContainerRegistry = /* @__PURE__ */ new Set();
+let sidebarContainerResizeObserver;
+const MIN_WIDTH_BEFORE_COLLAPSE = 320;
+let SbbSidebarContainerElement = (() => {
+  var _a;
+  let _classDecorators = [customElement("sbb-sidebar-container")];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = LitElement;
+  _a = class extends _classSuper {
+    constructor() {
+      super(...arguments);
+      this._forcedClosedSidebars = /* @__PURE__ */ new WeakSet();
+    }
+    /** The sidebar children. */
+    get sidebars() {
+      var _a2;
+      return Array.from(((_a2 = this.querySelectorAll) == null ? void 0 : _a2.call(this, `:scope > sbb-sidebar`)) ?? []);
+    }
+    /** The sidebar child with the `start` position. */
+    get start() {
+      var _a2;
+      return (_a2 = this.querySelector) == null ? void 0 : _a2.call(this, `:scope > sbb-sidebar:not([position='end'])`);
+    }
+    /** The sidebar child with the `end` position. */
+    get end() {
+      var _a2;
+      return (_a2 = this.querySelector) == null ? void 0 : _a2.call(this, `:scope > sbb-sidebar[position='end']`);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      sidebarContainerResizeObserver ?? (sidebarContainerResizeObserver = !isServer && new ResizeObserver(() => this._handleWidthChange()));
+      if (!isServer && sidebarContainerRegistry.size === 0) {
+        sidebarContainerResizeObserver.observe(document == null ? void 0 : document.documentElement);
+      }
+      sidebarContainerRegistry.add(this);
+      this._handleWidthChange();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      sidebarContainerRegistry.delete(this);
+      if (sidebarContainerRegistry.size === 0) {
+        sidebarContainerResizeObserver == null ? void 0 : sidebarContainerResizeObserver.disconnect();
+      }
+    }
+    firstUpdated(changedProperties) {
+      super.firstUpdated(changedProperties);
+      this._handleWidthChange();
+    }
+    _handleWidthChange() {
+      Array.from(sidebarContainerRegistry).sort((c1, c2) => c1.compareDocumentPosition(c2) & Node.DOCUMENT_POSITION_FOLLOWING).forEach((c) => c._calculateSpaceState());
+    }
+    /**
+     * Closes and opens sidebars depending on available width
+     * of the container and its parent container.
+     */
+    async _calculateSpaceState() {
+      var _a2, _b;
+      if (isServer) {
+        return;
+      }
+      const parentSidebarContainer = (_b = (_a2 = this.parentElement) == null ? void 0 : _a2.closest) == null ? void 0 : _b.call(_a2, "sbb-sidebar-container");
+      const parentSidebars = (parentSidebarContainer == null ? void 0 : parentSidebarContainer.sidebars) ?? [];
+      for (const sidebar of parentSidebars) {
+        await sidebar.updateComplete.then(() => sidebar.animationComplete);
+      }
+      const width = this.offsetWidth ?? 0;
+      if (width === 0) {
+        return;
+      }
+      const sidebars = this.sidebars;
+      const hasForcedClosedParentContainer = parentSidebars.some((sidebar) => sidebar.hasAttribute("data-mode-over-forced")) ?? false;
+      const sumOfAllRelevantSidebarWidths = sidebars.filter((sidebar) => sidebar.mode === "side").reduce((accumulator, currentValue) => accumulator + (currentValue.offsetWidth ?? 0), 0);
+      const isMinimumSpace = width - sumOfAllRelevantSidebarWidths < MIN_WIDTH_BEFORE_COLLAPSE;
+      for (const sidebar of sidebars) {
+        const wasMinimum = sidebar.hasAttribute("data-mode-over-forced");
+        sidebar.toggleAttribute("data-mode-over-forced", isMinimumSpace);
+        if (sidebar.mode !== "side") {
+          continue;
+        }
+        if ((isMinimumSpace || hasForcedClosedParentContainer) && sidebar.opened && !wasMinimum) {
+          if (sidebar.isOpen && !sidebar.hasAttribute("data-skip-animation")) {
+            sidebar.toggleAttribute("data-mode-over-forced-closing", true);
+          }
+          sidebar.opened = false;
+          this._forcedClosedSidebars.add(sidebar);
+          if (sidebar.hasAttribute("data-mode-over-forced-closing")) {
+            sidebar.updateComplete.then(() => sidebar.animationComplete).then(() => sidebar.removeAttribute("data-mode-over-forced-closing"));
+          }
+        } else if (
+          // We have to open the sidebar when the remaining width of the sidebar and the parent container
+          // is above the minimum.
+          // We only programmatically open the sidebar when the cause of closing was this logic.
+          !isMinimumSpace && !hasForcedClosedParentContainer && this._forcedClosedSidebars.has(sidebar)
+        ) {
+          sidebar["cedeFocus"]();
+          sidebar.opened = true;
+          this._forcedClosedSidebars.delete(sidebar);
+        }
+      }
+    }
+    render() {
+      return html`<div class="sbb-sidebar-container-backdrop"></div>
+      <slot @slotchange=${() => this._handleWidthChange()}></slot>`;
+    }
+  }, _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = [sidebarContainerCommonStyle, style], __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbSidebarContainerElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci1jb250YWluZXIuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9zaWRlYmFyL3NpZGViYXItY29udGFpbmVyL3NpZGViYXItY29udGFpbmVyLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgQ1NTUmVzdWx0R3JvdXAsXG4gIGh0bWwsXG4gIGlzU2VydmVyLFxuICBMaXRFbGVtZW50LFxuICB0eXBlIFByb3BlcnR5VmFsdWVzLFxuICB0eXBlIFRlbXBsYXRlUmVzdWx0LFxufSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHsgc2lkZWJhckNvbnRhaW5lckNvbW1vblN0eWxlIH0gZnJvbSAnLi4vY29tbW9uLmpzJztcbmltcG9ydCB0eXBlIHsgU2JiU2lkZWJhckVsZW1lbnQgfSBmcm9tICcuLi9zaWRlYmFyLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vc2lkZWJhci1jb250YWluZXIuc2Nzcz9saXQmaW5saW5lJztcblxuY29uc3Qgc2lkZWJhckNvbnRhaW5lclJlZ2lzdHJ5ID0gbmV3IFNldDxTYmJTaWRlYmFyQ29udGFpbmVyRWxlbWVudD4oKTtcbmxldCBzaWRlYmFyQ29udGFpbmVyUmVzaXplT2JzZXJ2ZXI6IFJlc2l6ZU9ic2VydmVyIHwgdW5kZWZpbmVkO1xuXG5jb25zdCBNSU5fV0lEVEhfQkVGT1JFX0NPTExBUFNFID0gMzIwO1xuXG4vKipcbiAqIFRoaXMgaXMgdGhlIHBhcmVudCBjb21wb25lbnQgdG8gb25lIG9yIHR3byBgPHNiYi1zaWRlYmFyPmBzIHRoYXQgdmFsaWRhdGVzIHRoZSBzdGF0ZSBpbnRlcm5hbGx5XG4gKiBhbmQgY29vcmRpbmF0ZXMgdGhlIGJhY2tkcm9wIGFuZCBjb250ZW50IHN0eWxpbmcuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgYHNiYi1zaWRlYmFyYCBhbmQgYHNiYi1zaWRlYmFyLWNvbnRlbnRgIGVsZW1lbnRzLlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItc2lkZWJhci1jb250YWluZXInKVxuY2xhc3MgU2JiU2lkZWJhckNvbnRhaW5lckVsZW1lbnQgZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW3NpZGViYXJDb250YWluZXJDb21tb25TdHlsZSwgc3R5bGVdO1xuXG4gIC8qKiBUaGUgc2lkZWJhciBjaGlsZHJlbi4gKi9cbiAgcHVibGljIGdldCBzaWRlYmFycygpOiBTYmJTaWRlYmFyRWxlbWVudFtdIHtcbiAgICByZXR1cm4gQXJyYXkuZnJvbSh0aGlzLnF1ZXJ5U2VsZWN0b3JBbGw/LjxTYmJTaWRlYmFyRWxlbWVudD4oYDpzY29wZSA+IHNiYi1zaWRlYmFyYCkgPz8gW10pO1xuICB9XG5cbiAgLyoqIFRoZSBzaWRlYmFyIGNoaWxkIHdpdGggdGhlIGBzdGFydGAgcG9zaXRpb24uICovXG4gIHB1YmxpYyBnZXQgc3RhcnQoKTogU2JiU2lkZWJhckVsZW1lbnQgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5xdWVyeVNlbGVjdG9yPy48U2JiU2lkZWJhckVsZW1lbnQ+KGA6c2NvcGUgPiBzYmItc2lkZWJhcjpub3QoW3Bvc2l0aW9uPSdlbmQnXSlgKTtcbiAgfVxuXG4gIC8qKiBUaGUgc2lkZWJhciBjaGlsZCB3aXRoIHRoZSBgZW5kYCBwb3NpdGlvbi4gKi9cbiAgcHVibGljIGdldCBlbmQoKTogU2JiU2lkZWJhckVsZW1lbnQgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5xdWVyeVNlbGVjdG9yPy48U2JiU2lkZWJhckVsZW1lbnQ+KGA6c2NvcGUgPiBzYmItc2lkZWJhcltwb3NpdGlvbj0nZW5kJ11gKTtcbiAgfVxuXG4gIHByaXZhdGUgX2ZvcmNlZENsb3NlZFNpZGViYXJzID0gbmV3IFdlYWtTZXQ8U2JiU2lkZWJhckVsZW1lbnQ+KCk7XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG5cbiAgICBzaWRlYmFyQ29udGFpbmVyUmVzaXplT2JzZXJ2ZXIgPz89XG4gICAgICAhaXNTZXJ2ZXIgJiYgbmV3IFJlc2l6ZU9ic2VydmVyKCgpID0+IHRoaXMuX2hhbmRsZVdpZHRoQ2hhbmdlKCkpO1xuXG4gICAgaWYgKCFpc1NlcnZlciAmJiBzaWRlYmFyQ29udGFpbmVyUmVnaXN0cnkuc2l6ZSA9PT0gMCkge1xuICAgICAgc2lkZWJhckNvbnRhaW5lclJlc2l6ZU9ic2VydmVyLm9ic2VydmUoZG9jdW1lbnQ/LmRvY3VtZW50RWxlbWVudCk7XG4gICAgfVxuXG4gICAgc2lkZWJhckNvbnRhaW5lclJlZ2lzdHJ5LmFkZCh0aGlzKTtcblxuICAgIHRoaXMuX2hhbmRsZVdpZHRoQ2hhbmdlKCk7XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgZGlzY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuZGlzY29ubmVjdGVkQ2FsbGJhY2soKTtcblxuICAgIHNpZGViYXJDb250YWluZXJSZWdpc3RyeS5kZWxldGUodGhpcyk7XG5cbiAgICBpZiAoc2lkZWJhckNvbnRhaW5lclJlZ2lzdHJ5LnNpemUgPT09IDApIHtcbiAgICAgIHNpZGViYXJDb250YWluZXJSZXNpemVPYnNlcnZlcj8uZGlzY29ubmVjdCgpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSBmaXJzdFVwZGF0ZWQoY2hhbmdlZFByb3BlcnRpZXM6IFByb3BlcnR5VmFsdWVzPHRoaXM+KTogdm9pZCB7XG4gICAgc3VwZXIuZmlyc3RVcGRhdGVkKGNoYW5nZWRQcm9wZXJ0aWVzKTtcblxuICAgIHRoaXMuX2hhbmRsZVdpZHRoQ2hhbmdlKCk7XG4gIH1cblxuICBwcml2YXRlIF9oYW5kbGVXaWR0aENoYW5nZSgpOiB2b2lkIHtcbiAgICBBcnJheS5mcm9tKHNpZGViYXJDb250YWluZXJSZWdpc3RyeSlcbiAgICAgIC5zb3J0KChjMSwgYzIpID0+IGMxLmNvbXBhcmVEb2N1bWVudFBvc2l0aW9uKGMyKSAmIE5vZGUuRE9DVU1FTlRfUE9TSVRJT05fRk9MTE9XSU5HKVxuICAgICAgLmZvckVhY2goKGMpID0+IGMuX2NhbGN1bGF0ZVNwYWNlU3RhdGUoKSk7XG4gIH1cblxuICAvKipcbiAgICogQ2xvc2VzIGFuZCBvcGVucyBzaWRlYmFycyBkZXBlbmRpbmcgb24gYXZhaWxhYmxlIHdpZHRoXG4gICAqIG9mIHRoZSBjb250YWluZXIgYW5kIGl0cyBwYXJlbnQgY29udGFpbmVyLlxuICAgKi9cbiAgcHJpdmF0ZSBhc3luYyBfY2FsY3VsYXRlU3BhY2VTdGF0ZSgpOiBQcm9taXNlPHZvaWQ+IHtcbiAgICBpZiAoaXNTZXJ2ZXIpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBwYXJlbnRTaWRlYmFyQ29udGFpbmVyID1cbiAgICAgIHRoaXMucGFyZW50RWxlbWVudD8uY2xvc2VzdD8uPFNiYlNpZGViYXJDb250YWluZXJFbGVtZW50Pignc2JiLXNpZGViYXItY29udGFpbmVyJyk7XG5cbiAgICBjb25zdCBwYXJlbnRTaWRlYmFycyA9IHBhcmVudFNpZGViYXJDb250YWluZXI/LnNpZGViYXJzID8/IFtdO1xuXG4gICAgZm9yIChjb25zdCBzaWRlYmFyIG9mIHBhcmVudFNpZGViYXJzKSB7XG4gICAgICAvLyBVc2luZyBQcm9taXNlLmFsbCBkaWQgY3JlYXRlIHNvbWUgY29uZnVzaW5nIHByb2JsZW1zLCBzbyB3ZSBkZWNpZGVkIHRvIGF3YWl0IGl0IHNlcXVlbnRpYWxseS5cbiAgICAgIGF3YWl0IHNpZGViYXIudXBkYXRlQ29tcGxldGUudGhlbigoKSA9PiBzaWRlYmFyLmFuaW1hdGlvbkNvbXBsZXRlKTtcbiAgICB9XG5cbiAgICBjb25zdCB3aWR0aCA9IHRoaXMub2Zmc2V0V2lkdGggPz8gMDtcbiAgICBpZiAod2lkdGggPT09IDApIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBjb25zdCBzaWRlYmFycyA9IHRoaXMuc2lkZWJhcnM7XG4gICAgY29uc3QgaGFzRm9yY2VkQ2xvc2VkUGFyZW50Q29udGFpbmVyID1cbiAgICAgIHBhcmVudFNpZGViYXJzLnNvbWUoKHNpZGViYXIpID0+IHNpZGViYXIuaGFzQXR0cmlidXRlKCdkYXRhLW1vZGUtb3Zlci1mb3JjZWQnKSkgPz8gZmFsc2U7XG4gICAgY29uc3Qgc3VtT2ZBbGxSZWxldmFudFNpZGViYXJXaWR0aHMgPSBzaWRlYmFyc1xuICAgICAgLmZpbHRlcigoc2lkZWJhcikgPT4gc2lkZWJhci5tb2RlID09PSAnc2lkZScpXG4gICAgICAucmVkdWNlKChhY2N1bXVsYXRvciwgY3VycmVudFZhbHVlKSA9PiBhY2N1bXVsYXRvciArIChjdXJyZW50VmFsdWUub2Zmc2V0V2lkdGggPz8gMCksIDApO1xuICAgIGNvbnN0IGlzTWluaW11bVNwYWNlID0gd2lkdGggLSBzdW1PZkFsbFJlbGV2YW50U2lkZWJhcldpZHRocyA8IE1JTl9XSURUSF9CRUZPUkVfQ09MTEFQU0U7XG5cbiAgICBmb3IgKGNvbnN0IHNpZGViYXIgb2Ygc2lkZWJhcnMpIHtcbiAgICAgIGNvbnN0IHdhc01pbmltdW0gPSBzaWRlYmFyLmhhc0F0dHJpYnV0ZSgnZGF0YS1tb2RlLW92ZXItZm9yY2VkJyk7XG4gICAgICBzaWRlYmFyLnRvZ2dsZUF0dHJpYnV0ZSgnZGF0YS1tb2RlLW92ZXItZm9yY2VkJywgaXNNaW5pbXVtU3BhY2UpO1xuXG4gICAgICBpZiAoc2lkZWJhci5tb2RlICE9PSAnc2lkZScpIHtcbiAgICAgICAgY29udGludWU7XG4gICAgICB9XG5cbiAgICAgIGlmICgoaXNNaW5pbXVtU3BhY2UgfHwgaGFzRm9yY2VkQ2xvc2VkUGFyZW50Q29udGFpbmVyKSAmJiBzaWRlYmFyLm9wZW5lZCAmJiAhd2FzTWluaW11bSkge1xuICAgICAgICAvLyBXZSBoYXZlIHRvIGNsb3NlIHRoZSBzaWRlYmFyIHdoZW4gdGhlIHJlbWFpbmluZyB3aWR0aCBpcyBiZWxvdyB0aGUgbWluaW11bSBvciB0aGUgcGFyZW50IGNvbnRhaW5lciBydW5zIG91dCBvZiBzcGFjZS5cblxuICAgICAgICBpZiAoc2lkZWJhci5pc09wZW4gJiYgIXNpZGViYXIuaGFzQXR0cmlidXRlKCdkYXRhLXNraXAtYW5pbWF0aW9uJykpIHtcbiAgICAgICAgICAvLyBJZiB0aGUgc2lkZWJhciBpcyBvcGVuZWQgdmlzdWFsbHksIGFkZCBhIHNwZWNpYWwgZGF0YSBhdHRyaWJ1dGUgdGhhdCBjb250cm9scyB0aGUgei1pbmRleC5cbiAgICAgICAgICAvLyBXaXRob3V0IHRoaXMgc29sdXRpb24sIHdoZW4gdGhlIHNpZGViYXIgaXMgY2xvc2VkLCBpdCB3b3VsZCBhcHBlYXIgdmlzdWFsbHkgYXMgaWYgaXQgd2VyZSBpbiAnb3ZlcicgbW9kZS5cbiAgICAgICAgICBzaWRlYmFyLnRvZ2dsZUF0dHJpYnV0ZSgnZGF0YS1tb2RlLW92ZXItZm9yY2VkLWNsb3NpbmcnLCB0cnVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHNpZGViYXIub3BlbmVkID0gZmFsc2U7XG4gICAgICAgIHRoaXMuX2ZvcmNlZENsb3NlZFNpZGViYXJzLmFkZChzaWRlYmFyKTtcblxuICAgICAgICBpZiAoc2lkZWJhci5oYXNBdHRyaWJ1dGUoJ2RhdGEtbW9kZS1vdmVyLWZvcmNlZC1jbG9zaW5nJykpIHtcbiAgICAgICAgICBzaWRlYmFyLnVwZGF0ZUNvbXBsZXRlXG4gICAgICAgICAgICAudGhlbigoKSA9PiBzaWRlYmFyLmFuaW1hdGlvbkNvbXBsZXRlKVxuICAgICAgICAgICAgLnRoZW4oKCkgPT4gc2lkZWJhci5yZW1vdmVBdHRyaWJ1dGUoJ2RhdGEtbW9kZS1vdmVyLWZvcmNlZC1jbG9zaW5nJykpO1xuICAgICAgICB9XG4gICAgICB9IGVsc2UgaWYgKFxuICAgICAgICAvLyBXZSBoYXZlIHRvIG9wZW4gdGhlIHNpZGViYXIgd2hlbiB0aGUgcmVtYWluaW5nIHdpZHRoIG9mIHRoZSBzaWRlYmFyIGFuZCB0aGUgcGFyZW50IGNvbnRhaW5lclxuICAgICAgICAvLyBpcyBhYm92ZSB0aGUgbWluaW11bS5cbiAgICAgICAgLy8gV2Ugb25seSBwcm9ncmFtbWF0aWNhbGx5IG9wZW4gdGhlIHNpZGViYXIgd2hlbiB0aGUgY2F1c2Ugb2YgY2xvc2luZyB3YXMgdGhpcyBsb2dpYy5cbiAgICAgICAgIWlzTWluaW11bVNwYWNlICYmXG4gICAgICAgICFoYXNGb3JjZWRDbG9zZWRQYXJlbnRDb250YWluZXIgJiZcbiAgICAgICAgdGhpcy5fZm9yY2VkQ2xvc2VkU2lkZWJhcnMuaGFzKHNpZGViYXIpXG4gICAgICApIHtcbiAgICAgICAgLy8gSWYgdGhlIHNpZGViYXIgd2FzIG1hbnVhbGx5IG9wZW5lZCAoaW4gZm9yY2VkIG92ZXIgbW9kZSlcbiAgICAgICAgLy8gYW5kIHRoZSBzaWRlYmFyIGJlY29tZXMgZW5vdWdoIHNwYWNlIGF2YWlsYWJsZSwgaXQgc3RheXMgb3BlbiwgYnV0IHdlIG5lZWQgdG8gZW5zdXJlIHRoYXRcbiAgICAgICAgLy8gdGhlIGZvY3VzIHRyYXAgYW5kIGluZXJ0IG1lY2hhbmlzbSBpcyByZXNldC5cbiAgICAgICAgc2lkZWJhclsnY2VkZUZvY3VzJ10oKTtcbiAgICAgICAgc2lkZWJhci5vcGVuZWQgPSB0cnVlO1xuICAgICAgICB0aGlzLl9mb3JjZWRDbG9zZWRTaWRlYmFycy5kZWxldGUoc2lkZWJhcik7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgPGRpdiBjbGFzcz1cInNiYi1zaWRlYmFyLWNvbnRhaW5lci1iYWNrZHJvcFwiPjwvZGl2PlxuICAgICAgPHNsb3QgQHNsb3RjaGFuZ2U9JHsoKSA9PiB0aGlzLl9oYW5kbGVXaWR0aENoYW5nZSgpfT48L3Nsb3Q+YDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXNpZGViYXItY29udGFpbmVyJzogU2JiU2lkZWJhckNvbnRhaW5lckVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6WyJfYSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFlQSxNQUFNLCtDQUErQjtBQUNyQyxJQUFJO0FBRUosTUFBTSw0QkFBNEI7SUFVNUIsOEJBQTBCLE1BQUE7OzBCQUQvQixjQUFjLHVCQUF1QixDQUFDOzs7O29CQUNFO0FBQVIsRUFBQSxtQkFBUSxZQUFVO0FBQUE7O0FBa0J6QyxXQUFBLDRDQUE0QixRQUFPO0FBQUEsSUFBQTtBQUFBO0FBQUEsSUFkM0MsSUFBVyxXQUFROztBQUNqQixhQUFPLE1BQU0sT0FBS0EsTUFBQSxLQUFLLHFCQUFMLGdCQUFBQSxJQUFBLFdBQTJDLDRCQUEyQixFQUFFO0FBQUEsSUFBQTtBQUFBO0FBQUEsSUFJNUYsSUFBVyxRQUFLOztBQUNQLGNBQUFBLE1BQUEsS0FBSyxrQkFBTCxnQkFBQUEsSUFBQSxXQUF3QztBQUFBLElBQTRDO0FBQUE7QUFBQSxJQUk3RixJQUFXLE1BQUc7O0FBQ0wsY0FBQUEsTUFBQSxLQUFLLGtCQUFMLGdCQUFBQSxJQUFBLFdBQXdDO0FBQUEsSUFBc0M7QUFBQSxJQUt2RSxvQkFBaUI7QUFDL0IsWUFBTSxrQkFBaUI7QUFFdkIsMEVBQ0UsQ0FBQyxZQUFZLElBQUksZUFBZSxNQUFNLEtBQUssb0JBQW9CO0FBRWpFLFVBQUksQ0FBQyxZQUFZLHlCQUF5QixTQUFTLEdBQUc7QUFDckIsdUNBQUEsUUFBUSxxQ0FBVSxlQUFlO0FBQUEsTUFBQTtBQUdsRSwrQkFBeUIsSUFBSSxJQUFJO0FBRWpDLFdBQUssbUJBQWtCO0FBQUEsSUFBQTtBQUFBLElBR1QsdUJBQW9CO0FBQ2xDLFlBQU0scUJBQW9CO0FBRTFCLCtCQUF5QixPQUFPLElBQUk7QUFFaEMsVUFBQSx5QkFBeUIsU0FBUyxHQUFHO0FBQ3ZDLHlGQUFnQztBQUFBLE1BQVU7QUFBQSxJQUM1QztBQUFBLElBR2lCLGFBQWEsbUJBQXVDO0FBQ3JFLFlBQU0sYUFBYSxpQkFBaUI7QUFFcEMsV0FBSyxtQkFBa0I7QUFBQSxJQUFBO0FBQUEsSUFHakIscUJBQWtCO0FBQ3hCLFlBQU0sS0FBSyx3QkFBd0IsRUFDaEMsS0FBSyxDQUFDLElBQUksT0FBTyxHQUFHLHdCQUF3QixFQUFFLElBQUksS0FBSywyQkFBMkIsRUFDbEYsUUFBUSxDQUFDLE1BQU0sRUFBRSxzQkFBc0I7QUFBQSxJQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQU9wQyxNQUFNLHVCQUFvQjs7QUFDaEMsVUFBSSxVQUFVO0FBQ1o7QUFBQSxNQUFBO0FBR0YsWUFBTSwwQkFDSixNQUFBQSxNQUFBLEtBQUssa0JBQUwsZ0JBQUFBLElBQW9CLFlBQXBCLHdCQUFBQSxLQUEwRDtBQUV0RCxZQUFBLGtCQUFpQixpRUFBd0IsYUFBWTtBQUUzRCxpQkFBVyxXQUFXLGdCQUFnQjtBQUVwQyxjQUFNLFFBQVEsZUFBZSxLQUFLLE1BQU0sUUFBUSxpQkFBaUI7QUFBQSxNQUFBO0FBRzdELFlBQUEsUUFBUSxLQUFLLGVBQWU7QUFDbEMsVUFBSSxVQUFVLEdBQUc7QUFDZjtBQUFBLE1BQUE7QUFHRixZQUFNLFdBQVcsS0FBSztBQUNoQixZQUFBLGlDQUNKLGVBQWUsS0FBSyxDQUFDLFlBQVksUUFBUSxhQUFhLHVCQUF1QixDQUFDLEtBQUs7QUFDckYsWUFBTSxnQ0FBZ0MsU0FDbkMsT0FBTyxDQUFDLFlBQVksUUFBUSxTQUFTLE1BQU0sRUFDM0MsT0FBTyxDQUFDLGFBQWEsaUJBQWlCLGVBQWUsYUFBYSxlQUFlLElBQUksQ0FBQztBQUNuRixZQUFBLGlCQUFpQixRQUFRLGdDQUFnQztBQUUvRCxpQkFBVyxXQUFXLFVBQVU7QUFDeEIsY0FBQSxhQUFhLFFBQVEsYUFBYSx1QkFBdUI7QUFDdkQsZ0JBQUEsZ0JBQWdCLHlCQUF5QixjQUFjO0FBRTNELFlBQUEsUUFBUSxTQUFTLFFBQVE7QUFDM0I7QUFBQSxRQUFBO0FBR0YsYUFBSyxrQkFBa0IsbUNBQW1DLFFBQVEsVUFBVSxDQUFDLFlBQVk7QUFHdkYsY0FBSSxRQUFRLFVBQVUsQ0FBQyxRQUFRLGFBQWEscUJBQXFCLEdBQUc7QUFHMUQsb0JBQUEsZ0JBQWdCLGlDQUFpQyxJQUFJO0FBQUEsVUFBQTtBQUcvRCxrQkFBUSxTQUFTO0FBQ1osZUFBQSxzQkFBc0IsSUFBSSxPQUFPO0FBRWxDLGNBQUEsUUFBUSxhQUFhLCtCQUErQixHQUFHO0FBQ2pELG9CQUFBLGVBQ0wsS0FBSyxNQUFNLFFBQVEsaUJBQWlCLEVBQ3BDLEtBQUssTUFBTSxRQUFRLGdCQUFnQiwrQkFBK0IsQ0FBQztBQUFBLFVBQUE7QUFBQSxRQUN4RTtBQUFBO0FBQUE7QUFBQTtBQUFBLFVBS0EsQ0FBQyxrQkFDRCxDQUFDLGtDQUNELEtBQUssc0JBQXNCLElBQUksT0FBTztBQUFBLFVBQ3RDO0FBSUEsa0JBQVEsV0FBVyxFQUFDO0FBQ3BCLGtCQUFRLFNBQVM7QUFDWixlQUFBLHNCQUFzQixPQUFPLE9BQU87QUFBQSxRQUFBO0FBQUEsTUFDM0M7QUFBQSxJQUNGO0FBQUEsSUFHaUIsU0FBTTtBQUNoQixhQUFBO0FBQUEsMEJBQ2UsTUFBTSxLQUFLLG1CQUFvQixDQUFBO0FBQUEsSUFBQTtBQUFBOztBQXRJekQsaUJBd0lDLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUF2SXdCLEdBQUEsU0FBeUIsQ0FBQyw2QkFBNkIsS0FBSyxHQUQvRSxrQkFBMEIsWUFBQSx1QkFBQSxHQUFDOzs7In0=

package/development/sidebar/sidebar-content/sidebar-content.d.ts

@@ -0,0 +1,18 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+/**
+ * Container for the sidebar content. Intended to be placed inside an `sbb-sidebar-container` element.
+ *
+ * @slot - Use the unnamed slot to add any content elements.
+ * Further `sbb-sidebar-container`s are possible.
+ */
+export declare class SbbSidebarContentElement extends LitElement {
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-sidebar-content': SbbSidebarContentElement;
+    }
+}
+//# sourceMappingURL=sidebar-content.d.ts.map

package/development/sidebar/sidebar-content/sidebar-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-content.d.ts","sourceRoot":"","sources":["../../../../../src/elements/sidebar/sidebar-content/sidebar-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOjF;;;;;GAKG;AACH,qBAEM,wBAAyB,SAAQ,UAAU;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAsC;IAEnE,iBAAiB,IAAI,IAAI;cAStB,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/development/sidebar/sidebar-content.d.ts

@@ -0,0 +1,2 @@
+export * from './sidebar-content/sidebar-content.js';
+//# sourceMappingURL=sidebar-content.d.ts.map

package/development/sidebar/sidebar-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-content.d.ts","sourceRoot":"","sources":["../../../../src/elements/sidebar/sidebar-content.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC"}

package/development/sidebar/sidebar-content.js

@@ -0,0 +1,37 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { sidebarContentCommonStyle } from "./common.js";
+const style = css`:host {
+  --sbb-sidebar-content__margin-inline-start: initial;
+  --sbb-sidebar-content__margin-inline-end: initial;
+  margin-inline: var(--sbb-sidebar-content__margin-inline-start, var(--sbb-sidebar-container__start-width, 0)) var(--sbb-sidebar-content__margin-inline-end, var(--sbb-sidebar-container__end-width, 0));
+  transition: margin var(--sbb-sidebar-container-animation-duration) var(--sbb-sidebar-container-animation-easing);
+}`;
+let SbbSidebarContentElement = (() => {
+  var _a;
+  let _classDecorators = [customElement("sbb-sidebar-content")];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = LitElement;
+  _a = class extends _classSuper {
+    connectedCallback() {
+      super.connectedCallback();
+      this.classList.add("sbb-scrollbar");
+    }
+    render() {
+      return html`<slot></slot>`;
+    }
+  }, _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = [sidebarContentCommonStyle, style], __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbSidebarContentElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci1jb250ZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvc2lkZWJhci9zaWRlYmFyLWNvbnRlbnQvc2lkZWJhci1jb250ZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIGh0bWwsIExpdEVsZW1lbnQsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHsgc2lkZWJhckNvbnRlbnRDb21tb25TdHlsZSB9IGZyb20gJy4uL2NvbW1vbi5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3NpZGViYXItY29udGVudC5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIENvbnRhaW5lciBmb3IgdGhlIHNpZGViYXIgY29udGVudC4gSW50ZW5kZWQgdG8gYmUgcGxhY2VkIGluc2lkZSBhbiBgc2JiLXNpZGViYXItY29udGFpbmVyYCBlbGVtZW50LlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gYWRkIGFueSBjb250ZW50IGVsZW1lbnRzLlxuICogRnVydGhlciBgc2JiLXNpZGViYXItY29udGFpbmVyYHMgYXJlIHBvc3NpYmxlLlxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItc2lkZWJhci1jb250ZW50JylcbmNsYXNzIFNiYlNpZGViYXJDb250ZW50RWxlbWVudCBleHRlbmRzIExpdEVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbc2lkZWJhckNvbnRlbnRDb21tb25TdHlsZSwgc3R5bGVdO1xuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuXG4gICAgLy8gQXMgd2UgY2FuJ3QgaW5jbHVkZSB0aGUgc2Nyb2xsYmFyIG1peGluIG9uIHRoZSBob3N0IGFuZCB0byBtaW5pbWl6ZVxuICAgIC8vIHBheWxvYWQsIHdlIGRlY2lkZWQgdG8gYWRkIHRoZSBzY3JvbGxiYXIgY2xhc3MgaGVyZS5cbiAgICAvLyBUaGlzIGlzIGFuIGV4Y2VwdGlvbiBhcyB3ZSBub3JtYWxseSBkb24ndCBhbHRlciB0aGUgY2xhc3NMaXN0IG9mIHRoZSBob3N0LlxuICAgIHRoaXMuY2xhc3NMaXN0LmFkZCgnc2JiLXNjcm9sbGJhcicpO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgPHNsb3Q+PC9zbG90PmA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1zaWRlYmFyLWNvbnRlbnQnOiBTYmJTaWRlYmFyQ29udGVudEVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7O0lBZU0sNEJBQXdCLE1BQUE7OzBCQUQ3QixjQUFjLHFCQUFxQixDQUFDOzs7O29CQUNFO0FBQVIsRUFBQSxtQkFBUSxZQUFVO0FBQUEsSUFHL0Isb0JBQWlCO0FBQy9CLFlBQU0sa0JBQWlCO0FBS2xCLFdBQUEsVUFBVSxJQUFJLGVBQWU7QUFBQSxJQUFBO0FBQUEsSUFHakIsU0FBTTtBQUNoQixhQUFBO0FBQUEsSUFBQTtBQUFBOztBQWJYLGlCQWVDLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUFkd0IsR0FBQSxTQUF5QixDQUFDLDJCQUEyQixLQUFLLEdBRDdFLGtCQUF3QixZQUFBLHVCQUFBLEdBQUM7OzsifQ==

package/development/sidebar/sidebar-title/sidebar-title.d.ts

@@ -0,0 +1,17 @@
+import { CSSResultGroup } from 'lit';
+import { SbbTitleBase, SbbTitleLevel } from '../../title.js';
+/**
+ * It displays the title of the sidebar. It has to be placed inside an `sbb-sidebar` element.
+ */
+export declare class SbbSidebarTitleElement extends SbbTitleBase {
+    static styles: CSSResultGroup;
+    /** Title level */
+    accessor level: SbbTitleLevel;
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-sidebar-title': SbbSidebarTitleElement;
+    }
+}
+//# sourceMappingURL=sidebar-title.d.ts.map

package/development/sidebar/sidebar-title/sidebar-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-title.d.ts","sourceRoot":"","sources":["../../../../../src/elements/sidebar/sidebar-title/sidebar-title.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIlE;;GAEG;AACH,qBAGM,sBAAuB,SAAQ,YAAY;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAgC;IAE7E,kBAAkB;IAClB,SAAsD,KAAK,EAAE,aAAa,CAAO;;CAMlF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/development/sidebar/sidebar-title.d.ts

@@ -0,0 +1,2 @@
+export * from './sidebar-title/sidebar-title.js';
+//# sourceMappingURL=sidebar-title.d.ts.map

package/development/sidebar/sidebar-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-title.d.ts","sourceRoot":"","sources":["../../../../src/elements/sidebar/sidebar-title.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}

package/development/sidebar/sidebar-title.js

@@ -0,0 +1,63 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement, property } from "lit/decorators.js";
+import { hostAttributes } from "../core/decorators.js";
+import { SbbTitleBase } from "../title.js";
+import { css } from "lit";
+const style = css`:host {
+  display: block;
+}
+
+.sbb-title {
+  display: flex;
+  hyphens: auto;
+  padding-block-start: calc(0.5 * (var(--sbb-sidebar__close-button-size) - var(--sbb-title-font-size) * var(--sbb-title-line-height)));
+  min-height: var(--sbb-sidebar__close-button-size);
+  margin-block: 0 !important;
+}`;
+let SbbSidebarTitleElement = (() => {
+  var _level_accessor_storage, _a;
+  let _classDecorators = [customElement("sbb-sidebar-title"), hostAttributes({ slot: "title-section" })];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbTitleBase;
+  let _level_decorators;
+  let _level_initializers = [];
+  let _level_extraInitializers = [];
+  _a = class extends _classSuper {
+    constructor() {
+      super();
+      __privateAdd(this, _level_accessor_storage, __runInitializers(this, _level_initializers, "2"));
+      __runInitializers(this, _level_extraInitializers);
+      this.visualLevel ?? (this.visualLevel = "5");
+    }
+    /** Title level */
+    get level() {
+      return __privateGet(this, _level_accessor_storage);
+    }
+    set level(value) {
+      __privateSet(this, _level_accessor_storage, value);
+    }
+  }, _level_accessor_storage = new WeakMap(), _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    _level_decorators = [property({ reflect: true })];
+    __esDecorate(_a, null, _level_decorators, { kind: "accessor", name: "level", static: false, private: false, access: { has: (obj) => "level" in obj, get: (obj) => obj.level, set: (obj, value) => {
+      obj.level = value;
+    } }, metadata: _metadata }, _level_initializers, _level_extraInitializers);
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = [SbbTitleBase.styles, style], __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbSidebarTitleElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci10aXRsZS5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3NpZGViYXIvc2lkZWJhci10aXRsZS9zaWRlYmFyLXRpdGxlLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IGhvc3RBdHRyaWJ1dGVzIH0gZnJvbSAnLi4vLi4vY29yZS9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IFNiYlRpdGxlQmFzZSwgdHlwZSBTYmJUaXRsZUxldmVsIH0gZnJvbSAnLi4vLi4vdGl0bGUuanMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9zaWRlYmFyLXRpdGxlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgdGhlIHRpdGxlIG9mIHRoZSBzaWRlYmFyLiBJdCBoYXMgdG8gYmUgcGxhY2VkIGluc2lkZSBhbiBgc2JiLXNpZGViYXJgIGVsZW1lbnQuXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi1zaWRlYmFyLXRpdGxlJylcbkBob3N0QXR0cmlidXRlcyh7IHNsb3Q6ICd0aXRsZS1zZWN0aW9uJyB9KVxuY2xhc3MgU2JiU2lkZWJhclRpdGxlRWxlbWVudCBleHRlbmRzIFNiYlRpdGxlQmFzZSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtTYmJUaXRsZUJhc2Uuc3R5bGVzLCBzdHlsZV07XG5cbiAgLyoqIFRpdGxlIGxldmVsICovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIG92ZXJyaWRlIGFjY2Vzc29yIGxldmVsOiBTYmJUaXRsZUxldmVsID0gJzInO1xuXG4gIHB1YmxpYyBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMudmlzdWFsTGV2ZWwgPz89ICc1JztcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXNpZGViYXItdGl0bGUnOiBTYmJTaWRlYmFyVGl0bGVFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUFjTSwwQkFBc0IsTUFBQTs7MEJBRjNCLGNBQWMsbUJBQW1CLEdBQ2pDLGVBQWUsRUFBRSxNQUFNLGdCQUFlLENBQUUsQ0FBQzs7OztvQkFDTDs7OztBQUFSLEVBQUEsbUJBQVEsWUFBWTtBQUFBLElBTS9DLGNBQUE7O0FBRjZCLGtEQUFBLGtCQUFBLE1BQUEscUJBQWdELEdBQUc7O0FBSTlFLFdBQUssZ0JBQUwsS0FBSyxjQUFnQjtBQUFBLElBQUE7QUFBQTtBQUFBLElBSk0sSUFBeUIsUUFBMkI7QUFBQSxhQUFBLG1CQUFBO0FBQUEsSUFBQTtBQUFBLElBQXBELElBQXlCLE1BQTJCLE9BQUE7QUFBQSx5QkFBQSx5QkFBQTtBQUFBLElBQUE7QUFBQSxLQUFwRDs7QUFBNUIsd0JBQUEsQ0FBQSxTQUFTLEVBQUUsU0FBUyxLQUFNLENBQUEsQ0FBQztBQUEwQixpQkFBQSxJQUFBLE1BQUEsbUJBQUEsRUFBQSxNQUFBLFlBQUEsTUFBQSxTQUFBLFFBQUEsT0FBQSxTQUFBLE9BQUEsUUFBQSxFQUFBLEtBQUEsQ0FBQSxRQUFBLFdBQUEsS0FBQSxLQUFBLENBQUEsUUFBQSxJQUFBLE9BQUEsS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQUEsUUFBMkI7QUFBQSxTQUFBLFVBQUEsYUFBQSxxQkFBQSx3QkFBQTtBQUpuRixpQkFVQyxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBVHdCLEdBQU0sU0FBbUIsQ0FBQyxhQUFhLFFBQVEsS0FBSyxHQUR2RSxrQkFBc0IsWUFBQSx1QkFBQSxHQUFDOzs7In0=

package/development/sidebar/sidebar.d.ts

@@ -0,0 +1,2 @@
+export * from './sidebar/sidebar.js';
+//# sourceMappingURL=sidebar.d.ts.map

package/development/sidebar/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../src/elements/sidebar/sidebar.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}