@codbex/harmonia 1.3.0 → 1.4.0

package/dist/harmonia.js

@@ -4637,7 +4637,7 @@
       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");
@@ -6649,7 +6649,8 @@
   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,
@@ -6698,9 +6699,16 @@
     });
     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")) {
@@ -6740,6 +6748,19 @@
       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");
@@ -6752,17 +6773,10 @@
         }
       }
       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];
@@ -6775,8 +6789,6 @@
         }
       });
       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");
@@ -6938,9 +6950,9 @@
       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);
           }
         }
       };
@@ -6953,6 +6965,9 @@
         top.removeEventListener("click", close);
         el.removeEventListener("change", onInputChange);
         observer.disconnect();
+        if (labelObserver) {
+          labelObserver.disconnect();
+        }
       });
     });
     Alpine.directive("h-select-content", (el, { original }, { effect, Alpine: Alpine2 }) => {
@@ -6963,17 +6978,15 @@
       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),
@@ -6996,12 +7009,12 @@
         });
       }
       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, {
@@ -9255,7 +9268,7 @@
       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");
@@ -9272,7 +9285,7 @@
         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");
@@ -9289,7 +9302,7 @@
         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");
       }
@@ -9309,7 +9322,7 @@
         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");
       }
@@ -9991,7 +10004,7 @@
   }
 
   // package.json
-  var version = "1.3.0";
+  var version = "1.4.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };