maz-ui 4.0.0-beta.5 → 4.0.0-beta.6

package/dist/components/MazPopover.js

@@ -1,10 +1,9 @@
-import { defineComponent, mergeModels, useAttrs, useTemplateRef, useModel, ref, computed, nextTick, watch, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createBlock, mergeProps, renderSlot, Teleport, createVNode, Transition, withCtx, withDirectives, createCommentVNode } from "vue";
+import { defineComponent, mergeModels, useAttrs, useTemplateRef, useModel, ref, computed, nextTick, watch, onMounted, onBeforeUnmount, onUnmounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createBlock, mergeProps, renderSlot, Teleport, createVNode, Transition, withCtx, withDirectives, createCommentVNode } from "vue";
 import { i as isClient } from "../chunks/isClient.WI4oSt66.js";
-import { t as throttle } from "../chunks/throttle.DN8ARw0a.js";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import { d as directive } from "../chunks/vClickOutside.C69k0jaG.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expanded", "aria-haspopup", "aria-describedby", "aria-labelledby"], _hoisted_2 = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby", "aria-modal", "tabindex", "aria-live"], _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/MazPopover.D-WwUjU_.css';const _hoisted_1 = ["id", "aria-expanded", "aria-haspopup", "aria-describedby", "aria-labelledby"], _hoisted_2 = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby", "aria-modal", "tabindex", "aria-live"], _sfc_main = /* @__PURE__ */ defineComponent({
   name: "MazPopover",
   inheritAttrs: !1,
   __name: "MazPopover",
@@ -36,7 +35,7 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
     trapFocus: { type: Boolean, default: !0 },
     keepOpenOnHover: { type: Boolean, default: !1 },
     block: { type: Boolean, default: !1 },
-    positionDelay: { default: 50 }
+    positionReference: {}
   }, {
     modelValue: { type: Boolean, required: !1, default: !1 },
     modelModifiers: {}
@@ -46,7 +45,17 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
     const emits = __emit, triggerId = useInstanceUniqId({
       componentName: "MazPopover",
       providedId: __props.id
-    }), attrs = useAttrs(), triggerElement = useTemplateRef("trigger"), panelElement = useTemplateRef("panel"), isOpen = useModel(__props, "modelValue"), computedPosition = ref(__props.position);
+    }), attrs = useAttrs(), triggerElement = useTemplateRef("trigger"), panelElement = useTemplateRef("panel");
+    function getPositionReference() {
+      if (!__props.positionReference)
+        return triggerElement.value;
+      if (typeof __props.positionReference == "string") {
+        const withinTrigger = triggerElement.value?.querySelector(__props.positionReference);
+        return withinTrigger || document.querySelector(__props.positionReference);
+      }
+      return __props.positionReference;
+    }
+    const isOpen = useModel(__props, "modelValue"), computedPosition = ref(__props.position === "auto" ? "bottom" : __props.position);
     let openTimeout = null, closeTimeout = null, initialFocusElement = null, ignoreNextClickOutside = !1;
     const panelId = computed(() => `${triggerId.value}-panel`), panelStyles = ref(), rootStyles = computed(() => attrs.style), isTouchDevice = computed(() => isClient() ? "ontouchstart" in window || navigator.maxTouchPoints > 0 : !1), effectiveTrigger = computed(() => __props.trigger === "adaptive" ? isTouchDevice.value ? "click" : "hover" : __props.trigger), triggerEvents = computed(() => {
       if (__props.disabled || effectiveTrigger.value === "manual")
@@ -68,33 +77,72 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
       `--position-${computedPosition.value}`,
       `--${__props.color}`
     ]);
-    let resizeObserver = null, mutationObserver = null, isUpdatingPosition = !1;
+    let resizeObserver = null, mutationObserver = null, isPositioning = !1, positioningFrame = null;
+    function calculateAndApplyPosition(options = {}) {
+      if (!triggerElement.value || !panelElement.value || isPositioning)
+        return null;
+      const { applyStyles = !0, forAnimation = !1 } = options;
+      applyStyles && (isPositioning = !0, positioningFrame && cancelAnimationFrame(positioningFrame));
+      const doCalculation = () => {
+        if (!triggerElement.value || !panelElement.value)
+          return applyStyles && (isPositioning = !1), null;
+        try {
+          const viewport = { width: window.innerWidth, height: window.innerHeight }, positionRef = getPositionReference();
+          if (!positionRef)
+            return applyStyles && (isPositioning = !1), null;
+          const triggerRect = positionRef.getBoundingClientRect();
+          let wasHidden = !1;
+          forAnimation && (wasHidden = panelElement.value.style.visibility === "hidden", panelElement.value.style.visibility = "hidden", panelElement.value.style.display = "block");
+          let newPosition;
+          if (__props.position === "auto" ? newPosition = getBestPosition(triggerRect, viewport) : newPosition = __props.position, computedPosition.value = newPosition, applyStyles) {
+            const panelRect = panelElement.value.getBoundingClientRect(), styles = calculatePosition(newPosition, triggerRect, panelRect);
+            panelStyles.value = styles;
+          }
+          return forAnimation && !applyStyles && (wasHidden ? panelElement.value.style.visibility = "hidden" : panelElement.value.style.display = ""), newPosition;
+        } catch (error) {
+          return console.warn("[MazPopover] Error calculating position:", error), null;
+        } finally {
+          applyStyles && (isPositioning = !1, positioningFrame = null);
+        }
+      };
+      return applyStyles ? (positioningFrame = requestAnimationFrame(doCalculation), null) : doCalculation();
+    }
     function updatePosition() {
-      if (!triggerElement.value || !panelElement.value || isUpdatingPosition)
-        return;
-      isUpdatingPosition = !0;
-      const viewport = { width: window.innerWidth, height: window.innerHeight }, scrollTop = window.scrollY || document.documentElement.scrollTop, scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-      let newPosition;
-      const triggerRect = triggerElement.value.getBoundingClientRect();
-      __props.position === "auto" ? newPosition = getBestPosition(triggerRect, viewport) : newPosition = __props.position;
-      const panelRect = panelElement.value.getBoundingClientRect(), coordinates = calculatePosition(newPosition, triggerRect, panelRect, scrollTop, scrollLeft);
-      panelStyles.value = {
-        position: "absolute",
-        top: `${coordinates.top}px`,
-        left: `${coordinates.left}px`,
-        visibility: "visible"
-      }, computedPosition.value = newPosition, isUpdatingPosition = !1;
+      calculateAndApplyPosition({ applyStyles: !0 });
+    }
+    function schedulePositionUpdate() {
+      isOpen.value && !isPositioning && updatePosition();
+    }
+    function preparePositionForAnimation() {
+      if (__props.position === "auto" && triggerElement.value) {
+        const positionRef = getPositionReference();
+        if (positionRef) {
+          const triggerRect = positionRef.getBoundingClientRect(), viewport = { width: window.innerWidth, height: window.innerHeight }, newPosition = getBestPosition(triggerRect, viewport);
+          computedPosition.value = newPosition;
+        }
+      }
+      return calculateAndApplyPosition({ applyStyles: !1, forAnimation: !0 });
     }
-    const trottledUpdatePosition = throttle(() => {
-      isOpen.value && !isUpdatingPosition && nextTick(updatePosition);
-    }, 16);
     function setupObservers() {
-      panelElement.value && (window.ResizeObserver && (resizeObserver = new ResizeObserver(() => {
-        isUpdatingPosition || trottledUpdatePosition();
-      }), resizeObserver.observe(panelElement.value)), mutationObserver = new MutationObserver((mutations) => {
-        if (isUpdatingPosition)
+      if (!panelElement.value || !triggerElement.value)
+        return;
+      const positionRef = getPositionReference();
+      positionRef && (window.ResizeObserver && (resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries)
+          if (entry.target === panelElement.value || entry.target === triggerElement.value || entry.target === positionRef) {
+            schedulePositionUpdate();
+            break;
+          }
+      }), resizeObserver.observe(panelElement.value), resizeObserver.observe(triggerElement.value), positionRef !== triggerElement.value && resizeObserver.observe(positionRef), resizeObserver.observe(document.documentElement)), mutationObserver = new MutationObserver((mutations) => {
+        if (isPositioning)
           return;
-        mutations.filter((mutation) => mutation.target === panelElement.value && mutation.type === "attributes" && mutation.attributeName === "style" ? !1 : mutation.type === "childList" || mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target !== panelElement.value).length > 0 && trottledUpdatePosition();
+        let shouldUpdate = !1;
+        for (const mutation of mutations)
+          if (!(mutation.target === panelElement.value && mutation.type === "attributes" && mutation.attributeName === "style") && (mutation.type === "childList" || mutation.type === "attributes" && mutation.attributeName === "class")) {
+            shouldUpdate = !0;
+            break;
+          }
+        shouldUpdate && schedulePositionUpdate();
       }), mutationObserver.observe(panelElement.value, {
         childList: !0,
         subtree: !0,
@@ -103,10 +151,10 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
       }));
     }
     function cleanupObservers() {
-      resizeObserver && (resizeObserver.disconnect(), resizeObserver = null), mutationObserver && (mutationObserver.disconnect(), mutationObserver = null);
+      positioningFrame && (cancelAnimationFrame(positioningFrame), positioningFrame = null), resizeObserver && (resizeObserver.disconnect(), resizeObserver = null), mutationObserver && (mutationObserver.disconnect(), mutationObserver = null);
     }
     function open() {
-      __props.disabled || (clearCloseTimeout(), ignoreNextClickOutside = !0, __props.delay > 0 ? openTimeout = setTimeout(() => {
+      __props.disabled || (clearCloseTimeout(), effectiveTrigger.value === "click" && (ignoreNextClickOutside = !0), __props.delay > 0 ? openTimeout = setTimeout(() => {
         setOpen(!0);
       }, __props.delay) : setOpen(!0));
     }
@@ -121,11 +169,15 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
       isOpen.value ? close() : open();
     }
     function setOpen(value) {
-      isOpen.value = value, emits("toggle", value), value ? (emits("open"), setupFocusTrap(), nextTick(() => {
-        setTimeout(() => {
-          updatePosition(), setupObservers();
-        }, __props.positionDelay);
-      })) : (emits("close"), panelStyles.value = void 0, ignoreNextClickOutside = !1, cleanupObservers(), __props.trapFocus && restoreFocus());
+      value ? (emits("open"), nextTick(() => {
+        triggerElement.value && panelElement.value && preparePositionForAnimation(), (() => {
+          isOpen.value = value, emits("toggle", value), updatePosition(), setupObservers(), setupFocusTrap();
+        })();
+      })) : (isOpen.value = value, emits("toggle", value), emits("close"), panelStyles.value = {
+        position: "fixed",
+        visibility: "hidden",
+        pointerEvents: "none"
+      }, ignoreNextClickOutside = !1, cleanupObservers(), __props.trapFocus && restoreFocus());
     }
     function clearOpenTimeout() {
       openTimeout && (clearTimeout(openTimeout), openTimeout = null);
@@ -133,39 +185,15 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
     function clearCloseTimeout() {
       closeTimeout && (clearTimeout(closeTimeout), closeTimeout = null);
     }
-    function getIsVisible(coords, panelRect, viewport, scrollTop, scrollLeft) {
-      return coords.left >= scrollLeft && coords.left + panelRect.width <= scrollLeft + viewport.width && coords.top >= scrollTop && coords.top + panelRect.height <= scrollTop + viewport.height;
-    }
-    function isPositionVisible(position, triggerRect, panelRect, viewport, scrollTop, scrollLeft) {
-      const coords = calculatePosition(position, triggerRect, panelRect, scrollTop, scrollLeft);
-      return getIsVisible(coords, panelRect, viewport, scrollTop, scrollLeft);
-    }
-    function getValidPositions(positions, triggerRect, panelRect, viewport, scrollTop, scrollLeft) {
-      const spaces = {
-        bottom: viewport.height + scrollTop - triggerRect.bottom,
-        top: triggerRect.top - scrollTop,
-        right: viewport.width + scrollLeft - triggerRect.right,
-        left: triggerRect.left - scrollLeft
-      };
-      return positions.reduce((acc, pos) => {
-        if (isPositionVisible(pos, triggerRect, panelRect, viewport, scrollTop, scrollLeft)) {
-          let positionBonus = 0;
-          pos === "bottom" ? positionBonus = 1e3 : pos === "top" ? positionBonus = 800 : pos === "right" ? positionBonus = 600 : pos === "left" && (positionBonus = 400);
-          const score = spaces[pos] + positionBonus;
-          acc.push({ position: pos, score });
-        }
-        return acc;
-      }, []);
-    }
     function getBestPosition(triggerRect, viewport) {
       if (!panelElement.value)
         return "bottom";
-      const panelRect = panelElement.value.getBoundingClientRect(), scrollTop = window.scrollY || document.documentElement.scrollTop, scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-      if (__props.preferPosition && isPositionVisible(__props.preferPosition, triggerRect, panelRect, viewport, scrollTop, scrollLeft))
+      const panelRect = panelElement.value.getBoundingClientRect();
+      if (__props.preferPosition && isPositionVisible(__props.preferPosition, triggerRect, panelRect, viewport))
         return __props.preferPosition;
       if (__props.preferPosition && __props.fallbackPosition)
         return __props.fallbackPosition;
-      const positions = ["bottom", "top", "right", "left"], validPositions = getValidPositions(positions, triggerRect, panelRect, viewport, scrollTop, scrollLeft);
+      const positions = ["bottom", "top", "right", "left"], validPositions = getValidPositions(positions, triggerRect, panelRect, viewport);
       if (validPositions.length === 0) {
         const spaces = {
           top: triggerRect.top,
@@ -177,31 +205,87 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
       }
       return validPositions.sort((a, b) => b.score - a.score)[0].position;
     }
-    function calculatePosition(position, triggerRect, panelRect, scrollTop, scrollLeft) {
-      let top = 0, left = 0;
+    function calculatePosition(position, triggerRect, _panelRect) {
+      const viewport = { width: window.innerWidth, height: window.innerHeight }, styles = {
+        position: "fixed",
+        visibility: "visible",
+        transformOrigin: getTransformOrigin(position)
+      };
       switch (position) {
         case "top":
         case "top-start":
         case "top-end":
-          top = triggerRect.top + scrollTop - panelRect.height - __props.offset, position === "top-start" ? left = triggerRect.left + scrollLeft : position === "top-end" ? left = triggerRect.right + scrollLeft - panelRect.width : left = triggerRect.left + scrollLeft + (triggerRect.width - panelRect.width) / 2;
+          styles.bottom = `${viewport.height - triggerRect.top + __props.offset}px`, position === "top-start" ? styles.left = `${triggerRect.left}px` : position === "top-end" ? styles.right = `${viewport.width - triggerRect.right}px` : styles.left = `${triggerRect.left + triggerRect.width / 2 - _panelRect.width / 2}px`;
           break;
         case "bottom":
         case "bottom-start":
         case "bottom-end":
-          top = triggerRect.bottom + scrollTop + __props.offset, position === "bottom-start" ? left = triggerRect.left + scrollLeft : position === "bottom-end" ? left = triggerRect.right + scrollLeft - panelRect.width : left = triggerRect.left + scrollLeft + (triggerRect.width - panelRect.width) / 2;
+          styles.top = `${triggerRect.bottom + __props.offset}px`, position === "bottom-start" ? styles.left = `${triggerRect.left}px` : position === "bottom-end" ? styles.right = `${viewport.width - triggerRect.right}px` : styles.left = `${triggerRect.left + triggerRect.width / 2 - _panelRect.width / 2}px`;
           break;
         case "left":
         case "left-start":
         case "left-end":
-          left = triggerRect.left + scrollLeft - panelRect.width - __props.offset, position === "left-start" ? top = triggerRect.top + scrollTop : position === "left-end" ? top = triggerRect.bottom + scrollTop - panelRect.height : top = triggerRect.top + scrollTop + (triggerRect.height - panelRect.height) / 2;
+          styles.right = `${viewport.width - triggerRect.left + __props.offset}px`, position === "left-start" ? styles.top = `${triggerRect.top}px` : position === "left-end" ? styles.bottom = `${viewport.height - triggerRect.bottom}px` : styles.top = `${triggerRect.top + triggerRect.height / 2 - _panelRect.height / 2}px`;
           break;
         case "right":
         case "right-start":
         case "right-end":
-          left = triggerRect.right + scrollLeft + __props.offset, position === "right-start" ? top = triggerRect.top + scrollTop : position === "right-end" ? top = triggerRect.bottom + scrollTop - panelRect.height : top = triggerRect.top + scrollTop + (triggerRect.height - panelRect.height) / 2;
+          styles.left = `${triggerRect.right + __props.offset}px`, position === "right-start" ? styles.top = `${triggerRect.top}px` : position === "right-end" ? styles.bottom = `${viewport.height - triggerRect.bottom}px` : styles.top = `${triggerRect.top + triggerRect.height / 2 - _panelRect.height / 2}px`;
           break;
       }
-      return { top, left };
+      return styles;
+    }
+    function getTransformOrigin(position) {
+      switch (position) {
+        case "top":
+          return "center bottom";
+        case "top-start":
+          return "left bottom";
+        case "top-end":
+          return "right bottom";
+        case "bottom":
+          return "center top";
+        case "bottom-start":
+          return "left top";
+        case "bottom-end":
+          return "right top";
+        case "left":
+          return "right center";
+        case "left-start":
+          return "right top";
+        case "left-end":
+          return "right bottom";
+        case "right":
+          return "left center";
+        case "right-start":
+          return "left top";
+        case "right-end":
+          return "left bottom";
+        default:
+          return "center";
+      }
+    }
+    function isPositionVisible(position, triggerRect, panelRect, viewport) {
+      const styles = calculatePosition(position, triggerRect, panelRect);
+      let top = 0, left = 0;
+      return styles.top ? top = Number.parseInt(styles.top) : styles.bottom && (top = viewport.height - Number.parseInt(styles.bottom) - panelRect.height), styles.left ? left = Number.parseInt(styles.left) : styles.right && (left = viewport.width - Number.parseInt(styles.right) - panelRect.width), styles.transform?.includes("translateX(-50%)") && (left -= panelRect.width / 2), styles.transform?.includes("translateY(-50%)") && (top -= panelRect.height / 2), left >= 0 && left + panelRect.width <= viewport.width && top >= 0 && top + panelRect.height <= viewport.height;
+    }
+    function getValidPositions(positions, triggerRect, panelRect, viewport) {
+      const spaces = {
+        bottom: viewport.height - triggerRect.bottom,
+        top: triggerRect.top,
+        right: viewport.width - triggerRect.right,
+        left: triggerRect.left
+      };
+      return positions.reduce((acc, pos) => {
+        if (isPositionVisible(pos, triggerRect, panelRect, viewport)) {
+          let positionBonus = 0;
+          pos === "bottom" ? positionBonus = 1e3 : pos === "top" ? positionBonus = 800 : pos === "right" ? positionBonus = 600 : pos === "left" && (positionBonus = 400);
+          const score = spaces[pos] + positionBonus;
+          acc.push({ position: pos, score });
+        }
+        return acc;
+      }, []);
     }
     function setupFocusTrap() {
       __props.role === "tooltip" || __props.role === "menu" || effectiveTrigger.value === "hover" || !__props.trapFocus || (initialFocusElement = document.activeElement, nextTick(() => {
@@ -243,17 +327,19 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
         }
       }
     }
-    function onScroll() {
-      isOpen.value && updatePosition();
+    function onScrollThrottled() {
+      isOpen.value && schedulePositionUpdate();
     }
     return watch(isOpen, (value, oldValue) => {
       !isClient() || value === oldValue || (value ? open() : oldValue && !value && close());
-    }, { immediate: !0 }), watch(() => __props.position, () => {
-      isOpen.value && nextTick(updatePosition);
+    }, { immediate: !0 }), watch(() => __props.position, (newPosition) => {
+      newPosition !== "auto" && (computedPosition.value = newPosition), isOpen.value && nextTick(updatePosition);
     }), onMounted(() => {
-      document.addEventListener("keydown", onKeydown), window.addEventListener("scroll", onScroll, !0), window.addEventListener("resize", onScroll);
+      document.addEventListener("keydown", onKeydown), window.addEventListener("scroll", onScrollThrottled, { passive: !0, capture: !0 }), window.addEventListener("resize", onScrollThrottled, { passive: !0 });
+    }), onBeforeUnmount(() => {
+      cleanupObservers(), clearOpenTimeout(), clearCloseTimeout();
     }), onUnmounted(() => {
-      document.removeEventListener("keydown", onKeydown), window.removeEventListener("scroll", onScroll, !0), window.removeEventListener("resize", onScroll), clearOpenTimeout(), clearCloseTimeout(), cleanupObservers();
+      document.removeEventListener("keydown", onKeydown), window.removeEventListener("scroll", onScrollThrottled, !0), window.removeEventListener("resize", onScrollThrottled);
     }), __expose({
       /**
        * Open the popover
@@ -352,7 +438,7 @@ import '../assets/MazPopover.COR-tym7.css';const _hoisted_1 = ["id", "aria-expan
       ], 8, ["to", "disabled"]))
     ], 6));
   }
-}), MazPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ea83582e"]]);
+}), MazPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2e23bfe3"]]);
 export {
   MazPopover as default
 };

package/dist/components/MazRadio.js

@@ -1,7 +1,7 @@
-import { defineComponent, computed, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, mergeProps, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazRadio.DKMFWwy_.css';const _hoisted_1 = ["for", "aria-checked"], _hoisted_2 = ["id", "value", "disabled", "name", "checked"], _hoisted_3 = { class: "m-radio__text" }, _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/MazRadio.XGYnbTuB.css';const _hoisted_1 = ["for", "aria-checked"], _hoisted_2 = ["id", "value", "disabled", "name", "checked"], _hoisted_3 = { class: "m-radio__text" }, _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazRadio",
   props: {
     style: { default: void 0 },
@@ -24,7 +24,7 @@ import '../assets/MazRadio.DKMFWwy_.css';const _hoisted_1 = ["for", "aria-checke
     const props = __props, emits = __emit, instanceId = useInstanceUniqId({
       componentName: "MazRadio",
       providedId: props.id
-    }), isSelected = computed(() => props.modelValue === props.value), radioSize = computed(() => {
+    }), inputRef = ref(), isFocused = ref(!1), isSelected = computed(() => props.modelValue === props.value), radioSize = computed(() => {
       switch (props.size) {
         case "xl":
           return "2.25rem";
@@ -39,30 +39,22 @@ import '../assets/MazRadio.DKMFWwy_.css';const _hoisted_1 = ["for", "aria-checke
         default:
           return "1.625rem";
       }
-    }), radioSelectedColor = computed(() => `hsl(var(--maz-${props.color}))`), radioBoxShadow = computed(() => {
-      if (props.error)
-        return "hsl(var(--maz-destructive))";
-      if (props.warning)
-        return "hsl(var(--maz-warning))";
-      if (props.success)
-        return "hsl(var(--maz-success))";
-    });
+    }), radioSelectedColor = computed(() => `hsl(var(--maz-${props.color}))`), radioBoxShadow = computed(() => props.error && !isFocused.value ? "hsl(var(--maz-destructive))" : props.warning && !isFocused.value ? "hsl(var(--maz-warning))" : props.success && !isFocused.value ? "hsl(var(--maz-success))" : ["transparent", "contrast"].includes(props.color) ? "hsl(var(--maz-muted))" : `hsl(var(--maz-${props.color}) / 60%)`);
     function keyboardHandler(event) {
       ["Space"].includes(event.code) && (event.preventDefault(), emitValue());
     }
     function emitValue() {
       emits("update:model-value", props.value), emits("change", props.value);
     }
-    const inputRef = ref();
     function onBlur(event) {
-      inputRef.value?.dispatchEvent(new Event("blur")), emits("blur", event);
+      isFocused.value = !1, inputRef.value?.dispatchEvent(new Event("blur")), emits("blur", event);
     }
     function onFocus(event) {
-      inputRef.value?.dispatchEvent(new Event("focus")), emits("focus", event);
+      isFocused.value = !0, inputRef.value?.dispatchEvent(new Event("focus")), emits("focus", event);
     }
     return (_ctx, _cache) => (openBlock(), createElementBlock("label", {
       for: unref(instanceId),
-      class: normalizeClass(["m-radio m-reset-css", [{ "--disabled": _ctx.disabled, "--selected": isSelected.value, "--error": _ctx.error, "--warning": _ctx.warning, "--success": _ctx.success }, props.class]]),
+      class: normalizeClass(["m-radio m-reset-css", [{ "--selected": isSelected.value, "--error": _ctx.error, "--warning": _ctx.warning, "--success": _ctx.success }, props.class]]),
       tabindex: "0",
       role: "radio",
       style: normalizeStyle([_ctx.style, { "--radio-size": radioSize.value, "--radio-selected-color": radioSelectedColor.value, "--radio-box-shadow": radioBoxShadow.value }]),
@@ -105,7 +97,7 @@ import '../assets/MazRadio.DKMFWwy_.css';const _hoisted_1 = ["for", "aria-checke
       ])
     ], 46, _hoisted_1));
   }
-}), MazRadio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3752b2a5"]]);
+}), MazRadio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bd84ba83"]]);
 export {
   MazRadio as default
 };

package/dist/components/MazRadioButtons.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, Fragment, renderList, normalizeStyle, renderSlot, createVNode, Transition, withCtx, withDirectives, unref, vShow, createTextVNode, toDisplayString } from "vue";
-import { i as it } from "../chunks/index.CvKh762h.js";
+import { MazCheck } from "@maz-ui/icons";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
 import '../assets/MazRadioButtons.BA4rjgK9.css';const _hoisted_1 = { class: "m-radio-buttons m-reset-css" }, _hoisted_2 = ["for", "aria-checked", "onKeydown", "onBlur", "onFocus"], _hoisted_3 = ["id", "name", "value", "onChange"], _hoisted_4 = {
   key: 0,
@@ -96,7 +96,7 @@ import '../assets/MazRadioButtons.BA4rjgK9.css';const _hoisted_1 = { class: "m-r
             }, [
               createVNode(Transition, { name: "maz-radio-buttons-scale" }, {
                 default: withCtx(() => [
-                  withDirectives(createVNode(unref(it), { class: "maz-size-full" }, null, 512), [
+                  withDirectives(createVNode(unref(MazCheck), { class: "maz-size-full" }, null, 512), [
                     [vShow, isSelected(option.value)]
                   ])
                 ]),

package/dist/components/MazReadingProgressBar.js

@@ -1,7 +1,14 @@
 import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, createBlock, openBlock, Teleport, createElementVNode, mergeProps, normalizeStyle, normalizeClass, nextTick } from "vue";
-import { t as throttle } from "../chunks/throttle.DN8ARw0a.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazReadingProgressBar.n1Is8_Y3.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/MazReadingProgressBar.n1Is8_Y3.css';function throttle(func, limit) {
+  let inThrottle = !1, lastFunc, lastRan;
+  return function(...args) {
+    inThrottle ? (clearTimeout(lastFunc), lastFunc = setTimeout(() => {
+      Date.now() - lastRan >= limit && (func.apply(this, args), lastRan = Date.now());
+    }, Math.max(limit - (Date.now() - lastRan), 0))) : (func.apply(this, args), lastRan = Date.now(), inThrottle = !0);
+  };
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazReadingProgressBar",
   props: {
     height: { default: "4px" },

package/dist/components/MazSelect.js

@@ -1,5 +1,5 @@
-import { defineComponent, mergeModels, defineAsyncComponent, useTemplateRef, computed, useModel, ref, watch, createBlock, openBlock, normalizeStyle, normalizeClass, withCtx, createElementVNode, unref, createCommentVNode, renderSlot, createElementBlock, createVNode, Fragment, renderList, toDisplayString, withModifiers, mergeProps, nextTick } from "vue";
-import { C as Cn, P as Pn, a as Mt } from "../chunks/index.CvKh762h.js";
+import { defineComponent, mergeModels, defineAsyncComponent, useTemplateRef, computed, useModel, ref, watch, createBlock, openBlock, normalizeStyle, normalizeClass, withCtx, createElementVNode, unref, createCommentVNode, renderSlot, createElementBlock, createVNode, Fragment, renderList, toDisplayString, withModifiers, mergeProps, createSlots, nextTick } from "vue";
+import { MazMagnifyingGlass, MazNoSymbol, MazChevronDown } from "@maz-ui/icons";
 import { u as useTranslations } from "../chunks/useTranslations.BXuww4ux.js";
 import { i as isClient } from "../chunks/isClient.WI4oSt66.js";
 import { u as useStringMatching, n as normalizeString } from "../chunks/useStringMatching.D5UvsCUS.js";
@@ -7,7 +7,7 @@ import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import MazInput from "./MazInput.js";
 import MazPopover from "./MazPopover.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazSelect.DZZpDg8z.css';let timeout = null;
+import '../assets/MazSelect.DEBsk61Q.css';let timeout = null;
 function debounceCallback(callback, delay) {
   timeout && clearTimeout(timeout), timeout = setTimeout(callback, delay);
 }
@@ -151,6 +151,8 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
       }, 1e3));
     }
     function mainInputKeyboardHandler(event) {
+      if (event.ctrlKey || event.metaKey || event.altKey)
+        return;
       const keyPressed = event.key;
       (keyPressed === "ArrowDown" || keyPressed === "ArrowUp" || /^[\dA-Za-z\u0400-\u04FF]$/.test(keyPressed)) && !isOpen.value && (event.preventDefault(), popoverComponent.value?.open()), /^[\dA-Za-z\u0400-\u04FF]$/.test(keyPressed) && props.search && focusSearchInputAndSetQuery(keyPressed);
     }
@@ -240,6 +242,7 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
       offset: 0,
       "prefer-position": _ctx.listPosition,
       "fallback-position": "top-start",
+      "position-reference": ".m-input-wrapper",
       onClose: onCloseList,
       onOpen: onOpenList
     }, {
@@ -266,10 +269,7 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
           onFocus: _cache[2] || (_cache[2] = ($event) => emits("focus", $event)),
           onBlur: _cache[3] || (_cache[3] = ($event) => emits("blur", $event)),
           onKeydown: mainInputKeyboardHandler
-        }), {
-          "left-icon": withCtx(() => [
-            renderSlot(_ctx.$slots, "left-icon", {}, void 0, !0)
-          ]),
+        }), createSlots({
           "right-icon": withCtx(() => [
             renderSlot(_ctx.$slots, "right-icon", {}, () => [
               createElementVNode("button", {
@@ -278,12 +278,20 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
                 class: "m-select-input__toggle-button maz-custom",
                 "aria-label": `${isOpen.value ? "collapse" : "expand"} list of options`
               }, [
-                createVNode(unref(Mt), { class: "m-select-chevron" })
+                createVNode(unref(MazChevronDown), { class: "m-select-chevron" })
               ], 8, _hoisted_1)
             ], !0)
           ]),
-          _: 3
-        }, 16, ["id", "required", "border-active", "color", "model-value", "size", "block", "placeholder", "label", "autocomplete", "disabled"])
+          _: 2
+        }, [
+          _ctx.$slots["left-icon"] ? {
+            name: "left-icon",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "left-icon", {}, void 0, !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "border-active", "color", "model-value", "size", "block", "placeholder", "label", "autocomplete", "disabled"])
       ]),
       default: withCtx(() => [
         createElementVNode("div", {
@@ -318,11 +326,11 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
             autocomplete: "off",
             block: "",
             class: "m-select-list__search-input maz-flex-none",
-            "left-icon": unref(Cn)
+            "left-icon": unref(MazMagnifyingGlass)
           }, null, 8, ["modelValue", "disabled", "color", "placeholder", "left-icon"])) : createCommentVNode("", !0),
           !optionList.value || optionList.value.length <= 0 ? renderSlot(_ctx.$slots, "no-results", { key: 1 }, () => [
             createElementVNode("span", _hoisted_3, [
-              createVNode(unref(Pn), { class: "maz-size-6 maz-text-foreground" })
+              createVNode(unref(MazNoSymbol), { class: "maz-size-6 maz-text-foreground" })
             ])
           ], !0) : (openBlock(), createElementBlock("div", {
             key: 2,
@@ -370,7 +378,7 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
       _: 3
     }, 8, ["modelValue", "class", "style", "block", "prefer-position"]));
   }
-}), MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b7f9209f"]]);
+}), MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-40bc7a9e"]]);
 export {
   MazSelect as default
 };

package/dist/components/MazStepper.js

@@ -1,9 +1,9 @@
 import { defineComponent, computed, useSlots, ref, createElementBlock, openBlock, normalizeStyle, Fragment, renderList, createCommentVNode, createElementVNode, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, createTextVNode, toDisplayString, createVNode, withCtx } from "vue";
-import { b as at, w as wr, u as ur } from "../chunks/index.CvKh762h.js";
+import { MazCheckCircle, MazExclamationTriangle, MazExclamationCircle } from "@maz-ui/icons";
 import MazExpandAnimation from "./MazExpandAnimation.js";
 import MazIcon from "./MazIcon.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazStepper.DYMde9uq.css';const _hoisted_1 = ["id", "disabled", "onClick"], _hoisted_2 = { class: "m-stepper__header__wrapper" }, _hoisted_3 = { class: "m-stepper__count --primary" }, _hoisted_4 = { class: "m-stepper__count__circle" }, _hoisted_5 = { class: "m-stepper__header__content" }, _hoisted_6 = { class: "m-stepper__title" }, _hoisted_7 = {
+import '../assets/MazStepper.DtWZmm-f.css';const _hoisted_1 = ["id", "disabled", "onClick"], _hoisted_2 = { class: "m-stepper__header__wrapper" }, _hoisted_3 = { class: "m-stepper__count --primary" }, _hoisted_4 = { class: "m-stepper__count__circle" }, _hoisted_5 = { class: "m-stepper__header__content" }, _hoisted_6 = { class: "m-stepper__title" }, _hoisted_7 = {
   key: 0,
   class: "m-stepper__subtitle"
 }, _hoisted_8 = {
@@ -33,7 +33,7 @@ import '../assets/MazStepper.DYMde9uq.css';const _hoisted_1 = ["id", "disabled",
       }
     });
     function getStepStateData(step) {
-      return isStepSuccess(step) ? { icon: at, class: "--success" } : isStepWarning(step) ? { icon: wr, class: "--warning" } : isStepError(step) ? { icon: ur, class: "--error" } : { class: "--normal" };
+      return isStepSuccess(step) ? { icon: MazCheckCircle, class: "--success" } : isStepWarning(step) ? { icon: MazExclamationTriangle, class: "--warning" } : isStepError(step) ? { icon: MazExclamationCircle, class: "--error" } : { class: "--normal" };
     }
     function getStepIcon(step) {
       return __props.steps?.[step - 1]?.icon;
@@ -148,7 +148,7 @@ import '../assets/MazStepper.DYMde9uq.css';const _hoisted_1 = ["id", "disabled",
       ], 64))), 128))
     ], 4));
   }
-}), MazStepper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6b6d4b14"]]);
+}), MazStepper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c6fcb131"]]);
 export {
   MazStepper as default
 };

package/dist/components/MazSwitch.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/MazSwitch.vue_vue_type_style_index_0_lang.DQE0vFhe.js";
+import { _ as _sfc_main } from "../chunks/MazSwitch.vue_vue_type_style_index_0_lang.CU43Y1ky.js";
 export {
   _sfc_main as default
 };

package/dist/components/MazTable.js

@@ -1,7 +1,7 @@
-import { _ as _sfc_main } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.By5YbgRn.js";
-import { m } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.By5YbgRn.js";
+import { _ as _sfc_main } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.CK2bk5tI.js";
+import { m } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.CK2bk5tI.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazTable.B1tkeUfE.css';const MazTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-680bb425"]]);
+import '../assets/MazTable.DMlQdImb.css';const MazTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3f352ade"]]);
 export {
   MazTable as default,
   m as mazTableKey

package/dist/components/MazTableCell.js

@@ -1,6 +1,6 @@
 import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { useInjectStrict } from "../composables/useInjectStrict.js";
-import { m as mazTableKey } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.By5YbgRn.js";
+import { m as mazTableKey } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.CK2bk5tI.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
 import '../assets/MazTableCell.BPgmqAMD.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazTableCell",

package/dist/components/MazTableRow.js

@@ -1,6 +1,6 @@
 import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { useInjectStrict } from "../composables/useInjectStrict.js";
-import { m as mazTableKey } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.By5YbgRn.js";
+import { m as mazTableKey } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.CK2bk5tI.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
 import '../assets/MazTableRow.B78Bd4Kv.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazTableRow",

package/dist/components/MazTableTitle.js

@@ -1,6 +1,6 @@
 import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, renderSlot } from "vue";
 import { useInjectStrict } from "../composables/useInjectStrict.js";
-import { m as mazTableKey } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.By5YbgRn.js";
+import { m as mazTableKey } from "../chunks/MazTable.vue_vue_type_script_setup_true_lang.CK2bk5tI.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
 import '../assets/MazTableTitle.BjJMgQFY.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazTableTitle",