@codbex/harmonia 1.9.1 → 1.10.0

package/dist/harmonia.js

@@ -2909,7 +2909,7 @@
       ];
       const previousYearBtn = document.createElement("button");
       previousYearBtn.classList.add(...buttonClasses);
-      previousYearBtn.setAttribute("aria-label", el.hasAttribute("data-aria-prev-year") ? el.hasAttribute("data-aria-prev-year") : "previous year");
+      previousYearBtn.setAttribute("aria-label", el.hasAttribute("data-aria-prev-year") ? el.getAttribute("data-aria-prev-year") : "previous year");
       previousYearBtn.setAttribute("type", "button");
       previousYearBtn.appendChild(
         createSvg({
@@ -2928,7 +2928,7 @@
       header.appendChild(previousYearBtn);
       const previousMonthBtn = document.createElement("button");
       previousMonthBtn.classList.add(...buttonClasses);
-      previousMonthBtn.setAttribute("aria-label", el.hasAttribute("data-aria-prev-month") ? el.hasAttribute("data-aria-prev-month") : "previous month");
+      previousMonthBtn.setAttribute("aria-label", el.hasAttribute("data-aria-prev-month") ? el.getAttribute("data-aria-prev-month") : "previous month");
       previousMonthBtn.setAttribute("type", "button");
       previousMonthBtn.appendChild(
         createSvg({
@@ -2952,7 +2952,7 @@
       header.appendChild(headerLabel);
       const nextMonthBtn = document.createElement("button");
       nextMonthBtn.classList.add(...buttonClasses);
-      nextMonthBtn.setAttribute("aria-label", el.hasAttribute("data-aria-next-month") ? el.hasAttribute("data-aria-next-month") : "next month");
+      nextMonthBtn.setAttribute("aria-label", el.hasAttribute("data-aria-next-month") ? el.getAttribute("data-aria-next-month") : "next month");
       nextMonthBtn.setAttribute("type", "button");
       nextMonthBtn.appendChild(
         createSvg({
@@ -2971,7 +2971,7 @@
       header.appendChild(nextMonthBtn);
       const nextYearBtn = document.createElement("button");
       nextYearBtn.classList.add(...buttonClasses);
-      nextYearBtn.setAttribute("aria-label", el.hasAttribute("data-aria-next-year") ? el.hasAttribute("data-aria-next-year") : "next year");
+      nextYearBtn.setAttribute("aria-label", el.hasAttribute("data-aria-next-year") ? el.getAttribute("data-aria-next-year") : "next year");
       nextYearBtn.setAttribute("type", "button");
       nextYearBtn.appendChild(
         createSvg({
@@ -3376,6 +3376,192 @@
     });
   }
 
+  // src/components/chip.js
+  function chip_default(Alpine) {
+    Alpine.directive("h-chip", (el, { original }, { cleanup }) => {
+      if (el.tagName !== "BUTTON") {
+        throw new Error(`${original} must be a button element`);
+      }
+      el._h_chip = Alpine.reactive({
+        variant: "default"
+      });
+      el.classList.add(
+        "cursor-pointer",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "whitespace-nowrap",
+        "rounded-full",
+        "text-sm",
+        "leading-none",
+        "transform-gpu",
+        "overflow-hidden",
+        "transition-all",
+        "duration-100",
+        "motion-reduce:transition-none",
+        "disabled:pointer-events-none",
+        "disabled:opacity-50",
+        "[&_svg]:pointer-events-none",
+        "[&_svg:not([class*='size-'])]:size-4",
+        "shrink-0",
+        "[&_svg]:shrink-0",
+        "focus-visible:outline-[calc(var(--spacing)*0.75)]",
+        "focus-visible:outline",
+        "h-7",
+        "gap-1.5",
+        "px-2.5",
+        "has-[>svg]:pl-1.5",
+        "has-[>[data-slot=chip-close]]:pr-0",
+        "has-[>[data-slot=spinner]]:px-2",
+        "text-secondary-foreground",
+        "fill-secondary-foreground",
+        "border"
+      );
+      if (!el.hasAttribute("type")) {
+        el.setAttribute("type", "button");
+      }
+      el.setAttribute("data-slot", "chip");
+      const variants = {
+        default: ["bg-secondary", "[&:hover:not(:has([data-slot=chip-close]:hover)):not(:active)]:bg-secondary-hover", "[&:active:not(:has([data-slot=chip-close]:active))]:bg-secondary-active", "outline-ring/50"],
+        primary: [
+          "bg-primary/10",
+          "border-primary/50",
+          "[&>svg]:fill-primary",
+          "[&:hover:not(:has([data-slot=chip-close]:hover)):not(:active)]:bg-primary/15",
+          "[&:active:not(:has([data-slot=chip-close]:active))]:bg-primary/20",
+          "outline-primary/50"
+        ],
+        positive: [
+          "bg-positive/10",
+          "border-positive/50",
+          "[&>svg]:fill-positive",
+          "[&:hover:not(:has([data-slot=chip-close]:hover)):not(:active)]:bg-positive/15",
+          "[&:active:not(:has([data-slot=chip-close]:active))]:bg-positive/20",
+          "outline-positive/50"
+        ],
+        negative: [
+          "bg-negative/10",
+          "border-negative/50",
+          "[&>svg]:fill-negative",
+          "[&:hover:not(:has([data-slot=chip-close]:hover)):not(:active)]:bg-negative/15",
+          "[&:active:not(:has([data-slot=chip-close]:active))]:bg-negative/20",
+          "outline-negative/50"
+        ],
+        warning: [
+          "bg-warning/10",
+          "border-warning/50",
+          "[&>svg]:fill-warning",
+          "[&:hover:not(:has([data-slot=chip-close]:hover)):not(:active)]:bg-warning/15",
+          "[&:active:not(:has([data-slot=chip-close]:active))]:bg-warning/20",
+          "outline-warning/50"
+        ],
+        information: [
+          "bg-information/10",
+          "border-information/50",
+          "[&>svg]:fill-information",
+          "[&:hover:not(:has([data-slot=chip-close]:hover)):not(:active)]:bg-information/15",
+          "[&:active:not(:has([data-slot=chip-close]:active))]:bg-information/20",
+          "outline-information/50"
+        ],
+        outline: [
+          "bg-background",
+          "[&>svg]:fill-secondary-foreground",
+          "[&:hover:not(:has([data-slot=chip-close]:hover)):not(:active)]:bg-secondary-hover",
+          "[&:active:not(:has([data-slot=chip-close]:active))]:bg-secondary-active",
+          "outline-ring/50"
+        ]
+      };
+      function setVariant(variant) {
+        el._h_chip.variant = variant;
+        for (const [_, value] of Object.entries(variants)) {
+          el.classList.remove(...value);
+        }
+        if (Object.prototype.hasOwnProperty.call(variants, variant)) el.classList.add(...variants[variant]);
+      }
+      setVariant(el.getAttribute("data-variant") ?? "default");
+      const observer = new MutationObserver(() => {
+        setVariant(el.getAttribute("data-variant") ?? "default");
+      });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant"] });
+      cleanup(() => {
+        observer.disconnect();
+      });
+    });
+    Alpine.directive("h-chip-close", (el, { original }, { effect, cleanup }) => {
+      if (el.tagName === "BUTTON") {
+        throw new Error(`${original} must NOT be a button element`);
+      }
+      const chip = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_chip"));
+      el.classList.add(
+        "cursor-pointer",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "pl-1",
+        "pr-1.5",
+        "h-full",
+        "text-sm",
+        "transition-all",
+        "duration-100",
+        "motion-reduce:transition-none",
+        "disabled:pointer-events-none",
+        "disabled:opacity-50",
+        "bg-transparent",
+        "text-secondary-foreground",
+        "fill-secondary-foreground",
+        "rounded-r-full",
+        "border-l",
+        "border-transparent",
+        "outline-none",
+        "focus-visible:inset-ring-[calc(var(--spacing)*0.75)]",
+        "focus-visible:inset-ring",
+        "hover:[[data-variant]>&]:border-inherit",
+        "active:border-inherit",
+        "aria-pressed:border-inherit"
+      );
+      el.setAttribute("data-slot", "chip-close");
+      el.setAttribute("tabindex", "0");
+      el.setAttribute("role", "button");
+      el.appendChild(
+        createSvg({
+          icon: Close,
+          classes: "size-3.5 shrink-0 pointer-events-none",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
+      if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
+        console.error(`${original}: Must have an "aria-label" or "aria-labelledby" attribute`, el);
+      }
+      const variants = {
+        default: ["hover:border-foreground/20", "hover:bg-secondary-hover", "active:bg-secondary-active", "focus-visible:inset-ring-ring/50"],
+        primary: ["hover:bg-primary/10", "active:bg-primary/15", "aria-pressed:bg-primary/15", "focus-visible:inset-ring-primary/50"],
+        positive: ["hover:bg-positive/10", "active:bg-positive/15", "aria-pressed:bg-positive/15", "focus-visible:inset-ring-positive/50"],
+        negative: ["hover:bg-negative/10", "active:bg-negative/15", "aria-pressed:bg-negative/15", "focus-visible:inset-ring-negative/50"],
+        warning: ["hover:bg-warning/10", "active:bg-warning/15", "aria-pressed:bg-warning/15", "focus-visible:inset-ring-warning/50"],
+        information: ["hover:bg-information/10", "active:bg-information/15", "aria-pressed:bg-information/15", "focus-visible:inset-ring-information/50"],
+        outline: ["hover:bg-secondary-hover", "active:bg-secondary-active", "aria-pressed:bg-secondary-active", "focus-visible:inset-ring-ring/50"]
+      };
+      effect(() => {
+        for (const [_, value] of Object.entries(variants)) {
+          el.classList.remove(...value);
+        }
+        if (Object.prototype.hasOwnProperty.call(variants, chip._h_chip.variant)) {
+          el.classList.add(...variants[chip._h_chip.variant]);
+        }
+      });
+      const stopPropagation = (event) => {
+        if (chip.getAttribute("aria-expanded") !== "true") event.stopPropagation();
+      };
+      el.addEventListener("click", stopPropagation);
+      cleanup(() => {
+        el.removeEventListener("click", stopPropagation);
+      });
+    });
+  }
+
   // src/common/input-size.js
   function setSize(el, size3) {
     if (size3 === "sm") {
@@ -3677,7 +3863,7 @@
       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"))) {
+      if (dialog && !dialog.hasAttribute("aria-labelledby") && !dialog.hasAttribute("aria-label")) {
         if (!el.hasAttribute("id")) {
           const id = `dht${uuid_default()}`;
           el.setAttribute("id", id);
@@ -3710,7 +3896,7 @@
       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"))) {
+      if (dialog && !dialog.hasAttribute("aria-describedby") && !dialog.hasAttribute("aria-description")) {
         if (!el.hasAttribute("id")) {
           const id = `dhd${uuid_default()}`;
           el.setAttribute("id", id);
@@ -4029,7 +4215,7 @@
     });
     Alpine.directive("h-info-page-content", (el) => {
       el.classList.add("vbox", "w-full", "max-w-sm", "min-w-0", "items-center", "gap-4", "text-sm", "text-balance");
-      el.setAttribute("data-slot", "info-page-description");
+      el.setAttribute("data-slot", "info-page-content");
     });
   }
 
@@ -7839,6 +8025,7 @@
             displayValue.innerText = value;
             displayValue.classList.add("text-muted-foreground");
           } else {
+            displayValue.innerText = "";
             displayValue.classList.remove("text-muted-foreground");
           }
         }
@@ -8316,7 +8503,7 @@
             }
           } else if (select._h_model.get() !== getValue()) {
             select._h_model.set(getValue());
-          } else {
+          } else if (select.getAttribute("data-clearable") === "true") {
             select._h_model.set("");
           }
         }
@@ -10857,13 +11044,13 @@
     Alpine.directive("h-tooltip-trigger", (el, _, { Alpine: Alpine2, cleanup }) => {
       el._tooltip = Alpine2.reactive({
         id: void 0,
-        controls: `hpc${uuid_default()}`,
+        controls: `htp${uuid_default()}`,
         shown: false
       });
       if (el.hasAttribute("id")) {
         el._tooltip.id = el.getAttribute("id");
       } else {
-        el._tooltip.id = `hp${uuid_default()}`;
+        el._tooltip.id = `htt${uuid_default()}`;
         el.setAttribute("id", el._tooltip.id);
       }
       el.setAttribute("aria-describedby", el._tooltip.controls);
@@ -11382,7 +11569,7 @@
   }
 
   // package.json
-  var version = "1.9.1";
+  var version = "1.10.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };
@@ -11395,6 +11582,7 @@
     window.Alpine.plugin(calendar_default);
     window.Alpine.plugin(card_default);
     window.Alpine.plugin(checkbox_default);
+    window.Alpine.plugin(chip_default);
     window.Alpine.plugin(datepicker_default);
     window.Alpine.plugin(dialog_default);
     window.Alpine.plugin(expansion_panel_default);