@sbb-esta/lyne-elements 2.7.1 → 2.9.0

package/development/sidebar/sidebar-container/sidebar-container.component.d.ts

@@ -0,0 +1,34 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SbbSidebarElement } from '../sidebar.js';
+/**
+ * This is the parent component to one or two `<sbb-sidebar>`s that validates the state internally
+ * and coordinates the backdrop and content styling.
+ *
+ * @slot - Use the unnamed slot to add `sbb-sidebar` and `sbb-sidebar-content` elements.
+ */
+export declare class SbbSidebarContainerElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** The sidebar children. */
+    get sidebars(): SbbSidebarElement[];
+    /** The sidebar child with the `start` position. */
+    get start(): SbbSidebarElement | null;
+    /** The sidebar child with the `end` position. */
+    get end(): SbbSidebarElement | null;
+    private _forcedClosedSidebars;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _handleWidthChange;
+    /**
+     * Closes and opens sidebars depending on available width
+     * of the container and its parent container.
+     */
+    private _calculateSpaceState;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-sidebar-container': SbbSidebarContainerElement;
+    }
+}
+//# sourceMappingURL=sidebar-container.component.d.ts.map

package/development/sidebar/sidebar-container/sidebar-container.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-container.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/sidebar/sidebar-container/sidebar-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AASvD;;;;;GAKG;AACH,qBAEM,0BAA2B,SAAQ,UAAU;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAwC;IAErF,4BAA4B;IAC5B,IAAW,QAAQ,IAAI,iBAAiB,EAAE,CAEzC;IAED,mDAAmD;IACnD,IAAW,KAAK,IAAI,iBAAiB,GAAG,IAAI,CAE3C;IAED,iDAAiD;IACjD,IAAW,GAAG,IAAI,iBAAiB,GAAG,IAAI,CAEzC;IAED,OAAO,CAAC,qBAAqB,CAAoC;IAEjD,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;cAUzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,kBAAkB;IAM1B;;;OAGG;YACW,oBAAoB;cAuEf,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

package/development/sidebar/sidebar-container/sidebar-container.component.js

@@ -0,0 +1,156 @@
+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"
+        @click=${() => this.sidebars.forEach((s) => s.close())}
+      ></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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZWxlbWVudHMvc2lkZWJhci9zaWRlYmFyLWNvbnRhaW5lci9zaWRlYmFyLWNvbnRhaW5lci5jb21wb25lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgdHlwZSBDU1NSZXN1bHRHcm91cCxcbiAgaHRtbCxcbiAgaXNTZXJ2ZXIsXG4gIExpdEVsZW1lbnQsXG4gIHR5cGUgUHJvcGVydHlWYWx1ZXMsXG4gIHR5cGUgVGVtcGxhdGVSZXN1bHQsXG59IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBzaWRlYmFyQ29udGFpbmVyQ29tbW9uU3R5bGUgfSBmcm9tICcuLi9jb21tb24uanMnO1xuaW1wb3J0IHR5cGUgeyBTYmJTaWRlYmFyRWxlbWVudCB9IGZyb20gJy4uL3NpZGViYXIuanMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi9zaWRlYmFyLWNvbnRhaW5lci5zY3NzP2xpdCZpbmxpbmUnO1xuXG5jb25zdCBzaWRlYmFyQ29udGFpbmVyUmVnaXN0cnkgPSBuZXcgU2V0PFNiYlNpZGViYXJDb250YWluZXJFbGVtZW50PigpO1xubGV0IHNpZGViYXJDb250YWluZXJSZXNpemVPYnNlcnZlcjogUmVzaXplT2JzZXJ2ZXIgfCB1bmRlZmluZWQ7XG5cbmNvbnN0IE1JTl9XSURUSF9CRUZPUkVfQ09MTEFQU0UgPSAzMjA7XG5cbi8qKlxuICogVGhpcyBpcyB0aGUgcGFyZW50IGNvbXBvbmVudCB0byBvbmUgb3IgdHdvIGA8c2JiLXNpZGViYXI+YHMgdGhhdCB2YWxpZGF0ZXMgdGhlIHN0YXRlIGludGVybmFsbHlcbiAqIGFuZCBjb29yZGluYXRlcyB0aGUgYmFja2Ryb3AgYW5kIGNvbnRlbnQgc3R5bGluZy5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBgc2JiLXNpZGViYXJgIGFuZCBgc2JiLXNpZGViYXItY29udGVudGAgZWxlbWVudHMuXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi1zaWRlYmFyLWNvbnRhaW5lcicpXG5jbGFzcyBTYmJTaWRlYmFyQ29udGFpbmVyRWxlbWVudCBleHRlbmRzIExpdEVsZW1lbnQge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbc2lkZWJhckNvbnRhaW5lckNvbW1vblN0eWxlLCBzdHlsZV07XG5cbiAgLyoqIFRoZSBzaWRlYmFyIGNoaWxkcmVuLiAqL1xuICBwdWJsaWMgZ2V0IHNpZGViYXJzKCk6IFNiYlNpZGViYXJFbGVtZW50W10ge1xuICAgIHJldHVybiBBcnJheS5mcm9tKHRoaXMucXVlcnlTZWxlY3RvckFsbD8uPFNiYlNpZGViYXJFbGVtZW50PihgOnNjb3BlID4gc2JiLXNpZGViYXJgKSA/PyBbXSk7XG4gIH1cblxuICAvKiogVGhlIHNpZGViYXIgY2hpbGQgd2l0aCB0aGUgYHN0YXJ0YCBwb3NpdGlvbi4gKi9cbiAgcHVibGljIGdldCBzdGFydCgpOiBTYmJTaWRlYmFyRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLnF1ZXJ5U2VsZWN0b3I/LjxTYmJTaWRlYmFyRWxlbWVudD4oYDpzY29wZSA+IHNiYi1zaWRlYmFyOm5vdChbcG9zaXRpb249J2VuZCddKWApO1xuICB9XG5cbiAgLyoqIFRoZSBzaWRlYmFyIGNoaWxkIHdpdGggdGhlIGBlbmRgIHBvc2l0aW9uLiAqL1xuICBwdWJsaWMgZ2V0IGVuZCgpOiBTYmJTaWRlYmFyRWxlbWVudCB8IG51bGwge1xuICAgIHJldHVybiB0aGlzLnF1ZXJ5U2VsZWN0b3I/LjxTYmJTaWRlYmFyRWxlbWVudD4oYDpzY29wZSA+IHNiYi1zaWRlYmFyW3Bvc2l0aW9uPSdlbmQnXWApO1xuICB9XG5cbiAgcHJpdmF0ZSBfZm9yY2VkQ2xvc2VkU2lkZWJhcnMgPSBuZXcgV2Vha1NldDxTYmJTaWRlYmFyRWxlbWVudD4oKTtcblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcblxuICAgIHNpZGViYXJDb250YWluZXJSZXNpemVPYnNlcnZlciA/Pz1cbiAgICAgICFpc1NlcnZlciAmJiBuZXcgUmVzaXplT2JzZXJ2ZXIoKCkgPT4gdGhpcy5faGFuZGxlV2lkdGhDaGFuZ2UoKSk7XG5cbiAgICBpZiAoIWlzU2VydmVyICYmIHNpZGViYXJDb250YWluZXJSZWdpc3RyeS5zaXplID09PSAwKSB7XG4gICAgICBzaWRlYmFyQ29udGFpbmVyUmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZShkb2N1bWVudD8uZG9jdW1lbnRFbGVtZW50KTtcbiAgICB9XG5cbiAgICBzaWRlYmFyQ29udGFpbmVyUmVnaXN0cnkuYWRkKHRoaXMpO1xuXG4gICAgdGhpcy5faGFuZGxlV2lkdGhDaGFuZ2UoKTtcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBkaXNjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5kaXNjb25uZWN0ZWRDYWxsYmFjaygpO1xuXG4gICAgc2lkZWJhckNvbnRhaW5lclJlZ2lzdHJ5LmRlbGV0ZSh0aGlzKTtcblxuICAgIGlmIChzaWRlYmFyQ29udGFpbmVyUmVnaXN0cnkuc2l6ZSA9PT0gMCkge1xuICAgICAgc2lkZWJhckNvbnRhaW5lclJlc2l6ZU9ic2VydmVyPy5kaXNjb25uZWN0KCk7XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIGZpcnN0VXBkYXRlZChjaGFuZ2VkUHJvcGVydGllczogUHJvcGVydHlWYWx1ZXM8dGhpcz4pOiB2b2lkIHtcbiAgICBzdXBlci5maXJzdFVwZGF0ZWQoY2hhbmdlZFByb3BlcnRpZXMpO1xuXG4gICAgdGhpcy5faGFuZGxlV2lkdGhDaGFuZ2UoKTtcbiAgfVxuXG4gIHByaXZhdGUgX2hhbmRsZVdpZHRoQ2hhbmdlKCk6IHZvaWQge1xuICAgIEFycmF5LmZyb20oc2lkZWJhckNvbnRhaW5lclJlZ2lzdHJ5KVxuICAgICAgLnNvcnQoKGMxLCBjMikgPT4gYzEuY29tcGFyZURvY3VtZW50UG9zaXRpb24oYzIpICYgTm9kZS5ET0NVTUVOVF9QT1NJVElPTl9GT0xMT1dJTkcpXG4gICAgICAuZm9yRWFjaCgoYykgPT4gYy5fY2FsY3VsYXRlU3BhY2VTdGF0ZSgpKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBDbG9zZXMgYW5kIG9wZW5zIHNpZGViYXJzIGRlcGVuZGluZyBvbiBhdmFpbGFibGUgd2lkdGhcbiAgICogb2YgdGhlIGNvbnRhaW5lciBhbmQgaXRzIHBhcmVudCBjb250YWluZXIuXG4gICAqL1xuICBwcml2YXRlIGFzeW5jIF9jYWxjdWxhdGVTcGFjZVN0YXRlKCk6IFByb21pc2U8dm9pZD4ge1xuICAgIGlmIChpc1NlcnZlcikge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IHBhcmVudFNpZGViYXJDb250YWluZXIgPVxuICAgICAgdGhpcy5wYXJlbnRFbGVtZW50Py5jbG9zZXN0Py48U2JiU2lkZWJhckNvbnRhaW5lckVsZW1lbnQ+KCdzYmItc2lkZWJhci1jb250YWluZXInKTtcblxuICAgIGNvbnN0IHBhcmVudFNpZGViYXJzID0gcGFyZW50U2lkZWJhckNvbnRhaW5lcj8uc2lkZWJhcnMgPz8gW107XG5cbiAgICBmb3IgKGNvbnN0IHNpZGViYXIgb2YgcGFyZW50U2lkZWJhcnMpIHtcbiAgICAgIC8vIFVzaW5nIFByb21pc2UuYWxsIGRpZCBjcmVhdGUgc29tZSBjb25mdXNpbmcgcHJvYmxlbXMsIHNvIHdlIGRlY2lkZWQgdG8gYXdhaXQgaXQgc2VxdWVudGlhbGx5LlxuICAgICAgYXdhaXQgc2lkZWJhci51cGRhdGVDb21wbGV0ZS50aGVuKCgpID0+IHNpZGViYXIuYW5pbWF0aW9uQ29tcGxldGUpO1xuICAgIH1cblxuICAgIGNvbnN0IHdpZHRoID0gdGhpcy5vZmZzZXRXaWR0aCA/PyAwO1xuICAgIGlmICh3aWR0aCA9PT0gMCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IHNpZGViYXJzID0gdGhpcy5zaWRlYmFycztcbiAgICBjb25zdCBoYXNGb3JjZWRDbG9zZWRQYXJlbnRDb250YWluZXIgPVxuICAgICAgcGFyZW50U2lkZWJhcnMuc29tZSgoc2lkZWJhcikgPT4gc2lkZWJhci5oYXNBdHRyaWJ1dGUoJ2RhdGEtbW9kZS1vdmVyLWZvcmNlZCcpKSA/PyBmYWxzZTtcbiAgICBjb25zdCBzdW1PZkFsbFJlbGV2YW50U2lkZWJhcldpZHRocyA9IHNpZGViYXJzXG4gICAgICAuZmlsdGVyKChzaWRlYmFyKSA9PiBzaWRlYmFyLm1vZGUgPT09ICdzaWRlJylcbiAgICAgIC5yZWR1Y2UoKGFjY3VtdWxhdG9yLCBjdXJyZW50VmFsdWUpID0+IGFjY3VtdWxhdG9yICsgKGN1cnJlbnRWYWx1ZS5vZmZzZXRXaWR0aCA/PyAwKSwgMCk7XG4gICAgY29uc3QgaXNNaW5pbXVtU3BhY2UgPSB3aWR0aCAtIHN1bU9mQWxsUmVsZXZhbnRTaWRlYmFyV2lkdGhzIDwgTUlOX1dJRFRIX0JFRk9SRV9DT0xMQVBTRTtcblxuICAgIGZvciAoY29uc3Qgc2lkZWJhciBvZiBzaWRlYmFycykge1xuICAgICAgY29uc3Qgd2FzTWluaW11bSA9IHNpZGViYXIuaGFzQXR0cmlidXRlKCdkYXRhLW1vZGUtb3Zlci1mb3JjZWQnKTtcbiAgICAgIHNpZGViYXIudG9nZ2xlQXR0cmlidXRlKCdkYXRhLW1vZGUtb3Zlci1mb3JjZWQnLCBpc01pbmltdW1TcGFjZSk7XG5cbiAgICAgIGlmIChzaWRlYmFyLm1vZGUgIT09ICdzaWRlJykge1xuICAgICAgICBjb250aW51ZTtcbiAgICAgIH1cblxuICAgICAgaWYgKChpc01pbmltdW1TcGFjZSB8fCBoYXNGb3JjZWRDbG9zZWRQYXJlbnRDb250YWluZXIpICYmIHNpZGViYXIub3BlbmVkICYmICF3YXNNaW5pbXVtKSB7XG4gICAgICAgIC8vIFdlIGhhdmUgdG8gY2xvc2UgdGhlIHNpZGViYXIgd2hlbiB0aGUgcmVtYWluaW5nIHdpZHRoIGlzIGJlbG93IHRoZSBtaW5pbXVtIG9yIHRoZSBwYXJlbnQgY29udGFpbmVyIHJ1bnMgb3V0IG9mIHNwYWNlLlxuXG4gICAgICAgIGlmIChzaWRlYmFyLmlzT3BlbiAmJiAhc2lkZWJhci5oYXNBdHRyaWJ1dGUoJ2RhdGEtc2tpcC1hbmltYXRpb24nKSkge1xuICAgICAgICAgIC8vIElmIHRoZSBzaWRlYmFyIGlzIG9wZW5lZCB2aXN1YWxseSwgYWRkIGEgc3BlY2lhbCBkYXRhIGF0dHJpYnV0ZSB0aGF0IGNvbnRyb2xzIHRoZSB6LWluZGV4LlxuICAgICAgICAgIC8vIFdpdGhvdXQgdGhpcyBzb2x1dGlvbiwgd2hlbiB0aGUgc2lkZWJhciBpcyBjbG9zZWQsIGl0IHdvdWxkIGFwcGVhciB2aXN1YWxseSBhcyBpZiBpdCB3ZXJlIGluICdvdmVyJyBtb2RlLlxuICAgICAgICAgIHNpZGViYXIudG9nZ2xlQXR0cmlidXRlKCdkYXRhLW1vZGUtb3Zlci1mb3JjZWQtY2xvc2luZycsIHRydWUpO1xuICAgICAgICB9XG5cbiAgICAgICAgc2lkZWJhci5vcGVuZWQgPSBmYWxzZTtcbiAgICAgICAgdGhpcy5fZm9yY2VkQ2xvc2VkU2lkZWJhcnMuYWRkKHNpZGViYXIpO1xuXG4gICAgICAgIGlmIChzaWRlYmFyLmhhc0F0dHJpYnV0ZSgnZGF0YS1tb2RlLW92ZXItZm9yY2VkLWNsb3NpbmcnKSkge1xuICAgICAgICAgIHNpZGViYXIudXBkYXRlQ29tcGxldGVcbiAgICAgICAgICAgIC50aGVuKCgpID0+IHNpZGViYXIuYW5pbWF0aW9uQ29tcGxldGUpXG4gICAgICAgICAgICAudGhlbigoKSA9PiBzaWRlYmFyLnJlbW92ZUF0dHJpYnV0ZSgnZGF0YS1tb2RlLW92ZXItZm9yY2VkLWNsb3NpbmcnKSk7XG4gICAgICAgIH1cbiAgICAgIH0gZWxzZSBpZiAoXG4gICAgICAgIC8vIFdlIGhhdmUgdG8gb3BlbiB0aGUgc2lkZWJhciB3aGVuIHRoZSByZW1haW5pbmcgd2lkdGggb2YgdGhlIHNpZGViYXIgYW5kIHRoZSBwYXJlbnQgY29udGFpbmVyXG4gICAgICAgIC8vIGlzIGFib3ZlIHRoZSBtaW5pbXVtLlxuICAgICAgICAvLyBXZSBvbmx5IHByb2dyYW1tYXRpY2FsbHkgb3BlbiB0aGUgc2lkZWJhciB3aGVuIHRoZSBjYXVzZSBvZiBjbG9zaW5nIHdhcyB0aGlzIGxvZ2ljLlxuICAgICAgICAhaXNNaW5pbXVtU3BhY2UgJiZcbiAgICAgICAgIWhhc0ZvcmNlZENsb3NlZFBhcmVudENvbnRhaW5lciAmJlxuICAgICAgICB0aGlzLl9mb3JjZWRDbG9zZWRTaWRlYmFycy5oYXMoc2lkZWJhcilcbiAgICAgICkge1xuICAgICAgICAvLyBJZiB0aGUgc2lkZWJhciB3YXMgbWFudWFsbHkgb3BlbmVkIChpbiBmb3JjZWQgb3ZlciBtb2RlKVxuICAgICAgICAvLyBhbmQgdGhlIHNpZGViYXIgYmVjb21lcyBlbm91Z2ggc3BhY2UgYXZhaWxhYmxlLCBpdCBzdGF5cyBvcGVuLCBidXQgd2UgbmVlZCB0byBlbnN1cmUgdGhhdFxuICAgICAgICAvLyB0aGUgZm9jdXMgdHJhcCBpcyByZXNldC5cbiAgICAgICAgc2lkZWJhclsnY2VkZUZvY3VzJ10oKTtcbiAgICAgICAgc2lkZWJhci5vcGVuZWQgPSB0cnVlO1xuICAgICAgICB0aGlzLl9mb3JjZWRDbG9zZWRTaWRlYmFycy5kZWxldGUoc2lkZWJhcik7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgcmV0dXJuIGh0bWxgPGRpdlxuICAgICAgICBjbGFzcz1cInNiYi1zaWRlYmFyLWNvbnRhaW5lci1iYWNrZHJvcFwiXG4gICAgICAgIEBjbGljaz0keygpID0+IHRoaXMuc2lkZWJhcnMuZm9yRWFjaCgocykgPT4gcy5jbG9zZSgpKX1cbiAgICAgID48L2Rpdj5cbiAgICAgIDxzbG90IEBzbG90Y2hhbmdlPSR7KCkgPT4gdGhpcy5faGFuZGxlV2lkdGhDaGFuZ2UoKX0+PC9zbG90PmA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi1zaWRlYmFyLWNvbnRhaW5lcic6IFNiYlNpZGViYXJDb250YWluZXJFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOlsiX2EiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBZUEsTUFBTSwrQ0FBK0I7QUFDckMsSUFBSTtBQUVKLE1BQU0sNEJBQTRCO0lBVTVCLDhCQUEwQixNQUFBOzswQkFEL0IsY0FBYyx1QkFBdUIsQ0FBQzs7OztvQkFDRTtBQUFSLEVBQUEsbUJBQVEsWUFBVTtBQUFBOztBQWtCekMsV0FBQSw0Q0FBNEIsUUFBTztBQUFBLElBQUE7QUFBQTtBQUFBLElBZDNDLElBQVcsV0FBUTs7QUFDakIsYUFBTyxNQUFNLE9BQUtBLE1BQUEsS0FBSyxxQkFBTCxnQkFBQUEsSUFBQSxXQUEyQyw0QkFBMkIsRUFBRTtBQUFBLElBQUE7QUFBQTtBQUFBLElBSTVGLElBQVcsUUFBSzs7QUFDUCxjQUFBQSxNQUFBLEtBQUssa0JBQUwsZ0JBQUFBLElBQUEsV0FBd0M7QUFBQSxJQUE0QztBQUFBO0FBQUEsSUFJN0YsSUFBVyxNQUFHOztBQUNMLGNBQUFBLE1BQUEsS0FBSyxrQkFBTCxnQkFBQUEsSUFBQSxXQUF3QztBQUFBLElBQXNDO0FBQUEsSUFLdkUsb0JBQWlCO0FBQy9CLFlBQU0sa0JBQWlCO0FBRXZCLDBFQUNFLENBQUMsWUFBWSxJQUFJLGVBQWUsTUFBTSxLQUFLLG9CQUFvQjtBQUVqRSxVQUFJLENBQUMsWUFBWSx5QkFBeUIsU0FBUyxHQUFHO0FBQ3JCLHVDQUFBLFFBQVEscUNBQVUsZUFB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

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

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './sidebar-container/sidebar-container.js';
+export * from './sidebar-container/sidebar-container.component.js';
 //# sourceMappingURL=sidebar-container.d.ts.map

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

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

package/development/sidebar/sidebar-container.js

@@ -1,4 +1,4 @@
-import { SbbSidebarContainerElement } from "./sidebar-container/sidebar-container.js";
+import { SbbSidebarContainerElement } from "./sidebar-container/sidebar-container.component.js";
 export {
   SbbSidebarContainerElement
 };

package/development/sidebar/sidebar-content/sidebar-content.component.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.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-content.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/sidebar/sidebar-content/sidebar-content.component.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/sidebar-content.component.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3NpZGViYXIvc2lkZWJhci1jb250ZW50L3NpZGViYXItY29udGVudC5jb21wb25lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBDU1NSZXN1bHRHcm91cCwgaHRtbCwgTGl0RWxlbWVudCwgdHlwZSBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBzaWRlYmFyQ29udGVudENvbW1vblN0eWxlIH0gZnJvbSAnLi4vY29tbW9uLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vc2lkZWJhci1jb250ZW50LnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogQ29udGFpbmVyIGZvciB0aGUgc2lkZWJhciBjb250ZW50LiBJbnRlbmRlZCB0byBiZSBwbGFjZWQgaW5zaWRlIGFuIGBzYmItc2lkZWJhci1jb250YWluZXJgIGVsZW1lbnQuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgYW55IGNvbnRlbnQgZWxlbWVudHMuXG4gKiBGdXJ0aGVyIGBzYmItc2lkZWJhci1jb250YWluZXJgcyBhcmUgcG9zc2libGUuXG4gKi9cbmV4cG9ydFxuQGN1c3RvbUVsZW1lbnQoJ3NiYi1zaWRlYmFyLWNvbnRlbnQnKVxuY2xhc3MgU2JiU2lkZWJhckNvbnRlbnRFbGVtZW50IGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtzaWRlYmFyQ29udGVudENvbW1vblN0eWxlLCBzdHlsZV07XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG5cbiAgICAvLyBBcyB3ZSBjYW4ndCBpbmNsdWRlIHRoZSBzY3JvbGxiYXIgbWl4aW4gb24gdGhlIGhvc3QgYW5kIHRvIG1pbmltaXplXG4gICAgLy8gcGF5bG9hZCwgd2UgZGVjaWRlZCB0byBhZGQgdGhlIHNjcm9sbGJhciBjbGFzcyBoZXJlLlxuICAgIC8vIFRoaXMgaXMgYW4gZXhjZXB0aW9uIGFzIHdlIG5vcm1hbGx5IGRvbid0IGFsdGVyIHRoZSBjbGFzc0xpc3Qgb2YgdGhlIGhvc3QuXG4gICAgdGhpcy5jbGFzc0xpc3QuYWRkKCdzYmItc2Nyb2xsYmFyJyk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGA8c2xvdD48L3Nsb3Q+YDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXNpZGViYXItY29udGVudCc6IFNiYlNpZGViYXJDb250ZW50RWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7SUFlTSw0QkFBd0IsTUFBQTs7MEJBRDdCLGNBQWMscUJBQXFCLENBQUM7Ozs7b0JBQ0U7QUFBUixFQUFBLG1CQUFRLFlBQVU7QUFBQSxJQUcvQixvQkFBaUI7QUFDL0IsWUFBTSxrQkFBaUI7QUFLbEIsV0FBQSxVQUFVLElBQUksZUFBZTtBQUFBLElBQUE7QUFBQSxJQUdqQixTQUFNO0FBQ2hCLGFBQUE7QUFBQSxJQUFBO0FBQUE7O0FBYlgsaUJBZUMsTUFBQSxtQkFBQSxFQUFBLE9BQUEsV0FBQSxHQUFBLGtCQUFBLEVBQUEsTUFBQSxTQUFBLE1BQUEsV0FBQSxNQUFBLFVBQUEsVUFBQSxHQUFBLE1BQUEsdUJBQUE7OztRQWR3QixHQUFBLFNBQXlCLENBQUMsMkJBQTJCLEtBQUssR0FEN0Usa0JBQXdCLFlBQUEsdUJBQUEsR0FBQzs7OyJ9

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

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

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

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

package/development/sidebar/sidebar-content.js

@@ -1,4 +1,4 @@
-import { SbbSidebarContentElement } from "./sidebar-content/sidebar-content.js";
+import { SbbSidebarContentElement } from "./sidebar-content/sidebar-content.component.js";
 export {
   SbbSidebarContentElement
 };

package/development/sidebar/sidebar-title/sidebar-title.component.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.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-title.component.d.ts","sourceRoot":"","sources":["../../../../../src/elements/sidebar/sidebar-title/sidebar-title.component.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/sidebar-title.component.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZWJhci10aXRsZS5jb21wb25lbnQuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9zaWRlYmFyL3NpZGViYXItdGl0bGUvc2lkZWJhci10aXRsZS5jb21wb25lbnQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHsgaG9zdEF0dHJpYnV0ZXMgfSBmcm9tICcuLi8uLi9jb3JlL2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgU2JiVGl0bGVCYXNlLCB0eXBlIFNiYlRpdGxlTGV2ZWwgfSBmcm9tICcuLi8uLi90aXRsZS5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL3NpZGViYXItdGl0bGUuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBkaXNwbGF5cyB0aGUgdGl0bGUgb2YgdGhlIHNpZGViYXIuIEl0IGhhcyB0byBiZSBwbGFjZWQgaW5zaWRlIGFuIGBzYmItc2lkZWJhcmAgZWxlbWVudC5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXNpZGViYXItdGl0bGUnKVxuQGhvc3RBdHRyaWJ1dGVzKHsgc2xvdDogJ3RpdGxlLXNlY3Rpb24nIH0pXG5jbGFzcyBTYmJTaWRlYmFyVGl0bGVFbGVtZW50IGV4dGVuZHMgU2JiVGl0bGVCYXNlIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW1NiYlRpdGxlQmFzZS5zdHlsZXMsIHN0eWxlXTtcblxuICAvKiogVGl0bGUgbGV2ZWwgKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgb3ZlcnJpZGUgYWNjZXNzb3IgbGV2ZWw6IFNiYlRpdGxlTGV2ZWwgPSAnMic7XG5cbiAgcHVibGljIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgdGhpcy52aXN1YWxMZXZlbCA/Pz0gJzUnO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItc2lkZWJhci10aXRsZSc6IFNiYlNpZGViYXJUaXRsZUVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztJQWNNLDBCQUFzQixNQUFBOzswQkFGM0IsY0FBYyxtQkFBbUIsR0FDakMsZUFBZSxFQUFFLE1BQU0sZ0JBQWUsQ0FBRSxDQUFDOzs7O29CQUNMOzs7O0FBQVIsRUFBQSxtQkFBUSxZQUFZO0FBQUEsSUFNL0MsY0FBQTs7QUFGNkIsa0RBQUEsa0JBQUEsTUFBQSxxQkFBZ0QsR0FBRzs7QUFJOUUsV0FBSyxnQkFBTCxLQUFLLGNBQWdCO0FBQUEsSUFBQTtBQUFBO0FBQUEsSUFKTSxJQUF5QixRQUEyQjtBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBcEQsSUFBeUIsTUFBMkIsT0FBQTtBQUFBLHlCQUFBLHlCQUFBO0FBQUEsSUFBQTtBQUFBLEtBQXBEOztBQUE1Qix3QkFBQSxDQUFBLFNBQVMsRUFBRSxTQUFTLEtBQU0sQ0FBQSxDQUFDO0FBQTBCLGlCQUFBLElBQUEsTUFBQSxtQkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLFNBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsV0FBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQUEsT0FBQSxLQUFBLENBQUEsS0FBQSxVQUFBO0FBQUEsVUFBQSxRQUEyQjtBQUFBLFNBQUEsVUFBQSxhQUFBLHFCQUFBLHdCQUFBO0FBSm5GLGlCQVVDLE1BQUEsbUJBQUEsRUFBQSxPQUFBLFdBQUEsR0FBQSxrQkFBQSxFQUFBLE1BQUEsU0FBQSxNQUFBLFdBQUEsTUFBQSxVQUFBLFVBQUEsR0FBQSxNQUFBLHVCQUFBOzs7UUFUd0IsR0FBTSxTQUFtQixDQUFDLGFBQWEsUUFBUSxLQUFLLEdBRHZFLGtCQUFzQixZQUFBLHVCQUFBLEdBQUM7OzsifQ==

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

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

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

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

package/development/sidebar/sidebar-title.js

@@ -1,4 +1,4 @@
-import { SbbSidebarTitleElement } from "./sidebar-title/sidebar-title.js";
+import { SbbSidebarTitleElement } from "./sidebar-title/sidebar-title.component.js";
 export {
   SbbSidebarTitleElement
 };

package/development/sidebar/sidebar.d.ts

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

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

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

package/development/sidebar/sidebar.js

@@ -1,4 +1,4 @@
-import { SbbSidebarElement } from "./sidebar/sidebar.js";
+import { SbbSidebarElement } from "./sidebar/sidebar.component.js";
 export {
   SbbSidebarElement
 };

package/development/sidebar.js

@@ -1,14 +1,14 @@
 import { i, s, a } from "./icon-sidebar-button-common-CA_8TnFu.js";
-import { SbbIconSidebarElement } from "./sidebar/icon-sidebar/icon-sidebar.js";
-import { SbbIconSidebarButtonElement } from "./sidebar/icon-sidebar-button/icon-sidebar-button.js";
-import { SbbIconSidebarContainerElement } from "./sidebar/icon-sidebar-container/icon-sidebar-container.js";
-import { SbbIconSidebarContentElement } from "./sidebar/icon-sidebar-content/icon-sidebar-content.js";
-import { SbbIconSidebarLinkElement } from "./sidebar/icon-sidebar-link/icon-sidebar-link.js";
-import { SbbSidebarElement } from "./sidebar/sidebar/sidebar.js";
-import { SbbSidebarCloseButtonElement } from "./sidebar/sidebar-close-button/sidebar-close-button.js";
-import { SbbSidebarContainerElement } from "./sidebar/sidebar-container/sidebar-container.js";
-import { SbbSidebarContentElement } from "./sidebar/sidebar-content/sidebar-content.js";
-import { SbbSidebarTitleElement } from "./sidebar/sidebar-title/sidebar-title.js";
+import { SbbIconSidebarElement } from "./sidebar/icon-sidebar/icon-sidebar.component.js";
+import { SbbIconSidebarButtonElement } from "./sidebar/icon-sidebar-button/icon-sidebar-button.component.js";
+import { SbbIconSidebarContainerElement } from "./sidebar/icon-sidebar-container/icon-sidebar-container.component.js";
+import { SbbIconSidebarContentElement } from "./sidebar/icon-sidebar-content/icon-sidebar-content.component.js";
+import { SbbIconSidebarLinkElement } from "./sidebar/icon-sidebar-link/icon-sidebar-link.component.js";
+import { SbbSidebarElement } from "./sidebar/sidebar/sidebar.component.js";
+import { SbbSidebarCloseButtonElement } from "./sidebar/sidebar-close-button/sidebar-close-button.component.js";
+import { SbbSidebarContainerElement } from "./sidebar/sidebar-container/sidebar-container.component.js";
+import { SbbSidebarContentElement } from "./sidebar/sidebar-content/sidebar-content.component.js";
+import { SbbSidebarTitleElement } from "./sidebar/sidebar-title/sidebar-title.component.js";
 export {
   SbbIconSidebarButtonElement,
   SbbIconSidebarContainerElement,

package/development/signet/signet.component.d.ts

@@ -0,0 +1,22 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbProtectiveRoom } from '../core/interfaces.js';
+export type SbbSignetProtectiveRoom = SbbProtectiveRoom | 'panel';
+/**
+ * It displays the SBB signet.
+ *
+ * @cssprop [--sbb-signet-height=auto] - Can be used to set the height of the signet.
+ */
+export declare class SbbSignetElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Visual protective room around signet. */
+    accessor protectiveRoom: SbbSignetProtectiveRoom;
+    /** Accessibility label which will be forwarded to the inner SVG signet. */
+    accessor accessibilityLabel: string;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-signet': SbbSignetElement;
+    }
+}
+//# sourceMappingURL=signet.component.d.ts.map

package/development/signet/signet.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signet.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/signet/signet.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI/D,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG,OAAO,CAAC;AAElE;;;;GAIG;AACH,qBAEM,gBAAiB,SAAQ,UAAU;IACvC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAC5C,SACgB,cAAc,EAAE,uBAAuB,CAAW;IAElE,2EAA2E;IAC3E,SAEgB,kBAAkB,EAAE,MAAM,CAAU;cAEjC,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}