@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/sidebar.pure.js

@@ -1,6 +1,607 @@
-import { t as SbbSidebarCloseButtonElement } from "./sidebar-close-button.component-tkbcoR-I.js";
-import { t as SbbSidebarContainerElement } from "./sidebar-container.component-CbE9878W.js";
-import { t as SbbSidebarContentElement } from "./sidebar-content.component-CBfaiAsJ.js";
-import { t as SbbSidebarTitleElement } from "./sidebar-title.component-ZKarv4Mz.js";
-import { t as SbbSidebarElement } from "./sidebar.component-Cmkn9X-M.js";
-export { SbbSidebarCloseButtonElement, SbbSidebarContainerElement, SbbSidebarContentElement, SbbSidebarElement, SbbSidebarTitleElement };
+import { html, isServer, unsafeCSS } from "lit";
+import { SbbSecondaryButtonElement } from "./button.pure.js";
+import { SbbAnimationCompleteMixin, SbbElement, SbbEscapableOverlayController, SbbFocusTrapController, SbbLanguageController, SbbOpenCloseBaseElement, forceType, handleDistinctChange, hostScrollbarStyles, i18nCloseSidebar, isZeroAnimationDuration, scrollbarStyles, ɵstateController } from "./core.js";
+import { __esDecorate, __runInitializers } from "tslib";
+import { eventOptions, property } from "lit/decorators.js";
+import { SbbTitleBase } from "./title.pure.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+
+//#region src/elements/sidebar/sidebar-close-button/sidebar-close-button.scss?inline
+var sidebar_close_button_default = ":host {\n  display: block;\n  height: fit-content;\n}\n";
+
+//#endregion
+//#region src/elements/sidebar/sidebar-close-button/sidebar-close-button.component.ts
+/**
+* Sidebar close button, intended to be placed inside sbb-sidebar.
+*
+* @slot - Use the unnamed slot to add content to the sidebar-close-button. Not intended to be used in this context.
+* @slot icon - Slot used to display the icon, if one is set. Not intended to be used in this context.
+*/
+var SbbSidebarCloseButtonElement = class extends SbbSecondaryButtonElement {
+	static {
+		this.elementName = "sbb-sidebar-close-button";
+	}
+	static {
+		this.styles = [unsafeCSS(sidebar_close_button_default)];
+	}
+	constructor() {
+		super();
+		this._languageController = new SbbLanguageController(this);
+		this.size = "s";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.slot ||= "title-section";
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		this.internals.ariaLabel = i18nCloseSidebar[this._languageController.current];
+	}
+	renderTemplate() {
+		return super.renderIconSlot();
+	}
+	renderIconName() {
+		return super.renderIconName() || "cross-small";
+	}
+};
+
+//#endregion
+//#region src/elements/sidebar/common/icon-sidebar-button-common.scss?inline
+var icon_sidebar_button_common_default = ":host {\n  display: block;\n  outline: none !important;\n  --sbb-icon-sidebar-button-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  --sbb-icon-sidebar-button-transition-easing-function: var(--sbb-animation-easing);\n  --sbb-icon-sidebar-button-dimension: var(--sbb-size-element-m);\n  --sbb-icon-sidebar-button-border-radius: var(--sbb-border-radius-4x);\n  --sbb-icon-sidebar-button-color: var(--sbb-color-granite);\n  --sbb-icon-sidebar-button-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));\n  --sbb-icon-sidebar-button-current-color: var(--sbb-color-3);\n  --sbb-icon-sidebar-button-current-border-width: var(--sbb-border-width-3x);\n  --sbb-icon-sidebar-button-current-border-inset-block: var(--sbb-spacing-fixed-2x);\n  --sbb-icon-sidebar-button__current-border-inset-inline-start: 0;\n  --sbb-icon-sidebar-button__color: var(--sbb-icon-sidebar-button-color);\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-icon-sidebar-button-current-color: Highlight !important;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(button),[state--button])) {\n    --sbb-icon-sidebar-button-color: ButtonText !important;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(link),[state--link])) {\n    --sbb-icon-sidebar-button-color: LinkText !important;\n  }\n}\n\n@media (any-hover: hover) {\n  :host(:not(:active, :is(:state(active),[state--active])):hover) {\n    --sbb-icon-sidebar-button__hover-shift: 0.0625rem;\n    --sbb-icon-sidebar-button__cursor: var(--sbb-cursor-pointer);\n  }\n}\n\n.sbb-action-base {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--sbb-icon-sidebar-button-dimension);\n  padding-block: 0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift, 0rem));\n  color: var(--sbb-icon-sidebar-button__color);\n  border-radius: var(--sbb-icon-sidebar-button-border-radius);\n  cursor: var(--sbb-icon-sidebar-button__cursor);\n  user-select: none;\n  transition-duration: var(--sbb-icon-sidebar-button-transition-duration);\n  transition-timing-function: var(--sbb-icon-sidebar-button-transition-easing-function);\n  transition-property: color, padding;\n}\n:host(.sbb-active) .sbb-action-base {\n  color: var(--sbb-icon-sidebar-button-current-color);\n}\n:host(.sbb-active) .sbb-action-base::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block: var(--sbb-icon-sidebar-button-current-border-inset-block);\n  inset-inline: var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;\n  border-inline-start: var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor;\n}\n:host(:focus-visible) .sbb-action-base, .sbb-action-base:focus-visible {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: calc(-1 * var(--sbb-focus-outline-width) - 0.3125rem);\n}\n";
+
+//#endregion
+//#region src/elements/sidebar/common/sidebar-container-common.scss?inline
+var sidebar_container_common_default = ":host {\n  position: absolute;\n  inset: 0;\n}\n";
+
+//#endregion
+//#region src/elements/sidebar/common/sidebar-content-common.scss?inline
+var sidebar_content_common_default = ":host {\n  position: relative;\n  display: block;\n  height: 100%;\n  overflow: auto;\n  outline-color: var(--sbb-focus-outline-color);\n}\n";
+
+//#endregion
+//#region src/elements/sidebar/common/styles.ts
+const sidebarContainerCommonStyle = unsafeCSS(sidebar_container_common_default);
+const sidebarContentCommonStyle = unsafeCSS(sidebar_content_common_default);
+const iconSidebarButtonCommonStyle = unsafeCSS(icon_sidebar_button_common_default);
+
+//#endregion
+//#region src/elements/sidebar/sidebar-container/sidebar-container.scss?inline
+var sidebar_container_default = ":host {\n  display: block;\n  overflow: hidden;\n  --sbb-sidebar-container-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  --sbb-sidebar-container-animation-easing: var(--sbb-animation-easing);\n  --sbb-sidebar-container-backdrop-opacity: 0;\n  --sbb-sidebar-container__backdrop-visibility: hidden;\n  --sbb-sidebar-container-backdrop-animation-duration: var(\n    --sbb-sidebar-container-animation-duration\n  );\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-sidebar-container-backdrop-opacity: 0.5;\n  }\n}\n\n.sbb-sidebar-container-backdrop {\n  position: absolute;\n  inset: 0;\n  visibility: var(--sbb-sidebar-container__backdrop-visibility);\n  opacity: var(--sbb-sidebar-container-backdrop-opacity);\n  background-color: var(--sbb-color-black);\n  z-index: 3;\n  transition-duration: var(--sbb-sidebar-container-backdrop-animation-duration);\n  transition-timing-function: var(--sbb-sidebar-container-animation-easing);\n  transition-property: opacity, visibility;\n}\n";
+
+//#endregion
+//#region src/elements/sidebar/sidebar-container/sidebar-container.component.ts
+const sidebarContainerRegistry = /* @__PURE__ */ new Set();
+let sidebarContainerResizeObserver;
+const MIN_WIDTH_BEFORE_COLLAPSE = 320;
+/**
+* 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.
+*/
+var SbbSidebarContainerElement = class extends SbbElement {
+	constructor() {
+		super(...arguments);
+		this._forcedClosedSidebars = /* @__PURE__ */ new WeakSet();
+	}
+	static {
+		this.elementName = "sbb-sidebar-container";
+	}
+	static {
+		this.styles = [sidebarContainerCommonStyle, unsafeCSS(sidebar_container_default)];
+	}
+	/** The sidebar children. */
+	get sidebars() {
+		return Array.from(this.querySelectorAll?.(`:scope > sbb-sidebar`) ?? []);
+	}
+	/** The sidebar child with the `start` position. */
+	get start() {
+		return this.querySelector?.(`:scope > sbb-sidebar:not([position='end'])`);
+	}
+	/** The sidebar child with the `end` position. */
+	get end() {
+		return this.querySelector?.(`:scope > sbb-sidebar[position='end']`);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		sidebarContainerResizeObserver ??= !isServer && new ResizeObserver(() => this._handleWidthChange());
+		if (!isServer && sidebarContainerRegistry.size === 0) sidebarContainerResizeObserver.observe(document?.documentElement);
+		sidebarContainerRegistry.add(this);
+		this._handleWidthChange();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		sidebarContainerRegistry.delete(this);
+		if (sidebarContainerRegistry.size === 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() {
+		if (isServer) return;
+		const parentSidebars = (this.parentElement?.closest?.("sbb-sidebar-container"))?.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.matches(":is(:state(mode-over-forced),[state--mode-over-forced])")) ?? false;
+		const isMinimumSpace = width - sidebars.filter((sidebar) => sidebar.mode === "side").reduce((accumulator, currentValue) => accumulator + (currentValue.offsetWidth ?? 0), 0) < MIN_WIDTH_BEFORE_COLLAPSE;
+		for (const sidebar of sidebars) {
+			const wasMinimum = sidebar.matches(":is(:state(mode-over-forced),[state--mode-over-forced])");
+			const controller = ɵstateController(sidebar);
+			controller.toggle("mode-over-forced", isMinimumSpace);
+			if (sidebar.mode !== "side") continue;
+			if ((isMinimumSpace || hasForcedClosedParentContainer) && sidebar.opened && !wasMinimum) {
+				if (sidebar.isOpen && !sidebar.matches(":is(:state(skip-animation),[state--skip-animation])")) controller.add("mode-over-forced-closing");
+				sidebar.opened = false;
+				this._forcedClosedSidebars.add(sidebar);
+				if (sidebar.matches(":is(:state(mode-over-forced-closing),[state--mode-over-forced-closing])")) sidebar.updateComplete.then(() => sidebar.animationComplete).then(() => controller.delete("mode-over-forced-closing"));
+			} else if (!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>`;
+	}
+};
+
+//#endregion
+//#region src/elements/sidebar/sidebar-content/sidebar-content.scss?inline
+var sidebar_content_default = ":host {\n  --_sbb-sidebar-content-margin-inline-start: initial;\n  --_sbb-sidebar-content-margin-inline-end: initial;\n  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));\n  transition: margin var(--sbb-sidebar-container-animation-duration) var(--sbb-sidebar-container-animation-easing);\n}\n";
+
+//#endregion
+//#region src/elements/sidebar/sidebar-content/sidebar-content.component.ts
+/**
+* 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>` elements are possible.
+*/
+var SbbSidebarContentElement = class extends SbbElement {
+	static {
+		this.elementName = "sbb-sidebar-content";
+	}
+	static {
+		this.styles = [
+			hostScrollbarStyles,
+			sidebarContentCommonStyle,
+			unsafeCSS(sidebar_content_default)
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.classList.add("sbb-scrollbar");
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+
+//#endregion
+//#region src/elements/sidebar/sidebar-title/sidebar-title.scss?inline
+var sidebar_title_default = ":host {\n  hyphens: auto;\n  padding-block-start: calc(0.5 * (var(--_sbb-sidebar-close-button-size) - 1em * var(--sbb-typo-line-height-heading)));\n  min-height: var(--_sbb-sidebar-close-button-size);\n}\n";
+
+//#endregion
+//#region src/elements/sidebar/sidebar-title/sidebar-title.component.ts
+/**
+* It displays the title of the sidebar. It has to be placed inside an `sbb-sidebar` element.
+*
+* @slot - Use the unnamed slot for the content of the sidebar-title.
+*/
+let SbbSidebarTitleElement = (() => {
+	let _classSuper = SbbTitleBase;
+	let _level_decorators;
+	let _level_initializers = [];
+	let _level_extraInitializers = [];
+	return class SbbSidebarTitleElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_level_decorators = [property({ reflect: true })];
+			__esDecorate(this, 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);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-sidebar-title";
+		}
+		static {
+			this.styles = [unsafeCSS(sidebar_title_default)];
+		}
+		#level_accessor_storage = __runInitializers(this, _level_initializers, "2");
+		/** Title level */
+		get level() {
+			return this.#level_accessor_storage;
+		}
+		set level(value) {
+			this.#level_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			__runInitializers(this, _level_extraInitializers);
+			this.visualLevel ??= "5";
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.slot ||= "title-section";
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/sidebar/sidebar/sidebar.scss?inline
+var sidebar_default = ":host {\n  --sbb-link-text-decoration-line: none;\n  --sbb-sidebar-background-color: var(--sbb-background-color-1);\n  --sbb-sidebar-scrollbar-placeholder-width: var(--sbb-spacing-fixed-3x);\n  --_sbb-sidebar-margin: 0;\n  --_sbb-sidebar-margin-block-start: var(--sbb-sidebar-margin);\n  --_sbb-sidebar-translate-x: -100%;\n  --_sbb-sidebar-z-index: 2;\n  --_sbb-sidebar-padding-inline-end: var(--sbb-sidebar-padding);\n  --_sbb-sidebar-padding-block-start: var(--sbb-sidebar-padding);\n  --_sbb-sidebar-border-radius-start: var(--sbb-sidebar-border-radius);\n  --_sbb-sidebar-border-radius-end: 0;\n  --_sbb-sidebar-close-button-size: var(--sbb-size-element-xs);\n  --_sbb-sidebar-max-width: calc(100% - 2 * var(--_sbb-sidebar-margin));\n  display: block;\n  width: 20rem;\n}\n@supports (scrollbar-gutter: stable) and (not (-webkit-touch-callout: none)) {\n  :host {\n    --_sbb-sidebar-padding-inline-end: calc(\n      var(--sbb-sidebar-padding) - var(--sbb-sidebar-scrollbar-placeholder-width)\n    );\n  }\n}\n\n:host([color=white]) {\n  --sbb-sidebar-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=milk]) {\n  --sbb-sidebar-background-color: var(--sbb-background-color-3);\n}\n\n:host(:is([mode=over], :is(:state(mode-over-forced),[state--mode-over-forced]):not(:is(:state(mode-over-forced-closing),[state--mode-over-forced-closing])))) {\n  --_sbb-sidebar-margin: var(--sbb-sidebar-margin);\n  --_sbb-sidebar-border-radius-end: var(--sbb-sidebar-border-radius);\n  --_sbb-sidebar-z-index: 3;\n}\n\n:host(:is(:dir(rtl), [position=end])) {\n  --_sbb-sidebar-translate-x: 100%;\n}\n\n:host(:dir(rtl)[position=end]) {\n  --_sbb-sidebar-translate-x: -100%;\n}\n\n.sbb-sidebar {\n  width: inherit;\n  max-width: var(--_sbb-sidebar-max-width);\n  background-color: var(--sbb-sidebar-background-color);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  overflow: hidden;\n  inset-block: 0;\n  z-index: var(--_sbb-sidebar-z-index);\n  border-start-start-radius: var(--_sbb-sidebar-border-radius-start);\n  border-start-end-radius: var(--_sbb-sidebar-border-radius-start);\n  border-end-start-radius: var(--_sbb-sidebar-border-radius-end);\n  border-end-end-radius: var(--_sbb-sidebar-border-radius-end);\n  margin: var(--_sbb-sidebar-margin);\n  margin-block-start: var(--_sbb-sidebar-margin-block-start);\n  transition-duration: var(--sbb-sidebar-container-animation-duration);\n  transition-timing-function: var(--sbb-sidebar-container-animation-easing);\n  transition-property: width, translate;\n  translate: none;\n}\n:host([position=end]) .sbb-sidebar {\n  inset-inline-end: 0;\n}\n:host(:is(:state(state-closed),[state--state-closed])) .sbb-sidebar {\n  visibility: hidden;\n}\n:host(:is(:is(:state(state-closing),[state--state-closing]), :is(:state(state-closed),[state--state-closed]))) .sbb-sidebar {\n  translate: var(--_sbb-sidebar-translate-x) 0;\n}\n\n.sbb-sidebar-title-section {\n  display: flex;\n  width: 100%;\n  gap: var(--sbb-sidebar-title-gap);\n  background-color: var(--sbb-sidebar-background-color);\n  padding-inline: var(--sbb-sidebar-padding);\n  transition: box-shadow var(--sbb-animation-easing) var(--sbb-sidebar-container-animation-duration);\n  box-shadow: none;\n}\n:host(:is(:state(scrolled),[state--scrolled])) .sbb-sidebar-title-section {\n  box-shadow: var(--sbb-box-shadow-level-5-soft);\n}\n\n.sbb-sidebar-content-section {\n  padding-block-start: var(--_sbb-sidebar-padding-block-start);\n  padding-inline: var(--sbb-sidebar-padding) var(--_sbb-sidebar-padding-inline-end);\n  overflow-y: auto;\n  flex-grow: 1;\n  outline-color: var(--sbb-focus-outline-color);\n}\n@supports (scrollbar-gutter: stable) {\n  .sbb-sidebar-content-section {\n    scrollbar-gutter: stable;\n  }\n}\n\n::slotted(sbb-sidebar-title) {\n  flex-grow: 1;\n  margin-block: var(--sbb-sidebar-title-padding-block);\n}\n\n::slotted(sbb-sidebar-close-button) {\n  order: 1;\n  margin-inline-end: calc(-1 * (var(--sbb-sidebar-padding) - var(--sbb-sidebar-title-padding-block)));\n  margin-block: var(--sbb-sidebar-title-padding-block);\n  inset-inline-end: var(--sbb-sidebar-padding);\n}\n";
+
+//#endregion
+//#region src/elements/sidebar/sidebar/sidebar.component.ts
+/**
+* This component corresponds to a sidebar that can be opened on the sidebar container.
+*
+* @slot - Use the unnamed slot to slot any content into the sidebar.
+* @slot title - Use the title slot to add an <sbb-title>.
+*/
+let SbbSidebarElement = (() => {
+	let _classSuper = SbbAnimationCompleteMixin(SbbOpenCloseBaseElement);
+	let _instanceExtraInitializers = [];
+	let _color_decorators;
+	let _color_initializers = [];
+	let _color_extraInitializers = [];
+	let _mode_decorators;
+	let _mode_initializers = [];
+	let _mode_extraInitializers = [];
+	let _position_decorators;
+	let _position_initializers = [];
+	let _position_extraInitializers = [];
+	let _opened_decorators;
+	let _opened_initializers = [];
+	let _opened_extraInitializers = [];
+	let _focusOnOpen_decorators;
+	let _focusOnOpen_initializers = [];
+	let _focusOnOpen_extraInitializers = [];
+	let __detectScrolledState_decorators;
+	return class SbbSidebarElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_color_decorators = [property({ reflect: true })];
+			_mode_decorators = [forceType((v) => v === "over" ? "over" : "side"), property({ reflect: true })];
+			_position_decorators = [
+				forceType((v) => v === "end" ? "end" : "start"),
+				handleDistinctChange((instance, _newValue, oldValue) => instance._updateSidebarWidth(oldValue)),
+				property({ reflect: true })
+			];
+			_opened_decorators = [forceType(), property({
+				type: Boolean,
+				reflect: true
+			})];
+			_focusOnOpen_decorators = [forceType(), property({
+				type: Boolean,
+				attribute: "focus-on-open"
+			})];
+			__detectScrolledState_decorators = [eventOptions({ passive: true })];
+			__esDecorate(this, null, _color_decorators, {
+				kind: "accessor",
+				name: "color",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "color" in obj,
+					get: (obj) => obj.color,
+					set: (obj, value) => {
+						obj.color = value;
+					}
+				},
+				metadata: _metadata
+			}, _color_initializers, _color_extraInitializers);
+			__esDecorate(this, null, _mode_decorators, {
+				kind: "accessor",
+				name: "mode",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "mode" in obj,
+					get: (obj) => obj.mode,
+					set: (obj, value) => {
+						obj.mode = value;
+					}
+				},
+				metadata: _metadata
+			}, _mode_initializers, _mode_extraInitializers);
+			__esDecorate(this, null, _position_decorators, {
+				kind: "accessor",
+				name: "position",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "position" in obj,
+					get: (obj) => obj.position,
+					set: (obj, value) => {
+						obj.position = value;
+					}
+				},
+				metadata: _metadata
+			}, _position_initializers, _position_extraInitializers);
+			__esDecorate(this, null, _opened_decorators, {
+				kind: "accessor",
+				name: "opened",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "opened" in obj,
+					get: (obj) => obj.opened,
+					set: (obj, value) => {
+						obj.opened = value;
+					}
+				},
+				metadata: _metadata
+			}, _opened_initializers, _opened_extraInitializers);
+			__esDecorate(this, null, _focusOnOpen_decorators, {
+				kind: "accessor",
+				name: "focusOnOpen",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "focusOnOpen" in obj,
+					get: (obj) => obj.focusOnOpen,
+					set: (obj, value) => {
+						obj.focusOnOpen = value;
+					}
+				},
+				metadata: _metadata
+			}, _focusOnOpen_initializers, _focusOnOpen_extraInitializers);
+			__esDecorate(this, null, __detectScrolledState_decorators, {
+				kind: "method",
+				name: "_detectScrolledState",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_detectScrolledState" in obj,
+					get: (obj) => obj._detectScrolledState
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-sidebar";
+		}
+		static {
+			this.styles = [scrollbarStyles, unsafeCSS(sidebar_default)];
+		}
+		#color_accessor_storage;
+		/** Background color of the sidebar. Either `white` or `milk`. */
+		get color() {
+			return this.#color_accessor_storage;
+		}
+		set color(value) {
+			this.#color_accessor_storage = value;
+		}
+		#mode_accessor_storage;
+		/** Mode of the sidebar; one of 'side' or 'over'. */
+		get mode() {
+			return this.#mode_accessor_storage;
+		}
+		set mode(value) {
+			this.#mode_accessor_storage = value;
+		}
+		#position_accessor_storage;
+		/** The side that the sidebar is attached to. */
+		get position() {
+			return this.#position_accessor_storage;
+		}
+		set position(value) {
+			this.#position_accessor_storage = value;
+		}
+		#opened_accessor_storage;
+		/**
+		* Whether the sidebar is opened or closed.
+		* Can be used to initially set the opened state, where
+		* the animation will be skipped.
+		*/
+		get opened() {
+			return this.#opened_accessor_storage;
+		}
+		set opened(value) {
+			this.#opened_accessor_storage = value;
+		}
+		#focusOnOpen_accessor_storage;
+		/**
+		* Whether the sidebar should focus the first focusable element automatically when opened.
+		* Defaults to false in when mode is set to `side`, otherwise defaults to true.
+		* If explicitly enabled, focus will be moved into the sidebar in `side` mode as well.
+		*/
+		get focusOnOpen() {
+			return this.#focusOnOpen_accessor_storage;
+		}
+		set focusOnOpen(value) {
+			this.#focusOnOpen_accessor_storage = value;
+		}
+		/** Returns the SbbSidebarContainerElement where this sidebar is contained. */
+		get container() {
+			return this._container;
+		}
+		constructor() {
+			super();
+			this.#color_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _color_initializers, "white"));
+			this.#mode_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _mode_initializers, "side"));
+			this.#position_accessor_storage = (__runInitializers(this, _mode_extraInitializers), __runInitializers(this, _position_initializers, "start"));
+			this.#opened_accessor_storage = (__runInitializers(this, _position_extraInitializers), __runInitializers(this, _opened_initializers, false));
+			this.#focusOnOpen_accessor_storage = (__runInitializers(this, _opened_extraInitializers), __runInitializers(this, _focusOnOpen_initializers, false));
+			this._container = (__runInitializers(this, _focusOnOpen_extraInitializers), null);
+			this._lastFocusedElement = null;
+			this._focusTrapController = new SbbFocusTrapController(this);
+			this._escapableOverlayController = new SbbEscapableOverlayController(this);
+			this._closeOnNavigation = () => {
+				if (this._isModeOver() && this.isOpen) this.close();
+			};
+			this.addController(new ResizeController(this, {
+				skipInitial: true,
+				callback: () => this._updateSidebarWidth()
+			}));
+			this.addEventListener?.("click", (e) => {
+				if (e.target?.localName === "sbb-sidebar-close-button") this.close();
+			});
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._container = this.closest?.("sbb-sidebar-container");
+			this._updateSidebarWidth();
+			if (this.isOpen && this._isModeOver()) this._takeFocus();
+			if (!isServer) if (window.navigation) window.navigation.addEventListener("navigate", this._closeOnNavigation);
+			else window.addEventListener("popstate", this._closeOnNavigation);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.container?.style.removeProperty(this._buildCssWidthVar());
+			this._container = null;
+			if (!isServer) if (window.navigation) window.navigation.removeEventListener("navigate", this._closeOnNavigation);
+			else window.removeEventListener("popstate", this._closeOnNavigation);
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("opened")) {
+				if (this.opened) this.open();
+				else if (!this.opened) this.close();
+			}
+			if (changedProperties.has("mode")) if (this.mode === "over" && this.isOpen) this._takeFocus();
+			else this.cedeFocus();
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._updateSidebarWidth();
+		}
+		/** Toggles the sidebar visibility. */
+		toggle() {
+			if (this.state === "opening" || this.state === "opened") this.close();
+			else this.open();
+		}
+		/** Opens the sidebar. */
+		open() {
+			if (this.state === "opening" || this.state === "opened" || !this.dispatchBeforeOpenEvent()) return;
+			this.startAnimation();
+			if (!isServer && document.activeElement?.localName !== "body") this._lastFocusedElement = document.activeElement;
+			this.opened = true;
+			this.state = "opening";
+			const isZeroAnimationDuration = this._isZeroAnimationDuration() || !this.isConnected;
+			const isDuringInitialization = !this.hasUpdated;
+			if (!(isDuringInitialization || isZeroAnimationDuration)) return;
+			this.internals.states.add("skip-animation");
+			if (isDuringInitialization) this.updateComplete.then(() => this._handleOpening());
+			else this._handleOpening();
+		}
+		_isZeroAnimationDuration() {
+			return isZeroAnimationDuration(this, "--sbb-sidebar-container-animation-duration");
+		}
+		_handleOpening() {
+			this.state = "opened";
+			setTimeout(() => this.internals.states.delete("skip-animation"));
+			this._takeFocus();
+			this.stopAnimation();
+			this.dispatchOpenEvent();
+		}
+		/** Closes the sidebar. */
+		close() {
+			if (this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent()) return;
+			this.startAnimation();
+			const isZeroAnimationDuration = this._isZeroAnimationDuration();
+			if (!this.hasUpdated || isZeroAnimationDuration) this.internals.states.add("skip-animation");
+			else this.state = "closing";
+			this.opened = false;
+			if (!this.hasUpdated || isZeroAnimationDuration) this._handleClosing();
+		}
+		_handleClosing() {
+			this.state = "closed";
+			setTimeout(() => this.internals.states.delete("skip-animation"));
+			this.cedeFocus();
+			if (!isServer && (this.contains(document.activeElement) || this._isModeOver())) if (this._lastFocusedElement) this._lastFocusedElement?.focus();
+			else document.activeElement.blur();
+			this._lastFocusedElement = null;
+			this.stopAnimation();
+			this.dispatchCloseEvent();
+		}
+		_takeFocus() {
+			if (!this.isConnected) return;
+			const isModeOver = this._isModeOver();
+			if (isModeOver || this.focusOnOpen) this._focusTrapController.focusInitialElement();
+			if (isModeOver) {
+				this._escapableOverlayController.connect();
+				this._focusTrapController.enabled = true;
+			}
+		}
+		cedeFocus() {
+			this._focusTrapController.enabled = false;
+			this._escapableOverlayController.disconnect();
+		}
+		_updateSidebarWidth(oldPosition) {
+			const container = this.container;
+			if (!container) return;
+			if (oldPosition) container.style.removeProperty(this._buildCssWidthVar(oldPosition));
+			const width = this.offsetWidth;
+			if (!width) return;
+			const newValue = `${width}px`;
+			if (container.style.getPropertyValue(this._buildCssWidthVar()) === newValue) return;
+			container.style.setProperty(this._buildCssWidthVar(), newValue);
+		}
+		_buildCssWidthVar(position = this.position) {
+			return `--_sbb-sidebar-container-${position}-width`;
+		}
+		_isModeOver() {
+			return this.mode === "over" || this.matches(":is(:state(mode-over-forced),[state--mode-over-forced])");
+		}
+		_onTransitionEnd(event) {
+			if (event.propertyName !== "translate" || event.target !== event.currentTarget) return;
+			if (this.state === "opening") this._handleOpening();
+			else if (this.state === "closing") this._handleClosing();
+		}
+		_detectScrolledState() {
+			this.toggleState("scrolled", (this.shadowRoot?.querySelector(".sbb-sidebar-content-section")?.scrollTop ?? 0) > 0);
+		}
+		render() {
+			return html`<div class="sbb-sidebar" @transitionend=${this._onTransitionEnd}>
+      <div class="sbb-sidebar-title-section"><slot name="title-section"></slot></div>
+      <div
+        class="sbb-sidebar-content-section sbb-scrollbar"
+        @scroll=${() => this._detectScrolledState()}
+      >
+        <slot></slot>
+      </div>
+    </div>`;
+		}
+	};
+})();
+
+//#endregion
+export { SbbSidebarCloseButtonElement, SbbSidebarContainerElement, SbbSidebarContentElement, SbbSidebarElement, SbbSidebarTitleElement };

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

@@ -1,4 +1,4 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 import { SbbElement } from '../core.ts';
 /**
  * It displays the SBB signet.
@@ -19,4 +19,3 @@ declare global {
         'sbb-signet': SbbSignetElement;
     }
 }
-//# sourceMappingURL=signet.component.d.ts.map

package/development/signet.d.ts

@@ -1,2 +1 @@
 export * from './signet.pure.ts';
-//# sourceMappingURL=signet.d.ts.map

package/development/signet.js

@@ -1,9 +1,9 @@
-import { t as SbbSignetElement } from "./signet.component--kuRWLGw.js";
-import "./signet.pure.js";
+import { SbbSignetElement } from "./signet.pure.js";
+
+export * from "./signet.pure.js"
+
 //#region src/elements/signet.ts
 /** @entrypoint */
 SbbSignetElement.define();
-//#endregion
-export { SbbSignetElement };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lnbmV0LmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9zaWduZXQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiLyoqIEBlbnRyeXBvaW50ICovXG5pbXBvcnQgeyBTYmJTaWduZXRFbGVtZW50IH0gZnJvbSAnLi9zaWduZXQucHVyZS50cyc7XG5cbmV4cG9ydCAqIGZyb20gJy4vc2lnbmV0LnB1cmUudHMnO1xuXG5TYmJTaWduZXRFbGVtZW50LmRlZmluZSgpO1xuIl0sIm1hcHBpbmdzIjoiOzs7O0FBS0EsaUJBQWlCLE9BQU0ifQ==
+//#endregion

package/development/signet.pure.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './signet/signet.component.ts';
-//# sourceMappingURL=signet.pure.d.ts.map