@codbex/harmonia 1.9.1 → 1.10.0

package/dist/harmonia.esm.js

@@ -4815,7 +4815,7 @@ function calendar_default(Alpine) {
     ];
     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({
@@ -4834,7 +4834,7 @@ function calendar_default(Alpine) {
     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({
@@ -4858,7 +4858,7 @@ function calendar_default(Alpine) {
     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({
@@ -4877,7 +4877,7 @@ function calendar_default(Alpine) {
     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({
@@ -5282,6 +5282,192 @@ function checkbox_default(Alpine) {
   });
 }
 
+// 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") {
@@ -5583,7 +5769,7 @@ function dialog_default(Alpine) {
     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);
@@ -5616,7 +5802,7 @@ function dialog_default(Alpine) {
     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);
@@ -5935,7 +6121,7 @@ function info_page_default(Alpine) {
   });
   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");
   });
 }
 
@@ -7886,6 +8072,7 @@ function select_default(Alpine) {
           displayValue.innerText = value;
           displayValue.classList.add("text-muted-foreground");
         } else {
+          displayValue.innerText = "";
           displayValue.classList.remove("text-muted-foreground");
         }
       }
@@ -8363,7 +8550,7 @@ function select_default(Alpine) {
           }
         } else if (select._h_model.get() !== getValue()) {
           select._h_model.set(getValue());
-        } else {
+        } else if (select.getAttribute("data-clearable") === "true") {
           select._h_model.set("");
         }
       }
@@ -10904,13 +11091,13 @@ function tooltip_default(Alpine) {
   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);
@@ -11244,7 +11431,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.9.1";
+var version = "1.10.0";
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
@@ -11489,6 +11676,7 @@ export {
   calendar_default as Calendar,
   card_default as Card,
   checkbox_default as Checkbox,
+  chip_default as Chip,
   datepicker_default as DatePicker,
   dialog_default as Dialog,
   expansion_panel_default as ExpansionPanel,