@codbex/harmonia 1.3.0 → 1.4.0

package/dist/harmonia.esm.js

@@ -6543,7 +6543,7 @@ function popover_default(Alpine) {
     if (!popover) {
       throw new Error(`${original} must be placed after a popover element`);
     }
-    el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "top-0", "left-0", "z-50", "min-w-[1rem]", "rounded-md", "border", "shadow-md", "outline-hidden", "overflow-scroll");
+    el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "top-0", "left-0", "z-50", "min-w-[1rem]", "rounded-md", "border", "shadow-md", "outline-hidden", "overflow-auto");
     el.setAttribute("data-slot", "popover");
     el.setAttribute("role", "dialog");
     el.setAttribute("tabindex", "-1");
@@ -6696,7 +6696,8 @@ var FilterType = Object.freeze({
 function select_default(Alpine) {
   Alpine.directive("h-select", (el, { modifiers }, { Alpine: Alpine2, cleanup }) => {
     el._h_select = Alpine2.reactive({
-      id: void 0,
+      fieldLabelId: void 0,
+      trigger: void 0,
       controls: `hsc${v4_default()}`,
       expanded: false,
       multiple: false,
@@ -6745,9 +6746,16 @@ function select_default(Alpine) {
   });
   Alpine.directive("h-select-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "INPUT") {
-      throw new Error(`${original} must be a readonly input of type "text"`);
+      throw new Error(`${original} must be an input of type "text"`);
     }
     const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
+    const label = (() => {
+      const field = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "field");
+      if (field) {
+        return field.querySelector("[data-slot=field-label]");
+      }
+      return;
+    })();
     if (!select) {
       throw new Error(`${original} must be inside a select element`);
     } else if (el.hasOwnProperty("_x_model")) {
@@ -6787,6 +6795,19 @@ function select_default(Alpine) {
     fakeTrigger.setAttribute("data-slot", "select-value");
     fakeTrigger.setAttribute("tabindex", "0");
     fakeTrigger.classList.add("flex", "items-center", "justify-between", "gap-2", "outline-none", "pl-3", "pr-2", "size-full", "[&[data-state=open]>svg]:rotate-180");
+    select._h_select.trigger = fakeTrigger;
+    let labelObserver;
+    if (label) {
+      if (!label.hasAttribute("id")) {
+        label.setAttribute("id", `hsil${v4_default()}`);
+      }
+      select._h_select.fieldLabelId = label.getAttribute("id");
+      fakeTrigger.setAttribute("aria-labelledby", label.getAttribute("id"));
+      labelObserver = new MutationObserver(() => {
+        select._h_select.fieldLabelId = label.getAttribute("id");
+      });
+      labelObserver.observe(label, { attributes: true, attributeFilter: ["id"] });
+    }
     function getPlaceholder() {
       if (!el.value) {
         const value = el.getAttribute("placeholder");
@@ -6799,17 +6820,10 @@ function select_default(Alpine) {
       }
     }
     getPlaceholder();
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.attributeName === "data-id") {
-          select._h_select.id = el.getAttribute("data-id");
-          fakeTrigger.setAttribute("id", select._h_select.id);
-        } else if (mutation.attributeName === "placeholder" && !select._h_select.label.length) {
-          getPlaceholder();
-        }
-      });
+    const observer = new MutationObserver(() => {
+      getPlaceholder();
     });
-    observer.observe(el, { attributes: true, attributeFilter: ["data-id", "placeholder"] });
+    observer.observe(el, { attributes: true, attributeFilter: ["placeholder"] });
     effect(() => {
       if (select._h_select.label.length === 1) {
         displayValue.innerText = select._h_select.label[0];
@@ -6822,8 +6836,6 @@ function select_default(Alpine) {
       }
     });
     fakeTrigger.setAttribute("data-slot", "select-input");
-    select._h_select.id = el.hasAttribute("data-id") ? el.getAttribute("data-id") : `hs${v4_default()}`;
-    fakeTrigger.setAttribute("id", select._h_select.id);
     fakeTrigger.setAttribute("aria-controls", select._h_select.controls);
     fakeTrigger.setAttribute("aria-haspopup", "listbox");
     fakeTrigger.setAttribute("aria-autocomplete", "none");
@@ -6985,9 +6997,9 @@ function select_default(Alpine) {
     const onInputChange = () => {
       select._h_select.label.length = 0;
       for (let i = 0; i < select._h_select.listeners.length; i++) {
-        const label = select._h_select.listeners[i](select._h_model.get());
-        if (label) {
-          select._h_select.label.push(label);
+        const label2 = select._h_select.listeners[i](select._h_model.get());
+        if (label2) {
+          select._h_select.label.push(label2);
         }
       }
     };
@@ -7000,6 +7012,9 @@ function select_default(Alpine) {
       top.removeEventListener("click", close);
       el.removeEventListener("change", onInputChange);
       observer.disconnect();
+      if (labelObserver) {
+        labelObserver.disconnect();
+      }
     });
   });
   Alpine.directive("h-select-content", (el, { original }, { effect, Alpine: Alpine2 }) => {
@@ -7010,17 +7025,15 @@ function select_default(Alpine) {
     el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "p-1", "top-0", "left-0", "z-50", "min-w-[1rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "border", "shadow-md");
     el.setAttribute("data-slot", "select-content");
     el.setAttribute("role", "listbox");
-    el.setAttribute("role", "presentation");
     el.setAttribute("id", select._h_select.controls);
     el.setAttribute("tabindex", "-1");
     el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
-    const control = select.querySelector(`#${select._h_select.id}`);
-    if (!control) {
+    if (!select._h_select.trigger) {
       throw new Error(`${original}: trigger not found`);
     }
     let autoUpdateCleanup;
     function updatePosition() {
-      computePosition2(control, el, {
+      computePosition2(select._h_select.trigger, el, {
         placement: el.getAttribute("data-align") || "bottom-start",
         middleware: [
           offset2(4),
@@ -7043,12 +7056,12 @@ function select_default(Alpine) {
       });
     }
     effect(() => {
-      el.setAttribute("aria-labelledby", select._h_select.id);
+      el.setAttribute("aria-labelledby", select._h_select.fieldLabelId);
     });
     effect(() => {
       el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
       if (select._h_select.expanded) {
-        autoUpdateCleanup = autoUpdate(control, el, updatePosition);
+        autoUpdateCleanup = autoUpdate(select._h_select.trigger, el, updatePosition);
       } else {
         if (autoUpdateCleanup) autoUpdateCleanup();
         Object.assign(el.style, {
@@ -9302,7 +9315,7 @@ function timepicker_default(Alpine) {
     timeContainer.addEventListener("click", setTime);
     el.appendChild(timeContainer);
     const hoursList = document.createElement("ul");
-    hoursList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
+    hoursList.classList.add("flex-1", "overflow-y-auto", "[scrollbar-width:thin]");
     hoursList.setAttribute("role", "listbox");
     hoursList.setAttribute("tabindex", "-1");
     hoursList.setAttribute("aria-label", el.dataset.labelHours ?? "Select hour");
@@ -9319,7 +9332,7 @@ function timepicker_default(Alpine) {
       hoursList.appendChild(hour);
     }
     const minutesList = document.createElement("ul");
-    minutesList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
+    minutesList.classList.add("flex-1", "overflow-y-auto", "[scrollbar-width:thin]");
     minutesList.setAttribute("role", "listbox");
     minutesList.setAttribute("tabindex", "-1");
     minutesList.setAttribute("aria-label", el.dataset.labelMinutes ?? "Select minute");
@@ -9336,7 +9349,7 @@ function timepicker_default(Alpine) {
       minutesList.appendChild(minute);
     }
     const secondsList = document.createElement("ul");
-    secondsList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
+    secondsList.classList.add("flex-1", "overflow-y-auto", "[scrollbar-width:thin]");
     if (!timepicker._h_timepicker.seconds) {
       secondsList.classList.add("hidden");
     }
@@ -9356,7 +9369,7 @@ function timepicker_default(Alpine) {
       secondsList.appendChild(second);
     }
     const periodList = document.createElement("ul");
-    periodList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
+    periodList.classList.add("flex-1", "overflow-y-auto", "[scrollbar-width:thin]");
     if (!timepicker._h_timepicker.is12Hour) {
       periodList.classList.add("hidden");
     }
@@ -9914,7 +9927,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.3.0";
+var version = "1.4.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {