@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/container.pure.js

@@ -1,3 +1,346 @@
-import { t as SbbContainerElement } from "./container.component-Ctdd3D-A.js";
-import { t as SbbStickyBarElement } from "./sticky-bar.component-BEhV0azF.js";
-export { SbbContainerElement, SbbStickyBarElement };
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbElement, SbbUpdateSchedulerMixin, forceType, isZeroAnimationDuration, ɵstateController } from "./core.js";
+import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
+
+//#region src/elements/container/container/container.scss?inline
+var container_default = "@charset \"UTF-8\";\n:host {\n  display: block;\n}\n\n:host(:is(:not([color]), [color=white])) {\n  --sbb-container-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=milk]) {\n  --sbb-container-background-color: var(--sbb-background-color-3);\n}\n\n:host([color=midnight]),\n:host([color=charcoal]) {\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-container-color: var(--sbb-color-1-negative);\n}\n\n:host([color=midnight]) {\n  --sbb-container-background-color: var(--sbb-background-color-1-negative);\n}\n\n:host([color=charcoal]) {\n  --sbb-container-background-color: var(--sbb-background-color-2-negative);\n}\n\n:host(:is(:state(slotted-image),[state--slotted-image])) {\n  --sbb-container-background-color: transparent;\n  --sbb-container-padding: var(--sbb-spacing-responsive-xxl);\n}\n\n:host([background-expanded]:not([expanded])) {\n  background-color: var(--sbb-container-background-color);\n}\n\n:host(:is(:state(slotted-image),[state--slotted-image])[background-expanded]) {\n  position: relative;\n}\n\n@media (min-width: calc(90rem)) {\n  :host(:not([expanded], [background-expanded])) {\n    --sbb-container-background-border-radius: var(--sbb-border-radius-4x);\n  }\n}\n\n.sbb-container {\n  color: var(--sbb-container-color);\n  background-color: var(--sbb-container-background-color);\n  padding: var(--sbb-container-padding);\n}\n.sbb-container::after, .sbb-container::before {\n  content: \"\xA0\";\n  display: block;\n  visibility: hidden;\n  height: 0;\n  overflow: hidden;\n}\n:host([color=transparent]) .sbb-container {\n  background-color: transparent;\n}\n:host(:not([expanded])) .sbb-container {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n  margin-inline: auto;\n  width: 100%;\n}\n@media (min-width: calc(90rem)) {\n  :host(:not([expanded])) .sbb-container {\n    max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n  }\n}\n:host([expanded]) .sbb-container {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));\n}\n:host(:is(:state(slotted-image),[state--slotted-image]):not([background-expanded])) .sbb-container {\n  position: relative;\n}\n\n:host(:is(:state(slotted-image),[state--slotted-image])) .sbb-container__content {\n  position: relative;\n}\n\n::slotted([slot=image]) {\n  position: absolute;\n  inset: 0;\n  height: 100%;\n  width: 100%;\n}\n";
+
+//#endregion
+//#region src/elements/container/container/container.component.ts
+/**
+* It displays its content with the default page spacing.
+*
+* @slot - Use the unnamed slot to add anything to the container.
+* @slot sticky-bar - The slot used by the sbb-sticky-bar component.
+* @slot image - The slot used to slot an `sbb-image` to use as background.
+* @cssprop --sbb-page-spacing-padding - Use this variable to override the default page spacing.
+* Note that overriding this will disable the standard responsive spacing behavior of the container.
+*/
+let SbbContainerElement = (() => {
+	let _classSuper = SbbElement;
+	let _expanded_decorators;
+	let _expanded_initializers = [];
+	let _expanded_extraInitializers = [];
+	let _backgroundExpanded_decorators;
+	let _backgroundExpanded_initializers = [];
+	let _backgroundExpanded_extraInitializers = [];
+	let _color_decorators;
+	let _color_initializers = [];
+	let _color_extraInitializers = [];
+	return class SbbContainerElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_expanded_decorators = [forceType(), property({
+				type: Boolean,
+				reflect: true
+			})];
+			_backgroundExpanded_decorators = [forceType(), property({
+				type: Boolean,
+				reflect: true,
+				attribute: "background-expanded"
+			})];
+			_color_decorators = [property({ reflect: true })];
+			__esDecorate(this, null, _expanded_decorators, {
+				kind: "accessor",
+				name: "expanded",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "expanded" in obj,
+					get: (obj) => obj.expanded,
+					set: (obj, value) => {
+						obj.expanded = value;
+					}
+				},
+				metadata: _metadata
+			}, _expanded_initializers, _expanded_extraInitializers);
+			__esDecorate(this, null, _backgroundExpanded_decorators, {
+				kind: "accessor",
+				name: "backgroundExpanded",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "backgroundExpanded" in obj,
+					get: (obj) => obj.backgroundExpanded,
+					set: (obj, value) => {
+						obj.backgroundExpanded = value;
+					}
+				},
+				metadata: _metadata
+			}, _backgroundExpanded_initializers, _backgroundExpanded_extraInitializers);
+			__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);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-container";
+		}
+		static {
+			this.styles = [unsafeCSS(container_default)];
+		}
+		#expanded_accessor_storage = __runInitializers(this, _expanded_initializers, false);
+		/** Whether the container is expanded. */
+		get expanded() {
+			return this.#expanded_accessor_storage;
+		}
+		set expanded(value) {
+			this.#expanded_accessor_storage = value;
+		}
+		#backgroundExpanded_accessor_storage = (__runInitializers(this, _expanded_extraInitializers), __runInitializers(this, _backgroundExpanded_initializers, false));
+		/** Whether the background color is shown on full container width on large screens. */
+		get backgroundExpanded() {
+			return this.#backgroundExpanded_accessor_storage;
+		}
+		set backgroundExpanded(value) {
+			this.#backgroundExpanded_accessor_storage = value;
+		}
+		#color_accessor_storage = (__runInitializers(this, _backgroundExpanded_extraInitializers), __runInitializers(this, _color_initializers, "white"));
+		/** Color of the container, like transparent, white etc. */
+		get color() {
+			return this.#color_accessor_storage;
+		}
+		set color(value) {
+			this.#color_accessor_storage = value;
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("expanded")) {
+				const stickyBar = this.querySelector?.("sbb-sticky-bar");
+				ɵstateController(stickyBar)?.toggle("expanded", this.expanded);
+			}
+		}
+		render() {
+			return html`
+      <div class="sbb-container">
+        <slot name="image"></slot>
+        <div class="sbb-container__content">
+          <slot></slot>
+        </div>
+      </div>
+      <slot name="sticky-bar"></slot>
+    `;
+		}
+		constructor() {
+			super(...arguments);
+			__runInitializers(this, _color_extraInitializers);
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/container/sticky-bar/sticky-bar.scss?inline
+var sticky_bar_default = ":host {\n  --sbb-sticky-bar-fade-in-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-5x)\n  );\n  --sbb-sticky-bar-fade-out-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  --sbb-sticky-bar-slide-vertically-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  --_sbb-sticky-bar-background-animation-duration: var(\n    --sbb-sticky-bar-fade-out-animation-duration\n  );\n  display: contents;\n}\n\n:host([size=s]) {\n  --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host([size=m]) {\n  --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);\n}\n\n:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) {\n  --sbb-sticky-bar-sticky-background-color: var(\n    --sbb-container-background-color,\n    var(--sbb-background-color-1)\n  );\n  --_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);\n  --_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration);\n}\n@media (forced-colors: active) {\n  :host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) {\n    --_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]) {\n  --sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1);\n}\n\n:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]) {\n  --sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3);\n}\n\n:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]) {\n  --sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative);\n}\n\n:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]) {\n  --sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative);\n}\n\n:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]), :is(:state(state-sticking),[state--state-sticking]), :is(:state(state-unsticking),[state--state-unsticking])),\n:is(:state(state-unsticky),[state--state-unsticky]))) {\n  --_sbb-sticky-bar-background-animation-duration: 0s;\n}\n\n:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]), :is(:state(state-unsticking),[state--state-unsticking])),\n:is(:state(state-sticking),[state--state-sticking]))) {\n  --sbb-sticky-bar-slide-vertically-animation-name: slide-in;\n}\n\n:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])) {\n  --sbb-sticky-bar-slide-vertically-animation-name: slide-out;\n}\n\n:host(:is(:not(:is(:state(initialized),[state--initialized])), :is(:state(state-unsticky),[state--state-unsticky]))) {\n  --sbb-sticky-bar-position: relative;\n}\n\n.sbb-sticky-bar__wrapper {\n  position: var(--sbb-sticky-bar-position);\n  inset-block-end: 0;\n  display: block;\n  z-index: var(--sbb-sticky-bar-z-index);\n  animation-name: var(--sbb-sticky-bar-slide-vertically-animation-name, none);\n  animation-duration: var(--sbb-sticky-bar-slide-vertically-animation-duration);\n  animation-timing-function: var(--sbb-sticky-bar-slide-vertically-animation-easing);\n  animation-delay: 0s;\n  animation-fill-mode: backwards;\n}\n.sbb-sticky-bar__wrapper::after, .sbb-sticky-bar__wrapper::before {\n  content: \"\";\n  inset: 0;\n  position: absolute;\n  display: block;\n  z-index: -1;\n}\n.sbb-sticky-bar__wrapper::before {\n  background-color: var(--sbb-container-background-color);\n  padding: 0 !important;\n}\n:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper::before {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n  margin-inline: auto;\n  width: 100%;\n}\n@media (min-width: calc(90rem)) {\n  :host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper::before {\n    max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n  }\n}\n.sbb-sticky-bar__wrapper::after {\n  background-color: var(--sbb-sticky-bar-sticky-background-color, transparent);\n  border-start-start-radius: var(--sbb-sticky-bar-border-radius);\n  border-start-end-radius: var(--sbb-sticky-bar-border-radius);\n  transition: background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);\n  border: var(--_sbb-sticky-bar-forced-colors-border, none);\n}\n\n.sbb-sticky-bar {\n  display: flex;\n  padding-block: var(--sbb-sticky-bar-padding-block);\n  margin-block-end: -1px;\n}\n.sbb-sticky-bar::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  border-start-start-radius: var(--sbb-sticky-bar-border-radius);\n  border-start-end-radius: var(--sbb-sticky-bar-border-radius);\n  transition: box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);\n  clip-path: polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)), 150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)), 150% 100%, -100% 100%);\n}\n:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar::before {\n  box-shadow: var(--sbb-box-shadow-level-11-soft);\n}\n:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));\n  margin-inline: auto;\n  width: 100%;\n}\n@media (min-width: calc(90rem)) {\n  :host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar {\n    max-width: var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)));\n  }\n}\n:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar {\n  padding-inline: var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs));\n}\n\n.sbb-sticky-bar__intersector {\n  height: 1px;\n}\n.sbb-sticky-bar__intersector::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);\n  background-color: var(--_sbb-sticky-bar-intersector-background-color, transparent);\n  pointer-events: none;\n  transition: background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);\n}\n\n@keyframes slide-in {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n@keyframes slide-out {\n  from {\n    transform: translateY(0%);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n";
+
+//#endregion
+//#region src/elements/container/sticky-bar/sticky-bar.component.ts
+/**
+* A container that sticks to the bottom of the page if slotted into `sbb-container`.
+*
+* @slot - Use the unnamed slot to add content to the sticky bar.
+* @cssprop [--sbb-sticky-bar-padding-block=var(--sbb-spacing-responsive-xs)] - Block padding of the sticky bar.
+* @cssprop [--sbb-sticky-bar-bottom-overlapping-height=0px] - Define an additional area where
+* the sticky bar overlaps the following content on the bottom.
+* This area becomes visible when the sticky bar transitions from sticky to the normal document flow.
+* @cssprop [--sbb-sticky-bar-z-index] - To specify a custom stack order,
+* the `z-index` can be overridden by defining this CSS variable.
+*/
+let SbbStickyBarElement = (() => {
+	let _classSuper = SbbUpdateSchedulerMixin(SbbElement);
+	let _color_decorators;
+	let _color_initializers = [];
+	let _color_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	return class SbbStickyBarElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_color_decorators = [property({ reflect: true })];
+			_size_decorators = [property({ reflect: 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, _size_decorators, {
+				kind: "accessor",
+				name: "size",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "size" in obj,
+					get: (obj) => obj.size,
+					set: (obj, value) => {
+						obj.size = value;
+					}
+				},
+				metadata: _metadata
+			}, _size_initializers, _size_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-sticky-bar";
+		}
+		static {
+			this.styles = [unsafeCSS(sticky_bar_default)];
+		}
+		static {
+			this.events = {
+				beforestick: "beforestick",
+				stick: "stick",
+				beforeunstick: "beforeunstick",
+				unstick: "unstick"
+			};
+		}
+		#color_accessor_storage;
+		/** Color of the container, like transparent, white etc. */
+		get color() {
+			return this.#color_accessor_storage;
+		}
+		set color(value) {
+			this.#color_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* Size of the sticky bar, either s (lean theme default) or m (standard theme default).
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		/** The state of the component. */
+		set _state(state) {
+			if (this._stateInternal) this.internals.states.delete(`state-${this._stateInternal}`);
+			this._stateInternal = state;
+			if (this._stateInternal) this.internals.states.add(`state-${this._stateInternal}`);
+		}
+		get _state() {
+			return this._stateInternal;
+		}
+		constructor() {
+			super();
+			this.#color_accessor_storage = __runInitializers(this, _color_initializers, null);
+			this.#size_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _size_initializers, null));
+			this._stateInternal = __runInitializers(this, _size_extraInitializers);
+			this._observer = new IntersectionController(this, {
+				target: null,
+				callback: (entries) => this._detectStickyState(entries[0])
+			});
+			this._state = "sticky";
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.slot ||= "sticky-bar";
+			this.startUpdate();
+			const container = this.closest("sbb-container");
+			if (container) this.toggleState("expanded", container.expanded);
+			if (this._intersector) this._observer.observe(this._intersector);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.internals.states.delete("initialized");
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			if (!this._intersector) {
+				this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector");
+				this._observer.observe(this._intersector);
+			}
+			this._observer.observe(this);
+		}
+		_isZeroAnimationDuration() {
+			return isZeroAnimationDuration(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
+		}
+		_detectStickyState(entry) {
+			this.internals.states.add("initialized");
+			const isSticky = !entry.isIntersecting && entry.boundingClientRect.top > 0;
+			const intersectorRect = this._intersector?.getBoundingClientRect();
+			const stickyBarRect = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+			this.toggleState("slide-vertically", isSticky && this._intersector && Math.abs(intersectorRect.bottom - stickyBarRect.bottom) > 30);
+			this.toggleState("sticking", isSticky);
+			this.completeUpdate();
+		}
+		/** Animates from normal content flow position to `position: sticky`. */
+		stick() {
+			if (this._state !== "unsticky" || !this._dispatchBeforeStickEvent()) return;
+			this._state = "sticking";
+			if (!this.matches?.(":is(:state(sticking),[state--sticking])") || this._isZeroAnimationDuration()) this._stickyCallback();
+		}
+		/** Animates `position: sticky` to normal content flow position. */
+		unstick() {
+			if (this._state !== "sticky" || !this._dispatchBeforeUnStickEvent()) return;
+			this._state = "unsticking";
+			if (!this.matches?.(":is(:state(sticking),[state--sticking])") || this._isZeroAnimationDuration()) this._unstickyCallback();
+		}
+		_stickyCallback() {
+			this._state = "sticky";
+			/** Emits when the animation from normal content flow to `position: sticky` ends. */
+			this.dispatchEvent(new Event("stick"));
+		}
+		_unstickyCallback() {
+			/** Emits when the animation from `position: sticky` to normal content flow ends. */
+			this.dispatchEvent(new Event("unstick"));
+			this._state = "unsticky";
+		}
+		_onAnimationEnd(event) {
+			if ((this._state === "sticking" || this._state === "sticky") && event.animationName === "slide-in") this._stickyCallback();
+			else if (this._state === "unsticking" && event.animationName === "slide-out") this._unstickyCallback();
+		}
+		_dispatchBeforeStickEvent() {
+			/** Emits when the animation from normal content flow to `position: sticky` starts. Can be canceled. */
+			return this.dispatchEvent(new Event("beforestick", { cancelable: true }));
+		}
+		_dispatchBeforeUnStickEvent() {
+			/** Emits when the animation from `position: sticky` to normal content flow starts. Can be canceled. */
+			return this.dispatchEvent(new Event("beforeunstick", { cancelable: true }));
+		}
+		render() {
+			return html`
+      <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
+        <div class="sbb-sticky-bar">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="sbb-sticky-bar__intersector"></div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbContainerElement, SbbStickyBarElement };

package/development/core/a11y/arrow-navigation.d.ts

@@ -29,4 +29,3 @@ export declare function isArrowKeyOrPageKeysPressed(event: KeyboardEvent): boole
  * or the index of the first one, if the current is the last in the list.
  */
 export declare function getNextElementIndex(event: KeyboardEvent | undefined, current: number, size: number): number;
-//# sourceMappingURL=arrow-navigation.d.ts.map

package/development/core/a11y/fake-event-detection.d.ts

@@ -2,4 +2,3 @@
 export declare function isFakeMousedownFromScreenReader(event: MouseEvent): boolean;
 /** Gets whether an event could be a faked `touchstart` event dispatched by a screen reader. */
 export declare function isFakeTouchstartFromScreenReader(event: TouchEvent): boolean;
-//# sourceMappingURL=fake-event-detection.d.ts.map

package/development/core/a11y/focus-trap-controller.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 export declare class SbbFocusTrapController implements ReactiveController {
     private _host;
     /**
@@ -32,4 +32,3 @@ export declare class SbbFocusTrapController implements ReactiveController {
     private _getLastTabbableElement;
     private _untrap;
 }
-//# sourceMappingURL=focus-trap-controller.d.ts.map

package/development/core/a11y/focus-visible-within-controller.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController } from 'lit';
-import { SbbElement } from '../base-elements/element.ts';
+import type { ReactiveController } from 'lit';
+import type { SbbElement } from '../base-elements/element.ts';
 export declare class SbbFocusVisibleWithinController implements ReactiveController {
     private _host;
     constructor(_host: SbbElement);
@@ -8,4 +8,3 @@ export declare class SbbFocusVisibleWithinController implements ReactiveControll
     hostConnected(): void;
     hostDisconnected(): void;
 }
-//# sourceMappingURL=focus-visible-within-controller.d.ts.map

package/development/core/a11y/focus.d.ts

@@ -1,2 +1 @@
 export declare const IS_FOCUSABLE_QUERY: string;
-//# sourceMappingURL=focus.d.ts.map

package/development/core/a11y/input-modality-detector.d.ts

@@ -55,4 +55,3 @@ declare class SbbInputModalityDetector {
 }
 export declare const sbbInputModalityDetector: SbbInputModalityDetector;
 export {};
-//# sourceMappingURL=input-modality-detector.d.ts.map

package/development/core/a11y/interactivity-checker.d.ts

@@ -49,4 +49,3 @@ export declare class InteractivityChecker {
     isFocusable(element: HTMLElement, config?: IsFocusableConfig): boolean;
 }
 export declare const interactivityChecker: InteractivityChecker;
-//# sourceMappingURL=interactivity-checker.d.ts.map

package/development/core/a11y/live-announcer.d.ts

@@ -59,4 +59,3 @@ export declare class SbbLiveAnnouncer {
     private _createLiveElement;
 }
 export declare const sbbLiveAnnouncer: SbbLiveAnnouncer;
-//# sourceMappingURL=live-announcer.d.ts.map

package/development/core/base-elements/action-base-element.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import { SbbElement } from './element.ts';
 export declare abstract class SbbActionBaseElement extends SbbElement {
     protected get maybeDisabled(): boolean | undefined;
@@ -11,4 +11,3 @@ export declare abstract class SbbActionBaseElement extends SbbElement {
     /** Default render method for button-like components. */
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=action-base-element.d.ts.map

package/development/core/base-elements/button-base-element.d.ts

@@ -1,6 +1,6 @@
-import { FormRestoreReason, FormRestoreState } from '../mixins/form-associated-mixin.ts';
+import { type FormRestoreReason, type FormRestoreState } from '../mixins/form-associated-mixin.ts';
 import { SbbActionBaseElement } from './action-base-element.ts';
-declare const SbbButtonLikeBaseElement_base: import('../mixins/constructor.ts').AbstractConstructor<import('../mixins/form-associated-mixin.ts').SbbFormAssociatedMixinType> & typeof SbbActionBaseElement;
+declare const SbbButtonLikeBaseElement_base: import("../mixins/constructor.ts").AbstractConstructor<import("../mixins/form-associated-mixin.ts").SbbFormAssociatedMixinType> & typeof SbbActionBaseElement;
 /** Button base class. */
 export declare abstract class SbbButtonLikeBaseElement extends SbbButtonLikeBaseElement_base {
     static readonly role: ElementInternals['role'];
@@ -62,4 +62,3 @@ export declare abstract class SbbButtonBaseElement extends SbbButtonLikeBaseElem
     protected updateFormValue(): void;
 }
 export {};
-//# sourceMappingURL=button-base-element.d.ts.map

package/development/core/base-elements/element.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, CSSResultOrNative, LitElement, PropertyDeclaration, PropertyValues, ReactiveController } from 'lit';
+import { type CSSResultGroup, type CSSResultOrNative, LitElement, type PropertyDeclaration, type PropertyValues, type ReactiveController } from 'lit';
 export interface SbbStateController {
     add(value: string): this;
     delete(value: string): boolean;
@@ -128,4 +128,3 @@ declare global {
         slottedchange: SbbSlottedChangeEvent;
     }
 }
-//# sourceMappingURL=element.d.ts.map

package/development/core/base-elements/link-base-element.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import { SbbLanguageController } from '../controllers/language-controller.ts';
 import { SbbActionBaseElement } from './action-base-element.ts';
 /** Link base class. */
@@ -29,4 +29,3 @@ export declare abstract class SbbLinkBaseElement extends SbbActionBaseElement {
     protected render(): TemplateResult;
     protected renderLink(renderContent: TemplateResult): TemplateResult;
 }
-//# sourceMappingURL=link-base-element.d.ts.map

package/development/core/base-elements/open-close-base-element.d.ts

@@ -36,4 +36,3 @@ declare global {
         close: Event;
     }
 }
-//# sourceMappingURL=open-close-base-element.d.ts.map

package/development/core/base-elements/selection-group-base-element.d.ts

@@ -1,7 +1,7 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
-import { SbbHorizontalFrom } from '../interfaces/types.ts';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+import type { SbbHorizontalFrom } from '../interfaces/types.ts';
 import { SbbElement } from './element.ts';
-declare const SbbSelectionGroupBaseElement_base: import('../mixins/constructor.ts').AbstractConstructor<import('../mixins/disabled-mixin.ts').SbbDisabledMixinType> & import('../mixins/constructor.ts').AbstractConstructor<import('../mixins/required-mixin.ts').SbbRequiredMixinType> & typeof SbbElement;
+declare const SbbSelectionGroupBaseElement_base: import("../mixins/constructor.ts").AbstractConstructor<import("../mixins/disabled-mixin.ts").SbbDisabledMixinType> & import("../mixins/constructor.ts").AbstractConstructor<import("../mixins/required-mixin.ts").SbbRequiredMixinType> & typeof SbbElement;
 /**
  * It can be used as a container for one or more `sbb-checkbox`.
  *
@@ -30,4 +30,3 @@ export declare abstract class SbbSelectionGroupBaseElement<T extends SbbElement>
     protected render(): TemplateResult;
 }
 export {};
-//# sourceMappingURL=selection-group-base-element.d.ts.map

package/development/core/config/config.d.ts

@@ -1,4 +1,4 @@
-import { DateAdapter } from '../datetime/date-adapter.ts';
+import type { DateAdapter } from '../datetime/date-adapter.ts';
 export interface SbbIconConfig {
     interceptor?: (parameters: {
         namespace: string;
@@ -37,4 +37,3 @@ export declare function mergeConfig(config: Partial<SbbConfig>): void;
 declare global {
     var sbbConfig: SbbConfig;
 }
-//# sourceMappingURL=config.d.ts.map

package/development/core/controllers/escapable-overlay-controller.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { SbbOpenCloseBaseElement } from '../base-elements/open-close-base-element.ts';
+import { type ReactiveController, type ReactiveControllerHost } from 'lit';
+import type { SbbOpenCloseBaseElement } from '../base-elements/open-close-base-element.ts';
 /**
  * Handles the stack of overlays and closes the last opened one when pressing Escape.
  */
@@ -11,4 +11,3 @@ export declare class SbbEscapableOverlayController implements ReactiveController
     connect(): void;
     disconnect(): void;
 }
-//# sourceMappingURL=escapable-overlay-controller.d.ts.map

package/development/core/controllers/id-reference-controller.d.ts

@@ -1,6 +1,7 @@
-import { LitElement, ReactiveController } from 'lit';
+import { type LitElement, type ReactiveController } from 'lit';
 /**
  * Tracks id changes in the DOM and calls component when matching with requestUpdate().
+ * @deprecated Use idReference decorator instead. This controller will be removed in a future release.
  */
 export declare class SbbIdReferenceController<T extends LitElement> implements ReactiveController {
     private _host;
@@ -18,4 +19,3 @@ export declare class SbbIdReferenceController<T extends LitElement> implements R
      */
     find(): HTMLElement | null;
 }
-//# sourceMappingURL=id-reference-controller.d.ts.map

package/development/core/controllers/inert-controller.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { SbbOpenCloseBaseElement } from '../base-elements/open-close-base-element.ts';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SbbOpenCloseBaseElement } from '../base-elements/open-close-base-element.ts';
 export declare class SbbInertController implements ReactiveController {
     private _host;
     private _inertElements;
@@ -24,4 +24,3 @@ export declare class SbbInertController implements ReactiveController {
     private _addAllInertAttributes;
     private _addInertAttributes;
 }
-//# sourceMappingURL=inert-controller.d.ts.map

package/development/core/controllers/language-controller.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type ReactiveController, type ReactiveControllerHost } from 'lit';
 /**
  * The LanguageController is a reactive controller that observes the "lang" attribute
  * of the <html> tag.
@@ -29,4 +29,3 @@ export declare class SbbLanguageController implements ReactiveController {
     hostDisconnected(): void;
     private _callHandlers;
 }
-//# sourceMappingURL=language-controller.d.ts.map

package/development/core/controllers/media-matchers-controller.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { SbbElement } from '../base-elements/element.ts';
+import { type ReactiveController, type ReactiveControllerHost } from 'lit';
+import type { SbbElement } from '../base-elements/element.ts';
 export declare const SbbMediaQueryForcedColors = "(forced-colors: active)";
 export declare const SbbMediaQueryDarkMode = "(prefers-color-scheme: dark)";
 export declare const SbbMediaQueryHover = "(any-hover: hover)";
@@ -62,4 +62,3 @@ export declare class SbbDarkModeController extends SbbMediaMatcherController {
     hostDisconnected(): void;
     matches(): boolean;
 }
-//# sourceMappingURL=media-matchers-controller.d.ts.map

package/development/core/controllers/overlay-position-controller.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { type ReactiveController, type ReactiveControllerHost } from 'lit';
 /**
  * Controller for managing overlays positioning. Also acts as a polyfill when native
  * CSS Anchor Positioning is not supported (enough).
@@ -57,4 +57,3 @@ export declare class SbbOverlayPositionController implements ReactiveController
      */
     private _readPositionsFromCss;
 }
-//# sourceMappingURL=overlay-position-controller.d.ts.map

package/development/core/controllers/property-watcher-controller.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+import { type LitElement, type ReactiveController, type ReactiveControllerHost } from 'lit';
 type PropertyWatcherHandler<T extends LitElement> = (reference: T) => void;
 export declare class SbbPropertyWatcherController<T extends LitElement> implements ReactiveController {
     private readonly _host;
@@ -13,4 +13,3 @@ export declare class SbbPropertyWatcherController<T extends LitElement> implemen
     disconnect(): void;
 }
 export {};
-//# sourceMappingURL=property-watcher-controller.d.ts.map

package/development/core/datetime/date-adapter.d.ts

@@ -180,4 +180,3 @@ export declare abstract class DateAdapter<T = any> {
      */
     clampDate(date: T, min?: T | null, max?: T | null): T;
 }
-//# sourceMappingURL=date-adapter.d.ts.map

package/development/core/datetime/native-date-adapter.d.ts

@@ -65,4 +65,3 @@ export declare class NativeDateAdapter extends DateAdapter<Date> {
     private _createDateWithOverflow;
 }
 export declare const defaultDateAdapter: NativeDateAdapter;
-//# sourceMappingURL=native-date-adapter.d.ts.map

package/development/core/datetime/temporal-date-adapter.d.ts

@@ -70,4 +70,3 @@ export declare class TemporalDateAdapter extends DateAdapter<Temporal.PlainDate>
      */
     private _range;
 }
-//# sourceMappingURL=temporal-date-adapter.d.ts.map

package/development/core/decorators/base.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveElement } from 'lit';
+import type { ReactiveElement } from 'lit';
 /**
  * Generates a public interface type that removes private and protected fields.
  * This allows accepting otherwise incompatible versions of the type (e.g. from
@@ -11,4 +11,3 @@ export interface PropertyDecorator {
     <C extends Interface<ReactiveElement>, V>(target: ClassAccessorDecoratorTarget<C, V>, context: ClassAccessorDecoratorContext<C, V>): ClassAccessorDecoratorResult<C, V>;
     <C extends Interface<ReactiveElement>, V>(target: (value: V) => void, context: ClassSetterDecoratorContext<C, V>): (this: C, value: V) => void;
 }
-//# sourceMappingURL=base.d.ts.map

package/development/core/decorators/force-type.d.ts

@@ -1,8 +1,7 @@
-import { ReactiveElement } from 'lit';
-import { Interface, PropertyDecorator } from './base.ts';
+import type { ReactiveElement } from 'lit';
+import type { Interface, PropertyDecorator } from './base.ts';
 /**
  * Decorator that forces the value of a property or getter/setter
  * to the defined type.
  */
 export declare const forceType: <C extends Interface<ReactiveElement>, V>(convert?: (v: unknown) => V) => PropertyDecorator;
-//# sourceMappingURL=force-type.d.ts.map