@sbb-esta/lyne-elements 3.0.0-next.0 → 3.0.0-next.2

package/date-input/date-input.component.d.ts

@@ -1,5 +1,12 @@
 import { CSSResultGroup, LitElement, PropertyDeclaration } from 'lit';
 import { SbbDatepickerElement } from '../datepicker.js';
+/**
+ * Interface for elements that can be associated with a date input.
+ * Implementing classes must also have a static property `sbbDateInputAssociated` set to `true`.
+ */
+export interface SbbDateInputAssociated<T> {
+    input: SbbDateInputElement<T> | null;
+}
 declare const SbbDateInputElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbFormAssociatedInputMixinType> & typeof LitElement;
 /**
  * Custom input for a date.
@@ -28,7 +35,11 @@ export declare class SbbDateInputElement<T = Date> extends SbbDateInputElement_b
      * Accepts an ISO8601 formatted string (e.g. 2024-12-24) as attribute.
      */
     accessor max: T | null;
-    /** A function used to filter out dates. */
+    /**
+     * A function used to filter out dates.
+     * It is strongly recommended to use min and max dates alongside
+     * this filter.
+     */
     set dateFilter(value: (date: T | null) => boolean);
     get dateFilter(): (date: T | null) => boolean;
     /**
@@ -50,6 +61,10 @@ export declare class SbbDateInputElement<T = Date> extends SbbDateInputElement_b
      */
     get datepicker(): SbbDatepickerElement<T> | null;
     constructor();
+    /**
+     * Attempts to resolve the associated date input with the given element.
+     */
+    static resolveAssociation<T>(host: HTMLElement & SbbDateInputAssociated<T>): void;
     private _dateFilter;
     connectedCallback(): void;
     requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;

package/date-input/date-input.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.component.d.ts","sourceRoot":"","sources":["../../../src/elements/date-input/date-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,KAAK,CAAC;AAa1F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;;AAY7D;;;GAGG;AACH,qBAEM,mBAAmB,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,wBAAuC;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;;;OAKG;IACH,IAAoB,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtC;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,IACW,WAAW,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAsBrC;IACD,IAAW,WAAW,IAAI,CAAC,GAAG,IAAI,CAIjC;IACD,OAAO,CAAC,YAAY,CAAC,CAAW;IAEhC;;;OAGG;IACH,SAEgB,GAAG,EAAE,CAAC,GAAG,IAAI,CAAQ;IAErC;;;OAGG;IACH,SAEgB,GAAG,EAAE,CAAC,GAAG,IAAI,CAAQ;IAErC,2CAA2C;IAC3C,IACW,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,EAKvD;IACD,IAAW,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,CAEnD;IAED;;;;OAIG;IACH,SACgB,YAAY,EAAE,OAAO,GAAG,MAAM,CAAW;IAEzD;;;OAGG;IACH,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,YAAY,CAA4E;IAChG,OAAO,CAAC,mBAAmB,CAAS;IAEpC;;;OAGG;IACH,IAAW,UAAU,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAEtD;;IAOD,OAAO,CAAC,WAAW,CAA2C;IAE9C,iBAAiB,IAAI,IAAI;IAQzB,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAiBY,eAAe,IAAI,IAAI;IAO1C,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,WAAW;cAIA,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;cAOtD,QAAQ,IAAI,IAAI;IAiCnC,OAAO,CAAC,qBAAqB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;IAED,UAAU,mBAAmB;QAC3B,aAAa,EAAE,OAAO,CAAC;KACxB;CACF"}
+{"version":3,"file":"date-input.component.d.ts","sourceRoot":"","sources":["../../../src/elements/date-input/date-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,KAAK,CAAC;AAa1F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAY7D;;;GAGG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;CACtC;;AAED;;;GAGG;AACH,qBAEM,mBAAmB,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,wBAAuC;IACjF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;;;OAKG;IACH,IAAoB,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtC;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,IACW,WAAW,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,EAsBrC;IACD,IAAW,WAAW,IAAI,CAAC,GAAG,IAAI,CAIjC;IACD,OAAO,CAAC,YAAY,CAAC,CAAW;IAEhC;;;OAGG;IACH,SAEgB,GAAG,EAAE,CAAC,GAAG,IAAI,CAAQ;IAErC;;;OAGG;IACH,SAEgB,GAAG,EAAE,CAAC,GAAG,IAAI,CAAQ;IAErC;;;;OAIG;IACH,IACW,UAAU,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,EAEvD;IACD,IAAW,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,OAAO,CAEnD;IAED;;;;OAIG;IACH,SACgB,YAAY,EAAE,OAAO,GAAG,MAAM,CAAW;IAEzD;;;OAGG;IACH,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,YAAY,CAA4E;IAChG,OAAO,CAAC,mBAAmB,CAAS;IAEpC;;;OAGG;IACH,IAAW,UAAU,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAEtD;;IAOD;;OAEG;WACW,kBAAkB,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,GAAG,sBAAsB,CAAC,CAAC,CAAC,GAAG,IAAI;IAaxF,OAAO,CAAC,WAAW,CAA2C;IAE9C,iBAAiB,IAAI,IAAI;IAmBzB,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;cAiBY,eAAe,IAAI,IAAI;IAO1C,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,WAAW;cAIA,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO;cAOtD,QAAQ,IAAI,IAAI;IAiCnC,OAAO,CAAC,qBAAqB;CAK9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;IAED,UAAU,mBAAmB;QAC3B,aAAa,EAAE,OAAO,CAAC;KACxB;CACF"}

package/date-input/date-input.component.js

@@ -2,10 +2,10 @@ var I = (a) => {
   throw TypeError(a);
 };
 var z = (a, s, i) => s.has(a) || I("Cannot " + i);
-var p = (a, s, i) => (z(a, s, "read from private field"), i ? i.call(a) : s.get(a)), f = (a, s, i) => s.has(a) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, i), n = (a, s, i, d) => (z(a, s, "write to private field"), d ? d.call(a, i) : s.set(a, i), i);
-import { __esDecorate as m, __runInitializers as h } from "tslib";
-import { css as U, LitElement as j, isServer as q } from "lit";
-import { customElement as T, property as _ } from "lit/decorators.js";
+var _ = (a, s, i) => (z(a, s, "read from private field"), i ? i.call(a) : s.get(a)), f = (a, s, i) => s.has(a) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, i), o = (a, s, i, n) => (z(a, s, "write to private field"), n ? n.call(a, i) : s.set(a, i), i);
+import { __esDecorate as m, __runInitializers as d } from "tslib";
+import { css as U, LitElement as q, isServer as j } from "lit";
+import { customElement as T, property as p } from "lit/decorators.js";
 import { readConfig as L } from "../core/config.js";
 import { defaultDateAdapter as G } from "../core/datetime.js";
 import { plainDate as C, plainDateConverter as M } from "../core/decorators.js";
@@ -17,17 +17,16 @@ Object.assign(ValidityState.prototype, {
     return !1;
   }
 });
-let ae = (() => {
-  var o, u, c, r;
-  let a = [T("sbb-date-input")], s, i = [], d, y = B(j), v = [], D, A, g = [], b = [], k, x = [], F = [], w, V, S = [], E = [];
+let at = (() => {
+  var h, u, c, r;
+  let a = [T("sbb-date-input")], s, i = [], n, y = B(q), v = [], D, A, b = [], g = [], x, k = [], F = [], w, S, V = [], E = [];
   return r = class extends y {
     constructor() {
-      var e, t;
       super();
-      f(this, o);
+      f(this, h);
       f(this, u);
       f(this, c);
-      this._valueAsDate = h(this, v), n(this, o, h(this, g, null)), n(this, u, (h(this, b), h(this, x, null))), n(this, c, (h(this, F), h(this, S, "short"))), this._valueCache = h(this, E), this._dateAdapter = ((e = L().datetime) == null ? void 0 : e.dateAdapter) ?? G, this._placeholderMutable = !1, this._dateFilter = () => !0, (t = this.addEventListener) == null || t.call(this, "change", () => this._updateValueDateFormat(), { capture: !0 });
+      this._valueAsDate = d(this, v), o(this, h, d(this, b, null)), o(this, u, (d(this, g), d(this, k, null))), o(this, c, (d(this, F), d(this, V, "short"))), this._valueCache = d(this, E), this._dateAdapter = L().datetime?.dateAdapter ?? G, this._placeholderMutable = !1, this._dateFilter = () => !0, this.addEventListener?.("change", () => this._updateValueDateFormat(), { capture: !0 });
     }
     /**
      * The value of the date input. Reflects the current text value
@@ -35,19 +34,19 @@ let ae = (() => {
      * The attribute `value` Accepts ISO8601 formatted values, which will be
      * formatted according to the current locale.
      */
-    set value(e) {
-      this._tryParseValue(e), !q && !this.matches(":focus") && this.valueAsDate !== null && (e = this._formatDate()), super.value = e;
+    set value(t) {
+      this._tryParseValue(t), !j && !this.matches(":focus") && this.valueAsDate !== null && (t = this._formatDate()), super.value = t;
     }
     get value() {
       return super.value ?? "";
     }
-    set valueAsDate(e) {
-      if (e = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(e)), !e)
+    set valueAsDate(t) {
+      if (t = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t)), !t)
         this._valueAsDate = null, this._valueCache = ["", null], this.value = "";
-      else if (!this._dateAdapter.isDateInstance(this._valueAsDate) || this._dateAdapter.compareDate(this._valueAsDate, e) !== 0) {
-        this._valueAsDate = this._dateAdapter.createDate(this._dateAdapter.getYear(e), this._dateAdapter.getMonth(e), this._dateAdapter.getDate(e));
-        const t = this._formatDate();
-        this._valueCache = [t, this._valueAsDate], this.value = t;
+      else if (!this._dateAdapter.isDateInstance(this._valueAsDate) || this._dateAdapter.compareDate(this._valueAsDate, t) !== 0) {
+        this._valueAsDate = this._dateAdapter.createDate(this._dateAdapter.getYear(t), this._dateAdapter.getMonth(t), this._dateAdapter.getDate(t));
+        const e = this._formatDate();
+        this._valueCache = [e, this._valueAsDate], this.value = e;
       }
     }
     get valueAsDate() {
@@ -58,24 +57,28 @@ let ae = (() => {
      * Accepts an ISO8601 formatted string (e.g. 2024-12-24) as attribute.
      */
     get min() {
-      return p(this, o);
+      return _(this, h);
     }
-    set min(e) {
-      n(this, o, e);
+    set min(t) {
+      o(this, h, t);
     }
     /**
      * The maximum valid date. Accepts a date object or null.
      * Accepts an ISO8601 formatted string (e.g. 2024-12-24) as attribute.
      */
     get max() {
-      return p(this, u);
+      return _(this, u);
     }
-    set max(e) {
-      n(this, u, e);
+    set max(t) {
+      o(this, u, t);
     }
-    /** A function used to filter out dates. */
-    set dateFilter(e) {
-      this._dateFilter = e, this.datepicker && (this.datepicker.dateFilter = e);
+    /**
+     * A function used to filter out dates.
+     * It is strongly recommended to use min and max dates alongside
+     * this filter.
+     */
+    set dateFilter(t) {
+      this._dateFilter = t;
     }
     get dateFilter() {
       return this._dateFilter;
@@ -86,10 +89,10 @@ let ae = (() => {
      * `none`: The weekday is not displayed.
      */
     get weekdayStyle() {
-      return p(this, c);
+      return _(this, c);
     }
-    set weekdayStyle(e) {
-      n(this, c, e);
+    set weekdayStyle(t) {
+      o(this, c, t);
     }
     /**
      * Gets the associated datepicker, if any.
@@ -98,54 +101,64 @@ let ae = (() => {
     get datepicker() {
       return this.parentElement.querySelector("sbb-datepicker");
     }
+    /**
+     * Attempts to resolve the associated date input with the given element.
+     */
+    static resolveAssociation(t) {
+      if (t.hasAttribute("input") || t.input)
+        return;
+      const e = t.closest("sbb-form-field")?.querySelector("sbb-date-input");
+      e && (t.input = e);
+    }
     connectedCallback() {
       super.connectedCallback(), this.placeholder || (this._placeholderMutable = !0, this.placeholder = O[this.language.current]);
+      for (const t of Array.from(this.closest("sbb-form-field")?.children ?? []))
+        customElements.upgrade?.(t), t.constructor.sbbDateInputAssociated && !t.hasAttribute("input") && !t.input && (t.input = this);
     }
-    requestUpdate(e, t, l) {
-      super.requestUpdate(e, t, l), this.hasUpdated && !e ? (this._updateValueDateFormat(), this._placeholderMutable && (this.placeholder = O[this.language.current])) : e === "weekdayStyle" && this._updateValueDateFormat(), this.hasUpdated && this.dispatchEvent(new Event("ɵchange"));
+    requestUpdate(t, e, l) {
+      super.requestUpdate(t, e, l), this.hasUpdated && !t ? (this._updateValueDateFormat(), this._placeholderMutable && (this.placeholder = O[this.language.current])) : t === "weekdayStyle" && this._updateValueDateFormat(), this.isConnected && this.dispatchEvent(new Event("ɵchange"));
     }
     updateFormValue() {
       this._tryParseValue();
-      const e = this.valueAsDate !== null ? this._dateAdapter.toIso8601(this.valueAsDate) : null;
-      this.internals.setFormValue(e, this.value);
+      const t = this.valueAsDate !== null ? this._dateAdapter.toIso8601(this.valueAsDate) : null;
+      this.internals.setFormValue(t, this.value);
     }
-    _tryParseValue(e = this.value) {
-      var t;
-      ((t = this._valueCache) == null ? void 0 : t[0]) !== e && (this._valueAsDate = this._dateAdapter.parse(e), this._valueCache = [e, this._valueAsDate]);
+    _tryParseValue(t = this.value) {
+      this._valueCache?.[0] !== t && (this._valueAsDate = this._dateAdapter.parse(t), this._valueCache = [t, this._valueAsDate]);
     }
     _updateValueDateFormat() {
       if (this.valueAsDate) {
-        const e = this._formatDate();
-        this.value !== e && (super.value = e);
+        const t = this._formatDate();
+        this.value !== t && (super.value = t);
       }
     }
     _formatDate() {
       return this._dateAdapter.format(this.valueAsDate, { weekdayStyle: this.weekdayStyle });
     }
-    shouldValidate(e) {
-      return super.shouldValidate(e) || ["valueAsDate", "min", "max", "dateFilter"].includes(e);
+    shouldValidate(t) {
+      return super.shouldValidate(t) || ["valueAsDate", "min", "max", "dateFilter"].includes(t);
     }
     validate() {
       super.validate(), this.value ? this._dateAdapter.isValid(this.valueAsDate) ? this._dateAdapter.isValid(this.min) && this._dateAdapter.compareDate(this.min, this.valueAsDate) > 0 ? this.setValidityFlag("rangeUnderflow", N(this._dateAdapter.format(this.min, { weekdayStyle: "none" }))[this.language.current]) : this._dateAdapter.isValid(this.max) && this._dateAdapter.compareDate(this.valueAsDate, this.max) > 0 ? this.setValidityFlag("rangeOverflow", Y(this._dateAdapter.format(this.max, { weekdayStyle: "none" }))[this.language.current]) : this.dateFilter && !this.dateFilter(this.valueAsDate) ? this.setValidityFlag("sbbDateFilter", P[this.language.current]) : this._removeValidityErrors() : this.setValidityFlag("badInput", P[this.language.current]) : this._removeValidityErrors();
     }
     _removeValidityErrors() {
-      ["badInput", "rangeUnderflow", "rangeOverflow", "sbbDateFilter"].forEach((e) => this.removeValidityFlag(e));
-    }
-  }, o = new WeakMap(), u = new WeakMap(), c = new WeakMap(), d = r, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    D = [_({ attribute: !1 })], A = [C(), _({ converter: M, reflect: !0 })], k = [C(), _({ converter: M, reflect: !0 })], w = [_({ attribute: !1 })], V = [_({ attribute: "weekday-style" })], m(r, null, D, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (t) => "valueAsDate" in t, set: (t, l) => {
-      t.valueAsDate = l;
-    } }, metadata: e }, null, v), m(r, null, A, { kind: "accessor", name: "min", static: !1, private: !1, access: { has: (t) => "min" in t, get: (t) => t.min, set: (t, l) => {
-      t.min = l;
-    } }, metadata: e }, g, b), m(r, null, k, { kind: "accessor", name: "max", static: !1, private: !1, access: { has: (t) => "max" in t, get: (t) => t.max, set: (t, l) => {
-      t.max = l;
-    } }, metadata: e }, x, F), m(r, null, w, { kind: "setter", name: "dateFilter", static: !1, private: !1, access: { has: (t) => "dateFilter" in t, set: (t, l) => {
-      t.dateFilter = l;
-    } }, metadata: e }, null, v), m(r, null, V, { kind: "accessor", name: "weekdayStyle", static: !1, private: !1, access: { has: (t) => "weekdayStyle" in t, get: (t) => t.weekdayStyle, set: (t, l) => {
-      t.weekdayStyle = l;
-    } }, metadata: e }, S, E), m(null, s = { value: d }, a, { kind: "class", name: d.name, metadata: e }, null, i), d = s.value, e && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), r.styles = H, h(d, i), d;
+      ["badInput", "rangeUnderflow", "rangeOverflow", "sbbDateFilter"].forEach((t) => this.removeValidityFlag(t));
+    }
+  }, h = new WeakMap(), u = new WeakMap(), c = new WeakMap(), n = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    D = [p({ attribute: !1 })], A = [C(), p({ converter: M, reflect: !0 })], x = [C(), p({ converter: M, reflect: !0 })], w = [p({ attribute: !1 })], S = [p({ attribute: "weekday-style" })], m(r, null, D, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, l) => {
+      e.valueAsDate = l;
+    } }, metadata: t }, null, v), m(r, null, A, { kind: "accessor", name: "min", static: !1, private: !1, access: { has: (e) => "min" in e, get: (e) => e.min, set: (e, l) => {
+      e.min = l;
+    } }, metadata: t }, b, g), m(r, null, x, { kind: "accessor", name: "max", static: !1, private: !1, access: { has: (e) => "max" in e, get: (e) => e.max, set: (e, l) => {
+      e.max = l;
+    } }, metadata: t }, k, F), m(r, null, w, { kind: "setter", name: "dateFilter", static: !1, private: !1, access: { has: (e) => "dateFilter" in e, set: (e, l) => {
+      e.dateFilter = l;
+    } }, metadata: t }, null, v), m(r, null, S, { kind: "accessor", name: "weekdayStyle", static: !1, private: !1, access: { has: (e) => "weekdayStyle" in e, get: (e) => e.weekdayStyle, set: (e, l) => {
+      e.weekdayStyle = l;
+    } }, metadata: t }, V, E), m(null, s = { value: n }, a, { kind: "class", name: n.name, metadata: t }, null, i), n = s.value, t && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = H, d(n, i), n;
 })();
 export {
-  ae as SbbDateInputElement
+  at as SbbDateInputElement
 };

package/datepicker/common/datepicker-button.d.ts

@@ -1,31 +1,42 @@
-import { PropertyValues, TemplateResult } from 'lit';
+import { PropertyDeclaration, TemplateResult } from 'lit';
 import { SbbButtonBaseElement } from '../../core/base-elements.js';
-import { SbbDatepickerElement } from '../datepicker.js';
-import { SbbDatepickerControl } from './datepicker-association-controllers.js';
-declare const SbbDatepickerButton_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof SbbButtonBaseElement;
-export declare abstract class SbbDatepickerButton<T = Date> extends SbbDatepickerButton_base implements SbbDatepickerControl<T> {
-    /** Datepicker reference. */
-    set datepicker(value: SbbDatepickerElement<T> | null);
-    get datepicker(): SbbDatepickerElement<T> | null;
-    private _datepicker?;
-    /** The boundary date (min/max) as set in the date-picker's input. */
-    protected accessor boundary: string | number | null;
-    /** Whether the component is disabled due date equals to boundary date. */
-    private _disabled;
+import { SbbLanguageController } from '../../core/controllers.js';
+import { DateAdapter } from '../../core/datetime.js';
+import { SbbDateInputElement, SbbDateInputAssociated } from '../../date-input.js';
+declare const SbbDatepickerButtonBase_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof SbbButtonBaseElement;
+export declare abstract class SbbDatepickerButtonBase<T = Date> extends SbbDatepickerButtonBase_base implements SbbDateInputAssociated<T> {
+    static readonly sbbDateInputAssociated = true;
+    /**
+     * The associated date input element.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    accessor input: SbbDateInputElement<T> | null;
+    /** Whether this button is disabled. */
+    get disabled(): boolean;
     /** Whether the component is disabled due date-picker's input disabled. */
     private _inputDisabled;
-    private _dateAdapter;
-    private _language;
+    private _inputAbortController?;
+    protected dateAdapter: DateAdapter<T>;
+    protected language: SbbLanguageController;
     protected abstract iconName: string;
+    connectedCallback(): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
+    private _findSlotPosition;
+    private _sync;
+    protected syncDateInputState(): void;
+    protected renderTemplate(): TemplateResult;
+}
+export declare abstract class SbbDatepickerButton<T = Date> extends SbbDatepickerButtonBase<T> {
+    /** Whether the component is disabled due date equals to boundary date. */
+    private _disabled;
     protected abstract i18nOffBoundaryDay: Record<string, string>;
     protected abstract i18nSelectOffBoundaryDay: (_currentDate: string) => Record<string, string>;
+    get disabled(): boolean;
     constructor();
-    protected abstract findAvailableDate(_date: T): T;
-    connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected abstract findAvailableDate(_date: T): T | null;
     private _handleClick;
-    private _setDisabledRenderAttributes;
-    protected renderTemplate(): TemplateResult;
+    protected syncDateInputState(): void;
 }
 export {};
 //# sourceMappingURL=datepicker-button.d.ts.map

package/datepicker/common/datepicker-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/datepicker/common/datepicker-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAOnE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,yCAAyC,CAAC;AAEjD,OAAO,eAAe,CAAC;;AAMvB,8BAAsB,mBAAmB,CAAC,CAAC,GAAG,IAAI,CAChD,SAAQ,wBACR,YAAW,oBAAoB,CAAC,CAAC,CAAC;IAElC,4BAA4B;IAC5B,IACW,UAAU,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,EAO1D;IACD,IAAW,UAAU,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG,IAAI,CAEtD;IACD,OAAO,CAAC,WAAW,CAAC,CAAiC;IAErD,qEAAqE;IAC5D,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAQ;IAEpE,0EAA0E;IAC1E,OAAO,CAAC,SAAS,CAAS;IAE1B,0EAA0E;IAC1E,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,YAAY,CAA4E;IAChG,OAAO,CAAC,SAAS,CAAmC;IAEpD,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IACpC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9D,SAAS,CAAC,QAAQ,CAAC,wBAAwB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;;IAQ9F,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC;IAEjC,iBAAiB,IAAI,IAAI;cAQtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA2B5E,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,4BAA4B;cAYjB,cAAc,IAAI,cAAc;CAGpD"}
+{"version":3,"file":"datepicker-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/datepicker/common/datepicker-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,KAAK,WAAW,EAAsB,MAAM,wBAAwB,CAAC;AAI9E,OAAO,EAAE,mBAAmB,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAEvF,OAAO,eAAe,CAAC;;AAEvB,8BAAsB,uBAAuB,CAAC,CAAC,GAAG,IAAI,CACpD,SAAQ,4BACR,YAAW,sBAAsB,CAAC,CAAC,CAAC;IAEpC,gBAAuB,sBAAsB,QAAQ;IAErD;;;;OAIG;IACH,SAEgB,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAQ;IAE5D,uCAAuC;IACvC,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,0EAA0E;IAC1E,OAAO,CAAC,cAAc,CAAQ;IAE9B,OAAO,CAAC,qBAAqB,CAAC,CAAkB;IAEhD,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,CAA4D;IACjG,SAAS,CAAC,QAAQ,wBAAmC;IACrD,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAEpB,iBAAiB,IAAI,IAAI;IAYzB,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;IAuBP,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,KAAK;IAUb,SAAS,CAAC,kBAAkB,IAAI,IAAI;cAIjB,cAAc,IAAI,cAAc;CAGpD;AAED,8BAAsB,mBAAmB,CAAC,CAAC,GAAG,IAAI,CAAE,SAAQ,uBAAuB,CAAC,CAAC,CAAC;IACpF,0EAA0E;IAC1E,OAAO,CAAC,SAAS,CAAQ;IAEzB,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9D,SAAS,CAAC,QAAQ,CAAC,wBAAwB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE9F,IAAoB,QAAQ,IAAI,OAAO,CAEtC;;IAOD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,IAAI;IAExD,OAAO,CAAC,YAAY;cAgBD,kBAAkB,IAAI,IAAI;CAmB9C"}

package/datepicker/common/datepicker-button.js

@@ -1,91 +1,96 @@
-var m = (a) => {
-  throw TypeError(a);
+var l = (e) => {
+  throw TypeError(e);
 };
-var f = (a, s, r) => s.has(a) || m("Cannot " + r);
-var _ = (a, s, r) => (f(a, s, "read from private field"), r ? r.call(a) : s.get(a)), A = (a, s, r) => s.has(a) ? m("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), c = (a, s, r, l) => (f(a, s, "write to private field"), l ? l.call(a, r) : s.set(a, r), r);
-import { __esDecorate as k, __runInitializers as u } from "tslib";
-import { html as D } from "lit";
-import { property as g, state as y } from "lit/decorators.js";
-import { SbbButtonBaseElement as v } from "../../core/base-elements.js";
-import { readConfig as E } from "../../core/config.js";
-import { SbbLanguageController as w } from "../../core/controllers.js";
-import { defaultDateAdapter as S } from "../../core/datetime.js";
-import { i18nToday as C } from "../../core/i18n.js";
-import { SbbNegativeMixin as x } from "../../core/mixins.js";
-import { SbbDatepickerAssociationControlController as I } from "./datepicker-association-controllers.js";
+var p = (e, t, i) => t.has(e) || l("Cannot " + i);
+var h = (e, t, i) => (p(e, t, "read from private field"), i ? i.call(e) : t.get(e)), c = (e, t, i) => t.has(e) ? l("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), o = (e, t, i, u) => (p(e, t, "write to private field"), u ? u.call(e, i) : t.set(e, i), i);
+import { __runInitializers as b, __esDecorate as m } from "tslib";
+import { html as f } from "lit";
+import { property as g } from "lit/decorators.js";
+import { SbbButtonBaseElement as A } from "../../core/base-elements.js";
+import { readConfig as D } from "../../core/config.js";
+import { SbbLanguageController as _ } from "../../core/controllers.js";
+import { defaultDateAdapter as v } from "../../core/datetime.js";
+import { idReference as y } from "../../core/decorators.js";
+import { i18nToday as S } from "../../core/i18n.js";
+import { SbbNegativeMixin as E } from "../../core/mixins.js";
+import { SbbDateInputElement as I } from "../../date-input.js";
 import "../../icon.js";
-const O = (a) => (a == null ? void 0 : a.localName) === "sbb-date-input";
-let V = (() => {
-  var n, d;
-  let a = x(v), s = [], r, l, b = [], h = [];
-  return d = class extends a {
+let C = (() => {
+  var r, a;
+  let e = E(A), t, i = [], u = [];
+  return a = class extends e {
     constructor() {
-      var t, e;
-      super();
-      A(this, n);
-      this._datepicker = u(this, s), c(this, n, u(this, b, null)), this._disabled = (u(this, h), !1), this._inputDisabled = !1, this._dateAdapter = ((t = E().datetime) == null ? void 0 : t.dateAdapter) ?? S, this._language = new w(this), this.addController(new I(this)), (e = this.addEventListener) == null || e.call(this, "click", () => this._handleClick());
+      super(...arguments);
+      c(this, r);
+      o(this, r, b(this, i, null)), this._inputDisabled = (b(this, u), !0), this.dateAdapter = D().datetime?.dateAdapter ?? v, this.language = new _(this);
     }
-    /** Datepicker reference. */
-    set datepicker(t) {
-      var e, i, o;
-      this._datepicker = typeof t == "string" ? (
-        // In case the value is a string, it should be treated as an id reference
-        // and attempt to be resolved.
-        ((o = (i = (e = this.getRootNode) == null ? void 0 : e.call(this)) == null ? void 0 : i.querySelector) == null ? void 0 : o.call(i, `#${t}`)) ?? null
-      ) : t;
+    /**
+     * The associated date input element.
+     *
+     * For attribute usage, provide an id reference.
+     */
+    get input() {
+      return h(this, r);
     }
-    get datepicker() {
-      return this._datepicker ?? null;
+    set input(s) {
+      o(this, r, s);
     }
-    /** The boundary date (min/max) as set in the date-picker's input. */
-    get boundary() {
-      return _(this, n);
-    }
-    set boundary(t) {
-      c(this, n, t);
+    /** Whether this button is disabled. */
+    get disabled() {
+      return !!this._inputDisabled;
     }
     connectedCallback() {
-      var e, i;
-      super.connectedCallback();
-      const t = ((e = this.closest) == null ? void 0 : e.call(this, "sbb-form-field")) ?? ((i = this.closest) == null ? void 0 : i.call(this, "[data-form-field]"));
-      t && (this.negative = t.hasAttribute("negative"));
+      super.connectedCallback(), this.toggleAttribute("disabled", this.disabled);
+      const s = this.closest?.("sbb-form-field");
+      s && (customElements.upgrade?.(s), this.negative = s.negative, I.resolveAssociation(this), this.slot ||= this._findSlotPosition());
+    }
+    requestUpdate(s, n, d) {
+      super.requestUpdate(s, n, d), s === "input" && this.input !== n ? (this._inputAbortController?.abort(), this._inputDisabled = !0, this.input && (this._inputAbortController = new AbortController(), this.slot = this._findSlotPosition(), customElements.upgrade?.(this.input), this._sync(), this.input.addEventListener("ɵchange", () => this._sync())), this.hasUpdated && this.toggleAttribute("disabled", this.disabled)) : !s && this.hasUpdated && this.input && this._sync();
     }
-    willUpdate(t) {
-      var o, p;
-      if (super.willUpdate(t), !this.datepicker || !this._dateAdapter.isValid(this.datepicker.valueAsDate)) {
-        this._disabled = !0, this.setAttribute("aria-label", this.i18nOffBoundaryDay[this._language.current]), this._setDisabledRenderAttributes();
-        return;
-      }
-      const e = this.findAvailableDate(this.datepicker.valueAsDate);
-      this._disabled = this._dateAdapter.compareDate(e, this.datepicker.valueAsDate) === 0, this._inputDisabled = (((o = this.datepicker.inputElement) == null ? void 0 : o.disabled) || ((p = this.datepicker.inputElement) == null ? void 0 : p.readOnly)) ?? !0, this._setDisabledRenderAttributes();
-      const i = this._dateAdapter.compareDate(this.datepicker.now, this.datepicker.valueAsDate) === 0 ? C[this._language.current].toLowerCase() : this._dateAdapter.getAccessibilityFormatDate(this.datepicker.valueAsDate);
-      this.setAttribute("aria-label", this.i18nSelectOffBoundaryDay(i)[this._language.current]);
+    _findSlotPosition() {
+      return !this.input || this.compareDocumentPosition(this.input) & Node.DOCUMENT_POSITION_FOLLOWING ? "prefix" : "suffix";
     }
-    _handleClick() {
-      if (!this.datepicker || this.hasAttribute("data-disabled"))
-        return;
-      const t = this.datepicker.valueAsDate ?? this.datepicker.now, e = this.findAvailableDate(t);
-      if (this._dateAdapter.compareDate(e, t) !== 0) {
-        const i = this.datepicker.inputElement;
-        O(i) ? (i.valueAsDate = e, i.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), i.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), i.dispatchEvent(new Event("blur", { composed: !0 }))) : this.datepicker.valueAsDate = e;
-      }
+    _sync() {
+      this.syncDateInputState(), this.toggleAttribute("disabled", this.disabled), this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0");
     }
-    _setDisabledRenderAttributes() {
-      const t = this._disabled || this._inputDisabled;
-      this.toggleAttribute("data-disabled", t), t ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0"));
+    syncDateInputState() {
+      this._inputDisabled = this.input.disabled || this.input.readOnly;
     }
     renderTemplate() {
-      return D`<sbb-icon name=${this.iconName}></sbb-icon>`;
+      return f`<sbb-icon name=${this.iconName}></sbb-icon>`;
     }
-  }, n = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    r = [g({ attribute: "datepicker" })], l = [y()], k(d, null, r, { kind: "setter", name: "datepicker", static: !1, private: !1, access: { has: (e) => "datepicker" in e, set: (e, i) => {
-      e.datepicker = i;
-    } }, metadata: t }, null, s), k(d, null, l, { kind: "accessor", name: "boundary", static: !1, private: !1, access: { has: (e) => "boundary" in e, get: (e) => e.boundary, set: (e, i) => {
-      e.boundary = i;
-    } }, metadata: t }, b, h), t && Object.defineProperty(d, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), d;
+  }, r = new WeakMap(), (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
+    t = [y(), g()], m(a, null, t, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (n) => "input" in n, get: (n) => n.input, set: (n, d) => {
+      n.input = d;
+    } }, metadata: s }, i, u), s && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), a.sbbDateInputAssociated = !0, a;
 })();
+class M extends C {
+  get disabled() {
+    return this._disabled || super.disabled;
+  }
+  constructor() {
+    super(), this._disabled = !0, this.addEventListener?.("click", () => this._handleClick());
+  }
+  _handleClick() {
+    if (!this.input || this.disabled)
+      return;
+    const t = this.input.valueAsDate ?? this.dateAdapter.today(), i = this.findAvailableDate(t);
+    this.dateAdapter.isValid(i) && this.dateAdapter.compareDate(i, t) !== 0 && (this.input.valueAsDate = i, this.input.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })), this.input.dispatchEvent(new Event("blur", { composed: !0 })));
+  }
+  syncDateInputState() {
+    if (super.syncDateInputState(), !this.dateAdapter.isValid(this.input.valueAsDate)) {
+      this._disabled = !0, this.internals.ariaLabel = this.i18nOffBoundaryDay[this.language.current];
+      return;
+    }
+    const t = this.findAvailableDate(this.input.valueAsDate);
+    this._disabled = !this.dateAdapter.isValid(t) || this.dateAdapter.compareDate(t, this.input.valueAsDate) === 0;
+    const i = this.dateAdapter.compareDate(this.dateAdapter.today(), this.input.valueAsDate) === 0 ? S[this.language.current].toLowerCase() : this.dateAdapter.getAccessibilityFormatDate(this.input.valueAsDate);
+    this.internals.ariaLabel = this.i18nSelectOffBoundaryDay(i)[this.language.current];
+  }
+}
 export {
-  V as SbbDatepickerButton
+  M as SbbDatepickerButton,
+  C as SbbDatepickerButtonBase
 };

package/datepicker/common.d.ts

@@ -2,5 +2,4 @@
  * @entrypoint
  */
 export * from './common/datepicker-button.js';
-export * from './common/datepicker-association-controllers.js';
 //# sourceMappingURL=common.d.ts.map

package/datepicker/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/datepicker/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gDAAgD,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/datepicker/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,+BAA+B,CAAC"}

package/datepicker/common.js

@@ -1,7 +1,5 @@
-import { SbbDatepickerButton as r } from "./common/datepicker-button.js";
-import { SbbDatepickerAssociationControlController as i, SbbDatepickerAssociationHostController as b } from "./common/datepicker-association-controllers.js";
+import { SbbDatepickerButton as b, SbbDatepickerButtonBase as o } from "./common/datepicker-button.js";
 export {
-  i as SbbDatepickerAssociationControlController,
-  b as SbbDatepickerAssociationHostController,
-  r as SbbDatepickerButton
+  b as SbbDatepickerButton,
+  o as SbbDatepickerButtonBase
 };