@cahyo-dimas/freeday 1.35.0 → 1.37.0

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.37.0] — 2026-08-19
+One note from the back-office app (IDU_EMATE_APPL_WEB, #014).
+### Added
+- **`.fdy-table__freeze` + `--fdy-freeze-left`** — freeze **any number** of columns, not just the
+  first. 1.35.0 froze `tbody th` at a hard-coded `left:0`, which suits a rate matrix's single row
+  header and cannot express a wide table with two identity columns: they all landed on 0 and
+  stacked. Mark every cell of a frozen column and give that column its offset; the offsets belong
+  to the caller because they are sums of *rendered* widths, which CSS cannot compute.
+  `.fdy-table__freeze--edge` marks where the frozen block ends.
+- **A bare control in a `.fdy-filterbar` gets `--control-h`.** The bar aligns `flex-end` so
+  labelled fields line up on their inputs; a `.fdy-check` / `.fdy-switch` / `.fdy-radio` / lone
+  `.fdy-btn` has no label row, so flex-end left it sitting below the input's centre line. Now its
+  box ends where an input's box ends and the control centres on that line.
+### Changed
+- **BREAKING (from 1.35.0): the header freeze moved to `.fdy-table--sticky-head`.** Freezing a row
+  needs a vertical scrollport; a table that only freezes columns scrolls with the **page**, where
+  `top:0` sticks the header under the viewport edge — over the consuming app's own top bar.
+  `.fdy-table--sticky` is now the enabler (separate borders) and each axis is asked for
+  explicitly. `tbody th` no longer freezes implicitly; use `.fdy-table__freeze`. 1.35.0 and 1.36.0
+  are unpublished, so no released version carried the old contract.
+
+## [1.36.0] — 2026-08-19
+One note from the back-office app (IDU_EMATE_APPL_WEB, #013).
+### Added
+- **A year grid in the calendar** (vanilla · Vue · React · Blazor). 1.32.0's month grid killed
+  one-click-per-month and left one-click-per-year behind it: the month grid's arrows step a year
+  each, so 2026 → 1998 was **28 clicks**. The title now drills twice — days → months → years — with
+  the arrows following the level shown, and picking a year drops to that year's months. Every level
+  above the day grid stays **navigation**: nothing is committed until a day is picked. Year pages
+  are aligned (2016–2027, 2028–2039) rather than centred on the year in view, so the pages tile
+  instead of sliding over each other. New classes `.fdy-cal__grid--years` / `.fdy-cal__year`; new
+  aria-label props `chooseYearLabel`, `prevYearsLabel`, `nextYearsLabel`.
+### Changed
+- **The month grid's title now drills UP to years rather than back down to days.** Getting back to
+  days is what picking a month already does. Nothing in the kit's own tests or in a consuming app's
+  helpers clicked the title from the month grid, so this is not expected to be breaking.
+### Fixed
+- **`freeday-datepicker.js` spoke Indonesian to the user.** Its placeholder and every nav
+  `aria-label` were Indonesian, and because `FdyDatepicker.razor` delegates to the vanilla
+  enhancer, **every Blazor app inherited them** — while #009's language guard, which scans
+  `adapters/` only, passed. The datepicker is English now. The rest of `src/` is NOT audited: see
+  improvement note #013 §2, which lists the enhancers still affected.
+
 ## [1.35.0] — 2026-08-19
 One note from the back-office app (IDU_EMATE_APPL_WEB, #012).
 ### Added

package/COMPONENTS.md

@@ -516,20 +516,27 @@ Input-styled trigger + calendar popover. Needs `freeday-datepicker.js`. **Author
 — the enhancer builds everything.
 
 - `.fdy-datepicker` (+`--error`) · `__trigger` `__value` (+`--placeholder`) `__icon` `__clear`
-  `__panel`; calendar internals `.fdy-cal__head` `__nav` `__title` `__grid` (+`--months`) `__dow`
-  `__day` `__month`
+  `__panel`; calendar internals `.fdy-cal__head` `__nav` `__title` `__grid` (+`--months` `--years`)
+  `__dow` `__day` `__month` `__year`
 - Range: wrap two pickers in `.fdy-daterange` + `data-fdy-daterange` (`role="group"`), children
   get `data-role="from"` / `"to"`; separator `.fdy-daterange__sep`. The end can't precede the start.
   **Typed wrapper: `<FdyDateRange>`** (Vue/React/Blazor) — use it in those stacks.
-**Getting to a distant month.** The title is a **button**: press it and the day grid becomes a
-12-cell month grid (`.fdy-cal__grid--months` of `.fdy-cal__month`) for the current year, where the
-arrows step **years** instead of months. Pick a
-month and you are back on days — choosing a month is navigation, so nothing is committed until a day
-is selected. From August 2026 to March 2022 that is 7 clicks; walking month by month is 53.
+**Getting to a distant date.** The title is a **button**, and it drills up one level each press:
+day grid → 12-cell month grid (`.fdy-cal__grid--months` of `.fdy-cal__month`) → 12-cell year grid
+(`.fdy-cal__grid--years` of `.fdy-cal__year`). The arrows follow the level shown — months, then
+years, then pages of twelve years. Picking a year drops to that year's months, picking a month
+drops to its days: every level above the day grid is **navigation**, so nothing is committed until a
+day is selected. From the year grid the title steps back down to months.
+
+Year pages are **aligned**, not centred on the year in view — 2016–2027, then 2028–2039 — so the
+pages tile and a given year always sits in the same place. From August 2026 to March 2022 that is 7
+clicks; walking month by month is 53. To 1998 it is 8; walking is 336.
 
 Keyboard, in the day grid: arrows move a day, `Home`/`End` the week, `PageUp`/`PageDown` a month,
 and **`Shift`+`PageUp`/`PageDown` a year** (WAI-ARIA APG). The month grid mirrors it: arrows ±1/±3
-months, `Home`/`End` January/December, `PageUp`/`PageDown` a year, `Enter`/`Space` to choose.
+months, `Home`/`End` January/December, `PageUp`/`PageDown` a year, `Enter`/`Space` to choose. The
+year grid likewise: arrows ±1/±3 years, `Home`/`End` the ends of the page, `PageUp`/`PageDown` a
+page of twelve.
 
 - Attributes: `data-value="YYYY-MM-DD"`, `data-placeholder`, `data-label`, `data-fdy-no-icon`
 
@@ -632,7 +639,11 @@ Responsive two-column document header. Children are `.fdy-field`; `.fdy-field--f
 ## Filter bar — `.fdy-filterbar`
 A consistent filter row of `.fdy-field`s with a width rhythm (`--w-sm` · default · `--w-lg` ·
 `--w-xl` · `--w-2xl`), one `--w-grow` field (usually search) absorbing the slack, and
-`.fdy-filterbar__actions` pinned at the end. `--actions-inline` keeps the actions on the control
+`.fdy-filterbar__actions` pinned at the end. A control with **no label of its own** (a
+`.fdy-check`, `.fdy-switch`, `.fdy-radio`, or a lone `.fdy-btn`) is given `--control-h` so it
+centres on the input line instead of hanging below it — the bar aligns `flex-end` to line up
+labelled fields, which would otherwise drop a 20px checkbox below a 32px input's centre.
+`--actions-inline` keeps the actions on the control
 line. Zero JS. Composes with `.fdy-table-toolbar` on a shared baseline.
 
 ## Slider — `.fdy-slider`
@@ -688,20 +699,36 @@ Semantic static table. Wrap in `.fdy-table-wrap` (bordered surface) or `.fdy-tab
 ```
 
 **Frozen axes — `.fdy-table--sticky`.** For a grid read against two axes at once (a rate
-matrix, a timetable). Put `.fdy-table-scroll--frozen` on the wrapper — it scrolls both ways
-and is the scrollport the frozen cells stick to — and size it with `--fdy-table-frozen-h`
-(default `30rem`). `<thead>` freezes at the top, `<th scope="row">` freezes at the left, and
-the first header cell is the corner. Do not reach for `position:sticky` directly: the base
-table collapses its borders, and a collapsed border belongs to the table rather than the
-cell, so it scrolls out from under whatever you froze.
+matrix, a timetable) or a wide one whose identity columns must stay visible. `.fdy-table--sticky`
+is the enabler: it separates the borders, because a collapsed border belongs to the table rather
+than the cell and scrolls out from under whatever you froze. Then ask for the axes you have:
+
+- **Header row** — add `.fdy-table--sticky-head`, and put `.fdy-table-scroll--frozen` on the
+  wrapper (it scrolls both ways and is the scrollport the freeze resolves against; size it with
+  `--fdy-table-frozen-h`, default `30rem`). It is a separate modifier because a table that only
+  freezes columns scrolls with the **page**, and `top:0` against the page sticks the header under
+  the viewport edge — over the app's own top bar.
+- **Columns** — put `.fdy-table__freeze` on **every cell of the column, header included**, and give
+  each frozen column its own `--fdy-freeze-left`: `0` for the first, then the summed widths of the
+  frozen columns to its left. Mark the last one `.fdy-table__freeze--edge` so the reader can see
+  where the frozen block ends. One frozen column needs no variable at all.
+
+The offsets are the caller's job because they depend on rendered column widths, which CSS cannot
+sum — measure them once after render (and on resize) and set the variable.
 
 ```html
 <div class="fdy-table-scroll fdy-table-scroll--frozen" style="--fdy-table-frozen-h:26rem">
-  <table class="fdy-table fdy-table--sticky">
+  <table class="fdy-table fdy-table--sticky fdy-table--sticky-head">
     <caption class="fdy-visually-hidden">Exchange rates, August 2026</caption>
-    <thead><tr><th scope="col">Date</th><th scope="col" class="fdy-table__num">USD</th></tr></thead>
+    <thead><tr>
+      <th scope="col" class="fdy-table__freeze fdy-table__freeze--edge">Date</th>
+      <th scope="col" class="fdy-table__num">USD</th>
+    </tr></thead>
     <tbody>
-      <tr><th scope="row">1 Aug</th><td class="fdy-table__num">16,240</td></tr>
+      <tr>
+        <th scope="row" class="fdy-table__freeze fdy-table__freeze--edge">1 Aug</th>
+        <td class="fdy-table__num">16,240</td>
+      </tr>
     </tbody>
   </table>
 </div>

package/adapters/react/components/FdyDatepicker.tsx

@@ -21,6 +21,14 @@ interface DayCell {
   focusable: boolean;
 }
 
+interface YearCell {
+  year: number;
+  selected: boolean;
+  today: boolean;
+  disabled: boolean;
+  focusable: boolean;
+}
+
 interface MonthCell {
   index: number;
   label: string;
@@ -53,6 +61,11 @@ export interface FdyDatepickerProps {
   /** aria-labels for the year arrows shown in the month grid. Defaults 'Previous year' / 'Next year'. */
   prevYearLabel?: string;
   nextYearLabel?: string;
+  /** aria-label for the title button that drills from the month grid to the year grid. Default 'Choose year'. */
+  chooseYearLabel?: string;
+  /** aria-labels for the page arrows shown in the year grid. Defaults 'Previous years' / 'Next years'. */
+  prevYearsLabel?: string;
+  nextYearsLabel?: string;
   prevMonthLabel?: string;
   /** aria-label for the next-month nav button. Default 'Next month'. */
   nextMonthLabel?: string;
@@ -121,10 +134,19 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   const [open, setOpen] = useState<boolean>(false);
   /* 'days' | 'months' — the calendar drills one level up instead of growing furniture beside the
      title. Before this the only pointer route to another month was one click per month. */
-  const [mode, setMode] = useState<'days' | 'months'>('days');
+  const [mode, setMode] = useState<'days' | 'months' | 'years'>('days');
   const [focusMonth, setFocusMonth] = useState<number>(0);
+  const [focusYear, setFocusYear] = useState<number>(0);
+
+  /* A page of twelve years, ALIGNED so pages tile: 2016-2027, 2028-2039. Anchoring on the year in
+     view would make the arrows land on overlapping windows, and the same year would sit somewhere
+     different every step. */
+  const YEARS_PER_PAGE = 12;
+  const yearPageStart = (year: number): number => Math.floor(year / YEARS_PER_PAGE) * YEARS_PER_PAGE;
   const monthRefs = useRef<Record<number, HTMLButtonElement | null>>({});
   const pendingMonthFocusRef = useRef<number | null>(null);
+  const yearRefs = useRef<Record<number, HTMLButtonElement | null>>({});
+  const pendingYearFocusRef = useRef<number | null>(null);
 
   // Render the calendar panel in the top layer (popover) so it never gets clipped by a card or
   // scroll container; positions against the trigger.
@@ -146,6 +168,9 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   const chooseMonthLabelText: string = props.chooseMonthLabel ?? 'Choose month';
   const prevYearLabelText: string = props.prevYearLabel ?? 'Previous year';
   const nextYearLabelText: string = props.nextYearLabel ?? 'Next year';
+  const chooseYearLabelText: string = props.chooseYearLabel ?? 'Choose year';
+  const prevYearsLabelText: string = props.prevYearsLabel ?? 'Previous years';
+  const nextYearsLabelText: string = props.nextYearsLabel ?? 'Next years';
   const monthCellFmt: Intl.DateTimeFormat = useMemo(
     (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { month: 'short' }),
     [props.locale],
@@ -271,6 +296,13 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     monthRefs.current[index]?.focus();
   });
 
+  useEffect((): void => {
+    if (pendingYearFocusRef.current === null) return;
+    const year: number = pendingYearFocusRef.current;
+    pendingYearFocusRef.current = null;
+    yearRefs.current[year]?.focus();
+  });
+
   function openMonthGrid(): void {
     setFocusMonth(viewMonth.getMonth());
     setMode('months');
@@ -296,6 +328,73 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     pendingMonthFocusRef.current = next;
   }
 
+  /** A year is unreachable only when EVERY month in it falls outside min/max. */
+  function isYearDisabled(year: number): boolean {
+    if (minDate !== null && startOfDay(new Date(year, 11, 31)).getTime() < startOfDay(minDate).getTime()) return true;
+    if (maxDate !== null && startOfDay(new Date(year, 0, 1)).getTime() > startOfDay(maxDate).getTime()) return true;
+    return false;
+  }
+
+  const yearPage: number = yearPageStart(focusYear);
+  const yearRangeLabel: string = `${yearPage} – ${yearPage + YEARS_PER_PAGE - 1}`;
+
+  const yearCells: YearCell[] = useMemo((): YearCell[] => {
+    const start: number = yearPageStart(focusYear);
+    const thisYear: number = new Date().getFullYear();
+    const sel: Date | null = parseISO(props.value);
+    return Array.from({ length: YEARS_PER_PAGE }, (_unused: unknown, index: number): YearCell => {
+      const year: number = start + index;
+      return {
+        year,
+        selected: sel !== null && sel.getFullYear() === year,
+        today: thisYear === year,
+        disabled: isYearDisabled(year),
+        focusable: year === focusYear,
+      };
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusYear, props.value, minDate, maxDate]);
+
+  function openYearGrid(): void {
+    setFocusYear(viewMonth.getFullYear());
+    setMode('years');
+    pendingYearFocusRef.current = viewMonth.getFullYear();
+  }
+
+  /* Picking a year is NAVIGATION, exactly like picking a month: it drops to that year's month grid
+     and commits nothing. */
+  function openYear(year: number): void {
+    setViewMonth(new Date(year, viewMonth.getMonth(), 1));
+    setFocusMonth(viewMonth.getMonth());
+    setMode('months');
+    pendingMonthFocusRef.current = viewMonth.getMonth();
+  }
+
+  function moveYearFocus(year: number): void {
+    setFocusYear(year);
+    setViewMonth(new Date(year, viewMonth.getMonth(), 1));
+    pendingYearFocusRef.current = year;
+  }
+
+  function onYearKeydown(e: React.KeyboardEvent): void {
+    let handled: boolean = true;
+    switch (e.key) {
+      case 'ArrowLeft': moveYearFocus(focusYear - 1); break;
+      case 'ArrowRight': moveYearFocus(focusYear + 1); break;
+      case 'ArrowUp': moveYearFocus(focusYear - 3); break;
+      case 'ArrowDown': moveYearFocus(focusYear + 3); break;
+      case 'Home': moveYearFocus(yearPageStart(focusYear)); break;
+      case 'End': moveYearFocus(yearPageStart(focusYear) + YEARS_PER_PAGE - 1); break;
+      case 'PageUp': moveYearFocus(focusYear - YEARS_PER_PAGE); break;
+      case 'PageDown': moveYearFocus(focusYear + YEARS_PER_PAGE); break;
+      case 'Enter':
+      case ' ': openYear(focusYear); break;
+      case 'Escape': closePanel(true); break;
+      default: handled = false;
+    }
+    if (handled) { e.preventDefault(); e.stopPropagation(); }
+  }
+
   function onMonthKeydown(e: React.KeyboardEvent): void {
     let handled: boolean = true;
     switch (e.key) {
@@ -476,8 +575,12 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
           <button
             type="button"
             className="fdy-cal__nav"
-            aria-label={mode === 'months' ? prevYearLabelText : prevMonthLabelText}
-            onClick={(): void => { if (mode === 'months') moveMonthFocus(focusMonth, -1); else setViewMonth(addMonths(viewMonth, -1)); }}
+            aria-label={mode === 'years' ? prevYearsLabelText : mode === 'months' ? prevYearLabelText : prevMonthLabelText}
+            onClick={(): void => {
+              if (mode === 'years') moveYearFocus(focusYear - YEARS_PER_PAGE);
+              else if (mode === 'months') moveMonthFocus(focusMonth, -1);
+              else setViewMonth(addMonths(viewMonth, -1));
+            }}
           >
             &lsaquo;
           </button>
@@ -485,21 +588,44 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
             id={titleId}
             type="button"
             className="fdy-cal__title"
-            aria-label={mode === 'months' ? undefined : chooseMonthLabelText}
-            onClick={(): void => { if (mode === 'months') setMode('days'); else openMonthGrid(); }}
+            aria-label={mode === 'years' ? undefined : mode === 'months' ? chooseYearLabelText : chooseMonthLabelText}
+            onClick={(): void => { if (mode === 'months') openYearGrid(); else openMonthGrid(); }}
           >
-            {mode === 'months' ? String(viewMonth.getFullYear()) : monthFmt.format(viewMonth)}
+            {mode === 'years' ? yearRangeLabel : mode === 'months' ? String(viewMonth.getFullYear()) : monthFmt.format(viewMonth)}
           </button>
           <button
             type="button"
             className="fdy-cal__nav"
-            aria-label={mode === 'months' ? nextYearLabelText : nextMonthLabelText}
-            onClick={(): void => { if (mode === 'months') moveMonthFocus(focusMonth, 1); else setViewMonth(addMonths(viewMonth, 1)); }}
+            aria-label={mode === 'years' ? nextYearsLabelText : mode === 'months' ? nextYearLabelText : nextMonthLabelText}
+            onClick={(): void => {
+              if (mode === 'years') moveYearFocus(focusYear + YEARS_PER_PAGE);
+              else if (mode === 'months') moveMonthFocus(focusMonth, 1);
+              else setViewMonth(addMonths(viewMonth, 1));
+            }}
           >
             &rsaquo;
           </button>
         </div>
-        {mode === 'months' ? (
+        {mode === 'years' ? (
+          <div className="fdy-cal__grid fdy-cal__grid--years" role="grid" aria-labelledby={titleId} onKeyDown={onYearKeydown}>
+            {yearCells.map((cell: YearCell) => (
+              <button
+                key={cell.year}
+                ref={(el: HTMLButtonElement | null): void => { yearRefs.current[cell.year] = el; }}
+                type="button"
+                className={['fdy-cal__year', cell.today ? 'is-today' : '', cell.selected ? 'is-selected' : ''].filter(Boolean).join(' ')}
+                role="gridcell"
+                aria-label={String(cell.year)}
+                aria-selected={cell.selected ? true : undefined}
+                disabled={cell.disabled}
+                tabIndex={cell.focusable ? 0 : -1}
+                onClick={(): void => openYear(cell.year)}
+              >
+                {cell.year}
+              </button>
+            ))}
+          </div>
+        ) : mode === 'months' ? (
           <div className="fdy-cal__grid fdy-cal__grid--months" role="grid" aria-labelledby={titleId} onKeyDown={onMonthKeydown}>
             {monthCells.map((cell: MonthCell) => (
               <button

package/adapters/vue/components/FdyDatepicker.vue

@@ -50,6 +50,11 @@ const props = defineProps<{
   /** aria-labels for the year arrows shown in the month grid. Defaults 'Previous year' / 'Next year'. */
   prevYearLabel?: string;
   nextYearLabel?: string;
+  /** aria-label for the title button that drills from the month grid to the year grid. Default 'Choose year'. */
+  chooseYearLabel?: string;
+  /** aria-labels for the page arrows shown in the year grid. Defaults 'Previous years' / 'Next years'. */
+  prevYearsLabel?: string;
+  nextYearsLabel?: string;
 }>();
 
 const emit = defineEmits<{
@@ -124,6 +129,9 @@ const clearLabelText: ComputedRef<string> = computed((): string => props.clearLa
 const chooseMonthLabelText: ComputedRef<string> = computed((): string => props.chooseMonthLabel ?? 'Choose month');
 const prevYearLabelText: ComputedRef<string> = computed((): string => props.prevYearLabel ?? 'Previous year');
 const nextYearLabelText: ComputedRef<string> = computed((): string => props.nextYearLabel ?? 'Next year');
+const chooseYearLabelText: ComputedRef<string> = computed((): string => props.chooseYearLabel ?? 'Choose year');
+const prevYearsLabelText: ComputedRef<string> = computed((): string => props.prevYearsLabel ?? 'Previous years');
+const nextYearsLabelText: ComputedRef<string> = computed((): string => props.nextYearsLabel ?? 'Next years');
 
 const view: Ref<Date> = ref(startOfMonth(selectedDate.value ?? new Date()));
 const focusDate: Ref<Date> = ref(selectedDate.value ?? new Date());
@@ -140,8 +148,15 @@ const effectiveFocusDate: ComputedRef<Date> = computed((): Date => {
 /* 'days' | 'months' — the calendar drills one level up instead of growing furniture beside the title.
    Before this the only pointer route to another month was one click per month: August 2026 to March
    2022 is fifty-three of them, and the Shift+PageUp jump had no affordance at all. */
-const mode: Ref<'days' | 'months'> = ref('days');
+const mode: Ref<'days' | 'months' | 'years'> = ref('days');
 const focusMonth: Ref<number> = ref(0);
+const focusYear: Ref<number> = ref(0);
+
+/* A page of twelve years, ALIGNED so pages tile: 2016-2027, 2028-2039. Anchoring the page on the
+   year in view would make the arrows land on overlapping windows, and the same year would sit at a
+   different spot every time you stepped. */
+const YEARS_PER_PAGE = 12;
+const yearPageStart = (year: number): number => Math.floor(year / YEARS_PER_PAGE) * YEARS_PER_PAGE;
 
 const monthCellFmt: ComputedRef<Intl.DateTimeFormat> = computed(
   (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { month: 'short' }),
@@ -189,6 +204,44 @@ const monthCells: ComputedRef<MonthCell[]> = computed((): MonthCell[] => {
   });
 });
 
+interface YearCell {
+  year: number;
+  selected: boolean;
+  today: boolean;
+  disabled: boolean;
+  focusable: boolean;
+}
+
+/** A year is unreachable only when EVERY month in it falls outside min/max — the same rule
+ *  isMonthDisabled applies one level down, and for the same reason. */
+function isYearDisabled(year: number): boolean {
+  if (minDate.value !== null && startOfDay(new Date(year, 11, 31)).getTime() < startOfDay(minDate.value).getTime()) return true;
+  if (maxDate.value !== null && startOfDay(new Date(year, 0, 1)).getTime() > startOfDay(maxDate.value).getTime()) return true;
+  return false;
+}
+
+const yearPage: ComputedRef<number> = computed((): number => yearPageStart(focusYear.value));
+
+const yearCells: ComputedRef<YearCell[]> = computed((): YearCell[] => {
+  const start: number = yearPage.value;
+  const thisYear: number = new Date().getFullYear();
+  const sel: Date | null = selectedDate.value;
+  return Array.from({ length: YEARS_PER_PAGE }, (_unused: unknown, index: number): YearCell => {
+    const year: number = start + index;
+    return {
+      year,
+      selected: sel !== null && sel.getFullYear() === year,
+      today: thisYear === year,
+      disabled: isYearDisabled(year),
+      focusable: year === focusYear.value,
+    };
+  });
+});
+
+const yearRangeLabel: ComputedRef<string> = computed(
+  (): string => `${yearPage.value} – ${yearPage.value + YEARS_PER_PAGE - 1}`,
+);
+
 const monthFmt: ComputedRef<Intl.DateTimeFormat> = computed(
   (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }),
 );
@@ -278,6 +331,51 @@ function openMonth(index: number): void {
   void nextTick((): void => focusCell());
 }
 
+function openYearGrid(): void {
+  focusYear.value = view.value.getFullYear();
+  mode.value = 'years';
+  void nextTick((): void => focusYearCell());
+}
+
+function focusYearCell(): void {
+  const cell: HTMLElement | null = panelEl.value?.querySelector('.fdy-cal__year[tabindex="0"]') ?? null;
+  cell?.focus();
+}
+
+/* Picking a year is NAVIGATION, exactly like picking a month: it drops to that year's month grid
+   and commits nothing. */
+function openYear(year: number): void {
+  view.value = new Date(year, view.value.getMonth(), 1);
+  focusMonth.value = view.value.getMonth();
+  mode.value = 'months';
+  void nextTick((): void => focusMonthCell());
+}
+
+function moveYearFocus(year: number): void {
+  focusYear.value = year;
+  view.value = new Date(year, view.value.getMonth(), 1);
+  void nextTick((): void => focusYearCell());
+}
+
+function onYearKeydown(e: KeyboardEvent): void {
+  let handled: boolean = true;
+  switch (e.key) {
+    case 'ArrowLeft': moveYearFocus(focusYear.value - 1); break;
+    case 'ArrowRight': moveYearFocus(focusYear.value + 1); break;
+    case 'ArrowUp': moveYearFocus(focusYear.value - 3); break;
+    case 'ArrowDown': moveYearFocus(focusYear.value + 3); break;
+    case 'Home': moveYearFocus(yearPageStart(focusYear.value)); break;
+    case 'End': moveYearFocus(yearPageStart(focusYear.value) + YEARS_PER_PAGE - 1); break;
+    case 'PageUp': moveYearFocus(focusYear.value - YEARS_PER_PAGE); break;
+    case 'PageDown': moveYearFocus(focusYear.value + YEARS_PER_PAGE); break;
+    case 'Enter':
+    case ' ': openYear(focusYear.value); break;
+    case 'Escape': closePanel(true); break;
+    default: handled = false;
+  }
+  if (handled) { e.preventDefault(); e.stopPropagation(); }
+}
+
 function moveMonthFocus(index: number, yearDelta: number): void {
   if (yearDelta !== 0) view.value = addMonths(view.value, yearDelta * 12);
   focusMonth.value = (index + 12) % 12;
@@ -465,24 +563,51 @@ onBeforeUnmount((): void => {
         <button
           type="button"
           class="fdy-cal__nav"
-          :aria-label="mode === 'months' ? prevYearLabelText : prevMonthLabelText"
-          @click="mode === 'months' ? moveMonthFocus(focusMonth, -1) : (view = addMonths(view, -1))"
+          :aria-label="mode === 'years' ? prevYearsLabelText : mode === 'months' ? prevYearLabelText : prevMonthLabelText"
+          @click="
+            mode === 'years'
+              ? moveYearFocus(focusYear - 12)
+              : mode === 'months'
+                ? moveMonthFocus(focusMonth, -1)
+                : (view = addMonths(view, -1))
+          "
         >‹</button>
         <button
           :id="titleId"
           type="button"
           class="fdy-cal__title"
-          :aria-label="mode === 'months' ? undefined : chooseMonthLabelText"
-          @click="mode === 'months' ? (mode = 'days') : openMonthGrid()"
-        >{{ mode === 'months' ? String(view.getFullYear()) : monthFmt.format(view) }}</button>
+          :aria-label="mode === 'years' ? undefined : mode === 'months' ? chooseYearLabelText : chooseMonthLabelText"
+          @click="mode === 'months' ? openYearGrid() : openMonthGrid()"
+        >{{ mode === 'years' ? yearRangeLabel : mode === 'months' ? String(view.getFullYear()) : monthFmt.format(view) }}</button>
         <button
           type="button"
           class="fdy-cal__nav"
-          :aria-label="mode === 'months' ? nextYearLabelText : nextMonthLabelText"
-          @click="mode === 'months' ? moveMonthFocus(focusMonth, 1) : (view = addMonths(view, 1))"
+          :aria-label="mode === 'years' ? nextYearsLabelText : mode === 'months' ? nextYearLabelText : nextMonthLabelText"
+          @click="
+            mode === 'years'
+              ? moveYearFocus(focusYear + 12)
+              : mode === 'months'
+                ? moveMonthFocus(focusMonth, 1)
+                : (view = addMonths(view, 1))
+          "
         >›</button>
       </div>
-      <div v-if="mode === 'months'" class="fdy-cal__grid fdy-cal__grid--months" role="grid" :aria-labelledby="titleId" @keydown="onMonthKeydown">
+      <div v-if="mode === 'years'" class="fdy-cal__grid fdy-cal__grid--years" role="grid" :aria-labelledby="titleId" @keydown="onYearKeydown">
+        <button
+          v-for="cell in yearCells"
+          :key="cell.year"
+          type="button"
+          class="fdy-cal__year"
+          :class="{ 'is-today': cell.today, 'is-selected': cell.selected }"
+          role="gridcell"
+          :aria-label="String(cell.year)"
+          :aria-selected="cell.selected ? 'true' : undefined"
+          :disabled="cell.disabled"
+          :tabindex="cell.focusable ? 0 : -1"
+          @click="openYear(cell.year)"
+        >{{ cell.year }}</button>
+      </div>
+      <div v-else-if="mode === 'months'" class="fdy-cal__grid fdy-cal__grid--months" role="grid" :aria-labelledby="titleId" @keydown="onMonthKeydown">
         <button
           v-for="cell in monthCells"
           :key="cell.index"

package/dist/freeday-datepicker.js

@@ -57,8 +57,8 @@
     wrap.dataset.fdyDpReady = '1';
     wrap.classList.add('fdy-datepicker');
 
-    var placeholder = wrap.getAttribute('data-placeholder') || 'Pilih tanggal';
-    var label = wrap.getAttribute('data-label') || 'Tanggal';
+    var placeholder = wrap.getAttribute('data-placeholder') || 'Choose a date';
+    var label = wrap.getAttribute('data-label') || 'Date';
     var selected = parseISO(wrap.getAttribute('data-value'));
     var minDate = parseISO(wrap.getAttribute('data-min'));
     var maxDate = parseISO(wrap.getAttribute('data-max'));
@@ -73,6 +73,7 @@
        month" twenty-four times to reach a date two years back. */
     var mode = 'days';
     var focusMonth = null;
+    var focusYear = null;
 
     var trigger = document.createElement('button');
     trigger.type = 'button';
@@ -150,20 +151,21 @@
     }
 
     function render() {
+      if (mode === 'years') { renderYears(); return; }
       if (mode === 'months') { renderMonths(); return; }
       panel.innerHTML = '';
       var head = document.createElement('div');
       head.className = 'fdy-cal__head';
-      var title = titleButton(monthFmt.format(view), monthFmt.format(view) + ', pilih bulan', function () {
+      var title = titleButton(monthFmt.format(view), monthFmt.format(view) + ', choose month', function () {
         mode = 'months';
         focusMonth = view.getMonth();
         render();
         focusMonthCell();
       });
       panel.setAttribute('aria-labelledby', title.id);
-      head.appendChild(navButton('‹', 'Bulan sebelumnya', function () { view = addMonths(view, -1); render(); }));
+      head.appendChild(navButton('‹', 'Previous month', function () { view = addMonths(view, -1); render(); }));
       head.appendChild(title);
-      head.appendChild(navButton('›', 'Bulan berikutnya', function () { view = addMonths(view, 1); render(); }));
+      head.appendChild(navButton('›', 'Next month', function () { view = addMonths(view, 1); render(); }));
       panel.appendChild(head);
 
       var grid = document.createElement('div');
@@ -220,15 +222,16 @@
       var year = view.getFullYear();
       var head = document.createElement('div');
       head.className = 'fdy-cal__head';
-      var title = titleButton(String(year), year + ', kembali ke tanggal', function () {
-        mode = 'days';
+      var title = titleButton(String(year), year + ', choose year', function () {
+        mode = 'years';
+        focusYear = year;
         render();
-        focusFocusDate();
+        focusYearCell();
       });
       panel.setAttribute('aria-labelledby', title.id);
-      head.appendChild(navButton('‹', 'Tahun sebelumnya', function () { view = addMonths(view, -12); render(); focusMonthCell(); }));
+      head.appendChild(navButton('‹', 'Previous year', function () { view = addMonths(view, -12); render(); focusMonthCell(); }));
       head.appendChild(title);
-      head.appendChild(navButton('›', 'Tahun berikutnya', function () { view = addMonths(view, 12); render(); focusMonthCell(); }));
+      head.appendChild(navButton('›', 'Next year', function () { view = addMonths(view, 12); render(); focusMonthCell(); }));
       panel.appendChild(head);
 
       var grid = document.createElement('div');
@@ -259,6 +262,108 @@
       panel.appendChild(grid);
     }
 
+    /* A page of twelve years, aligned so pages TILE: 2016-2027, 2028-2039. Anchoring the page on
+       the year in view instead would make ‹ and › land on overlapping windows, and the same year
+       would appear at a different spot every time you stepped. */
+    var YEARS_PER_PAGE = 12;
+    function yearPageStart(y) { return Math.floor(y / YEARS_PER_PAGE) * YEARS_PER_PAGE; }
+
+    /* A year is only unreachable when EVERY month in it falls outside min/max — the same rule
+       monthDisabled applies one level down, for the same reason: a bound that sits inside the year
+       disables neither end. */
+    function yearDisabled(y) {
+      if (minDate && new Date(y, 11, 31) < startOfDay(minDate)) return true;
+      if (maxDate && new Date(y, 0, 1) > startOfDay(maxDate)) return true;
+      return false;
+    }
+
+    function renderYears() {
+      panel.innerHTML = '';
+      var start = yearPageStart(view.getFullYear());
+      var end = start + YEARS_PER_PAGE - 1;
+      var head = document.createElement('div');
+      head.className = 'fdy-cal__head';
+      var title = titleButton(start + ' – ' + end, start + ' to ' + end + ', back to months', function () {
+        mode = 'months';
+        focusMonth = view.getMonth();
+        render();
+        focusMonthCell();
+      });
+      panel.setAttribute('aria-labelledby', title.id);
+      head.appendChild(navButton('‹', 'Previous years', function () { moveYearFocus(focusYear - YEARS_PER_PAGE); }));
+      head.appendChild(title);
+      head.appendChild(navButton('›', 'Next years', function () { moveYearFocus(focusYear + YEARS_PER_PAGE); }));
+      panel.appendChild(head);
+
+      var grid = document.createElement('div');
+      grid.className = 'fdy-cal__grid fdy-cal__grid--years';
+      grid.setAttribute('role', 'grid');
+      grid.setAttribute('aria-labelledby', title.id);
+      var thisYear = new Date().getFullYear();
+      if (focusYear === null) focusYear = view.getFullYear();
+      for (var i = 0; i < YEARS_PER_PAGE; i++) {
+        var y = start + i;
+        var btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'fdy-cal__year';
+        btn.setAttribute('role', 'gridcell');
+        btn.setAttribute('aria-label', String(y));
+        btn.textContent = String(y);
+        if (y === thisYear) btn.classList.add('is-today');
+        if (selected && selected.getFullYear() === y) {
+          btn.classList.add('is-selected');
+          btn.setAttribute('aria-selected', 'true');
+        }
+        if (yearDisabled(y)) btn.disabled = true;
+        btn.tabIndex = y === focusYear ? 0 : -1;
+        btn.addEventListener('click', (function (yy) { return function () { openYear(yy); }; })(y));
+        grid.appendChild(btn);
+      }
+      grid.addEventListener('keydown', onYearKey);
+      panel.appendChild(grid);
+    }
+
+    function focusYearCell() {
+      var cell = panel.querySelector('.fdy-cal__year[tabindex="0"]');
+      if (cell) cell.focus();
+    }
+
+    /* Picking a year is navigation, exactly like picking a month: it drops to the month grid of
+       that year. Nothing is committed until a DAY is chosen. */
+    function openYear(y) {
+      view = new Date(y, view.getMonth(), 1);
+      focusMonth = view.getMonth();
+      mode = 'months';
+      render();
+      focusMonthCell();
+    }
+
+    function moveYearFocus(y) {
+      focusYear = y;
+      view = new Date(y, view.getMonth(), 1);
+      render();
+      focusYearCell();
+    }
+
+    function onYearKey(e) {
+      var handled = true;
+      switch (e.key) {
+        case 'ArrowLeft': moveYearFocus(focusYear - 1); break;
+        case 'ArrowRight': moveYearFocus(focusYear + 1); break;
+        case 'ArrowUp': moveYearFocus(focusYear - 3); break;
+        case 'ArrowDown': moveYearFocus(focusYear + 3); break;
+        case 'Home': moveYearFocus(yearPageStart(focusYear)); break;
+        case 'End': moveYearFocus(yearPageStart(focusYear) + YEARS_PER_PAGE - 1); break;
+        case 'PageUp': moveYearFocus(focusYear - YEARS_PER_PAGE); break;
+        case 'PageDown': moveYearFocus(focusYear + YEARS_PER_PAGE); break;
+        case 'Enter':
+        case ' ': openYear(focusYear); break;
+        case 'Escape': close(true); break;
+        default: handled = false;
+      }
+      if (handled) { e.preventDefault(); e.stopPropagation(); }
+    }
+
     function focusMonthCell() {
       var cell = panel.querySelector('.fdy-cal__month[tabindex="0"]');
       if (cell) cell.focus();

package/dist/freeday.bundle.css

@@ -1145,12 +1145,12 @@ a { color: var(--color-primary); }
 .fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__title:hover{background:var(--color-surface-2);}
 .fdy-cal__title:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-cal__month{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
-.fdy-cal__month:hover{background:var(--color-surface-2);}
-.fdy-cal__month:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-cal__month:disabled{opacity:.4;cursor:not-allowed;background:transparent;}
-.fdy-cal__month.is-today{font-weight:var(--weight-bold);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);}
-.fdy-cal__month.is-selected{background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--weight-semibold);}
+.fdy-cal__month,.fdy-cal__year{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
+.fdy-cal__month:hover,.fdy-cal__year:hover{background:var(--color-surface-2);}
+.fdy-cal__month:focus-visible,.fdy-cal__year:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
+.fdy-cal__month:disabled,.fdy-cal__year:disabled{opacity:.4;cursor:not-allowed;background:transparent;}
+.fdy-cal__month.is-today,.fdy-cal__year.is-today{font-weight:var(--weight-bold);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);}
+.fdy-cal__month.is-selected,.fdy-cal__year.is-selected{background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--weight-semibold);}
 .fdy-cal__nav{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);font-size:var(--text-lg);line-height:1;cursor:pointer;}
 .fdy-cal__nav:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-cal__nav:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
@@ -1161,7 +1161,7 @@ a { color: var(--color-primary); }
    AFTER `.fdy-cal__grid`, and that is the whole rule: the element carries both classes, they weigh
    the same, so source order decides. Declared earlier, the modifier lost to the base it modifies and
    twelve months rendered seven across — the layout the comment above described, never once applied. */
-.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
+.fdy-cal__grid--months,.fdy-cal__grid--years{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__dow{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:capitalize;}
 .fdy-cal__day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;cursor:pointer;}
 .fdy-cal__day:hover{background:var(--color-surface-2);}
@@ -1298,6 +1298,14 @@ a { color: var(--color-primary); }
  * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
  * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
  * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
+/* A control that carries NO label of its own — a checkbox, a switch, a lone
+   button — in a bar whose `align-items:flex-end` exists to line up LABELLED
+   fields. Flex-end puts such a control's bottom on the inputs' bottom, so a
+   20px checkbox sits well below the 32px input's centre line and reads as
+   dropped. Giving it the height of a control lands its box exactly where an
+   input's box ends, and its own centring then puts it on the input's centre
+   line. Raised from IDU_EMATE_APPL_WEB (#014). */
+.fdy-filterbar>.fdy-check,.fdy-filterbar>.fdy-radio,.fdy-filterbar>.fdy-switch,.fdy-filterbar>.fdy-btn{min-height:var(--control-h);}
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
  * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
@@ -1667,15 +1675,37 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    back on the cell that sticks. */
 .fdy-table--sticky{border-collapse:separate;border-spacing:0;}
 .fdy-table--sticky th,.fdy-table--sticky td{border-bottom:var(--bw) solid var(--color-border-muted);}
-.fdy-table--sticky thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
-/* The row header freezes sideways over the data cells, so it needs an opaque
-   background of its own — and it takes the BODY surface, not the header one, so a
-   hovered row stays one continuous band across the freeze line. Losing that is
-   losing the only way to track a row across a wide grid. */
-.fdy-table--sticky tbody th{position:sticky;left:0;z-index:1;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);}
-.fdy-table--sticky tbody tr:hover th{background:var(--color-surface-2);}
-/* The corner cell is frozen on both axes, so it has to outrank both. */
-.fdy-table--sticky thead th:first-child{left:0;z-index:3;border-right:var(--bw) solid var(--color-border);}
+
+/* Freezing the HEADER ROW is its own modifier because it needs a vertical
+   scrollport (`.fdy-table-scroll--frozen`). A table that only freezes columns
+   scrolls with the PAGE, and `top:0` against the page sticks the header under
+   the viewport edge — over the app's own top bar — which is worse than not
+   freezing it. Ask for the axis you actually have. */
+.fdy-table--sticky-head thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+
+/* Freezing a COLUMN: put `.fdy-table__freeze` on every cell of it, header
+   included, and give each frozen column its own `--fdy-freeze-left` — 0 for the
+   first, the summed widths of the frozen columns left of it after that. One
+   frozen column needs no variable at all. Mark the last one `--edge` so the
+   reader can see where the frozen block ends.
+
+   The offsets are the caller's job on purpose: they depend on rendered column
+   widths, which CSS cannot sum, and hard-coding them here would only work for
+   tables whose columns are all the same width. */
+.fdy-table--sticky .fdy-table__freeze{position:sticky;left:var(--fdy-freeze-left,0);}
+/* A frozen body cell slides OVER the data, so it must be OPAQUE — otherwise the
+   cells beneath show through it. A `th` already carries the header tint from the
+   base rule, and that tint is usually the whole point: it is what marks a column
+   as identity rather than data. So only a `td` is given a surface here. A table
+   that wants its frozen `th` to read as a body row instead — a rate matrix, where
+   a hovered row should band unbroken across the freeze line — says so itself. */
+.fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
+.fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+/* A frozen header cell is stuck on both axes wherever the head is frozen too, so
+   it has to outrank both. */
+.fdy-table--sticky thead .fdy-table__freeze{z-index:3;}
+.fdy-table--sticky .fdy-table__freeze--edge{border-right:var(--bw) solid var(--color-border);}
 
 /* The scrollport a sticky cell sticks to. Both axes scroll here, and the height is a
    custom property so a page can size it without out-specifying this rule. */

package/dist/freeday.css

@@ -762,12 +762,12 @@ a { color: var(--color-primary); }
 .fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__title:hover{background:var(--color-surface-2);}
 .fdy-cal__title:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-cal__month{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
-.fdy-cal__month:hover{background:var(--color-surface-2);}
-.fdy-cal__month:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-cal__month:disabled{opacity:.4;cursor:not-allowed;background:transparent;}
-.fdy-cal__month.is-today{font-weight:var(--weight-bold);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);}
-.fdy-cal__month.is-selected{background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--weight-semibold);}
+.fdy-cal__month,.fdy-cal__year{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
+.fdy-cal__month:hover,.fdy-cal__year:hover{background:var(--color-surface-2);}
+.fdy-cal__month:focus-visible,.fdy-cal__year:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
+.fdy-cal__month:disabled,.fdy-cal__year:disabled{opacity:.4;cursor:not-allowed;background:transparent;}
+.fdy-cal__month.is-today,.fdy-cal__year.is-today{font-weight:var(--weight-bold);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);}
+.fdy-cal__month.is-selected,.fdy-cal__year.is-selected{background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--weight-semibold);}
 .fdy-cal__nav{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);font-size:var(--text-lg);line-height:1;cursor:pointer;}
 .fdy-cal__nav:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-cal__nav:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
@@ -778,7 +778,7 @@ a { color: var(--color-primary); }
    AFTER `.fdy-cal__grid`, and that is the whole rule: the element carries both classes, they weigh
    the same, so source order decides. Declared earlier, the modifier lost to the base it modifies and
    twelve months rendered seven across — the layout the comment above described, never once applied. */
-.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
+.fdy-cal__grid--months,.fdy-cal__grid--years{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__dow{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:capitalize;}
 .fdy-cal__day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;cursor:pointer;}
 .fdy-cal__day:hover{background:var(--color-surface-2);}
@@ -915,6 +915,14 @@ a { color: var(--color-primary); }
  * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
  * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
  * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
+/* A control that carries NO label of its own — a checkbox, a switch, a lone
+   button — in a bar whose `align-items:flex-end` exists to line up LABELLED
+   fields. Flex-end puts such a control's bottom on the inputs' bottom, so a
+   20px checkbox sits well below the 32px input's centre line and reads as
+   dropped. Giving it the height of a control lands its box exactly where an
+   input's box ends, and its own centring then puts it on the input's centre
+   line. Raised from IDU_EMATE_APPL_WEB (#014). */
+.fdy-filterbar>.fdy-check,.fdy-filterbar>.fdy-radio,.fdy-filterbar>.fdy-switch,.fdy-filterbar>.fdy-btn{min-height:var(--control-h);}
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
  * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
@@ -1284,15 +1292,37 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    back on the cell that sticks. */
 .fdy-table--sticky{border-collapse:separate;border-spacing:0;}
 .fdy-table--sticky th,.fdy-table--sticky td{border-bottom:var(--bw) solid var(--color-border-muted);}
-.fdy-table--sticky thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
-/* The row header freezes sideways over the data cells, so it needs an opaque
-   background of its own — and it takes the BODY surface, not the header one, so a
-   hovered row stays one continuous band across the freeze line. Losing that is
-   losing the only way to track a row across a wide grid. */
-.fdy-table--sticky tbody th{position:sticky;left:0;z-index:1;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);}
-.fdy-table--sticky tbody tr:hover th{background:var(--color-surface-2);}
-/* The corner cell is frozen on both axes, so it has to outrank both. */
-.fdy-table--sticky thead th:first-child{left:0;z-index:3;border-right:var(--bw) solid var(--color-border);}
+
+/* Freezing the HEADER ROW is its own modifier because it needs a vertical
+   scrollport (`.fdy-table-scroll--frozen`). A table that only freezes columns
+   scrolls with the PAGE, and `top:0` against the page sticks the header under
+   the viewport edge — over the app's own top bar — which is worse than not
+   freezing it. Ask for the axis you actually have. */
+.fdy-table--sticky-head thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+
+/* Freezing a COLUMN: put `.fdy-table__freeze` on every cell of it, header
+   included, and give each frozen column its own `--fdy-freeze-left` — 0 for the
+   first, the summed widths of the frozen columns left of it after that. One
+   frozen column needs no variable at all. Mark the last one `--edge` so the
+   reader can see where the frozen block ends.
+
+   The offsets are the caller's job on purpose: they depend on rendered column
+   widths, which CSS cannot sum, and hard-coding them here would only work for
+   tables whose columns are all the same width. */
+.fdy-table--sticky .fdy-table__freeze{position:sticky;left:var(--fdy-freeze-left,0);}
+/* A frozen body cell slides OVER the data, so it must be OPAQUE — otherwise the
+   cells beneath show through it. A `th` already carries the header tint from the
+   base rule, and that tint is usually the whole point: it is what marks a column
+   as identity rather than data. So only a `td` is given a surface here. A table
+   that wants its frozen `th` to read as a body row instead — a rate matrix, where
+   a hovered row should band unbroken across the freeze line — says so itself. */
+.fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
+.fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+/* A frozen header cell is stuck on both axes wherever the head is frozen too, so
+   it has to outrank both. */
+.fdy-table--sticky thead .fdy-table__freeze{z-index:3;}
+.fdy-table--sticky .fdy-table__freeze--edge{border-right:var(--bw) solid var(--color-border);}
 
 /* The scrollport a sticky cell sticks to. Both axes scroll here, and the height is a
    custom property so a page can size it without out-specifying this rule. */

package/dist/freeday.js

@@ -1364,8 +1364,8 @@
     wrap.dataset.fdyDpReady = '1';
     wrap.classList.add('fdy-datepicker');
 
-    var placeholder = wrap.getAttribute('data-placeholder') || 'Pilih tanggal';
-    var label = wrap.getAttribute('data-label') || 'Tanggal';
+    var placeholder = wrap.getAttribute('data-placeholder') || 'Choose a date';
+    var label = wrap.getAttribute('data-label') || 'Date';
     var selected = parseISO(wrap.getAttribute('data-value'));
     var minDate = parseISO(wrap.getAttribute('data-min'));
     var maxDate = parseISO(wrap.getAttribute('data-max'));
@@ -1380,6 +1380,7 @@
        month" twenty-four times to reach a date two years back. */
     var mode = 'days';
     var focusMonth = null;
+    var focusYear = null;
 
     var trigger = document.createElement('button');
     trigger.type = 'button';
@@ -1457,20 +1458,21 @@
     }
 
     function render() {
+      if (mode === 'years') { renderYears(); return; }
       if (mode === 'months') { renderMonths(); return; }
       panel.innerHTML = '';
       var head = document.createElement('div');
       head.className = 'fdy-cal__head';
-      var title = titleButton(monthFmt.format(view), monthFmt.format(view) + ', pilih bulan', function () {
+      var title = titleButton(monthFmt.format(view), monthFmt.format(view) + ', choose month', function () {
         mode = 'months';
         focusMonth = view.getMonth();
         render();
         focusMonthCell();
       });
       panel.setAttribute('aria-labelledby', title.id);
-      head.appendChild(navButton('‹', 'Bulan sebelumnya', function () { view = addMonths(view, -1); render(); }));
+      head.appendChild(navButton('‹', 'Previous month', function () { view = addMonths(view, -1); render(); }));
       head.appendChild(title);
-      head.appendChild(navButton('›', 'Bulan berikutnya', function () { view = addMonths(view, 1); render(); }));
+      head.appendChild(navButton('›', 'Next month', function () { view = addMonths(view, 1); render(); }));
       panel.appendChild(head);
 
       var grid = document.createElement('div');
@@ -1527,15 +1529,16 @@
       var year = view.getFullYear();
       var head = document.createElement('div');
       head.className = 'fdy-cal__head';
-      var title = titleButton(String(year), year + ', kembali ke tanggal', function () {
-        mode = 'days';
+      var title = titleButton(String(year), year + ', choose year', function () {
+        mode = 'years';
+        focusYear = year;
         render();
-        focusFocusDate();
+        focusYearCell();
       });
       panel.setAttribute('aria-labelledby', title.id);
-      head.appendChild(navButton('‹', 'Tahun sebelumnya', function () { view = addMonths(view, -12); render(); focusMonthCell(); }));
+      head.appendChild(navButton('‹', 'Previous year', function () { view = addMonths(view, -12); render(); focusMonthCell(); }));
       head.appendChild(title);
-      head.appendChild(navButton('›', 'Tahun berikutnya', function () { view = addMonths(view, 12); render(); focusMonthCell(); }));
+      head.appendChild(navButton('›', 'Next year', function () { view = addMonths(view, 12); render(); focusMonthCell(); }));
       panel.appendChild(head);
 
       var grid = document.createElement('div');
@@ -1566,6 +1569,108 @@
       panel.appendChild(grid);
     }
 
+    /* A page of twelve years, aligned so pages TILE: 2016-2027, 2028-2039. Anchoring the page on
+       the year in view instead would make ‹ and › land on overlapping windows, and the same year
+       would appear at a different spot every time you stepped. */
+    var YEARS_PER_PAGE = 12;
+    function yearPageStart(y) { return Math.floor(y / YEARS_PER_PAGE) * YEARS_PER_PAGE; }
+
+    /* A year is only unreachable when EVERY month in it falls outside min/max — the same rule
+       monthDisabled applies one level down, for the same reason: a bound that sits inside the year
+       disables neither end. */
+    function yearDisabled(y) {
+      if (minDate && new Date(y, 11, 31) < startOfDay(minDate)) return true;
+      if (maxDate && new Date(y, 0, 1) > startOfDay(maxDate)) return true;
+      return false;
+    }
+
+    function renderYears() {
+      panel.innerHTML = '';
+      var start = yearPageStart(view.getFullYear());
+      var end = start + YEARS_PER_PAGE - 1;
+      var head = document.createElement('div');
+      head.className = 'fdy-cal__head';
+      var title = titleButton(start + ' – ' + end, start + ' to ' + end + ', back to months', function () {
+        mode = 'months';
+        focusMonth = view.getMonth();
+        render();
+        focusMonthCell();
+      });
+      panel.setAttribute('aria-labelledby', title.id);
+      head.appendChild(navButton('‹', 'Previous years', function () { moveYearFocus(focusYear - YEARS_PER_PAGE); }));
+      head.appendChild(title);
+      head.appendChild(navButton('›', 'Next years', function () { moveYearFocus(focusYear + YEARS_PER_PAGE); }));
+      panel.appendChild(head);
+
+      var grid = document.createElement('div');
+      grid.className = 'fdy-cal__grid fdy-cal__grid--years';
+      grid.setAttribute('role', 'grid');
+      grid.setAttribute('aria-labelledby', title.id);
+      var thisYear = new Date().getFullYear();
+      if (focusYear === null) focusYear = view.getFullYear();
+      for (var i = 0; i < YEARS_PER_PAGE; i++) {
+        var y = start + i;
+        var btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'fdy-cal__year';
+        btn.setAttribute('role', 'gridcell');
+        btn.setAttribute('aria-label', String(y));
+        btn.textContent = String(y);
+        if (y === thisYear) btn.classList.add('is-today');
+        if (selected && selected.getFullYear() === y) {
+          btn.classList.add('is-selected');
+          btn.setAttribute('aria-selected', 'true');
+        }
+        if (yearDisabled(y)) btn.disabled = true;
+        btn.tabIndex = y === focusYear ? 0 : -1;
+        btn.addEventListener('click', (function (yy) { return function () { openYear(yy); }; })(y));
+        grid.appendChild(btn);
+      }
+      grid.addEventListener('keydown', onYearKey);
+      panel.appendChild(grid);
+    }
+
+    function focusYearCell() {
+      var cell = panel.querySelector('.fdy-cal__year[tabindex="0"]');
+      if (cell) cell.focus();
+    }
+
+    /* Picking a year is navigation, exactly like picking a month: it drops to the month grid of
+       that year. Nothing is committed until a DAY is chosen. */
+    function openYear(y) {
+      view = new Date(y, view.getMonth(), 1);
+      focusMonth = view.getMonth();
+      mode = 'months';
+      render();
+      focusMonthCell();
+    }
+
+    function moveYearFocus(y) {
+      focusYear = y;
+      view = new Date(y, view.getMonth(), 1);
+      render();
+      focusYearCell();
+    }
+
+    function onYearKey(e) {
+      var handled = true;
+      switch (e.key) {
+        case 'ArrowLeft': moveYearFocus(focusYear - 1); break;
+        case 'ArrowRight': moveYearFocus(focusYear + 1); break;
+        case 'ArrowUp': moveYearFocus(focusYear - 3); break;
+        case 'ArrowDown': moveYearFocus(focusYear + 3); break;
+        case 'Home': moveYearFocus(yearPageStart(focusYear)); break;
+        case 'End': moveYearFocus(yearPageStart(focusYear) + YEARS_PER_PAGE - 1); break;
+        case 'PageUp': moveYearFocus(focusYear - YEARS_PER_PAGE); break;
+        case 'PageDown': moveYearFocus(focusYear + YEARS_PER_PAGE); break;
+        case 'Enter':
+        case ' ': openYear(focusYear); break;
+        case 'Escape': close(true); break;
+        default: handled = false;
+      }
+      if (handled) { e.preventDefault(); e.stopPropagation(); }
+    }
+
     function focusMonthCell() {
       var cell = panel.querySelector('.fdy-cal__month[tabindex="0"]');
       if (cell) cell.focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.35.0",
+  "version": "1.37.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/components/datepicker.css

@@ -34,12 +34,12 @@
 .fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__title:hover{background:var(--color-surface-2);}
 .fdy-cal__title:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-cal__month{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
-.fdy-cal__month:hover{background:var(--color-surface-2);}
-.fdy-cal__month:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-.fdy-cal__month:disabled{opacity:.4;cursor:not-allowed;background:transparent;}
-.fdy-cal__month.is-today{font-weight:var(--weight-bold);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);}
-.fdy-cal__month.is-selected{background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--weight-semibold);}
+.fdy-cal__month,.fdy-cal__year{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
+.fdy-cal__month:hover,.fdy-cal__year:hover{background:var(--color-surface-2);}
+.fdy-cal__month:focus-visible,.fdy-cal__year:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
+.fdy-cal__month:disabled,.fdy-cal__year:disabled{opacity:.4;cursor:not-allowed;background:transparent;}
+.fdy-cal__month.is-today,.fdy-cal__year.is-today{font-weight:var(--weight-bold);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);}
+.fdy-cal__month.is-selected,.fdy-cal__year.is-selected{background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--weight-semibold);}
 .fdy-cal__nav{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);font-size:var(--text-lg);line-height:1;cursor:pointer;}
 .fdy-cal__nav:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-cal__nav:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
@@ -50,7 +50,7 @@
    AFTER `.fdy-cal__grid`, and that is the whole rule: the element carries both classes, they weigh
    the same, so source order decides. Declared earlier, the modifier lost to the base it modifies and
    twelve months rendered seven across — the layout the comment above described, never once applied. */
-.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
+.fdy-cal__grid--months,.fdy-cal__grid--years{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__dow{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:capitalize;}
 .fdy-cal__day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;cursor:pointer;}
 .fdy-cal__day:hover{background:var(--color-surface-2);}

package/src/components/filterbar.css

@@ -28,6 +28,14 @@
  * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
  * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
  * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
+/* A control that carries NO label of its own — a checkbox, a switch, a lone
+   button — in a bar whose `align-items:flex-end` exists to line up LABELLED
+   fields. Flex-end puts such a control's bottom on the inputs' bottom, so a
+   20px checkbox sits well below the 32px input's centre line and reads as
+   dropped. Giving it the height of a control lands its box exactly where an
+   input's box ends, and its own centring then puts it on the input's centre
+   line. Raised from IDU_EMATE_APPL_WEB (#014). */
+.fdy-filterbar>.fdy-check,.fdy-filterbar>.fdy-radio,.fdy-filterbar>.fdy-switch,.fdy-filterbar>.fdy-btn{min-height:var(--control-h);}
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
  * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */

package/src/components/table.css

@@ -47,15 +47,37 @@
    back on the cell that sticks. */
 .fdy-table--sticky{border-collapse:separate;border-spacing:0;}
 .fdy-table--sticky th,.fdy-table--sticky td{border-bottom:var(--bw) solid var(--color-border-muted);}
-.fdy-table--sticky thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
-/* The row header freezes sideways over the data cells, so it needs an opaque
-   background of its own — and it takes the BODY surface, not the header one, so a
-   hovered row stays one continuous band across the freeze line. Losing that is
-   losing the only way to track a row across a wide grid. */
-.fdy-table--sticky tbody th{position:sticky;left:0;z-index:1;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);}
-.fdy-table--sticky tbody tr:hover th{background:var(--color-surface-2);}
-/* The corner cell is frozen on both axes, so it has to outrank both. */
-.fdy-table--sticky thead th:first-child{left:0;z-index:3;border-right:var(--bw) solid var(--color-border);}
+
+/* Freezing the HEADER ROW is its own modifier because it needs a vertical
+   scrollport (`.fdy-table-scroll--frozen`). A table that only freezes columns
+   scrolls with the PAGE, and `top:0` against the page sticks the header under
+   the viewport edge — over the app's own top bar — which is worse than not
+   freezing it. Ask for the axis you actually have. */
+.fdy-table--sticky-head thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+
+/* Freezing a COLUMN: put `.fdy-table__freeze` on every cell of it, header
+   included, and give each frozen column its own `--fdy-freeze-left` — 0 for the
+   first, the summed widths of the frozen columns left of it after that. One
+   frozen column needs no variable at all. Mark the last one `--edge` so the
+   reader can see where the frozen block ends.
+
+   The offsets are the caller's job on purpose: they depend on rendered column
+   widths, which CSS cannot sum, and hard-coding them here would only work for
+   tables whose columns are all the same width. */
+.fdy-table--sticky .fdy-table__freeze{position:sticky;left:var(--fdy-freeze-left,0);}
+/* A frozen body cell slides OVER the data, so it must be OPAQUE — otherwise the
+   cells beneath show through it. A `th` already carries the header tint from the
+   base rule, and that tint is usually the whole point: it is what marks a column
+   as identity rather than data. So only a `td` is given a surface here. A table
+   that wants its frozen `th` to read as a body row instead — a rate matrix, where
+   a hovered row should band unbroken across the freeze line — says so itself. */
+.fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
+.fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+/* A frozen header cell is stuck on both axes wherever the head is frozen too, so
+   it has to outrank both. */
+.fdy-table--sticky thead .fdy-table__freeze{z-index:3;}
+.fdy-table--sticky .fdy-table__freeze--edge{border-right:var(--bw) solid var(--color-border);}
 
 /* The scrollport a sticky cell sticks to. Both axes scroll here, and the height is a
    custom property so a page can size it without out-specifying this rule. */