@sbb-esta/lyne-elements 5.1.0 → 5.2.0

package/development/calendar.pure.js

@@ -1604,17 +1604,17 @@ let SbbCalendarElement = (() => {
               ${this._weekdays.map((weekDay, index) => html`
                   <th class="sbb-calendar__table-header-cell">
                     ${this.multiple ? html`
-                          <sbb-calendar-weekday
-                            .value=${weekDay}
-                            @click=${() => {
+                            <sbb-calendar-weekday
+                              .value=${weekDay}
+                              @click=${() => {
 				const days = weeksForSelectMultipleWeekDays.filter((day) => day.weekDayValue === (index + 1) % 7);
 				this._selectMultipleDates(days);
 			}}
-                          ></sbb-calendar-weekday>
-                        ` : html`
-                          <span class="sbb-screen-reader-only">${weekDay.long}</span>
-                          <span aria-hidden="true">${weekDay.narrow}</span>
-                        `}
+                            ></sbb-calendar-weekday>
+                          ` : html`
+                            <span class="sbb-screen-reader-only">${weekDay.long}</span>
+                            <span aria-hidden="true">${weekDay.narrow}</span>
+                          `}
                   </th>
                 `)}
             </tr>
@@ -1625,23 +1625,23 @@ let SbbCalendarElement = (() => {
 				if (rowIndex === 0 && firstRowOffset) return html`
                   <tr>
                     ${this.weekNumbers ? html`
-                          <td class="sbb-calendar__table-header-cell-vertical">
-                            ${this.multiple ? html`
-                                  <sbb-calendar-weeknumber
-                                    .value=${weekNumbers[0]}
-                                    @click=${() => {
+                            <td class="sbb-calendar__table-header-cell-vertical">
+                              ${this.multiple ? html`
+                                      <sbb-calendar-weeknumber
+                                        .value=${weekNumbers[0]}
+                                        @click=${() => {
 					const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumbers[0]);
 					this._selectMultipleDates(days);
 				}}
-                                  ></sbb-calendar-weeknumber>
-                                ` : html`
-                                  <span class="sbb-screen-reader-only"
-                                    >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[0]}`}</span
-                                  >
-                                  <span aria-hidden="true">${weekNumbers[0]}</span>
-                                `}
-                          </td>
-                        ` : nothing}
+                                      ></sbb-calendar-weeknumber>
+                                    ` : html`
+                                      <span class="sbb-screen-reader-only"
+                                        >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[0]}`}</span
+                                      >
+                                      <span aria-hidden="true">${weekNumbers[0]}</span>
+                                    `}
+                            </td>
+                          ` : nothing}
                     ${[...Array(firstRowOffset).keys()].map(() => html`<td class="sbb-calendar__table-data"></td>`)}
                     ${this._createDayCells(week)}
                   </tr>
@@ -1649,23 +1649,23 @@ let SbbCalendarElement = (() => {
 				return html`
                 <tr>
                   ${this.weekNumbers ? html`
-                        <td class="sbb-calendar__table-header-cell-vertical">
-                          ${this.multiple ? html`
-                                <sbb-calendar-weeknumber
-                                  .value=${weekNumbers[rowIndex]}
-                                  @click=${() => {
+                          <td class="sbb-calendar__table-header-cell-vertical">
+                            ${this.multiple ? html`
+                                    <sbb-calendar-weeknumber
+                                      .value=${weekNumbers[rowIndex]}
+                                      @click=${() => {
 					const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumbers[rowIndex]);
 					this._selectMultipleDates(days);
 				}}
-                                ></sbb-calendar-weeknumber>
-                              ` : html`
-                                <span class="sbb-screen-reader-only"
-                                  >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[rowIndex]}`}</span
-                                >
-                                <span aria-hidden="true">${weekNumbers[rowIndex]}</span>
-                              `}
-                        </td>
-                      ` : nothing}
+                                    ></sbb-calendar-weeknumber>
+                                  ` : html`
+                                    <span class="sbb-screen-reader-only"
+                                      >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumbers[rowIndex]}`}</span
+                                    >
+                                    <span aria-hidden="true">${weekNumbers[rowIndex]}</span>
+                                  `}
+                          </td>
+                        ` : nothing}
                   ${this._createDayCells(week)}
                 </tr>
               `;
@@ -1692,30 +1692,30 @@ let SbbCalendarElement = (() => {
           @focusout=${(event) => this._handleTableBlur(event.relatedTarget)}
         >
           ${this.weekNumbers ? html`
-                <thead>
-                  <tr>
-                    <th class="sbb-calendar__table-data"></th>
-                    ${weekNumbers.map((weekNumber) => html`
-                        <th class="sbb-calendar__table-header-cell">
-                          ${this.multiple ? html`
-                                <sbb-calendar-weeknumber
-                                  .value=${weekNumber}
-                                  @click=${() => {
+                  <thead>
+                    <tr>
+                      <th class="sbb-calendar__table-data"></th>
+                      ${weekNumbers.map((weekNumber) => html`
+                          <th class="sbb-calendar__table-header-cell">
+                            ${this.multiple ? html`
+                                    <sbb-calendar-weeknumber
+                                      .value=${weekNumber}
+                                      @click=${() => {
 				const days = weeksForSelectMultipleWeekNumbers.filter((day) => day.weekValue === weekNumber);
 				this._selectMultipleDates(days);
 			}}
-                                ></sbb-calendar-weeknumber>
-                              ` : html`
-                                <span class="sbb-screen-reader-only"
-                                  >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumber}`}</span
-                                >
-                                <span aria-hidden="true">${weekNumber}</span>
-                              `}
-                        </th>
-                      `)}
-                  </tr>
-                </thead>
-              ` : nothing}
+                                    ></sbb-calendar-weeknumber>
+                                  ` : html`
+                                    <span class="sbb-screen-reader-only"
+                                      >${`${i18nCalendarWeekNumber[this._language.current]} ${weekNumber}`}</span
+                                    >
+                                    <span aria-hidden="true">${weekNumber}</span>
+                                  `}
+                          </th>
+                        `)}
+                    </tr>
+                  </thead>
+                ` : nothing}
           <tbody>
             ${weeks.map((week, rowIndex) => {
 				const weekday = this._weekdays[rowIndex];
@@ -1723,16 +1723,16 @@ let SbbCalendarElement = (() => {
                 <tr>
                   <td class="sbb-calendar__table-header-cell-vertical">
                     ${this.multiple ? html`
-                          <sbb-calendar-weekday
-                            .value=${weekday}
-                            @click=${() => this._selectMultipleDates(week)}
-                          >
-                            ${weekday.narrow}
-                          </sbb-calendar-weekday>
-                        ` : html`
-                          <span class="sbb-screen-reader-only">${weekday.long}</span>
-                          <span aria-hidden="true">${weekday.narrow}</span>
-                        `}
+                            <sbb-calendar-weekday
+                              .value=${weekday}
+                              @click=${() => this._selectMultipleDates(week)}
+                            >
+                              ${weekday.narrow}
+                            </sbb-calendar-weekday>
+                          ` : html`
+                            <span class="sbb-screen-reader-only">${weekday.long}</span>
+                            <span aria-hidden="true">${weekday.narrow}</span>
+                          `}
                   </td>
                   ${rowIndex < weekOffset ? html`<td class="sbb-calendar__table-data"></td>` : nothing}
                   ${this._createDayCells(week)}

package/development/carousel.pure.js

@@ -6,7 +6,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { property } from "lit/decorators.js";
 
 //#region src/elements/carousel/carousel-item/carousel-item.scss?inline
-var carousel_item_default = ":host {\n  display: flex;\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n::slotted(sbb-image) {\n  border-radius: unset;\n}\n";
+var carousel_item_default = ":host {\n  display: flex;\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n";
 
 //#endregion
 //#region src/elements/carousel/carousel-item/carousel-item.component.ts

package/development/clock.pure.js

@@ -69,10 +69,10 @@ let SbbClockElement = (() => {
 			this._moveHoursHandFn = () => this._moveHoursHand();
 			/** Callback function for minutes hand. */
 			this._moveMinutesHandFn = () => this._moveMinutesHand();
-			this._handlePageVisibilityChange = async () => {
+			this._handlePageVisibilityChange = () => {
 				if (this.now) return;
-				if (document.visibilityState === "hidden") await this._stopClock();
-				else await this._startClock();
+				if (document.visibilityState === "hidden") this._stopClock();
+				else this._startClock();
 			};
 		}
 		static {
@@ -122,7 +122,8 @@ let SbbClockElement = (() => {
 		}
 		willUpdate(changedProperties) {
 			super.willUpdate(changedProperties);
-			if (!isServer && changedProperties.has("now")) this._startOrConfigureClock();
+			if (isServer || !this.hasUpdated) return;
+			if (changedProperties.has("now")) this._startOrConfigureClock();
 		}
 		firstUpdated(changedProperties) {
 			super.firstUpdated(changedProperties);
@@ -136,26 +137,23 @@ let SbbClockElement = (() => {
 			this._removeEventListeners();
 			clearInterval(this._resetIntervalId);
 		}
-		async _startOrConfigureClock() {
+		_startOrConfigureClock() {
 			if (this.now) {
-				await this._stopClock();
+				this._stopClock();
 				this._resetSecondsHandAnimation();
 				this._setHandsStartingPosition();
-			} else await this._startClock();
+			} else this._startClock();
 		}
 		/** Starts the clock by defining the hands starting position then starting the animations. */
-		async _startClock() {
+		_startClock() {
 			this._clockHandHours?.addEventListener("animationend", this._moveHoursHandFn, ADD_EVENT_LISTENER_OPTIONS);
 			this._clockHandSeconds?.addEventListener("animationend", this._moveMinutesHandFn, ADD_EVENT_LISTENER_OPTIONS);
-			await new Promise((resolve) => setTimeout(() => {
-				this._setHandsStartingPosition();
-				this.style?.setProperty("--sbb-clock-animation-play-state", "running");
-				this._state = "running";
-				resolve();
-			}, INITIAL_TIMEOUT_DURATION));
+			this._setHandsStartingPosition();
+			this.style?.setProperty("--sbb-clock-animation-play-state", "running");
+			this._state = "running";
 		}
 		/** Stops the clock by removing all the animations. */
-		async _stopClock() {
+		_stopClock() {
 			clearInterval(this._handMovement);
 			this._removeSecondsAnimationStyles();
 			this._removeHoursAnimationStyles();
@@ -170,8 +168,8 @@ let SbbClockElement = (() => {
 		*/
 		async _resetClock() {
 			if (this._state !== "running") return;
-			await this._stopClock();
-			await this._startClock();
+			this._stopClock();
+			setTimeout(() => this._startClock(), INITIAL_TIMEOUT_DURATION);
 		}
 		/** Set the starting position for the three hands on the clock face. */
 		_setHandsStartingPosition() {

package/development/core.js

@@ -2696,8 +2696,8 @@ let SbbLinkBaseElement = (() => {
         ${renderContent}
       </a>
       ${opensInNewWindow ? html`<span id="sbb-link-new-window" hidden
-            >${i18nTargetOpensInNewWindow[this.language.current]}</span
-          >` : nothing}
+              >${i18nTargetOpensInNewWindow[this.language.current]}</span
+            >` : nothing}
     `;
 		}
 	};

package/development/date-input.pure.js

@@ -282,19 +282,27 @@ let SbbDateInputElement = (() => {
 		validate() {
 			super.validate();
 			if (!this.value) this._removeValidityErrors();
-			else if (!this._dateAdapter.isValid(this.valueAsDate)) this.setValidityFlag("badInput", i18nDateInvalid[this.language.current]);
-			else if (this._dateAdapter.isValid(this.min) && this._dateAdapter.compareDate(this.min, this.valueAsDate) > 0) this.setValidityFlag("rangeUnderflow", i18nDateMin(this._dateAdapter.format(this.min, { weekdayStyle: "none" }))[this.language.current]);
-			else if (this._dateAdapter.isValid(this.max) && this._dateAdapter.compareDate(this.valueAsDate, this.max) > 0) this.setValidityFlag("rangeOverflow", i18nDateMax(this._dateAdapter.format(this.max, { weekdayStyle: "none" }))[this.language.current]);
-			else if (this.dateFilter && !this.dateFilter(this.valueAsDate)) this.setValidityFlag("sbbDateFilter", i18nDateInvalid[this.language.current]);
-			else this._removeValidityErrors();
+			else if (!this._dateAdapter.isValid(this.valueAsDate)) {
+				this._removeValidityErrors("badInput");
+				this.setValidityFlag("badInput", i18nDateInvalid[this.language.current]);
+			} else if (this._dateAdapter.isValid(this.min) && this._dateAdapter.compareDate(this.min, this.valueAsDate) > 0) {
+				this._removeValidityErrors("rangeUnderflow");
+				this.setValidityFlag("rangeUnderflow", i18nDateMin(this._dateAdapter.format(this.min, { weekdayStyle: "none" }))[this.language.current]);
+			} else if (this._dateAdapter.isValid(this.max) && this._dateAdapter.compareDate(this.valueAsDate, this.max) > 0) {
+				this._removeValidityErrors("rangeOverflow");
+				this.setValidityFlag("rangeOverflow", i18nDateMax(this._dateAdapter.format(this.max, { weekdayStyle: "none" }))[this.language.current]);
+			} else if (this.dateFilter && !this.dateFilter(this.valueAsDate)) {
+				this._removeValidityErrors("sbbDateFilter");
+				this.setValidityFlag("sbbDateFilter", i18nDateInvalid[this.language.current]);
+			} else this._removeValidityErrors();
 		}
-		_removeValidityErrors() {
+		_removeValidityErrors(except) {
 			[
 				"badInput",
 				"rangeUnderflow",
 				"rangeOverflow",
 				"sbbDateFilter"
-			].forEach((f) => this.removeValidityFlag(f));
+			].filter((v) => v !== except).forEach((f) => this.removeValidityFlag(f));
 		}
 	};
 })();

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/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() {

package/development/paginator.pure.js

@@ -695,24 +695,24 @@ let SbbPaginatorElement = (() => {
 			return html`
       <ul class="sbb-paginator__pages">
         ${repeat(this._getVisiblePagesIndex(), (item) => item === "ellipsis" ? html`
-                  <li class="sbb-paginator__page--ellipsis">
-                    <span class="sbb-paginator__page--ellipsis-item">…</span>
-                  </li>
-                ` : html`
-                  <li class="sbb-paginator__page--number">
-                    <button
-                      ?data-selected=${this.pageIndex === item}
-                      ?disabled=${this.disabled}
-                      class="sbb-paginator__page--number-item"
-                      data-index=${item}
-                      aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : i18nPage[this.language.current]} ${item + 1}"
-                      aria-current=${this.pageIndex === item ? "true" : nothing}
-                      @click=${() => this._onPageNumberClick(item)}
-                    >
-                      <span class="sbb-paginator__page--number-item-label">${item + 1}</span>
-                    </button>
-                  </li>
-                `)}
+                <li class="sbb-paginator__page--ellipsis">
+                  <span class="sbb-paginator__page--ellipsis-item">…</span>
+                </li>
+              ` : html`
+                <li class="sbb-paginator__page--number">
+                  <button
+                    ?data-selected=${this.pageIndex === item}
+                    ?disabled=${this.disabled}
+                    class="sbb-paginator__page--number-item"
+                    data-index=${item}
+                    aria-label="${this.accessibilityPageLabel ? this.accessibilityPageLabel : i18nPage[this.language.current]} ${item + 1}"
+                    aria-current=${this.pageIndex === item ? "true" : nothing}
+                    @click=${() => this._onPageNumberClick(item)}
+                  >
+                    <span class="sbb-paginator__page--number-item-label">${item + 1}</span>
+                  </button>
+                </li>
+              `)}
       </ul>
     `;
 		}

package/development/signet.pure.js

@@ -90,23 +90,23 @@ let SbbSignetElement = (() => {
 			return html`
       <span class="sbb-signet__svg-container">
         ${this.protectiveRoom === "panel" ? html`
-              <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
-                <title .textContent=${this.accessibilityLabel}></title>
-                <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
-                <path
-                  id="sbb-signet__icon"
-                  d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
-                ></path>
-              </svg>
-            ` : html`
-              <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
-                <title .textContent=${this.accessibilityLabel}></title>
-                <path
-                  id="sbb-signet__icon"
-                  d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
-                ></path>
-              </svg>
-            `}
+                <svg focusable="false" viewBox="0 0 143 48" xmlns="http://www.w3.org/2000/svg">
+                  <title .textContent=${this.accessibilityLabel}></title>
+                  <path id="sbb-signet__panel" stroke-width="1" d="M1 47h141V1H1v46z"></path>
+                  <path
+                    id="sbb-signet__icon"
+                    d="M87 40h9.3L83.8 27.7h15.5V40h7.4V27.7h15.6L109.7 40h9.3l16-16-15.9-16h-9.3l12.5 12.3h-15.6V8h-7.4v12.3H83.8L96.3 8H87L71 24l16 16z"
+                  ></path>
+                </svg>
+              ` : html`
+                <svg focusable="false" viewBox="0 0 80 40" xmlns="http://www.w3.org/2000/svg">
+                  <title .textContent=${this.accessibilityLabel}></title>
+                  <path
+                    id="sbb-signet__icon"
+                    d="M20.0265 40H31.6821L16 24.6154H35.3907V40H44.6093V24.6154H64.106L48.4238 40H60.0795L80 20.0531L60.0795 0H48.4238L64.106 15.3846H44.6093V0H35.3907V15.3846H16L31.6821 0H20.0265L0 20.0531L20.0265 40Z"
+                  ></path>
+                </svg>
+              `}
       </span>
     `;
 		}

package/development/stepper/step/step.component.d.ts

@@ -58,8 +58,6 @@ export declare class SbbStepElement extends SbbElement {
     protected configure(stepperLoaded: boolean): void;
     /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
     private _handleClick;
-    private _isGoNextElement;
-    private _isGoPreviousElement;
     private _onStepElementResize;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;

package/development/stepper/stepper/stepper.component.d.ts

@@ -64,9 +64,9 @@ export declare class SbbStepperElement extends SbbElement {
     private _resizeObserverTimeout;
     private _mediaMatcher;
     constructor();
-    /** Selects the next step. */
+    /** Selects the next enabled step. If no available step is found, it simply exits. */
     next(): void;
-    /** Selects the previous step. */
+    /** Selects the previous enabled step. If no available step is found, it simply exits. */
     previous(): void;
     /** Resets the form in which the stepper is nested or every form of each step, if any. */
     reset(): void;