@sbb-esta/lyne-elements 5.0.1 → 5.1.0

package/development/datepicker.pure.js

@@ -1,6 +1,552 @@
-import { n as SbbDatepickerButtonBase, t as SbbDatepickerButton } from "./datepicker-button-BvBQB6Sv.js";
-import { SbbDatepickerNextDayElement } from "./datepicker/datepicker-next-day/datepicker-next-day.component.js";
-import { SbbDatepickerPreviousDayElement } from "./datepicker/datepicker-previous-day/datepicker-previous-day.component.js";
-import { SbbDatepickerToggleElement } from "./datepicker/datepicker-toggle/datepicker-toggle.component.js";
-import { SbbDatepickerElement } from "./datepicker/datepicker/datepicker.component.js";
-export { SbbDatepickerButton, SbbDatepickerButtonBase, SbbDatepickerElement, SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement, SbbDatepickerToggleElement };
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, isServer, nothing, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import "lit/static-html.js";
+import { SbbButtonBaseElement, SbbLanguageController, SbbMediaMatcherController, SbbMediaQueryBreakpointLargeAndAbove, SbbNegativeMixin, SbbUpdateSchedulerMixin, defaultDateAdapter, forceType, i18nDateChangedTo, i18nNextDay, i18nPreviousDay, i18nSelectNextDay, i18nSelectPreviousDay, i18nShowCalendar, i18nToday, idReference, readConfig, screenReaderOnlyStyles } from "./core.js";
+import { SbbIconElement } from "./icon.pure.js";
+import { SbbDateInputElement } from "./date-input.pure.js";
+import { SbbCalendarElement } from "./calendar.pure.js";
+import { SbbPopoverBaseElement } from "./popover.pure.js";
+
+//#region src/elements/button/common/accent-button.scss?inline
+var accent_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);\n  --sbb-button-color-active-border: var(--sbb-border-color-1);\n  --sbb-button-color-active-text: var(--sbb-color-cloud);\n  --sbb-button-color-active-text: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));\n  --sbb-button-color-default-background: var(--sbb-background-color-3-inverted);\n  --sbb-button-color-default-border: var(--sbb-border-color-3);\n  --sbb-button-color-default-text: var(--sbb-color-1-inverted);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3-inverted);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3);\n  --sbb-button-color-hover-text: var(--sbb-color-3-inverted);\n  --sbb-button-color-loading-border: var(--sbb-color-iron);\n  --sbb-button-color-loading-border: light-dark(var(--sbb-color-iron), var(--sbb-color-silver));\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-1-negative-inverted);\n  --sbb-button-color-active-border: var(--sbb-border-color-1-negative);\n  --sbb-button-color-active-text: var(--sbb-color-anthracite);\n  --sbb-button-color-default-background: var(--sbb-background-color-3-negative-inverted);\n  --sbb-button-color-default-border: var(--sbb-border-color-3-negative);\n  --sbb-button-color-default-text: var(--sbb-color-1-negative-inverted);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative-inverted);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3-negative);\n  --sbb-button-color-hover-text: var(--sbb-color-4-negative-inverted);\n  --sbb-button-color-loading-border: var(--sbb-color-silver);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading])) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n";
+
+//#endregion
+//#region src/elements/button/common/mini-button-common.scss?inline
+var mini_button_common_default = ":host {\n  display: inline-block;\n  -webkit-tap-highlight-color: transparent;\n  height: fit-content;\n  outline: none !important;\n  --sbb-mini-button-transition-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-2x)\n  );\n  --sbb-mini-button-color-background: var(--sbb-mini-button-color-default-background);\n  --sbb-mini-button-color: var(--sbb-mini-button-color-text);\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-mini-button-color-text: ButtonText !important;\n    --sbb-mini-button-color-hover-background: Highlight !important;\n    --sbb-mini-button-color-active-background: Highlight !important;\n    --sbb-mini-button-color-disabled-background: Canvas !important;\n    --sbb-mini-button-color-disabled-border: GrayText !important;\n    --sbb-mini-button-color-disabled-text: GrayText !important;\n  }\n}\n\n:host([negative]) {\n  --sbb-mini-button-color-text: var(--sbb-color-3-negative);\n  --sbb-mini-button-color-default-background: transparent;\n  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3-negative);\n  --sbb-mini-button-color-active-background: var(--sbb-background-color-4-negative);\n  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3-negative);\n  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);\n  --sbb-mini-button-color-disabled-text: var(--sbb-color-5);\n}\n\n@media (any-hover: hover) {\n  :host(:is(:hover, :is(:state(force-hover),[state--force-hover])):not([disabled], :disabled, [disabled-interactive], :is(:state(disabled),[state--disabled]), :active, :is(:state(active),[state--active]))) {\n    --sbb-mini-button-translate-y-content-hover: -0.0625rem;\n    --sbb-mini-button-color-background: var(--sbb-mini-button-color-hover-background);\n  }\n}\n\n:host(:is(:active, :is(:state(active),[state--active])):not([disabled], :disabled, [disabled-interactive], :is(:state(disabled),[state--disabled]))) {\n  --sbb-mini-button-color-background: var(--sbb-mini-button-color-active-background);\n}\n\n:host(:is([disabled], :disabled, [disabled-interactive], :is(:state(disabled),[state--disabled]))) {\n  --sbb-mini-button-color-background: var(--sbb-mini-button-color-disabled-background);\n  --sbb-mini-button-border: var(--sbb-border-width-1x) dashed\n    var(--sbb-mini-button-color-disabled-border);\n  --sbb-mini-button-color: var(--sbb-mini-button-color-disabled-text);\n  --sbb-mini-button-pointer-events: none;\n  --sbb-mini-button-cursor: var(--sbb-cursor-default);\n}\n\n:host(:is(:state(focus-visible),[state--focus-visible])) {\n  --sbb-focus-outline-style: initial;\n}\n\n.sbb-action-base {\n  display: flex;\n  position: relative;\n  color: var(--sbb-mini-button-color);\n  border-radius: var(--sbb-mini-button-border-radius);\n  user-select: none;\n  pointer-events: var(--sbb-mini-button-pointer-events, auto);\n  cursor: var(--sbb-mini-button-cursor, var(--sbb-cursor-pointer));\n  transition: color var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);\n  text-decoration: none;\n  outline: none;\n}\n.sbb-action-base::before {\n  position: absolute;\n  content: \"\";\n  inset: 0;\n  border-radius: var(--sbb-mini-button-border-radius);\n  background-color: var(--sbb-mini-button-color-background);\n  transition-duration: var(--sbb-mini-button-transition-duration);\n  transition-timing-function: var(--sbb-mini-button-transition-easing-function);\n  transition-property: inset, background-color;\n  border: var(--sbb-mini-button-border);\n}\n.sbb-action-base:focus-visible::before, :host(:is(:is(:state(focus-visible),[state--focus-visible]), :focus-visible)) .sbb-action-base::before {\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::slotted(sbb-icon),\nsbb-icon {\n  display: flex;\n  transition: translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);\n  translate: 0 var(--sbb-mini-button-translate-y-content-hover, 0);\n  min-width: var(--_sbb-mini-button-image-size, var(--sbb-size-icon-ui-small));\n  min-height: var(--_sbb-mini-button-image-size, var(--sbb-size-icon-ui-small));\n  align-items: center;\n  justify-content: center;\n}\n";
+
+//#endregion
+//#region src/elements/button/common/mini-button-label-common.scss?inline
+var mini_button_label_common_default = ":host {\n  --sbb-mini-button-gap: 0.125rem;\n  --sbb-mini-button-padding-inline: var(--sbb-spacing-fixed-2x);\n  --sbb-mini-button-label-display: block;\n  --sbb-mini-button-label-height: var(--sbb-size-icon-ui-small);\n}\n\n:host(:where(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {\n  --sbb-mini-button-padding-inline: 0;\n  --sbb-mini-button-label-display: none;\n  --sbb-mini-button-label-height: unset;\n}\n\n.sbb-action-base {\n  height: var(--sbb-mini-button-label-height);\n  gap: var(--sbb-mini-button-gap);\n  align-items: center;\n  justify-content: center;\n  padding-inline: var(--sbb-mini-button-padding-inline);\n}\n\n.sbb-mini-button__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-size: var(--sbb-text-font-size-xxs);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-text);\n  display: var(--sbb-mini-button-label-display);\n  transition: translate var(--sbb-mini-button-transition-duration) var(--sbb-mini-button-transition-easing-function);\n  translate: 0 var(--sbb-mini-button-translate-y-content-hover, 0);\n}\n";
+
+//#endregion
+//#region src/elements/button/common/primary-button.scss?inline
+var primary_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-color-primary150);\n  --sbb-button-color-active-border: var(--sbb-color-primary150);\n  --sbb-button-color-active-text: var(--sbb-color-4-negative);\n  --sbb-button-color-default-background: var(--sbb-color-primary);\n  --sbb-button-color-default-border: var(--sbb-color-primary);\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-color-primary125);\n  --sbb-button-color-hover-border: var(--sbb-color-primary125);\n  --sbb-button-color-hover-text: var(--sbb-color-3-negative);\n  --sbb-button-color-loading-border: color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 50%,\n      var(--sbb-button-color-default-text)\n    );\n  --sbb-button-color-loading-border: light-dark(\n    color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 50%,\n      var(--sbb-button-color-default-text)\n    ),\n    color-mix(\n      in srgb,\n      var(--sbb-button-color-active-background) 70%,\n      var(--sbb-button-color-default-text)\n    )\n  );\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary) 40%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent)\n  );\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-color-primary150);\n  --sbb-button-color-active-border: var(--sbb-color-primary150);\n  --sbb-button-color-active-text: var(--sbb-color-4-negative);\n  --sbb-button-color-default-background: var(--sbb-color-primary);\n  --sbb-button-color-default-border: var(--sbb-color-primary);\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-color-primary125);\n  --sbb-button-color-hover-border: var(--sbb-color-primary125);\n  --sbb-button-color-hover-text: var(--sbb-color-3-negative);\n  --sbb-button-color-loading-border: color-mix(\n    in srgb,\n    var(--sbb-button-color-active-background) 70%,\n    var(--sbb-button-color-default-text)\n  );\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 60%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary) 60%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary) 40%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent),\n    color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent)\n  );\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]), [loading])) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n";
+
+//#endregion
+//#region src/elements/button/common/secondary-button.scss?inline
+var secondary_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-3);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-anthracite);\n  --sbb-button-color-active-text: light-dark(\n    var(--sbb-color-anthracite),\n    var(--sbb-color-graphite)\n  );\n  --sbb-button-color-default-background: var(--sbb-background-color-1);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);\n  --sbb-button-shadow-1-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);\n  --sbb-button-shadow-2-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)\n  );\n  --sbb-button-border-overlap-fix: 0rem;\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-2-negative);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-graphite);\n  --sbb-button-color-default-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-default-text: var(--sbb-color-3-negative);\n  --sbb-button-color-hover-background: var(--sbb-background-color-1-negative);\n  --sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-4-negative);\n  --sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n}\n\n:host(:not([disabled], :disabled, [disabled-interactive], :active, :is(:state(active),[state--active]))) {\n  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);\n}\n";
+
+//#endregion
+//#region src/elements/button/common/transparent-button.scss?inline
+var transparent_button_default = ":host {\n  --sbb-button-color-active-background: var(--sbb-background-color-4);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-1);\n  --sbb-button-color-default-background: transparent;\n  --sbb-button-color-default-border: transparent;\n  --sbb-button-color-default-text: var(--sbb-color-1);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-1);\n  --sbb-button-color-loading-border: var(--sbb-color-silver);\n  --sbb-button-color-loading-border: light-dark(var(--sbb-color-silver), var(--sbb-color-granite));\n}\n\n:host([negative]) {\n  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);\n  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);\n  --sbb-button-color-active-text: var(--sbb-color-1-negative);\n  --sbb-button-color-default-background: transparent;\n  --sbb-button-color-default-border: transparent;\n  --sbb-button-color-default-text: var(--sbb-color-1-negative);\n  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);\n  --sbb-button-color-hover-border: var(--sbb-border-color-3-negative-inverted);\n  --sbb-button-color-hover-text: var(--sbb-color-1-negative);\n  --sbb-button-color-loading-border: var(--sbb-color-granite);\n}\n";
+
+//#endregion
+//#region src/elements/button/common/button-common.ts
+const buttonPrimaryStyle = unsafeCSS(primary_button_default);
+const buttonSecondaryStyle = unsafeCSS(secondary_button_default);
+const buttonAccentStyle = unsafeCSS(accent_button_default);
+const buttonTransparentStyle = unsafeCSS(transparent_button_default);
+const miniButtonStyle = unsafeCSS(mini_button_common_default);
+const miniButtonLabelStyle = unsafeCSS(mini_button_label_common_default);
+
+//#endregion
+//#region src/elements/datepicker/common/datepicker-button.scss?inline
+var datepicker_button_default = ".sbb-action-base {\n  margin: auto;\n  -webkit-tap-highlight-color: transparent;\n}\n";
+
+//#endregion
+//#region src/elements/datepicker/common/datepicker-button.ts
+/**
+* Base component for datepicker's buttons.
+*
+* @event {Event} change - The change event is fired on the datepicker's input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
+* @event {InputEvent} input - The input event fires on the datepicker's input when the value has been changed as a direct result of a user action.
+*/
+let SbbDatepickerButtonBase = (() => {
+	let _classSuper = SbbNegativeMixin(SbbButtonBaseElement);
+	let _input_decorators;
+	let _input_initializers = [];
+	let _input_extraInitializers = [];
+	return class SbbDatepickerButtonBase extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.#input_accessor_storage = __runInitializers(this, _input_initializers, null);
+			/** Whether the component is disabled due date-picker's input disabled. */
+			this._inputDisabled = (__runInitializers(this, _input_extraInitializers), true);
+			this.dateAdapter = readConfig().datetime?.dateAdapter ?? defaultDateAdapter;
+			this.language = new SbbLanguageController(this);
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_input_decorators = [idReference(), property()];
+			__esDecorate(this, null, _input_decorators, {
+				kind: "accessor",
+				name: "input",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "input" in obj,
+					get: (obj) => obj.input,
+					set: (obj, value) => {
+						obj.input = value;
+					}
+				},
+				metadata: _metadata
+			}, _input_initializers, _input_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementDependencies = [SbbIconElement];
+		}
+		static {
+			this.sbbDateInputAssociated = true;
+		}
+		static {
+			this.styles = [miniButtonStyle, unsafeCSS(datepicker_button_default)];
+		}
+		#input_accessor_storage;
+		/**
+		* The associated date input element.
+		*
+		* For attribute usage, provide an id reference.
+		*/
+		get input() {
+			return this.#input_accessor_storage;
+		}
+		set input(value) {
+			this.#input_accessor_storage = value;
+		}
+		/** Whether this button is disabled. */
+		get disabled() {
+			return !!this._inputDisabled;
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.toggleAttribute("disabled", this.disabled);
+			const formField = this.closest?.("sbb-form-field");
+			if (formField) {
+				customElements.upgrade?.(formField);
+				this.negative = formField.negative;
+				SbbDateInputElement.resolveAssociation(this);
+				this.slot ||= this._findSlotPosition();
+			}
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (name === "input" && this.input !== oldValue) {
+				this._inputAbortController?.abort();
+				this._inputDisabled = true;
+				if (this.input) {
+					this._inputAbortController = new AbortController();
+					this.slot = this._findSlotPosition();
+					customElements.upgrade?.(this.input);
+					this._sync();
+					this.input.addEventListener("ɵchange", () => this._sync());
+				}
+				if (this.hasUpdated) this.toggleAttribute("disabled", this.disabled);
+			} else if (!name && this.hasUpdated && this.input) this._sync();
+		}
+		_findSlotPosition() {
+			return !this.input || this.compareDocumentPosition(this.input) & Node.DOCUMENT_POSITION_FOLLOWING ? "prefix" : "suffix";
+		}
+		_sync() {
+			this.syncDateInputState();
+			this.toggleAttribute("disabled", this.disabled);
+			if (this.disabled) this.removeAttribute("tabindex");
+			else this.setAttribute("tabindex", "0");
+		}
+		syncDateInputState() {
+			this._inputDisabled = this.input.disabled || this.input.readOnly;
+		}
+		renderTemplate() {
+			return html`<sbb-icon name=${this.iconName}></sbb-icon>`;
+		}
+	};
+})();
+var SbbDatepickerButton = class extends SbbDatepickerButtonBase {
+	get disabled() {
+		return this._disabled || super.disabled;
+	}
+	constructor() {
+		super();
+		/** Whether the component is disabled due date equals to boundary date. */
+		this._disabled = true;
+		this.addEventListener?.("click", () => this._handleClick());
+	}
+	_handleClick() {
+		if (!this.input || this.disabled) return;
+		const startingDate = this.input.valueAsDate ?? this.dateAdapter.today();
+		const date = this.getFollowingDate(startingDate);
+		if (this.dateAdapter.isValid(date) && this.dateAdapter.compareDate(date, startingDate) !== 0) {
+			this.input.valueAsDate = date;
+			this.input.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true
+			}));
+			this.input.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+			this.input.dispatchEvent(new Event("blur", { composed: true }));
+		}
+	}
+	syncDateInputState() {
+		super.syncDateInputState();
+		if (!this.dateAdapter.isValid(this.input.valueAsDate)) {
+			this._disabled = true;
+			this.internals.ariaLabel = this.i18nOffBoundaryDay[this.language.current];
+			return;
+		}
+		const date = this.getFollowingDate(this.input.valueAsDate);
+		this._disabled = !this.dateAdapter.isValid(date) || this.dateAdapter.compareDate(date, this.input.valueAsDate) === 0;
+		const currentDateString = this.dateAdapter.compareDate(this.dateAdapter.today(), this.input.valueAsDate) === 0 ? i18nToday[this.language.current].toLowerCase() : this.dateAdapter.getAccessibilityFormatDate(this.input.valueAsDate);
+		this.internals.ariaLabel = this.i18nSelectOffBoundaryDay(currentDateString)[this.language.current];
+	}
+};
+
+//#endregion
+//#region src/elements/datepicker/datepicker-next-day/datepicker-next-day.component.ts
+/**
+* Combined with a `sbb-datepicker`, it can be used to move the date ahead.
+*/
+var SbbDatepickerNextDayElement = class extends SbbDatepickerButton {
+	constructor() {
+		super(...arguments);
+		this.iconName = "chevron-small-right-small";
+		this.i18nOffBoundaryDay = i18nNextDay;
+		this.i18nSelectOffBoundaryDay = i18nSelectNextDay;
+	}
+	static {
+		this.elementName = "sbb-datepicker-next-day";
+	}
+	getFollowingDate(date) {
+		const availableDate = this.dateAdapter.addCalendarDays(date, 1);
+		if (this._isAfterMaxDate(availableDate)) return null;
+		return availableDate;
+	}
+	_isAfterMaxDate(date) {
+		return !!this.input.max && this.dateAdapter.compareDate(date, this.input.max) > 0;
+	}
+};
+
+//#endregion
+//#region src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.component.ts
+/**
+* Combined with a `sbb-datepicker`, it can be used to move the date back.
+*/
+var SbbDatepickerPreviousDayElement = class extends SbbDatepickerButton {
+	constructor() {
+		super(...arguments);
+		this.iconName = "chevron-small-left-small";
+		this.i18nOffBoundaryDay = i18nPreviousDay;
+		this.i18nSelectOffBoundaryDay = i18nSelectPreviousDay;
+	}
+	static {
+		this.elementName = "sbb-datepicker-previous-day";
+	}
+	getFollowingDate(date) {
+		const availableDate = this.dateAdapter.addCalendarDays(date, -1);
+		if (this._isBeforeMinDate(availableDate)) return null;
+		return availableDate;
+	}
+	_isBeforeMinDate(date) {
+		return !!this.input.min && this.dateAdapter.compareDate(date, this.input.min) < 0;
+	}
+};
+
+//#endregion
+//#region src/elements/datepicker/datepicker-toggle/datepicker-toggle.component.ts
+/**
+* Combined with a `sbb-datepicker`, it can be used to select a date from a `sbb-calendar`.
+*/
+let SbbDatepickerToggleElement = (() => {
+	let _classSuper = SbbDatepickerButtonBase;
+	let _datepicker_decorators;
+	let _datepicker_initializers = [];
+	let _datepicker_extraInitializers = [];
+	return class SbbDatepickerToggleElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_datepicker_decorators = [idReference(), property()];
+			__esDecorate(this, null, _datepicker_decorators, {
+				kind: "accessor",
+				name: "datepicker",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "datepicker" in obj,
+					get: (obj) => obj.datepicker,
+					set: (obj, value) => {
+						obj.datepicker = value;
+					}
+				},
+				metadata: _metadata
+			}, _datepicker_initializers, _datepicker_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-datepicker-toggle";
+		}
+		#datepicker_accessor_storage;
+		/** Datepicker reference. */
+		get datepicker() {
+			return this.#datepicker_accessor_storage;
+		}
+		set datepicker(value) {
+			this.#datepicker_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.iconName = "calendar-small";
+			this.#datepicker_accessor_storage = __runInitializers(this, _datepicker_initializers, null);
+			__runInitializers(this, _datepicker_extraInitializers);
+			this.addEventListener?.("click", () => {
+				if (!this.datepicker) {
+					console.warn("sbb-datepicker-toggle: No datepicker connected.");
+					console.log(this);
+				}
+				if (!this.datepicker?.isOpen) this.datepicker?.open();
+			});
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.internals.ariaLabel = i18nShowCalendar[this.language.current];
+			const formField = this.closest?.("sbb-form-field");
+			if (formField && !this.hasAttribute("datepicker")) this.datepicker ??= formField.querySelector("sbb-datepicker");
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (name === "datepicker" && this.datepicker && this.datepicker.trigger !== this) this.datepicker.trigger = this;
+			else if (!name && this.hasUpdated) this.internals.ariaLabel = i18nShowCalendar[this.language.current];
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/datepicker/datepicker/datepicker.component.ts
+/**
+* A datepicker component that allows users to select a date from a calendar view.
+*
+* @event {SbbDateSelectedEvent<T>} dateselected - Event emitted on date selection.
+* @event {Event} change - The change event is fired on the datepicker's input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
+* @event {InputEvent} input - The input event fires  on the datepicker's input when the value has been changed as a direct result of a user action.
+*/
+let SbbDatepickerElement = (() => {
+	let _classSuper = SbbUpdateSchedulerMixin(SbbPopoverBaseElement);
+	let _wide_decorators;
+	let _wide_initializers = [];
+	let _wide_extraInitializers = [];
+	let _input_decorators;
+	let _input_initializers = [];
+	let _input_extraInitializers = [];
+	let _view_decorators;
+	let _view_initializers = [];
+	let _view_extraInitializers = [];
+	let __isBreakpointLargeOrAbove_decorators;
+	let __isBreakpointLargeOrAbove_initializers = [];
+	let __isBreakpointLargeOrAbove_extraInitializers = [];
+	return class SbbDatepickerElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_wide_decorators = [forceType(), property({ type: Boolean })];
+			_input_decorators = [idReference(), property()];
+			_view_decorators = [property()];
+			__isBreakpointLargeOrAbove_decorators = [state()];
+			__esDecorate(this, null, _wide_decorators, {
+				kind: "accessor",
+				name: "wide",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "wide" in obj,
+					get: (obj) => obj.wide,
+					set: (obj, value) => {
+						obj.wide = value;
+					}
+				},
+				metadata: _metadata
+			}, _wide_initializers, _wide_extraInitializers);
+			__esDecorate(this, null, _input_decorators, {
+				kind: "accessor",
+				name: "input",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "input" in obj,
+					get: (obj) => obj.input,
+					set: (obj, value) => {
+						obj.input = value;
+					}
+				},
+				metadata: _metadata
+			}, _input_initializers, _input_extraInitializers);
+			__esDecorate(this, null, _view_decorators, {
+				kind: "accessor",
+				name: "view",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "view" in obj,
+					get: (obj) => obj.view,
+					set: (obj, value) => {
+						obj.view = value;
+					}
+				},
+				metadata: _metadata
+			}, _view_initializers, _view_extraInitializers);
+			__esDecorate(this, null, __isBreakpointLargeOrAbove_decorators, {
+				kind: "accessor",
+				name: "_isBreakpointLargeOrAbove",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_isBreakpointLargeOrAbove" in obj,
+					get: (obj) => obj._isBreakpointLargeOrAbove,
+					set: (obj, value) => {
+						obj._isBreakpointLargeOrAbove = value;
+					}
+				},
+				metadata: _metadata
+			}, __isBreakpointLargeOrAbove_initializers, __isBreakpointLargeOrAbove_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-datepicker";
+		}
+		static {
+			this.elementDependencies = [SbbCalendarElement];
+		}
+		static {
+			this.styles = [screenReaderOnlyStyles];
+		}
+		static {
+			this.sbbDateInputAssociated = true;
+		}
+		#wide_accessor_storage;
+		/** If set to true, two months are displayed. */
+		get wide() {
+			return this.#wide_accessor_storage;
+		}
+		set wide(value) {
+			this.#wide_accessor_storage = value;
+		}
+		#input_accessor_storage;
+		/**
+		* Reference to the sbb-date-input instance or the native input connected to the datepicker.
+		*
+		* For attribute usage, provide an id reference.
+		*/
+		get input() {
+			return this.#input_accessor_storage;
+		}
+		set input(value) {
+			this.#input_accessor_storage = value;
+		}
+		#view_accessor_storage;
+		/** The initial view of calendar which should be displayed on opening. */
+		get view() {
+			return this.#view_accessor_storage;
+		}
+		set view(value) {
+			this.#view_accessor_storage = value;
+		}
+		#_isBreakpointLargeOrAbove_accessor_storage;
+		get _isBreakpointLargeOrAbove() {
+			return this.#_isBreakpointLargeOrAbove_accessor_storage;
+		}
+		set _isBreakpointLargeOrAbove(value) {
+			this.#_isBreakpointLargeOrAbove_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.#wide_accessor_storage = __runInitializers(this, _wide_initializers, false);
+			this.#input_accessor_storage = (__runInitializers(this, _wide_extraInitializers), __runInitializers(this, _input_initializers, null));
+			this.#view_accessor_storage = (__runInitializers(this, _input_extraInitializers), __runInitializers(this, _view_initializers, "day"));
+			this._inputAbortController = __runInitializers(this, _view_extraInitializers);
+			this._dateAdapter = readConfig().datetime?.dateAdapter ?? defaultDateAdapter;
+			this._language = new SbbLanguageController(this);
+			this._ready = false;
+			this._mediaMatcher = new SbbMediaMatcherController(this, { [SbbMediaQueryBreakpointLargeAndAbove]: (m) => this._isBreakpointLargeOrAbove = m });
+			this.#_isBreakpointLargeOrAbove_accessor_storage = __runInitializers(this, __isBreakpointLargeOrAbove_initializers, this._mediaMatcher.matches(SbbMediaQueryBreakpointLargeAndAbove) ?? false);
+			__runInitializers(this, __isBreakpointLargeOrAbove_extraInitializers);
+			this.startUpdate();
+			this.addEventListener(SbbPopoverBaseElement.events.beforeopen, () => {
+				this.shadowRoot?.querySelector("sbb-calendar")?.resetPosition?.();
+			});
+			if (!isServer && this.hydrationRequired) this.hydrationComplete.then(() => this.requestUpdate());
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			const formField = this.closest?.("sbb-form-field");
+			if (formField) {
+				SbbDateInputElement.resolveAssociation(this);
+				const toggle = formField.querySelector("sbb-datepicker-toggle");
+				if (toggle && !toggle.hasAttribute("datepicker")) toggle.datepicker ??= this;
+			}
+		}
+		requestUpdate(name, oldValue, options) {
+			super.requestUpdate(name, oldValue, options);
+			if (name === "input" && this.input !== oldValue) {
+				this._inputAbortController?.abort();
+				if (this.input) {
+					const { signal } = this._inputAbortController = new AbortController();
+					this.input?.addEventListener("ɵchange", () => {
+						super.requestUpdate();
+						this._updateStatus();
+					}, { signal });
+				}
+			}
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			setTimeout(() => {
+				this._ready = true;
+				this.requestUpdate();
+				this.completeUpdate();
+			});
+		}
+		_updateStatus() {
+			const status = this.shadowRoot?.getElementById("status-container");
+			if (!status) return;
+			const text = this._dateAdapter.isValid(this.input?.valueAsDate) ? `${i18nDateChangedTo[this._language.current]} ${this._dateAdapter.format(this.input.valueAsDate, { weekdayStyle: "long" })}` : "";
+			if (status.textContent !== text) status.textContent = text;
+		}
+		renderContent() {
+			return html`
+      <p id="status-container" class="sbb-screen-reader-only" role="status"></p>
+      <sbb-calendar
+        .view=${this.view}
+        .min=${this.input?.min ?? null}
+        .max=${this.input?.max ?? null}
+        .dateFilter=${this.input?.dateFilter ?? null}
+        .value=${this.input?.valueAsDate ?? null}
+        .amount=${this.wide && this._isBreakpointLargeOrAbove ? 2 : 1}
+        @change=${(event) => {
+				const value = event.target.value;
+				if (this.input) {
+					this.input.valueAsDate = value;
+					this.input.dispatchEvent(new InputEvent("input", {
+						bubbles: true,
+						composed: true
+					}));
+					this.input.dispatchEvent(new Event("change", { bubbles: true }));
+					this.input.dispatchEvent(new Event("blur", { composed: true }));
+					this.close();
+				}
+			}}
+      ></sbb-calendar>
+    `;
+		}
+		render() {
+			return isServer || this.hydrationRequired || !this._ready ? html`${nothing}` : super.render();
+		}
+	};
+})();
+
+//#endregion
+export { SbbDatepickerButton, SbbDatepickerButtonBase, SbbDatepickerElement, SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement, SbbDatepickerToggleElement };

package/development/dialog/dialog/dialog.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 import { SbbOverlayBaseElement } from '../../overlay.pure.ts';
-export { assignOverlayResult as assignDialogResult, SbbOverlayCloseEvent as SbbDialogCloseEvent, } from '../../overlay/overlay-base-element.ts';
+export { assignOverlayResult as assignDialogResult, SbbOverlayCloseEvent as SbbDialogCloseEvent, } from '../../overlay.pure.ts';
 /**
  * It displays an interactive overlay element.
  *
@@ -47,4 +47,3 @@ declare global {
         'sbb-dialog': SbbDialogElement;
     }
 }
-//# sourceMappingURL=dialog.component.d.ts.map

package/development/dialog/dialog-actions/dialog-actions.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup } from 'lit';
+import { type CSSResultGroup } from 'lit';
 import { SbbActionGroupElement } from '../../action-group.pure.ts';
 /**
  * Use this component to display a footer into an `sbb-dialog` with an action group.
@@ -14,4 +14,3 @@ declare global {
         'sbb-dialog-actions': SbbDialogActionsElement;
     }
 }
-//# sourceMappingURL=dialog-actions.component.d.ts.map

package/development/dialog/dialog-close-button/dialog-close-button.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 import { SbbSecondaryButtonElement } from '../../button.pure.ts';
 /**
  * Dialog close button, intended to be placed inside sbb-dialog.
@@ -20,4 +20,3 @@ declare global {
         'sbb-dialog-close-button': SbbDialogCloseButtonElement;
     }
 }
-//# sourceMappingURL=dialog-close-button.component.d.ts.map

package/development/dialog/dialog-content/dialog-content.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 import { SbbElement } from '../../core.ts';
 /**
  * Use this component to provide a content for an `sbb-dialog`.
@@ -18,4 +18,3 @@ declare global {
         'sbb-dialog-content': SbbDialogContentElement;
     }
 }
-//# sourceMappingURL=dialog-content.component.d.ts.map

package/development/dialog/dialog-title/dialog-title.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup } from 'lit';
+import { type CSSResultGroup } from 'lit';
 import { SbbTitleBase } from '../../title.pure.ts';
-declare const SbbDialogTitleElement_base: import('../../core.ts').AbstractConstructor<import('../../core.ts').SbbNegativeMixinType> & typeof SbbTitleBase;
+declare const SbbDialogTitleElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbNegativeMixinType> & typeof SbbTitleBase;
 /**
  * It displays a title inside a dialog header.
  *
@@ -17,4 +17,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=dialog-title.component.d.ts.map

package/development/dialog.d.ts

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