@sbb-esta/lyne-elements 5.1.0 → 5.3.0

package/development/download.pure.js

@@ -0,0 +1,436 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbSecondaryButtonStaticElement } from "./button.pure.js";
+import { SbbElement, SbbLanguageController, SbbLinkBaseElement, SbbPropertyWatcherController, defaultDateAdapter, forceType, i18nDownload, i18nNonAccessible, omitEmptyConverter, readConfig, screenReaderOnlyStyles } from "./core.js";
+import { SbbIconNameMixin } from "./icon.pure.js";
+
+//#region src/elements/download/download/download.scss?inline
+var download_default = ":host {\n  --sbb-card-background-color: var(--sbb-background-color-1);\n  --sbb-card-border-color: transparent;\n  --sbb-card-border-radius: var(--sbb-border-radius-4x);\n  --sbb-card-animation-easing: var(--sbb-animation-easing);\n  --sbb-card-border-style: solid;\n  --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);\n  --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);\n  --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);\n  --sbb-card-padding-block: var(--sbb-card-padding-block-default);\n  --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);\n  --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);\n  display: block;\n}\n\n:host(:where([color=white])) {\n  --sbb-card-background-color: var(--sbb-background-color-1);\n  --sbb-card-border-color: transparent;\n}\n\n:host(:where([color=milk])) {\n  --sbb-card-background-color: var(--sbb-background-color-3);\n  --sbb-card-border-color: transparent;\n}\n\n.sbb-download {\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  --sbb-card-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-1x)\n  );\n  display: block;\n  position: relative;\n  padding-inline: var(--sbb-card-padding-inline);\n  padding-block: var(--sbb-card-padding-block);\n  border-radius: var(--sbb-card-border-radius);\n  background-color: var(--sbb-card-background-color);\n  box-shadow: none;\n  transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n  color: var(--sbb-card-color);\n}\n.sbb-download::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: transparent;\n  border: var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);\n  border-radius: var(--sbb-card-border-radius);\n  pointer-events: none;\n}\n@media (forced-colors: active) {\n  .sbb-download {\n    --sbb-title-color: var(--sbb-card-color);\n  }\n}\n.sbb-download {\n  display: flex;\n  align-items: center;\n  gap: var(--sbb-download-gap);\n  text-decoration: none;\n  translate: 0 var(--sbb-card-hover-shift, 0);\n  transition: box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing), translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);\n}\n\n.sbb-download: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}\n\n@media (any-hover: hover) {\n  :host(:hover) .sbb-download {\n    --sbb-card-hover-shift: -0.125rem;\n    box-shadow: var(--sbb-box-shadow-level-9-hard);\n  }\n}\n@media (any-hover: hover) and (forced-colors: active) {\n  :host(:hover) .sbb-download {\n    --sbb-card-border-color: Highlight;\n  }\n}\n\n.sbb-download__icon {\n  flex: 0 0 auto;\n}\n\n.sbb-download__content {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.sbb-download__label {\n  overflow-wrap: break-word;\n  font-weight: bold;\n  color: var(--sbb-download-label-color);\n}\n\n.sbb-download__custom-content,\n.sbb-download__info {\n  line-height: var(--sbb-typo-line-height-text);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  font-size: var(--sbb-text-font-size-xxs);\n  color: var(--sbb-download-info-color);\n}\n\n.sbb-download__button {\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n";
+
+//#endregion
+//#region src/elements/download/download/download.component.ts
+const fileExtensionIcons = /* @__PURE__ */ new Map([
+	["pdf", "document-pdf-small"],
+	["xls", "document-xls-small"],
+	["xlsx", "document-xls-small"],
+	["ppt", "document-ppt-small"],
+	["pptx", "document-ppt-small"],
+	["doc", "document-doc-small"],
+	["docx", "document-doc-small"],
+	["zip", "document-zip-small"],
+	["jpg", "document-image-small"],
+	["jpeg", "document-image-small"],
+	["png", "document-image-small"],
+	["gif", "document-image-small"],
+	["svg", "document-image-small"],
+	["webp", "document-image-small"]
+]);
+/**
+* It displays a downloadable document, styled as a card.
+*
+* Inherits link properties from `SbbLinkBaseElement`: `href`, `target`, `rel`
+* and `accessibilityLabel`. The download behavior is always enabled.
+*
+* @slot - Use the unnamed slot to add custom content. Optional.
+* @slot info - Slot used to render a `sbb-download-info`. A `sbb-download-info`
+* placed in the unnamed slot is automatically moved to this slot. Optional.
+* @slot icon - Use this slot to display a custom icon, by providing a
+* `sbb-icon` component. Optional.
+*/
+let SbbDownloadElement = (() => {
+	let _classSuper = SbbIconNameMixin(SbbLinkBaseElement);
+	let _instanceExtraInitializers = [];
+	let _color_decorators;
+	let _color_initializers = [];
+	let _color_extraInitializers = [];
+	let _label_decorators;
+	let _label_initializers = [];
+	let _label_extraInitializers = [];
+	let _set_download_decorators;
+	return class SbbDownloadElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.#color_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _color_initializers, "white"));
+			this.#label_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _label_initializers, ""));
+			this._languageController = (__runInitializers(this, _label_extraInitializers), new SbbLanguageController(this));
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_color_decorators = [property({ reflect: true })];
+			_label_decorators = [forceType(), property({ converter: omitEmptyConverter })];
+			_set_download_decorators = [property({
+				type: Boolean,
+				reflect: false
+			})];
+			__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, _label_decorators, {
+				kind: "accessor",
+				name: "label",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "label" in obj,
+					get: (obj) => obj.label,
+					set: (obj, value) => {
+						obj.label = value;
+					}
+				},
+				metadata: _metadata
+			}, _label_initializers, _label_extraInitializers);
+			__esDecorate(this, null, _set_download_decorators, {
+				kind: "setter",
+				name: "download",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "download" in obj,
+					set: (obj, value) => {
+						obj.download = value;
+					}
+				},
+				metadata: _metadata
+			}, null, _instanceExtraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-download";
+		}
+		static {
+			this.elementDependencies = [SbbSecondaryButtonStaticElement];
+		}
+		static {
+			this.styles = [screenReaderOnlyStyles, unsafeCSS(download_default)];
+		}
+		#color_accessor_storage;
+		/** Option to set the component's background color. */
+		get color() {
+			return this.#color_accessor_storage;
+		}
+		set color(value) {
+			this.#color_accessor_storage = value;
+		}
+		#label_accessor_storage;
+		/** The label of the download. Defaults to the file name of the `href`. */
+		get label() {
+			return this.#label_accessor_storage;
+		}
+		set label(value) {
+			this.#label_accessor_storage = value;
+		}
+		/**
+		* The download behavior is always enabled and handled internally, therefore
+		* this property cannot be disabled and is not reflected to the host element.
+		* @default true
+		*/
+		set download(_value) {}
+		get download() {
+			return true;
+		}
+		/** The file name extracted from the `href` (e.g. `report.pdf`). */
+		get fileName() {
+			return this.href.split(/[?#]/)[0].split("/").filter(Boolean).at(-1) ?? "";
+		}
+		/** The lower-cased file extension extracted from the `href` (e.g. `pdf`), if any. */
+		get fileExtension() {
+			const fileName = this.fileName;
+			return fileName.includes(".") ? fileName.split(".").at(-1)?.toLowerCase() ?? "" : "";
+		}
+		/**
+		* Provides a default icon based on the `href` extension, if no icon name is
+		* set.
+		*/
+		renderIconName() {
+			if (this.iconName) return this.iconName;
+			else if (!this.href) return "";
+			const extension = this.fileExtension;
+			return extension && fileExtensionIcons.get(extension) || "document-standard-small";
+		}
+		firstUpdated(_changedProperties) {
+			super.firstUpdated(_changedProperties);
+			this._updateDescribedByElements();
+		}
+		_updateDescribedByElements() {
+			const link = this.shadowRoot?.querySelector?.("a");
+			if (link) {
+				const customContentElement = this.shadowRoot?.querySelector?.(".sbb-download__custom-content");
+				link.ariaDescribedByElements = [...customContentElement ? [customContentElement] : [], ...this._downloadInfoElements()];
+			}
+		}
+		_downloadInfoElements() {
+			return this.querySelectorAll?.("sbb-download-info") ?? [];
+		}
+		renderTemplate() {
+			return html`
+      ${this.renderIconSlot("sbb-download__icon")}
+      <span class="sbb-download__content">
+        <span class="sbb-download__label">${this.label || this.fileName}</span>
+        <span class="sbb-screen-reader-only">
+          ${!this._downloadInfoElements().length ? html`&nbsp;${this.fileExtension}` : nothing}&nbsp;${i18nDownload[this._languageController.current]}
+        </span>
+        <span class="sbb-download__custom-content" aria-hidden="true">
+          <slot></slot>
+        </span>
+        <span class="sbb-download__info">
+          <slot name="info" @slotchange="${() => this._updateDescribedByElements()}"></slot>
+        </span>
+      </span>
+      <sbb-secondary-button-static
+        class="sbb-download__button"
+        icon-name="download-small"
+      ></sbb-secondary-button-static>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/download/download-info/download-info.scss?inline
+var download_info_default = ":host {\n  display: block;\n}\n";
+
+//#endregion
+//#region src/elements/download/download-info/download-info.component.ts
+const fileSizeSuffixes = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB"
+];
+/**
+* It displays metadata of a document; used within a `sbb-download`.
+*/
+let SbbDownloadInfoElement = (() => {
+	let _classSuper = SbbElement;
+	let _type_decorators;
+	let _type_initializers = [];
+	let _type_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	let _changed_decorators;
+	let _changed_initializers = [];
+	let _changed_extraInitializers = [];
+	let _nonAccessible_decorators;
+	let _nonAccessible_initializers = [];
+	let _nonAccessible_extraInitializers = [];
+	return class SbbDownloadInfoElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_type_decorators = [forceType(), property({ converter: omitEmptyConverter })];
+			_size_decorators = [forceType(), property({ converter: omitEmptyConverter })];
+			_changed_decorators = [forceType(), property({ converter: omitEmptyConverter })];
+			_nonAccessible_decorators = [forceType(), property({
+				attribute: "non-accessible",
+				type: Boolean
+			})];
+			__esDecorate(this, null, _type_decorators, {
+				kind: "accessor",
+				name: "type",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "type" in obj,
+					get: (obj) => obj.type,
+					set: (obj, value) => {
+						obj.type = value;
+					}
+				},
+				metadata: _metadata
+			}, _type_initializers, _type_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);
+			__esDecorate(this, null, _changed_decorators, {
+				kind: "accessor",
+				name: "changed",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "changed" in obj,
+					get: (obj) => obj.changed,
+					set: (obj, value) => {
+						obj.changed = value;
+					}
+				},
+				metadata: _metadata
+			}, _changed_initializers, _changed_extraInitializers);
+			__esDecorate(this, null, _nonAccessible_decorators, {
+				kind: "accessor",
+				name: "nonAccessible",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "nonAccessible" in obj,
+					get: (obj) => obj.nonAccessible,
+					set: (obj, value) => {
+						obj.nonAccessible = value;
+					}
+				},
+				metadata: _metadata
+			}, _nonAccessible_initializers, _nonAccessible_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-download-info";
+		}
+		static {
+			this.styles = [unsafeCSS(download_info_default)];
+		}
+		#type_accessor_storage;
+		/**
+		* The type of the document (e.g. `PDF`). Falls back to the extension of the
+		* parent `sbb-download`.
+		*/
+		get type() {
+			return this.#type_accessor_storage;
+		}
+		set type(value) {
+			this.#type_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* The size of the document. If the value contains non-numeric characters it
+		* is rendered as is, otherwise it is interpreted as a number of bytes and
+		* shortened to the closest unit.
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		#changed_accessor_storage;
+		/** The date of the latest change of the document, as an ISO 8601 string. */
+		get changed() {
+			return this.#changed_accessor_storage;
+		}
+		set changed(value) {
+			this.#changed_accessor_storage = value;
+		}
+		#nonAccessible_accessor_storage;
+		/** Whether the document is not accessible. */
+		get nonAccessible() {
+			return this.#nonAccessible_accessor_storage;
+		}
+		set nonAccessible(value) {
+			this.#nonAccessible_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.#type_accessor_storage = __runInitializers(this, _type_initializers, "");
+			this.#size_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _size_initializers, ""));
+			this.#changed_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _changed_initializers, ""));
+			this.#nonAccessible_accessor_storage = (__runInitializers(this, _changed_extraInitializers), __runInitializers(this, _nonAccessible_initializers, false));
+			this._language = (__runInitializers(this, _nonAccessible_extraInitializers), new SbbLanguageController(this));
+			this._dateAdapter = readConfig().datetime?.dateAdapter ?? defaultDateAdapter;
+			this._resolvedType = "";
+			this._typeRedundant = false;
+			this._resolvedSize = "";
+			this._resolvedChanged = "";
+			/** @internal **/
+			this.internals.ariaHidden = "true";
+			this.addController(new SbbPropertyWatcherController(this, () => this.closest("sbb-download"), {
+				href: () => this.requestUpdate(),
+				label: () => this.requestUpdate()
+			}));
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.slot ||= "info";
+			this.requestUpdate();
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			this._resolvedType = this._resolveType();
+			this._typeRedundant = this._isTypeRedundant();
+			if (changedProperties.has("size")) this._resolvedSize = this._resolveSize();
+			if (changedProperties.has("changed")) this._resolvedChanged = this._resolveChanged();
+		}
+		/** Resolves the type, falling back to the extension of the parent download's
+		* href.
+		*/
+		_resolveType() {
+			return this.type || (this.closest?.("sbb-download")?.fileExtension.toUpperCase() ?? "");
+		}
+		/**
+		* Whether the type is already conveyed by the parent download's label.
+		* When the parent download has no explicit `label`, it falls back to the file
+		* name (e.g. `some-file.pdf`), which already includes the extension. In that
+		* case the type is redundant for assistive technology.
+		*/
+		_isTypeRedundant() {
+			const parent = this.closest?.("sbb-download");
+			return !!parent && !parent.label && !!parent.fileExtension;
+		}
+		/**
+		* Formats the size, shortening a pure number of bytes to the closest unit.
+		*/
+		_resolveSize() {
+			const size = this.size.trim();
+			if (!size || !/^\d+$/.test(size)) return size;
+			const bytes = Number(size);
+			if (bytes <= 0) return `0 ${fileSizeSuffixes[0]}`;
+			const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), fileSizeSuffixes.length - 1);
+			return `${(bytes / 1024 ** i).toFixed(0)} ${fileSizeSuffixes[i]}`;
+		}
+		/**
+		* Formats the ISO 8601 change date using the configured date adapter, or
+		* renders it as is if invalid.
+		*/
+		_resolveChanged() {
+			if (!this.changed) return "";
+			const date = this._dateAdapter.deserialize(this.changed);
+			if (!this._dateAdapter.isValid(date)) return this.changed;
+			return this._dateAdapter.format(date, { weekdayStyle: "none" });
+		}
+		render() {
+			const separator = ", ";
+			const items = [
+				this._resolvedType,
+				this._resolvedSize,
+				this.nonAccessible ? i18nNonAccessible[this._language.current] : "",
+				this._resolvedChanged
+			].filter(Boolean);
+			this.internals.ariaLabel = items.slice(this._typeRedundant && this._resolvedType ? 1 : 0).join(separator);
+			return html`${items.join(separator)}`;
+		}
+	};
+})();
+
+//#endregion
+export { SbbDownloadElement, SbbDownloadInfoElement };

package/development/expansion-panel.pure.js

@@ -111,12 +111,12 @@ var SbbExpansionPanelHeaderElement = class extends SbbDisabledTabIndexActionMixi
         <slot></slot>
       </span>
       ${!this.disabled ? html`<span class="sbb-expansion-panel-header__toggle">
-            <sbb-icon
-              name="chevron-small-down-medium"
-              class="sbb-expansion-panel-header__toggle-icon"
-            >
-            </sbb-icon>
-          </span>` : nothing}
+              <sbb-icon
+                name="chevron-small-down-medium"
+                class="sbb-expansion-panel-header__toggle-icon"
+              >
+              </sbb-icon>
+            </span>` : nothing}
     `;
 	}
 };

package/development/file-selector.pure.js

@@ -279,13 +279,14 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
 				if (fileInput.files) this.createFileList(fileInput.files);
 				forwardEvent(event, this);
 			}
-			createFileList(files) {
+			createFileList(files, emitNativeEvents = false) {
 				const fileArray = Array.from(files);
 				if (!this.multiple && files.length > 1 || this.accept && fileArray.some((file) => !this.accept.split(",").some((a) => file.name.endsWith(a.trim())))) return;
 				if (!this.multiple || this.multipleMode !== "persistent" || this.files.length === 0) this.files = fileArray;
 				else this.files = fileArray.filter((newFile) => this.files.findIndex((oldFile) => this._checkFileEquality(newFile, oldFile)) === -1).concat(this.files);
 				this._updateA11yLiveRegion();
 				this._dispatchFileChangedEvent();
+				if (emitNativeEvents) this._dispatchNativeEvents();
 			}
 			getButtonLabel() {
 				return this.multiple ? i18nFileSelectorButtonLabelMultiple[this.language.current] : i18nFileSelectorButtonLabel[this.language.current];
@@ -293,6 +294,10 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
 			_removeFile(file) {
 				this.files = this.files.filter((f) => !this._checkFileEquality(file, f));
 				this._updateA11yLiveRegion();
+				this._dispatchNativeEvents();
+				this._dispatchFileChangedEvent();
+			}
+			_dispatchNativeEvents() {
 				/** The input event fires when the value has been changed as a direct result of a user action. */
 				this.dispatchEvent(new InputEvent("input", {
 					bubbles: true,
@@ -304,7 +309,6 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
 				* for each alteration to an element's value.
 				*/
 				this.dispatchEvent(new Event("change", { bubbles: true }));
-				this._dispatchFileChangedEvent();
 			}
 			_dispatchFileChangedEvent() {
 				const filechanged = this.files;
@@ -367,7 +371,7 @@ const SbbFileSelectorCommonElementMixin = (superclass) => {
 				if (!this.disabled && !this.formDisabled) {
 					this._setDragState();
 					this._blockEvent(event);
-					this.createFileList(event.dataTransfer.files);
+					this.createFileList(event.dataTransfer.files, true);
 				}
 			}
 			_blockEvent(event) {

package/development/flip-card.pure.js

@@ -232,7 +232,7 @@ let SbbFlipCardElement = (() => {
 		}
 		/** Returns the card details content element wrapper. */
 		get _detailsContentElement() {
-			return this.details.shadowRoot.firstElementChild;
+			return this.details?.shadowRoot?.querySelector(".sbb-flip-card-details") ?? null;
 		}
 		/** Whether the flip card is flipped. */
 		get isFlipped() {
@@ -268,10 +268,11 @@ let SbbFlipCardElement = (() => {
 		/** Toggles the state of the sbb-flip-card. */
 		toggle() {
 			this._flipped = !this._flipped;
-			if (this._flipped) {
+			const detailsContentElement = this._detailsContentElement;
+			if (this._flipped && detailsContentElement) {
 				this._setCardDetailsHeight();
-				this._cardDetailsResizeObserver.observe(this._detailsContentElement);
-			} else this._cardDetailsResizeObserver.unobserve(this._detailsContentElement);
+				this._cardDetailsResizeObserver.observe(detailsContentElement);
+			} else if (detailsContentElement) this._cardDetailsResizeObserver.unobserve(detailsContentElement);
 			this.toggleState("flipped", this._flipped);
 			ɵstateController(this.details)?.toggle("flipped", this._flipped);
 			this.summary.inert = this._flipped;

package/development/image.pure.js

@@ -715,14 +715,14 @@ let SbbImageElement = (() => {
 			return html`
       <div class="sbb-image__wrapper">
         ${!this.skipLqip ? html`<img
-              alt=""
-              class="sbb-image__blurred"
-              src=${imageUrlLQIP}
-              width="1000"
-              height="562"
-              loading=${this.loading ?? nothing}
-              decoding=${this.decoding ?? nothing}
-            />` : nothing}
+                alt=""
+                class="sbb-image__blurred"
+                src=${imageUrlLQIP}
+                width="1000"
+                height="562"
+                loading=${this.loading ?? nothing}
+                decoding=${this.decoding ?? nothing}
+              />` : nothing}
 
         <picture>
           <!-- render picture element sources -->

package/development/map-container.pure.js

@@ -159,14 +159,14 @@ let SbbMapContainerElement = (() => {
         <slot></slot>
 
         ${!this.hideScrollUpButton ? html`<sbb-accent-button
-              class="sbb-map-container__sidebar-button"
-              size="l"
-              icon-name="location-pin-map-small"
-              @click=${() => this._onScrollButtonClick()}
-              ?inert=${!this._scrollUpButtonVisible}
-            >
-              ${i18nMapContainerButtonLabel[this._language.current]}
-            </sbb-accent-button>` : nothing}
+                class="sbb-map-container__sidebar-button"
+                size="l"
+                icon-name="location-pin-map-small"
+                @click=${() => this._onScrollButtonClick()}
+                ?inert=${!this._scrollUpButtonVisible}
+              >
+                ${i18nMapContainerButtonLabel[this._language.current]}
+              </sbb-accent-button>` : nothing}
       </div>
     `;
 		}

package/development/mini-calendar.pure.js

@@ -5,7 +5,7 @@ import { SbbButtonBaseElement, SbbElement, SbbPropertyWatcherController, default
 import { MutationController } from "@lit-labs/observers/mutation-controller.js";
 
 //#region src/elements/mini-calendar/mini-calendar-day/mini-calendar-day.scss?inline
-var mini_calendar_day_default = ":host {\n  --sbb-mini-calendar-day-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n  height: var(--sbb-mini-calendar-day-dimensions);\n  width: var(--sbb-mini-calendar-day-dimensions);\n  margin: 0.0625rem;\n  border-radius: var(--sbb-border-radius-infinity);\n  color: var(--sbb-color-storm);\n  color: light-dark(var(--sbb-color-storm), var(--sbb-color-smoke));\n  background-color: currentcolor;\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    scale: var(--sbb-mini-calendar-day-scale);\n    transition: scale var(--sbb-mini-calendar-day-animation-easing) var(--sbb-mini-calendar-day-animation-duration);\n  }\n}\n\n:host(: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: 0.125rem;\n}\n\n:host([color=charcoal]) {\n  color: var(--sbb-background-color-2-inverted);\n}\n\n:host([color=cloud]) {\n  color: var(--sbb-background-color-4-inverted);\n}\n\n:host([color=orange]) {\n  color: var(--sbb-color-orange-light);\n}\n\n:host([color=red]) {\n  color: var(--sbb-color-error);\n}\n\n:host([color=sky]) {\n  color: var(--sbb-color-sky-light);\n}\n\n:host([marker=circle]) {\n  background-color: var(--sbb-color-1-inverted);\n  border: 0.0625rem solid currentcolor;\n}\n\n:host([marker=target]) {\n  background: radial-gradient(circle, currentcolor 0%, currentcolor 25%, var(--sbb-color-1-inverted) 25%, var(--sbb-color-1-inverted) 50%, currentcolor 50%, currentcolor 100%);\n}\n\n:host([marker=slash]) {\n  position: relative;\n}\n:host([marker=slash])::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);\n}\n\n:host([marker=cross]) {\n  position: relative;\n}\n:host([marker=cross])::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);\n}\n";
+var mini_calendar_day_default = ":host {\n  --sbb-mini-calendar-day-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  display: block;\n  height: var(--sbb-mini-calendar-day-dimensions);\n  width: var(--sbb-mini-calendar-day-dimensions);\n  margin: 0.0625rem;\n  border-radius: var(--sbb-border-radius-infinity);\n  color: var(--sbb-color-storm);\n  color: light-dark(var(--sbb-color-storm), var(--sbb-color-smoke));\n  background-color: currentcolor;\n}\n\n@media (any-hover: hover) {\n  :host(:hover) {\n    scale: var(--sbb-mini-calendar-day-scale);\n    transition: scale var(--sbb-mini-calendar-day-animation-easing) var(--sbb-mini-calendar-day-animation-duration);\n  }\n}\n\n:host(: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: 0.125rem;\n}\n\n:host([color=charcoal]) {\n  color: var(--sbb-background-color-2-inverted);\n}\n\n:host([color=cloud]) {\n  color: var(--sbb-background-color-4);\n}\n\n:host([color=orange]) {\n  color: var(--sbb-color-orange-light);\n}\n\n:host([color=red]) {\n  color: var(--sbb-color-error);\n}\n\n:host([color=sky]) {\n  color: var(--sbb-color-sky-light);\n}\n\n:host([marker=circle]) {\n  background-color: var(--sbb-color-1-inverted);\n  border: 0.0625rem solid currentcolor;\n}\n\n:host([marker=target]) {\n  background: radial-gradient(circle, currentcolor 0%, currentcolor 25%, var(--sbb-color-1-inverted) 25%, var(--sbb-color-1-inverted) 50%, currentcolor 50%, currentcolor 100%);\n}\n\n:host([marker=slash]) {\n  position: relative;\n}\n:host([marker=slash])::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);\n}\n\n:host([marker=cross]) {\n  position: relative;\n}\n:host([marker=cross])::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: linear-gradient(-45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--sbb-color-1-inverted) 45%, var(--sbb-color-1-inverted) 55%, transparent 55%);\n}\n";
 
 //#endregion
 //#region src/elements/mini-calendar/mini-calendar-day/mini-calendar-day.component.ts

package/development/notification.pure.js

@@ -240,15 +240,18 @@ let SbbNotificationElement = (() => {
           </span>
 
           ${!this.readOnly ? html`
-                <sbb-divider class="sbb-notification__divider" orientation="vertical"></sbb-divider>
-                <sbb-secondary-button
-                  size=${this.size || nothing}
-                  icon-name="cross-small"
-                  @click=${() => this.close()}
-                  aria-label=${i18nCloseNotification[this._language.current]}
-                  class="sbb-notification__close"
-                ></sbb-secondary-button>
-              ` : nothing}
+                  <sbb-divider
+                    class="sbb-notification__divider"
+                    orientation="vertical"
+                  ></sbb-divider>
+                  <sbb-secondary-button
+                    size=${this.size || nothing}
+                    icon-name="cross-small"
+                    @click=${() => this.close()}
+                    aria-label=${i18nCloseNotification[this._language.current]}
+                    class="sbb-notification__close"
+                  ></sbb-secondary-button>
+                ` : nothing}
         </div>
       </div>
     `;

package/development/option.pure.js

@@ -129,11 +129,11 @@ let SbbOptgroupBaseElement = (() => {
 		render() {
 			return html`
       ${this.label ? html`
-            <div class="sbb-optgroup__label" aria-hidden="true">
-              <div class="sbb-optgroup__icon-space"></div>
-              <span>${this.label}</span>
-            </div>
-          ` : nothing}
+              <div class="sbb-optgroup__label" aria-hidden="true">
+                <div class="sbb-optgroup__icon-space"></div>
+                <span>${this.label}</span>
+              </div>
+            ` : nothing}
       <slot @slotchange=${this._handleSlotchange}></slot>
     `;
 		}
@@ -698,12 +698,12 @@ var SbbOptionElement = class extends SbbOptionBaseElement {
 
       <!-- Checkbox -->
       ${this._isMultiple() ? html`
-            <sbb-visual-checkbox
-              ?checked=${this.selected}
-              ?disabled=${this.disabled || this.disabledFromGroup}
-              ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
-            ></sbb-visual-checkbox>
-          ` : nothing}
+              <sbb-visual-checkbox
+                ?checked=${this.selected}
+                ?disabled=${this.disabled || this.disabledFromGroup}
+                ?negative=${this.matches?.(":is(:state(negative),[state--negative])")}
+              ></sbb-visual-checkbox>
+            ` : nothing}
     `;
 	}
 	renderLabel() {