@rei/cedar 13.4.0-alpha.0 → 13.4.0

package/dist/src/components/pagination/CdrPagination.vue.mjs

@@ -0,0 +1,199 @@
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.array.unshift.js";
+import { defineComponent as B, ref as q, computed as d, onMounted as G, watch as R, useCssModule as U, resolveComponent as $, openBlock as l, createElementBlock as u, createElementVNode as k, normalizeClass as r, createBlock as D, resolveDynamicComponent as T, withCtx as h, createVNode as f, createTextVNode as m, Fragment as N, renderList as w, toDisplayString as I, withModifiers as E, nextTick as H } from "vue";
+import z from "../../utils/mapClasses.mjs";
+import A from "../../utils/propValidator.mjs";
+import F from "../icon/comps/caret-left.vue.mjs";
+import W from "../icon/comps/caret-right.vue.mjs";
+import J from "../select/CdrSelect.vue.mjs";
+import K from "../../utils/uid.mjs";
+import Q from "./styles/CdrPagination.module.scss.mjs";
+import X from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const Y = B({
+  name: "CdrPagination",
+  components: {
+    IconCaretLeft: F,
+    IconCaretRight: W,
+    CdrSelect: J
+  },
+  props: {
+    // NOTE pagination now requires an ID
+    id: {
+      type: String
+    },
+    /**
+     * Total number of pages. Sometimes the total number of pages is different than total page data
+     * and this prop allows for that.
+     */
+    totalPages: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Array of objects. Objects have structure of { page: Number, url: String }
+     */
+    pages: {
+      type: Array,
+      required: !0,
+      validator: (e) => e.every((i) => !Object.prototype.hasOwnProperty.call(i, "page") || typeof i.page != "number" ? (console.error('Property "page" is missing or is not a number', i), !1) : !Object.prototype.hasOwnProperty.call(i, "url") || typeof i.url != "string" ? (console.error('Property "url" is missing or is not a string', i), !1) : !0)
+    },
+    linkTag: {
+      type: String,
+      default: "a",
+      validator: (e) => A(e, ["a", "button"])
+    },
+    forLabel: {
+      type: String,
+      default: ""
+    },
+    /** @ignore used for binding v-model, represents the current page */
+    modelValue: {
+      type: Number
+    }
+  },
+  emits: ["update:modelValue", "navigate"],
+  setup(e, s) {
+    const i = q(0), C = q([]), _ = e.id ? e.id : K(), y = (n) => {
+      i.value = e.pages.map((t) => t.page).indexOf(n);
+    }, p = d({
+      get: () => e.modelValue,
+      set: (n) => {
+        y(n), s.emit("update:modelValue", n);
+      }
+    }), P = d(() => e.pages[i.value].url), v = (n, t) => {
+      const g = t.target.offsetWidth > 0 && t.target.offsetHeight > 0;
+      if (n === p.value && g) {
+        t.preventDefault();
+        return;
+      }
+      p.value = n, s.emit("navigate", n, P.value, t), H(() => {
+        try {
+          (t.currentTarget || t.target).blur();
+        } catch (o) {
+          console.error(o);
+        }
+      });
+    }, a = (n) => {
+      C.value.find((g) => (g == null ? void 0 : g.innerHTML) === n.target.value).click();
+    }, b = d(() => e.forLabel || "Pagination"), c = d(() => e.pages[i.value - 1]), O = d(() => e.pages[i.value + 1]), S = d(() => {
+      const n = e.pages.length, t = p.value, g = 1;
+      let o = [], L = !0, M = !0;
+      if (n <= 7)
+        return e.pages;
+      if (t < 5)
+        L = !1, o = e.pages.slice(1, 5);
+      else if (n - t < 4)
+        M = !1, o = e.pages.slice(-5, -1);
+      else
+        for (let V = Math.max(2, t - g); V <= Math.min(n - 1, t + g); V += 1)
+          o.push(e.pages[V - 1]);
+      return t - g > 2 && L && o.unshift("&hellip;"), t + g < n - 1 && M && o.push("&hellip;"), o.unshift(e.pages[0]), o.push(e.pages[n - 1]), o;
+    });
+    return G(() => y(p.value)), R(() => e.pages, () => y(p.value)), {
+      style: U(),
+      mapClasses: z,
+      uniqueId: _,
+      linkRefs: C,
+      navigate: v,
+      select: a,
+      ariaLabel: b,
+      prevPageData: c,
+      nextPageData: O,
+      paginationData: S,
+      innerValue: p,
+      currentIdx: i
+    };
+  }
+}), Z = ["aria-label"], j = {
+  key: 0
+}, x = {
+  key: 1,
+  "aria-hidden": "true"
+}, ee = ["value"], ae = {
+  key: 2
+}, ne = {
+  key: 3,
+  "aria-hidden": "true"
+};
+function te(e, s, i, C, _, y) {
+  const p = $("icon-caret-left"), P = $("cdr-select"), v = $("icon-caret-right");
+  return l(), u("nav", {
+    "aria-label": e.ariaLabel
+  }, [k("ol", {
+    class: r(e.style["cdr-pagination"])
+  }, [e.innerValue > e.pages[0].page ? (l(), u("li", j, [(l(), D(T(e.linkTag), {
+    "aria-label": "Go to previous page",
+    href: e.linkTag === "a" && e.prevPageData && e.prevPageData.url || void 0,
+    class: r(e.mapClasses(e.style, "cdr-pagination__link", "cdr-pagination__prev")),
+    onClick: s[0] || (s[0] = (a) => e.navigate(e.prevPageData.page, a))
+  }, {
+    default: h(() => [f(p, {
+      class: r(e.style["cdr-pagination_caret--prev"])
+    }, null, 8, ["class"]), m(" Prev ")]),
+    _: 1
+  }, 8, ["href", "class"]))])) : (l(), u("li", x, [k("span", {
+    "aria-disabled": "true",
+    class: r(e.mapClasses(e.style, "cdr-pagination__link", "cdr-pagination__prev", "cdr-pagination__link--disabled"))
+  }, [f(p, {
+    class: r(e.style["cdr-pagination_caret--prev"]),
+    "inherit-color": ""
+  }, null, 8, ["class"]), m(" Prev ")], 2)])), (l(!0), u(N, null, w(e.paginationData, (a, b) => (l(), u("li", {
+    key: `pagination-${e.uniqueId}-li-${a.page}`,
+    class: r(e.style["cdr-pagination__li--links"])
+  }, [a.page ? (l(), D(T(e.linkTag), {
+    key: 0,
+    id: `pagination-${e.uniqueId}-link-${a.page}`,
+    class: r(e.mapClasses(e.style, "cdr-pagination__link", a.page === e.innerValue && "cdr-pagination__link--current")),
+    "aria-label": a.page === e.innerValue ? `Current page, page ${a.page}` : `Go to page ${a.page}`,
+    "aria-current": a.page === e.innerValue ? "page" : null,
+    href: e.linkTag === "a" && a.url || void 0,
+    ref_for: !0,
+    ref: (c) => {
+      e.linkRefs[b] = c;
+    },
+    onClick: (c) => e.navigate(a.page, c)
+  }, {
+    default: h(() => [m(I(a.page), 1)]),
+    _: 2
+  }, 1032, ["id", "class", "aria-label", "aria-current", "href", "onClick"])) : (l(), u("span", {
+    key: 1,
+    class: r(e.style["cdr-pagination__ellipse"])
+  }, " … ", 2))], 2))), 128)), k("li", {
+    class: r(e.style["cdr-pagination__li--select"])
+  }, [f(P, {
+    id: `pagination-select-${e.uniqueId}`,
+    modelValue: e.innerValue,
+    "onUpdate:modelValue": s[1] || (s[1] = (a) => e.innerValue = a),
+    label: "Navigate to page",
+    "hide-label": "",
+    onChange: s[2] || (s[2] = E((a) => e.select(a), ["prevent"]))
+  }, {
+    default: h(() => [(l(!0), u(N, null, w(e.paginationData.filter((a) => a.page), (a) => (l(), u("option", {
+      key: `pagination-${e.uniqueId}-select-${a.page}`,
+      value: a.page
+    }, " Page " + I(a.page) + I(e.totalPages === null ? "" : ` of ${e.totalPages}`), 9, ee))), 128))]),
+    _: 1
+  }, 8, ["id", "modelValue"])], 2), e.innerValue < e.pages[e.pages.length - 1].page ? (l(), u("li", ae, [(l(), D(T(e.linkTag), {
+    "aria-label": "Go to next page",
+    href: e.linkTag === "a" && e.nextPageData && e.nextPageData.url || void 0,
+    class: r(e.mapClasses(e.style, "cdr-pagination__link", "cdr-pagination__next")),
+    onClick: s[3] || (s[3] = (a) => e.navigate(e.nextPageData.page, a))
+  }, {
+    default: h(() => [m(" Next "), f(v, {
+      class: r(e.style["cdr-pagination_caret--next"])
+    }, null, 8, ["class"])]),
+    _: 1
+  }, 8, ["href", "class"]))])) : (l(), u("li", ne, [k("span", {
+    "aria-disabled": "true",
+    class: r(e.mapClasses(e.style, "cdr-pagination__link", "cdr-pagination__next", "cdr-pagination__link--disabled"))
+  }, [m(" Next "), f(v, {
+    class: r(e.style["cdr-pagination_caret--next"]),
+    "inherit-color": ""
+  }, null, 8, ["class"])], 2)]))], 2)], 8, Z);
+}
+const ie = {
+  $style: Q
+}, ye = /* @__PURE__ */ X(Y, [["render", te], ["__cssModules", ie]]);
+export {
+  ye as default
+};

package/dist/src/components/pagination/styles/CdrPagination.module.scss.mjs

@@ -0,0 +1,58 @@
+const l = {
+  "cdr-icon": "cdr-icon_13-4-0",
+  "cdr-icon--small": "cdr-icon--small_13-4-0",
+  "cdr-icon--large": "cdr-icon--large_13-4-0",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_13-4-0",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_13-4-0",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_13-4-0",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_13-4-0",
+  "cdr-icon--small@md": "cdr-icon--small@md_13-4-0",
+  "cdr-icon--large@md": "cdr-icon--large@md_13-4-0",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_13-4-0",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_13-4-0",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-4-0",
+  "cdr-label-standalone": "cdr-label-standalone_13-4-0",
+  "cdr-label-standalone__label-wrapper": "cdr-label-standalone__label-wrapper_13-4-0",
+  "cdr-label-standalone__label": "cdr-label-standalone__label_13-4-0",
+  "cdr-label-standalone__label--sr-only": "cdr-label-standalone__label--sr-only_13-4-0",
+  "cdr-label-standalone__label--disabled": "cdr-label-standalone__label--disabled_13-4-0",
+  "cdr-label-standalone__optional": "cdr-label-standalone__optional_13-4-0",
+  "cdr-label-standalone__helper": "cdr-label-standalone__helper_13-4-0",
+  "cdr-label-standalone__info": "cdr-label-standalone__info_13-4-0",
+  "cdr-label-standalone__post-content": "cdr-label-standalone__post-content_13-4-0",
+  "cdr-label-standalone__info-action": "cdr-label-standalone__info-action_13-4-0",
+  "cdr-label-standalone__input-wrap": "cdr-label-standalone__input-wrap_13-4-0",
+  "cdr-label-standalone__input-spacing": "cdr-label-standalone__input-spacing_13-4-0",
+  "cdr-form-error": "cdr-form-error_13-4-0",
+  "cdr-form-error__icon": "cdr-form-error__icon_13-4-0",
+  "cdr-select": "cdr-select_13-4-0",
+  "cdr-select--primary": "cdr-select--primary_13-4-0",
+  "cdr-select--secondary": "cdr-select--secondary_13-4-0",
+  "cdr-select--error": "cdr-select--error_13-4-0",
+  "cdr-select--preicon": "cdr-select--preicon_13-4-0",
+  "cdr-select__prompt": "cdr-select__prompt_13-4-0",
+  "cdr-select__caret": "cdr-select__caret_13-4-0",
+  "cdr-select__caret--disabled": "cdr-select__caret--disabled_13-4-0",
+  "cdr-select__pre-icon": "cdr-select__pre-icon_13-4-0",
+  "cdr-select--multiple": "cdr-select--multiple_13-4-0",
+  "cdr-select--large@xs": "cdr-select--large@xs_13-4-0",
+  "cdr-select--large": "cdr-select--large_13-4-0",
+  "cdr-select--large@sm": "cdr-select--large@sm_13-4-0",
+  "cdr-select--large@md": "cdr-select--large@md_13-4-0",
+  "cdr-select--large@lg": "cdr-select--large@lg_13-4-0",
+  "cdr-select-wrap": "cdr-select-wrap_13-4-0",
+  "cdr-pagination": "cdr-pagination_13-4-0",
+  "cdr-pagination__li--links": "cdr-pagination__li--links_13-4-0",
+  "cdr-pagination__li--select": "cdr-pagination__li--select_13-4-0",
+  "cdr-pagination__link": "cdr-pagination__link_13-4-0",
+  "cdr-pagination__link--current": "cdr-pagination__link--current_13-4-0",
+  "cdr-pagination__link--disabled": "cdr-pagination__link--disabled_13-4-0",
+  "cdr-pagination__ellipse": "cdr-pagination__ellipse_13-4-0",
+  "cdr-pagination__prev": "cdr-pagination__prev_13-4-0",
+  "cdr-pagination__next": "cdr-pagination__next_13-4-0",
+  "cdr-pagination__caret--prev": "cdr-pagination__caret--prev_13-4-0",
+  "cdr-pagination__caret--next": "cdr-pagination__caret--next_13-4-0"
+};
+export {
+  l as default
+};

package/dist/src/components/popover/CdrPopover.vue.mjs

@@ -0,0 +1,130 @@
+import { defineComponent as P, ref as u, watch as E, onMounted as S, useCssModule as k, resolveComponent as m, openBlock as y, createElementBlock as b, normalizeClass as n, createElementVNode as f, renderSlot as a, createVNode as v, withCtx as h, createTextVNode as q, toDisplayString as T, createCommentVNode as B } from "vue";
+import M from "tabbable";
+import N from "../icon/comps/x-sm.vue.mjs";
+import V from "../button/CdrButton.vue.mjs";
+import w from "../popup/CdrPopup.vue.mjs";
+import A from "../../utils/propValidator.mjs";
+import O from "../../utils/mapClasses.mjs";
+import z from "./styles/CdrPopover.module.scss.mjs";
+import D from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const H = P({
+  name: "CdrPopover",
+  components: {
+    IconXSm: N,
+    CdrButton: V,
+    CdrPopup: w
+  },
+  props: {
+    position: {
+      type: String,
+      required: !1,
+      default: "top",
+      validator: (e) => A(e, ["top", "bottom", "left", "right"])
+    },
+    autoPosition: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    label: {
+      type: String,
+      required: !1
+    },
+    id: {
+      type: String,
+      required: !0
+    },
+    contentClass: {
+      type: String,
+      required: !1
+    },
+    open: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    }
+  },
+  emits: ["opened", "closed"],
+  setup(e, t) {
+    const s = u(!1);
+    let l;
+    const i = u(null), p = u(null), d = t.slots.trigger, c = t.slots.title || e.label, r = (o) => {
+      if (s.value === !0)
+        return;
+      const {
+        activeElement: $
+      } = document;
+      l = $, s.value = !0, t.emit("opened", o), setTimeout(() => {
+        const C = M(p.value.$el);
+        C[0] && C[0].focus();
+      }, 50);
+    }, g = (o) => {
+      s.value = !1, t.emit("closed", o), l && l.focus();
+    }, _ = () => {
+      const o = i.value.children[0];
+      o && o.addEventListener("click", r);
+    };
+    return E(() => e.open, () => {
+      e.open ? r() : g();
+    }), S(() => {
+      _();
+      const o = i.value.children[0];
+      o && (o.setAttribute("aria-controls", e.id), o.setAttribute("aria-haspopup", "dialog"));
+    }), {
+      style: k(),
+      mapClasses: O,
+      hasTrigger: d,
+      triggerEl: i,
+      popupEl: p,
+      closePopover: g,
+      openPopover: r,
+      isOpen: s,
+      hasTitle: c
+    };
+  }
+}), I = {
+  ref: "triggerEl"
+};
+function L(e, t, s, l, i, p) {
+  const d = m("icon-x-sm"), c = m("cdr-button"), r = m("cdr-popup");
+  return y(), b("div", {
+    class: n(e.mapClasses(e.style, "cdr-popover--wrapper", e.hasTrigger && "cdr-popover--position"))
+  }, [f("div", I, [a(e.$slots, "trigger")], 512), v(r, {
+    role: "dialog",
+    ref: "popupEl",
+    onClosed: e.closePopover,
+    position: e.position,
+    "auto-position": e.autoPosition,
+    opened: e.isOpen,
+    "aria-expanded": `${e.isOpen}`,
+    id: e.id,
+    "content-class": e.contentClass
+  }, {
+    default: h(() => [f("div", {
+      class: n(e.style["cdr-popover__container"])
+    }, [f("div", {
+      class: n(e.style["cdr-popover__content"])
+    }, [e.hasTitle ? (y(), b("div", {
+      key: 0,
+      class: n(e.style["cdr-popover__title"])
+    }, [a(e.$slots, "title", {}, () => [q(T(e.label), 1)])], 2)) : B("", !0), a(e.$slots, "default")], 2), v(c, {
+      class: n(e.style["cdr-popover__close-button"]),
+      "icon-only": "",
+      onClick: e.closePopover,
+      "aria-label": "Close",
+      size: "small"
+    }, {
+      default: h(() => [a(e.$slots, "icon", {}, () => [v(d, {
+        "inherit-color": ""
+      })])]),
+      _: 3
+    }, 8, ["class", "onClick"])], 2)]),
+    _: 3
+  }, 8, ["onClosed", "position", "auto-position", "opened", "aria-expanded", "id", "content-class"])], 2);
+}
+const X = {
+  $style: z
+}, Y = /* @__PURE__ */ D(H, [["render", L], ["__cssModules", X]]);
+export {
+  Y as default
+};

package/dist/src/components/popover/styles/CdrPopover.module.scss.mjs

@@ -0,0 +1,68 @@
+const r = {
+  "cdr-popup": "cdr-popup_13-4-0",
+  "cdr-popup--open": "cdr-popup--open_13-4-0",
+  "cdr-popup--closed": "cdr-popup--closed_13-4-0",
+  "cdr-popup__content": "cdr-popup__content_13-4-0",
+  "cdr-popup__arrow": "cdr-popup__arrow_13-4-0",
+  "cdr-popup--top": "cdr-popup--top_13-4-0",
+  "cdr-popup--bottom": "cdr-popup--bottom_13-4-0",
+  "cdr-popup--exit": "cdr-popup--exit_13-4-0",
+  "cdr-popup--corner-left": "cdr-popup--corner-left_13-4-0",
+  "cdr-popup--corner-right": "cdr-popup--corner-right_13-4-0",
+  "cdr-popup--left": "cdr-popup--left_13-4-0",
+  "cdr-popup--right": "cdr-popup--right_13-4-0",
+  "cdr-popup--corner-top": "cdr-popup--corner-top_13-4-0",
+  "cdr-popup--corner-bottom": "cdr-popup--corner-bottom_13-4-0",
+  "cdr-button": "cdr-button_13-4-0",
+  "cdr-button--has-icon-left": "cdr-button--has-icon-left_13-4-0",
+  "cdr-button--has-icon-right": "cdr-button--has-icon-right_13-4-0",
+  "cdr-button--primary": "cdr-button--primary_13-4-0",
+  "cdr-button--secondary": "cdr-button--secondary_13-4-0",
+  "cdr-button--dark": "cdr-button--dark_13-4-0",
+  "cdr-button--sale": "cdr-button--sale_13-4-0",
+  "cdr-button--link": "cdr-button--link_13-4-0",
+  "cdr-button--large": "cdr-button--large_13-4-0",
+  "cdr-button--medium": "cdr-button--medium_13-4-0",
+  "cdr-button--small": "cdr-button--small_13-4-0",
+  "cdr-button--icon-only": "cdr-button--icon-only_13-4-0",
+  "cdr-button--icon-only-large": "cdr-button--icon-only-large_13-4-0",
+  "cdr-button--with-background": "cdr-button--with-background_13-4-0",
+  "cdr-button--full-width": "cdr-button--full-width_13-4-0",
+  "cdr-button--small@xs": "cdr-button--small@xs_13-4-0",
+  "cdr-button--medium@xs": "cdr-button--medium@xs_13-4-0",
+  "cdr-button--large@xs": "cdr-button--large@xs_13-4-0",
+  "cdr-button--full-width@xs": "cdr-button--full-width@xs_13-4-0",
+  "cdr-button--small@sm": "cdr-button--small@sm_13-4-0",
+  "cdr-button--medium@sm": "cdr-button--medium@sm_13-4-0",
+  "cdr-button--large@sm": "cdr-button--large@sm_13-4-0",
+  "cdr-button--full-width@sm": "cdr-button--full-width@sm_13-4-0",
+  "cdr-button--small@md": "cdr-button--small@md_13-4-0",
+  "cdr-button--medium@md": "cdr-button--medium@md_13-4-0",
+  "cdr-button--large@md": "cdr-button--large@md_13-4-0",
+  "cdr-button--full-width@md": "cdr-button--full-width@md_13-4-0",
+  "cdr-button--small@lg": "cdr-button--small@lg_13-4-0",
+  "cdr-button--medium@lg": "cdr-button--medium@lg_13-4-0",
+  "cdr-button--large@lg": "cdr-button--large@lg_13-4-0",
+  "cdr-button--full-width@lg": "cdr-button--full-width@lg_13-4-0",
+  "cdr-icon": "cdr-icon_13-4-0",
+  "cdr-icon--small": "cdr-icon--small_13-4-0",
+  "cdr-icon--large": "cdr-icon--large_13-4-0",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_13-4-0",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_13-4-0",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_13-4-0",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_13-4-0",
+  "cdr-icon--small@md": "cdr-icon--small@md_13-4-0",
+  "cdr-icon--large@md": "cdr-icon--large@md_13-4-0",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_13-4-0",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_13-4-0",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-4-0",
+  "cdr-popover--position": "cdr-popover--position_13-4-0",
+  "cdr-popover--wrapper": "cdr-popover--wrapper_13-4-0",
+  "cdr-popover__title": "cdr-popover__title_13-4-0",
+  "cdr-popover__container": "cdr-popover__container_13-4-0",
+  "cdr-popover__content": "cdr-popover__content_13-4-0",
+  "cdr-popover__close-button": "cdr-popover__close-button_13-4-0"
+};
+export {
+  r as default
+};

package/dist/src/components/popup/CdrPopup.vue.mjs

@@ -0,0 +1,111 @@
+import { defineComponent as H, ref as n, computed as i, watch as w, onMounted as O, onUnmounted as q, useCssModule as A, openBlock as K, createElementBlock as N, normalizeClass as h, createElementVNode as k, mergeProps as U, renderSlot as V, nextTick as m } from "vue";
+import { debounce as W } from "lodash-es";
+import j from "../../utils/propValidator.mjs";
+import D from "./calculatePlacement.mjs";
+import F from "../../utils/mapClasses.mjs";
+import G from "./styles/CdrPopup.module.scss.mjs";
+import I from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const J = H({
+  name: "CdrPopup",
+  inheritAttrs: !1,
+  customOptions: {},
+  props: {
+    opened: {
+      type: Boolean,
+      default: !1
+    },
+    position: {
+      type: String,
+      required: !1,
+      default: "top",
+      validator: (e) => j(e, ["top", "bottom", "left", "right"])
+    },
+    autoPosition: {
+      type: Boolean,
+      default: !0
+    },
+    contentClass: {
+      type: String
+    }
+  },
+  emits: ["closed"],
+  setup(e, v) {
+    const f = "cdr-popup", s = n(e.position), l = n(void 0), t = n(!1), C = n(void 0), a = n(!e.opened), d = n(null), E = n(null), P = i(() => e.opened || t.value ? `cdr-popup--${s.value}` : void 0), $ = i(() => l.value ? `cdr-popup--corner-${l.value}` : void 0), L = i(() => e.opened ? "cdr-popup--open" : void 0), B = i(() => a.value && !t.value ? "cdr-popup--closed" : void 0), b = i(() => t.value ? "cdr-popup--exit" : void 0), c = (o) => {
+      v.emit("closed", o);
+    }, r = (o) => {
+      switch (o.key) {
+        case "Escape":
+        case "Esc":
+          c(o);
+          break;
+      }
+    }, u = (o) => {
+      m(() => {
+        o.target !== d.value && !d.value.contains(o.target) && c(o);
+      });
+    }, g = () => {
+      a.value = !1, m(() => {
+        C.value = d.value.getBoundingClientRect(), a.value = !0;
+      });
+    }, p = () => {
+      W(() => {
+        g();
+      }, 300);
+    }, R = () => {
+      document.addEventListener("keydown", r), document.addEventListener("click", u);
+    }, z = () => {
+      s.value = e.position, l.value = void 0, e.autoPosition && m(() => {
+        const o = E.value.parentElement.getBoundingClientRect(), {
+          innerHeight: S,
+          innerWidth: T
+        } = window, y = D(o, C.value, T, S, e.position);
+        s.value = y.pos, l.value = y.corner;
+      }), a.value = !1, setTimeout(() => {
+        R();
+      }, 1);
+    }, M = () => {
+      a.value = !0, document.removeEventListener("keydown", r), document.removeEventListener("click", u), t.value = !0, setTimeout(() => {
+        t.value = !1;
+      }, 200);
+    };
+    return w(() => e.position, () => s.value = e.position), w(() => e.opened, () => {
+      e.opened ? z() : M();
+    }), O(() => {
+      g(), window.addEventListener("resize", p);
+    }), q(() => {
+      document.removeEventListener("keydown", r), document.removeEventListener("click", u), window.removeEventListener("resize", p);
+    }), {
+      style: A(),
+      mapClasses: F,
+      baseClass: f,
+      positionClass: P,
+      cornerClass: $,
+      openClass: L,
+      closedClass: B,
+      exitingClass: b,
+      closePopup: c,
+      handleClick: u,
+      handleKeydown: r,
+      handleResize: p,
+      popupEl: d,
+      rootEl: E
+    };
+  }
+});
+function Q(e, v, f, s, l, t) {
+  return K(), N("div", {
+    ref: "rootEl",
+    class: h(e.mapClasses(e.style, e.baseClass, e.openClass, e.exitingClass, e.positionClass, e.cornerClass, e.closedClass))
+  }, [k("div", U(e.$attrs, {
+    class: e.mapClasses(e.style, "cdr-popup__content", e.contentClass),
+    ref: "popupEl"
+  }), [V(e.$slots, "default")], 16), k("div", {
+    class: h(e.style["cdr-popup__arrow"])
+  }, null, 2)], 2);
+}
+const X = {
+  $style: G
+}, te = /* @__PURE__ */ I(J, [["render", Q], ["__cssModules", X]]);
+export {
+  te as default
+};

package/dist/src/components/popup/calculatePlacement.mjs

@@ -0,0 +1,27 @@
+function j(e, o, l, n, h) {
+  const b = e.top + e.height / 2, d = e.left + e.width / 2;
+  let f, s;
+  const t = {
+    top: e.top - o.height - 14,
+    bottom: n - e.bottom - o.height - 14,
+    left: e.left - o.width - 14,
+    right: l - e.right - o.width - 14
+  }, r = {
+    left: d - o.width / 2 - 2 <= 0,
+    right: d + o.width / 2 + 2 >= l,
+    top: b - o.height / 2 - 2 <= 0,
+    bottom: b + o.height / 2 + 2 >= n
+  }, m = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  }[h], w = Object.keys(t).filter((i) => t[i] > 0), S = Object.keys(t).sort((i, z) => t[i] > t[z] ? -1 : t[i] < t[z] ? 1 : 0);
+  return t[h] > 0 ? f = h : t[m] > 0 ? f = m : w.length ? [f] = w : [f] = S, f === "bottom" || f === "top" ? r.left ? s = "left" : r.right && (s = "right") : r.top ? s = "top" : r.bottom && (s = "bottom"), {
+    pos: f,
+    corner: s
+  };
+}
+export {
+  j as default
+};

package/dist/src/components/popup/styles/CdrPopup.module.scss.mjs

@@ -0,0 +1,19 @@
+const p = {
+  "cdr-popup": "cdr-popup_13-4-0",
+  "cdr-popup--open": "cdr-popup--open_13-4-0",
+  "cdr-popup--closed": "cdr-popup--closed_13-4-0",
+  "cdr-popup__content": "cdr-popup__content_13-4-0",
+  "cdr-popup__arrow": "cdr-popup__arrow_13-4-0",
+  "cdr-popup--top": "cdr-popup--top_13-4-0",
+  "cdr-popup--bottom": "cdr-popup--bottom_13-4-0",
+  "cdr-popup--exit": "cdr-popup--exit_13-4-0",
+  "cdr-popup--corner-left": "cdr-popup--corner-left_13-4-0",
+  "cdr-popup--corner-right": "cdr-popup--corner-right_13-4-0",
+  "cdr-popup--left": "cdr-popup--left_13-4-0",
+  "cdr-popup--right": "cdr-popup--right_13-4-0",
+  "cdr-popup--corner-top": "cdr-popup--corner-top_13-4-0",
+  "cdr-popup--corner-bottom": "cdr-popup--corner-bottom_13-4-0"
+};
+export {
+  p as default
+};

package/dist/src/components/quote/CdrQuote.vue.mjs

@@ -0,0 +1,56 @@
+import { defineComponent as d, computed as c, useCssModule as p, openBlock as t, createBlock as f, resolveDynamicComponent as y, normalizeClass as o, withCtx as C, createElementBlock as l, toDisplayString as m, createCommentVNode as n, renderSlot as g } from "vue";
+import $ from "../../utils/mapClasses.mjs";
+import u from "../../utils/propValidator.mjs";
+import k from "./styles/CdrQuote.module.scss.mjs";
+import q from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const S = d({
+  name: "CdrQuote",
+  props: {
+    tag: {
+      type: String,
+      default: "blockquote",
+      validator: (s) => u(s, ["blockquote", "aside", "q", "div"])
+    },
+    modifier: {
+      type: String,
+      default: "",
+      validator: (s) => u(s, ["", "pull"])
+    },
+    /** Caption summary text */
+    summary: String,
+    /** Caption credit text */
+    citation: String
+  },
+  setup(s) {
+    const e = "cdr-quote", a = "cdr-quote__summary", r = "cdr-quote__citation", i = c(() => s.modifier && `${e}--${s.modifier}`);
+    return {
+      style: p(),
+      mapClasses: $,
+      baseClass: e,
+      summaryClass: a,
+      citationClass: r,
+      modifierClass: i
+    };
+  }
+});
+function v(s, e, a, r, i, B) {
+  return t(), f(y(s.tag), {
+    class: o(s.mapClasses(s.style, s.baseClass, s.modifierClass))
+  }, {
+    default: C(() => [s.summary ? (t(), l("p", {
+      key: 0,
+      class: o(s.style[s.summaryClass])
+    }, m(s.summary), 3)) : n("", !0), g(s.$slots, "default"), s.citation ? (t(), l("cite", {
+      key: 1,
+      class: o(s.style[s.citationClass]),
+      tag: "cite"
+    }, m(s.citation), 3)) : n("", !0)]),
+    _: 3
+  }, 8, ["class"]);
+}
+const b = {
+  $style: k
+}, z = /* @__PURE__ */ q(S, [["render", v], ["__cssModules", b]]);
+export {
+  z as default
+};