@codbex/harmonia 1.1.2 → 1.2.1

package/dist/harmonia.js

@@ -65,6 +65,8 @@
   var Clock = 7;
   var Search = 8;
   var Ellipsis = 9;
+  var Minus = 10;
+  var Plus = 11;
   function setCalendarContent(svg) {
     const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
     path.setAttributeNS(
@@ -177,6 +179,20 @@
     circle3.setAttributeNS(null, "r", "1.5");
     svg.appendChild(circle3);
   }
+  function setMinusContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(null, "d", "m2.75 7.25h10.5c0.4155 0 0.75 0.3345 0.75 0.75s-0.3345 0.75-0.75 0.75h-10.5c-0.4155 0-0.75-0.3345-0.75-0.75s0.3345-0.75 0.75-0.75z");
+    svg.appendChild(path);
+  }
+  function setPlusContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m8 2c-0.4155 0-0.75 0.3345-0.75 0.75v4.5h-4.5c-0.4155 0-0.75 0.3345-0.75 0.75s0.3345 0.75 0.75 0.75h4.5v4.5c0 0.4155 0.3345 0.75 0.75 0.75s0.75-0.3345 0.75-0.75v-4.5h4.5c0.4155 0 0.75-0.3345 0.75-0.75s-0.3345-0.75-0.75-0.75h-4.5v-4.5c0-0.4155-0.3345-0.75-0.75-0.75z"
+    );
+    svg.appendChild(path);
+  }
   function createSvg({ icon, classes = "size-4", attrs } = {}) {
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.setAttributeNS(null, "width", "16");
@@ -220,9 +236,64 @@
       case Ellipsis:
         setEllipsisContent(svg);
         break;
+      case Minus:
+        setMinusContent(svg);
+        break;
+      case Plus:
+        setPlusContent(svg);
+        break;
+      default:
+        break;
     }
     return svg;
   }
+  function setSvgContent(svg, icon) {
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svg.setAttribute("width", "16");
+    svg.setAttribute("height", "16");
+    svg.setAttribute("viewBox", "0 0 16 16");
+    svg.setAttribute("fill", "currentColor");
+    switch (icon) {
+      case "calendar":
+        setCalendarContent(svg);
+        break;
+      case "check":
+        setCheckContent(svg);
+        break;
+      case "chevron-down":
+        setChevronDownContent(svg);
+        break;
+      case "chevron-left":
+        setChevronLeftContent(svg);
+        break;
+      case "chevron-right":
+        setChevronRightContent(svg);
+        break;
+      case "chevrons-left":
+        setChevronsLeftContent(svg);
+        break;
+      case "chevrons-right":
+        setChevronsRightContent(svg);
+        break;
+      case "clock":
+        setClockContent(svg);
+        break;
+      case "search":
+        setSearchContent(svg);
+        break;
+      case "ellipsis":
+        setEllipsisContent(svg);
+        break;
+      case "minus":
+        setMinusContent(svg);
+        break;
+      case "plus":
+        setPlusContent(svg);
+        break;
+      default:
+        break;
+    }
+  }
 
   // src/components/accordion.js
   function accordion_default(Alpine) {
@@ -233,10 +304,10 @@
       }) : { single: false };
       el.setAttribute("data-slot", "accordion");
     });
-    Alpine.directive("h-accordion-item", (el, { original, expression, modifiers }, { effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-accordion-item", (el, { original: original2, expression, modifiers }, { effect, Alpine: Alpine2 }) => {
       const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
       if (!accordion) {
-        throw new Error(`${original} must be inside an accordion`);
+        throw new Error(`${original2} must be inside an accordion`);
       }
       el.classList.add("border-b", "last:border-b-0", "[[data-variant=header]_&]:data-[state=closed]:border-b-0");
       el.setAttribute("data-slot", "accordion-item");
@@ -264,14 +335,14 @@
       setAttributes();
       effect(setAttributes);
     });
-    Alpine.directive("h-accordion-trigger", (el, { original, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-accordion-trigger", (el, { original: original2, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
       if (el.tagName.length !== 2 && !el.tagName.startsWith("H")) {
-        throw new Error(`${original} must be a header element`);
+        throw new Error(`${original2} must be a header element`);
       }
       const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
       const accordionItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordionItem"));
       if (!accordionItem || !accordion) {
-        throw new Error(`${original} must have an accordion and accordion item parent elements`);
+        throw new Error(`${original2} must have an accordion and accordion item parent elements`);
       }
       el.classList.add(
         "flex",
@@ -456,10 +527,10 @@
         el.classList.add("cursor-pointer", "hover:bg-secondary-hover", "active:bg-secondary-active");
       }
     });
-    Alpine.directive("h-avatar-image", (el, { original }, { cleanup }) => {
+    Alpine.directive("h-avatar-image", (el, { original: original2 }, { cleanup }) => {
       const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
       if (!avatar) {
-        throw new Error(`${original} must be inside an h-avatar element`);
+        throw new Error(`${original2} must be inside an avatar element`);
       }
       el.classList.add("aspect-square", "size-full");
       el.setAttribute("data-slot", "avatar-image");
@@ -490,10 +561,10 @@
         observer.disconnect();
       });
     });
-    Alpine.directive("h-avatar-fallback", (el, { original }, { effect }) => {
+    Alpine.directive("h-avatar-fallback", (el, { original: original2 }, { effect }) => {
       const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
       if (!avatar) {
-        throw new Error(`${original} must be inside an h-avatar element`);
+        throw new Error(`${original2} must be inside an avatar element`);
       }
       el.classList.add("hidden", "bg-muted", "flex", "size-full", "items-center", "justify-center");
       el.setAttribute("data-slot", "avatar-fallback");
@@ -702,7 +773,7 @@
     }
   };
   function button_default(Alpine) {
-    Alpine.directive("h-button", (el, { original, modifiers }, { cleanup }) => {
+    Alpine.directive("h-button", (el, { original: original2, modifiers }, { cleanup }) => {
       setButtonClasses(el);
       if (!el.hasAttribute("data-slot")) {
         el.setAttribute("data-slot", "button");
@@ -719,7 +790,7 @@
         el.classList.remove(...getButtonSize(lastSize, isAddon));
         el.classList.add(...getButtonSize(size3, isAddon));
         if (size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-          console.error(`${original}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
+          console.error(`${original2}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
         }
         lastSize = size3;
       }
@@ -970,6 +1041,62 @@
     }
     return coords;
   }
+  async function detectOverflow(state, options) {
+    var _await$platform$isEle;
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      x,
+      y,
+      platform: platform2,
+      rects,
+      elements,
+      strategy
+    } = state;
+    const {
+      boundary = "clippingAncestors",
+      rootBoundary = "viewport",
+      elementContext = "floating",
+      altBoundary = false,
+      padding = 0
+    } = evaluate(options, state);
+    const paddingObject = getPaddingObject(padding);
+    const altContext = elementContext === "floating" ? "reference" : "floating";
+    const element = elements[altBoundary ? altContext : elementContext];
+    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+      boundary,
+      rootBoundary,
+      strategy
+    }));
+    const rect = elementContext === "floating" ? {
+      x,
+      y,
+      width: rects.floating.width,
+      height: rects.floating.height
+    } : rects.reference;
+    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+      x: 1,
+      y: 1
+    } : {
+      x: 1,
+      y: 1
+    };
+    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    }) : rect);
+    return {
+      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+    };
+  }
   var computePosition = async (reference, floating, config) => {
     const {
       placement = "bottom",
@@ -992,6 +1119,7 @@
     let middlewareData = {};
     let resetCount = 0;
     for (let i = 0; i < validMiddleware.length; i++) {
+      var _platform$detectOverf;
       const {
         name,
         fn
@@ -1009,7 +1137,10 @@
         strategy,
         middlewareData,
         rects,
-        platform: platform2,
+        platform: {
+          ...platform2,
+          detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+        },
         elements: {
           reference,
           floating
@@ -1053,62 +1184,6 @@
       middlewareData
     };
   };
-  async function detectOverflow(state, options) {
-    var _await$platform$isEle;
-    if (options === void 0) {
-      options = {};
-    }
-    const {
-      x,
-      y,
-      platform: platform2,
-      rects,
-      elements,
-      strategy
-    } = state;
-    const {
-      boundary = "clippingAncestors",
-      rootBoundary = "viewport",
-      elementContext = "floating",
-      altBoundary = false,
-      padding = 0
-    } = evaluate(options, state);
-    const paddingObject = getPaddingObject(padding);
-    const altContext = elementContext === "floating" ? "reference" : "floating";
-    const element = elements[altBoundary ? altContext : elementContext];
-    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
-      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
-      boundary,
-      rootBoundary,
-      strategy
-    }));
-    const rect = elementContext === "floating" ? {
-      x,
-      y,
-      width: rects.floating.width,
-      height: rects.floating.height
-    } : rects.reference;
-    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
-    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
-      x: 1,
-      y: 1
-    } : {
-      x: 1,
-      y: 1
-    };
-    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
-      elements,
-      rect,
-      offsetParent,
-      strategy
-    }) : rect);
-    return {
-      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-    };
-  }
   var arrow = (options) => ({
     name: "arrow",
     options,
@@ -1210,7 +1285,7 @@
           fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
         }
         const placements2 = [initialPlacement, ...fallbackPlacements];
-        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
         const overflows = [];
         let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
         if (checkMainAxis) {
@@ -1359,7 +1434,8 @@
         const {
           x,
           y,
-          placement
+          placement,
+          platform: platform2
         } = state;
         const {
           mainAxis: checkMainAxis = true,
@@ -1382,7 +1458,7 @@
           x,
           y
         };
-        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
         const crossAxis = getSideAxis(getSide(placement));
         const mainAxis = getOppositeAxis(crossAxis);
         let mainAxisCoord = coords[mainAxis];
@@ -1440,7 +1516,7 @@
           },
           ...detectOverflowOptions
         } = evaluate(options, state);
-        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
         const side = getSide(placement);
         const alignment = getAlignment(placement);
         const isYAxis = getSideAxis(placement) === "y";
@@ -2263,7 +2339,7 @@
 
   // src/components/calendar.js
   function calendar_default(Alpine) {
-    Alpine.directive("h-calendar", (el, { original, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-calendar", (el, { original: original2, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
       const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
       el.classList.add("border", "rounded-control", "gap-2", "p-2");
       el.setAttribute("tabindex", "-1");
@@ -2272,7 +2348,7 @@
         el.setAttribute("role", "dialog");
         el.setAttribute("aria-modal", "true");
         el.setAttribute("data-slot", "date-picker-calendar");
-        el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
+        el.setAttribute("data-state", datepicker._h_datepicker.state.expanded ? "open" : "closed");
       } else {
         el.classList.add("shadow-input", "data-[invalid=true]:border-negative", "data-[invalid=true]:ring-negative/20", "dark:data-[invalid=true]:ring-negative/40");
       }
@@ -2307,7 +2383,7 @@
       const onInputChange = () => {
         const newValue = new Date(datepicker._h_datepicker.input.value);
         if (isNaN(newValue)) {
-          console.error(`${original}: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
+          console.error(`${original2}: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
           datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
           return;
         } else if (selected.getTime() !== newValue.getTime()) {
@@ -2324,7 +2400,7 @@
         if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
           selected = new Date(el._x_model.get());
           if (isNaN(selected)) {
-            console.error(`${original}: input value is not a valid date - ${el._x_model.get()}`);
+            console.error(`${original2}: input value is not a valid date - ${el._x_model.get()}`);
             if (datepicker) datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
             else el.setAttribute("data-invalid", "true");
           } else if (datepicker) {
@@ -2338,7 +2414,7 @@
         selected = new Date(focusedDay);
         modelChange(true);
         render();
-        if (datepicker) datepicker._h_datepicker.expanded = false;
+        if (datepicker) datepicker._h_datepicker.state.expanded = false;
       }
       function isDisabled(d) {
         if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
@@ -2648,7 +2724,7 @@
             break;
           case "Escape":
             event.preventDefault();
-            if (datepicker) datepicker._h_datepicker.expanded = false;
+            if (datepicker) datepicker._h_datepicker.state.expanded = false;
             return;
           case "Enter":
           case " ":
@@ -2712,8 +2788,8 @@
       }
       if (datepicker) {
         effect(() => {
-          el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
-          if (datepicker._h_datepicker.expanded) {
+          el.setAttribute("data-state", datepicker._h_datepicker.state.expanded ? "open" : "closed");
+          if (datepicker._h_datepicker.state.expanded) {
             autoUpdateCleanup = autoUpdate(datepicker, el, updatePosition);
             Alpine2.nextTick(() => {
               focusDay();
@@ -2833,10 +2909,10 @@
         });
       }
     });
-    Alpine.directive("h-collapsible-trigger", (el, { original, modifiers }, { effect, Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-collapsible-trigger", (el, { original: original2, modifiers }, { effect, Alpine: Alpine2, cleanup }) => {
       const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
       if (!collapsible) {
-        throw new Error(`${original} must be inside a collapsible element`);
+        throw new Error(`${original2} must be inside a collapsible element`);
       }
       if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible-trigger");
       if (modifiers.includes("chevron")) {
@@ -2855,10 +2931,10 @@
         el.removeEventListener("click", handler);
       });
     });
-    Alpine.directive("h-collapsible-content", (el, { original }, { effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-collapsible-content", (el, { original: original2 }, { effect, Alpine: Alpine2 }) => {
       const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
       if (!collapsible) {
-        throw new Error(`${original} must be inside an h-collapsible element`);
+        throw new Error(`${original2} must be inside an h-collapsible element`);
       }
       if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible-content");
       el.classList.add("data-[state=closed]:!hidden");
@@ -2889,16 +2965,20 @@
 
   // src/components/datepicker.js
   function datepicker_default(Alpine) {
-    Alpine.directive("h-date-picker", (el, { original }, { Alpine: Alpine2, cleanup }) => {
-      el._h_datepicker = Alpine2.reactive({
+    Alpine.directive("h-date-picker", (el, { original: original2, modifiers }, { Alpine: Alpine2, cleanup }) => {
+      const state = Alpine2.reactive({
+        expanded: false
+      });
+      el._h_datepicker = {
         id: void 0,
         controls: `hdpc${v4_default()}`,
         input: void 0,
-        expanded: false
-      });
+        state,
+        inTable: modifiers.includes("table")
+      };
       el._h_datepicker.input = el.querySelector("input");
       if (!el._h_datepicker.input || el._h_datepicker.input.tagName !== "INPUT") {
-        throw new Error(`${original} must contain an input`);
+        throw new Error(`${original2} must contain an input`);
       } else if (el._h_datepicker.input.hasAttribute("id")) {
         el._h_datepicker.id = el._h_datepicker.input.getAttribute("id");
       } else {
@@ -2907,30 +2987,50 @@
         el._h_datepicker.id = id;
       }
       el.classList.add(
+        "overflow-hidden",
         "border-input",
-        "bg-input-inner",
         "flex",
-        "w-full",
         "items-center",
-        "rounded-control",
-        "border",
-        "shadow-input",
         "transition-[color,box-shadow]",
         "duration-200",
         "outline-none",
         "pl-3",
         "min-w-0",
-        "has-[input:focus-visible]:border-ring",
-        "has-[input:focus-visible]:ring-ring/50",
-        "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
-        "has-[input[aria-invalid=true]]:ring-negative/20",
-        "has-[input[aria-invalid=true]]:border-negative",
-        "dark:has-[input[aria-invalid=true]]:ring-negative/40",
-        "has-[input:invalid]:ring-negative/20",
-        "has-[input:invalid]:border-negative",
-        "dark:has-[input:invalid]:ring-negative/40"
+        "has-[input:disabled]:pointer-events-none",
+        "has-[input:disabled]:cursor-not-allowed",
+        "has-[input:disabled]:opacity-50"
       );
-      el.setAttribute("data-slot", "date-picker");
+      if (el._h_datepicker.inTable) {
+        el.classList.add(
+          "size-full",
+          "h-10",
+          "has-[input:focus-visible]:inset-ring-ring/50",
+          "has-[input:focus-visible]:inset-ring-2",
+          "has-[input[aria-invalid=true]]:inset-ring-negative/20",
+          "dark:has-[input[aria-invalid=true]]:inset-ring-negative/40",
+          "has-[input:invalid]:!inset-ring-negative/20",
+          "dark:has-[input:invalid]:!inset-ring-negative/40"
+        );
+        el.setAttribute("data-slot", "cell-input-date");
+      } else {
+        el.classList.add(
+          "w-full",
+          "rounded-control",
+          "border",
+          "bg-input-inner",
+          "shadow-input",
+          "has-[input:focus-visible]:border-ring",
+          "has-[input:focus-visible]:ring-ring/50",
+          "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
+          "has-[input[aria-invalid=true]]:ring-negative/20",
+          "has-[input[aria-invalid=true]]:border-negative",
+          "dark:has-[input[aria-invalid=true]]:ring-negative/40",
+          "has-[input:invalid]:ring-negative/20",
+          "has-[input:invalid]:border-negative",
+          "dark:has-[input:invalid]:ring-negative/40"
+        );
+        el.setAttribute("data-slot", "date-picker");
+      }
       el._h_datepicker.input.classList.add(
         "bg-transparent",
         "outline-none",
@@ -2955,39 +3055,40 @@
         observer.disconnect();
       });
     });
-    Alpine.directive("h-date-picker-trigger", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-date-picker-trigger", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "BUTTON") {
-        throw new Error(`${original} must be a button`);
+        throw new Error(`${original2} must be a button`);
       }
       if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-        throw new Error(`${original}: must have an "aria-label" or "aria-labelledby" attribute`);
+        throw new Error(`${original2}: must have an "aria-label" or "aria-labelledby" attribute`);
       }
       const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
       if (!datepicker) {
-        throw new Error(`${original} must be inside an date-picker element`);
+        throw new Error(`${original2} must be inside an date-picker element`);
+      }
+      el.classList.add("cursor-pointer", "inline-flex", "items-center", "justify-center", "h-full", "aspect-square", "bg-transparent", "hover:bg-secondary", "active:bg-secondary-active", "outline-none");
+      if (datepicker._h_datepicker.inTable) {
+        el.classList.add(
+          "focus-visible:inset-ring-ring/50",
+          "focus-visible:inset-ring-2",
+          "[input[aria-invalid=true]~&]:inset-ring-negative/20",
+          "dark:[input[aria-invalid=true]~&]:inset-ring-negative/40",
+          "[input:invalid~&]:!inset-ring-negative/20",
+          "dark:[input:invalid~&]:!inset-ring-negative/40"
+        );
+      } else {
+        el.classList.add(
+          "focus-visible:border-ring",
+          "focus-visible:ring-ring/50",
+          "focus-visible:ring-[calc(var(--spacing)*0.75)]",
+          "[input[aria-invalid=true]~&]:ring-negative/20",
+          "[input[aria-invalid=true]~&]:border-negative",
+          "dark:[input[aria-invalid=true]~&]:ring-negative/40",
+          "[input:invalid~&]:ring-negative/20",
+          "[input:invalid~&]:border-negative",
+          "dark:[input:invalid~&]:ring-negative/40"
+        );
       }
-      el.classList.add(
-        "cursor-pointer",
-        "inline-flex",
-        "items-center",
-        "justify-center",
-        "rounded-r-control",
-        "h-full",
-        "aspect-square",
-        "bg-transparent",
-        "hover:bg-secondary",
-        "active:bg-secondary-active",
-        "outline-none",
-        "focus-visible:border-ring",
-        "focus-visible:ring-ring/50",
-        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
-        "[input[aria-invalid=true]~&]:ring-negative/20",
-        "[input[aria-invalid=true]~&]:border-negative",
-        "dark:[input[aria-invalid=true]~&]:ring-negative/40",
-        "[input:invalid~&]:ring-negative/20",
-        "[input:invalid~&]:border-negative",
-        "dark:[input:invalid~&]:ring-negative/40"
-      );
       el.setAttribute("aria-controls", datepicker._h_datepicker.controls);
       el.setAttribute("aria-expanded", "false");
       el.setAttribute("aria-haspopup", "dialog");
@@ -3004,17 +3105,16 @@
         })
       );
       effect(() => {
-        el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
-        el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
+        el.setAttribute("data-state", datepicker._h_datepicker.state.expanded ? "open" : "closed");
+        el.setAttribute("aria-expanded", datepicker._h_datepicker.state.expanded);
       });
       const close = () => {
-        datepicker._h_datepicker.expanded = false;
+        datepicker._h_datepicker.state.expanded = false;
       };
       const handler = () => {
-        datepicker._h_datepicker.expanded = !datepicker._h_datepicker.expanded;
-        el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
+        datepicker._h_datepicker.state.expanded = !datepicker._h_datepicker.state.expanded;
         Alpine2.nextTick(() => {
-          if (datepicker._h_datepicker.expanded) {
+          if (datepicker._h_datepicker.state.expanded) {
             top.addEventListener("click", close, { once: true });
           } else {
             top.removeEventListener("click", close);
@@ -3101,7 +3201,7 @@
       el.setAttribute("data-slot", "dialog-header");
     });
     Alpine.directive("h-dialog-title", (el, _, { Alpine: Alpine2 }) => {
-      el.classList.add("text-lg", "leading-none", "font-semibold");
+      el.classList.add("order-1", "text-lg", "leading-none", "font-semibold");
       el.setAttribute("data-slot", "dialog-title");
       const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
       if (dialog && (!dialog.hasAttribute("aria-labelledby") || !dialog.hasAttribute("aria-label"))) {
@@ -3114,6 +3214,7 @@
     });
     Alpine.directive("h-dialog-close", (el) => {
       el.classList.add(
+        "order-2",
         "ring-offset-background",
         "focus:ring-ring",
         "rounded-xs",
@@ -3129,9 +3230,10 @@
         "[&_svg:not([class*='size-'])]:size-4"
       );
       el.setAttribute("data-slot", "dialog-close");
+      el.setAttribute("type", "button");
     });
     Alpine.directive("h-dialog-description", (el, _, { Alpine: Alpine2 }) => {
-      el.classList.add("col-span-full", "text-muted-foreground", "text-sm");
+      el.classList.add("order-3", "col-span-full", "text-muted-foreground", "text-sm");
       el.setAttribute("data-slot", "dialog-description");
       const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
       if (dialog && (!dialog.hasAttribute("aria-describedby") || !dialog.hasAttribute("aria-description"))) {
@@ -3242,13 +3344,13 @@
 
   // src/components/icon.js
   function icon_default(Alpine) {
-    Alpine.directive("h-icon", (el, { original }) => {
+    Alpine.directive("h-icon", (el, { original: original2, modifiers }) => {
       if (el.tagName.toLowerCase() !== "svg") {
-        throw new Error(`${original} works only on svg elements`);
+        throw new Error(`${original2} works only on svg elements`);
       } else if (!el.hasAttribute("role")) {
-        throw new Error(`${original} must have a role`);
+        throw new Error(`${original2} must have a role`);
       } else if (el.getAttribute("role") === "img" && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-        throw new Error(`${original}: svg images with the role of img must have an "aria-label" or "aria-labelledby" attribute`);
+        throw new Error(`${original2}: svg images with the role of img must have an "aria-label" or "aria-labelledby" attribute`);
       }
       el.classList.add("fill-current");
       el.setAttribute("data-slot", "icon");
@@ -3266,6 +3368,8 @@
         }).catch((response) => {
           console.error(response);
         });
+      } else if (modifiers[0]) {
+        setSvgContent(el, modifiers[0]);
       }
     });
   }
@@ -3342,6 +3446,18 @@
       if (modifiers.includes("group")) {
         el.classList.add("h-full", "flex-1", "rounded-none", "border-0", "bg-transparent", "shadow-none", "focus-visible:ring-0");
         el.setAttribute("data-slot", "input-group-control");
+      } else if (modifiers.includes("table")) {
+        el.classList.add(
+          "size-full",
+          "h-10",
+          "focus-visible:inset-ring-ring/50",
+          "focus-visible:inset-ring-2",
+          "aria-invalid:inset-ring-negative/20",
+          "dark:aria-invalid:inset-ring-negative/40",
+          "invalid:!inset-ring-negative/20",
+          "dark:invalid:!inset-ring-negative/40"
+        );
+        el.setAttribute("data-slot", "cell-input");
       } else {
         el.classList.add("w-full", "rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[calc(var(--spacing)*0.75)]");
         el.setAttribute("data-slot", "input");
@@ -3451,8 +3567,9 @@
       el.classList.add("text-muted-foreground", "flex", "items-center", "gap-2", "text-sm", "[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4");
       el.setAttribute("data-slot", "label");
     });
-    Alpine.directive("h-input-number", (el, { original }, { cleanup }) => {
+    Alpine.directive("h-input-number", (el, { original: original2 }, { cleanup }) => {
       el.classList.add(
+        "overflow-hidden",
         "group/input-number",
         "border-input",
         "bg-input-inner",
@@ -3466,18 +3583,24 @@
         "transition-[color,box-shadow]",
         "outline-none",
         "min-w-0",
-        "has-[[data-slot=input-number-control]:focus-visible]:border-ring",
-        "has-[[data-slot=input-number-control]:focus-visible]:ring-ring/50",
-        "has-[[data-slot=input-number-control]:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
-        "has-[[data-slot][aria-invalid=true]]:ring-negative/20",
-        "has-[[data-slot][aria-invalid=true]]:border-negative",
-        "dark:has-[[data-slot][aria-invalid=true]]:ring-negative/40"
+        "has-[input:focus-visible]:border-ring",
+        "has-[input:focus-visible]:ring-ring/50",
+        "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
+        "has-[input[aria-invalid=true]]:ring-negative/20",
+        "has-[input[aria-invalid=true]]:border-negative",
+        "dark:has-[input[aria-invalid=true]]:ring-negative/40",
+        "has-[input:invalid]:ring-negative/20",
+        "has-[input:invalid]:border-negative",
+        "dark:has-[input:invalid]:ring-negative/40",
+        "has-[input:disabled]:pointer-events-none",
+        "has-[input:disabled]:cursor-not-allowed",
+        "has-[input:disabled]:opacity-50"
       );
       el.setAttribute("role", "group");
       el.setAttribute("data-slot", "input-number");
       const input = el.querySelector("input");
       if (!input || input.getAttribute("type") !== "number") {
-        throw new Error(`${original} must contain an input of type 'number'`);
+        throw new Error(`${original2} must contain an input of type 'number'`);
       }
       if (!input.hasAttribute("type")) input.setAttribute("type", "number");
       if (!input.hasAttribute("inputmode")) input.setAttribute("inputmode", "numeric");
@@ -3492,14 +3615,27 @@
       input.setAttribute("autocorrect", "off");
       input.setAttribute("spellcheck", "off");
       input.setAttribute("data-slot", "input-number-control");
-      input.classList.add("rounded-l-control", "size-full", "px-3", "py-1", "outline-none");
+      input.classList.add("size-full", "px-3", "py-1", "outline-none");
       const stepDown = document.createElement("button");
       stepDown.setAttribute("type", "button");
       stepDown.setAttribute("tabIndex", "-1");
       stepDown.setAttribute("aria-label", "Decrease");
       stepDown.setAttribute("aria-controls", input.getAttribute("id"));
       stepDown.setAttribute("data-slot", "step-up-trigger");
+      stepDown.appendChild(
+        createSvg({
+          icon: Minus,
+          classes: "opacity-70 fill-foreground size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
       stepDown.classList.add(
+        "inline-flex",
+        "items-center",
+        "justify-center",
         "cursor-pointer",
         "border-l",
         "border-input",
@@ -3512,15 +3648,7 @@
         "active:bg-secondary-active",
         "outline-none",
         "relative",
-        "before:block",
-        "before:opacity-70",
-        "before:rounded-full",
-        "before:h-0.5",
-        "before:min-h-px",
-        "before:w-3",
-        "before:mx-auto",
-        "before:bg-foreground",
-        "before:hover:bg-secondary-foreground"
+        "[&:hover>svg]:text-secondary-foreground"
       );
       el.appendChild(stepDown);
       const onStepDown = () => {
@@ -3535,13 +3663,25 @@
       stepUp.setAttribute("aria-label", "Increase");
       stepUp.setAttribute("aria-controls", input.getAttribute("id"));
       stepUp.setAttribute("data-slot", "step-up-trigger");
+      stepUp.appendChild(
+        createSvg({
+          icon: Plus,
+          classes: "opacity-70 fill-foreground size-4 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
       stepUp.classList.add(
+        "inline-flex",
+        "items-center",
+        "justify-center",
         "cursor-pointer",
         "border-l",
         "border-input",
         "[input[aria-invalid=true]~&]:border-negative",
         "[input:invalid~&]:border-negative",
-        "rounded-r-control",
         "h-full",
         "aspect-square",
         "bg-transparent",
@@ -3549,32 +3689,7 @@
         "active:bg-secondary-active",
         "outline-none",
         "relative",
-        "before:block",
-        "before:opacity-70",
-        "before:absolute",
-        "before:rounded-full",
-        "before:h-0.5",
-        "before:min-h-px",
-        "before:w-3",
-        "before:top-1/2",
-        "before:left-1/2",
-        "before:-translate-x-1/2",
-        "before:-translate-y-1/2",
-        "before:bg-foreground",
-        "before:hover:bg-secondary-foreground",
-        "after:block",
-        "after:opacity-70",
-        "after:absolute",
-        "after:rounded-full",
-        "after:h-3",
-        "after:min-w-px",
-        "after:w-0.5",
-        "after:top-1/2",
-        "after:left-1/2",
-        "after:-translate-x-1/2",
-        "after:-translate-y-1/2",
-        "after:bg-foreground",
-        "after:hover:bg-secondary-foreground"
+        "[&:hover>svg]:text-secondary-foreground"
       );
       el.appendChild(stepUp);
       const onStepUp = () => {
@@ -3731,13 +3846,13 @@
       el.setAttribute("data-slot", "list");
       el.setAttribute("role", "group");
     });
-    Alpine.directive("h-list-header", (el, { original }, { Alpine: Alpine2 }) => {
+    Alpine.directive("h-list-header", (el, { original: original2 }, { Alpine: Alpine2 }) => {
       el.classList.add("font-medium", "flex", "items-center", "p-2", "gap-2", "align-middle", "bg-table-header", "text-table-header-foreground");
       el.setAttribute("role", "presentation");
       el.setAttribute("data-slot", "list-header");
       const list = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "list");
       if (!list) {
-        throw new Error(`${original} must be placed inside a list element`);
+        throw new Error(`${original2} must be placed inside a list element`);
       }
       if (!el.hasAttribute("id")) {
         const id = `lbh${v4_default()}`;
@@ -3782,17 +3897,24 @@
   function menu_default(Alpine) {
     Alpine.directive("h-menu-trigger", (el, { modifiers }) => {
       el._menu_trigger = {
-        isDropdown: modifiers.includes("dropdown")
+        isDropdown: modifiers.includes("dropdown"),
+        setOpen(open) {
+          el.setAttribute("data-state", open ? "open" : "closed");
+        }
       };
+      el.setAttribute("data-state", "closed");
     });
-    Alpine.directive("h-menu", (el, { original, modifiers }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu", (el, { original: original2, modifiers }, { cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "UL") {
+        throw new Error(`${original2} must be an ul element`);
+      }
       el.classList.add("hidden", "fixed", "bg-popover", "text-popover-foreground", "font-normal", "z-50", "min-w-[8rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "p-1", "shadow-md", "border", "outline-none");
       el.setAttribute("role", "menu");
       el.setAttribute("aria-orientation", "vertical");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "menu");
       if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-        throw new Error(`${original} must have an "aria-label" or "aria-labelledby" attribute`);
+        throw new Error(`${original2} must have an "aria-label" or "aria-labelledby" attribute`);
       }
       const isSubmenu = modifiers.includes("sub");
       const menuTrigger = (() => {
@@ -3804,7 +3926,7 @@
         return sibling;
       })();
       if (!isSubmenu && !menuTrigger) {
-        throw new Error(`${original} menu must be placed after a menu trigger element`);
+        throw new Error(`${original2} menu must be placed after a menu trigger element`);
       }
       let menuSubItem;
       if (isSubmenu) menuSubItem = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "menu-sub");
@@ -3834,6 +3956,9 @@
         } else {
           listenForTrigger(true);
           if (focusTrigger) menuTrigger.focus();
+          if (menuTrigger._menu_trigger.isDropdown) {
+            menuTrigger._menu_trigger.setOpen(false);
+          }
         }
       }
       el._menu = { close };
@@ -3984,6 +4109,9 @@
         }
       }
       function openDropdown() {
+        if (menuTrigger._menu_trigger.isDropdown) {
+          menuTrigger._menu_trigger.setOpen(true);
+        }
         open(menuTrigger);
       }
       function onContextmenu(event) {
@@ -4017,7 +4145,10 @@
         el.removeEventListener("keydown", onKeyDown);
       });
     });
-    Alpine.directive("h-menu-item", (el, _, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-item", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "LI") {
+        throw new Error(`${original2} must be a li element`);
+      }
       el.classList.add(
         "focus:bg-secondary-hover",
         "focus:text-secondary-foreground",
@@ -4070,7 +4201,7 @@
         el.removeEventListener("mouseleave", focusOut);
       });
     });
-    Alpine.directive("h-menu-sub", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-sub", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
       el.classList.add(
         "focus:bg-secondary-hover",
         "hover:bg-secondary-hover",
@@ -4102,7 +4233,7 @@
       const chevronRight = createSvg({ icon: ChevronRight, classes: "size-4 ml-auto", attrs: { "aria-hidden": true, role: "presentation" } });
       el.appendChild(chevronRight);
       const parentMenu = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "menu");
-      if (!parentMenu) throw new Error(`${original} must have a parent`);
+      if (!parentMenu) throw new Error(`${original2} must have a parent`);
       el._menu_sub = {
         open: void 0,
         close: void 0,
@@ -4196,7 +4327,10 @@
       el.classList.add("text-foreground", "px-2", "py-1.5", "text-sm", "font-semibold", "text-left", "data-[inset=true]:pl-8");
       el.setAttribute("data-slot", "menu-label");
     });
-    Alpine.directive("h-menu-checkbox-item", (el, _, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-checkbox-item", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "LI" && el.tagName !== "DIV") {
+        throw new Error(`${original2} must be a li or div element`);
+      }
       el.classList.add(
         "focus:bg-secondary-hover",
         "hover:bg-secondary-hover",
@@ -4261,7 +4395,10 @@
         el.removeEventListener("mouseleave", focusOut);
       });
     });
-    Alpine.directive("h-menu-radio-item", (el, { expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-radio-item", (el, { original: original2, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "LI" && el.tagName !== "DIV") {
+        throw new Error(`${original2} must be a li or div element`);
+      }
       el.classList.add(
         "focus:bg-secondary-hover",
         "hover:bg-secondary-hover",
@@ -4488,7 +4625,7 @@
         });
       }
     });
-    Alpine.directive("h-popover", (el, { original, modifiers }, { effect }) => {
+    Alpine.directive("h-popover", (el, { original: original2, modifiers }, { effect }) => {
       const popover = (() => {
         let sibling = el.previousElementSibling;
         while (sibling && !sibling.hasOwnProperty("_popover")) {
@@ -4497,7 +4634,7 @@
         return sibling;
       })();
       if (!popover) {
-        throw new Error(`${original} must be placed after a popover element`);
+        throw new Error(`${original2} 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.setAttribute("data-slot", "popover");
@@ -6509,7 +6646,7 @@
     none: 3
   });
   function select_default(Alpine) {
-    Alpine.directive("h-select", (el, _, { Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-select", (el, { modifiers }, { Alpine: Alpine2, cleanup }) => {
       el._h_select = Alpine2.reactive({
         id: void 0,
         controls: `hsc${v4_default()}`,
@@ -6526,46 +6663,45 @@
         set: void 0,
         get: void 0
       };
-      el.classList.add(
-        "cursor-pointer",
-        "border-input",
-        "has-focus-visible:border-ring",
-        "has-focus-visible:ring-[calc(var(--spacing)*0.75)]",
-        "has-focus-visible:ring-ring/50",
-        "dark:has-[aria-invalid=true]:ring-negative/40",
-        "dark:has-[input:invalid]:ring-negative/40",
-        "has-[aria-invalid=true]:border-negative",
-        "has-[aria-invalid=true]:ring-negative/20",
-        "has-[input:invalid]:border-negative",
-        "has-[input:invalid]:ring-negative/20",
-        "hover:bg-secondary-hover",
-        "active:bg-secondary-active",
-        "w-full",
-        "rounded-control",
-        "border",
-        "bg-input-inner",
-        "text-sm",
-        "whitespace-nowrap",
-        "shadow-input",
-        "transition-[color,box-shadow]",
-        "duration-200",
-        "outline-none",
-        "has-[input:disabled]:pointer-events-none",
-        "has-[input:disabled]:opacity-50"
-      );
-      el.setAttribute("data-slot", "select");
-      const observer = sizeObserver(el);
-      cleanup(() => {
-        observer.disconnect();
-      });
+      el.classList.add("cursor-pointer", "outline-none", "transition-[color,box-shadow]", "duration-200", "w-full", "has-[input:disabled]:pointer-events-none", "has-[input:disabled]:opacity-50");
+      if (modifiers.includes("table")) {
+        el.classList.add("h-10", "flex", "focus-visible:inset-ring-ring/50", "focus-visible:inset-ring-2", "hover:bg-table-hover", "hover:text-table-hover-foreground", "active:!bg-table-active", "active:!text-table-active-foreground");
+        el.setAttribute("data-slot", "cell-input-select");
+      } else {
+        el.classList.add(
+          "border-input",
+          "has-focus-visible:border-ring",
+          "has-focus-visible:ring-[calc(var(--spacing)*0.75)]",
+          "has-focus-visible:ring-ring/50",
+          "dark:has-[aria-invalid=true]:ring-negative/40",
+          "dark:has-[input:invalid]:ring-negative/40",
+          "has-[aria-invalid=true]:border-negative",
+          "has-[aria-invalid=true]:ring-negative/20",
+          "has-[input:invalid]:border-negative",
+          "has-[input:invalid]:ring-negative/20",
+          "hover:bg-secondary-hover",
+          "active:bg-secondary-active",
+          "rounded-control",
+          "border",
+          "bg-input-inner",
+          "text-sm",
+          "whitespace-nowrap",
+          "shadow-input"
+        );
+        el.setAttribute("data-slot", "select");
+        const observer = sizeObserver(el);
+        cleanup(() => {
+          observer.disconnect();
+        });
+      }
     });
-    Alpine.directive("h-select-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-select-input", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "INPUT") {
-        throw new Error(`${original} must be a readonly input of type "text"`);
+        throw new Error(`${original2} must be a readonly input of type "text"`);
       }
       const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
-        throw new Error(`${original} must be inside a select element`);
+        throw new Error(`${original2} must be inside a select element`);
       } else if (el.hasOwnProperty("_x_model")) {
         select._h_select.multiple = Array.isArray(el._x_model.get());
         select._h_model.set = (value) => {
@@ -6818,10 +6954,10 @@
         observer.disconnect();
       });
     });
-    Alpine.directive("h-select-content", (el, { original }, { effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-select-content", (el, { original: original2 }, { effect, Alpine: Alpine2 }) => {
       const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
-        throw new Error(`${original} must be inside a select element`);
+        throw new Error(`${original2} must be inside a select element`);
       }
       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");
@@ -6832,7 +6968,7 @@
       el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
       const control = select.querySelector(`#${select._h_select.id}`);
       if (!control) {
-        throw new Error(`${original}: trigger not found`);
+        throw new Error(`${original2}: trigger not found`);
       }
       let autoUpdateCleanup;
       function updatePosition() {
@@ -6874,10 +7010,10 @@
         }
       });
     });
-    Alpine.directive("h-select-search", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-select-search", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
       const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
-        throw new Error(`${original} must be inside an h-select element`);
+        throw new Error(`${original2} must be inside an h-select element`);
       } else {
         select._h_select.filterType = FilterType[el.getAttribute("data-filter")] ?? FilterType["starts-with"];
       }
@@ -6949,10 +7085,10 @@
         selectGroup._h_selectGroup.labelledby = id;
       }
     });
-    Alpine.directive("h-select-option", (el, { original, expression }, { effect, evaluateLater, cleanup }) => {
+    Alpine.directive("h-select-option", (el, { original: original2, expression }, { effect, evaluateLater, cleanup }) => {
       const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
-        throw new Error(`${original} must be inside an h-select element`);
+        throw new Error(`${original2} must be inside an h-select element`);
       }
       el.classList.add(
         "focus:bg-primary",
@@ -7237,6 +7373,11 @@
         "md:after:hidden",
         "group-data-[collapsed=true]/sidebar:hidden"
       );
+      if (el.tagName !== "BUTTON") {
+        el.setAttribute("role", "button");
+      } else {
+        el.setAttribute("type", "button");
+      }
       el.setAttribute("data-slot", "sidebar-group-action");
     });
     Alpine.directive("h-sidebar-group-content", (el) => {
@@ -7247,11 +7388,18 @@
       el.classList.add("vbox", "w-full", "min-w-0", "gap-1");
       el.setAttribute("data-slot", "sidebar-menu");
     });
-    Alpine.directive("h-sidebar-menu-item", (el) => {
+    Alpine.directive("h-sidebar-menu-item", (el, { original: original2 }) => {
+      if (el.tagName !== "BUTTON") {
+        throw new Error(`${original2} must be a button`);
+      }
       el.classList.add("group/menu-item", "relative");
+      el.setAttribute("type", "button");
       el.setAttribute("data-slot", "sidebar-menu-item");
     });
     Alpine.directive("h-sidebar-menu-button", (el) => {
+      if (el.tagName !== "BUTTON") {
+        throw new Error(`${original} must be a button`);
+      }
       el.classList.add(
         "peer/menu-button",
         "flex",
@@ -7291,6 +7439,7 @@
         "[&>svg]:shrink-0",
         "[&>svg:not(:first-child):last-child]:ml-auto"
       );
+      el.setAttribute("type", "button");
       if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "sidebar-menu-button");
       const sizes = {
         default: ["h-8", "text-sm"],
@@ -7338,6 +7487,11 @@
       if (modifiers.includes("autohide")) {
         el.classList.add("peer-data-[active=true]/menu-button:text-sidebar-secondary-foreground", "group-focus-within/menu-item:opacity-100", "group-hover/menu-item:opacity-100", "data-[state=open]:opacity-100", "md:opacity-0");
       }
+      if (el.tagName !== "BUTTON") {
+        el.setAttribute("role", "button");
+      } else {
+        el.setAttribute("type", "button");
+      }
       el.setAttribute("data-slot", "sidebar-menu-action");
     });
     Alpine.directive("h-sidebar-menu-badge", (el) => {
@@ -7385,7 +7539,7 @@
       el.setAttribute("role", "none");
     });
     Alpine.directive("h-sidebar-menu-sub", (el, { modifiers }) => {
-      el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "py-0.5", "group-data-[collapsed=true]/sidebar:hidden");
+      el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "py-0.5", "group-data-[collapsed=true]/sidebar:!hidden");
       if (!modifiers.includes("flat")) {
         el.classList.add("border-sidebar-border", "mx-3.5", "border-l", "px-2.5");
       }
@@ -7396,6 +7550,9 @@
       el.setAttribute("data-slot", "sidebar-menu-sub-item");
     });
     Alpine.directive("h-sidebar-menu-sub-button", (el) => {
+      if (el.tagName !== "BUTTON") {
+        throw new Error(`${original} must be a button`);
+      }
       el.classList.add(
         "text-sidebar-foreground",
         "ring-sidebar-ring",
@@ -7430,6 +7587,7 @@
         "data-[active=true]:text-sidebar-primary-foreground",
         "group-data-[collapsed=true]/sidebar:hidden"
       );
+      el.setAttribute("type", "button");
       el.setAttribute("data-slot", "sidebar-menu-sub-button");
       const sizes = {
         sm: ["text-xs"],
@@ -7501,18 +7659,212 @@
 
   // src/components/split.js
   function split_default(Alpine) {
-    Alpine.directive("h-split", (el) => {
-      el.classList.add("flex", "data-[orientation=horizontal]:flex-row", "data-[orientation=vertical]:flex-col");
-      el.setAttribute("tabindex", "-1");
-      el.setAttribute("data-slot", "split");
+    Alpine.directive("h-split", (el, {}, { cleanup, Alpine: Alpine2 }) => {
+      const panels = [];
+      const state = Alpine2.reactive({
+        isHorizontal: el.getAttribute("data-orientation") === "horizontal",
+        isBorder: el.getAttribute("data-variant") === "border"
+      });
+      const storageKey = el.getAttribute("data-key");
+      const loadSizes = () => {
+        if (!storageKey) return null;
+        try {
+          const raw = localStorage.getItem(storageKey);
+          if (!raw) return null;
+          return JSON.parse(raw);
+        } catch {
+          return null;
+        }
+      };
+      let saveTimer = null;
+      const SAVE_DELAY = 200;
+      const saveSizes = () => {
+        if (!storageKey) return;
+        if (saveTimer) clearTimeout(saveTimer);
+        saveTimer = setTimeout(() => {
+          const visible = panels.filter((p) => !p.hidden);
+          const sizes = visible.map((p) => p.size / usableSize());
+          localStorage.setItem(storageKey, JSON.stringify(sizes));
+          saveTimer = null;
+        }, SAVE_DELAY);
+      };
+      const sizeProp = () => state.isHorizontal ? "width" : "height";
+      const containerSize = () => state.isHorizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+      const gutterSize = () => {
+        const panel = panels.find((p) => p.gutter.parentElement);
+        if (panel) {
+          return panel.gutter.getBoundingClientRect()[sizeProp()] ?? 0;
+        }
+        return 0;
+      };
+      const usableSize = () => {
+        const visiblePanels = panels.filter((p) => !p.hidden);
+        const gutters = Math.max(0, visiblePanels.length - 1);
+        return containerSize() - gutters * gutterSize();
+      };
+      const normalize = (value) => {
+        if (value == null) return null;
+        if (typeof value === "number") return value;
+        if (value.endsWith("%")) {
+          return parseFloat(value) / 100 * usableSize();
+        }
+        return parseFloat(value);
+      };
+      let initialized = false;
+      const DELTA_ABS = 0.01;
+      const layout = () => {
+        const visible = panels.filter((p) => !p.hidden);
+        if (!visible.length) return;
+        const total = usableSize();
+        if (!initialized) {
+          initialized = true;
+          const visible2 = panels.filter((p) => !p.hidden);
+          const stored = loadSizes();
+          if (stored && stored.length === visible2.length) {
+            visible2.forEach((p, i) => {
+              p.size = stored[i] * usableSize();
+              p.explicit = true;
+            });
+          } else {
+            const explicitTotal = visible2.filter((p) => p.explicit).reduce((sum, p) => sum + p.declaredSize, 0);
+            const autoPanels = visible2.filter((p) => !p.explicit);
+            const remaining = total - explicitTotal;
+            const share = autoPanels.length ? remaining / autoPanels.length : 0;
+            visible2.forEach((p) => {
+              if (p.explicit) {
+                p.size = p.declaredSize;
+              } else {
+                p.size = share;
+              }
+              p.size = Math.min(Math.max(p.size ?? share, p.min), p.max);
+            });
+          }
+        }
+        visible.forEach((p) => {
+          if (p.size == null) {
+            p.size = p.min ?? 0;
+          }
+          p.size = Math.min(Math.max(p.size, p.min), p.max);
+        });
+        let currentTotal = visible.reduce((sum, p) => sum + p.size, 0);
+        let delta = total - currentTotal;
+        if (Math.abs(delta) < DELTA_ABS) {
+          visible.forEach((p) => p.apply());
+          return;
+        }
+        let flexible = visible.filter((p) => {
+          if (p.collapsed) return false;
+          if (delta > 0) {
+            return p.size < p.max;
+          } else {
+            return p.size > p.min;
+          }
+        });
+        while (flexible.length && Math.abs(delta) > DELTA_ABS) {
+          const share = delta / flexible.length;
+          let consumed = 0;
+          const nextFlexible = [];
+          flexible.forEach((p) => {
+            const proposed = p.size + share;
+            const clamped = Math.min(Math.max(proposed, p.min), p.max);
+            const actualChange = clamped - p.size;
+            if (Math.abs(actualChange) > DELTA_ABS) {
+              p.size = clamped;
+              consumed += actualChange;
+            }
+            if (delta > 0) {
+              if (p.size < p.max) nextFlexible.push(p);
+            } else {
+              if (p.size > p.min) nextFlexible.push(p);
+            }
+          });
+          delta -= consumed;
+          flexible = nextFlexible;
+          if (Math.abs(consumed) < DELTA_ABS) break;
+        }
+        visible.forEach((p) => p.apply());
+      };
+      let layoutFrame = null;
+      const queueLayout = () => {
+        if (layoutFrame) cancelAnimationFrame(layoutFrame);
+        layoutFrame = requestAnimationFrame(() => {
+          layout();
+          saveSizes();
+          layoutFrame = null;
+        });
+      };
+      const refreshGutters = () => {
+        panels.forEach((p, i) => p.setGutter(i === panels.length - 1));
+      };
+      el._h_split = {
+        state,
+        panels,
+        addPanel(panel) {
+          panels.push(panel);
+          if (panel.size == null) {
+            panel.size = null;
+          }
+          initialized = false;
+          refreshGutters();
+          queueLayout();
+        },
+        removePanel(panel) {
+          const i = panels.indexOf(panel);
+          if (i !== -1) panels.splice(i, 1);
+          initialized = false;
+          refreshGutters();
+          queueLayout();
+        },
+        panelHidden() {
+          initialized = false;
+          refreshGutters();
+          queueLayout();
+        },
+        panelChange() {
+          queueLayout();
+        },
+        normalize,
+        saveSizes
+      };
+      el.classList.add("flex", "flex-1", "min-w-0", "min-h-0", "data-[orientation=horizontal]:flex-row", "data-[orientation=vertical]:flex-col");
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === "data-orientation") {
+            state.isHorizontal = el.getAttribute("data-orientation") === "horizontal";
+            queueLayout();
+          } else if (mutation.attributeName === "data-variant") {
+            state.isBorder = el.getAttribute("data-variant") === "border";
+            queueLayout();
+          } else {
+            panels.forEach((p) => p.setLocked(el.getAttribute("data-locked") === "true"));
+          }
+        });
+      });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-orientation", "data-variant", "data-locked"] });
+      const containerObserver = new ResizeObserver(queueLayout);
+      containerObserver.observe(el);
+      cleanup(() => {
+        if (layoutFrame) cancelAnimationFrame(layoutFrame);
+        if (saveTimer) clearTimeout(saveTimer);
+        containerObserver.disconnect();
+        observer.disconnect();
+      });
     });
-    Alpine.directive("h-split-panel", (el) => {
-      el.classList.add('[&.hidden+[data-slot="split-gutter"]]:hidden');
+    Alpine.directive("h-split-panel", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+      const split = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_split"));
+      if (!split) {
+        throw new Error(`${original2} must be inside an split element`);
+      }
+      el.classList.add("flex", "shrink", "grow-0", "box-border", "min-w-0", "min-h-0", "overflow-visible");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "split-panel");
-    });
-    Alpine.directive("h-split-gutter", (el, _, { cleanup }) => {
-      el.classList.add(
+      const gutter = document.createElement("span");
+      gutter.setAttribute("data-slot", "split-gutter");
+      gutter.setAttribute("aria-disabled", el.getAttribute("data-locked") === "true");
+      gutter.setAttribute("tabindex", "-1");
+      gutter.setAttribute("role", "separator");
+      gutter.classList.add(
+        "overflow-visible",
         "relative",
         "shrink-0",
         "touch-none",
@@ -7520,15 +7872,8 @@
         "outline-none",
         "hover:bg-primary-hover",
         "active:bg-primary-active",
-        "before:absolute",
-        "before:top-1/2",
-        "before:left-1/2",
-        "before:-translate-x-1/2",
-        "before:-translate-y-1/2",
-        "before:block",
-        "before:bg-transparent",
         "hover:before:bg-primary-hover",
-        "[[data-locked=true]>&]:pointer-events-none",
+        "aria-disabled:pointer-events-none",
         "[[data-orientation=horizontal]>&]:cursor-col-resize",
         "[[data-orientation=vertical]>&]:cursor-row-resize"
       );
@@ -7538,19 +7883,23 @@
         "hover:bg-primary-hover",
         "active:bg-primary-active",
         "before:absolute",
-        "before:top-1/2",
-        "before:left-1/2",
-        "before:-translate-x-1/2",
-        "before:-translate-y-1/2",
         "before:block",
         "before:bg-transparent",
         "hover:before:bg-primary-hover",
+        "[[data-orientation=horizontal]>&]:before:-translate-x-1/2",
+        "[[data-orientation=horizontal]>&[data-edge=end]]:before:-translate-x-1",
+        "[[data-orientation=horizontal]>&[data-edge=start]]:before:translate-x-0",
+        "[[data-orientation=horizontal]>&]:before:left-1/2",
         "[[data-orientation=horizontal]>&]:!w-px",
         "[[data-orientation=horizontal]>&]:before:h-full",
-        "[[data-orientation=horizontal]>&]:before:w-[calc(var(--spacing)*1.25)]",
+        "[[data-orientation=horizontal]>&]:before:w-[calc(var(--spacing)*1)]",
+        "[[data-orientation=vertical]>&]:before:-translate-y-1/2",
+        "[[data-orientation=vertical]>&[data-edge=end]]:before:-translate-y-1",
+        "[[data-orientation=vertical]>&[data-edge=start]]:before:translate-y-0",
+        "[[data-orientation=vertical]>&]:before:top-1/2",
         "[[data-orientation=vertical]>&]:!h-px",
         "[[data-orientation=vertical]>&]:before:w-full",
-        "[[data-orientation=vertical]>&]:before:h-[calc(var(--spacing)*1.25)]"
+        "[[data-orientation=vertical]>&]:before:h-[calc(var(--spacing)*1)]"
       ];
       const handleClasses = [
         "bg-transparent",
@@ -7599,24 +7948,175 @@
         "[[data-orientation=vertical]>&]:after:w-5",
         "[[data-orientation=vertical]>&]:after:h-2.5"
       ];
-      el.setAttribute("data-slot", "split-gutter");
-      el.setAttribute("tabindex", "-1");
-      el.setAttribute("role", "separator");
-      function setVariant(variant = "handle") {
-        if (variant === "border") {
-          el.classList.remove(...handleClasses);
-          el.classList.add(...borderClasses);
+      const setVariant = () => {
+        if (split._h_split.state.isBorder) {
+          gutter.classList.remove(...handleClasses);
+          gutter.classList.add(...borderClasses);
         } else {
-          el.classList.remove(...borderClasses);
-          el.classList.add(...handleClasses);
+          gutter.classList.remove(...borderClasses);
+          gutter.classList.add(...handleClasses);
         }
-      }
-      const observer = new MutationObserver(() => {
-        setVariant(el.parentElement.getAttribute("data-variant"));
+      };
+      setVariant();
+      effect(setVariant);
+      const initialSize = split._h_split.normalize(el.getAttribute("data-size"));
+      let handleSize = 0;
+      const panel = {
+        el,
+        gutter,
+        hidden: el.getAttribute("data-hidden") === "true",
+        declaredSize: initialSize,
+        size: initialSize,
+        explicit: initialSize != null,
+        min: split._h_split.normalize(el.getAttribute("data-min")) ?? 0,
+        max: split._h_split.normalize(el.getAttribute("data-max")) ?? Infinity,
+        collapsed: false,
+        prevSize: null,
+        apply() {
+          el.style.flexBasis = `${this.size.toFixed(2)}px`;
+          if (split._h_split.state.isBorder) {
+            this.setHandleOffset();
+          }
+        },
+        setGutter(last) {
+          if (this.hidden || last) {
+            gutter.remove();
+          } else if (!gutter.parentElement) {
+            el.after(gutter);
+            handleSize = this.getHandleSize();
+          }
+        },
+        setHandleOffset() {
+          const panels = split._h_split.panels.filter((p) => !p.hidden);
+          const index = panels.indexOf(panel);
+          const next = panels[index + 1];
+          if (!next) return;
+          if (next.size < handleSize) {
+            gutter.setAttribute("data-edge", "end");
+          } else if (this.size < handleSize) {
+            gutter.setAttribute("data-edge", "start");
+          } else {
+            gutter.removeAttribute("data-edge");
+          }
+        },
+        getHandleSize() {
+          if (split._h_split.state.isBorder) {
+            const beforeStyle = window.getComputedStyle(gutter, "::before");
+            return Number(beforeStyle[split._h_split.state.isHorizontal ? "width" : "height"].replace("px", "")) / 2;
+          } else {
+            return 0;
+          }
+        },
+        setLocked(locked = false) {
+          const panelLocked = el.getAttribute("data-locked") === "true";
+          if (locked) {
+            gutter.classList.add("pointer-events-none");
+          } else if (panelLocked) {
+            gutter.classList.add("pointer-events-none");
+          } else {
+            gutter.classList.remove("pointer-events-none");
+          }
+        }
+      };
+      split._h_split.addPanel(panel);
+      const drag = (e) => {
+        e.preventDefault();
+        gutter.setPointerCapture(e.pointerId);
+        const panels = split._h_split.panels.filter((p) => !p.hidden);
+        const index = panels.indexOf(panel);
+        const next = panels[index + 1];
+        if (!next) return;
+        const startPos = split._h_split.state.isHorizontal ? e.clientX : e.clientY;
+        const startA = panel.size;
+        const startB = next.size;
+        const minDelta = Math.max(
+          panel.min - startA,
+          // how much panel A can shrink
+          startB - next.max
+          // how much panel B can grow
+        );
+        const maxDelta = Math.min(
+          panel.max - startA,
+          // how much panel A can grow
+          startB - next.min
+          // how much panel B can shrink
+        );
+        const move = (e2) => {
+          const currentPos = split._h_split.state.isHorizontal ? e2.clientX : e2.clientY;
+          const delta = currentPos - startPos;
+          const clamped = Math.min(maxDelta, Math.max(minDelta, delta));
+          panel.size = startA + clamped;
+          next.size = startB - clamped;
+          panel.explicit = false;
+          if (panel.collapsed) {
+            panel.collapsed = false;
+          }
+          if (next.collapsed) {
+            next.collapsed = false;
+          }
+          split._h_split.panelChange();
+        };
+        const up = () => {
+          gutter.releasePointerCapture(e.pointerId);
+          gutter.removeEventListener("pointermove", move);
+          gutter.removeEventListener("pointerup", up);
+        };
+        gutter.addEventListener("pointermove", move);
+        gutter.addEventListener("pointerup", up);
+      };
+      gutter.addEventListener("pointerdown", drag);
+      const collapse = () => {
+        if (panel.collapsed) return;
+        panel.prevSize = panel.size;
+        panel.size = panel.min ?? 0;
+        panel.collapsed = true;
+        panel.explicit = true;
+        split._h_split.panelChange();
+      };
+      const expand = () => {
+        if (!panel.collapsed) return;
+        const target = panel.prevSize ?? panel.min ?? 0;
+        const delta = target - panel.size;
+        const visible = split._h_split.panels.filter((p) => !p.hidden && p !== panel);
+        let remaining = delta;
+        for (const p of visible) {
+          const available = p.size - p.min;
+          const take = Math.min(available, remaining);
+          p.size -= take;
+          remaining -= take;
+          if (remaining <= 0) break;
+        }
+        panel.size = target - remaining;
+        panel.collapsed = false;
+        panel.explicit = true;
+        split._h_split.panelChange();
+      };
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === "data-hidden") {
+            panel.hidden = el.getAttribute("data-hidden") === "true";
+            if (panel.hidden) {
+              el.classList.add("hidden");
+            } else {
+              el.classList.remove("hidden");
+            }
+            split._h_split.panelHidden();
+          } else if (mutation.attributeName === "data-locked") {
+            panel.setLocked();
+          } else {
+            if (el.getAttribute("data-collapse") === "true") {
+              collapse();
+            } else {
+              expand();
+            }
+          }
+        });
       });
-      observer.observe(el.parentElement, { attributes: true, attributeFilter: ["data-variant"] });
-      setVariant(el.parentElement.getAttribute("data-variant"));
+      observer.observe(el, { attributes: true, attributeFilter: ["data-hidden", "data-locked", "data-collapse"] });
       cleanup(() => {
+        gutter.remove();
+        gutter.removeEventListener("pointerdown", drag);
+        split._h_split.removePanel(panel);
         observer.disconnect();
       });
     });
@@ -7678,7 +8178,18 @@
   function table_default(Alpine) {
     Alpine.directive("h-table-container", (el, { modifiers }) => {
       if (modifiers.includes("scroll")) {
-        el.classList.add("overflow-scroll", "[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-2", "[&_tfoot]:sticky", "[&_tfoot]:bottom-0", "[&_tfoot]:z-2", "[&_tbody_tr_th]:sticky", "[&_tbody_tr_th]:left-0", "[&_tbody_tr_th]:z-1");
+        el.classList.add(
+          "overflow-scroll",
+          "[&_thead[data-slot|=table]]:sticky",
+          "[&_thead[data-slot|=table]]:top-0",
+          "[&_thead[data-slot|=table]]:z-2",
+          "[&_tfoot[data-slot|=table]]:sticky",
+          "[&_tfoot[data-slot|=table]]:bottom-0",
+          "[&_tfoot[data-slot|=table]]:z-2",
+          "[&_tbody_tr_th[data-slot|=table]]:sticky",
+          "[&_tbody_tr_th[data-slot|=table]]:left-0",
+          "[&_tbody_tr_th[data-slot|=table]]:z-1"
+        );
       } else {
         el.classList.add("relative", "w-full", "overflow-x-auto");
       }
@@ -7693,13 +8204,19 @@
       el.setAttribute("data-slot", "table");
       switch (el.getAttribute("data-borders")) {
         case "rows":
-          el.classList.add("[&_tr_td]:border-b", "[&_tr_th]:border-b", "first:[&_tfoot_tr_td]:border-t", "first:[&_tfoot_tr_th]:border-t");
+          el.classList.add("[&_tr_td[data-slot|=table]]:border-b", "[&_tr_th[data-slot|=table]]:border-b", "first:[&_tfoot_tr_td[data-slot|=table]]:border-t", "first:[&_tfoot_tr_th[data-slot|=table]]:border-t");
           break;
         case "columns":
-          el.classList.add("[&_tr]:divide-x");
+          el.classList.add("[&_tr[data-slot|=table]]:divide-x");
           break;
         case "both":
-          el.classList.add("[&_tr_td]:border-b", "[&_tr_th]:border-b", "first:[&_tfoot_tr_td]:border-t", "first:[&_tfoot_tr_th]:border-t", "[&_tr]:divide-x");
+          el.classList.add(
+            "[&_tr_td[data-slot|=table]]:border-b",
+            "[&_tr_th[data-slot|=table]]:border-b",
+            "first:[&_tfoot_tr_td[data-slot|=table]]:border-t",
+            "first:[&_tfoot_tr_th[data-slot|=table]]:border-t",
+            "[&_tr[data-slot|=table]]:divide-x"
+          );
           break;
       }
     });
@@ -7729,6 +8246,7 @@
     Alpine.directive("h-table-cell", (el) => {
       el.classList.add(
         "p-2",
+        "[&:has([data-slot|=cell-input])]:p-0",
         "align-middle",
         "whitespace-nowrap",
         "[&:has([role=checkbox])]:pr-0",
@@ -7741,15 +8259,47 @@
       );
       el.setAttribute("data-slot", "table-cell");
     });
+    Alpine.directive("h-table-cell-button", (el) => {
+      el.classList.add(
+        "px-2",
+        "size-full",
+        "h-10",
+        "cursor-pointer",
+        "inline-flex",
+        "items-center",
+        "justify-between",
+        "outline-none",
+        "gap-2",
+        "transition-[color,box-shadow]",
+        "[&_svg]:pointer-events-none",
+        "[&_svg]:opacity-70",
+        "[&_svg]:text-foreground",
+        "[&_svg]:transition-transform",
+        "[&_svg]:duration-200",
+        "[&_svg:not([class*='size-'])]:size-4",
+        "shrink-0",
+        "[&_svg]:shrink-0",
+        "focus-visible:inset-ring-ring/50",
+        "focus-visible:inset-ring-2",
+        "hover:bg-table-hover",
+        "hover:text-table-hover-foreground",
+        "active:!bg-table-active",
+        "active:!text-table-active-foreground",
+        "[&[data-state=open]>svg:not(:first-child):last-child]:rotate-180",
+        "[&[data-state=open]>svg:only-child]:rotate-180"
+      );
+      el.setAttribute("type", "button");
+      el.setAttribute("data-slot", "cell-input-button");
+    });
     Alpine.directive("h-table-body", (el) => {
       el.classList.add(
-        "[&_tr:last-child_td]:border-b-0",
-        "[&_tr:last-child_th]:border-b-0",
-        "[&_tr_th]:bg-table-header",
-        "[&_tr[data-hoverable=true]:hover_th]:bg-table-hover",
-        "[&_tr[data-hoverable=true]:hover_th]:text-table-hover-foreground",
-        "[&_tr[data-activable=true]:active_th]:!bg-table-active",
-        "[&_tr[data-activable=true]:active_th]:!text-table-active-foreground"
+        "[&_tr:last-child_td[data-slot|=table]]:border-b-0",
+        "[&_tr:last-child_th[data-slot|=table]]:border-b-0",
+        "[&_tr_th[data-slot|=table]]:bg-table-header",
+        "[&_tr[data-hoverable=true]:hover_th[data-slot|=table]]:bg-table-hover",
+        "[&_tr[data-hoverable=true]:hover_th[data-slot|=table]]:text-table-hover-foreground",
+        "[&_tr[data-activable=true]:active_th[data-slot|=table]]:!bg-table-active",
+        "[&_tr[data-activable=true]:active_th[data-slot|=table]]:!text-table-active-foreground"
       );
       el.setAttribute("data-slot", "table-body");
     });
@@ -7769,7 +8319,7 @@
       el.setAttribute("data-slot", "table-caption");
     });
     Alpine.directive("h-table-footer", (el) => {
-      el.classList.add("bg-table-header", "font-medium", "last:[&>tr_td]:border-b-0", "last:[&>tr_th]:border-b-0");
+      el.classList.add("bg-table-header", "font-medium", "last:[&>tr_td[data-slot|=table]]:border-b-0", "last:[&>tr_th[data-slot|=table]]:border-b-0");
       el.setAttribute("data-slot", "table-footer");
     });
   }
@@ -7823,7 +8373,7 @@
       el.setAttribute("role", "tablist");
       el.setAttribute("data-slot", "tab-list");
     });
-    Alpine.directive("h-tab", (el, { original }) => {
+    Alpine.directive("h-tab", (el, { original: original2 }) => {
       el.classList.add(
         "cursor-pointer",
         "focus-visible:border-ring",
@@ -7870,8 +8420,8 @@
       );
       el.setAttribute("role", "tab");
       el.setAttribute("data-slot", "tab");
-      if (!el.hasAttribute("id")) throw new Error(`${original}: Tabs must have an id`);
-      if (!el.hasAttribute("aria-controls")) throw new Error(`${original}: aria-controls must be set to the tab-content id.`);
+      if (!el.hasAttribute("id")) throw new Error(`${original2}: Tabs must have an id`);
+      if (!el.hasAttribute("aria-controls")) throw new Error(`${original2}: aria-controls must be set to the tab-content id.`);
     });
     Alpine.directive("h-tab-action", (el) => {
       el.classList.add("cursor-pointer", "ml-auto", "rounded-md", "text-foreground", "hover:bg-secondary", "hover:text-secondary-foreground", "active:bg-secondary-active");
@@ -7905,13 +8455,13 @@
       el.setAttribute("role", "button");
       el.setAttribute("data-slot", "tab-list-action");
     });
-    Alpine.directive("h-tabs-content", (el, { original }) => {
+    Alpine.directive("h-tabs-content", (el, { original: original2 }) => {
       el.classList.add("flex-1", "outline-none");
       el.setAttribute("role", "tabpanel");
       el.setAttribute("tabindex", "0");
       el.setAttribute("data-slot", "tabs-content");
-      if (!el.hasAttribute("id")) throw new Error(`${original}: Tab content must have an id`);
-      if (!el.hasAttribute("aria-labelledby")) throw new Error(`${original}: aria-labelledby must be set to the tab id.`);
+      if (!el.hasAttribute("id")) throw new Error(`${original2}: Tab content must have an id`);
+      if (!el.hasAttribute("aria-labelledby")) throw new Error(`${original2}: aria-labelledby must be set to the tab id.`);
     });
   }
 
@@ -8174,7 +8724,7 @@
     });
   }
   function timepicker_default(Alpine) {
-    Alpine.directive("h-time-picker", (el, { expression }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-time-picker", (el, { expression, modifiers }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
       el._h_timepicker = Alpine2.reactive({
         id: void 0,
         controls: `htpc${v4_default()}`,
@@ -8204,39 +8754,55 @@
       el.classList.add(
         "cursor-pointer",
         "border-input",
-        "[&>input]:appearance-none",
-        "has-[input:focus-visible]:border-ring",
-        "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
-        "has-[input:focus-visible]:ring-ring/50",
-        "has-[input[aria-invalid=true]]:ring-negative/20",
-        "has-[input[aria-invalid=true]]:border-negative",
-        "dark:has-[input[aria-invalid=true]]:ring-negative/40",
-        "has-[input:invalid]:ring-negative/20",
-        "has-[input:invalid]:border-negative",
-        "dark:has-[input:invalid]:ring-negative/40",
         "hover:bg-secondary-hover",
         "active:bg-secondary-active",
         "flex",
-        "w-full",
         "items-center",
         "justify-between",
         "gap-2",
-        "rounded-control",
-        "border",
-        "bg-input-inner",
         "pl-3",
         "pr-2",
         "data-[size=sm]:pr-1",
         "text-sm",
         "whitespace-nowrap",
-        "shadow-input",
         "transition-[color,box-shadow]",
         "duration-200",
         "outline-none",
         "has-[input:disabled]:pointer-events-none",
+        "has-[input:disabled]:cursor-not-allowed",
         "has-[input:disabled]:opacity-50"
       );
-      el.setAttribute("data-slot", "time-picker");
+      if (modifiers.includes("table")) {
+        el.classList.add(
+          "size-full",
+          "h-10",
+          "has-[input:focus-visible]:inset-ring-ring/50",
+          "has-[input:focus-visible]:inset-ring-2",
+          "has-[input[aria-invalid=true]]:inset-ring-negative/20",
+          "dark:has-[input[aria-invalid=true]]:inset-ring-negative/40",
+          "has-[input:invalid]:!inset-ring-negative/20",
+          "dark:has-[input:invalid]:!inset-ring-negative/40"
+        );
+        el.setAttribute("data-slot", "cell-input-time");
+      } else {
+        el.classList.add(
+          "w-full",
+          "rounded-control",
+          "border",
+          "bg-input-inner",
+          "shadow-input",
+          "has-[input:focus-visible]:border-ring",
+          "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
+          "has-[input:focus-visible]:ring-ring/50",
+          "has-[input[aria-invalid=true]]:ring-negative/20",
+          "has-[input[aria-invalid=true]]:border-negative",
+          "dark:has-[input[aria-invalid=true]]:ring-negative/40",
+          "has-[input:invalid]:ring-negative/20",
+          "has-[input:invalid]:border-negative",
+          "dark:has-[input:invalid]:ring-negative/40"
+        );
+        el.setAttribute("data-slot", "time-picker");
+      }
       el.setAttribute("tabindex", "-1");
       el.appendChild(
         createSvg({
@@ -8288,13 +8854,13 @@
         top.removeEventListener("click", el._h_timepicker.close);
       });
     });
-    Alpine.directive("h-time-picker-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-time-picker-input", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "INPUT") {
-        throw new Error(`${original} must be a readonly input of type "text"`);
+        throw new Error(`${original2} must be a readonly input of type "text"`);
       }
       const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
       if (!timepicker) {
-        throw new Error(`${original} must be inside a time-picker element`);
+        throw new Error(`${original2} must be inside a time-picker element`);
       }
       timepicker._h_timepicker.focusInput = () => {
         el.focus();
@@ -8322,7 +8888,20 @@
         timepicker._h_timepicker.id = `htp${v4_default()}`;
         el.setAttribute("id", timepicker._h_timepicker.id);
       }
-      el.classList.add("cursor-pointer", "bg-transparent", "text-transparent", "text-shadow-[0_0_0_var(--foreground)]", "placeholder:text-muted-foreground", "outline-none", "size-full", "border-0", "md:text-sm", "text-base", "truncate");
+      el.classList.add(
+        "appearance-none",
+        "cursor-pointer",
+        "bg-transparent",
+        "text-transparent",
+        "text-shadow-[0_0_0_var(--foreground)]",
+        "placeholder:text-muted-foreground",
+        "outline-none",
+        "size-full",
+        "border-0",
+        "md:text-sm",
+        "text-base",
+        "truncate"
+      );
       el.setAttribute("aria-autocomplete", "none");
       el.setAttribute("aria-controls", timepicker._h_timepicker.controls);
       el.setAttribute("aria-expanded", "false");
@@ -8870,8 +9449,8 @@
         "shrink-0",
         "items-center",
         "px-1",
-        'has-[>[data-slot="avatar"]:last-child]:pr-2',
-        'has-[>[data-slot="toolbar-image"]:first-child]:pl-2',
+        'has-[>[data-slot="avatar"]:last-of-type]:pr-2',
+        'has-[>[data-slot="toolbar-image"]:first-of-type]:pl-2',
         "gap-1",
         modifiers.includes("footer") ? "border-t" : "border-b",
         "w-full",
@@ -8930,7 +9509,7 @@
         el.removeEventListener("pointerleave", handler);
       });
     });
-    Alpine.directive("h-tooltip", (el, { original }, { effect }) => {
+    Alpine.directive("h-tooltip", (el, { original: original2 }, { effect }) => {
       const tooltip = (() => {
         let sibling = el.previousElementSibling;
         while (sibling && !sibling.hasOwnProperty("_tooltip")) {
@@ -8939,7 +9518,7 @@
         return sibling;
       })();
       if (!tooltip) {
-        throw new Error(`${original} must be placed after a tooltip trigger element`);
+        throw new Error(`${original2} must be placed after a tooltip trigger element`);
       }
       el.classList.add("absolute", "bg-foreground", "text-background", "z-50", "w-fit", "rounded-md", "px-3", "py-1.5", "text-xs", "text-balance");
       el.setAttribute("data-slot", "tooltip");
@@ -9145,9 +9724,9 @@
         });
       }
     });
-    Alpine.directive("h-tree-button", (el, { original }, { effect }) => {
+    Alpine.directive("h-tree-button", (el, { original: original2 }, { effect }) => {
       const treeItem = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_tree_item"));
-      if (!treeItem) throw new Error(`${original} must be inside a tree item`);
+      if (!treeItem) throw new Error(`${original2} must be inside a tree item`);
       el.classList.add(
         "flex",
         "w-full",
@@ -9302,7 +9881,7 @@
 
   // src/utils/template.js
   function template_default(Alpine) {
-    Alpine.directive("h-template", (el, { original, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-template", (el, { original: original2, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
       if (el.hasAttribute(Alpine2.prefixed("data"))) {
         const template = evaluate2(expression);
         const clone = template.content.cloneNode(true).firstElementChild;
@@ -9312,10 +9891,11 @@
           Alpine2.initTree(clone);
         });
         cleanup(() => {
+          Alpine2.destroyTree(clone);
           clone.remove();
         });
       } else {
-        console.error(`${original}: ${Alpine2.prefixed("data")} directive is missing`);
+        console.error(`${original2}: ${Alpine2.prefixed("data")} directive is missing`);
       }
     });
   }
@@ -9333,7 +9913,7 @@
   }
 
   // package.json
-  var version = "1.1.2";
+  var version = "1.2.1";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };