@idds/js 1.0.96 → 1.0.98

package/dist/index.iife.js

@@ -101,18 +101,18 @@ var InaUI = (() => {
       const tabItem = tab.querySelectorAll(`.${PREFIX}-tab-item`);
       tabItem.forEach((tabButton) => {
         function updateState() {
-          const index = Array.from(tabItem).indexOf(tabButton);
+          const index2 = Array.from(tabItem).indexOf(tabButton);
           tabItem.forEach((tabButton2, i) => {
             tabButton2.classList.remove("active");
             tabButton2.setAttribute("aria-selected", "false");
-            if (i === index) {
+            if (i === index2) {
               tabButton2.classList.add("active");
               tabButton2.setAttribute("aria-selected", "true");
             }
           });
           tab.dispatchEvent(
             new CustomEvent("tab:change", {
-              detail: { activeIndex: index },
+              detail: { activeIndex: index2 },
               bubbles: true,
               composed: true
             })
@@ -207,28 +207,28 @@ var InaUI = (() => {
       this.element.__inaAccordionGroup = this;
     }
     registerItem(item) {
-      const index = this.items.size;
-      this.items.set(item.id, index);
+      const index2 = this.items.size;
+      this.items.set(item.id, index2);
       this.itemsArray.push(item);
       if (item.defaultOpen) {
         if (this.isMultiple) {
-          if (!this.openIndexes.includes(index)) {
-            this.openIndexes.push(index);
+          if (!this.openIndexes.includes(index2)) {
+            this.openIndexes.push(index2);
           }
         } else {
           if (this.openIndexes.length === 0) {
-            this.openIndexes.push(index);
+            this.openIndexes.push(index2);
           }
         }
       }
-      return index;
+      return index2;
     }
     unregisterItem(item) {
-      const index = this.items.get(item.id);
-      if (index !== void 0) {
+      const index2 = this.items.get(item.id);
+      if (index2 !== void 0) {
         this.items.delete(item.id);
         this.itemsArray = this.itemsArray.filter((i) => i !== item);
-        this.openIndexes = this.openIndexes.filter((idx) => idx !== index).map((idx) => idx > index ? idx - 1 : idx);
+        this.openIndexes = this.openIndexes.filter((idx) => idx !== index2).map((idx) => idx > index2 ? idx - 1 : idx);
         const newMap = /* @__PURE__ */ new Map();
         this.itemsArray.forEach((itm, newIdx) => {
           newMap.set(itm.id, newIdx);
@@ -236,22 +236,22 @@ var InaUI = (() => {
         this.items = newMap;
       }
     }
-    handleItemToggle(index, isOpen) {
+    handleItemToggle(index2, isOpen) {
       const prevIndexes = [...this.openIndexes];
       let nextIndexes = [];
       if (this.isMultiple) {
         if (isOpen) {
-          if (!prevIndexes.includes(index)) {
-            nextIndexes = [...prevIndexes, index];
+          if (!prevIndexes.includes(index2)) {
+            nextIndexes = [...prevIndexes, index2];
           } else {
             nextIndexes = prevIndexes;
           }
         } else {
-          nextIndexes = prevIndexes.filter((idx) => idx !== index);
+          nextIndexes = prevIndexes.filter((idx) => idx !== index2);
         }
       } else {
         if (isOpen) {
-          nextIndexes = [index];
+          nextIndexes = [index2];
         } else {
           nextIndexes = [];
         }
@@ -259,16 +259,16 @@ var InaUI = (() => {
       this.openIndexes = nextIndexes;
       this.notifyItems();
     }
-    isItemOpen(index) {
-      return this.openIndexes.includes(index);
+    isItemOpen(index2) {
+      return this.openIndexes.includes(index2);
     }
     getItemIndex(itemId) {
       return this.items.get(itemId);
     }
     // Notify all children to update their visual state based on new openIndexes
     notifyItems() {
-      this.itemsArray.forEach((item, index) => {
-        const isOpen = this.openIndexes.includes(index);
+      this.itemsArray.forEach((item, index2) => {
+        const isOpen = this.openIndexes.includes(index2);
         item.setOpenState(isOpen);
       });
     }
@@ -360,7 +360,7 @@ var InaUI = (() => {
 
   // src/js/components/stateful/date-picker.js
   var DatePicker = class {
-    constructor(selectorOrElement, options = {}) {
+    constructor(selectorOrElement, options2 = {}) {
       this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
       if (!this.container) {
         console.warn("[IDDS DatePicker] Container not found:", selectorOrElement);
@@ -386,7 +386,7 @@ var InaUI = (() => {
         onChange: null,
         triggerWidth: "",
         panelMaxHeight: "",
-        ...options
+        ...options2
       };
       this.state = {
         viewDate: /* @__PURE__ */ new Date(),
@@ -726,6 +726,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 +780,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 +819,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 +844,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 +856,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 +886,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;
     }
@@ -950,11 +1000,11 @@ var InaUI = (() => {
       return this.state.rangeDate;
     }
   };
-  function initDatepicker(selectorOrElement, options = {}) {
+  function initDatepicker(selectorOrElement, options2 = {}) {
     const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-date-picker`);
     const instances = [];
     elements.forEach((container) => {
-      const instance = new DatePicker(container, options);
+      const instance = new DatePicker(container, options2);
       container.__datepickerAPI = instance;
       instances.push(instance);
     });
@@ -964,7 +1014,7 @@ var InaUI = (() => {
 
   // src/js/components/stateful/time-picker.js
   var TimePicker = class {
-    constructor(selectorOrElement, options = {}) {
+    constructor(selectorOrElement, options2 = {}) {
       this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
       if (!this.container) {
         console.warn("[IDDS TimePicker] Container not found:", selectorOrElement);
@@ -997,7 +1047,7 @@ var InaUI = (() => {
         secondStep: 1,
         onChange: null,
         size: this.container.dataset.size || "md",
-        ...options
+        ...options2
       };
       this.state = {
         isOpen: false,
@@ -1214,24 +1264,24 @@ var InaUI = (() => {
       }
     }
     generateOptions(type) {
-      const options = [];
+      const options2 = [];
       const { use12Hours, hourStep, minuteStep, secondStep } = this.options;
       let limit = type === "hour" ? use12Hours ? 12 : 24 : 60;
       let step = type === "hour" ? hourStep : type === "minute" ? minuteStep : secondStep;
       if (limit === 12) {
         for (let i = type === "hour" ? 1 : 0; i <= (type === "hour" ? 12 : 59); i += step) {
-          options.push(i);
+          options2.push(i);
         }
       } else if (limit === 24) {
         for (let i = 0; i <= 23; i += step) {
-          options.push(i);
+          options2.push(i);
         }
       } else {
         for (let i = 0; i <= 59; i += step) {
-          options.push(i);
+          options2.push(i);
         }
       }
-      return options;
+      return options2;
     }
     renderColumn(type, optionsArr) {
       const column = document.createElement("div");
@@ -1285,10 +1335,23 @@ var InaUI = (() => {
           option.classList.add(`${PREFIX}-time-picker__option--selected`);
         if (isDisabled)
           option.classList.add(`${PREFIX}-time-picker__option--disabled`);
+        option.setAttribute("role", "option");
+        option.setAttribute("aria-selected", isSelected.toString());
+        const isFirstFocusable = index === 0 && !options.some((opt) => {
+          if (type === "hour") {
+            return use12Hours ? (currentTime.hours === 0 ? 12 : currentTime.hours) === opt : currentTime.hours === opt;
+          } else if (type === "minute") {
+            return currentTime.minutes === opt;
+          } else if (type === "second") {
+            return currentTime.seconds === opt;
+          }
+          return false;
+        });
+        option.tabIndex = isSelected || isFirstFocusable ? 0 : -1;
         option.textContent = optValue.toString().padStart(2, "0");
         if (!isDisabled) {
-          option.addEventListener("click", (e) => {
-            e.stopPropagation();
+          const handleSelection = (e) => {
+            e?.stopPropagation();
             const val = parseInt(optValue, 10);
             if (type === "hour") {
               this.state.currentTime.hours = use12Hours && val === 12 ? 0 : val;
@@ -1299,6 +1362,21 @@ var InaUI = (() => {
             }
             this.updateInput();
             this.buildPanel();
+          };
+          option.addEventListener("click", handleSelection);
+          option.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSelection();
+            } else if (e.key === "ArrowDown") {
+              e.preventDefault();
+              const nextElement = e.currentTarget.nextElementSibling;
+              if (nextElement) nextElement.focus();
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              const prevElement = e.currentTarget.previousElementSibling;
+              if (prevElement) prevElement.focus();
+            }
           });
         }
         colContent.appendChild(option);
@@ -1326,12 +1404,34 @@ var InaUI = (() => {
         );
         if (isDisabled)
           option.classList.add(`${PREFIX}-time-picker__option--disabled`);
+        option.setAttribute("role", "option");
+        option.setAttribute(
+          "aria-selected",
+          (this.state.currentTime.period === p).toString()
+        );
+        const isFirstFocusable = p === "AM" && this.state.currentTime.period !== "AM" && this.state.currentTime.period !== "PM";
+        option.tabIndex = this.state.currentTime.period === p || isFirstFocusable ? 0 : -1;
         if (!isDisabled) {
-          option.addEventListener("click", (e) => {
-            e.stopPropagation();
+          const handleSelection = (e) => {
+            e?.stopPropagation();
             this.state.currentTime.period = p;
             this.updateInput();
             this.buildPanel();
+          };
+          option.addEventListener("click", handleSelection);
+          option.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSelection();
+            } else if (e.key === "ArrowDown") {
+              e.preventDefault();
+              const nextElement = e.currentTarget.nextElementSibling;
+              if (nextElement) nextElement.focus();
+            } else if (e.key === "ArrowUp") {
+              e.preventDefault();
+              const prevElement = e.currentTarget.previousElementSibling;
+              if (prevElement) prevElement.focus();
+            }
           });
         }
         colContent.appendChild(option);
@@ -1412,11 +1512,11 @@ var InaUI = (() => {
       return this.state.internalValue;
     }
   };
-  function initTimepicker(selectorOrElement, options = {}) {
+  function initTimepicker(selectorOrElement, options2 = {}) {
     const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-time-picker`);
     const instances = [];
     elements.forEach((container) => {
-      const instance = new TimePicker(container, options);
+      const instance = new TimePicker(container, options2);
       container.__timepickerAPI = instance;
       instances.push(instance);
     });
@@ -1658,9 +1758,9 @@ var InaUI = (() => {
       `.${PREFIX3}-select-dropdown__trigger-text`
     );
     const placeholder = input ? input.getAttribute("placeholder") : textSpan ? textSpan.getAttribute("data-placeholder") : "Select...";
-    const options = root.querySelectorAll(`.${PREFIX3}-select-dropdown__option`);
+    const options2 = root.querySelectorAll(`.${PREFIX3}-select-dropdown__option`);
     const getLabel = (val) => {
-      const opt = Array.from(options).find(
+      const opt = Array.from(options2).find(
         (o) => o.getAttribute("data-value") === val
       );
       return opt ? opt.textContent.trim() : val;
@@ -1686,7 +1786,7 @@ var InaUI = (() => {
         values.length === 0
       );
     }
-    options.forEach((opt) => {
+    options2.forEach((opt) => {
       const val = opt.getAttribute("data-value");
       const isSelected = values.includes(val);
       if (isMultiple) {
@@ -1766,13 +1866,13 @@ var InaUI = (() => {
         const root = e.target.closest(`.${PREFIX3}-select-dropdown`);
         if (root) {
           const term = e.target.value.toLowerCase();
-          const options = root.querySelectorAll(
+          const options2 = root.querySelectorAll(
             `.${PREFIX3}-select-dropdown__option`
           );
           if (root.getAttribute("data-state") !== "open") {
             setDropdownState(root, { isOpen: true });
           }
-          options.forEach((opt) => {
+          options2.forEach((opt) => {
             const text = opt.textContent.trim().toLowerCase();
             opt.style.display = text.includes(term) ? "" : "none";
           });
@@ -1846,20 +1946,20 @@ var InaUI = (() => {
     `;
       const updateUI = () => {
         stepper.dataset.currentStep = currentStep;
-        items.forEach((item, index) => {
+        items.forEach((item, index2) => {
           const iconWrapper = item.querySelector(
             `.${PREFIX}-stepper__icon-wrapper`
           );
-          const itemNumber = index + 1;
+          const itemNumber = index2 + 1;
           item.classList.remove(
             `${PREFIX}-stepper__item--completed`,
             `${PREFIX}-stepper__item--active`
           );
           if (iconWrapper) iconWrapper.innerHTML = "";
-          if (index < currentStep) {
+          if (index2 < currentStep) {
             item.classList.add(`${PREFIX}-stepper__item--completed`);
             if (iconWrapper) iconWrapper.innerHTML = checkIcon;
-          } else if (index === currentStep) {
+          } else if (index2 === currentStep) {
             item.classList.add(`${PREFIX}-stepper__item--active`);
             if (iconWrapper)
               iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
@@ -1868,8 +1968,8 @@ var InaUI = (() => {
               iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
           }
         });
-        separators.forEach((separator, index) => {
-          if (index < currentStep) {
+        separators.forEach((separator, index2) => {
+          if (index2 < currentStep) {
             separator.classList.add(`${PREFIX}-stepper__separator--completed`);
           } else {
             separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
@@ -1915,11 +2015,11 @@ var InaUI = (() => {
           }
         });
       });
-      items.forEach((item, index) => {
+      items.forEach((item, index2) => {
         if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
           item.addEventListener("click", () => {
             if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
-              currentStep = index;
+              currentStep = index2;
               updateUI();
             }
           });
@@ -1993,7 +2093,7 @@ var InaUI = (() => {
         } else {
           filesContainer.style.display = "none";
         }
-        uploadedFiles.forEach((f, index) => {
+        uploadedFiles.forEach((f, index2) => {
           const fileEl = document.createElement("div");
           fileEl.className = `${PREFIX}-file-upload__file`;
           let statusClass = "";
@@ -3267,7 +3367,7 @@ var InaUI = (() => {
 
   // src/js/components/stateful/table.js
   var Table = class {
-    constructor(selectorOrElement, options = {}) {
+    constructor(selectorOrElement, options2 = {}) {
       this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
       if (!this.container) {
         console.warn("[IDDS Table] Container not found:", selectorOrElement);
@@ -3299,7 +3399,7 @@ var InaUI = (() => {
         searchContainer: null,
         searchButton: null,
         onSearch: null,
-        ...options
+        ...options2
       };
       this.state = {
         currentPage: this.options.initialPage,
@@ -3504,7 +3604,7 @@ var InaUI = (() => {
         this.updateSelectAllState();
         return;
       }
-      rowData.forEach((row, index) => {
+      rowData.forEach((row, index2) => {
         const tr = document.createElement("tr");
         tr.className = `${PREFIX}-table__row`;
         if (this.options.rowClickable) {
@@ -3515,11 +3615,11 @@ var InaUI = (() => {
               return;
             }
             if (typeof this.options.onRowClick === "function") {
-              this.options.onRowClick(row, index);
+              this.options.onRowClick(row, index2);
             }
           });
         }
-        const rowKeyStr = String(row[this.options.rowKey] || index);
+        const rowKeyStr = String(row[this.options.rowKey] || index2);
         if (this.options.selectable) {
           const td = document.createElement("td");
           td.className = `${PREFIX}-table__cell`;
@@ -3545,7 +3645,7 @@ var InaUI = (() => {
           const td = document.createElement("td");
           td.className = `${PREFIX}-table__cell`;
           if (typeof col.render === "function") {
-            const content = col.render(row, index);
+            const content = col.render(row, index2);
             if (typeof content === "string") {
               td.innerHTML = content;
             } else if (content instanceof HTMLElement) {
@@ -3779,8 +3879,8 @@ var InaUI = (() => {
       this.triggerSelectionChange();
     }
     toggleAllSelection(checked) {
-      this.state.currentData.forEach((row, index) => {
-        const keyStr = String(row[this.options.rowKey] || index);
+      this.state.currentData.forEach((row, index2) => {
+        const keyStr = String(row[this.options.rowKey] || index2);
         if (checked) {
           this.state.selectedKeys.add(keyStr);
           this.state.selectedRows.set(keyStr, row);
@@ -3861,11 +3961,11 @@ var InaUI = (() => {
       };
     }
   };
-  function initTable(selectorOrElement, options = {}) {
+  function initTable(selectorOrElement, options2 = {}) {
     const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-table`);
     const instances = [];
     elements.forEach((container) => {
-      const instance = new Table(container, options);
+      const instance = new Table(container, options2);
       container.__tableAPI = instance;
       instances.push(instance);
     });
@@ -3916,7 +4016,7 @@ var InaUI = (() => {
     return { toastItem, toast };
   }
   function showToast(optionsOrMessage, variant = "default", duration = 5e3) {
-    const options = typeof optionsOrMessage === "string" ? {
+    const options2 = typeof optionsOrMessage === "string" ? {
       message: optionsOrMessage,
       state: variant,
       duration
@@ -3929,7 +4029,7 @@ var InaUI = (() => {
       duration: autoCloseDuration = 5e3,
       position = "top-right",
       actionHtml = ""
-    } = options;
+    } = options2;
     const container = getOrCreateContainer(position);
     const { toastItem, toast } = createToastElement({
       title,
@@ -4041,8 +4141,8 @@ var InaUI = (() => {
       const menuItems = menu.querySelectorAll("li[role='option']");
       const menuId = menu.id;
       let activeIndex = -1;
-      menuItems.forEach((item, index) => {
-        item.id = `${menuId}-item-${index}`;
+      menuItems.forEach((item, index2) => {
+        item.id = `${menuId}-item-${index2}`;
       });
       const toggleMenu = (show) => {
         const isCurrentlyShown = dropdown.classList.contains("show");
@@ -4097,15 +4197,15 @@ var InaUI = (() => {
         }
         toggleMenu(false);
       };
-      const setHighlight = (index) => {
+      const setHighlight = (index2) => {
         removeHighlight();
         const visibleItems = menu.querySelectorAll(
           "li[role='option']:not(.hidden)"
         );
         if (visibleItems.length === 0) return;
-        if (index < 0) index = 0;
-        else if (index >= visibleItems.length) index = visibleItems.length - 1;
-        const itemToHighlight = visibleItems[index];
+        if (index2 < 0) index2 = 0;
+        else if (index2 >= visibleItems.length) index2 = visibleItems.length - 1;
+        const itemToHighlight = visibleItems[index2];
         if (itemToHighlight) {
           itemToHighlight.classList.add("highlighted");
           input.setAttribute("aria-activedescendant", itemToHighlight.id);
@@ -4113,7 +4213,7 @@ var InaUI = (() => {
             behavior: "smooth",
             block: "nearest"
           });
-          activeIndex = index;
+          activeIndex = index2;
         }
       };
       const removeHighlight = () => {

package/dist/index.js

@@ -91,18 +91,18 @@ function initTab(rootSelector = `.${PREFIX}-tab`) {
     const tabItem = tab.querySelectorAll(`.${PREFIX}-tab-item`);
     tabItem.forEach((tabButton) => {
       function updateState() {
-        const index = Array.from(tabItem).indexOf(tabButton);
+        const index2 = Array.from(tabItem).indexOf(tabButton);
         tabItem.forEach((tabButton2, i) => {
           tabButton2.classList.remove("active");
           tabButton2.setAttribute("aria-selected", "false");
-          if (i === index) {
+          if (i === index2) {
             tabButton2.classList.add("active");
             tabButton2.setAttribute("aria-selected", "true");
           }
         });
         tab.dispatchEvent(
           new CustomEvent("tab:change", {
-            detail: { activeIndex: index },
+            detail: { activeIndex: index2 },
             bubbles: true,
             composed: true
           })
@@ -197,28 +197,28 @@ var AccordionGroup = class {
     this.element.__inaAccordionGroup = this;
   }
   registerItem(item) {
-    const index = this.items.size;
-    this.items.set(item.id, index);
+    const index2 = this.items.size;
+    this.items.set(item.id, index2);
     this.itemsArray.push(item);
     if (item.defaultOpen) {
       if (this.isMultiple) {
-        if (!this.openIndexes.includes(index)) {
-          this.openIndexes.push(index);
+        if (!this.openIndexes.includes(index2)) {
+          this.openIndexes.push(index2);
         }
       } else {
         if (this.openIndexes.length === 0) {
-          this.openIndexes.push(index);
+          this.openIndexes.push(index2);
         }
       }
     }
-    return index;
+    return index2;
   }
   unregisterItem(item) {
-    const index = this.items.get(item.id);
-    if (index !== void 0) {
+    const index2 = this.items.get(item.id);
+    if (index2 !== void 0) {
       this.items.delete(item.id);
       this.itemsArray = this.itemsArray.filter((i) => i !== item);
-      this.openIndexes = this.openIndexes.filter((idx) => idx !== index).map((idx) => idx > index ? idx - 1 : idx);
+      this.openIndexes = this.openIndexes.filter((idx) => idx !== index2).map((idx) => idx > index2 ? idx - 1 : idx);
       const newMap = /* @__PURE__ */ new Map();
       this.itemsArray.forEach((itm, newIdx) => {
         newMap.set(itm.id, newIdx);
@@ -226,22 +226,22 @@ var AccordionGroup = class {
       this.items = newMap;
     }
   }
-  handleItemToggle(index, isOpen) {
+  handleItemToggle(index2, isOpen) {
     const prevIndexes = [...this.openIndexes];
     let nextIndexes = [];
     if (this.isMultiple) {
       if (isOpen) {
-        if (!prevIndexes.includes(index)) {
-          nextIndexes = [...prevIndexes, index];
+        if (!prevIndexes.includes(index2)) {
+          nextIndexes = [...prevIndexes, index2];
         } else {
           nextIndexes = prevIndexes;
         }
       } else {
-        nextIndexes = prevIndexes.filter((idx) => idx !== index);
+        nextIndexes = prevIndexes.filter((idx) => idx !== index2);
       }
     } else {
       if (isOpen) {
-        nextIndexes = [index];
+        nextIndexes = [index2];
       } else {
         nextIndexes = [];
       }
@@ -249,16 +249,16 @@ var AccordionGroup = class {
     this.openIndexes = nextIndexes;
     this.notifyItems();
   }
-  isItemOpen(index) {
-    return this.openIndexes.includes(index);
+  isItemOpen(index2) {
+    return this.openIndexes.includes(index2);
   }
   getItemIndex(itemId) {
     return this.items.get(itemId);
   }
   // Notify all children to update their visual state based on new openIndexes
   notifyItems() {
-    this.itemsArray.forEach((item, index) => {
-      const isOpen = this.openIndexes.includes(index);
+    this.itemsArray.forEach((item, index2) => {
+      const isOpen = this.openIndexes.includes(index2);
       item.setOpenState(isOpen);
     });
   }
@@ -350,7 +350,7 @@ function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
 
 // src/js/components/stateful/date-picker.js
 var DatePicker = class {
-  constructor(selectorOrElement, options = {}) {
+  constructor(selectorOrElement, options2 = {}) {
     this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
     if (!this.container) {
       console.warn("[IDDS DatePicker] Container not found:", selectorOrElement);
@@ -376,7 +376,7 @@ var DatePicker = class {
       onChange: null,
       triggerWidth: "",
       panelMaxHeight: "",
-      ...options
+      ...options2
     };
     this.state = {
       viewDate: /* @__PURE__ */ new Date(),
@@ -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;
   }
@@ -940,11 +990,11 @@ var DatePicker = class {
     return this.state.rangeDate;
   }
 };
-function initDatepicker(selectorOrElement, options = {}) {
+function initDatepicker(selectorOrElement, options2 = {}) {
   const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-date-picker`);
   const instances = [];
   elements.forEach((container) => {
-    const instance = new DatePicker(container, options);
+    const instance = new DatePicker(container, options2);
     container.__datepickerAPI = instance;
     instances.push(instance);
   });
@@ -954,7 +1004,7 @@ function initDatepicker(selectorOrElement, options = {}) {
 
 // src/js/components/stateful/time-picker.js
 var TimePicker = class {
-  constructor(selectorOrElement, options = {}) {
+  constructor(selectorOrElement, options2 = {}) {
     this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
     if (!this.container) {
       console.warn("[IDDS TimePicker] Container not found:", selectorOrElement);
@@ -987,7 +1037,7 @@ var TimePicker = class {
       secondStep: 1,
       onChange: null,
       size: this.container.dataset.size || "md",
-      ...options
+      ...options2
     };
     this.state = {
       isOpen: false,
@@ -1204,24 +1254,24 @@ var TimePicker = class {
     }
   }
   generateOptions(type) {
-    const options = [];
+    const options2 = [];
     const { use12Hours, hourStep, minuteStep, secondStep } = this.options;
     let limit = type === "hour" ? use12Hours ? 12 : 24 : 60;
     let step = type === "hour" ? hourStep : type === "minute" ? minuteStep : secondStep;
     if (limit === 12) {
       for (let i = type === "hour" ? 1 : 0; i <= (type === "hour" ? 12 : 59); i += step) {
-        options.push(i);
+        options2.push(i);
       }
     } else if (limit === 24) {
       for (let i = 0; i <= 23; i += step) {
-        options.push(i);
+        options2.push(i);
       }
     } else {
       for (let i = 0; i <= 59; i += step) {
-        options.push(i);
+        options2.push(i);
       }
     }
-    return options;
+    return options2;
   }
   renderColumn(type, optionsArr) {
     const column = document.createElement("div");
@@ -1275,10 +1325,23 @@ var TimePicker = class {
         option.classList.add(`${PREFIX}-time-picker__option--selected`);
       if (isDisabled)
         option.classList.add(`${PREFIX}-time-picker__option--disabled`);
+      option.setAttribute("role", "option");
+      option.setAttribute("aria-selected", isSelected.toString());
+      const isFirstFocusable = index === 0 && !options.some((opt) => {
+        if (type === "hour") {
+          return use12Hours ? (currentTime.hours === 0 ? 12 : currentTime.hours) === opt : currentTime.hours === opt;
+        } else if (type === "minute") {
+          return currentTime.minutes === opt;
+        } else if (type === "second") {
+          return currentTime.seconds === opt;
+        }
+        return false;
+      });
+      option.tabIndex = isSelected || isFirstFocusable ? 0 : -1;
       option.textContent = optValue.toString().padStart(2, "0");
       if (!isDisabled) {
-        option.addEventListener("click", (e) => {
-          e.stopPropagation();
+        const handleSelection = (e) => {
+          e?.stopPropagation();
           const val = parseInt(optValue, 10);
           if (type === "hour") {
             this.state.currentTime.hours = use12Hours && val === 12 ? 0 : val;
@@ -1289,6 +1352,21 @@ var TimePicker = class {
           }
           this.updateInput();
           this.buildPanel();
+        };
+        option.addEventListener("click", handleSelection);
+        option.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleSelection();
+          } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            const nextElement = e.currentTarget.nextElementSibling;
+            if (nextElement) nextElement.focus();
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            const prevElement = e.currentTarget.previousElementSibling;
+            if (prevElement) prevElement.focus();
+          }
         });
       }
       colContent.appendChild(option);
@@ -1316,12 +1394,34 @@ var TimePicker = class {
       );
       if (isDisabled)
         option.classList.add(`${PREFIX}-time-picker__option--disabled`);
+      option.setAttribute("role", "option");
+      option.setAttribute(
+        "aria-selected",
+        (this.state.currentTime.period === p).toString()
+      );
+      const isFirstFocusable = p === "AM" && this.state.currentTime.period !== "AM" && this.state.currentTime.period !== "PM";
+      option.tabIndex = this.state.currentTime.period === p || isFirstFocusable ? 0 : -1;
       if (!isDisabled) {
-        option.addEventListener("click", (e) => {
-          e.stopPropagation();
+        const handleSelection = (e) => {
+          e?.stopPropagation();
           this.state.currentTime.period = p;
           this.updateInput();
           this.buildPanel();
+        };
+        option.addEventListener("click", handleSelection);
+        option.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleSelection();
+          } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            const nextElement = e.currentTarget.nextElementSibling;
+            if (nextElement) nextElement.focus();
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            const prevElement = e.currentTarget.previousElementSibling;
+            if (prevElement) prevElement.focus();
+          }
         });
       }
       colContent.appendChild(option);
@@ -1402,11 +1502,11 @@ var TimePicker = class {
     return this.state.internalValue;
   }
 };
-function initTimepicker(selectorOrElement, options = {}) {
+function initTimepicker(selectorOrElement, options2 = {}) {
   const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-time-picker`);
   const instances = [];
   elements.forEach((container) => {
-    const instance = new TimePicker(container, options);
+    const instance = new TimePicker(container, options2);
     container.__timepickerAPI = instance;
     instances.push(instance);
   });
@@ -1740,9 +1840,9 @@ function updateTriggerUI(root, values, isMultiple) {
     `.${PREFIX4}-select-dropdown__trigger-text`
   );
   const placeholder = input ? input.getAttribute("placeholder") : textSpan ? textSpan.getAttribute("data-placeholder") : "Select...";
-  const options = root.querySelectorAll(`.${PREFIX4}-select-dropdown__option`);
+  const options2 = root.querySelectorAll(`.${PREFIX4}-select-dropdown__option`);
   const getLabel = (val) => {
-    const opt = Array.from(options).find(
+    const opt = Array.from(options2).find(
       (o) => o.getAttribute("data-value") === val
     );
     return opt ? opt.textContent.trim() : val;
@@ -1768,7 +1868,7 @@ function updateTriggerUI(root, values, isMultiple) {
       values.length === 0
     );
   }
-  options.forEach((opt) => {
+  options2.forEach((opt) => {
     const val = opt.getAttribute("data-value");
     const isSelected = values.includes(val);
     if (isMultiple) {
@@ -1848,13 +1948,13 @@ function initSelectDropdown() {
       const root = e.target.closest(`.${PREFIX4}-select-dropdown`);
       if (root) {
         const term = e.target.value.toLowerCase();
-        const options = root.querySelectorAll(
+        const options2 = root.querySelectorAll(
           `.${PREFIX4}-select-dropdown__option`
         );
         if (root.getAttribute("data-state") !== "open") {
           setDropdownState(root, { isOpen: true });
         }
-        options.forEach((opt) => {
+        options2.forEach((opt) => {
           const text = opt.textContent.trim().toLowerCase();
           opt.style.display = text.includes(term) ? "" : "none";
         });
@@ -1928,20 +2028,20 @@ function initStepper() {
     `;
     const updateUI = () => {
       stepper.dataset.currentStep = currentStep;
-      items.forEach((item, index) => {
+      items.forEach((item, index2) => {
         const iconWrapper = item.querySelector(
           `.${PREFIX}-stepper__icon-wrapper`
         );
-        const itemNumber = index + 1;
+        const itemNumber = index2 + 1;
         item.classList.remove(
           `${PREFIX}-stepper__item--completed`,
           `${PREFIX}-stepper__item--active`
         );
         if (iconWrapper) iconWrapper.innerHTML = "";
-        if (index < currentStep) {
+        if (index2 < currentStep) {
           item.classList.add(`${PREFIX}-stepper__item--completed`);
           if (iconWrapper) iconWrapper.innerHTML = checkIcon;
-        } else if (index === currentStep) {
+        } else if (index2 === currentStep) {
           item.classList.add(`${PREFIX}-stepper__item--active`);
           if (iconWrapper)
             iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
@@ -1950,8 +2050,8 @@ function initStepper() {
             iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
         }
       });
-      separators.forEach((separator, index) => {
-        if (index < currentStep) {
+      separators.forEach((separator, index2) => {
+        if (index2 < currentStep) {
           separator.classList.add(`${PREFIX}-stepper__separator--completed`);
         } else {
           separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
@@ -1997,11 +2097,11 @@ function initStepper() {
         }
       });
     });
-    items.forEach((item, index) => {
+    items.forEach((item, index2) => {
       if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
         item.addEventListener("click", () => {
           if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
-            currentStep = index;
+            currentStep = index2;
             updateUI();
           }
         });
@@ -2075,7 +2175,7 @@ function initFileUpload(rootSelector = `.${PREFIX}-file-upload`) {
       } else {
         filesContainer.style.display = "none";
       }
-      uploadedFiles.forEach((f, index) => {
+      uploadedFiles.forEach((f, index2) => {
         const fileEl = document.createElement("div");
         fileEl.className = `${PREFIX}-file-upload__file`;
         let statusClass = "";
@@ -3349,7 +3449,7 @@ function initTabHorizontal() {
 
 // src/js/components/stateful/table.js
 var Table = class {
-  constructor(selectorOrElement, options = {}) {
+  constructor(selectorOrElement, options2 = {}) {
     this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
     if (!this.container) {
       console.warn("[IDDS Table] Container not found:", selectorOrElement);
@@ -3381,7 +3481,7 @@ var Table = class {
       searchContainer: null,
       searchButton: null,
       onSearch: null,
-      ...options
+      ...options2
     };
     this.state = {
       currentPage: this.options.initialPage,
@@ -3586,7 +3686,7 @@ var Table = class {
       this.updateSelectAllState();
       return;
     }
-    rowData.forEach((row, index) => {
+    rowData.forEach((row, index2) => {
       const tr = document.createElement("tr");
       tr.className = `${PREFIX}-table__row`;
       if (this.options.rowClickable) {
@@ -3597,11 +3697,11 @@ var Table = class {
             return;
           }
           if (typeof this.options.onRowClick === "function") {
-            this.options.onRowClick(row, index);
+            this.options.onRowClick(row, index2);
           }
         });
       }
-      const rowKeyStr = String(row[this.options.rowKey] || index);
+      const rowKeyStr = String(row[this.options.rowKey] || index2);
       if (this.options.selectable) {
         const td = document.createElement("td");
         td.className = `${PREFIX}-table__cell`;
@@ -3627,7 +3727,7 @@ var Table = class {
         const td = document.createElement("td");
         td.className = `${PREFIX}-table__cell`;
         if (typeof col.render === "function") {
-          const content = col.render(row, index);
+          const content = col.render(row, index2);
           if (typeof content === "string") {
             td.innerHTML = content;
           } else if (content instanceof HTMLElement) {
@@ -3861,8 +3961,8 @@ var Table = class {
     this.triggerSelectionChange();
   }
   toggleAllSelection(checked) {
-    this.state.currentData.forEach((row, index) => {
-      const keyStr = String(row[this.options.rowKey] || index);
+    this.state.currentData.forEach((row, index2) => {
+      const keyStr = String(row[this.options.rowKey] || index2);
       if (checked) {
         this.state.selectedKeys.add(keyStr);
         this.state.selectedRows.set(keyStr, row);
@@ -3943,11 +4043,11 @@ var Table = class {
     };
   }
 };
-function initTable(selectorOrElement, options = {}) {
+function initTable(selectorOrElement, options2 = {}) {
   const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-table`);
   const instances = [];
   elements.forEach((container) => {
-    const instance = new Table(container, options);
+    const instance = new Table(container, options2);
     container.__tableAPI = instance;
     instances.push(instance);
   });
@@ -3998,7 +4098,7 @@ function createToastElement({ title, message, state, style, actionHtml }) {
   return { toastItem, toast };
 }
 function showToast(optionsOrMessage, variant = "default", duration = 5e3) {
-  const options = typeof optionsOrMessage === "string" ? {
+  const options2 = typeof optionsOrMessage === "string" ? {
     message: optionsOrMessage,
     state: variant,
     duration
@@ -4011,7 +4111,7 @@ function showToast(optionsOrMessage, variant = "default", duration = 5e3) {
     duration: autoCloseDuration = 5e3,
     position = "top-right",
     actionHtml = ""
-  } = options;
+  } = options2;
   const container = getOrCreateContainer(position);
   const { toastItem, toast } = createToastElement({
     title,

package/package.json

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