maz-ui 4.0.1 → 4.1.0

package/dist/components/MazDropdown.vue.d.ts

@@ -158,8 +158,11 @@ export interface MazDropdownProps extends Omit<MazPopoverProps, 'modelValue'> {
      */
     transition?: MazPopoverProps['transition'];
 }
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
 type __VLS_PublicProps = {
-    modelValue?: boolean;
+    modelValue?: typeof __VLS_defaults['modelValue'];
 } & __VLS_Props;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -182,14 +185,14 @@ declare function __VLS_template(): {
             items: MazDropdownMenuItem[];
             open: () => void;
             close: () => void;
-            isOpen: true;
+            isOpen: boolean;
             toggle: () => void;
         }): any;
         menuitem?(_: {
             item: MazDropdownMenuItem;
             open: () => void;
             close: () => void;
-            isOpen: true;
+            isOpen: boolean;
             toggle: () => void;
         }): any;
         'menuitem-label'?(_: {
@@ -206,7 +209,7 @@ declare function __VLS_template(): {
             };
             open: () => void;
             close: () => void;
-            isOpen: true;
+            isOpen: boolean;
             toggle: () => void;
         }): any;
         'menuitem-label'?(_: {
@@ -223,7 +226,7 @@ declare function __VLS_template(): {
             };
             open: () => void;
             close: () => void;
-            isOpen: true;
+            isOpen: boolean;
             toggle: () => void;
         }): any;
     };

package/dist/components/MazInput.js

@@ -3,7 +3,7 @@ import { MazEyeSlash, MazEye } from "@maz-ui/icons";
 import { i } from "../chunks/debounce.DhXdop6X.js";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazInput.BvuxfP9k.css';const _hoisted_1 = ["for"], _hoisted_2 = {
+import '../assets/MazInput.Z8jTDWYg.css';const _hoisted_1 = ["for"], _hoisted_2 = {
   key: 0,
   class: "m-input-wrapper-left"
 }, _hoisted_3 = ["id", "placeholder", "aria-label", "type", "inputmode", "name", "autocomplete", "disabled", "readonly", "required"], _hoisted_4 = {
@@ -165,7 +165,14 @@ import '../assets/MazInput.BvuxfP9k.css';const _hoisted_1 = ["for"], _hoisted_2
           ], !0) : createCommentVNode("", !0)
         ])) : createCommentVNode("", !0),
         createElementVNode("div", {
-          class: normalizeClass(["m-input-wrapper-input", [`--${_ctx.size}`, { "--top-label": !!_ctx.topLabel }]])
+          class: normalizeClass(["m-input-wrapper-input", [
+            `--${_ctx.size}`,
+            {
+              "--top-label": !!_ctx.topLabel,
+              "--has-left-icon": hasLeftPart(),
+              "--has-right-icon": hasRightPart()
+            }
+          ]])
         }, [
           withDirectives(createElementVNode("input", mergeProps({ id: unref(instanceId) }, _ctx.$attrs, {
             ref_key: "input",
@@ -243,7 +250,7 @@ import '../assets/MazInput.BvuxfP9k.css';const _hoisted_1 = ["for"], _hoisted_2
       }, toDisplayString(_ctx.assistiveText), 3)) : createCommentVNode("", !0)
     ], 6));
   }
-}), MazInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3ab08265"]]);
+}), MazInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-575efdcd"]]);
 export {
   MazInput as default
 };

package/dist/components/MazPopover.js

@@ -5,7 +5,7 @@ import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
 import { d as directive } from "../chunks/vClickOutside.CJBKY5no.js";
 import { g as getColor } from "../chunks/types.D0Bp_UhS.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazPopover.DIE65uVT.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.BimNK6Cy.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",
@@ -39,7 +39,7 @@ import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expan
     block: { type: Boolean, default: !1 },
     positionReference: {}
   }, {
-    modelValue: { type: Boolean, required: !1, default: !1 },
+    modelValue: { default: !1 },
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ mergeModels(["update:model-value", "open", "close", "after-close-animation", "toggle"], ["update:modelValue"]),
@@ -47,7 +47,7 @@ import '../assets/MazPopover.DIE65uVT.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"), middleware = computed(() => {
+    }), attrs = useAttrs(), triggerRef = useTemplateRef("trigger"), panelRef = useTemplateRef("panel"), middleware = computed(() => {
       const middleware2 = [
         offset(__props.offset),
         hide(),
@@ -58,26 +58,24 @@ import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expan
       })) : middleware2.push(flip({
         fallbackPlacements: __props.fallbackPosition ? [__props.fallbackPosition] : void 0
       })), middleware2;
-    }), floatingPosition = computed(() => __props.position === "auto" ? __props.preferPosition : __props.position), transitionName = computed(() => ["scale-pop", "scale-fade"].includes(__props.transition) ? `maz-${__props.transition}` : __props.transition), reference = computed(() => getPositionReference() || triggerElement.value), { floatingStyles, placement, update, middlewareData } = useFloating(
+    }), floatingPosition = computed(() => __props.position === "auto" ? __props.preferPosition : __props.position), transitionName = computed(() => ["scale-pop", "scale-fade"].includes(__props.transition) ? `maz-${__props.transition}` : __props.transition), positionRef = computed(() => {
+      if (!__props.positionReference)
+        return triggerRef.value;
+      if (typeof __props.positionReference == "string") {
+        const withinTrigger = triggerRef.value?.querySelector(__props.positionReference);
+        return withinTrigger || (e() ? document.querySelector(__props.positionReference) : null);
+      }
+      return __props.positionReference;
+    }), reference = computed(() => positionRef.value || triggerRef.value), { floatingStyles, placement, update, middlewareData } = useFloating(
       reference,
-      panelElement,
+      panelRef,
       {
         placement: floatingPosition,
         middleware,
         transform: !1,
         whileElementsMounted: autoUpdate
       }
-    ), computedPosition = computed(() => placement.value ?? floatingPosition.value);
-    function getPositionReference() {
-      if (!__props.positionReference)
-        return triggerElement.value;
-      if (typeof __props.positionReference == "string") {
-        const withinTrigger = triggerElement.value?.querySelector(__props.positionReference);
-        return withinTrigger || (e() ? document.querySelector(__props.positionReference) : null);
-      }
-      return __props.positionReference;
-    }
-    const isOpen = useModel(__props, "modelValue");
+    ), computedPosition = computed(() => placement.value ?? floatingPosition.value), isOpen = useModel(__props, "modelValue");
     let openTimeout = null, closeTimeout = null, initialFocusElement = null, ignoreNextClickOutside = !1;
     const panelId = computed(() => `${triggerId.value}-panel`), rootStyles = computed(() => attrs.style), panelStyles = computed(() => ({
       ...floatingStyles.value,
@@ -121,9 +119,9 @@ import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expan
       isOpen.value ? close() : open();
     }
     function setOpen(value) {
-      value ? (emits("open"), isOpen.value = value, emits("toggle", value), nextTick(() => {
+      isOpen.value = value, value ? (emits("open"), emits("toggle", value), nextTick(() => {
         update(), setupFocusTrap();
-      })) : (isOpen.value = value, emits("toggle", value), emits("close"), ignoreNextClickOutside = !1, __props.trapFocus && restoreFocus());
+      })) : (emits("toggle", value), emits("close"), ignoreNextClickOutside = !1, __props.trapFocus && restoreFocus());
     }
     function clearOpenTimeout() {
       openTimeout && (clearTimeout(openTimeout), openTimeout = null);
@@ -163,10 +161,10 @@ import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expan
     }
     function setupFocusTrap() {
       __props.role === "tooltip" || effectiveTrigger.value === "hover" || !__props.trapFocus || !e() || (initialFocusElement = document.activeElement, nextTick(() => {
-        const focusableElements = panelElement.value?.querySelectorAll(
+        const focusableElements = panelRef.value?.querySelectorAll(
           'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])'
         );
-        focusableElements && focusableElements.length > 0 ? focusableElements[0].focus({ preventScroll: !0 }) : panelElement.value?.focus({ preventScroll: !0 });
+        focusableElements && focusableElements.length > 0 ? focusableElements[0].focus({ preventScroll: !0 }) : panelRef.value?.focus({ preventScroll: !0 });
       }));
     }
     function restoreFocus() {
@@ -178,9 +176,9 @@ import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expan
       isOpen.value && (event.key === "Escape" && __props.closeOnEscape && !__props.persistent && (event.preventDefault(), close()), event.key === "Tab" && __props.trapFocus && handleTrapFocus(event));
     }
     function handleTrapFocus(event) {
-      if (!panelElement.value || !e())
+      if (!panelRef.value || !e())
         return;
-      const focusableElements = panelElement.value.querySelectorAll(
+      const focusableElements = panelRef.value.querySelectorAll(
         'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])'
       );
       if (focusableElements.length === 0)
@@ -195,7 +193,7 @@ import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expan
           return;
         }
         if (__props.closeOnClickOutside && !__props.persistent) {
-          if (triggerElement.value && triggerElement.value.contains(event.target))
+          if (triggerRef.value && triggerRef.value.contains(event.target))
             return;
           close();
         }
@@ -228,11 +226,11 @@ import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expan
       toggle,
       /**
        * Check if the popover is open
-       * @type {ComputedRef<boolean>}
+       * @type {ModelRef<boolean>}
        * @description Reactive reference to the popover open state
        * @usage `const isPopoverOpen = mazPopoverInstance.value?.isOpen`
        */
-      isOpen: computed(() => isOpen.value),
+      isOpen,
       /**
        * Update the popover position
        * @description Manually recalculate and update the popover position
@@ -314,7 +312,7 @@ import '../assets/MazPopover.DIE65uVT.css';const _hoisted_1 = ["id", "aria-expan
       ], 8, ["to"]))
     ], 64));
   }
-}), MazPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ecc963ec"]]);
+}), MazPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7399848c"]]);
 export {
   MazPopover as default
 };

package/dist/components/MazPopover.vue.d.ts

@@ -170,8 +170,11 @@ export interface MazPopoverProps {
 declare function open(): void;
 declare function close(): void;
 declare function toggle(): void;
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
 type __VLS_PublicProps = {
-    modelValue?: boolean;
+    modelValue?: typeof __VLS_defaults['modelValue'];
 } & __VLS_Props;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -218,11 +221,11 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     toggle: typeof toggle;
     /**
      * Check if the popover is open
-     * @type {ComputedRef<boolean>}
+     * @type {ModelRef<boolean>}
      * @description Reactive reference to the popover open state
      * @usage `const isPopoverOpen = mazPopoverInstance.value?.isOpen`
      */
-    isOpen: import('vue').ComputedRef<boolean>;
+    isOpen: import('vue').ModelRef<boolean, string, boolean, boolean>;
     /**
      * Update the popover position
      * @description Manually recalculate and update the popover position

package/dist/components/MazSelect.js

@@ -1,4 +1,4 @@
-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 { defineComponent, mergeModels, defineAsyncComponent, useTemplateRef, computed, useModel, ref, watch, createBlock, openBlock, unref, normalizeStyle, normalizeClass, withCtx, createElementVNode, createCommentVNode, renderSlot, createElementBlock, createVNode, Fragment, renderList, toDisplayString, withModifiers, mergeProps, createSlots, nextTick } from "vue";
 import { MazMagnifyingGlass, MazNoSymbol, MazChevronDown } from "@maz-ui/icons";
 import { useTranslations } from "@maz-ui/translations";
 import { e as e$1 } from "../chunks/isClient.8V3qjGdO.js";
@@ -7,11 +7,16 @@ 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.DIwjMD31.css';let e = null;
+import '../assets/MazSelect.CWQ12sG1.css';let e = null;
 function o(t, l) {
   e && clearTimeout(e), e = setTimeout(t, l);
 }
-const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m-select-list__no-results" }, _hoisted_4 = { class: "m-select-list-optgroup" }, _hoisted_5 = ["tabindex", "onClick"], _sfc_main = /* @__PURE__ */ defineComponent({
+const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m-select-list__no-results" }, _hoisted_4 = {
+  key: 2,
+  ref: "optionListWrapper",
+  class: "m-select-list__scroll-wrapper",
+  tabindex: "-1"
+}, _hoisted_5 = { class: "m-select-list-optgroup" }, _hoisted_6 = ["tabindex", "onClick"], _sfc_main = /* @__PURE__ */ defineComponent({
   inheritAttrs: !1,
   __name: "MazSelect",
   props: /* @__PURE__ */ mergeModels({
@@ -45,12 +50,12 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
     formatInputValue: {},
     transition: { default: "scale-fade" }
   }, {
-    open: { type: Boolean, required: !1, default: !1 },
+    open: { default: !1 },
     openModifiers: {}
   }),
   emits: /* @__PURE__ */ mergeModels(["close", "open", "blur", "focus", "change", "input", "update:model-value", "selected-option"], ["update:open"]),
   setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props, emits = __emit, MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox.js")), popoverComponent = useTemplateRef("popoverComponent"), selectedTextColor = computed(() => `hsl(var(--maz-${props.color}))`), selectedBgColor = computed(() => `hsl(var(--maz-${props.color}-500) / 0.1)`), { t } = useTranslations(), messages = computed(() => ({
+    const props = __props, emits = __emit, MazCheckbox = defineAsyncComponent(() => import("./MazCheckbox.js")), popoverComponent = useTemplateRef("popover"), inputRef = useTemplateRef("input"), searchInputRef = useTemplateRef("searchInput"), optionListRef = useTemplateRef("optionListRef"), optionListWrapperRef = useTemplateRef("optionListWrapper"), selectedTextColor = computed(() => `hsl(var(--maz-${props.color}))`), selectedBgColor = computed(() => `hsl(var(--maz-${props.color}-500) / 0.1)`), { t } = useTranslations(), messages = computed(() => ({
       searchPlaceholder: props.translations?.searchPlaceholder || t("select.searchPlaceholder")
     })), isOpen = useModel(__props, "open"), instanceId = useInstanceUniqId({
       componentName: "MazSelect",
@@ -90,7 +95,7 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
     }
     const selectedOptions = computed(
       () => optionsNormalized.value?.filter(isOptionInSelection) ?? []
-    ), mazInputComponent = useTemplateRef("mazInputComponent"), searchInputComponent = useTemplateRef("searchInputComponent"), optionListElement = ref(), optionListScrollWrapper = ref();
+    );
     function isNullOrUndefined(value) {
       return value == null;
     }
@@ -121,9 +126,6 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
       }) : optionsNormalized.value;
     }
     const optionList = computed(() => props.searchFunction && props.search && searchQuery.value ? getNormalizedOptions(props.searchFunction(searchQuery.value, props.options ?? []) ?? []) : getFilteredOptionWithQuery(searchQuery.value));
-    function onCloseList() {
-      emits("close");
-    }
     async function onOpenList() {
       const selectedIndex = optionList.value?.findIndex(
         (option) => isSelectedOption(option)
@@ -131,13 +133,13 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
       await scrollToOptionIndex(selectedIndex), emits("open");
     }
     function focusMainInput() {
-      mazInputComponent.value?.$el?.querySelector("input")?.focus();
+      inputRef.value?.$el?.querySelector("input")?.focus();
     }
     function emitInputMainInput() {
-      mazInputComponent.value?.$el?.querySelector("input")?.dispatchEvent(new Event("input"));
+      inputRef.value?.$el?.querySelector("input")?.dispatchEvent(new Event("input"));
     }
     function focusSearchInputAndSetQuery(q) {
-      searchQuery.value = q, searchInputComponent.value?.$el?.querySelector("input")?.focus();
+      searchQuery.value = q, searchInputRef.value?.$el?.querySelector("input")?.focus();
     }
     function searchOptionWithQuery(keyPressed) {
       keyPressed === "Backspace" && query.value && query.value.length > 0 ? query.value = query.value.slice(0, -1) : query.value += keyPressed;
@@ -160,10 +162,10 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
     async function scrollToOptionIndex(index) {
       if (await nextTick(), typeof index != "number" || index < 0)
         return;
-      const item = optionListElement.value?.querySelector(`.m-select-list-item:nth-child(${index + 1})`);
-      if (item && optionListScrollWrapper.value) {
-        const wrapperRect = optionListScrollWrapper.value.getBoundingClientRect(), itemRect = item.getBoundingClientRect(), scrollTop = item.offsetTop - wrapperRect.height / 2 + itemRect.height / 2;
-        optionListScrollWrapper.value.scrollTo?.({
+      const item = optionListRef.value?.querySelector(`.m-select-list-item:nth-child(${index + 1})`);
+      if (item && optionListWrapperRef.value) {
+        const wrapperRect = optionListWrapperRef.value.getBoundingClientRect(), itemRect = item.getBoundingClientRect(), scrollTop = item.offsetTop - wrapperRect.height / 2 + itemRect.height / 2;
+        optionListWrapperRef.value.scrollTo?.({
           top: scrollTop,
           behavior: "auto"
         }), nextTick(() => {
@@ -228,12 +230,15 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
         popoverComponent.value?.close();
       }
     }), (_ctx, _cache) => (openBlock(), createBlock(MazPopover, {
-      ref_key: "popoverComponent",
-      ref: popoverComponent,
+      id: `${unref(instanceId)}-popover`,
+      ref: "popover",
       modelValue: isOpen.value,
       "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isOpen.value = $event),
       class: normalizeClass(["m-select m-reset-css", [
-        { "--is-open": isOpen.value, "--disabled": _ctx.disabled },
+        {
+          "--is-open": isOpen.value,
+          "--disabled": _ctx.disabled
+        },
         props.class,
         `--${_ctx.size}`
       ]]),
@@ -245,15 +250,14 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
       position: _ctx.listPosition,
       "prefer-position": "bottom-start",
       "fallback-position": "top-start",
-      "position-reference": ".m-input-wrapper",
-      onClose: onCloseList,
+      "position-reference": `#${unref(instanceId)}-popover .m-input-wrapper`,
+      onClose: _cache[6] || (_cache[6] = ($event) => emits("close")),
       onOpen: onOpenList
     }, {
-      trigger: withCtx(() => [
+      trigger: withCtx(({ close, open: openPicker, toggle: togglePopover }) => [
         createVNode(MazInput, mergeProps({
           id: unref(instanceId),
-          ref_key: "mazInputComponent",
-          ref: mazInputComponent,
+          ref: "input",
           class: "m-select-input"
         }, _ctx.$attrs, {
           required: _ctx.required,
@@ -274,7 +278,12 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
           onKeydown: mainInputKeyboardHandler
         }), createSlots({
           "right-icon": withCtx(() => [
-            renderSlot(_ctx.$slots, "right-icon", {}, () => [
+            renderSlot(_ctx.$slots, "right-icon", {
+              isOpen: isOpen.value,
+              close,
+              open: openPicker,
+              toggle: togglePopover
+            }, () => [
               createElementVNode("button", {
                 tabindex: "-1",
                 type: "button",
@@ -290,17 +299,22 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
           _ctx.$slots["left-icon"] ? {
             name: "left-icon",
             fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "left-icon", {}, void 0, !0)
+              renderSlot(_ctx.$slots, "left-icon", {
+                isOpen: isOpen.value,
+                close,
+                open: openPicker,
+                toggle: togglePopover
+              }, void 0, !0)
             ]),
             key: "0"
           } : void 0
         ]), 1040, ["id", "required", "border-active", "color", "model-value", "size", "block", "placeholder", "label", "autocomplete", "disabled"])
       ]),
-      default: withCtx(() => [
+      default: withCtx(({ close, open: openPicker, toggle: togglePopover }) => [
         createElementVNode("div", {
           id: `${unref(instanceId)}-option-list`,
-          ref_key: "optionListElement",
-          ref: optionListElement,
+          ref_key: "optionListRef",
+          ref: optionListRef,
           class: normalizeClass(["m-select-list", `--${_ctx.size}`]),
           style: normalizeStyle([{
             maxHeight: `${_ctx.maxListHeight}px`,
@@ -313,8 +327,7 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
         }, [
           _ctx.search ? (openBlock(), createBlock(MazInput, {
             key: 0,
-            ref_key: "searchInputComponent",
-            ref: searchInputComponent,
+            ref: "searchInput",
             modelValue: searchQuery.value,
             "onUpdate:modelValue": [
               _cache[4] || (_cache[4] = ($event) => searchQuery.value = $event),
@@ -335,19 +348,13 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
             createElementVNode("span", _hoisted_3, [
               createVNode(unref(MazNoSymbol), { class: "maz-size-6 maz-text-foreground" })
             ])
-          ], !0) : (openBlock(), createElementBlock("div", {
-            key: 2,
-            ref_key: "optionListScrollWrapper",
-            ref: optionListScrollWrapper,
-            class: "m-select-list__scroll-wrapper",
-            tabindex: "-1"
-          }, [
+          ], !0) : (openBlock(), createElementBlock("div", _hoisted_4, [
             (openBlock(!0), createElementBlock(Fragment, null, renderList(optionList.value, (option, i) => (openBlock(), createElementBlock(Fragment, { key: i }, [
               option.label && option.isOptGroup ? renderSlot(_ctx.$slots, "optgroup", {
                 key: 0,
                 label: option.label
               }, () => [
-                createElementVNode("span", _hoisted_4, toDisplayString(option.label), 1)
+                createElementVNode("span", _hoisted_5, toDisplayString(option.label), 1)
               ], !0) : (openBlock(), createElementBlock("button", {
                 key: 1,
                 type: "button",
@@ -369,19 +376,23 @@ const _hoisted_1 = ["aria-label"], _hoisted_2 = ["id"], _hoisted_3 = { class: "m
                 }, null, 8, ["model-value", "color"])) : createCommentVNode("", !0),
                 renderSlot(_ctx.$slots, "default", {
                   option,
-                  isSelected: isSelectedOption(option)
+                  isSelected: isSelectedOption(option),
+                  isOpen: isOpen.value,
+                  close,
+                  open: openPicker,
+                  toggle: togglePopover
                 }, () => [
                   createElementVNode("span", null, toDisplayString(option[_ctx.optionLabelKey]), 1)
                 ], !0)
-              ], 14, _hoisted_5))
+              ], 14, _hoisted_6))
             ], 64))), 128))
           ], 512))
         ], 14, _hoisted_2)
       ]),
       _: 3
-    }, 8, ["modelValue", "class", "style", "block", "transition", "position"]));
+    }, 8, ["id", "modelValue", "class", "style", "block", "transition", "position", "position-reference"]));
   }
-}), MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ccb6b95e"]]);
+}), MazSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a101d497"]]);
 export {
   MazSelect as default
 };

package/dist/components/MazSelect.vue.d.ts

@@ -157,8 +157,18 @@ declare const _default: <Value extends MazInputValue, Option extends MazSelectOp
     }>): void;
     attrs: any;
     slots: {
-        'left-icon'?(_: {}): any;
-        'right-icon'?(_: {}): any;
+        'left-icon'?(_: {
+            isOpen: boolean;
+            close: () => void;
+            open: () => void;
+            toggle: () => void;
+        }): any;
+        'right-icon'?(_: {
+            isOpen: boolean;
+            close: () => void;
+            open: () => void;
+            toggle: () => void;
+        }): any;
         'no-results'?(_: {}): any;
         optgroup?(_: {
             label: string | number | true;
@@ -166,6 +176,10 @@ declare const _default: <Value extends MazInputValue, Option extends MazSelectOp
         default?(_: {
             option: Option;
             isSelected: boolean;
+            isOpen: boolean;
+            close: () => void;
+            open: () => void;
+            toggle: () => void;
         }): any;
     };
     emit: (((evt: "blur", value: Event) => void) & ((evt: "change", value: Event) => void) & ((evt: "close") => void) & ((evt: "focus", value?: Event | undefined) => void) & ((evt: "input", value: Event) => void) & ((evt: "open") => void) & ((evt: "update:model-value", value: Multiple extends true ? Value[] : Value) => void) & ((evt: "selected-option", value: Option) => void)) & ((evt: "update:open", value: boolean) => void);

package/dist/components/index.js

@@ -14,11 +14,11 @@ import { _ } from "../chunks/MazChart.vue_vue_type_script_setup_true_lang.JSYXGy
 import { default as default14 } from "./MazCheckbox.js";
 import { default as default15 } from "./MazChecklist.js";
 import { default as default16 } from "./MazCircularProgressBar.js";
-import { M } from "../chunks/MazDatePicker.B1B6gUrC.js";
+import { M } from "../chunks/MazDatePicker.BkBbJH6f.js";
 import { default as default17 } from "./MazDialog.js";
 import { _ as _2, u } from "../chunks/MazDialogConfirm.vue_vue_type_script_setup_true_lang.DuEcluOw.js";
 import { default as default18 } from "./MazDrawer.js";
-import { _ as _3 } from "../chunks/MazDropdown.vue_vue_type_style_index_0_lang.DULnKQ2W.js";
+import { _ as _3 } from "../chunks/MazDropdown.vue_vue_type_style_index_0_lang.CgXVL7hr.js";
 import { default as default19 } from "./MazDropzone.js";
 import { default as default20 } from "./MazExpandAnimation.js";
 import { default as default21 } from "./MazFullscreenLoader.js";

package/dist/composables/index.d.ts

@@ -11,6 +11,7 @@ export * from './useIdleTimeout';
 export * from './useInjectStrict';
 export * from './useInstanceUniqId';
 export * from './useMountComponent';
+export * from './useMutationObserver';
 export * from './useReadingTime';
 export * from './useStringMatching';
 export * from './useSwipe';

package/dist/composables/index.js

@@ -10,6 +10,7 @@ import { useIdleTimeout } from "./useIdleTimeout.js";
 import { useInjectStrict } from "./useInjectStrict.js";
 import { useInstanceUniqId } from "./useInstanceUniqId.js";
 import { useMountComponent } from "./useMountComponent.js";
+import { useMutationObserver } from "./useMutationObserver.js";
 import { useReadingTime } from "./useReadingTime.js";
 import { u } from "../chunks/useStringMatching.DzSigyZ7.js";
 import { useSwipe } from "./useSwipe.js";
@@ -31,6 +32,7 @@ export {
   useInjectStrict,
   useInstanceUniqId,
   useMountComponent,
+  useMutationObserver,
   useReadingTime,
   u as useStringMatching,
   useSwipe,

package/dist/composables/useMutationObserver.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPublicInstance, MaybeRefOrGetter } from 'vue';
+export interface UseMutationObserverOptions extends MutationObserverInit {
+    internalWindow?: Window | undefined;
+}
+/**
+ * Watch for changes into DOM element.
+ */
+export declare function useMutationObserver(target: MaybeRefOrGetter<HTMLElement | SVGElement | ComponentPublicInstance | undefined | null>, callback: MutationCallback, options?: UseMutationObserverOptions): {
+    isSupported: import('vue').Ref<boolean, boolean>;
+    stop: () => void;
+    takeRecords: () => MutationRecord[] | undefined;
+};
+export type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>;

package/dist/composables/useMutationObserver.js

@@ -0,0 +1,37 @@
+import { e } from "../chunks/isClient.8V3qjGdO.js";
+import { r } from "../chunks/truthyFilter.DZvXmxeK.js";
+import { ref, onMounted, computed, toValue, watch } from "vue";
+function useMutationObserver(target, callback, options = {}) {
+  const {
+    internalWindow = e() ? globalThis : void 0,
+    ...mutationOptions
+  } = options;
+  let observer;
+  const isSupported = ref(!1);
+  onMounted(() => {
+    isSupported.value = (internalWindow && "MutationObserver" in internalWindow) ?? !1;
+  });
+  const cleanup = () => {
+    observer && (observer.disconnect(), observer = void 0);
+  }, targets = computed(() => {
+    const value = toValue(target);
+    let element;
+    return value && "$el" in value ? element = value.$el : value && (element = value), new Set([element].filter(r));
+  }), stopWatch = watch(
+    targets,
+    (newTargets) => {
+      cleanup(), isSupported.value && newTargets.size && (observer = new MutationObserver(callback), newTargets.forEach((el) => observer.observe(el, mutationOptions)));
+    },
+    { immediate: !0, flush: "post" }
+  );
+  return {
+    isSupported,
+    stop: () => {
+      stopWatch(), cleanup();
+    },
+    takeRecords: () => observer?.takeRecords()
+  };
+}
+export {
+  useMutationObserver
+};

package/dist/composables/useWindowSize.js

@@ -11,9 +11,9 @@ function useWindowSize(options = {}) {
     internalWindow && (includeScrollbar ? (width.value = internalWindow.innerWidth, height.value = internalWindow.innerHeight) : (width.value = internalWindow.document.documentElement.clientWidth, height.value = internalWindow.document.documentElement.clientHeight));
   }
   return update(), onMounted(() => {
-    internalWindow && window.addEventListener("resize", update, { passive: !0 });
+    internalWindow && internalWindow.addEventListener("resize", update, { passive: !0 });
   }), onUnmounted(() => {
-    internalWindow && window.removeEventListener("resize", update);
+    internalWindow && internalWindow.removeEventListener("resize", update);
   }), { width, height };
 }
 export {