@stimulus-plumbers/controllers 0.4.0 → 0.4.1

package/src/controllers/calendar_month_controller.js

@@ -1,29 +1,59 @@
 import { Controller } from '@hotwired/stimulus';
 import { initCalendar } from '../plumbers';
+import { attachCalendarDaySelector } from '../plumbers/calendar-selector';
 import { tryParseDate } from '../plumbers/plumber/date';
 
 export default class extends Controller {
   static targets = ['daysOfWeek', 'daysOfMonth'];
-  static classes = ['dayOfWeek', 'dayOfMonth', 'row'];
+  static classes = ['dayOfWeek', 'dayOfMonth', 'dayOfOtherMonth', 'row'];
   static values = {
+    year: Number,
+    month: Number,
+    today: { type: String, default: '' },
+    selected: { type: String, default: '' },
+    since: { type: String, default: '' },
+    till: { type: String, default: '' },
     locales: { type: Array, default: ['default'] },
     weekdayFormat: { type: String, default: 'short' },
     dayFormat: { type: String, default: 'numeric' },
     daysOfOtherMonth: { type: Boolean, default: false },
-    today: { type: String, default: '' },
-    selected: { type: String, default: '' },
   };
 
   initialize() {
-    initCalendar(this, { today: this.todayValue });
+    this.selector = attachCalendarDaySelector(this, { onSelect: 'select' });
+    initCalendar(this, {
+      today: this.todayValue,
+      since: this.sinceValue || null,
+      till: this.tillValue || null,
+    });
   }
 
   connect() {
-    this.draw();
+    this.selector.attach();
+    this.navigated();
   }
 
-  navigated() {
-    this.draw();
+  disconnect() {
+    this.selector.detach();
+  }
+
+  yearValueChanged() {
+    if (!this.calendar || !this.hasYearValue) return;
+    this._scheduleNavigate();
+  }
+  monthValueChanged() {
+    if (!this.calendar || !this.hasYearValue) return;
+    this._scheduleNavigate();
+  }
+
+  _scheduleNavigate() {
+    if (this._navigatePending) return;
+    this._navigatePending = true;
+    queueMicrotask(async () => {
+      this._navigatePending = false;
+      await this.calendar.navigate(this.currentDate);
+      this.navigated();
+    });
   }
 
   selectedValueChanged() {
@@ -39,20 +69,38 @@ export default class extends Controller {
     if (!parsed) return;
 
     const time = this.daysOfMonthTarget.querySelector(`time[datetime="${parsed.toISOString()}"]`);
-    if (time) time.closest('[aria-selected]').setAttribute('aria-selected', 'true');
+    if (time) time.closest('[aria-selected]')?.setAttribute('aria-selected', 'true');
+  }
+
+  navigate(date) {
+    this.yearValue = date.getFullYear();
+    this.monthValue = date.getMonth();
+  }
+
+  step(unit, dir) {
+    return this.calendar.step(unit, dir);
   }
 
-  onSelect(event) {
-    const iso = event.detail?.iso;
-    if (iso) this.selectedValue = iso;
+  select(iso) {
+    const date = tryParseDate(iso);
+    if (!date) return;
+    this.selectedValue = iso;
+    if (date.getMonth() !== this.calendar.month || date.getFullYear() !== this.calendar.year) {
+      this.calendar.navigate(date);
+    }
+    this.dispatch('selected', { detail: { epoch: date.getTime(), iso } });
   }
 
-  draw() {
+  navigated() {
     this.drawDaysOfWeek();
     this.drawDaysOfMonth();
     this.selectedValueChanged();
   }
 
+  get currentDate() {
+    return new Date(this.yearValue, this.monthValue, 1);
+  }
+
   createDayElement(day, { selectable = false, disabled = false } = {}) {
     const element = document.createElement(selectable ? 'button' : 'div');
     element.tabIndex = -1;
@@ -93,17 +141,21 @@ export default class extends Controller {
     const today = new Date(t.getFullYear(), t.getMonth(), t.getDate()).getTime();
     const daysOfMonth = [];
     for (const date of this.calendar.daysOfMonth) {
-      const dayDisabled =
-        !date.current || this.calendar.isDisabled(date.date) || !this.calendar.isWithinRange(date.date);
+      const dayRuleDisabled = this.calendar.isDisabled(date.date) || !this.calendar.isWithinRange(date.date);
+      const dayOutsideNavigable = !date.current && this.daysOfOtherMonthValue && !dayRuleDisabled;
       const dayText = date.current || this.daysOfOtherMonthValue ? date.value : '';
       const dayElement = this.createDayElement(dayText, {
-        selectable: date.current,
-        disabled: dayDisabled,
+        selectable: date.current || dayOutsideNavigable,
+        disabled: date.current ? dayRuleDisabled : !dayOutsideNavigable,
       });
 
       if (today === date.date.getTime()) dayElement.setAttribute('aria-current', 'date');
       if (date.current || this.daysOfOtherMonthValue) dayElement.setAttribute('aria-selected', '');
-      if (this.hasDayOfMonthClass) dayElement.classList.add(...this.dayOfMonthClasses);
+      if (!date.current && this.daysOfOtherMonthValue && this.hasDayOfOtherMonthClass) {
+        dayElement.classList.add(...this.dayOfOtherMonthClasses);
+      } else if (this.hasDayOfMonthClass) {
+        dayElement.classList.add(...this.dayOfMonthClasses);
+      }
 
       const time = document.createElement('time');
       time.dateTime = date.iso;

package/src/controllers/calendar_month_selector_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus';
+import { attachCalendarDaySelector } from '../plumbers/calendar-selector';
+
+export default class extends Controller {
+  initialize() {
+    this.selector = attachCalendarDaySelector(this);
+  }
+  connect() {
+    this.selector.attach();
+  }
+  disconnect() {
+    this.selector.detach();
+  }
+}

package/src/controllers/calendar_year_controller.js

@@ -0,0 +1,104 @@
+import { Controller } from '@hotwired/stimulus';
+import { initCalendar } from '../plumbers';
+import { attachCalendarMonthSelector } from '../plumbers/calendar-selector';
+import { tryParseDate } from '../plumbers/plumber/date';
+
+const MONTHS_PER_ROW = 4;
+
+export default class extends Controller {
+  static targets = ['grid'];
+  static values = {
+    current: Number,
+    today: { type: String, default: '' },
+    selected: { type: String, default: '' },
+    since: { type: String, default: '' },
+    till: { type: String, default: '' },
+    locales: { type: Array, default: ['default'] },
+    monthFormat: { type: String, default: 'short' },
+  };
+
+  initialize() {
+    this.selector = attachCalendarMonthSelector(this);
+    initCalendar(this, {
+      today: this.todayValue,
+      year: this.currentValue || undefined,
+      since: this.sinceValue || null,
+      till: this.tillValue || null,
+    });
+  }
+
+  connect() {
+    this.selector.attach();
+    this.navigated();
+  }
+
+  disconnect() {
+    this.selector.detach();
+  }
+
+  currentValueChanged() {
+    if (!this.calendar || !this.hasCurrentValue) return;
+    this.calendar.navigate(this.currentDate);
+  }
+
+  selectedValueChanged() {
+    if (!this.hasGridTarget) return;
+    const selected = tryParseDate(this.selectedValue);
+    this.gridTarget.querySelectorAll('button[data-month]').forEach((btn) => {
+      const month = parseInt(btn.dataset.month, 10) - 1; // 0-indexed
+      btn.setAttribute('aria-selected', selected && selected.getMonth() === month ? 'true' : 'false');
+    });
+  }
+
+  navigate(date) {
+    this.currentValue = date.getFullYear();
+  }
+
+  step(unit, dir) {
+    return this.calendar.step(unit, dir);
+  }
+
+  navigated() {
+    this.drawGrid();
+  }
+
+  get currentDate() {
+    return new Date(this.currentValue, 0, 1);
+  }
+
+  drawGrid() {
+    if (!this.hasGridTarget) return;
+
+    const { year, monthsOfYear } = this.calendar;
+    const today = this.calendar.today;
+    const selectedDate = tryParseDate(this.selectedValue);
+    const cells = [];
+
+    const formatter = new Intl.DateTimeFormat(this.localesValue, { month: this.monthFormatValue });
+
+    for (const m of monthsOfYear) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.textContent = formatter.format(m.date);
+      btn.dataset.month = m.value + 1; // 1-indexed
+      btn.setAttribute('role', 'gridcell');
+      const isSelected = selectedDate && selectedDate.getMonth() === m.value;
+      btn.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+      if (m.value === today.getMonth() && year === today.getFullYear()) {
+        btn.setAttribute('aria-current', 'month');
+      }
+      if (m.disabled) btn.setAttribute('aria-disabled', 'true');
+      cells.push(btn);
+    }
+
+    const rowgroup = document.createElement('div');
+    rowgroup.setAttribute('role', 'rowgroup');
+    for (let i = 0; i < cells.length; i += MONTHS_PER_ROW) {
+      const row = document.createElement('div');
+      row.setAttribute('role', 'row');
+      for (const cell of cells.slice(i, i + MONTHS_PER_ROW)) row.appendChild(cell);
+      rowgroup.appendChild(row);
+    }
+    this.gridTarget.replaceChildren(rowgroup);
+  }
+}

package/src/controllers/calendar_year_selector_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus';
+import { attachCalendarMonthSelector } from '../plumbers/calendar-selector';
+
+export default class extends Controller {
+  initialize() {
+    this.selector = attachCalendarMonthSelector(this);
+  }
+  connect() {
+    this.selector.attach();
+  }
+  disconnect() {
+    this.selector.detach();
+  }
+}

package/src/controllers/combobox_date_controller.js

@@ -4,8 +4,8 @@ import { tryParseDate } from '../plumbers/plumber/date';
 const VIEWS = ['month', 'year', 'decade'];
 
 export default class extends Controller {
-  static targets = ['previous', 'next', 'day', 'month', 'year', 'viewTitle', 'monthView', 'yearView', 'decadeView'];
-  static outlets = ['calendar-month'];
+  static targets = ['previous', 'next', 'day', 'month', 'year', 'viewTitle'];
+  static outlets = ['calendar-month', 'calendar-year', 'calendar-decade'];
   static values = {
     date: String,
     view: { type: String, default: 'month' },
@@ -18,8 +18,6 @@ export default class extends Controller {
   initialize() {
     this.previous = this.previous.bind(this);
     this.next = this.next.bind(this);
-    this.selectMonth = this.selectMonth.bind(this);
-    this.selectYear = this.selectYear.bind(this);
   }
 
   async calendarMonthOutletConnected() {
@@ -30,7 +28,7 @@ export default class extends Controller {
     this.draw();
   }
 
-  onSelect(event) {
+  onDaySelect(event) {
     this.dateValue = event.detail.iso;
     this.draw();
     this.dispatch('selected', { detail: { value: event.detail.iso }, bubbles: true });
@@ -44,22 +42,23 @@ export default class extends Controller {
     }
   }
 
-  async selectMonth(event) {
-    const btn = event.target.closest('button[data-month]');
-    if (!btn) return;
-    const month = parseInt(btn.dataset.month, 10) - 1; // data-month is 1-indexed
+  async onMonthSelect(event) {
+    const { month } = event.detail; // 1-indexed
+    if (!this.hasCalendarMonthOutlet) return;
     const { year } = this.calendarMonthOutlet.calendar;
-    await this.calendarMonthOutlet.calendar.navigate(new Date(year, month, 1));
+    await this.calendarMonthOutlet.calendar.navigate(new Date(year, month - 1, 1));
     this.viewValue = 'month';
     this.draw();
   }
 
-  async selectYear(event) {
-    const btn = event.target.closest('button[data-year]');
-    if (!btn || btn.getAttribute('aria-disabled') === 'true') return;
-    const year = parseInt(btn.dataset.year, 10);
+  async onYearSelect(event) {
+    const { year } = event.detail;
+    if (!this.hasCalendarMonthOutlet) return;
     const { month } = this.calendarMonthOutlet.calendar;
     await this.calendarMonthOutlet.calendar.navigate(new Date(year, month, 1));
+    if (this.hasCalendarYearOutlet) {
+      this.calendarYearOutlet.navigate(this.calendarMonthOutlet.calendar.current);
+    }
     this.viewValue = 'year';
     this.draw();
   }
@@ -74,6 +73,7 @@ export default class extends Controller {
 
   async previous() {
     await this.calendarMonthOutlet.calendar.step(...this.stepArgs(-1));
+    this.syncOutletValues();
     this.draw();
   }
 
@@ -87,32 +87,15 @@ export default class extends Controller {
 
   async next() {
     await this.calendarMonthOutlet.calendar.step(...this.stepArgs(1));
+    this.syncOutletValues();
     this.draw();
   }
 
-  yearViewTargetConnected(target) {
-    target.addEventListener('click', this.selectMonth);
-  }
-
-  yearViewTargetDisconnected(target) {
-    target.removeEventListener('click', this.selectMonth);
-  }
-
-  decadeViewTargetConnected(target) {
-    target.addEventListener('click', this.selectYear);
-  }
-
-  decadeViewTargetDisconnected(target) {
-    target.removeEventListener('click', this.selectYear);
-  }
-
   draw() {
     this.drawDay();
     this.drawMonth();
     this.drawYear();
     this.drawViewTitle();
-    this.drawYearView();
-    this.drawDecadeView();
     this.drawView();
   }
 
@@ -146,49 +129,18 @@ export default class extends Controller {
     this.viewTitleTarget.textContent = this.viewTitleLabel(year, month);
   }
 
-  drawYearView() {
-    if (!this.hasYearViewTarget || !this.hasCalendarMonthOutlet) return;
-
-    const { year, month, monthsOfYear } = this.calendarMonthOutlet.calendar;
-    const today = this.calendarMonthOutlet.calendar.today;
-    const cells = [];
-
-    for (const m of monthsOfYear) {
-      const btn = document.createElement('button');
-      btn.type = 'button';
-      btn.textContent = m.short;
-      btn.dataset.month = m.value + 1; // 1-indexed to match SSR convention
-      btn.setAttribute('role', 'gridcell');
-      btn.setAttribute('aria-selected', m.value === month ? 'true' : 'false');
-      if (m.value === today.getMonth() && year === today.getFullYear()) {
-        btn.setAttribute('aria-current', 'month');
-      }
-      cells.push(btn);
-    }
-
-    this.yearViewTarget.replaceChildren(...cells);
+  syncOutletValues() {
+    if (!this.hasCalendarMonthOutlet) return;
+    const { current } = this.calendarMonthOutlet.calendar;
+    if (!current) return;
+    if (this.hasCalendarYearOutlet) this.calendarYearOutlet.navigate(current);
+    if (this.hasCalendarDecadeOutlet) this.calendarDecadeOutlet.navigate(current);
   }
 
-  drawDecadeView() {
-    if (!this.hasDecadeViewTarget || !this.hasCalendarMonthOutlet) return;
-
-    const { year, yearsOfDecade } = this.calendarMonthOutlet.calendar;
-    const todayYear = this.calendarMonthOutlet.calendar.today.getFullYear();
-    const cells = [];
-
-    for (const y of yearsOfDecade) {
-      const btn = document.createElement('button');
-      btn.type = 'button';
-      btn.textContent = y.value;
-      btn.dataset.year = y.value;
-      btn.setAttribute('role', 'gridcell');
-      btn.setAttribute('aria-selected', y.value === year ? 'true' : 'false');
-      if (y.value === todayYear) btn.setAttribute('aria-current', 'year');
-      if (y.outside) btn.setAttribute('aria-disabled', 'true');
-      cells.push(btn);
-    }
-
-    this.decadeViewTarget.replaceChildren(...cells);
+  stepArgs(direction) {
+    if (this.viewValue === 'year') return ['year', direction];
+    if (this.viewValue === 'decade') return ['year', direction * 10];
+    return ['month', direction];
   }
 
   viewTitleLabel(year, month) {
@@ -200,22 +152,21 @@ export default class extends Controller {
     return new Intl.DateTimeFormat(this.localesValue, { month: 'long', year: 'numeric' }).format(new Date(year, month));
   }
 
-  stepArgs(direction) {
-    if (this.viewValue === 'year') return ['year', direction];
-    if (this.viewValue === 'decade') return ['year', direction * 10];
-    return ['month', direction];
-  }
-
   drawView() {
-    if (this.hasMonthViewTarget) this.monthViewTarget.hidden = this.viewValue !== 'month';
-    if (this.hasYearViewTarget) this.yearViewTarget.hidden = this.viewValue !== 'year';
-    if (this.hasDecadeViewTarget) this.decadeViewTarget.hidden = this.viewValue !== 'decade';
+    const inMonthView = this.viewValue === 'month';
+    const inYearView = this.viewValue === 'year';
+    const inDecadeView = this.viewValue === 'decade';
 
     if (this.hasCalendarMonthOutlet) {
       const outlet = this.calendarMonthOutlet;
-      const monthView = this.viewValue === 'month';
-      if (outlet.hasDaysOfWeekTarget) outlet.daysOfWeekTarget.hidden = !monthView;
-      if (outlet.hasDaysOfMonthTarget) outlet.daysOfMonthTarget.hidden = !monthView;
+      if (outlet.hasDaysOfWeekTarget) outlet.daysOfWeekTarget.hidden = !inMonthView;
+      if (outlet.hasDaysOfMonthTarget) outlet.daysOfMonthTarget.hidden = !inMonthView;
+    }
+    if (this.hasCalendarYearOutlet) {
+      this.calendarYearOutletElement.hidden = !inYearView;
+    }
+    if (this.hasCalendarDecadeOutlet) {
+      this.calendarDecadeOutletElement.hidden = !inDecadeView;
     }
   }
 }

package/src/controllers/combobox_dropdown_controller.js

@@ -1,6 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 import { Requestor } from '../requestor';
 import { filterOptions } from '../researcher';
+import { ListboxNavigation } from '../accessibility/keyboard';
 
 export default class extends Controller {
   static targets = ['listbox', 'loading', 'empty'];
@@ -14,6 +15,16 @@ export default class extends Controller {
     this._requestor = new Requestor();
   }
 
+  connect() {
+    if (this.hasListboxTarget) {
+      this.listboxNav = new ListboxNavigation(this.listboxTarget);
+    }
+  }
+
+  disconnect() {
+    this._requestor.cancel();
+  }
+
   onSelect(event) {
     const option = event.target.closest('[role="option"]');
     if (!option || option.getAttribute('aria-disabled') === 'true') return;
@@ -29,27 +40,7 @@ export default class extends Controller {
   }
 
   onNavigate(event) {
-    if (!['ArrowUp', 'ArrowDown', 'Enter', ' '].includes(event.key)) return;
-    event.preventDefault();
-    if (event.key === 'Enter' || event.key === ' ') {
-      this.listboxTarget.querySelector('[aria-selected="true"]')?.click();
-      return;
-    }
-    this.step(event.key === 'ArrowDown' ? 1 : -1);
-  }
-
-  step(delta) {
-    const options = [
-      ...this.listboxTarget.querySelectorAll('[role="option"]:not([aria-disabled="true"]):not([hidden])'),
-    ];
-    if (!options.length) return;
-    const current = this.listboxTarget.querySelector('[aria-selected="true"]');
-    const idx = options.indexOf(current);
-    const next = delta > 0 ? options[Math.min(idx + 1, options.length - 1)] : options[Math.max(idx - 1, 0)];
-    if (!next || next === current) return;
-    options.forEach((o) => o.setAttribute('aria-selected', 'false'));
-    next.setAttribute('aria-selected', 'true');
-    next.scrollIntoView({ block: 'nearest' });
+    this.listboxNav?.handleKeyDown(event);
   }
 
   filter(query) {
@@ -90,8 +81,4 @@ export default class extends Controller {
   setEmpty(on) {
     if (this.hasEmptyTarget) this.emptyTarget.hidden = !on;
   }
-
-  disconnect() {
-    this._requestor.cancel();
-  }
 }

package/src/controllers/input_combobox_controller.js

@@ -8,7 +8,6 @@ export default class extends Controller {
   };
   static outlets = ['combobox-dropdown'];
 
-  // Commits the value only; popover#closeOnSelect handles dismissal.
   onSelect(event) {
     if (event.detail?.value !== undefined) this.valueValue = event.detail.value;
   }

package/src/controllers/modal_controller.js

@@ -22,7 +22,10 @@ export default class extends Controller {
       modal.addEventListener('cancel', this.onCancel);
       modal.addEventListener('click', this.onBackdropClick);
     } else {
-      this.focusTrap = new FocusTrap(modal, { escapeDeactivates: true });
+      this.focusTrap = new FocusTrap(modal, {
+        escapeDeactivates: true,
+        onDeactivate: () => this.close(),
+      });
       attachDismisser(this, { element: modal });
     }
   }

package/src/controllers/popover_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
 import { focusFirst } from '../accessibility/focus';
+import { announce } from '../accessibility/aria';
 import { attachContentLoader, attachDismisser, attachVisibility } from '../plumbers';
 
 export default class extends Controller {
@@ -11,6 +12,8 @@ export default class extends Controller {
     reload: { type: String, default: 'never' },
     staleAfter: { type: Number, default: 3600 },
     closeOnSelect: { type: Boolean, default: true },
+    announceOpen: { type: String, default: 'Panel opened' },
+    announceClose: { type: String, default: 'Panel closed' },
   };
 
   connect() {
@@ -55,10 +58,12 @@ export default class extends Controller {
   async shown() {
     await this.load();
     if (this.hasPanelTarget) focusFirst(this.panelTarget);
+    announce(this.announceOpenValue);
   }
 
   async hidden() {
     if (this.hasTriggerTarget) this.triggerTarget.focus();
+    announce(this.announceCloseValue);
   }
 
   canLoad() {

package/src/controllers/timeline_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from '@hotwired/stimulus';
+import { DateFormatter } from '../plumbers/formatters/date';
+import { RovingTabIndex } from '../accessibility/keyboard';
+import { setExpanded, setHidden, announce } from '../accessibility/aria';
+
+export default class extends Controller {
+  static targets = ['trigger', 'detail', 'time'];
+  static values = {
+    dateFormat: { type: Object, default: {} },
+  };
+
+  connect() {
+    this.rovingTabIndex = new RovingTabIndex(this.triggerTargets, { orientation: 'vertical' });
+    this.rovingTabIndex.activate();
+  }
+
+  disconnect() {
+    this.rovingTabIndex?.deactivate();
+    this.rovingTabIndex = null;
+  }
+
+  toggle(event) {
+    const trigger = event.currentTarget;
+    trigger.getAttribute('aria-expanded') === 'true' ? this.collapseItem(trigger) : this.expandItem(trigger);
+  }
+
+  expand(event) {
+    this.expandItem(event.currentTarget);
+  }
+
+  collapse(event) {
+    this.collapseItem(event.currentTarget);
+  }
+
+  expandItem(trigger) {
+    const detail = this.detailTargets.find((d) => d.id === trigger.getAttribute('aria-controls')) ?? null;
+    this.dispatch('expand', { detail: { trigger, detail } });
+    setExpanded(trigger, true);
+    if (detail) {
+      setHidden(detail, false);
+      announce(`${trigger.textContent.trim()} expanded`);
+    }
+    this.dispatch('expanded', { detail: { trigger, detail } });
+  }
+
+  collapseItem(trigger) {
+    const detail = this.detailTargets.find((d) => d.id === trigger.getAttribute('aria-controls')) ?? null;
+    this.dispatch('collapse', { detail: { trigger, detail } });
+    setExpanded(trigger, false);
+    if (detail) {
+      setHidden(detail, true);
+      announce(`${trigger.textContent.trim()} collapsed`);
+    }
+    this.dispatch('collapsed', { detail: { trigger, detail } });
+  }
+
+  triggerTargetConnected(trigger) {
+    if (!trigger.hasAttribute('aria-expanded')) trigger.setAttribute('aria-expanded', 'false');
+    this.rovingTabIndex?.updateItems(this.triggerTargets);
+  }
+
+  triggerTargetDisconnected() {
+    this.rovingTabIndex?.updateItems(this.triggerTargets);
+  }
+
+  timeTargetConnected(el) {
+    if (!Object.keys(this.dateFormatValue).length || el.textContent.trim()) return;
+    const formatted = DateFormatter.format(el.getAttribute('datetime'), this.dateFormatValue);
+    if (formatted) el.textContent = formatted;
+  }
+}

package/src/index.js

@@ -17,8 +17,12 @@ export { fuzzyMatcher, filterOptions } from './researcher.js';
 export { Formatter, FORMATTER_TYPES } from './plumbers/formatter.js';
 
 // Export Stimulus controllers
+export { default as CalendarDecadeController } from './controllers/calendar_decade_controller.js';
+export { default as CalendarDecadeSelectorController } from './controllers/calendar_decade_selector_controller.js';
 export { default as CalendarMonthController } from './controllers/calendar_month_controller.js';
-export { default as CalendarObserverController } from './controllers/calendar_observer_controller.js';
+export { default as CalendarMonthSelectorController } from './controllers/calendar_month_selector_controller.js';
+export { default as CalendarYearController } from './controllers/calendar_year_controller.js';
+export { default as CalendarYearSelectorController } from './controllers/calendar_year_selector_controller.js';
 export { default as ClipboardController } from './controllers/clipboard_controller.js';
 export { default as ComboboxDateController } from './controllers/combobox_date_controller.js';
 export { default as ComboboxDropdownController } from './controllers/combobox_dropdown_controller.js';
@@ -31,3 +35,4 @@ export { default as InputClearableController } from './controllers/input_clearab
 export { default as ModalController } from './controllers/modal_controller.js';
 export { default as PannerController } from './controllers/panner_controller.js';
 export { default as PopoverController } from './controllers/popover_controller.js';
+export { default as TimelineController } from './controllers/timeline_controller.js';