@idds/js 1.2.5 → 1.6.1

package/dist/index.js

@@ -6,6 +6,12 @@ function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
     const buttons = buttonGroup.querySelectorAll(
       `.${PREFIX}-button-group__button`
     );
+    if (!buttonGroup.hasAttribute("role")) {
+      buttonGroup.setAttribute("role", "group");
+    }
+    if (!buttonGroup.hasAttribute("aria-label")) {
+      buttonGroup.setAttribute("aria-label", "Grup tombol");
+    }
     const updateState = (clickedButton) => {
       const isDisabled = clickedButton.hasAttribute("disabled") || clickedButton.classList.contains(
         `${PREFIX}-button-group__button--disabled`
@@ -29,7 +35,7 @@ function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
         })
       );
     };
-    buttons.forEach((button, index2) => {
+    buttons.forEach((button, index) => {
       button.addEventListener("click", (e) => {
         if (button.type !== "submit") {
           e.preventDefault();
@@ -44,19 +50,19 @@ function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
           updateState(button);
         } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
           e.preventDefault();
-          let nextIndex = (index2 + 1) % buttons.length;
+          let nextIndex = (index + 1) % buttons.length;
           while ((buttons[nextIndex].hasAttribute("disabled") || buttons[nextIndex].classList.contains(
             `${PREFIX}-button-group__button--disabled`
-          )) && nextIndex !== index2) {
+          )) && nextIndex !== index) {
             nextIndex = (nextIndex + 1) % buttons.length;
           }
           buttons[nextIndex]?.focus();
         } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
           e.preventDefault();
-          let prevIndex = (index2 - 1 + buttons.length) % buttons.length;
+          let prevIndex = (index - 1 + buttons.length) % buttons.length;
           while ((buttons[prevIndex].hasAttribute("disabled") || buttons[prevIndex].classList.contains(
             `${PREFIX}-button-group__button--disabled`
-          )) && prevIndex !== index2) {
+          )) && prevIndex !== index) {
             prevIndex = (prevIndex - 1 + buttons.length) % buttons.length;
           }
           buttons[prevIndex]?.focus();
@@ -117,18 +123,18 @@ function initTab(rootSelector = `.${PREFIX}-tab`) {
     const tabItem = tab.querySelectorAll(`.${PREFIX}-tab-item`);
     tabItem.forEach((tabButton) => {
       function updateState() {
-        const index2 = Array.from(tabItem).indexOf(tabButton);
+        const index = Array.from(tabItem).indexOf(tabButton);
         tabItem.forEach((tabButton2, i) => {
           tabButton2.classList.remove("active");
           tabButton2.setAttribute("aria-selected", "false");
-          if (i === index2) {
+          if (i === index) {
             tabButton2.classList.add("active");
             tabButton2.setAttribute("aria-selected", "true");
           }
         });
         tab.dispatchEvent(
           new CustomEvent("tab:change", {
-            detail: { activeIndex: index2 },
+            detail: { activeIndex: index },
             bubbles: true,
             composed: true
           })
@@ -223,28 +229,28 @@ var AccordionGroup = class {
     this.element.__inaAccordionGroup = this;
   }
   registerItem(item) {
-    const index2 = this.items.size;
-    this.items.set(item.id, index2);
+    const index = this.items.size;
+    this.items.set(item.id, index);
     this.itemsArray.push(item);
     if (item.defaultOpen) {
       if (this.isMultiple) {
-        if (!this.openIndexes.includes(index2)) {
-          this.openIndexes.push(index2);
+        if (!this.openIndexes.includes(index)) {
+          this.openIndexes.push(index);
         }
       } else {
         if (this.openIndexes.length === 0) {
-          this.openIndexes.push(index2);
+          this.openIndexes.push(index);
         }
       }
     }
-    return index2;
+    return index;
   }
   unregisterItem(item) {
-    const index2 = this.items.get(item.id);
-    if (index2 !== void 0) {
+    const index = this.items.get(item.id);
+    if (index !== void 0) {
       this.items.delete(item.id);
       this.itemsArray = this.itemsArray.filter((i) => i !== item);
-      this.openIndexes = this.openIndexes.filter((idx) => idx !== index2).map((idx) => idx > index2 ? idx - 1 : idx);
+      this.openIndexes = this.openIndexes.filter((idx) => idx !== index).map((idx) => idx > index ? idx - 1 : idx);
       const newMap = /* @__PURE__ */ new Map();
       this.itemsArray.forEach((itm, newIdx) => {
         newMap.set(itm.id, newIdx);
@@ -252,22 +258,22 @@ var AccordionGroup = class {
       this.items = newMap;
     }
   }
-  handleItemToggle(index2, isOpen) {
+  handleItemToggle(index, isOpen) {
     const prevIndexes = [...this.openIndexes];
     let nextIndexes = [];
     if (this.isMultiple) {
       if (isOpen) {
-        if (!prevIndexes.includes(index2)) {
-          nextIndexes = [...prevIndexes, index2];
+        if (!prevIndexes.includes(index)) {
+          nextIndexes = [...prevIndexes, index];
         } else {
           nextIndexes = prevIndexes;
         }
       } else {
-        nextIndexes = prevIndexes.filter((idx) => idx !== index2);
+        nextIndexes = prevIndexes.filter((idx) => idx !== index);
       }
     } else {
       if (isOpen) {
-        nextIndexes = [index2];
+        nextIndexes = [index];
       } else {
         nextIndexes = [];
       }
@@ -275,16 +281,16 @@ var AccordionGroup = class {
     this.openIndexes = nextIndexes;
     this.notifyItems();
   }
-  isItemOpen(index2) {
-    return this.openIndexes.includes(index2);
+  isItemOpen(index) {
+    return this.openIndexes.includes(index);
   }
   getItemIndex(itemId) {
     return this.items.get(itemId);
   }
   // Notify all children to update their visual state based on new openIndexes
   notifyItems() {
-    this.itemsArray.forEach((item, index2) => {
-      const isOpen = this.openIndexes.includes(index2);
+    this.itemsArray.forEach((item, index) => {
+      const isOpen = this.openIndexes.includes(index);
       item.setOpenState(isOpen);
     });
   }
@@ -393,7 +399,7 @@ function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
 
 // src/js/components/stateful/date-picker.js
 var DatePicker = class {
-  constructor(selectorOrElement, options2 = {}) {
+  constructor(selectorOrElement, options = {}) {
     this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
     if (!this.container) {
       console.warn("[IDDS DatePicker] Container not found:", selectorOrElement);
@@ -419,7 +425,11 @@ var DatePicker = class {
       onChange: null,
       triggerWidth: "",
       panelMaxHeight: "",
-      ...options2
+      allowClear: true,
+      // Added allowClear option
+      className: "",
+      // Added className option
+      ...options
     };
     this.state = {
       viewDate: /* @__PURE__ */ new Date(),
@@ -573,6 +583,18 @@ var DatePicker = class {
     }
     this.renderPanel();
   }
+  getFullDayName(shortName) {
+    const map = {
+      Min: "Minggu",
+      Sen: "Senin",
+      Sel: "Selasa",
+      Rab: "Rabu",
+      Kam: "Kamis",
+      Jum: "Jumat",
+      Sab: "Sabtu"
+    };
+    return map[shortName] || shortName;
+  }
   initDOM() {
     if (!this.container.classList.contains(`${PREFIX}-date-picker`)) {
       this.container.classList.add(`${PREFIX}-date-picker`);
@@ -588,6 +610,9 @@ var DatePicker = class {
       if (this.options.triggerWidth) {
         trigger.style.width = typeof this.options.triggerWidth === "number" ? `${this.options.triggerWidth}px` : this.options.triggerWidth;
       }
+      trigger.setAttribute("aria-haspopup", "dialog");
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.setAttribute("aria-label", "Pilih Tanggal");
       const textWrapper = document.createElement("span");
       textWrapper.className = `${PREFIX}-date-picker__trigger-text ${PREFIX}-date-picker__trigger-text--placeholder`;
       textWrapper.textContent = "Pilih Tanggal";
@@ -597,6 +622,26 @@ var DatePicker = class {
       trigger.appendChild(textWrapper);
       trigger.appendChild(iconWrapper);
       this.container.appendChild(trigger);
+    } else if (trigger) {
+      if (!trigger.hasAttribute("aria-haspopup"))
+        trigger.setAttribute("aria-haspopup", "dialog");
+      if (!trigger.hasAttribute("aria-expanded"))
+        trigger.setAttribute("aria-expanded", "false");
+      if (!trigger.hasAttribute("aria-label"))
+        trigger.setAttribute("aria-label", "Pilih Tanggal");
+    }
+    if (this.options.allowClear && !this.options.panelOnly) {
+      let clearBtn = this.container.querySelector(`.${PREFIX}-date-picker__clear-button`);
+      if (!clearBtn) {
+        clearBtn = document.createElement("button");
+        clearBtn.type = "button";
+        clearBtn.className = `${PREFIX}-date-picker__clear-button`;
+        clearBtn.setAttribute("aria-label", "Hapus tanggal terpilih");
+        clearBtn.innerHTML = this.createIcon("x");
+        clearBtn.style.display = "none";
+        this.container.appendChild(clearBtn);
+      }
+      this.elements.clearBtn = clearBtn;
     }
     this.elements.trigger = trigger;
     if (trigger) {
@@ -891,10 +936,13 @@ var DatePicker = class {
     header.appendChild(nextBtn);
     const grid = document.createElement("div");
     grid.className = `${PREFIX}-date-picker__calendar-grid`;
+    grid.setAttribute("role", "grid");
     this.DAYS_SHORT.forEach((d) => {
       const dh = document.createElement("div");
       dh.className = `${PREFIX}-date-picker__day-header`;
       dh.textContent = d;
+      dh.setAttribute("role", "columnheader");
+      dh.setAttribute("aria-label", this.getFullDayName(d));
       grid.appendChild(dh);
     });
     const firstDayOfMonth = new Date(year, month, 1).getDay();
@@ -1039,6 +1087,7 @@ var DatePicker = class {
     this.state.isOpen = true;
     this.elements.panel.classList.add(`${PREFIX}-date-picker__panel--open`);
     this.elements.panel.style.display = "block";
+    if (this.elements.trigger) this.elements.trigger.setAttribute("aria-expanded", "true");
     this.renderPanel();
   }
   close() {
@@ -1046,6 +1095,7 @@ var DatePicker = class {
     this.state.isOpen = false;
     this.elements.panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
     this.elements.panel.style.display = "none";
+    if (this.elements.trigger) this.elements.trigger.setAttribute("aria-expanded", "false");
   }
   toggle() {
     if (this.state.isOpen) this.close();
@@ -1090,11 +1140,11 @@ var DatePicker = class {
     return this.state.rangeDate;
   }
 };
-function initDatepicker(selectorOrElement, options2 = {}) {
+function initDatepicker(selectorOrElement, options = {}) {
   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, options2);
+    const instance = new DatePicker(container, options);
     container.__datepickerAPI = instance;
     instances.push(instance);
   });
@@ -1104,7 +1154,7 @@ function initDatepicker(selectorOrElement, options2 = {}) {
 
 // src/js/components/stateful/time-picker.js
 var TimePicker = class {
-  constructor(selectorOrElement, options2 = {}) {
+  constructor(selectorOrElement, options = {}) {
     this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
     if (!this.container) {
       console.warn("[IDDS TimePicker] Container not found:", selectorOrElement);
@@ -1137,7 +1187,7 @@ var TimePicker = class {
       secondStep: 1,
       onChange: null,
       size: this.container.dataset.size || "md",
-      ...options2
+      ...options
     };
     this.state = {
       isOpen: false,
@@ -1145,6 +1195,7 @@ var TimePicker = class {
       internalValue: ""
     };
     this.elements = {};
+    this.inputId = this.container.id || `time-picker-${Math.random().toString(36).substr(2, 9)}`;
     this.initDOM();
     this.bindEvents();
     if (this.elements.input && this.elements.input.value) {
@@ -1252,28 +1303,41 @@ var TimePicker = class {
     if (!wrapper) {
       wrapper = document.createElement("div");
       wrapper.className = `${PREFIX}-time-picker__wrapper`;
+      wrapper.setAttribute("role", "combobox");
+      wrapper.setAttribute("aria-haspopup", "listbox");
+      wrapper.setAttribute("aria-expanded", "false");
       const prefixIcon = document.createElement("div");
       prefixIcon.className = `${PREFIX}-time-picker__prefix-icon`;
       prefixIcon.innerHTML = this.createIcon("clock");
       wrapper.appendChild(prefixIcon);
       input = document.createElement("input");
       input.type = "text";
+      input.id = this.inputId;
       input.className = `${PREFIX}-time-picker__input ${PREFIX}-time-picker__input--size-${this.options.size} ${PREFIX}-time-picker__input--with-prefix`;
       if (this.options.allowClear)
         input.classList.add(`${PREFIX}-time-picker__input--with-suffix`);
       input.placeholder = this.container.getAttribute("placeholder") || "Select time";
       if (this.options.disabled) input.disabled = true;
       if (this.options.readonly) input.readOnly = true;
-      else input.readOnly = true;
       wrapper.appendChild(input);
       if (this.options.allowClear) {
-        clearBtn = document.createElement("div");
+        clearBtn = document.createElement("button");
+        clearBtn.type = "button";
         clearBtn.className = `${PREFIX}-time-picker__clear-button`;
+        clearBtn.setAttribute("aria-label", "Hapus waktu");
         clearBtn.innerHTML = this.createIcon("x");
         clearBtn.style.display = "none";
         wrapper.appendChild(clearBtn);
       }
       this.container.appendChild(wrapper);
+    } else {
+      wrapper.setAttribute("role", "combobox");
+      wrapper.setAttribute("aria-haspopup", "listbox");
+      wrapper.setAttribute("aria-expanded", "false");
+      if (input && !input.id) input.id = this.inputId;
+      if (clearBtn && !clearBtn.hasAttribute("aria-label")) {
+        clearBtn.setAttribute("aria-label", "Hapus waktu");
+      }
     }
     this.elements.wrapper = wrapper;
     this.elements.input = input;
@@ -1354,24 +1418,24 @@ var TimePicker = class {
     }
   }
   generateOptions(type) {
-    const options2 = [];
+    const options = [];
     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) {
-        options2.push(i);
+        options.push(i);
       }
     } else if (limit === 24) {
       for (let i = 0; i <= 23; i += step) {
-        options2.push(i);
+        options.push(i);
       }
     } else {
       for (let i = 0; i <= 59; i += step) {
-        options2.push(i);
+        options.push(i);
       }
     }
-    return options2;
+    return options;
   }
   renderColumn(type, optionsArr) {
     const column = document.createElement("div");
@@ -1381,7 +1445,7 @@ var TimePicker = class {
     column.appendChild(colContent);
     const { use12Hours } = this.options;
     const { currentTime } = this.state;
-    optionsArr.forEach((optValue) => {
+    optionsArr.forEach((optValue, index) => {
       const option = document.createElement("div");
       option.className = `${PREFIX}-time-picker__option`;
       let isSelected = false;
@@ -1427,9 +1491,9 @@ var TimePicker = class {
         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) => {
+      const isFirstFocusable = index === 0 && !optionsArr.some((opt) => {
         if (type === "hour") {
-          return use12Hours ? (currentTime.hours === 0 ? 12 : currentTime.hours) === opt : currentTime.hours === opt;
+          return (use12Hours && currentTime.hours === 0 ? 12 : currentTime.hours) === opt;
         } else if (type === "minute") {
           return currentTime.minutes === opt;
         } else if (type === "second") {
@@ -1547,6 +1611,7 @@ var TimePicker = class {
     this.state.isOpen = true;
     this.container.classList.add(`${PREFIX}-time-picker--open`);
     this.elements.panel.style.display = "block";
+    this.elements.wrapper.setAttribute("aria-expanded", "true");
     this.state.currentTime = this.parseTime(this.elements.input.value);
     this.buildPanel();
     document.dispatchEvent(
@@ -1559,6 +1624,7 @@ var TimePicker = class {
     this.state.isOpen = false;
     this.container.classList.remove(`${PREFIX}-time-picker--open`);
     this.elements.panel.style.display = "none";
+    this.elements.wrapper.setAttribute("aria-expanded", "false");
   }
   toggle() {
     if (this.state.isOpen) this.close();
@@ -1567,20 +1633,50 @@ var TimePicker = class {
   bindEvents() {
     this.elements.wrapper.addEventListener("click", (e) => {
       e.stopPropagation();
-      this.toggle();
+      const target = e.target;
+      if (target === this.elements.wrapper || target.classList.contains(`${PREFIX}-time-picker__suffix-icon`) || target.classList.contains(`${PREFIX}-time-picker__prefix-icon`)) {
+        this.toggle();
+      }
     });
-    if (this.elements.clearBtn && this.options.allowClear) {
+    this.elements.input.addEventListener("input", (e) => {
+      const val = e.target.value;
+      this.state.internalValue = val;
+      const timeRegex = this.options.use12Hours ? /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM|am|pm)?$/ : /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/;
+      if (timeRegex.test(val)) {
+        this.state.currentTime = this.parseTime(val);
+        if (this.state.isOpen) this.buildPanel();
+      }
+      if (this.elements.clearBtn && this.options.allowClear) {
+        this.elements.clearBtn.style.display = val && !this.options.disabled ? "flex" : "none";
+      }
+      if (typeof this.options.onChange === "function") {
+        this.options.onChange(val);
+      }
+    });
+    this.elements.input.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.open();
+    });
+    this.elements.input.addEventListener("focus", () => {
+      this.open();
+    });
+    this.elements.input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (this.state.internalValue) {
+          this.close();
+        } else {
+          this.toggle();
+        }
+      } else if (e.key === "Escape") {
+        if (this.state.isOpen) this.close();
+      }
+    });
+    if (this.elements.clearBtn) {
       this.elements.clearBtn.addEventListener("click", (e) => {
         e.stopPropagation();
-        this.elements.input.value = "";
-        this.state.currentTime = {
-          hours: 0,
-          minutes: 0,
-          seconds: 0,
-          period: "AM"
-        };
-        this.container.dataset.value = "";
         this.state.internalValue = "";
+        this.elements.input.value = "";
         this.elements.clearBtn.style.display = "none";
         this.elements.input.dispatchEvent(
           new Event("change", { bubbles: true })
@@ -1589,6 +1685,12 @@ var TimePicker = class {
           this.options.onChange("");
         }
       });
+      this.elements.clearBtn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.elements.clearBtn.click();
+        }
+      });
     }
     document.addEventListener("click", (e) => {
       if (!this.container.contains(e.target)) this.close();
@@ -1602,11 +1704,11 @@ var TimePicker = class {
     return this.state.internalValue;
   }
 };
-function initTimepicker(selectorOrElement, options2 = {}) {
+function initTimepicker(selectorOrElement, options = {}) {
   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, options2);
+    const instance = new TimePicker(container, options);
     container.__timepickerAPI = instance;
     instances.push(instance);
   });
@@ -1649,6 +1751,17 @@ function openModal(modalEl) {
   modalEl.style.display = "flex";
   document.body.style.overflow = "hidden";
   modalEl.setAttribute("aria-hidden", "false");
+  modalEl.setAttribute("tabindex", "-1");
+  if (!modalEl.hasAttribute("role")) {
+    modalEl.setAttribute("role", "dialog");
+  }
+  if (!modalEl.hasAttribute("aria-modal")) {
+    modalEl.setAttribute("aria-modal", "true");
+  }
+  const closeBtn = modalEl.querySelector(`.${PREFIX}-modal__close-button`);
+  if (closeBtn && !closeBtn.hasAttribute("aria-label")) {
+    closeBtn.setAttribute("aria-label", "Tutup dialog");
+  }
   modalEl.classList.remove(
     `${PREFIX}-modal--exit`,
     `${PREFIX}-modal--exit-active`
@@ -1747,6 +1860,19 @@ function initDrawer(rootSelector = `.${PREFIX2}-drawer`) {
     if (!drawer) return;
     drawer.style.display = "flex";
     document.body.style.overflow = "hidden";
+    drawer.setAttribute("aria-hidden", "false");
+    drawer.setAttribute("tabindex", "-1");
+    if (!drawer.hasAttribute("role")) {
+      drawer.setAttribute("role", "complementary");
+    }
+    if (!drawer.hasAttribute("aria-modal")) {
+      drawer.setAttribute("aria-modal", "true");
+    }
+    const panel = drawer.querySelector(`.${PREFIX2}-drawer__panel`) || drawer.querySelector(`.${PREFIX2}-drawer__content`) || drawer;
+    const closeBtn = panel.querySelector(`.${PREFIX2}-drawer__close-button`);
+    if (closeBtn && !closeBtn.hasAttribute("aria-label")) {
+      closeBtn.setAttribute("aria-label", "Tutup panel");
+    }
     drawer.offsetHeight;
     drawer.classList.add(`${PREFIX2}-drawer--open`);
     drawer.dispatchEvent(new CustomEvent("drawer:open"));
@@ -1911,9 +2037,20 @@ function setDropdownState(root, newState) {
   if (newState.isOpen !== void 0) {
     root.setAttribute("data-state", newState.isOpen ? "open" : "closed");
     const trigger = root.querySelector(`.${PREFIX4}-select-dropdown__trigger`);
-    if (trigger) trigger.setAttribute("aria-expanded", newState.isOpen);
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", newState.isOpen);
+      if (!trigger.hasAttribute("aria-haspopup")) {
+        trigger.setAttribute("aria-haspopup", "listbox");
+      }
+    }
     const panel = root.querySelector(`.${PREFIX4}-select-dropdown__panel`);
     if (panel) {
+      if (!panel.hasAttribute("role")) {
+        panel.setAttribute("role", "listbox");
+      }
+      if (newState.isMultiple) {
+        panel.setAttribute("aria-multiselectable", "true");
+      }
       if (newState.isOpen) {
         panel.style.removeProperty("display");
       } else {
@@ -1940,9 +2077,9 @@ function updateTriggerUI(root, values, isMultiple) {
     `.${PREFIX4}-select-dropdown__trigger-text`
   );
   const placeholder = input ? input.getAttribute("placeholder") : textSpan ? textSpan.getAttribute("data-placeholder") : "Select...";
-  const options2 = root.querySelectorAll(`.${PREFIX4}-select-dropdown__option`);
+  const options = root.querySelectorAll(`.${PREFIX4}-select-dropdown__option`);
   const getLabel = (val) => {
-    const opt = Array.from(options2).find(
+    const opt = Array.from(options).find(
       (o) => o.getAttribute("data-value") === val
     );
     return opt ? opt.textContent.trim() : val;
@@ -1968,7 +2105,7 @@ function updateTriggerUI(root, values, isMultiple) {
       values.length === 0
     );
   }
-  options2.forEach((opt) => {
+  options.forEach((opt) => {
     const val = opt.getAttribute("data-value");
     const isSelected = values.includes(val);
     if (isMultiple) {
@@ -1990,6 +2127,10 @@ function updateTriggerUI(root, values, isMultiple) {
         isSelected
       );
     }
+    if (!opt.hasAttribute("role")) {
+      opt.setAttribute("role", "option");
+    }
+    opt.setAttribute("aria-selected", isSelected);
   });
 }
 function initSelectDropdown() {
@@ -2048,13 +2189,13 @@ function initSelectDropdown() {
       const root = e.target.closest(`.${PREFIX4}-select-dropdown`);
       if (root) {
         const term = e.target.value.toLowerCase();
-        const options2 = root.querySelectorAll(
+        const options = root.querySelectorAll(
           `.${PREFIX4}-select-dropdown__option`
         );
         if (root.getAttribute("data-state") !== "open") {
           setDropdownState(root, { isOpen: true });
         }
-        options2.forEach((opt) => {
+        options.forEach((opt) => {
           const text = opt.textContent.trim().toLowerCase();
           opt.style.display = text.includes(term) ? "" : "none";
         });
@@ -2128,20 +2269,20 @@ function initStepper() {
     `;
     const updateUI = () => {
       stepper.dataset.currentStep = currentStep;
-      items.forEach((item, index2) => {
+      items.forEach((item, index) => {
         const iconWrapper = item.querySelector(
           `.${PREFIX}-stepper__icon-wrapper`
         );
-        const itemNumber = index2 + 1;
+        const itemNumber = index + 1;
         item.classList.remove(
           `${PREFIX}-stepper__item--completed`,
           `${PREFIX}-stepper__item--active`
         );
         if (iconWrapper) iconWrapper.innerHTML = "";
-        if (index2 < currentStep) {
+        if (index < currentStep) {
           item.classList.add(`${PREFIX}-stepper__item--completed`);
           if (iconWrapper) iconWrapper.innerHTML = checkIcon;
-        } else if (index2 === currentStep) {
+        } else if (index === currentStep) {
           item.classList.add(`${PREFIX}-stepper__item--active`);
           if (iconWrapper)
             iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
@@ -2150,8 +2291,8 @@ function initStepper() {
             iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
         }
       });
-      separators.forEach((separator, index2) => {
-        if (index2 < currentStep) {
+      separators.forEach((separator, index) => {
+        if (index < currentStep) {
           separator.classList.add(`${PREFIX}-stepper__separator--completed`);
         } else {
           separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
@@ -2197,11 +2338,11 @@ function initStepper() {
         }
       });
     });
-    items.forEach((item, index2) => {
+    items.forEach((item, index) => {
       if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
         item.addEventListener("click", () => {
           if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
-            currentStep = index2;
+            currentStep = index;
             updateUI();
           }
         });
@@ -2275,7 +2416,7 @@ function initFileUpload(rootSelector = `.${PREFIX}-file-upload`) {
       } else {
         filesContainer.style.display = "none";
       }
-      uploadedFiles.forEach((f, index2) => {
+      uploadedFiles.forEach((f, index) => {
         const fileEl = document.createElement("div");
         fileEl.className = `${PREFIX}-file-upload__file`;
         let statusClass = "";
@@ -3099,281 +3240,6 @@ function initRangeDatepicker() {
   });
 }
 
-// src/js/components/stateless/img-compare.js
-function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
-  document.querySelectorAll(rootSelector).forEach((imgCompare) => {
-    const sliderEl = document.createElement("input");
-    sliderEl.type = "range";
-    sliderEl.min = "0";
-    sliderEl.max = "100";
-    sliderEl.value = "50";
-    sliderEl.setAttribute("aria-label", "Percentage of the image to show");
-    sliderEl.setAttribute("aria-valuenow", "50");
-    sliderEl.setAttribute("aria-valuemin", "0");
-    sliderEl.setAttribute("aria-valuemax", "100");
-    sliderEl.classList.add("ina-ss-img__slider");
-    sliderEl.addEventListener("input", () => {
-      imgCompare.style.setProperty(
-        `--${PREFIX}-position`,
-        `${sliderEl.value}%`
-      );
-    });
-    const sliderLineEl = document.createElement("div");
-    sliderLineEl.classList.add("ina-ss-img__slider-line");
-    const sliderButtonEl = document.createElement("button");
-    sliderButtonEl.classList.add("ina-ss-img__slider-button");
-    imgCompare.appendChild(sliderEl);
-    imgCompare.appendChild(sliderLineEl);
-    imgCompare.appendChild(sliderButtonEl);
-  });
-}
-
-// src/js/components/stateful/chip.js
-var PREFIX5 = "ina";
-function initChip(rootSelector = `.${PREFIX5}-chip`) {
-  const chips = document.querySelectorAll(rootSelector);
-  chips.forEach((container) => {
-    if (container.__inaChipInitialized) return;
-    const showCustomization = container.getAttribute("data-show-customization") === "true";
-    const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
-    const isMultiple = container.getAttribute("data-multiple") === "true";
-    let selectedValue = container.getAttribute("data-selected") || "";
-    const list = container.querySelector(`.${PREFIX5}-chip__list`);
-    const items = list ? list.querySelectorAll(`.${PREFIX5}-chip__item`) : [];
-    let customFieldContainer = container.querySelector(
-      `.${PREFIX5}-chip__custom-field`
-    );
-    const getNormalizedSelected = () => {
-      if (!selectedValue) return [];
-      return isMultiple ? selectedValue.split(",").map((s) => s.trim()).filter(Boolean) : [selectedValue];
-    };
-    const updateUI = () => {
-      const normSelected = getNormalizedSelected();
-      const getInitialFocusIndex = () => {
-        if (normSelected.length > 0) {
-          const standardValues = Array.from(items).filter((item) => item.textContent.trim() !== customizationLabel).map((item) => item.getAttribute("data-value"));
-          const hasCustomVal = normSelected.some(
-            (val) => !standardValues.includes(val) && val !== ""
-          );
-          if (hasCustomVal && showCustomization) {
-            return items.length - 1;
-          }
-          const firstSelectedIndex = Array.from(items).findIndex(
-            (opt) => normSelected.includes(opt.getAttribute("data-value"))
-          );
-          if (firstSelectedIndex !== -1) return firstSelectedIndex;
-        }
-        return 0;
-      };
-      const focusedIndex = getInitialFocusIndex();
-      items.forEach((item, index2) => {
-        const itemValue = item.getAttribute("data-value");
-        const isSelected = normSelected.includes(itemValue) || showCustomization && item.textContent.trim() === customizationLabel && normSelected.some(
-          (val) => !Array.from(items).filter((i) => i.textContent.trim() !== customizationLabel).map((i) => i.getAttribute("data-value")).includes(val) && val !== ""
-        );
-        const isDisabled = item.hasAttribute("disabled");
-        if (isSelected) {
-          item.classList.add(`${PREFIX5}-chip__item--selected`);
-        } else {
-          item.classList.remove(`${PREFIX5}-chip__item--selected`);
-        }
-        if (isDisabled) {
-          item.classList.add(`${PREFIX5}-chip__item--disabled`);
-        }
-        item.setAttribute(
-          "tabindex",
-          index2 === focusedIndex && !isDisabled ? "0" : "-1"
-        );
-      });
-      if (showCustomization) {
-        const isToggleBtn2 = (i) => i.hasAttribute("data-customization-toggle") || i.textContent.trim() === customizationLabel;
-        const standardValues = Array.from(items).filter((item) => !isToggleBtn2(item)).map((item) => item.getAttribute("data-value"));
-        const customValues = normSelected.filter(
-          (val) => !standardValues.includes(val) && val !== ""
-        );
-        const isStandard = customValues.length === 0;
-        const primaryCustomValue = customValues[customValues.length - 1] || "";
-        const toggleBtn = Array.from(items).find(isToggleBtn2);
-        const showInput = toggleBtn && normSelected.includes(toggleBtn.getAttribute("data-value")) || !isStandard && normSelected.length > 0;
-        if (showInput) {
-          if (!customFieldContainer) {
-            customFieldContainer = document.createElement("div");
-            customFieldContainer.className = `${PREFIX5}-chip__custom-field`;
-            container.appendChild(customFieldContainer);
-          }
-          let input = customFieldContainer.querySelector(
-            `.${PREFIX5}-chip__input`
-          );
-          if (!input) {
-            customFieldContainer.innerHTML = `
-               <div class="${PREFIX5}-chip__input-wrapper">
-                 <input type="text" class="${PREFIX5}-chip__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? primaryCustomValue : ""}" />
-                 <button type="button" class="${PREFIX5}-chip__clear-button" aria-label="Clear input" style="display: ${!isStandard && primaryCustomValue ? "inline-flex" : "none"};">
-                   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${PREFIX5}-chip__clear-icon">
-                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                     <path d="M18 6l-12 12"></path>
-                     <path d="M6 6l12 12"></path>
-                   </svg>
-                 </button>
-               </div>
-             `;
-            input = customFieldContainer.querySelector("input");
-            const clearBtn = customFieldContainer.querySelector(
-              ".ina-chip__clear-button"
-            );
-            input.addEventListener("input", (e) => {
-              clearBtn.style.display = e.target.value ? "inline-flex" : "none";
-            });
-            clearBtn.addEventListener("click", () => {
-              input.value = "";
-              clearBtn.style.display = "none";
-              commitCustomValue(input);
-            });
-            input.addEventListener("blur", (e) => {
-              commitCustomValue(e.target);
-            });
-            input.addEventListener("keydown", (e) => {
-              if (e.key === "Enter") {
-                commitCustomValue(e.target);
-                e.target.blur();
-              }
-            });
-          } else {
-            const inputEl = customFieldContainer.querySelector("input");
-            if (inputEl && document.activeElement !== inputEl) {
-              inputEl.value = !isStandard ? primaryCustomValue : "";
-            }
-          }
-          customFieldContainer.style.display = "block";
-        } else {
-          if (customFieldContainer) {
-            customFieldContainer.style.display = "none";
-          }
-        }
-      }
-    };
-    const handleSelect = (val) => {
-      if (!val) return;
-      let finalVal = val;
-      if (isMultiple) {
-        const normSelected = getNormalizedSelected();
-        let newSelected;
-        if (normSelected.includes(val)) {
-          newSelected = normSelected.filter((v) => v !== val);
-        } else {
-          newSelected = [...normSelected, val];
-        }
-        finalVal = newSelected;
-        selectedValue = newSelected.join(",");
-      } else {
-        const normSelected = getNormalizedSelected();
-        if (normSelected.includes(val)) {
-          selectedValue = "";
-          finalVal = "";
-        } else {
-          selectedValue = val;
-        }
-      }
-      container.setAttribute("data-selected", selectedValue);
-      updateUI();
-      container.dispatchEvent(
-        new CustomEvent("chip:select", {
-          detail: { value: finalVal },
-          bubbles: true
-        })
-      );
-    };
-    let currentFocusedIndex = -1;
-    const setItemFocus = (index2) => {
-      items.forEach((item, i) => {
-        item.setAttribute("tabindex", i === index2 ? "0" : "-1");
-      });
-      if (items[index2]) {
-        items[index2].focus();
-        currentFocusedIndex = index2;
-      }
-    };
-    const commitCustomValue = (inputEl) => {
-      const finalValue = inputEl.value.trim();
-      let normSelected = getNormalizedSelected();
-      const toggleBtn = Array.from(items).find(isToggleBtn);
-      const toggleVal = toggleBtn ? toggleBtn.getAttribute("data-value") : null;
-      const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
-      const customValues = normSelected.filter(
-        (val) => !standardValues.includes(val) && val !== "" && val !== toggleVal
-      );
-      const primaryCustomValue = customValues[customValues.length - 1];
-      if (primaryCustomValue) {
-        normSelected = normSelected.filter((v) => v !== primaryCustomValue);
-      }
-      if (finalValue !== "") {
-        if (!normSelected.includes(finalValue)) {
-          normSelected.push(finalValue);
-        }
-      } else {
-        if (toggleVal) {
-          normSelected = normSelected.filter((v) => v !== toggleVal);
-        }
-      }
-      if (isMultiple) {
-        selectedValue = normSelected.join(",");
-      } else {
-        selectedValue = finalValue;
-      }
-      updateUI();
-      const changeEvent = new CustomEvent(`${PREFIX5}-chip:change`, {
-        detail: { value: isMultiple ? getNormalizedSelected() : selectedValue },
-        bubbles: true
-      });
-      container.dispatchEvent(changeEvent);
-    };
-    items.forEach((item, index2) => {
-      item.addEventListener("click", (e) => {
-        if (item.hasAttribute("disabled")) return;
-        currentFocusedIndex = index2;
-        const val = item.getAttribute("data-value");
-        if (showCustomization && isToggleBtn(item)) {
-          const normSelected = getNormalizedSelected();
-          const standardValues = Array.from(items).filter((i) => !isToggleBtn(i)).map((i) => i.getAttribute("data-value"));
-          const customValues = normSelected.filter(
-            (v) => !standardValues.includes(v) && v !== "" && v !== val
-          );
-          const isInputVisible = normSelected.includes(val) || customValues.length > 0;
-          if (!isInputVisible) {
-            handleSelect(val);
-          }
-        } else {
-          handleSelect(val);
-        }
-      });
-      item.addEventListener("keydown", (e) => {
-        if (item.hasAttribute("disabled")) return;
-        if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-          e.preventDefault();
-          let nextIndex = (index2 + 1) % items.length;
-          while (items[nextIndex].hasAttribute("disabled") && nextIndex !== index2) {
-            nextIndex = (nextIndex + 1) % items.length;
-          }
-          setItemFocus(nextIndex);
-        } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-          e.preventDefault();
-          let prevIndex = (index2 - 1 + items.length) % items.length;
-          while (items[prevIndex].hasAttribute("disabled") && prevIndex !== index2) {
-            prevIndex = (prevIndex - 1 + items.length) % items.length;
-          }
-          setItemFocus(prevIndex);
-        }
-        if (e.key === " " || e.key === "Enter") {
-          e.preventDefault();
-          item.click();
-        }
-      });
-    });
-    updateUI();
-    container.__inaChipInitialized = true;
-  });
-}
-
 // src/js/components/stateful/pagination.js
 function initPagination() {
   document.querySelectorAll(`.${PREFIX}-pagination`).forEach((container) => {
@@ -3596,6 +3462,573 @@ function initPagination() {
   });
 }
 
+// src/js/utils/countries.js
+var COUNTRIES = [
+  { code: "ID", name: "Indonesia", dialCode: "+62" },
+  { code: "AF", name: "Afghanistan", dialCode: "+93" },
+  { code: "AL", name: "Albania", dialCode: "+355" },
+  { code: "DZ", name: "Algeria", dialCode: "+213" },
+  { code: "AS", name: "American Samoa", dialCode: "+1684" },
+  { code: "AD", name: "Andorra", dialCode: "+376" },
+  { code: "AO", name: "Angola", dialCode: "+244" },
+  { code: "AI", name: "Anguilla", dialCode: "+1264" },
+  { code: "AG", name: "Antigua and Barbuda", dialCode: "+1268" },
+  { code: "AR", name: "Argentina", dialCode: "+54" },
+  { code: "AM", name: "Armenia", dialCode: "+374" },
+  { code: "AW", name: "Aruba", dialCode: "+297" },
+  { code: "AU", name: "Australia", dialCode: "+61" },
+  { code: "AT", name: "Austria", dialCode: "+43" },
+  { code: "AZ", name: "Azerbaijan", dialCode: "+994" },
+  { code: "BS", name: "Bahamas", dialCode: "+1242" },
+  { code: "BH", name: "Bahrain", dialCode: "+973" },
+  { code: "BD", name: "Bangladesh", dialCode: "+880" },
+  { code: "BB", name: "Barbados", dialCode: "+1246" },
+  { code: "BY", name: "Belarus", dialCode: "+375" },
+  { code: "BE", name: "Belgium", dialCode: "+32" },
+  { code: "BZ", name: "Belize", dialCode: "+501" },
+  { code: "BJ", name: "Benin", dialCode: "+229" },
+  { code: "BM", name: "Bermuda", dialCode: "+1441" },
+  { code: "BT", name: "Bhutan", dialCode: "+975" },
+  { code: "BO", name: "Bolivia", dialCode: "+591" },
+  { code: "BA", name: "Bosnia and Herzegovina", dialCode: "+387" },
+  { code: "BW", name: "Botswana", dialCode: "+267" },
+  { code: "BR", name: "Brazil", dialCode: "+55" },
+  { code: "IO", name: "British Indian Ocean Territory", dialCode: "+246" },
+  { code: "BN", name: "Brunei Darussalam", dialCode: "+673" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359" },
+  { code: "BF", name: "Burkina Faso", dialCode: "+226" },
+  { code: "BI", name: "Burundi", dialCode: "+257" },
+  { code: "KH", name: "Cambodia", dialCode: "+855" },
+  { code: "CM", name: "Cameroon", dialCode: "+237" },
+  { code: "CA", name: "Canada", dialCode: "+1" },
+  { code: "CV", name: "Cape Verde", dialCode: "+238" },
+  { code: "KY", name: "Cayman Islands", dialCode: "+1345" },
+  { code: "CF", name: "Central African Republic", dialCode: "+236" },
+  { code: "TD", name: "Chad", dialCode: "+235" },
+  { code: "CL", name: "Chile", dialCode: "+56" },
+  { code: "CN", name: "China", dialCode: "+86" },
+  { code: "CX", name: "Christmas Island", dialCode: "+61" },
+  { code: "CC", name: "Cocos (Keeling) Islands", dialCode: "+61" },
+  { code: "CO", name: "Colombia", dialCode: "+57" },
+  { code: "KM", name: "Comoros", dialCode: "+269" },
+  { code: "CG", name: "Congo", dialCode: "+242" },
+  { code: "CD", name: "Congo, Democratic Republic of the", dialCode: "+243" },
+  { code: "CK", name: "Cook Islands", dialCode: "+682" },
+  { code: "CR", name: "Costa Rica", dialCode: "+506" },
+  { code: "CI", name: "Cote d'Ivoire", dialCode: "+225" },
+  { code: "HR", name: "Croatia", dialCode: "+385" },
+  { code: "CU", name: "Cuba", dialCode: "+53" },
+  { code: "CY", name: "Cyprus", dialCode: "+357" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420" },
+  { code: "DK", name: "Denmark", dialCode: "+45" },
+  { code: "DJ", name: "Djibouti", dialCode: "+253" },
+  { code: "DM", name: "Dominica", dialCode: "+1767" },
+  { code: "DO", name: "Dominican Republic", dialCode: "+1" },
+  { code: "EC", name: "Ecuador", dialCode: "+593" },
+  { code: "EG", name: "Egypt", dialCode: "+20" },
+  { code: "SV", name: "El Salvador", dialCode: "+503" },
+  { code: "GQ", name: "Equatorial Guinea", dialCode: "+240" },
+  { code: "ER", name: "Eritrea", dialCode: "+291" },
+  { code: "EE", name: "Estonia", dialCode: "+372" },
+  { code: "ET", name: "Ethiopia", dialCode: "+251" },
+  { code: "FK", name: "Falkland Islands (Malvinas)", dialCode: "+500" },
+  { code: "FO", name: "Faroe Islands", dialCode: "+298" },
+  { code: "FJ", name: "Fiji", dialCode: "+679" },
+  { code: "FI", name: "Finland", dialCode: "+358" },
+  { code: "FR", name: "France", dialCode: "+33" },
+  { code: "GF", name: "French Guiana", dialCode: "+594" },
+  { code: "PF", name: "French Polynesia", dialCode: "+689" },
+  { code: "GA", name: "Gabon", dialCode: "+241" },
+  { code: "GM", name: "Gambia", dialCode: "+220" },
+  { code: "GE", name: "Georgia", dialCode: "+995" },
+  { code: "DE", name: "Germany", dialCode: "+49" },
+  { code: "GH", name: "Ghana", dialCode: "+233" },
+  { code: "GI", name: "Gibraltar", dialCode: "+350" },
+  { code: "GR", name: "Greece", dialCode: "+30" },
+  { code: "GL", name: "Greenland", dialCode: "+299" },
+  { code: "GD", name: "Grenada", dialCode: "+1473" },
+  { code: "GP", name: "Guadeloupe", dialCode: "+590" },
+  { code: "GU", name: "Guam", dialCode: "+1671" },
+  { code: "GT", name: "Guatemala", dialCode: "+502" },
+  { code: "GG", name: "Guernsey", dialCode: "+44" },
+  { code: "GN", name: "Guinea", dialCode: "+224" },
+  { code: "GW", name: "Guinea-Bissau", dialCode: "+245" },
+  { code: "GY", name: "Guyana", dialCode: "+592" },
+  { code: "HT", name: "Haiti", dialCode: "+509" },
+  { code: "VA", name: "Holy See (Vatican City State)", dialCode: "+379" },
+  { code: "HN", name: "Honduras", dialCode: "+504" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852" },
+  { code: "HU", name: "Hungary", dialCode: "+36" },
+  { code: "IS", name: "Iceland", dialCode: "+354" },
+  { code: "IN", name: "India", dialCode: "+91" },
+  { code: "IR", name: "Iran, Islamic Republic of", dialCode: "+98" },
+  { code: "IQ", name: "Iraq", dialCode: "+964" },
+  { code: "IE", name: "Ireland", dialCode: "+353" },
+  { code: "IM", name: "Isle of Man", dialCode: "+44" },
+  { code: "IL", name: "Israel", dialCode: "+972" },
+  { code: "IT", name: "Italy", dialCode: "+39" },
+  { code: "JM", name: "Jamaica", dialCode: "+1876" },
+  { code: "JP", name: "Japan", dialCode: "+81" },
+  { code: "JE", name: "Jersey", dialCode: "+44" },
+  { code: "JO", name: "Jordan", dialCode: "+962" },
+  { code: "KZ", name: "Kazakhstan", dialCode: "+7" },
+  { code: "KE", name: "Kenya", dialCode: "+254" },
+  { code: "KI", name: "Kiribati", dialCode: "+686" },
+  { code: "KP", name: "Korea, Democratic People's Republic of", dialCode: "+850" },
+  { code: "KR", name: "Korea, Republic of", dialCode: "+82" },
+  { code: "KW", name: "Kuwait", dialCode: "+965" },
+  { code: "KG", name: "Kyrgyzstan", dialCode: "+996" },
+  { code: "LA", name: "Laos", dialCode: "+856" },
+  { code: "LV", name: "Latvia", dialCode: "+371" },
+  { code: "LB", name: "Lebanon", dialCode: "+961" },
+  { code: "LS", name: "Lesotho", dialCode: "+266" },
+  { code: "LR", name: "Liberia", dialCode: "+231" },
+  { code: "LY", name: "Libyan Arab Jamahiriya", dialCode: "+218" },
+  { code: "LI", name: "Liechtenstein", dialCode: "+423" },
+  { code: "LT", name: "Lithuania", dialCode: "+370" },
+  { code: "LU", name: "Luxembourg", dialCode: "+352" },
+  { code: "MO", name: "Macao", dialCode: "+853" },
+  { code: "MK", name: "Macedonia, the Former Yugoslav Republic of", dialCode: "+389" },
+  { code: "MG", name: "Madagascar", dialCode: "+261" },
+  { code: "MW", name: "Malawi", dialCode: "+265" },
+  { code: "MY", name: "Malaysia", dialCode: "+60" },
+  { code: "MV", name: "Maldives", dialCode: "+960" },
+  { code: "ML", name: "Mali", dialCode: "+223" },
+  { code: "MT", name: "Malta", dialCode: "+356" },
+  { code: "MH", name: "Marshall Islands", dialCode: "+692" },
+  { code: "MQ", name: "Martinique", dialCode: "+596" },
+  { code: "MR", name: "Mauritania", dialCode: "+222" },
+  { code: "MU", name: "Mauritius", dialCode: "+230" },
+  { code: "YT", name: "Mayotte", dialCode: "+262" },
+  { code: "MX", name: "Mexico", dialCode: "+52" },
+  { code: "FM", name: "Micronesia, Federated States of", dialCode: "+691" },
+  { code: "MD", name: "Moldova, Republic of", dialCode: "+373" },
+  { code: "MC", name: "Monaco", dialCode: "+377" },
+  { code: "MN", name: "Mongolia", dialCode: "+976" },
+  { code: "ME", name: "Montenegro", dialCode: "+382" },
+  { code: "MS", name: "Montserrat", dialCode: "+1664" },
+  { code: "MA", name: "Morocco", dialCode: "+212" },
+  { code: "MZ", name: "Mozambique", dialCode: "+258" },
+  { code: "MM", name: "Myanmar", dialCode: "+95" },
+  { code: "NA", name: "Namibia", dialCode: "+264" },
+  { code: "NR", name: "Nauru", dialCode: "+674" },
+  { code: "NP", name: "Nepal", dialCode: "+977" },
+  { code: "NL", name: "Netherlands", dialCode: "+31" },
+  { code: "NC", name: "New Caledonia", dialCode: "+687" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64" },
+  { code: "NI", name: "Nicaragua", dialCode: "+505" },
+  { code: "NE", name: "Niger", dialCode: "+227" },
+  { code: "NG", name: "Nigeria", dialCode: "+234" },
+  { code: "NU", name: "Niue", dialCode: "+683" },
+  { code: "NF", name: "Norfolk Island", dialCode: "+672" },
+  { code: "MP", name: "Northern Mariana Islands", dialCode: "+1670" },
+  { code: "NO", name: "Norway", dialCode: "+47" },
+  { code: "OM", name: "Oman", dialCode: "+968" },
+  { code: "PK", name: "Pakistan", dialCode: "+92" },
+  { code: "PW", name: "Palau", dialCode: "+680" },
+  { code: "PS", name: "Palestine", dialCode: "+970" },
+  { code: "PA", name: "Panama", dialCode: "+507" },
+  { code: "PG", name: "Papua New Guinea", dialCode: "+675" },
+  { code: "PY", name: "Paraguay", dialCode: "+595" },
+  { code: "PE", name: "Peru", dialCode: "+51" },
+  { code: "PH", name: "Philippines", dialCode: "+63" },
+  { code: "PN", name: "Pitcairn", dialCode: "+870" },
+  { code: "PL", name: "Poland", dialCode: "+48" },
+  { code: "PT", name: "Portugal", dialCode: "+351" },
+  { code: "PR", name: "Puerto Rico", dialCode: "+1939" },
+  { code: "QA", name: "Qatar", dialCode: "+974" },
+  { code: "RE", name: "Reunion", dialCode: "+262" },
+  { code: "RO", name: "Romania", dialCode: "+40" },
+  { code: "RU", name: "Russian Federation", dialCode: "+7" },
+  { code: "RW", name: "Rwanda", dialCode: "+250" },
+  { code: "BL", name: "Saint Barthelemy", dialCode: "+590" },
+  { code: "SH", name: "Saint Helena", dialCode: "+290" },
+  { code: "KN", name: "Saint Kitts and Nevis", dialCode: "+1869" },
+  { code: "LC", name: "Saint Lucia", dialCode: "+1758" },
+  { code: "MF", name: "Saint Martin", dialCode: "+590" },
+  { code: "PM", name: "Saint Pierre and Miquelon", dialCode: "+508" },
+  { code: "VC", name: "Saint Vincent and the Grenadines", dialCode: "+1784" },
+  { code: "WS", name: "Samoa", dialCode: "+685" },
+  { code: "SM", name: "San Marino", dialCode: "+378" },
+  { code: "ST", name: "Sao Tome and Principe", dialCode: "+239" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966" },
+  { code: "SN", name: "Senegal", dialCode: "+221" },
+  { code: "RS", name: "Serbia", dialCode: "+381" },
+  { code: "SC", name: "Seychelles", dialCode: "+248" },
+  { code: "SL", name: "Sierra Leone", dialCode: "+232" },
+  { code: "SG", name: "Singapore", dialCode: "+65" },
+  { code: "SK", name: "Slovakia", dialCode: "+421" },
+  { code: "SI", name: "Slovenia", dialCode: "+386" },
+  { code: "SB", name: "Solomon Islands", dialCode: "+677" },
+  { code: "SO", name: "Somalia", dialCode: "+252" },
+  { code: "ZA", name: "South Africa", dialCode: "+27" },
+  { code: "GS", name: "South Georgia and the South Sandwich Islands", dialCode: "+500" },
+  { code: "ES", name: "Spain", dialCode: "+34" },
+  { code: "LK", name: "Sri Lanka", dialCode: "+94" },
+  { code: "SD", name: "Sudan", dialCode: "+249" },
+  { code: "SR", name: "Suriname", dialCode: "+597" },
+  { code: "SJ", name: "Svalbard and Jan Mayen", dialCode: "+47" },
+  { code: "SZ", name: "Swaziland", dialCode: "+268" },
+  { code: "SE", name: "Sweden", dialCode: "+46" },
+  { code: "CH", name: "Switzerland", dialCode: "+41" },
+  { code: "SY", name: "Syrian Arab Republic", dialCode: "+963" },
+  { code: "TW", name: "Taiwan, Province of China", dialCode: "+886" },
+  { code: "TJ", name: "Tajikistan", dialCode: "+992" },
+  { code: "TZ", name: "Tanzania, United Republic of", dialCode: "+255" },
+  { code: "TH", name: "Thailand", dialCode: "+66" },
+  { code: "TL", name: "Timor-Leste", dialCode: "+670" },
+  { code: "TG", name: "Togo", dialCode: "+228" },
+  { code: "TK", name: "Tokelau", dialCode: "+690" },
+  { code: "TO", name: "Tonga", dialCode: "+676" },
+  { code: "TT", name: "Trinidad and Tobago", dialCode: "+1868" },
+  { code: "TN", name: "Tunisia", dialCode: "+216" },
+  { code: "TR", name: "Turkey", dialCode: "+90" },
+  { code: "TM", name: "Turkmenistan", dialCode: "+993" },
+  { code: "TC", name: "Turks and Caicos Islands", dialCode: "+1649" },
+  { code: "TV", name: "Tuvalu", dialCode: "+688" },
+  { code: "UG", name: "Uganda", dialCode: "+256" },
+  { code: "UA", name: "Ukraine", dialCode: "+380" },
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44" },
+  { code: "US", name: "United States", dialCode: "+1" },
+  { code: "UY", name: "Uruguay", dialCode: "+598" },
+  { code: "UZ", name: "Uzbekistan", dialCode: "+998" },
+  { code: "VU", name: "Vanuatu", dialCode: "+678" },
+  { code: "VE", name: "Venezuela", dialCode: "+58" },
+  { code: "VN", name: "Vietnam", dialCode: "+84" },
+  { code: "VG", name: "Virgin Islands, British", dialCode: "+1284" },
+  { code: "VI", name: "Virgin Islands, U.S.", dialCode: "+1340" },
+  { code: "WF", name: "Wallis and Futuna", dialCode: "+681" },
+  { code: "EH", name: "Western Sahara", dialCode: "+212" },
+  { code: "YE", name: "Yemen", dialCode: "+967" },
+  { code: "ZM", name: "Zambia", dialCode: "+260" },
+  { code: "ZW", name: "Zimbabwe", dialCode: "+263" }
+];
+
+// src/js/utils/flags.js
+var flagCache = {};
+var getFlag = async (code) => {
+  if (flagCache[code]) {
+    return flagCache[code];
+  }
+  try {
+    const flag = await import(`@idds/styles/assets/flags/${code.toLowerCase()}.svg`);
+    flagCache[code] = flag.default;
+    return flag.default;
+  } catch (error) {
+    console.error(`[IDDS PhoneInput] Failed to load flag for: ${code}`, error);
+    return "";
+  }
+};
+
+// src/js/components/stateful/phone-input.js
+var PhoneInput = class {
+  constructor(selectorOrElement, options = {}) {
+    this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
+    if (!this.container) {
+      console.warn("[IDDS PhoneInput] Container not found:", selectorOrElement);
+      return;
+    }
+    if (this.container.dataset.initialized === "true") {
+      return;
+    }
+    this.container.dataset.initialized = "true";
+    this.options = {
+      modelValue: this.container.dataset.value || "",
+      label: this.container.dataset.label || "",
+      placeholder: this.container.getAttribute("placeholder") || "812-3456-7890",
+      size: this.container.dataset.size || "md",
+      status: this.container.dataset.status || "neutral",
+      disabled: this.container.hasAttribute("disabled") || false,
+      readonly: this.container.hasAttribute("readonly") || false,
+      required: this.container.hasAttribute("required") || false,
+      defaultCountry: this.container.dataset.defaultCountry || "ID",
+      allowClear: this.container.dataset.allowClear !== "false",
+      countries: COUNTRIES,
+      onChange: null,
+      ...options
+    };
+    this.state = {
+      isOpen: false,
+      countrySearch: "",
+      selectedCountry: this.options.countries.find((c) => c.code === this.options.defaultCountry) || this.options.countries[0],
+      phoneNumber: ""
+    };
+    this.elements = {};
+    this.inputId = `phone-input-${Math.random().toString(36).substr(2, 9)}`;
+    this.init();
+  }
+  async init() {
+    this.initDOM();
+    this.initEvents();
+    this.syncValueFromOptions();
+    await this.updateFlag();
+  }
+  initDOM() {
+    if (this.options.label) {
+      const label = document.createElement("label");
+      label.className = `${PREFIX}-phone-input__label`;
+      label.setAttribute("for", this.inputId);
+      label.textContent = this.options.label;
+      if (this.options.required) {
+        const asterisk = document.createElement("span");
+        asterisk.className = `${PREFIX}-phone-input__required`;
+        asterisk.textContent = "*";
+        label.appendChild(asterisk);
+      }
+      this.container.appendChild(label);
+    }
+    const wrapper = document.createElement("div");
+    wrapper.className = `${PREFIX}-phone-input__wrapper ${PREFIX}-phone-input__wrapper--size-${this.options.size}`;
+    if (this.options.status !== "neutral") {
+      wrapper.classList.add(`${PREFIX}-phone-input__wrapper--status-${this.options.status}`);
+    }
+    if (this.options.disabled) {
+      wrapper.classList.add(`${PREFIX}-phone-input__wrapper--disabled`);
+    }
+    const selector = document.createElement("div");
+    selector.className = `${PREFIX}-phone-input__country-selector`;
+    const countryBtn = document.createElement("button");
+    countryBtn.type = "button";
+    countryBtn.className = `${PREFIX}-phone-input__country-button`;
+    countryBtn.setAttribute("aria-label", "Pilih negara");
+    countryBtn.setAttribute("aria-haspopup", "listbox");
+    countryBtn.setAttribute("aria-expanded", "false");
+    if (this.options.disabled || this.options.readonly) countryBtn.disabled = true;
+    const flagImg = document.createElement("img");
+    flagImg.className = `${PREFIX}-phone-input__country-flag-img`;
+    flagImg.width = 24;
+    flagImg.height = 18;
+    flagImg.alt = "";
+    const dialCode = document.createElement("span");
+    dialCode.className = `${PREFIX}-phone-input__country-code`;
+    dialCode.textContent = this.state.selectedCountry.dialCode;
+    const chevron = document.createElement("div");
+    chevron.innerHTML = `<svg class="${PREFIX}-phone-input__country-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`;
+    countryBtn.appendChild(flagImg);
+    countryBtn.appendChild(dialCode);
+    countryBtn.appendChild(chevron.firstChild);
+    selector.appendChild(countryBtn);
+    wrapper.appendChild(selector);
+    const divider = document.createElement("div");
+    divider.className = `${PREFIX}-phone-input__divider`;
+    wrapper.appendChild(divider);
+    const input = document.createElement("input");
+    input.type = "tel";
+    input.id = this.inputId;
+    input.placeholder = this.options.placeholder;
+    input.className = `${PREFIX}-phone-input__input`;
+    if (this.options.disabled) input.disabled = true;
+    if (this.options.readonly) input.readOnly = true;
+    wrapper.appendChild(input);
+    if (this.options.allowClear) {
+      const clearBtn = document.createElement("button");
+      clearBtn.type = "button";
+      clearBtn.className = `${PREFIX}-phone-input__clear-button`;
+      clearBtn.setAttribute("aria-label", "Hapus nomor telepon");
+      clearBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>`;
+      clearBtn.style.display = "none";
+      wrapper.appendChild(clearBtn);
+      this.elements.clearBtn = clearBtn;
+    }
+    this.container.appendChild(wrapper);
+    const panel = document.createElement("div");
+    panel.className = `${PREFIX}-phone-input__country-dropdown`;
+    panel.style.display = "none";
+    const searchDiv = document.createElement("div");
+    searchDiv.className = `${PREFIX}-phone-input__country-search`;
+    const searchInput = document.createElement("input");
+    searchInput.type = "text";
+    searchInput.placeholder = "Cari";
+    searchInput.className = `${PREFIX}-phone-input__country-search-input`;
+    searchDiv.appendChild(searchInput);
+    panel.appendChild(searchDiv);
+    const list = document.createElement("div");
+    list.className = `${PREFIX}-phone-input__country-list`;
+    list.setAttribute("role", "listbox");
+    panel.appendChild(list);
+    selector.appendChild(panel);
+    this.elements.wrapper = wrapper;
+    this.elements.countryBtn = countryBtn;
+    this.elements.flagImg = flagImg;
+    this.elements.dialCode = dialCode;
+    this.elements.input = input;
+    this.elements.panel = panel;
+    this.elements.searchInput = searchInput;
+    this.elements.list = list;
+    this.elements.chevron = selector.querySelector(`.${PREFIX}-phone-input__country-chevron`);
+  }
+  initEvents() {
+    this.elements.countryBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleDropdown();
+    });
+    this.elements.searchInput.addEventListener("input", (e) => {
+      this.state.countrySearch = e.target.value;
+      this.renderCountryList();
+    });
+    this.elements.input.addEventListener("input", (e) => {
+      this.handleInput(e);
+    });
+    if (this.elements.clearBtn) {
+      this.elements.clearBtn.addEventListener("click", () => {
+        this.clear();
+      });
+      this.elements.clearBtn.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.clear();
+        }
+      });
+    }
+    document.addEventListener("click", (e) => {
+      if (!this.elements.wrapper.contains(e.target)) {
+        this.closeDropdown();
+      }
+    });
+  }
+  async updateFlag() {
+    const url = await getFlag(this.state.selectedCountry.code);
+    this.elements.flagImg.src = url;
+    this.elements.flagImg.alt = this.state.selectedCountry.name;
+    this.elements.dialCode.textContent = this.state.selectedCountry.dialCode;
+  }
+  toggleDropdown() {
+    if (this.state.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  }
+  openDropdown() {
+    this.state.isOpen = true;
+    this.elements.panel.style.display = "flex";
+    this.elements.countryBtn.setAttribute("aria-expanded", "true");
+    this.elements.chevron.classList.add(`${PREFIX}-phone-input__country-chevron--open`);
+    this.state.countrySearch = "";
+    this.elements.searchInput.value = "";
+    this.renderCountryList();
+    setTimeout(() => this.elements.searchInput.focus(), 0);
+  }
+  closeDropdown() {
+    this.state.isOpen = false;
+    this.elements.panel.style.display = "none";
+    this.elements.countryBtn.setAttribute("aria-expanded", "false");
+    this.elements.chevron.classList.remove(`${PREFIX}-phone-input__country-chevron--open`);
+  }
+  renderCountryList() {
+    const list = this.elements.list;
+    list.innerHTML = "";
+    const filtered = this.options.countries.filter(
+      (c) => c.name.toLowerCase().includes(this.state.countrySearch.toLowerCase()) || c.dialCode.includes(this.state.countrySearch) || c.code.toLowerCase().includes(this.state.countrySearch.toLowerCase())
+    );
+    filtered.forEach(async (country) => {
+      const option = document.createElement("button");
+      option.type = "button";
+      option.className = `${PREFIX}-phone-input__country-option`;
+      if (country.code === this.state.selectedCountry.code) {
+        option.classList.add(`${PREFIX}-phone-input__country-option--selected`);
+      }
+      option.setAttribute("role", "option");
+      option.setAttribute("aria-selected", country.code === this.state.selectedCountry.code ? "true" : "false");
+      const flag = document.createElement("img");
+      flag.className = `${PREFIX}-phone-input__country-flag-img`;
+      flag.width = 20;
+      flag.height = 15;
+      getFlag(country.code).then((url) => flag.src = url);
+      const name = document.createElement("span");
+      name.className = `${PREFIX}-phone-input__country-name`;
+      name.textContent = `${country.name} (${country.code})`;
+      const code = document.createElement("span");
+      code.className = `${PREFIX}-phone-input__country-dial-code`;
+      code.textContent = country.dialCode;
+      option.appendChild(flag);
+      option.appendChild(name);
+      option.appendChild(code);
+      option.addEventListener("click", () => {
+        this.selectCountry(country);
+      });
+      list.appendChild(option);
+    });
+  }
+  selectCountry(country) {
+    this.state.selectedCountry = country;
+    this.updateFlag();
+    this.closeDropdown();
+    this.elements.input.focus();
+    this.triggerChange();
+  }
+  formatPhoneNumber(value) {
+    const clean = value.replace(/\D/g, "");
+    if (clean.length > 7) {
+      return clean.replace(/^(\d{3})(\d{4})(.*)/, "$1-$2-$3");
+    } else if (clean.length > 3) {
+      return clean.replace(/^(\d{3})(.*)/, "$1-$2");
+    }
+    return clean;
+  }
+  handleInput(e) {
+    const value = e.target.value;
+    const formatted = this.formatPhoneNumber(value);
+    e.target.value = formatted;
+    this.state.phoneNumber = formatted;
+    if (this.elements.clearBtn) {
+      this.elements.clearBtn.style.display = formatted ? "flex" : "none";
+    }
+    this.triggerChange();
+  }
+  clear() {
+    this.state.phoneNumber = "";
+    this.elements.input.value = "";
+    if (this.elements.clearBtn) {
+      this.elements.clearBtn.style.display = "none";
+    }
+    this.elements.input.focus();
+    this.triggerChange();
+  }
+  syncValueFromOptions() {
+    if (this.options.modelValue) {
+      let val = this.options.modelValue;
+      const dial = this.state.selectedCountry.dialCode;
+      if (val.startsWith(dial)) {
+        val = val.substring(dial.length);
+      }
+      this.state.phoneNumber = this.formatPhoneNumber(val);
+      this.elements.input.value = this.state.phoneNumber;
+      if (this.elements.clearBtn && this.state.phoneNumber) {
+        this.elements.clearBtn.style.display = "flex";
+      }
+    }
+  }
+  triggerChange() {
+    const cleanLocal = this.state.phoneNumber.replace(/\D/g, "");
+    const cleanNoZero = cleanLocal.startsWith("0") ? cleanLocal.substring(1) : cleanLocal;
+    const fullValue = `${this.state.selectedCountry.dialCode}${cleanNoZero}`;
+    if (this.options.onChange) {
+      this.options.onChange(fullValue);
+    }
+    this.container.dispatchEvent(new CustomEvent("change", {
+      detail: { value: fullValue, country: this.state.selectedCountry }
+    }));
+  }
+};
+function initPhoneInput(selectorOrElement, options = {}) {
+  const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-phone-input`);
+  const instances = [];
+  elements.forEach((container) => {
+    const instance = new PhoneInput(container, options);
+    container.__phoneInputAPI = instance;
+    instances.push(instance);
+  });
+  if (instances.length === 0) return null;
+  return instances.length === 1 ? instances[0] : instances;
+}
+
 // src/js/components/stateful/tab-vertical.js
 function initTabVertical() {
   const tabs = document.querySelectorAll(`.${PREFIX}-tab-vertical`);
@@ -3708,7 +4141,7 @@ function initTabHorizontal() {
 
 // src/js/components/stateful/table.js
 var Table = class {
-  constructor(selectorOrElement, options2 = {}) {
+  constructor(selectorOrElement, options = {}) {
     this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
     if (!this.container) {
       console.warn("[IDDS Table] Container not found:", selectorOrElement);
@@ -3740,7 +4173,7 @@ var Table = class {
       searchContainer: null,
       searchButton: null,
       onSearch: null,
-      ...options2
+      ...options
     };
     this.state = {
       currentPage: this.options.initialPage,
@@ -3859,34 +4292,43 @@ var Table = class {
       if (col.sortable && col.accessor) {
         th.classList.add(`${PREFIX}-table__header-cell--sortable`);
         th.setAttribute("data-sort", col.accessor);
+        let sortLabel = `Urutkan ${col.header}`;
+        let currentSort = "none";
+        if (this.state.sortField === field) {
+          currentSort = this.state.sortOrder === "asc" ? "ascending" : "descending";
+        }
+        th.setAttribute("aria-sort", currentSort);
         let sortControlsHtml = `
           <div class="${PREFIX}-table__sort-controls">
             ${col.header}
             <div class="${PREFIX}-table__sort-icon">
-              <div class="${PREFIX}-table__sort-button" data-order="asc">
+              <div class="${PREFIX}-table__sort-button" data-order="asc" role="button" aria-label="Urutkan ${col.header} menaik">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 9l-4 -4" /><path d="M8 9l4 -4" /></svg>
               </div>
-              <div class="${PREFIX}-table__sort-button ${PREFIX}-table__sort-button-right" data-order="desc">
+              <div class="${PREFIX}-table__sort-button ${PREFIX}-table__sort-button-right" data-order="desc" role="button" aria-label="Urutkan ${col.header} menurun">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 15l-4 4" /><path d="M8 15l4 4" /></svg>
               </div>
             </div>
           </div>
         `;
         th.innerHTML = sortControlsHtml;
+        const ascBtn = th.querySelector('[data-order="asc"]');
+        const descBtn = th.querySelector('[data-order="desc"]');
+        ascBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.handleHeaderSort(col, "asc");
+        });
+        descBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.handleHeaderSort(col, "desc");
+        });
         th.addEventListener("click", () => {
-          const field = col.accessor;
+          let nextOrder = "asc";
           if (this.state.sortField === field) {
-            if (this.state.sortOrder === "asc") this.state.sortOrder = "desc";
-            else {
-              this.state.sortField = null;
-              this.state.sortOrder = null;
-            }
-          } else {
-            this.state.sortField = field;
-            this.state.sortOrder = "asc";
+            if (this.state.sortOrder === "asc") nextOrder = "desc";
+            else nextOrder = null;
           }
-          this.state.currentPage = 1;
-          this.loadData();
+          this.handleHeaderSort(col, nextOrder);
         });
       } else {
         th.textContent = col.header;
@@ -3945,7 +4387,7 @@ var Table = class {
       this.updateSelectAllState();
       return;
     }
-    rowData.forEach((row, index2) => {
+    rowData.forEach((row, index) => {
       const tr = document.createElement("tr");
       tr.className = `${PREFIX}-table__row`;
       if (this.options.rowClickable) {
@@ -3956,11 +4398,11 @@ var Table = class {
             return;
           }
           if (typeof this.options.onRowClick === "function") {
-            this.options.onRowClick(row, index2);
+            this.options.onRowClick(row, index);
           }
         });
       }
-      const rowKeyStr = String(row[this.options.rowKey] || index2);
+      const rowKeyStr = String(row[this.options.rowKey] || index);
       if (this.options.selectable) {
         const td = document.createElement("td");
         td.className = `${PREFIX}-table__cell`;
@@ -3986,7 +4428,7 @@ var Table = class {
         const td = document.createElement("td");
         td.className = `${PREFIX}-table__cell`;
         if (typeof col.render === "function") {
-          const content = col.render(row, index2);
+          const content = col.render(row, index);
           if (typeof content === "string") {
             td.innerHTML = content;
           } else if (content instanceof HTMLElement) {
@@ -4132,6 +4574,13 @@ var Table = class {
       }
     );
   }
+  handleHeaderSort(col, order) {
+    const field2 = col.accessor;
+    this.state.sortField = field2 ? order === null ? null : field2 : null;
+    this.state.sortOrder = order;
+    this.state.currentPage = 1;
+    this.loadData();
+  }
   updateSortIndicators() {
     const btns = this.elements.theadTr.querySelectorAll(
       `.${PREFIX}-table__sort-button`
@@ -4139,10 +4588,15 @@ var Table = class {
     btns.forEach((btn) => {
       const th = btn.closest("th");
       if (!th) return;
-      const field = th.getAttribute("data-sort");
+      const field2 = th.getAttribute("data-sort");
       const order = btn.getAttribute("data-order");
-      const active = this.state.sortField === field && this.state.sortOrder === order;
+      const active = this.state.sortField === field2 && this.state.sortOrder === order;
       btn.classList.toggle(`${PREFIX}-table__sort-button--active`, active);
+      let currentSort = "none";
+      if (this.state.sortField === field2) {
+        currentSort = this.state.sortOrder === "asc" ? "ascending" : "descending";
+      }
+      th.setAttribute("aria-sort", currentSort);
     });
   }
   async loadData() {
@@ -4220,8 +4674,8 @@ var Table = class {
     this.triggerSelectionChange();
   }
   toggleAllSelection(checked) {
-    this.state.currentData.forEach((row, index2) => {
-      const keyStr = String(row[this.options.rowKey] || index2);
+    this.state.currentData.forEach((row, index) => {
+      const keyStr = String(row[this.options.rowKey] || index);
       if (checked) {
         this.state.selectedKeys.add(keyStr);
         this.state.selectedRows.set(keyStr, row);
@@ -4302,11 +4756,11 @@ var Table = class {
     };
   }
 };
-function initTable(selectorOrElement, options2 = {}) {
+function initTable(selectorOrElement, options = {}) {
   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, options2);
+    const instance = new Table(container, options);
     container.__tableAPI = instance;
     instances.push(instance);
   });
@@ -4340,17 +4794,17 @@ function initMonthPicker(rootSelector = `.${PREFIX}-month-picker`) {
     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(
+    const options = grid ? Array.from(
       grid.querySelectorAll(`.${PREFIX}-month-picker__month-option`)
     ) : [];
-    if (!trigger || !panel || !grid || options2.length === 0) return;
+    if (!trigger || !panel || !grid || options.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) => {
+      options.forEach((opt, idx) => {
         if (idx === currentMonthIdx) {
           opt.classList.add(`${PREFIX}-month-picker__month-option--selected`);
           opt.setAttribute("aria-selected", "true");
@@ -4371,7 +4825,7 @@ function initMonthPicker(rootSelector = `.${PREFIX}-month-picker`) {
         panel.classList.add(`${PREFIX}-month-picker__panel--open`);
         trigger.setAttribute("aria-expanded", "true");
         setTimeout(() => {
-          const selectedOpt = options2.find((o) => o.tabIndex === 0);
+          const selectedOpt = options.find((o) => o.tabIndex === 0);
           if (selectedOpt) selectedOpt.focus();
         }, 0);
       } else {
@@ -4395,7 +4849,7 @@ function initMonthPicker(rootSelector = `.${PREFIX}-month-picker`) {
     document.addEventListener("click", (e) => {
       if (!container.contains(e.target)) togglePicker(false);
     });
-    options2.forEach((btn, idx) => {
+    options.forEach((btn, idx) => {
       btn.setAttribute("role", "option");
       btn.addEventListener("click", (e) => {
         if (disabled || readonly) return;
@@ -4438,8 +4892,8 @@ function initMonthPicker(rootSelector = `.${PREFIX}-month-picker`) {
           else if (e.key === "ArrowDown")
             nextIndex += 3;
           else if (e.key === "ArrowUp") nextIndex -= 3;
-          if (options2[nextIndex]) {
-            options2[nextIndex].focus();
+          if (options[nextIndex]) {
+            options[nextIndex].focus();
           }
         }
       });
@@ -4540,12 +4994,12 @@ function initYearPicker(rootSelector = `.${PREFIX}-year-picker`) {
           } else if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(e.key)) {
             e.preventDefault();
             e.stopPropagation();
-            const options2 = Array.from(
+            const options = Array.from(
               grid.querySelectorAll(
                 `.${PREFIX}-year-picker__year-option:not(:disabled)`
               )
             );
-            const currentIndex = options2.indexOf(btn);
+            const currentIndex = options.indexOf(btn);
             if (currentIndex === -1) return;
             let nextIndex = currentIndex;
             if (e.key === "ArrowRight") nextIndex += 1;
@@ -4553,8 +5007,8 @@ function initYearPicker(rootSelector = `.${PREFIX}-year-picker`) {
             else if (e.key === "ArrowDown")
               nextIndex += 4;
             else if (e.key === "ArrowUp") nextIndex -= 4;
-            if (options2[nextIndex]) {
-              options2[nextIndex].focus();
+            if (options[nextIndex]) {
+              options[nextIndex].focus();
             } else {
             }
           }
@@ -4681,7 +5135,7 @@ function createToastElement({ title, message, state, style, actionHtml }) {
   return { toastItem, toast };
 }
 function showToast(optionsOrMessage, variant = "default", duration = 5e3) {
-  const options2 = typeof optionsOrMessage === "string" ? {
+  const options = typeof optionsOrMessage === "string" ? {
     message: optionsOrMessage,
     state: variant,
     duration
@@ -4694,7 +5148,7 @@ function showToast(optionsOrMessage, variant = "default", duration = 5e3) {
     duration: autoCloseDuration = 5e3,
     position = "top-right",
     actionHtml = ""
-  } = options2;
+  } = options;
   const container = getOrCreateContainer(position);
   const { toastItem, toast } = createToastElement({
     title,
@@ -4755,7 +5209,6 @@ function setBrandTheme(brandName) {
 var PREFIX = "ina";
 function initAll() {
   initAccordion();
-  initBanner();
   initButtonGroup();
   initCheckbox();
   initDatepicker();
@@ -4776,6 +5229,7 @@ function initAll() {
   initTab();
   initToggle();
   initPagination();
+  initPhoneInput();
   initChip();
   initTabVertical();
   initTabHorizontal();
@@ -4786,6 +5240,7 @@ function initAll() {
 export {
   DatePicker,
   PREFIX,
+  PhoneInput,
   Table,
   TimePicker,
   initAll,