maz-ui 4.0.0-alpha.4 → 4.0.0-beta.0

package/dist/components/MazInputTags.js

@@ -0,0 +1,145 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, createVNode, TransitionGroup, withCtx, Fragment, renderList, withModifiers, unref, createTextVNode, toDisplayString, mergeProps, withKeys } from "vue";
+import { MazTrash } from "@maz-ui/icons";
+import { t as truthyFilter } from "../chunks/truthyFilter.C2WOKUCG.js";
+import MazBtn from "./MazBtn.js";
+import MazInput from "./MazInput.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazInputTags.B_s9J3sw.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+  inheritAttrs: !1,
+  __name: "MazInputTags",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    placeholder: { default: void 0 },
+    label: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    success: { type: Boolean, default: !1 },
+    warning: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    color: { default: "primary" },
+    block: { type: Boolean },
+    addTagsOnBlur: { type: Boolean, default: !0 },
+    hint: {}
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props, emits = __emit, isFocused = ref(!1), inputValue = ref(), tagsHoveredId = ref(), lastIdToDelete = ref(), currentDeleteTimeout = ref(), tags = computed(
+      () => props.modelValue?.map((tag) => ({
+        tag,
+        // eslint-disable-next-line sonarjs/pseudo-random
+        id: `${Date.now()}-${Math.random().toString(36).slice(2)}`
+      }))
+    );
+    function addTags(event) {
+      if (inputValue.value) {
+        lastIdToDelete.value = void 0, event.preventDefault();
+        const newValues = inputValue.value.trim().split(",").map((value) => value.trim() === "," ? void 0 : value.trim()).filter(truthyFilter).filter(
+          (value) => !props.modelValue?.filter(truthyFilter)?.some((tag) => tag === value)
+        );
+        emits(
+          "update:model-value",
+          props.modelValue ? [...props.modelValue, ...newValues] : [...newValues]
+        ), inputValue.value = void 0;
+      }
+    }
+    const borderStyle = computed(() => {
+      if (props.error)
+        return "maz-border-destructive";
+      if (props.success)
+        return "maz-border-success";
+      if (props.warning)
+        return "maz-border-warning";
+      if (isFocused.value) {
+        if (props.color === "primary")
+          return "maz-border-primary";
+        if (props.color === "secondary")
+          return "maz-border-secondary";
+        if (props.color === "info")
+          return "maz-border-info";
+        if (props.color === "destructive")
+          return "maz-border-destructive";
+        if (props.color === "success")
+          return "maz-border-success";
+        if (props.color === "warning")
+          return "maz-border-warning";
+      }
+      return "";
+    });
+    function removeLastTag() {
+      inputValue.value || tags.value && tags.value?.length === 0 || (currentDeleteTimeout.value && clearTimeout(currentDeleteTimeout.value), lastIdToDelete.value ? (removeTag(lastIdToDelete.value), lastIdToDelete.value = void 0) : (lastIdToDelete.value = tags.value?.[tags.value.length - 1]?.id, currentDeleteTimeout.value = setTimeout(() => {
+        lastIdToDelete.value = void 0;
+      }, 2e3)));
+    }
+    function removeTag(id) {
+      const tagsArray = tags.value?.filter((tag) => tag.id !== id).map((tag) => tag.tag);
+      emits("update:model-value", tagsArray);
+    }
+    const buttonSize = computed(() => props.size === "mini" || props.size === "xs" ? "mini" : props.size === "sm" ? "xs" : props.size === "md" ? "sm" : props.size === "lg" ? "md" : props.size === "xl" ? "lg" : props.size);
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["m-input-tags m-reset-css maz-border-divider-400", [borderStyle.value, `--${_ctx.color}`, `--${_ctx.size}`, props.class, { "--block": _ctx.block }]]),
+      style: normalizeStyle(_ctx.style),
+      onFocusCapture: _cache[4] || (_cache[4] = ($event) => isFocused.value = !0),
+      onBlurCapture: _cache[5] || (_cache[5] = ($event) => isFocused.value = !1)
+    }, [
+      createVNode(TransitionGroup, { name: "maz-tags" }, {
+        default: withCtx(() => [
+          (openBlock(!0), createElementBlock(Fragment, null, renderList(tags.value, ({ tag, id }, i) => (openBlock(), createElementBlock("div", {
+            key: `tag-${i}`,
+            class: "m-input-tags__wrapper"
+          }, [
+            createVNode(MazBtn, {
+              class: "m-input-tags__tag",
+              disabled: _ctx.disabled,
+              size: buttonSize.value,
+              color: tagsHoveredId.value === id || lastIdToDelete.value === id ? "destructive" : _ctx.color,
+              "right-icon": tagsHoveredId.value === id || lastIdToDelete.value === id ? unref(MazTrash) : void 0,
+              onClick: withModifiers(($event) => removeTag(id), ["stop"]),
+              onMouseenter: ($event) => tagsHoveredId.value = id,
+              onFocus: ($event) => tagsHoveredId.value = id,
+              onMouseleave: _cache[0] || (_cache[0] = ($event) => tagsHoveredId.value = void 0),
+              onBlur: _cache[1] || (_cache[1] = ($event) => tagsHoveredId.value = void 0)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(tag), 1)
+              ]),
+              _: 2
+            }, 1032, ["disabled", "size", "color", "right-icon", "onClick", "onMouseenter", "onFocus"])
+          ]))), 128))
+        ]),
+        _: 1
+      }),
+      createVNode(MazInput, mergeProps({
+        key: "input-tags",
+        modelValue: inputValue.value,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => inputValue.value = $event)
+      }, _ctx.$attrs, {
+        placeholder: _ctx.placeholder,
+        label: _ctx.label,
+        "aria-label": _ctx.label || _ctx.placeholder,
+        error: _ctx.error,
+        hint: _ctx.hint,
+        success: _ctx.success,
+        warning: _ctx.warning,
+        disabled: _ctx.disabled,
+        "top-label": void 0,
+        "assistive-text": void 0,
+        color: _ctx.color,
+        block: _ctx.block,
+        size: _ctx.size,
+        "input-classes": "maz-w-full",
+        border: !1,
+        class: "m-input-tags__input",
+        onKeydown: [
+          withKeys(addTags, ["enter"]),
+          withKeys(removeLastTag, ["delete"])
+        ],
+        onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.addTagsOnBlur ? addTags($event) : void 0)
+      }), null, 16, ["modelValue", "placeholder", "label", "aria-label", "error", "hint", "success", "warning", "disabled", "color", "block", "size"])
+    ], 38));
+  }
+}), MazInputTags = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ab4976b5"]]);
+export {
+  MazInputTags as default
+};

package/dist/components/MazLazyImg.js

@@ -0,0 +1,62 @@
+import { defineComponent, defineAsyncComponent, computed, withDirectives, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, renderSlot, Fragment, renderList, mergeProps, createVNode, unref } from "vue";
+import { d as directive } from "../chunks/lazy-img.directive.D5zCo3Zi.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazLazyImg.BNaVtpfX.css';const _hoisted_1 = ["data-lazy-srcset", "media"], _hoisted_2 = ["alt"], _hoisted_3 = {
+  key: 0,
+  class: "m-lazy-img-component-loader"
+}, _sfc_main = /* @__PURE__ */ defineComponent({
+  inheritAttrs: !1,
+  __name: "MazLazyImg",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    src: { default: void 0 },
+    alt: { default: void 0 },
+    hideLoader: { type: Boolean },
+    observerOnce: { type: Boolean, default: !0 },
+    loadOnce: { type: Boolean },
+    imageHeightFull: { type: Boolean },
+    observerOptions: { default: void 0 },
+    fallbackSrc: { default: void 0 },
+    imgClass: {},
+    block: { type: Boolean }
+  },
+  emits: ["intersecting", "loading", "loaded", "error"],
+  setup(__props) {
+    const props = __props, MazSpinner = defineAsyncComponent(() => import("./MazSpinner.js")), sources = computed(() => typeof props.src == "string" ? [{ srcset: props.src }] : props.src?.sources);
+    return (_ctx, _cache) => withDirectives((openBlock(), createElementBlock("picture", {
+      class: normalizeClass(["m-lazy-img-component m-reset-css", [{ "--use-loader": !_ctx.hideLoader, "--height-full": _ctx.imageHeightFull, "--block": _ctx.block }, props.class]]),
+      style: normalizeStyle(_ctx.style)
+    }, [
+      (openBlock(!0), createElementBlock(Fragment, null, renderList(sources.value, ({ srcset, media }, sourceIndex) => (openBlock(), createElementBlock("source", {
+        key: sourceIndex,
+        "data-lazy-srcset": srcset,
+        media
+      }, null, 8, _hoisted_1))), 128)),
+      createElementVNode("img", mergeProps(_ctx.$attrs, {
+        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+        loading: "lazy",
+        alt: _ctx.alt,
+        class: _ctx.imgClass
+      }), null, 16, _hoisted_2),
+      _ctx.hideLoader ? createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_3, [
+        createVNode(unref(MazSpinner), { size: "2em" })
+      ])),
+      renderSlot(_ctx.$slots, "default", {}, void 0, !0)
+    ], 6)), [
+      [unref(directive), {
+        loadOnce: _ctx.loadOnce,
+        observerOptions: _ctx.observerOptions,
+        fallbackSrc: _ctx.fallbackSrc,
+        observerOnce: _ctx.observerOnce,
+        onIntersecting: (el) => _ctx.$emit("intersecting", el),
+        onLoading: (el) => _ctx.$emit("loading", el),
+        onLoaded: (el) => _ctx.$emit("loaded", el),
+        onError: (el) => _ctx.$emit("error", el)
+      }]
+    ]);
+  }
+}), MazLazyImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-203eb0b3"]]);
+export {
+  MazLazyImg as default
+};

package/dist/components/MazLink.js

@@ -0,0 +1,73 @@
+import { defineComponent, defineAsyncComponent, computed, createBlock, openBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot, createCommentVNode, createVNode } from "vue";
+import { MazArrowTopRightOnSquare } from "@maz-ui/icons";
+import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazLink.CCfbrUs0.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazLink",
+  props: {
+    as: {},
+    id: {},
+    title: {},
+    href: {},
+    to: {},
+    color: { default: "primary" },
+    target: { default: "_self" },
+    download: {},
+    rel: {},
+    ariaLabel: {},
+    underline: { type: Boolean, default: !1 },
+    underlineHover: { type: Boolean, default: !0 },
+    autoExternal: { type: Boolean, default: !0 },
+    leftIcon: { type: [String, Function, Object] },
+    rightIcon: { type: [String, Function, Object] },
+    disabled: { type: Boolean }
+  },
+  setup(__props) {
+    const MazIcon = defineAsyncComponent(() => import("./MazIcon.js")), instanceId = useInstanceUniqId({
+      componentName: "MazLink",
+      providedId: __props.id
+    }), component = computed(() => __props.as ? __props.as : __props.to ? "router-link" : __props.href ? "a" : "button"), isButton = computed(() => component.value === "button");
+    return (_ctx, _cache) => (openBlock(), createBlock(resolveDynamicComponent(component.value), mergeProps({
+      id: unref(instanceId),
+      class: ["m-link m-reset-css", [
+        {
+          "--underline": _ctx.underline,
+          "--underline-hover": !_ctx.underline && _ctx.underlineHover
+        },
+        `--${_ctx.color}`
+      ]],
+      to: _ctx.to,
+      href: _ctx.href,
+      title: _ctx.title,
+      target: !isButton.value && _ctx.target,
+      rel: !isButton.value && _ctx.rel,
+      download: !isButton.value && _ctx.download,
+      "aria-label": !isButton.value && _ctx.ariaLabel,
+      type: isButton.value && "button",
+      disabled: isButton.value && _ctx.disabled
+    }, _ctx.$attrs), {
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "left-icon", {}, () => [
+          typeof _ctx.leftIcon == "string" ? (openBlock(), createBlock(unref(MazIcon), {
+            key: 0,
+            name: _ctx.leftIcon
+          }, null, 8, ["name"])) : _ctx.leftIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.leftIcon), { key: 1 })) : createCommentVNode("", !0)
+        ], !0),
+        renderSlot(_ctx.$slots, "default", {}, void 0, !0),
+        renderSlot(_ctx.$slots, "right-icon", {}, () => [
+          typeof _ctx.rightIcon == "string" ? (openBlock(), createBlock(unref(MazIcon), {
+            key: 0,
+            name: _ctx.rightIcon
+          }, null, 8, ["name"])) : _ctx.rightIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.rightIcon), { key: 1 })) : createCommentVNode("", !0)
+        ], !0),
+        _ctx.autoExternal && _ctx.target === "_blank" ? renderSlot(_ctx.$slots, "external-icon", { key: 0 }, () => [
+          createVNode(unref(MazArrowTopRightOnSquare))
+        ], !0) : createCommentVNode("", !0)
+      ]),
+      _: 3
+    }, 16, ["id", "class", "to", "href", "title", "target", "rel", "download", "aria-label", "type", "disabled"]));
+  }
+}), MazLink = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-45232e22"]]);
+export {
+  MazLink as default
+};

package/dist/components/MazLoadingBar.js

@@ -0,0 +1,24 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, createElementVNode } from "vue";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazLoadingBar.D7PAgZHl.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazLoadingBar",
+  props: {
+    color: { default: "primary" },
+    height: { default: "0.125rem" }
+  },
+  setup(__props) {
+    const props = __props, colorCSSVariables = computed(() => ({
+      alpha: `hsl(var(--maz-${props.color}) / 20%)`,
+      main: `hsl(var(--maz-${props.color}))`
+    }));
+    return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
+      class: "m-loading-bar m-reset-css",
+      style: normalizeStyle([{ "--loading-bar-height": _ctx.height, "--loading-bar-color": colorCSSVariables.value.alpha, "--loading-bar-main-color": colorCSSVariables.value.main }])
+    }, _cache[0] || (_cache[0] = [
+      createElementVNode("div", null, null, -1)
+    ]), 4));
+  }
+}), MazLoadingBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ad2db5de"]]);
+export {
+  MazLoadingBar as default
+};

package/dist/components/MazPagination.js

@@ -0,0 +1,194 @@
+import { defineComponent, computed, createElementBlock, openBlock, unref, createElementVNode, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { MazChevronDoubleLeft, MazChevronLeft, MazEllipsisHorizontal } from "@maz-ui/icons";
+import { u as useTranslations } from "../chunks/useTranslations.BXuww4ux.js";
+import MazBtn from "./MazBtn.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
+import '../assets/MazPagination.C6cUh-p4.css';const _hoisted_1 = ["aria-label"], _hoisted_2 = { class: "maz-sr-only" }, _hoisted_3 = { class: "maz-sr-only" }, _hoisted_4 = ["id"], _hoisted_5 = { class: "maz-sr-only" }, _hoisted_6 = { class: "maz-sr-only" }, _hoisted_7 = { class: "maz-sr-only" }, _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MazPagination",
+  props: {
+    modelValue: { default: 1 },
+    buttonProps: {},
+    resultsSize: {},
+    activeColor: { default: "background" },
+    size: { default: "md" },
+    totalPages: {},
+    pageRange: { default: 1 },
+    loading: { type: Boolean }
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit, DEFAULT_BUTTONS_PROPS = {
+      size: "md",
+      color: "background",
+      outlined: !0,
+      fab: !0
+    }, { t } = useTranslations(), buttonsPropsMerged = computed(() => ({
+      ...DEFAULT_BUTTONS_PROPS,
+      ...__props.buttonProps
+    })), previousPage = computed(() => __props.modelValue > 1 ? __props.modelValue - 1 : 1), nextPage = computed(
+      () => __props.modelValue < __props.totalPages ? __props.modelValue + 1 : __props.totalPages
+    ), allPages = computed(
+      () => Array.from({ length: __props.totalPages }, (_, index) => {
+        const itemNumber = index + 1;
+        return {
+          number: itemNumber,
+          isActive: itemNumber === __props.modelValue,
+          loading: itemNumber === __props.modelValue && __props.loading
+        };
+      })
+    ), firstOne = computed(
+      () => __props.modelValue - __props.pageRange > 1 ? allPages.value.slice(0, 1) : []
+    ), lastOne = computed(
+      () => __props.modelValue < __props.totalPages - __props.pageRange ? allPages.value.slice(-1) : []
+    ), rangeStartAt = computed(() => {
+      const baseStart = __props.modelValue - __props.pageRange - 1;
+      return baseStart < 0 ? 0 : baseStart > __props.totalPages - __props.pageRange ? __props.totalPages - __props.pageRange : baseStart;
+    }), rangeEndAt = computed(() => {
+      const baseEnd = __props.modelValue + __props.pageRange;
+      return baseEnd > __props.totalPages ? __props.totalPages : baseEnd < __props.pageRange ? __props.pageRange : baseEnd;
+    }), range = computed(() => allPages.value.slice(rangeStartAt.value, rangeEndAt.value)), firstDivider = computed(
+      () => __props.modelValue - __props.pageRange > 2 ? [{ divider: !0 }] : []
+    ), lastDivider = computed(
+      () => __props.modelValue < __props.totalPages - __props.pageRange - 1 ? [{ divider: !0 }] : []
+    ), pages = computed(() => [
+      ...firstOne.value,
+      ...firstDivider.value,
+      ...range.value,
+      ...lastDivider.value,
+      ...lastOne.value
+    ]);
+    function setPageNumber(page) {
+      page !== __props.modelValue && emits("update:model-value", page);
+    }
+    return (_ctx, _cache) => (openBlock(), createElementBlock("nav", {
+      class: "m-pagination m-reset-css",
+      role: "navigation",
+      "aria-label": unref(t)("pagination.navAriaLabel")
+    }, [
+      createElementVNode("ul", null, [
+        createElementVNode("li", null, [
+          createVNode(MazBtn, mergeProps(buttonsPropsMerged.value, {
+            disabled: _ctx.modelValue === 1,
+            "aria-label": "First Page, Page 1",
+            "aria-setsize": _ctx.resultsSize ?? void 0,
+            "aria-posinset": "1",
+            size: _ctx.size,
+            onClick: _cache[0] || (_cache[0] = ($event) => setPageNumber(1))
+          }), {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_2, [
+                renderSlot(_ctx.$slots, "first-page-sr", { page: 1 }, () => [
+                  createTextVNode(toDisplayString(unref(t)("pagination.screenReader.firstPage", { page: 1 })), 1)
+                ], !0)
+              ]),
+              createVNode(unref(MazChevronDoubleLeft))
+            ]),
+            _: 3
+          }, 16, ["disabled", "aria-setsize", "size"])
+        ]),
+        createElementVNode("li", null, [
+          createVNode(MazBtn, mergeProps(buttonsPropsMerged.value, {
+            disabled: _ctx.modelValue === 1,
+            "aria-label": `Previous Page, Page ${previousPage.value}`,
+            "aria-setsize": _ctx.resultsSize ?? void 0,
+            "aria-posinset": previousPage.value,
+            size: _ctx.size,
+            onClick: _cache[1] || (_cache[1] = ($event) => setPageNumber(previousPage.value))
+          }), {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_3, [
+                renderSlot(_ctx.$slots, "previous-page-sr", { page: previousPage.value }, () => [
+                  createTextVNode(toDisplayString(unref(t)("pagination.screenReader.previousPage", { page: previousPage.value })), 1)
+                ], !0)
+              ]),
+              createVNode(unref(MazChevronLeft))
+            ]),
+            _: 3
+          }, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
+        ]),
+        (openBlock(!0), createElementBlock(Fragment, null, renderList(pages.value, (page, i) => (openBlock(), createElementBlock("li", {
+          id: "number" in page ? `button-${i}-${page.number}` : `ellipsis-${i}`,
+          key: "number" in page ? `button-${i}-${page.number}` : `ellipsis-${i}`
+        }, [
+          "number" in page ? (openBlock(), createBlock(MazBtn, mergeProps({
+            key: 0,
+            ref_for: !0
+          }, {
+            ...buttonsPropsMerged.value,
+            color: page.isActive ? _ctx.activeColor : buttonsPropsMerged.value.color,
+            outlined: page.isActive ? !1 : buttonsPropsMerged.value.outlined
+          }, {
+            size: _ctx.size,
+            "aria-label": `Page ${page.number}`,
+            "aria-current": page.isActive ? "true" : "false",
+            "aria-setsize": _ctx.resultsSize ?? void 0,
+            loading: page.loading,
+            "aria-posinset": page.number,
+            class: { active: page.isActive },
+            onClick: ($event) => page.isActive ? void 0 : setPageNumber(page.number)
+          }), {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_5, [
+                renderSlot(_ctx.$slots, "page-sr", {
+                  page: page.number
+                }, () => [
+                  createTextVNode(toDisplayString(unref(t)("pagination.screenReader.page", { page: page.number })), 1)
+                ], !0)
+              ]),
+              createTextVNode(" " + toDisplayString(page.number), 1)
+            ]),
+            _: 2
+          }, 1040, ["size", "aria-label", "aria-current", "aria-setsize", "loading", "aria-posinset", "class", "onClick"])) : page.divider ? (openBlock(), createElementBlock("div", mergeProps({
+            key: 1,
+            ref_for: !0
+          }, buttonsPropsMerged.value, { class: "flex-center flex p-2" }), [
+            createVNode(unref(MazEllipsisHorizontal))
+          ], 16)) : createCommentVNode("", !0)
+        ], 8, _hoisted_4))), 128)),
+        createElementVNode("li", null, [
+          createVNode(MazBtn, mergeProps(buttonsPropsMerged.value, {
+            disabled: _ctx.modelValue === _ctx.totalPages,
+            "aria-label": `Next Page, Page ${nextPage.value}`,
+            "aria-setsize": _ctx.resultsSize ?? void 0,
+            "aria-posinset": nextPage.value,
+            size: _ctx.size,
+            onClick: _cache[2] || (_cache[2] = ($event) => setPageNumber(nextPage.value))
+          }), {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_6, [
+                renderSlot(_ctx.$slots, "next-page-sr", { page: nextPage.value }, () => [
+                  createTextVNode(toDisplayString(unref(t)("pagination.screenReader.nextPage", { page: nextPage.value })), 1)
+                ], !0)
+              ]),
+              createVNode(unref(MazChevronLeft), { class: "-maz-rotate-180" })
+            ]),
+            _: 3
+          }, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
+        ]),
+        createElementVNode("li", null, [
+          createVNode(MazBtn, mergeProps(buttonsPropsMerged.value, {
+            disabled: _ctx.modelValue === _ctx.totalPages,
+            "aria-label": `Next Page, Page ${_ctx.totalPages}`,
+            "aria-setsize": _ctx.resultsSize ?? void 0,
+            "aria-posinset": _ctx.totalPages,
+            size: _ctx.size,
+            onClick: _cache[3] || (_cache[3] = ($event) => setPageNumber(_ctx.totalPages))
+          }), {
+            default: withCtx(() => [
+              createElementVNode("span", _hoisted_7, [
+                renderSlot(_ctx.$slots, "last-page-sr", { page: _ctx.totalPages }, () => [
+                  createTextVNode(toDisplayString(unref(t)("pagination.screenReader.lastPage", { page: _ctx.totalPages })), 1)
+                ], !0)
+              ]),
+              createVNode(unref(MazChevronDoubleLeft), { class: "-maz-rotate-180" })
+            ]),
+            _: 3
+          }, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
+        ])
+      ])
+    ], 8, _hoisted_1));
+  }
+}), MazPagination = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2cfdab04"]]);
+export {
+  MazPagination as default
+};