@latty-ds/web 0.10.3 → 1.0.0

package/dist/components/button/index.js

@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/components/button/button.ts
-import { html as html2, nothing } from "lit";
+import { html as html2, nothing, LitElement as LitElement2 } from "lit";
 
 // src/base/themeable-element.ts
 import { LitElement } from "lit";
@@ -37,6 +37,7 @@ __decorateClass([
 // src/components/button/button.ts
 import { customElement as customElement2, property as property3 } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
 
 // src/components/button/button.styles.ts
 import { css } from "lit";
@@ -77,6 +78,7 @@ var buttonStyles = css`
     justify-content: center;
     line-height: 1;
     min-width: var(--lt-button-min-width, 88px);
+    position: relative;
     user-select: none;
     transition:
       background-color 120ms ease,
@@ -84,6 +86,25 @@ var buttonStyles = css`
       transform 50ms ease;
   }
 
+  /* Wraps the icons/slot so it can be hidden (opacity, not display/visibility — that would drop it from the
+     accessibility tree too) while loading without collapsing the button's width or its accessible name. */
+  .label {
+    align-items: center;
+    display: inline-flex;
+    gap: inherit;
+  }
+
+  .label.is-loading {
+    opacity: 0;
+  }
+
+  /* Centered over the (invisible but still laid-out) label, not laid out alongside it. */
+  .spinner {
+    inset: 0;
+    margin: auto;
+    position: absolute;
+  }
+
   [part='base']:active {
     transform: translateY(1px);
   }
@@ -139,10 +160,10 @@ var buttonStyles = css`
     --_active-bg: var(--lt-interactive-secondary-bg-active);
   }
   :host([variant='neutral']) {
-    --_bg: var(--lt-color-neutral-500);
+    --_bg: var(--lt-interactive-neutral-bg);
     --_color: var(--lt-color-neutral-50);
-    --_hover-bg: var(--lt-color-neutral-700);
-    --_active-bg: var(--lt-color-neutral-800);
+    --_hover-bg: var(--lt-interactive-neutral-bg-hover);
+    --_active-bg: var(--lt-interactive-neutral-bg-active);
   }
   :host([variant='success']) {
     --_bg: var(--lt-interactive-success-bg);
@@ -329,6 +350,17 @@ var buttonStyles = css`
     letter-spacing: 0.05rem;
     text-transform: lowercase;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      transition: none;
+    }
+    .spinner {
+      animation: none;
+    }
+  }
 `;
 
 // src/components/shared/aria-forwarding.ts
@@ -337,7 +369,8 @@ var FORWARDED_ARIA_ATTRIBUTES = [
   "aria-expanded",
   "aria-haspopup",
   "aria-controls",
-  "aria-current"
+  "aria-current",
+  "aria-description"
 ];
 var AriaForwardingController = class {
   constructor(host, getTarget) {
@@ -364,6 +397,29 @@ var AriaForwardingController = class {
   }
 };
 
+// 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/spinner/spinner.ts
 import { html } from "lit";
 import { customElement, property as property2 } from "lit/decorators.js";
@@ -464,6 +520,13 @@ var Button = class extends ThemeableElement {
   constructor() {
     super();
     this._ariaForwarding = new AriaForwardingController(this, () => this.shadowRoot?.querySelector('[part="base"]'));
+    this._fieldsetDisabled = new FormDisabledController(this);
+    this._blockClickWhileBusy = (e) => {
+      if (this.disabled || this.loading || this._fieldsetDisabled.fieldsetDisabled) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
     this.variant = "primary";
     this.appearance = "filled";
     this.bordered = false;
@@ -478,22 +541,69 @@ var Button = class extends ThemeableElement {
     this.target = "";
     this.rel = "";
     this.type = "button";
+    this.name = "";
+    this.value = "";
+    this.formAction = "";
+    // Delegates the actual submission to a hidden native <button>, kept in sync and attached to the resolved form
+    // only for the duration of the submission (BTN-3). Two platform constraints make this necessary rather than
+    // calling form.requestSubmit() directly on the host or passing it as the submitter: a form-associated custom
+    // element can't itself be `requestSubmit()`'s submitter (Chromium: "the specified element is not a submit
+    // button"), and name/value/formaction submitter semantics only apply to the specific button that triggered the
+    // submission — setting this element's own form value unconditionally would submit name/value even when a
+    // *different* button (or an Enter keypress) triggered the submit. This is the same workaround other
+    // form-associated custom element implementations use for the same gap.
+    this._proxySubmitBtn = null;
     this._internals = this.attachInternals();
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._blockClickWhileBusy, { capture: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._blockClickWhileBusy, { capture: true });
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  _getProxySubmitBtn() {
+    if (!this._proxySubmitBtn) {
+      this._proxySubmitBtn = document.createElement("button");
+      this._proxySubmitBtn.type = "submit";
+      this._proxySubmitBtn.hidden = true;
+    }
+    return this._proxySubmitBtn;
+  }
   _handleClick() {
-    if (this.disabled || this.loading) return;
-    const form = this.closest("form");
+    if (this.disabled || this.loading || this._fieldsetDisabled.fieldsetDisabled) return;
+    const form = this._internals.form;
     if (!form) return;
-    if (this.type === "submit") form.requestSubmit();
-    else if (this.type === "reset") form.reset();
+    if (this.type === "reset") {
+      form.reset();
+      return;
+    }
+    if (this.type !== "submit") return;
+    const proxy = this._getProxySubmitBtn();
+    if (this.name) proxy.name = this.name;
+    else proxy.removeAttribute("name");
+    if (this.value) proxy.value = this.value;
+    else proxy.removeAttribute("value");
+    if (this.formAction) proxy.formAction = this.formAction;
+    else proxy.removeAttribute("formaction");
+    form.appendChild(proxy);
+    form.requestSubmit(proxy);
+    proxy.remove();
   }
   render() {
-    const isDisabled = this.disabled || this.loading;
-    const inner = this.loading ? html2`<lt-spinner></lt-spinner>` : html2`
-          ${this.iconStart ? html2`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : ""}
-          <slot></slot>
-          ${this.iconEnd ? html2`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : ""}
-        `;
+    const isDisabled = this.disabled || this.loading || this._fieldsetDisabled.fieldsetDisabled;
+    const inner = html2`
+      <span class=${classMap({ label: true, "is-loading": this.loading })} part="label">
+        ${this.iconStart ? html2`<lt-icon class="icon-start" name=${this.iconStart}></lt-icon>` : ""}
+        <slot></slot>
+        ${this.iconEnd ? html2`<lt-icon class="icon-end" name=${this.iconEnd}></lt-icon>` : ""}
+      </span>
+      ${this.loading ? html2`<lt-spinner class="spinner" part="spinner"></lt-spinner>` : ""}
+    `;
     if (this.href) {
       const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
       return html2`
@@ -523,6 +633,10 @@ var Button = class extends ThemeableElement {
 };
 Button.styles = buttonStyles;
 Button.formAssociated = true;
+// Makes host.focus() move focus into the shadow root (the inner <button>/<a>) instead of being a no-op —
+// without it, activeElement never leaves <body>, silently breaking autofocus and any focus restore that calls
+// .focus() on this element (a closed dialog/dropdown returning focus to its trigger, for example).
+Button.shadowRootOptions = { ...LitElement2.shadowRootOptions, delegatesFocus: true };
 __decorateClass([
   property3({ reflect: true })
 ], Button.prototype, "variant", 2);
@@ -565,6 +679,15 @@ __decorateClass([
 __decorateClass([
   property3({ reflect: true })
 ], Button.prototype, "type", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Button.prototype, "name", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Button.prototype, "value", 2);
+__decorateClass([
+  property3({ attribute: "formaction" })
+], Button.prototype, "formAction", 2);
 Button = __decorateClass([
   customElement2("lt-button")
 ], Button);

package/dist/components/calendar/calendar.d.ts

@@ -1,15 +1,15 @@
 import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
 import '@latty-ds/icons';
-import type { CalendarMode, CalendarWeekStart } from './calendar.types';
+import type { CalendarMode, CalendarWeekStart, CalendarLabels } from './calendar.types';
 /**
  * A visual calendar grid for single-date or date-range selection.
  *
  * @element lt-calendar
  *
- * @fires {CustomEvent<{value: string}>} change - Fired when a single date is selected (mode="single").
- * @fires {CustomEvent<{valueStart: string, valueEnd: string}>} change - Fired when a full range is selected (mode="range").
- * @fires {CustomEvent<{year: number, month: number}>} month-change - Fired when the viewed month changes.
+ * @fires {CustomEvent<{value: string} | {valueStart: string, valueEnd: string}>} change - Fired when a date is selected
+ *   (mode="single", detail `{ value }`) or when a full range is selected (mode="range", detail `{ valueStart, valueEnd }`).
+ * @fires {CustomEvent<{year: number, month: number}>} monthchange - Fired when the viewed month changes.
  *
  * @example
  * ```html
@@ -42,16 +42,24 @@ export declare class Calendar extends ThemeableElement {
     max: string;
     /** BCP 47 locale used for day and month names. */
     locale: string;
-    /** First day of the week. 0 = Sunday, 1 = Monday. */
-    weekStart: CalendarWeekStart;
+    /**
+     * First day of the week (0 = Sunday … 6 = Saturday). Defaults to whatever `locale` implies (via
+     * `Intl.Locale#getWeekInfo`, falling back to Sunday) — set this explicitly only to override that.
+     */
+    weekStart?: CalendarWeekStart;
+    /** `weekStart` if explicitly set, otherwise derived from `locale`. Internal code should always read this, never `weekStart` directly. */
+    private get _weekStart();
     /** Whether to render filler days from the previous and next month. */
     showOutsideDays: boolean;
     /** Disables all interaction. */
     disabled: boolean;
     /** Number of month panels to display side-by-side. */
     months: number;
-    /** Specific dates to disable, as an array of Date objects. Not reflected as an attribute. */
+    /** Specific dates to disable, as an array of Date objects. Set as a JS property (`.disabledDates`). */
     disabledDates: Date[];
+    /** Overridable UI text (nav button labels, the "Today" footer button, the month/year picker toggle), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<CalendarLabels>;
+    private get _labels();
     private _viewYear;
     private _viewMonth;
     private _focusedDate;

package/dist/components/calendar/calendar.types.d.ts

@@ -1,4 +1,5 @@
-export type CalendarWeekStart = '0' | '1';
+/** First day of the week, matching `Date#getDay()`'s convention: 0 = Sunday, 1 = Monday, … 6 = Saturday. */
+export type CalendarWeekStart = '0' | '1' | '2' | '3' | '4' | '5' | '6';
 export type CalendarMode = 'single' | 'range';
 export interface CalendarDay {
     date: Date;
@@ -13,3 +14,18 @@ export interface CalendarDay {
     isRangeHoverEnd: boolean;
     isInHoverRange: boolean;
 }
+/** Overridable UI text for `lt-calendar`, for i18n. */
+export interface CalendarLabels {
+    /** Text of the footer button that jumps the view back to today. */
+    today: string;
+    /** Accessible label for the "view previous month" button. */
+    previousMonth: string;
+    /** Accessible label for the "view next month" button. */
+    nextMonth: string;
+    /** Accessible label for the "view previous year" button, shown while picking a month/year (single-month layout only). */
+    previousYear: string;
+    /** Accessible label for the "view next year" button, shown while picking a month/year (single-month layout only). */
+    nextYear: string;
+    /** Accessible label for the month/year picker toggle button (single-month layout only), given its current visible text. */
+    chooseMonthYear: (monthYear: string) => string;
+}

package/dist/components/calendar/index.js

@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/components/calendar/calendar.ts
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property as property2, state } from "lit/decorators.js";
 
 // src/base/themeable-element.ts
@@ -184,7 +184,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;
   }
 
@@ -207,7 +209,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);
   }
 
@@ -230,14 +232,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 */
@@ -248,7 +250,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;
   }
@@ -275,7 +277,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);
   }
 
@@ -293,7 +295,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);
   }
 
@@ -416,12 +418,42 @@ 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
 var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
 
 // 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);
@@ -432,12 +464,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;
@@ -464,10 +495,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);
@@ -519,6 +550,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) {
@@ -577,7 +615,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;
@@ -630,7 +668,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) => {
@@ -657,7 +695,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;
@@ -671,7 +709,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;
@@ -757,7 +795,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}
@@ -791,11 +829,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) {
@@ -808,7 +854,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)}
             >
@@ -823,7 +869,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)}
             >
@@ -852,8 +898,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)}>
@@ -862,11 +909,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)}>
@@ -932,6 +979,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);

package/dist/components/checkbox/checkbox.d.ts

@@ -1,5 +1,5 @@
 import { ThemeableElement } from '../../base';
-import { CheckboxSize, CheckboxVariant, CheckboxLabelPosition } from './checkbox.types';
+import { CheckboxSize, CheckboxVariant, CheckboxLabelPosition, type CheckboxLabels } from './checkbox.types';
 import '@latty-ds/icons';
 /**
  * A customizable checkbox component with support for multiple variants and sizes.
@@ -35,6 +35,8 @@ export declare class Checkbox extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
     private _internals;
+    private _default;
+    private _fieldsetDisabled;
     constructor();
     /**
      * Visual variant that determines the color when checked.
@@ -47,7 +49,10 @@ export declare class Checkbox extends ThemeableElement {
      */
     size: CheckboxSize;
     /**
-     * Whether the checkbox is checked.
+     * Whether the checkbox is checked. Not reflected as an attribute — a native checkbox's `checked` _content_
+     * attribute stays fixed at the markup default and never tracks interaction (that's what `defaultChecked` is
+     * for); reflecting it live meant `formResetCallback` could no longer tell what the original default was. Read
+     * the property, or the `change` event's `detail.checked`, instead of `[checked]`/`hasAttribute('checked')`.
      * @default false
      */
     checked: boolean;
@@ -87,6 +92,9 @@ export declare class Checkbox extends ThemeableElement {
      * @default 'on'
      */
     value: string;
+    /** Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<CheckboxLabels>;
+    private get _labels();
     /**
      * Reference to the native input element.
      * @private
@@ -94,6 +102,9 @@ export declare class Checkbox extends ThemeableElement {
     private input;
     updated(changedProperties: Map<string, unknown>): 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;
     /**
@@ -111,5 +122,6 @@ export declare class Checkbox extends ThemeableElement {
      * @private
      */
     private renderCheckmark;
+    protected firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/checkbox/checkbox.types.d.ts

@@ -19,3 +19,8 @@ export type CheckboxSize = 'sm' | 'md' | 'lg';
  */
 export type CheckboxVariant = 'primary' | 'secondary' | 'success' | 'error' | 'info';
 export type CheckboxLabelPosition = 'left' | 'right';
+/** Overridable UI text for `lt-checkbox`, for i18n. */
+export interface CheckboxLabels {
+    /** Validation message shown when a required checkbox is left unchecked. */
+    validationMessage: string;
+}