@idds/js 1.0.97 → 1.0.99

package/dist/index.iife.js

@@ -35,6 +35,7 @@ var InaUI = (() => {
     initFileUploadItem: () => initFileUploadItem,
     initImgCompare: () => initImgCompare,
     initModal: () => initModal,
+    initMonthPicker: () => initMonthPicker,
     initPagination: () => initPagination,
     initRadioButton: () => initRadioButton,
     initRangeDatepicker: () => initRangeDatepicker,
@@ -47,6 +48,7 @@ var InaUI = (() => {
     initTable: () => initTable,
     initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
+    initYearPicker: () => initYearPicker,
     setBrandTheme: () => setBrandTheme,
     showToast: () => showToast
   });
@@ -726,6 +728,14 @@ var InaUI = (() => {
           this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
           this.renderPanel();
         };
+        prevBtn.onkeydown = (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
+            this.renderPanel();
+          }
+        };
         header.appendChild(prevBtn);
       } else {
         const spacer = document.createElement("div");
@@ -772,6 +782,14 @@ var InaUI = (() => {
           this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
           this.renderPanel();
         };
+        nextBtn.onkeydown = (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
+            this.renderPanel();
+          }
+        };
         header.appendChild(nextBtn);
       } else if (!isNextMonth) {
         const spacer = document.createElement("div");
@@ -803,6 +821,8 @@ var InaUI = (() => {
         btn.type = "button";
         btn.className = `${PREFIX}-date-picker__day`;
         btn.textContent = i;
+        btn.setAttribute("role", "gridcell");
+        btn.tabIndex = -1;
         const disabled = this.isDateDisabled(date);
         if (disabled) {
           btn.classList.add(`${PREFIX}-date-picker__day--disabled`);
@@ -826,6 +846,7 @@ var InaUI = (() => {
             isSelected = true;
           if (start && end && date > start && date < end) isInRange = true;
         }
+        btn.setAttribute("aria-selected", isSelected.toString());
         if (isSelected) btn.classList.add(`${PREFIX}-date-picker__day--selected`);
         if (isInRange) btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
         if (date.toDateString() === today.toDateString())
@@ -837,6 +858,24 @@ var InaUI = (() => {
             e.stopPropagation();
             this.handleDateSelect(date);
           };
+          btn.onkeydown = (e) => {
+            if (disabled || this.options.readonly) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              this.handleDateSelect(date);
+            } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+              e.preventDefault();
+              const buttons = Array.from(grid.querySelectorAll("button"));
+              const currentIndex = buttons.indexOf(btn);
+              let nextIndex = currentIndex;
+              if (e.key === "ArrowRight") nextIndex += 1;
+              else if (e.key === "ArrowLeft") nextIndex -= 1;
+              else if (e.key === "ArrowDown") nextIndex += 7;
+              else if (e.key === "ArrowUp") nextIndex -= 7;
+              const targetBtn = buttons[nextIndex];
+              if (targetBtn) targetBtn.focus();
+            }
+          };
         }
         grid.appendChild(btn);
       }
@@ -849,6 +888,19 @@ var InaUI = (() => {
         btn.textContent = i;
         grid.appendChild(btn);
       }
+      setTimeout(() => {
+        const allButtons = Array.from(
+          grid.querySelectorAll("button:not(.ina-date-picker__day--other-month)")
+        );
+        const selectedBtn = allButtons.find(
+          (b) => b.classList.contains(`${PREFIX}-date-picker__day--selected`)
+        );
+        const todayBtn = allButtons.find(
+          (b) => b.classList.contains(`${PREFIX}-date-picker__day--today`) && !b.disabled
+        );
+        const focusableBtn = selectedBtn || todayBtn || allButtons.find((b) => !b.disabled);
+        if (focusableBtn) focusableBtn.tabIndex = 0;
+      }, 0);
       container.append(header, grid);
       return container;
     }
@@ -3923,6 +3975,330 @@ var InaUI = (() => {
     return instances.length === 1 ? instances[0] : instances;
   }
 
+  // src/js/components/stateful/month-picker.js
+  var MONTHS_SHORT_ID = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "Mei",
+    "Jun",
+    "Jul",
+    "Agu",
+    "Sep",
+    "Okt",
+    "Nov",
+    "Des"
+  ];
+  function initMonthPicker(rootSelector = `.${PREFIX}-month-picker`) {
+    const pickers = document.querySelectorAll(rootSelector);
+    pickers.forEach((container) => {
+      if (container.dataset.initialized === "true") return;
+      container.dataset.initialized = "true";
+      let currentMonthIdx = parseInt(container.dataset.value || "0", 10);
+      const disabled = container.hasAttribute("disabled");
+      const readonly = container.hasAttribute("readonly");
+      const trigger = container.querySelector(`.${PREFIX}-month-picker__trigger`);
+      const panel = container.querySelector(`.${PREFIX}-month-picker__panel`);
+      const grid = container.querySelector(`.${PREFIX}-month-picker__grid`);
+      const options2 = grid ? Array.from(
+        grid.querySelectorAll(`.${PREFIX}-month-picker__month-option`)
+      ) : [];
+      if (!trigger || !panel || !grid || options2.length === 0) return;
+      let isPickerOpen = false;
+      const updateText = () => {
+        const textEl = trigger.querySelector(
+          `.${PREFIX}-month-picker__trigger-text`
+        );
+        if (textEl) textEl.textContent = MONTHS_SHORT_ID[currentMonthIdx];
+        options2.forEach((opt, idx) => {
+          if (idx === currentMonthIdx) {
+            opt.classList.add(`${PREFIX}-month-picker__month-option--selected`);
+            opt.setAttribute("aria-selected", "true");
+            opt.tabIndex = 0;
+          } else {
+            opt.classList.remove(
+              `${PREFIX}-month-picker__month-option--selected`
+            );
+            opt.setAttribute("aria-selected", "false");
+            opt.tabIndex = -1;
+          }
+        });
+      };
+      const togglePicker = (show) => {
+        if (disabled || readonly) return;
+        isPickerOpen = show;
+        if (show) {
+          panel.classList.add(`${PREFIX}-month-picker__panel--open`);
+          trigger.setAttribute("aria-expanded", "true");
+          setTimeout(() => {
+            const selectedOpt = options2.find((o) => o.tabIndex === 0);
+            if (selectedOpt) selectedOpt.focus();
+          }, 0);
+        } else {
+          panel.classList.remove(`${PREFIX}-month-picker__panel--open`);
+          trigger.setAttribute("aria-expanded", "false");
+        }
+      };
+      updateText();
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        togglePicker(!isPickerOpen);
+      });
+      trigger.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          togglePicker(!isPickerOpen);
+        }
+      });
+      document.addEventListener("click", (e) => {
+        if (!container.contains(e.target)) togglePicker(false);
+      });
+      options2.forEach((btn, idx) => {
+        btn.setAttribute("role", "option");
+        btn.addEventListener("click", (e) => {
+          if (disabled || readonly) return;
+          e.stopPropagation();
+          e.preventDefault();
+          currentMonthIdx = idx;
+          updateText();
+          togglePicker(false);
+          trigger.focus();
+          container.dispatchEvent(
+            new CustomEvent("change", {
+              detail: { value: currentMonthIdx },
+              bubbles: true,
+              composed: true
+            })
+          );
+        });
+        btn.addEventListener("keydown", (e) => {
+          if (disabled || readonly) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            currentMonthIdx = idx;
+            updateText();
+            togglePicker(false);
+            trigger.focus();
+            container.dispatchEvent(
+              new CustomEvent("change", {
+                detail: { value: currentMonthIdx },
+                bubbles: true,
+                composed: true
+              })
+            );
+          } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+            e.preventDefault();
+            e.stopPropagation();
+            let nextIndex = idx;
+            if (e.key === "ArrowRight") nextIndex += 1;
+            else if (e.key === "ArrowLeft") nextIndex -= 1;
+            else if (e.key === "ArrowDown")
+              nextIndex += 3;
+            else if (e.key === "ArrowUp") nextIndex -= 3;
+            if (options2[nextIndex]) {
+              options2[nextIndex].focus();
+            }
+          }
+        });
+      });
+    });
+  }
+
+  // src/js/components/stateful/year-picker.js
+  function initYearPicker(rootSelector = `.${PREFIX}-year-picker`) {
+    const pickers = document.querySelectorAll(rootSelector);
+    pickers.forEach((container) => {
+      if (container.dataset.initialized === "true") return;
+      container.dataset.initialized = "true";
+      let currentYearVal = parseInt(
+        container.dataset.value || (/* @__PURE__ */ new Date()).getFullYear().toString(),
+        10
+      );
+      const disabled = container.hasAttribute("disabled");
+      const readonly = container.hasAttribute("readonly");
+      const maxYear = container.dataset.max ? parseInt(container.dataset.max, 10) : 2100;
+      const minYear = container.dataset.min ? parseInt(container.dataset.min, 10) : 1900;
+      let isPickerOpen = false;
+      let decadeSize = 20;
+      const trigger = container.querySelector(`.${PREFIX}-year-picker__trigger`);
+      const panel = container.querySelector(`.${PREFIX}-year-picker__panel`);
+      const grid = container.querySelector(`.${PREFIX}-year-picker__grid`);
+      const prevBtn = container.querySelector(
+        `.${PREFIX}-year-picker__nav-button[aria-label="Previous decade"]`
+      );
+      const nextBtn = container.querySelector(
+        `.${PREFIX}-year-picker__nav-button[aria-label="Next decade"]`
+      );
+      const rangeText = container.querySelector(
+        `.${PREFIX}-year-picker__decade-range`
+      );
+      if (!trigger || !panel || !grid) return;
+      let decadeStart = Math.floor(currentYearVal / decadeSize) * decadeSize;
+      const renderGrid = () => {
+        grid.innerHTML = "";
+        if (rangeText) {
+          rangeText.textContent = `${decadeStart} - ${decadeStart + decadeSize - 1}`;
+        }
+        if (prevBtn) {
+          prevBtn.disabled = disabled || readonly || decadeStart <= minYear;
+        }
+        if (nextBtn) {
+          nextBtn.disabled = disabled || readonly || decadeStart + decadeSize > maxYear;
+        }
+        for (let y = decadeStart; y < decadeStart + decadeSize; y++) {
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = `${PREFIX}-year-picker__year-option`;
+          if (y === currentYearVal) {
+            btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
+            btn.setAttribute("aria-selected", "true");
+            btn.tabIndex = 0;
+          } else {
+            btn.setAttribute("aria-selected", "false");
+            btn.tabIndex = -1;
+          }
+          if (y < minYear || y > maxYear) {
+            btn.disabled = true;
+            btn.classList.add(`${PREFIX}-year-picker__year-option--disabled`);
+          }
+          btn.textContent = y.toString();
+          btn.setAttribute("role", "option");
+          btn.addEventListener("click", (e) => {
+            if (disabled || readonly || btn.disabled) return;
+            e.stopPropagation();
+            currentYearVal = y;
+            updateText();
+            togglePicker(false);
+            trigger.focus();
+            container.dispatchEvent(
+              new CustomEvent("change", {
+                detail: { value: currentYearVal },
+                bubbles: true,
+                composed: true
+              })
+            );
+          });
+          btn.addEventListener("keydown", (e) => {
+            if (disabled || readonly || btn.disabled) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              e.stopPropagation();
+              currentYearVal = y;
+              updateText();
+              togglePicker(false);
+              trigger.focus();
+              container.dispatchEvent(
+                new CustomEvent("change", {
+                  detail: { value: currentYearVal },
+                  bubbles: true,
+                  composed: true
+                })
+              );
+            } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+              e.preventDefault();
+              e.stopPropagation();
+              const options2 = Array.from(
+                grid.querySelectorAll(
+                  `.${PREFIX}-year-picker__year-option:not(:disabled)`
+                )
+              );
+              const currentIndex = options2.indexOf(btn);
+              if (currentIndex === -1) return;
+              let nextIndex = currentIndex;
+              if (e.key === "ArrowRight") nextIndex += 1;
+              else if (e.key === "ArrowLeft") nextIndex -= 1;
+              else if (e.key === "ArrowDown")
+                nextIndex += 4;
+              else if (e.key === "ArrowUp") nextIndex -= 4;
+              if (options2[nextIndex]) {
+                options2[nextIndex].focus();
+              } else {
+              }
+            }
+          });
+          grid.appendChild(btn);
+        }
+      };
+      const updateText = () => {
+        const textEl = trigger.querySelector(
+          `.${PREFIX}-year-picker__trigger-text`
+        );
+        if (textEl) textEl.textContent = currentYearVal.toString();
+      };
+      const togglePicker = (show) => {
+        if (disabled || readonly) return;
+        isPickerOpen = show;
+        if (show) {
+          decadeStart = Math.floor(currentYearVal / decadeSize) * decadeSize;
+          renderGrid();
+          panel.classList.add(`${PREFIX}-year-picker__panel--open`);
+          trigger.setAttribute("aria-expanded", "true");
+          setTimeout(() => {
+            const selectedOpt = grid.querySelector(
+              `.${PREFIX}-year-picker__year-option--selected`
+            );
+            if (selectedOpt) selectedOpt.focus();
+            else if (grid.firstElementChild) grid.firstElementChild.focus();
+          }, 0);
+        } else {
+          panel.classList.remove(`${PREFIX}-year-picker__panel--open`);
+          trigger.setAttribute("aria-expanded", "false");
+        }
+      };
+      updateText();
+      renderGrid();
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        togglePicker(!isPickerOpen);
+      });
+      trigger.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          togglePicker(!isPickerOpen);
+        }
+      });
+      document.addEventListener("click", (e) => {
+        if (!container.contains(e.target)) togglePicker(false);
+      });
+      if (prevBtn) {
+        prevBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          decadeStart -= decadeSize;
+          renderGrid();
+        });
+        prevBtn.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            decadeStart -= decadeSize;
+            renderGrid();
+          }
+        });
+      }
+      if (nextBtn) {
+        nextBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          decadeStart += decadeSize;
+          renderGrid();
+        });
+        nextBtn.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            decadeStart += decadeSize;
+            renderGrid();
+          }
+        });
+      }
+    });
+  }
+
   // src/js/components/stateless/toast.js
   var ICONS3 = {
     default: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
@@ -4253,6 +4629,8 @@ var InaUI = (() => {
       initTabVertical();
       initTabHorizontal();
       initTable();
+      initMonthPicker();
+      initYearPicker();
     });
   }
   return __toCommonJS(bundle_exports);

package/dist/index.js

@@ -716,6 +716,14 @@ var DatePicker = class {
         this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
         this.renderPanel();
       };
+      prevBtn.onkeydown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
+          this.renderPanel();
+        }
+      };
       header.appendChild(prevBtn);
     } else {
       const spacer = document.createElement("div");
@@ -762,6 +770,14 @@ var DatePicker = class {
         this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
         this.renderPanel();
       };
+      nextBtn.onkeydown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
+          this.renderPanel();
+        }
+      };
       header.appendChild(nextBtn);
     } else if (!isNextMonth) {
       const spacer = document.createElement("div");
@@ -793,6 +809,8 @@ var DatePicker = class {
       btn.type = "button";
       btn.className = `${PREFIX}-date-picker__day`;
       btn.textContent = i;
+      btn.setAttribute("role", "gridcell");
+      btn.tabIndex = -1;
       const disabled = this.isDateDisabled(date);
       if (disabled) {
         btn.classList.add(`${PREFIX}-date-picker__day--disabled`);
@@ -816,6 +834,7 @@ var DatePicker = class {
           isSelected = true;
         if (start && end && date > start && date < end) isInRange = true;
       }
+      btn.setAttribute("aria-selected", isSelected.toString());
       if (isSelected) btn.classList.add(`${PREFIX}-date-picker__day--selected`);
       if (isInRange) btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
       if (date.toDateString() === today.toDateString())
@@ -827,6 +846,24 @@ var DatePicker = class {
           e.stopPropagation();
           this.handleDateSelect(date);
         };
+        btn.onkeydown = (e) => {
+          if (disabled || this.options.readonly) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.handleDateSelect(date);
+          } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+            e.preventDefault();
+            const buttons = Array.from(grid.querySelectorAll("button"));
+            const currentIndex = buttons.indexOf(btn);
+            let nextIndex = currentIndex;
+            if (e.key === "ArrowRight") nextIndex += 1;
+            else if (e.key === "ArrowLeft") nextIndex -= 1;
+            else if (e.key === "ArrowDown") nextIndex += 7;
+            else if (e.key === "ArrowUp") nextIndex -= 7;
+            const targetBtn = buttons[nextIndex];
+            if (targetBtn) targetBtn.focus();
+          }
+        };
       }
       grid.appendChild(btn);
     }
@@ -839,6 +876,19 @@ var DatePicker = class {
       btn.textContent = i;
       grid.appendChild(btn);
     }
+    setTimeout(() => {
+      const allButtons = Array.from(
+        grid.querySelectorAll("button:not(.ina-date-picker__day--other-month)")
+      );
+      const selectedBtn = allButtons.find(
+        (b) => b.classList.contains(`${PREFIX}-date-picker__day--selected`)
+      );
+      const todayBtn = allButtons.find(
+        (b) => b.classList.contains(`${PREFIX}-date-picker__day--today`) && !b.disabled
+      );
+      const focusableBtn = selectedBtn || todayBtn || allButtons.find((b) => !b.disabled);
+      if (focusableBtn) focusableBtn.tabIndex = 0;
+    }, 0);
     container.append(header, grid);
     return container;
   }
@@ -4005,6 +4055,330 @@ function initTable(selectorOrElement, options2 = {}) {
   return instances.length === 1 ? instances[0] : instances;
 }
 
+// src/js/components/stateful/month-picker.js
+var MONTHS_SHORT_ID = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "Mei",
+  "Jun",
+  "Jul",
+  "Agu",
+  "Sep",
+  "Okt",
+  "Nov",
+  "Des"
+];
+function initMonthPicker(rootSelector = `.${PREFIX}-month-picker`) {
+  const pickers = document.querySelectorAll(rootSelector);
+  pickers.forEach((container) => {
+    if (container.dataset.initialized === "true") return;
+    container.dataset.initialized = "true";
+    let currentMonthIdx = parseInt(container.dataset.value || "0", 10);
+    const disabled = container.hasAttribute("disabled");
+    const readonly = container.hasAttribute("readonly");
+    const trigger = container.querySelector(`.${PREFIX}-month-picker__trigger`);
+    const panel = container.querySelector(`.${PREFIX}-month-picker__panel`);
+    const grid = container.querySelector(`.${PREFIX}-month-picker__grid`);
+    const options2 = grid ? Array.from(
+      grid.querySelectorAll(`.${PREFIX}-month-picker__month-option`)
+    ) : [];
+    if (!trigger || !panel || !grid || options2.length === 0) return;
+    let isPickerOpen = false;
+    const updateText = () => {
+      const textEl = trigger.querySelector(
+        `.${PREFIX}-month-picker__trigger-text`
+      );
+      if (textEl) textEl.textContent = MONTHS_SHORT_ID[currentMonthIdx];
+      options2.forEach((opt, idx) => {
+        if (idx === currentMonthIdx) {
+          opt.classList.add(`${PREFIX}-month-picker__month-option--selected`);
+          opt.setAttribute("aria-selected", "true");
+          opt.tabIndex = 0;
+        } else {
+          opt.classList.remove(
+            `${PREFIX}-month-picker__month-option--selected`
+          );
+          opt.setAttribute("aria-selected", "false");
+          opt.tabIndex = -1;
+        }
+      });
+    };
+    const togglePicker = (show) => {
+      if (disabled || readonly) return;
+      isPickerOpen = show;
+      if (show) {
+        panel.classList.add(`${PREFIX}-month-picker__panel--open`);
+        trigger.setAttribute("aria-expanded", "true");
+        setTimeout(() => {
+          const selectedOpt = options2.find((o) => o.tabIndex === 0);
+          if (selectedOpt) selectedOpt.focus();
+        }, 0);
+      } else {
+        panel.classList.remove(`${PREFIX}-month-picker__panel--open`);
+        trigger.setAttribute("aria-expanded", "false");
+      }
+    };
+    updateText();
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      togglePicker(!isPickerOpen);
+    });
+    trigger.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!container.contains(e.target)) togglePicker(false);
+    });
+    options2.forEach((btn, idx) => {
+      btn.setAttribute("role", "option");
+      btn.addEventListener("click", (e) => {
+        if (disabled || readonly) return;
+        e.stopPropagation();
+        e.preventDefault();
+        currentMonthIdx = idx;
+        updateText();
+        togglePicker(false);
+        trigger.focus();
+        container.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { value: currentMonthIdx },
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+      btn.addEventListener("keydown", (e) => {
+        if (disabled || readonly) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          currentMonthIdx = idx;
+          updateText();
+          togglePicker(false);
+          trigger.focus();
+          container.dispatchEvent(
+            new CustomEvent("change", {
+              detail: { value: currentMonthIdx },
+              bubbles: true,
+              composed: true
+            })
+          );
+        } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+          e.preventDefault();
+          e.stopPropagation();
+          let nextIndex = idx;
+          if (e.key === "ArrowRight") nextIndex += 1;
+          else if (e.key === "ArrowLeft") nextIndex -= 1;
+          else if (e.key === "ArrowDown")
+            nextIndex += 3;
+          else if (e.key === "ArrowUp") nextIndex -= 3;
+          if (options2[nextIndex]) {
+            options2[nextIndex].focus();
+          }
+        }
+      });
+    });
+  });
+}
+
+// src/js/components/stateful/year-picker.js
+function initYearPicker(rootSelector = `.${PREFIX}-year-picker`) {
+  const pickers = document.querySelectorAll(rootSelector);
+  pickers.forEach((container) => {
+    if (container.dataset.initialized === "true") return;
+    container.dataset.initialized = "true";
+    let currentYearVal = parseInt(
+      container.dataset.value || (/* @__PURE__ */ new Date()).getFullYear().toString(),
+      10
+    );
+    const disabled = container.hasAttribute("disabled");
+    const readonly = container.hasAttribute("readonly");
+    const maxYear = container.dataset.max ? parseInt(container.dataset.max, 10) : 2100;
+    const minYear = container.dataset.min ? parseInt(container.dataset.min, 10) : 1900;
+    let isPickerOpen = false;
+    let decadeSize = 20;
+    const trigger = container.querySelector(`.${PREFIX}-year-picker__trigger`);
+    const panel = container.querySelector(`.${PREFIX}-year-picker__panel`);
+    const grid = container.querySelector(`.${PREFIX}-year-picker__grid`);
+    const prevBtn = container.querySelector(
+      `.${PREFIX}-year-picker__nav-button[aria-label="Previous decade"]`
+    );
+    const nextBtn = container.querySelector(
+      `.${PREFIX}-year-picker__nav-button[aria-label="Next decade"]`
+    );
+    const rangeText = container.querySelector(
+      `.${PREFIX}-year-picker__decade-range`
+    );
+    if (!trigger || !panel || !grid) return;
+    let decadeStart = Math.floor(currentYearVal / decadeSize) * decadeSize;
+    const renderGrid = () => {
+      grid.innerHTML = "";
+      if (rangeText) {
+        rangeText.textContent = `${decadeStart} - ${decadeStart + decadeSize - 1}`;
+      }
+      if (prevBtn) {
+        prevBtn.disabled = disabled || readonly || decadeStart <= minYear;
+      }
+      if (nextBtn) {
+        nextBtn.disabled = disabled || readonly || decadeStart + decadeSize > maxYear;
+      }
+      for (let y = decadeStart; y < decadeStart + decadeSize; y++) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = `${PREFIX}-year-picker__year-option`;
+        if (y === currentYearVal) {
+          btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
+          btn.setAttribute("aria-selected", "true");
+          btn.tabIndex = 0;
+        } else {
+          btn.setAttribute("aria-selected", "false");
+          btn.tabIndex = -1;
+        }
+        if (y < minYear || y > maxYear) {
+          btn.disabled = true;
+          btn.classList.add(`${PREFIX}-year-picker__year-option--disabled`);
+        }
+        btn.textContent = y.toString();
+        btn.setAttribute("role", "option");
+        btn.addEventListener("click", (e) => {
+          if (disabled || readonly || btn.disabled) return;
+          e.stopPropagation();
+          currentYearVal = y;
+          updateText();
+          togglePicker(false);
+          trigger.focus();
+          container.dispatchEvent(
+            new CustomEvent("change", {
+              detail: { value: currentYearVal },
+              bubbles: true,
+              composed: true
+            })
+          );
+        });
+        btn.addEventListener("keydown", (e) => {
+          if (disabled || readonly || btn.disabled) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            currentYearVal = y;
+            updateText();
+            togglePicker(false);
+            trigger.focus();
+            container.dispatchEvent(
+              new CustomEvent("change", {
+                detail: { value: currentYearVal },
+                bubbles: true,
+                composed: true
+              })
+            );
+          } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
+            e.preventDefault();
+            e.stopPropagation();
+            const options2 = Array.from(
+              grid.querySelectorAll(
+                `.${PREFIX}-year-picker__year-option:not(:disabled)`
+              )
+            );
+            const currentIndex = options2.indexOf(btn);
+            if (currentIndex === -1) return;
+            let nextIndex = currentIndex;
+            if (e.key === "ArrowRight") nextIndex += 1;
+            else if (e.key === "ArrowLeft") nextIndex -= 1;
+            else if (e.key === "ArrowDown")
+              nextIndex += 4;
+            else if (e.key === "ArrowUp") nextIndex -= 4;
+            if (options2[nextIndex]) {
+              options2[nextIndex].focus();
+            } else {
+            }
+          }
+        });
+        grid.appendChild(btn);
+      }
+    };
+    const updateText = () => {
+      const textEl = trigger.querySelector(
+        `.${PREFIX}-year-picker__trigger-text`
+      );
+      if (textEl) textEl.textContent = currentYearVal.toString();
+    };
+    const togglePicker = (show) => {
+      if (disabled || readonly) return;
+      isPickerOpen = show;
+      if (show) {
+        decadeStart = Math.floor(currentYearVal / decadeSize) * decadeSize;
+        renderGrid();
+        panel.classList.add(`${PREFIX}-year-picker__panel--open`);
+        trigger.setAttribute("aria-expanded", "true");
+        setTimeout(() => {
+          const selectedOpt = grid.querySelector(
+            `.${PREFIX}-year-picker__year-option--selected`
+          );
+          if (selectedOpt) selectedOpt.focus();
+          else if (grid.firstElementChild) grid.firstElementChild.focus();
+        }, 0);
+      } else {
+        panel.classList.remove(`${PREFIX}-year-picker__panel--open`);
+        trigger.setAttribute("aria-expanded", "false");
+      }
+    };
+    updateText();
+    renderGrid();
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      togglePicker(!isPickerOpen);
+    });
+    trigger.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (!container.contains(e.target)) togglePicker(false);
+    });
+    if (prevBtn) {
+      prevBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        decadeStart -= decadeSize;
+        renderGrid();
+      });
+      prevBtn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          decadeStart -= decadeSize;
+          renderGrid();
+        }
+      });
+    }
+    if (nextBtn) {
+      nextBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        decadeStart += decadeSize;
+        renderGrid();
+      });
+      nextBtn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          decadeStart += decadeSize;
+          renderGrid();
+        }
+      });
+    }
+  });
+}
+
 // src/js/components/stateless/toast.js
 var ICONS3 = {
   default: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
@@ -4147,6 +4521,8 @@ function initAll() {
   initTabVertical();
   initTabHorizontal();
   initTable();
+  initMonthPicker();
+  initYearPicker();
 }
 export {
   DatePicker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.97",
+  "version": "1.0.99",
   "publishConfig": {
     "access": "public"
   },