@latty-ds/web 0.10.3 → 1.0.0

package/dist/components/date-input/index.js

@@ -9,8 +9,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
+// src/components/shared/form-field.ts
+var fieldCount = 0;
+var createFieldIds = () => ({ helper: `lt-field-${fieldCount++}-helper` });
+
 // src/components/date-input/date-input.ts
-import { html as html3, nothing } from "lit";
+import { html as html3, nothing as nothing2 } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { customElement as customElement3, property as property4, state as state2 } from "lit/decorators.js";
 
 // src/base/themeable-element.ts
@@ -39,7 +44,7 @@ __decorateClass([
 import "@latty-ds/icons";
 
 // src/components/calendar/calendar.ts
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property as property2, state } from "lit/decorators.js";
 import "@latty-ds/icons";
 
@@ -189,7 +194,9 @@ var calendarStyles = css`
     width: 100%;
   }
 
-  .day:disabled {
+  /* aria-disabled, not the disabled attribute — a disabled day stays focusable, so keyboard users can arrow
+     through it instead of the roving tabindex skipping straight over it (it just can't be selected). */
+  .day[aria-disabled='true'] {
     cursor: not-allowed;
   }
 
@@ -212,7 +219,7 @@ var calendarStyles = css`
     width: 2.25rem;
   }
 
-  .day:hover:not(:disabled) .day__inner {
+  .day:hover:not([aria-disabled='true']) .day__inner {
     background: var(--lt-bg-neutral-subtle);
   }
 
@@ -235,14 +242,14 @@ var calendarStyles = css`
     font-weight: 600;
   }
 
-  .day--selected:hover:not(:disabled) .day__inner {
+  .day--selected:hover:not([aria-disabled='true']) .day__inner {
     background: var(--lt-interactive-primary-bg-hover);
   }
 
-  /* Outside days */
+  /* Outside days — dimmed by the muted text color alone. They're enabled, clickable buttons, and a 0.5
+     opacity on top of muted text took them to ~2:1 (WCAG AA needs 4.5:1). */
   .day--outside {
     color: var(--lt-text-muted);
-    opacity: 0.5;
   }
 
   /* Empty filler cell */
@@ -253,7 +260,7 @@ var calendarStyles = css`
     pointer-events: none;
   }
 
-  .day:disabled .day__inner {
+  .day[aria-disabled='true'] .day__inner {
     color: var(--lt-text-disabled);
     opacity: 0.4;
   }
@@ -280,7 +287,7 @@ var calendarStyles = css`
     background: var(--lt-bg-primary-subtle);
   }
 
-  .day--in-range:hover:not(:disabled) .day__inner {
+  .day--in-range:hover:not([aria-disabled='true']) .day__inner {
     background: var(--lt-bg-neutral-subtle);
   }
 
@@ -298,7 +305,7 @@ var calendarStyles = css`
     font-weight: 600;
   }
 
-  .day--range-confirmed:hover:not(:disabled) .day__inner {
+  .day--range-confirmed:hover:not([aria-disabled='true']) .day__inner {
     background: var(--lt-interactive-primary-bg-hover);
   }
 
@@ -421,6 +428,20 @@ var calendarStyles = css`
     cursor: not-allowed;
     opacity: 0.5;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .month-label-btn,
+    .picker-chevron,
+    .nav-btn,
+    .day,
+    .day__inner,
+    .picker-month-btn,
+    .today-btn {
+      transition: none;
+    }
+  }
 `;
 
 // src/utils/dispatch.ts
@@ -437,7 +458,30 @@ var createClickOutsideHandler = (host, onOutside, options) => {
   return () => document.removeEventListener(eventName, handler, capture ? { capture: true } : void 0);
 };
 
+// src/utils/dev-warn.ts
+var devWarn = (tag, message) => {
+  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    console.warn(`[${tag}] ${message}`);
+  }
+};
+
 // src/components/calendar/calendar.ts
+var DEFAULT_LABELS = {
+  today: "Today",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  previousYear: "Previous year",
+  nextYear: "Next year",
+  chooseMonthYear: (monthYear) => `${monthYear}, choose month and year`
+};
+function deriveWeekStart(locale) {
+  try {
+    const info = new Intl.Locale(locale).getWeekInfo?.();
+    if (info) return String(info.firstDay % 7);
+  } catch {
+  }
+  return "0";
+}
 var Calendar = class extends ThemeableElement {
   constructor() {
     super(...arguments);
@@ -448,12 +492,11 @@ var Calendar = class extends ThemeableElement {
     this.min = "";
     this.max = "";
     this.locale = "en-US";
-    this.weekStart = "0";
     this.showOutsideDays = true;
     this.disabled = false;
     this.months = 1;
-    /** Specific dates to disable, as an array of Date objects. Not reflected as an attribute. */
     this.disabledDates = [];
+    this.labels = {};
     this._viewYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._viewMonth = (/* @__PURE__ */ new Date()).getMonth();
     this._focusedDate = null;
@@ -480,10 +523,10 @@ var Calendar = class extends ThemeableElement {
       if (this.mode === "range") this._hoverDate = null;
     };
     this._handleKeyDown = (e) => {
-      const today = /* @__PURE__ */ new Date();
-      const focusedDate = this._focusedDate ?? this._parseDate(this.value) ?? new Date(this._viewYear, this._viewMonth, today.getDate() || 1);
+      const currentIso = e.currentTarget.dataset.date ?? "";
+      const focusedDate = this._parseDate(currentIso) ?? new Date(this._viewYear, this._viewMonth, 1);
       const next = new Date(focusedDate);
-      const weekStart = Number(this.weekStart);
+      const weekStart = Number(this._weekStart);
       switch (e.key) {
         case "ArrowRight":
           next.setDate(next.getDate() + 1);
@@ -535,6 +578,13 @@ var Calendar = class extends ThemeableElement {
       this._focusCell(this._toIso(next));
     };
   }
+  /** `weekStart` if explicitly set, otherwise derived from `locale`. Internal code should always read this, never `weekStart` directly. */
+  get _weekStart() {
+    return this.weekStart ?? deriveWeekStart(this.locale);
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
   willUpdate(changed) {
     super.willUpdate(changed);
     if (changed.has("value") && this.value) {
@@ -593,7 +643,7 @@ var Calendar = class extends ThemeableElement {
   _buildDays(year = this._viewYear, month = this._viewMonth) {
     const today = /* @__PURE__ */ new Date();
     const selected = this._parseDate(this.value);
-    const weekStart = Number(this.weekStart);
+    const weekStart = Number(this._weekStart);
     const rangeStart = this.mode === "range" ? this._parseDate(this.valueStart) : null;
     const rangeEnd = this.mode === "range" ? this._parseDate(this.valueEnd) : null;
     let visHoverStart = null;
@@ -646,7 +696,7 @@ var Calendar = class extends ThemeableElement {
     return days;
   }
   _getWeekdayLabels() {
-    const weekStart = Number(this.weekStart);
+    const weekStart = Number(this._weekStart);
     const fmt = new Intl.DateTimeFormat(this.locale, { weekday: "narrow" });
     const refSunday = new Date(2026, 0, 4);
     return Array.from({ length: 7 }, (_, i) => {
@@ -673,7 +723,7 @@ var Calendar = class extends ThemeableElement {
     this._viewMonth = month;
     this._viewYear = year;
     this._focusedDate = null;
-    dispatch(this, "month-change", { year: this._viewYear, month: this._viewMonth });
+    dispatch(this, "monthchange", { year: this._viewYear, month: this._viewMonth });
   }
   _openPicker() {
     this._pickerYear = this._viewYear;
@@ -687,7 +737,7 @@ var Calendar = class extends ThemeableElement {
     this._viewMonth = month;
     this._pickingMonthYear = false;
     this._focusedDate = null;
-    dispatch(this, "month-change", { year: this._viewYear, month: this._viewMonth });
+    dispatch(this, "monthchange", { year: this._viewYear, month: this._viewMonth });
   }
   _selectDay(day) {
     if (day.isDisabled || this.disabled) return;
@@ -773,7 +823,7 @@ var Calendar = class extends ThemeableElement {
         role="gridcell"
         class=${classes}
         data-date=${iso}
-        ?disabled=${day.isDisabled}
+        aria-disabled=${day.isDisabled ? "true" : nothing}
         aria-selected=${isSelected ? "true" : "false"}
         aria-label=${this._dayAriaLabel(day.date)}
         tabindex=${this._isSameDay(day.date, rovingDate) ? 0 : -1}
@@ -807,11 +857,19 @@ var Calendar = class extends ThemeableElement {
   render() {
     const today = /* @__PURE__ */ new Date();
     const isMulti = this.months > 1;
+    const isInView = (date) => {
+      if (!isMulti) return date.getFullYear() === this._viewYear && date.getMonth() === this._viewMonth;
+      for (let i = 0; i < this.months; i++) {
+        const { year, month } = this._monthAtOffset(i);
+        if (date.getFullYear() === year && date.getMonth() === month) return true;
+      }
+      return false;
+    };
     const rovingAnchor = this._parseDate(this.mode === "range" ? this.valueStart : this.value);
-    const rovingDate = this._focusedDate ?? rovingAnchor ?? (today.getFullYear() === this._viewYear && today.getMonth() === this._viewMonth ? today : null) ?? new Date(this._viewYear, this._viewMonth, 1);
+    const rovingDate = (this._focusedDate && isInView(this._focusedDate) ? this._focusedDate : null) ?? (rovingAnchor && isInView(rovingAnchor) ? rovingAnchor : null) ?? (today.getFullYear() === this._viewYear && today.getMonth() === this._viewMonth ? today : null) ?? new Date(this._viewYear, this._viewMonth, 1);
     const footer = html`
       <div class="footer">
-        <button class="today-btn" ?disabled=${this.disabled} @click=${this._goToToday}>Today</button>
+        <button class="today-btn" ?disabled=${this.disabled} @click=${this._goToToday}>${this._labels.today}</button>
       </div>
     `;
     if (isMulti) {
@@ -824,7 +882,7 @@ var Calendar = class extends ThemeableElement {
           <div class="header">
             <button
               class="nav-btn"
-              aria-label="Previous month"
+              aria-label=${this._labels.previousMonth}
               ?disabled=${this.disabled}
               @click=${() => this._navigate(-1)}
             >
@@ -839,7 +897,7 @@ var Calendar = class extends ThemeableElement {
             </div>
             <button
               class="nav-btn"
-              aria-label="Next month"
+              aria-label=${this._labels.nextMonth}
               ?disabled=${this.disabled}
               @click=${() => this._navigate(1)}
             >
@@ -868,8 +926,9 @@ var Calendar = class extends ThemeableElement {
     const monthLabel = new Intl.DateTimeFormat(this.locale, { month: "long", year: "numeric" }).format(
       new Date(this._viewYear, this._viewMonth)
     );
-    const prevLabel = this._pickingMonthYear ? "Previous year" : "Previous month";
-    const nextLabel = this._pickingMonthYear ? "Next year" : "Next month";
+    const prevLabel = this._pickingMonthYear ? this._labels.previousYear : this._labels.previousMonth;
+    const nextLabel = this._pickingMonthYear ? this._labels.nextYear : this._labels.nextMonth;
+    const monthYearVisibleText = this._pickingMonthYear ? String(this._pickerYear) : monthLabel;
     const header = html`
       <div class="header">
         <button class="nav-btn" aria-label=${prevLabel} ?disabled=${this.disabled} @click=${() => this._navigate(-1)}>
@@ -878,11 +937,11 @@ var Calendar = class extends ThemeableElement {
         <button
           class="month-label-btn ${this._pickingMonthYear ? "month-label-btn--open" : ""}"
           aria-expanded=${this._pickingMonthYear ? "true" : "false"}
-          aria-label="Choose month and year"
+          aria-label=${this._labels.chooseMonthYear(monthYearVisibleText)}
           ?disabled=${this.disabled}
           @click=${() => this._pickingMonthYear ? this._closePicker() : this._openPicker()}
         >
-          <span aria-live="polite" aria-atomic="true">${this._pickingMonthYear ? this._pickerYear : monthLabel}</span>
+          <span aria-live="polite" aria-atomic="true">${monthYearVisibleText}</span>
           <lt-icon name="arrow-down" size="sm" class="picker-chevron"></lt-icon>
         </button>
         <button class="nav-btn" aria-label=${nextLabel} ?disabled=${this.disabled} @click=${() => this._navigate(1)}>
@@ -948,6 +1007,12 @@ __decorateClass([
 __decorateClass([
   property2({ type: Number, reflect: true })
 ], Calendar.prototype, "months", 2);
+__decorateClass([
+  property2({ attribute: false })
+], Calendar.prototype, "disabledDates", 2);
+__decorateClass([
+  property2({ type: Object })
+], Calendar.prototype, "labels", 2);
 __decorateClass([
   state()
 ], Calendar.prototype, "_viewYear", 2);
@@ -1139,6 +1204,20 @@ var textStyles = css2`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -1163,7 +1242,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html2`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -2588,8 +2668,8 @@ var dateInputStyles = [
     }
 
     .required-indicator {
-      color: var(--lt-color-error-500);
-      margin-left: 2px;
+      color: var(--lt-text-error);
+      margin-inline-start: 2px;
     }
 
     /* ── Field ── */
@@ -2609,7 +2689,7 @@ var dateInputStyles = [
       font-family: inherit;
       justify-content: space-between;
       outline: none;
-      text-align: left;
+      text-align: start;
       transition:
         border-color 150ms ease,
         box-shadow 150ms ease;
@@ -2642,7 +2722,7 @@ var dateInputStyles = [
       color: var(--lt-text-subtle);
       flex-shrink: 0;
       line-height: 0;
-      margin-left: var(--lt-spacing-2);
+      margin-inline-start: var(--lt-spacing-2);
     }
 
     /* ── Sizes ── */
@@ -2685,7 +2765,7 @@ var dateInputStyles = [
     }
 
     :host([variant='error']) .field-btn {
-      border-color: var(--lt-color-error-500);
+      border-color: var(--lt-text-error);
     }
 
     :host([variant='error']) .field-btn:focus-visible {
@@ -2708,29 +2788,87 @@ var dateInputStyles = [
     }
 
     :host([variant='error']) .helper-text {
-      color: var(--lt-color-error-600);
+      color: var(--lt-text-error);
     }
 
     :host([variant='success']) .helper-text {
-      color: var(--lt-color-success-600);
+      color: var(--lt-text-success);
     }
 
     :host([variant='warning']) .helper-text {
-      color: var(--lt-color-warning-700);
+      color: var(--lt-text-warning);
+    }
+
+    /* ── Reduced motion ───────────────────────────────────────────────────── */
+
+    @media (prefers-reduced-motion: reduce) {
+      .field-btn {
+        transition: none;
+      }
     }
   `
 ];
 
+// src/components/shared/form-default.ts
+var FormDefaultController = class {
+  constructor(host, get) {
+    this._captured = false;
+    this._get = get;
+    host.addController(this);
+  }
+  hostConnected() {
+    if (this._captured) return;
+    this._captured = true;
+    this.value = this._get();
+  }
+};
+
+// src/components/shared/form-disabled.ts
+var FormDisabledController = class {
+  constructor(host) {
+    this._fieldsetDisabled = false;
+    this._host = host;
+    host.addController(this);
+  }
+  // No-op — this controller has no connect-time work of its own (formDisabledCallback drives it instead), but
+  // ReactiveController's members are all optional, and a class satisfying an all-optional interface with no
+  // members in common is a TS error (TS2559); this gives it one.
+  hostConnected() {
+  }
+  /** Whether an ancestor `<fieldset>` is currently disabled. */
+  get fieldsetDisabled() {
+    return this._fieldsetDisabled;
+  }
+  setFieldsetDisabled(disabled) {
+    if (this._fieldsetDisabled === disabled) return;
+    this._fieldsetDisabled = disabled;
+    this._host.requestUpdate();
+  }
+};
+
 // src/components/date-input/date-input.ts
+var ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+var DEFAULT_LABELS2 = {
+  validationMessage: "Please select a date",
+  datePicker: "Date picker"
+};
+var parseIsoDate = (value) => {
+  const match = ISO_DATE.exec(value);
+  if (!match) return null;
+  const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];
+  const date = new Date(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+};
 var DateInput = class extends ThemeableElement {
   constructor() {
     super();
+    this._default = new FormDefaultController(this, () => this.value);
+    this._fieldsetDisabled = new FormDisabledController(this);
     this.value = "";
     this.min = "";
     this.max = "";
     this.locale = "en-US";
     this.format = "medium";
-    this.weekStart = "0";
     this.label = "";
     this.placeholder = "Select a date";
     this.helperText = "";
@@ -2739,21 +2877,28 @@ var DateInput = class extends ThemeableElement {
     this.disabled = false;
     this.required = false;
     this.name = "";
-    /** Individual dates to disable in the calendar, as Date objects. */
     this.disabledDates = [];
+    this.labels = {};
     this._open = false;
     this._cleanupClickOutside = null;
     this._floatingCleanup = null;
+    this._fieldIds = createFieldIds();
     this._internals = this.attachInternals();
   }
+  get _labels() {
+    return { ...DEFAULT_LABELS2, ...this.labels };
+  }
   get _displayValue() {
-    if (!this.value) return "";
-    const [y, m, d] = this.value.split("-").map(Number);
-    const date = new Date(y, m - 1, d);
-    return new Intl.DateTimeFormat(this.locale, { dateStyle: this.format }).format(date);
+    const date = parseIsoDate(this.value);
+    if (!date) return "";
+    try {
+      return new Intl.DateTimeFormat(this.locale, { dateStyle: this.format }).format(date);
+    } catch {
+      return new Intl.DateTimeFormat(void 0, { dateStyle: this.format }).format(date);
+    }
   }
   async _openDropdown() {
-    if (this.disabled || this._open) return;
+    if (this._isDisabled || this._open) return;
     this._open = true;
     await this.updateComplete;
     const btn = this.shadowRoot?.querySelector("#field-btn");
@@ -2790,22 +2935,33 @@ var DateInput = class extends ThemeableElement {
   }
   _handleDropdownKeyDown(e) {
     if (e.key === "Escape") {
+      e.preventDefault();
       e.stopPropagation();
       this._closeDropdown();
       this.shadowRoot?.querySelector(".field-btn")?.focus();
     }
   }
-  updated() {
+  updated(changed) {
+    if (changed.has("value") && this.value && !parseIsoDate(this.value)) {
+      devWarn("lt-date-input", `value "${this.value}" isn't a plain YYYY-MM-DD date \u2014 showing the placeholder instead`);
+    }
     this._internals.setFormValue(this.value || null);
     const btn = this.shadowRoot?.querySelector("#field-btn");
     if (this.required && !this.value && btn) {
-      this._internals.setValidity({ valueMissing: true }, "Please select a date", btn);
+      this._internals.setValidity({ valueMissing: true }, this._labels.validationMessage, btn);
     } else {
       this._internals.setValidity({});
     }
   }
   formResetCallback() {
-    this.value = "";
+    this.value = this._default.value;
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+  get _isDisabled() {
+    return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
   }
   checkValidity() {
     return this._internals.checkValidity();
@@ -2820,8 +2976,8 @@ var DateInput = class extends ThemeableElement {
       <div class="wrapper">
         ${this.label ? html3`<label for="field-btn">
               <lt-text variant="label" as="span">${this.label}</lt-text>
-              ${this.required ? html3`<span class="required-indicator" aria-hidden="true">*</span>` : nothing}
-            </label>` : nothing}
+              ${this.required ? html3`<span class="required-indicator" aria-hidden="true">*</span>` : nothing2}
+            </label>` : nothing2}
 
         <div class="field">
           <button
@@ -2829,8 +2985,9 @@ var DateInput = class extends ThemeableElement {
             type="button"
             class="field-btn"
             aria-haspopup="dialog"
+            aria-describedby=${this.helperText ? this._fieldIds.helper : nothing2}
             aria-expanded=${this._open ? "true" : "false"}
-            ?disabled=${this.disabled}
+            ?disabled=${this._isDisabled}
             ?required=${this.required}
             @click=${this._openDropdown}
           >
@@ -2846,7 +3003,7 @@ var DateInput = class extends ThemeableElement {
             class="dropdown"
             popover="manual"
             role="dialog"
-            aria-label="Date picker"
+            aria-label=${this._labels.datePicker}
             @keydown=${this._handleDropdownKeyDown}
           >
             ${this._open ? html3`<lt-calendar
@@ -2854,14 +3011,14 @@ var DateInput = class extends ThemeableElement {
                   min=${this.min}
                   max=${this.max}
                   locale=${this.locale}
-                  week-start=${this.weekStart}
+                  week-start=${ifDefined(this.weekStart)}
                   .disabledDates=${this.disabledDates}
                   @change=${this._handleCalendarChange}
-                ></lt-calendar>` : nothing}
+                ></lt-calendar>` : nothing2}
           </div>
         </div>
 
-        ${this.helperText ? html3`<span class="helper-text">${this.helperText}</span>` : nothing}
+        ${this.helperText ? html3`<span id=${this._fieldIds.helper} class="helper-text">${this.helperText}</span>` : nothing2}
       </div>
     `;
   }
@@ -2869,7 +3026,7 @@ var DateInput = class extends ThemeableElement {
 DateInput.styles = dateInputStyles;
 DateInput.formAssociated = true;
 __decorateClass([
-  property4({ reflect: true })
+  property4()
 ], DateInput.prototype, "value", 2);
 __decorateClass([
   property4({ reflect: true })
@@ -2910,6 +3067,12 @@ __decorateClass([
 __decorateClass([
   property4({ reflect: true })
 ], DateInput.prototype, "name", 2);
+__decorateClass([
+  property4({ attribute: false })
+], DateInput.prototype, "disabledDates", 2);
+__decorateClass([
+  property4({ type: Object })
+], DateInput.prototype, "labels", 2);
 __decorateClass([
   state2()
 ], DateInput.prototype, "_open", 2);

package/dist/components/datepicker/datepicker.d.ts

@@ -24,10 +24,14 @@ export declare class Datepicker extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
     constructor();
     /** Native input type. */
     type: DatepickerType;
-    /** Current value in the format required by the native input (`YYYY-MM-DD`, `HH:MM`, or `YYYY-MM-DDTHH:MM`). */
+    /** Current value in the format required by the native input (`YYYY-MM-DD`, `HH:MM`, or `YYYY-MM-DDTHH:MM`).
+     * Not reflected as an attribute — read the property, or the `change` event's `detail.value`, instead of
+     * `getAttribute('value')`/`[value]`. */
     value: string;
     /** Minimum allowed value. */
     min: string;
@@ -37,6 +41,7 @@ export declare class Datepicker extends ThemeableElement {
     label: string;
     /** Helper or error text displayed below the input. */
     helperText: string;
+    private readonly _fieldIds;
     /** Visual state variant. */
     variant: DatepickerVariant;
     /** Visual size. */
@@ -52,6 +57,9 @@ export declare class Datepicker extends ThemeableElement {
     private input;
     protected updated(changed: PropertyValues): void;
     formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+    private get _isDisabled();
     checkValidity(): boolean;
     reportValidity(): boolean;
     private handleChange;