@rei/cedar 13.4.0-alpha.0 → 13.5.0-alpha.0

package/dist/src/components/input/styles/CdrInput.module.scss.mjs

@@ -0,0 +1,37 @@
+const a = {
+  "cdr-label-standalone": "cdr-label-standalone_13-5-0-alpha-0",
+  "cdr-label-standalone__label-wrapper": "cdr-label-standalone__label-wrapper_13-5-0-alpha-0",
+  "cdr-label-standalone__label": "cdr-label-standalone__label_13-5-0-alpha-0",
+  "cdr-label-standalone__label--sr-only": "cdr-label-standalone__label--sr-only_13-5-0-alpha-0",
+  "cdr-label-standalone__label--disabled": "cdr-label-standalone__label--disabled_13-5-0-alpha-0",
+  "cdr-label-standalone__optional": "cdr-label-standalone__optional_13-5-0-alpha-0",
+  "cdr-label-standalone__helper": "cdr-label-standalone__helper_13-5-0-alpha-0",
+  "cdr-label-standalone__info": "cdr-label-standalone__info_13-5-0-alpha-0",
+  "cdr-label-standalone__post-content": "cdr-label-standalone__post-content_13-5-0-alpha-0",
+  "cdr-label-standalone__info-action": "cdr-label-standalone__info-action_13-5-0-alpha-0",
+  "cdr-label-standalone__input-wrap": "cdr-label-standalone__input-wrap_13-5-0-alpha-0",
+  "cdr-label-standalone__input-spacing": "cdr-label-standalone__input-spacing_13-5-0-alpha-0",
+  "cdr-form-error": "cdr-form-error_13-5-0-alpha-0",
+  "cdr-form-error__icon": "cdr-form-error__icon_13-5-0-alpha-0",
+  "cdr-input": "cdr-input_13-5-0-alpha-0",
+  "cdr-input--focus": "cdr-input--focus_13-5-0-alpha-0",
+  "cdr-input--multiline": "cdr-input--multiline_13-5-0-alpha-0",
+  "cdr-input--preicon": "cdr-input--preicon_13-5-0-alpha-0",
+  "cdr-input--posticon": "cdr-input--posticon_13-5-0-alpha-0",
+  "cdr-input--posticons": "cdr-input--posticons_13-5-0-alpha-0",
+  "cdr-input--primary": "cdr-input--primary_13-5-0-alpha-0",
+  "cdr-input--secondary": "cdr-input--secondary_13-5-0-alpha-0",
+  "cdr-input--error": "cdr-input--error_13-5-0-alpha-0",
+  "cdr-input--large": "cdr-input--large_13-5-0-alpha-0",
+  "cdr-input--large@xs": "cdr-input--large@xs_13-5-0-alpha-0",
+  "cdr-input--large@sm": "cdr-input--large@sm_13-5-0-alpha-0",
+  "cdr-input--large@md": "cdr-input--large@md_13-5-0-alpha-0",
+  "cdr-input--large@lg": "cdr-input--large@lg_13-5-0-alpha-0",
+  "cdr-input__pre-icon": "cdr-input__pre-icon_13-5-0-alpha-0",
+  "cdr-input__post-icon": "cdr-input__post-icon_13-5-0-alpha-0",
+  "cdr-input__helper-text": "cdr-input__helper-text_13-5-0-alpha-0",
+  "cdr-input-wrap": "cdr-input-wrap_13-5-0-alpha-0"
+};
+export {
+  a as default
+};

package/dist/src/components/labelStandalone/CdrLabelStandalone.vue.mjs

@@ -0,0 +1,70 @@
+import { defineComponent as m, computed as p, useCssModule as C, openBlock as l, createElementBlock as a, normalizeClass as s, createElementVNode as t, createTextVNode as $, toDisplayString as f, createCommentVNode as n, renderSlot as o } from "vue";
+import L from "../../utils/mapClasses.mjs";
+import k from "./styles/CdrLabelStandalone.module.scss.mjs";
+import S from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const I = m({
+  name: "CdrLabelStandalone",
+  props: {
+    forId: {
+      type: String,
+      required: !0
+    },
+    label: String,
+    disabled: Boolean,
+    required: Boolean,
+    optional: Boolean,
+    hideLabel: Boolean
+  },
+  setup(e, r) {
+    const b = "cdr-label-standalone", d = r.slots.helper, i = r.slots.info, u = r.slots["info-action"], c = p(() => e.disabled && "cdr-label-standalone__label--disabled"), y = p(() => e.hideLabel && "cdr-label-standalone__label--sr-only"), h = p(() => (!e.hideLabel || d || i) && "cdr-label-standalone__input-spacing");
+    return {
+      style: C(),
+      mapClasses: L,
+      baseClass: b,
+      hasHelper: d,
+      hasInfo: i,
+      hasInfoAction: u,
+      disabledLabelClass: c,
+      srOnlyLabelClass: y,
+      inputSpacingClass: h
+    };
+  }
+}), _ = ["for"], g = {
+  key: 0,
+  "aria-hidden": "true"
+}, B = {
+  key: 0
+}, v = ["id"];
+function q(e, r, b, d, i, u) {
+  return l(), a("div", {
+    class: s(e.style[e.baseClass])
+  }, [t("div", {
+    class: s(e.style["cdr-label-standalone__label-wrapper"])
+  }, [t("label", {
+    class: s(e.mapClasses(e.style, "cdr-label-standalone__label", e.disabledLabelClass, e.srOnlyLabelClass)),
+    for: e.forId
+  }, [$(f(e.label) + f((e.required || e.optional, "")) + " ", 1), e.required ? (l(), a("span", g, "*")) : e.optional ? (l(), a("span", {
+    key: 1,
+    class: s(e.style["cdr-label-standalone__optional"])
+  }, "(optional)", 2)) : n("", !0)], 10, _), !e.hideLabel && e.hasHelper ? (l(), a("br", B)) : n("", !0), e.hasHelper ? (l(), a("span", {
+    key: 1,
+    class: s(e.style["cdr-label-standalone__helper"]),
+    id: `${e.forId}-helper-text-top`
+  }, [o(e.$slots, "helper")], 10, v)) : n("", !0)], 2), t("div", {
+    class: s(e.mapClasses(e.style, "cdr-label-standalone__input-wrap", e.inputSpacingClass))
+  }, [o(e.$slots, "default"), e.hasInfoAction ? (l(), a("div", {
+    key: 0,
+    class: s(e.style["cdr-label-standalone__info-action"])
+  }, [o(e.$slots, "info-action")], 2)) : n("", !0)], 2), e.hasInfo ? (l(), a("span", {
+    key: 0,
+    class: s(e.style["cdr-label-standalone__info"])
+  }, [o(e.$slots, "info")], 2)) : n("", !0), t("div", {
+    class: s(e.style["cdr-label-standalone__post-content"])
+  }, [o(e.$slots, "helper-text-bottom"), o(e.$slots, "error")], 2)], 2);
+}
+const H = {
+  $style: k
+}, A = /* @__PURE__ */ S(I, [["render", q], ["__cssModules", H]]);
+export {
+  A as default
+};

package/dist/src/components/labelStandalone/styles/CdrLabelStandalone.module.scss.mjs

@@ -0,0 +1,17 @@
+const a = {
+  "cdr-label-standalone": "cdr-label-standalone_13-5-0-alpha-0",
+  "cdr-label-standalone__label-wrapper": "cdr-label-standalone__label-wrapper_13-5-0-alpha-0",
+  "cdr-label-standalone__label": "cdr-label-standalone__label_13-5-0-alpha-0",
+  "cdr-label-standalone__label--sr-only": "cdr-label-standalone__label--sr-only_13-5-0-alpha-0",
+  "cdr-label-standalone__label--disabled": "cdr-label-standalone__label--disabled_13-5-0-alpha-0",
+  "cdr-label-standalone__optional": "cdr-label-standalone__optional_13-5-0-alpha-0",
+  "cdr-label-standalone__helper": "cdr-label-standalone__helper_13-5-0-alpha-0",
+  "cdr-label-standalone__info": "cdr-label-standalone__info_13-5-0-alpha-0",
+  "cdr-label-standalone__post-content": "cdr-label-standalone__post-content_13-5-0-alpha-0",
+  "cdr-label-standalone__info-action": "cdr-label-standalone__info-action_13-5-0-alpha-0",
+  "cdr-label-standalone__input-wrap": "cdr-label-standalone__input-wrap_13-5-0-alpha-0",
+  "cdr-label-standalone__input-spacing": "cdr-label-standalone__input-spacing_13-5-0-alpha-0"
+};
+export {
+  a as default
+};

package/dist/src/components/labelWrapper/CdrLabelWrapper.vue.mjs

@@ -0,0 +1,44 @@
+import { defineComponent as d, computed as a, useCssModule as p, openBlock as c, createElementBlock as m, normalizeClass as l, createElementVNode as r, renderSlot as t } from "vue";
+import { responsiveModifyClass as b } from "../../utils/buildClass.mjs";
+import f from "../../props/background.mjs";
+import C from "../../utils/mapClasses.mjs";
+import u from "./styles/CdrLabelWrapper.module.scss.mjs";
+import $ from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const g = d({
+  name: "CdrLabelWrapper",
+  props: {
+    labelClass: String,
+    contentClass: String,
+    background: f,
+    disabled: Boolean,
+    modifier: String,
+    size: String
+  },
+  setup(s) {
+    const e = "cdr-label-wrapper", o = a(() => s.modifier && `${e}--${s.modifier}`), n = a(() => s.size && b(e, "", s.size)), i = a(() => s.disabled && `${e}--disabled`);
+    return {
+      style: p(),
+      modifierClass: o,
+      sizeClass: n,
+      disabledClass: i,
+      mapClasses: C
+    };
+  }
+});
+function y(s, e, o, n, i, z) {
+  return c(), m("div", {
+    class: l(s.style["cdr-label-wrapper__container"])
+  }, [r("label", {
+    class: l(s.mapClasses(s.style, "cdr-label-wrapper", `cdr-label-wrapper--${s.background}`, s.disabledClass, s.modifierClass, s.sizeClass).concat(` ${s.labelClass || ""}`))
+  }, [t(s.$slots, "input"), r("span", {
+    class: l(s.style["cdr-label-wrapper__figure"])
+  }, null, 2), r("span", {
+    class: l([s.style["cdr-label-wrapper__content"], s.contentClass])
+  }, [t(s.$slots, "default")], 2)], 2)], 2);
+}
+const w = {
+  $style: u
+}, E = /* @__PURE__ */ $(g, [["render", y], ["__cssModules", w]]);
+export {
+  E as default
+};

package/dist/src/components/labelWrapper/styles/CdrLabelWrapper.module.scss.mjs

@@ -0,0 +1,28 @@
+const a = {
+  "cdr-label-wrapper": "cdr-label-wrapper_13-5-0-alpha-0",
+  "cdr-label-wrapper__container": "cdr-label-wrapper__container_13-5-0-alpha-0",
+  "cdr-label-wrapper--primary": "cdr-label-wrapper--primary_13-5-0-alpha-0",
+  "cdr-label-wrapper--secondary": "cdr-label-wrapper--secondary_13-5-0-alpha-0",
+  "cdr-label-wrapper--disabled": "cdr-label-wrapper--disabled_13-5-0-alpha-0",
+  "cdr-label-wrapper__figure": "cdr-label-wrapper__figure_13-5-0-alpha-0",
+  "cdr-label-wrapper__content": "cdr-label-wrapper__content_13-5-0-alpha-0",
+  "cdr-label-wrapper--hide-figure": "cdr-label-wrapper--hide-figure_13-5-0-alpha-0",
+  "cdr-label-wrapper--small": "cdr-label-wrapper--small_13-5-0-alpha-0",
+  "cdr-label-wrapper--medium": "cdr-label-wrapper--medium_13-5-0-alpha-0",
+  "cdr-label-wrapper--large": "cdr-label-wrapper--large_13-5-0-alpha-0",
+  "cdr-label-wrapper--small@xs": "cdr-label-wrapper--small@xs_13-5-0-alpha-0",
+  "cdr-label-wrapper--medium@xs": "cdr-label-wrapper--medium@xs_13-5-0-alpha-0",
+  "cdr-label-wrapper--large@xs": "cdr-label-wrapper--large@xs_13-5-0-alpha-0",
+  "cdr-label-wrapper--small@sm": "cdr-label-wrapper--small@sm_13-5-0-alpha-0",
+  "cdr-label-wrapper--medium@sm": "cdr-label-wrapper--medium@sm_13-5-0-alpha-0",
+  "cdr-label-wrapper--large@sm": "cdr-label-wrapper--large@sm_13-5-0-alpha-0",
+  "cdr-label-wrapper--small@md": "cdr-label-wrapper--small@md_13-5-0-alpha-0",
+  "cdr-label-wrapper--medium@md": "cdr-label-wrapper--medium@md_13-5-0-alpha-0",
+  "cdr-label-wrapper--large@md": "cdr-label-wrapper--large@md_13-5-0-alpha-0",
+  "cdr-label-wrapper--small@lg": "cdr-label-wrapper--small@lg_13-5-0-alpha-0",
+  "cdr-label-wrapper--medium@lg": "cdr-label-wrapper--medium@lg_13-5-0-alpha-0",
+  "cdr-label-wrapper--large@lg": "cdr-label-wrapper--large@lg_13-5-0-alpha-0"
+};
+export {
+  a as default
+};

package/dist/src/components/link/CdrLink.vue.mjs

@@ -0,0 +1,60 @@
+import { defineComponent as n, computed as r, useCssModule as i, openBlock as d, createBlock as f, resolveDynamicComponent as m, normalizeClass as u, withCtx as c, renderSlot as C } from "vue";
+import p from "../../utils/mapClasses.mjs";
+import g from "../../utils/propValidator.mjs";
+import h from "./styles/CdrLink.module.scss.mjs";
+import y from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const $ = n({
+  name: "CdrLink",
+  props: {
+    tag: {
+      type: String,
+      default: "a"
+    },
+    href: {
+      type: String,
+      default: "#"
+    },
+    inheritColor: {
+      type: Boolean,
+      default: !1
+    },
+    modifier: {
+      type: String,
+      default: "",
+      validator: (e) => g(e, ["", "standalone"])
+    },
+    /** @ignore */
+    target: String,
+    /** @ignore */
+    rel: String
+  },
+  setup(e) {
+    const t = "cdr-link", o = r(() => e.tag === "a" ? e.href : null), s = r(() => e.target === "_blank" ? e.rel || "noopener noreferrer" : e.rel), l = r(() => e.modifier && `${t}--${e.modifier}`), a = r(() => e.inheritColor && "cdr-link--inherit-color");
+    return {
+      style: i(),
+      baseClass: t,
+      computedHref: o,
+      computedRel: s,
+      modifierClass: l,
+      inheritColorClass: a,
+      mapClasses: p
+    };
+  }
+});
+function k(e, t, o, s, l, a) {
+  return d(), f(m(e.tag), {
+    class: u(e.mapClasses(e.style, e.baseClass, e.modifierClass, e.inheritColorClass)),
+    target: e.target,
+    rel: e.computedRel,
+    href: e.computedHref
+  }, {
+    default: c(() => [C(e.$slots, "default")]),
+    _: 3
+  }, 8, ["class", "target", "rel", "href"]);
+}
+const S = {
+  $style: h
+}, L = /* @__PURE__ */ y($, [["render", k], ["__cssModules", S]]);
+export {
+  L as default
+};

package/dist/src/components/link/styles/CdrLink.module.scss.mjs

@@ -0,0 +1,8 @@
+const l = {
+  "cdr-link": "cdr-link_13-5-0-alpha-0",
+  "cdr-link--standalone": "cdr-link--standalone_13-5-0-alpha-0",
+  "cdr-link--inherit-color": "cdr-link--inherit-color_13-5-0-alpha-0"
+};
+export {
+  l as default
+};

package/dist/src/components/list/CdrList.vue.mjs

@@ -0,0 +1,44 @@
+import { defineComponent as a, useCssModule as n, computed as d, openBlock as m, createBlock as p, resolveDynamicComponent as c, normalizeClass as f, withCtx as u, renderSlot as C } from "vue";
+import i from "../../utils/propValidator.mjs";
+import $ from "./styles/CdrList.module.scss.mjs";
+import y from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const _ = a({
+  name: "CdrList",
+  props: {
+    /**
+     * Tag accepts a user defined element and expects either: 'ul' = Unordered List or 'ol' = Ordered List.
+     */
+    tag: {
+      type: String,
+      default: "ul",
+      validator: (e) => i(e, ["ul", "ol"])
+    },
+    modifier: {
+      type: String,
+      default: "",
+      validator: (e) => i(e, ["", "ordered", "unordered", "compact", "inline"])
+    }
+  },
+  setup(e) {
+    const s = "cdr-list", o = n(), t = d(() => e.modifier.split(" ").map((r) => o[`${s}--${r}`]));
+    return {
+      style: o,
+      baseClass: s,
+      modifierClasses: t
+    };
+  }
+});
+function g(e, s, o, t, l, r) {
+  return m(), p(c(e.tag), {
+    class: f([e.style[e.baseClass], e.modifierClasses])
+  }, {
+    default: u(() => [C(e.$slots, "default")]),
+    _: 3
+  }, 8, ["class"]);
+}
+const v = {
+  $style: $
+}, k = /* @__PURE__ */ y(_, [["render", g], ["__cssModules", v]]);
+export {
+  k as default
+};

package/dist/src/components/list/styles/CdrList.module.scss.mjs

@@ -0,0 +1,10 @@
+const d = {
+  "cdr-list": "cdr-list_13-5-0-alpha-0",
+  "cdr-list--compact": "cdr-list--compact_13-5-0-alpha-0",
+  "cdr-list--ordered": "cdr-list--ordered_13-5-0-alpha-0",
+  "cdr-list--unordered": "cdr-list--unordered_13-5-0-alpha-0",
+  "cdr-list--inline": "cdr-list--inline_13-5-0-alpha-0"
+};
+export {
+  d as default
+};

package/dist/src/components/modal/CdrModal.vue.mjs

@@ -0,0 +1,214 @@
+import { debounce as Q } from "lodash-es";
+import D from "tabbable";
+import { defineComponent as Z, ref as t, computed as g, watch as x, onMounted as ee, onUnmounted as le, useCssModule as oe, resolveComponent as z, openBlock as te, createElementBlock as ne, normalizeClass as s, createElementVNode as n, mergeProps as se, renderSlot as w, normalizeStyle as O, toDisplayString as ae, createCommentVNode as re, createVNode as X, withCtx as de, nextTick as A } from "vue";
+import { CdrBreakpointSm as ie, CdrSpaceTwoX as P, CdrSpaceOneX as ce } from "../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.mjs";
+import ue from "./onTransitionEnd.mjs";
+import me from "../button/CdrButton.vue.mjs";
+import fe from "../icon/comps/x-lg.vue.mjs";
+import ve from "../../utils/mapClasses.mjs";
+import pe from "./styles/CdrModal.module.scss.mjs";
+import ye from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const he = Z({
+  name: "CdrModal",
+  components: {
+    CdrButton: me,
+    IconXLg: fe
+  },
+  props: {
+    opened: {
+      type: Boolean,
+      required: !0
+    },
+    label: {
+      type: String,
+      required: !0
+    },
+    showTitle: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    ariaDescribedby: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    role: {
+      type: String,
+      required: !1,
+      default: "dialog"
+    },
+    id: {
+      type: String,
+      required: !1,
+      default: null
+    },
+    overlayClass: String,
+    wrapperClass: String,
+    contentClass: String,
+    animationDuration: {
+      type: Number,
+      default: 300
+    }
+  },
+  emits: ["closed"],
+  setup(e, d) {
+    const E = "cdr-modal";
+    let f, v;
+    const p = t(!e.opened), i = t(!1), a = t(null), y = t(0), S = t(0), k = t(0), _ = t(0), L = t(0), H = t(0), $ = t(!1), c = t(null), h = t(null), u = t(null), T = t(null), C = () => {
+      A(() => {
+        var l, o, m, r, b;
+        S.value = window.innerHeight, $.value = window.innerWidth < ie, y.value = (l = T.value) == null ? void 0 : l.offsetHeight, k.value = (o = u.value) == null ? void 0 : o.scrollHeight, _.value = (m = u.value) == null ? void 0 : m.offsetHeight, L.value = (r = u.value) == null ? void 0 : r.offsetWidth, H.value = (b = u.value) == null ? void 0 : b.clientWidth;
+      });
+    }, M = (l) => {
+      d.emit("closed", l);
+    }, N = ({
+      key: l
+    }) => {
+      switch (l) {
+        case "Escape":
+        case "Esc":
+          M();
+          break;
+      }
+    }, B = (l) => {
+      const {
+        documentElement: o
+      } = document;
+      if (c.value.contains(l.target) || !o)
+        return;
+      const m = D(o), r = D(c.value), b = m.indexOf(l.target), J = m.indexOf(r[0]), q = b < J ? r[r.length - 1] : r[0];
+      q && q.focus();
+    }, I = Q(() => {
+      C();
+    }, 300), R = () => {
+      const {
+        documentElement: l,
+        body: o
+      } = document;
+      a.value = {
+        x: window.scrollX || (l || {}).scrollLeft || (o || {}).scrollLeft || 0,
+        y: window.scrollY || (l || {}).scrollTop || (o || {}).scrollTop || 0
+      }, l && (l.classList.add("cdr-modal__noscroll"), l.style.top = `-${a.value.y}px`, l.style.left = `-${a.value.x}px`), o && o.classList.add("cdr-modal__noscroll");
+    }, V = () => {
+      const {
+        documentElement: l,
+        body: o
+      } = document;
+      o && o.classList.remove("cdr-modal__noscroll"), l && (l.classList.remove("cdr-modal__noscroll"), l.style.top = "", l.style.left = "");
+    }, F = () => {
+      document.addEventListener("focusin", B, !0), document.addEventListener("keydown", N);
+    }, W = () => {
+      const {
+        activeElement: l
+      } = document;
+      R(), i.value = !0, p.value = !1, v = l, A(() => {
+        c.value && c.value.focus(), C(), F(), setTimeout(() => {
+          h.value && (h.value.scrollTop = 0), C();
+        });
+      });
+    }, K = () => {
+      const {
+        documentElement: l
+      } = document;
+      document.removeEventListener("keydown", N), document.removeEventListener("focusin", B, !0), i.value = !1, f = ue(h.value, () => {
+        i.value || (f(), V(), f = null, p.value = !0, l && (l.style.scrollBehavior = "auto"), window.scrollTo(a.value.x, a.value.y), l && (l.style.scrollBehavior = ""), v && v.focus());
+      }, e.animationDuration + 16);
+    }, U = g(() => ({
+      ...d.attrs,
+      "aria-describedby": e.ariaDescribedby,
+      "aria-modal": "true",
+      id: e.id
+    })), Y = g(() => {
+      const l = Number(P), o = Number(P) + Number(ce);
+      return $.value ? l : o + l;
+    }), j = g(() => S.value - y.value - Y.value), G = g(() => {
+      const l = k.value > _.value, o = L.value - H.value > 0;
+      return l && o ? 4 : l ? 12 : 0;
+    });
+    return x(() => e.opened, (l, o) => {
+      !!l != !!o && (l ? W() : K());
+    }), ee(() => {
+      e.opened && W(), window.addEventListener("resize", I);
+    }), le(() => {
+      window.removeEventListener("resize", I);
+    }), {
+      style: oe(),
+      mapClasses: ve,
+      baseClass: E,
+      modalClosed: p,
+      modalEl: c,
+      wrapperEl: h,
+      contentEl: u,
+      headerEl: T,
+      scrollMaxHeight: j,
+      scrollPadding: G,
+      onClick: M,
+      dialogAttrs: U
+    };
+  }
+}), be = ["tabIndex"], ge = ["role", "aria-modal", "aria-label"], Ce = ["tabIndex"];
+function we(e, d, E, f, v, p) {
+  const i = z("icon-x-lg"), a = z("cdr-button");
+  return te(), ne("div", {
+    class: s(e.mapClasses(e.style, e.baseClass, !e.opened && "cdr-modal--closed")),
+    ref: "wrapperEl"
+  }, [n("div", {
+    class: s([e.style["cdr-modal__outerWrap"], e.wrapperClass])
+  }, [n("div", {
+    "aria-hidden": "true",
+    onClick: d[0] || (d[0] = (...y) => e.onClick && e.onClick(...y)),
+    class: s([e.style["cdr-modal__overlay"], e.overlayClass])
+  }, null, 2), n("div", {
+    tabIndex: e.opened ? "0" : void 0
+  }, null, 8, be), n("div", se({
+    ref: "modalEl",
+    class: e.mapClasses(e.style, "cdr-modal__contentWrap", "cdr-modal__dialog"),
+    tabIndex: "-1",
+    role: e.role,
+    "aria-modal": !!e.opened,
+    "aria-label": e.label
+  }, e.dialogAttrs), [w(e.$slots, "modal", {}, () => [n("div", {
+    class: s([e.style["cdr-modal__innerWrap"], e.contentClass]),
+    style: O(e.modalClosed ? {
+      display: "none"
+    } : void 0)
+  }, [n("section", null, [n("div", {
+    class: s(e.style["cdr-modal__content"])
+  }, [n("div", {
+    class: s(e.style["cdr-modal__header"]),
+    ref: "headerEl"
+  }, [n("div", {
+    class: s(e.style["cdr-modal__title"])
+  }, [e.showTitle ? w(e.$slots, "title", {
+    key: 0
+  }, () => [n("h1", null, ae(e.label), 1)]) : re("", !0)], 2), X(a, {
+    class: s(e.style["cdr-modal__close-button"]),
+    "icon-only": "",
+    "with-background": !0,
+    onClick: e.onClick,
+    "aria-label": "Close"
+  }, {
+    icon: de(() => [X(i, {
+      "inherit-color": ""
+    })]),
+    _: 1
+  }, 8, ["class", "onClick"])], 2), n("div", {
+    class: s(e.style["cdr-modal__text-content"]),
+    style: O({
+      maxHeight: `${e.scrollMaxHeight}px`,
+      paddingRight: `${e.scrollPadding}px`
+    }),
+    role: "document",
+    ref: "contentEl",
+    tabindex: "0"
+  }, [w(e.$slots, "default")], 6)], 2)])], 6)])], 16, ge), n("div", {
+    tabIndex: e.opened ? "0" : void 0
+  }, null, 8, Ce)], 2)], 2);
+}
+const Ee = {
+  $style: pe
+}, Ie = /* @__PURE__ */ ye(he, [["render", we], ["__cssModules", Ee]]);
+export {
+  Ie as default
+};

package/dist/src/components/modal/onTransitionEnd.mjs

@@ -0,0 +1,29 @@
+const s = {
+  transition: "transitionend",
+  WebkitTransition: "webkitTransitionEnd",
+  MozTransition: "transitionend",
+  OTransition: "oTransitionEnd otransitionend"
+};
+let o;
+if (typeof document < "u") {
+  const {
+    style: i
+  } = document.createElement("div"), n = Object.keys(s);
+  for (let t = 0, e = n[t]; t < n.length; t += 1, e = n[t])
+    if (e in i) {
+      o = s[e];
+      break;
+    }
+}
+const r = (i, n, t) => {
+  i.addEventListener(o, n);
+  let e;
+  return t && (e = setTimeout(() => {
+    i.removeEventListener(o, n), n();
+  }, t)), () => {
+    clearTimeout(e), i.removeEventListener(o, n);
+  };
+};
+export {
+  r as default
+};

package/dist/src/components/modal/styles/CdrModal.module.scss.mjs

@@ -0,0 +1,17 @@
+const a = {
+  "cdr-modal": "cdr-modal_13-5-0-alpha-0",
+  "cdr-modal__overlay": "cdr-modal__overlay_13-5-0-alpha-0",
+  "cdr-modal__outerWrap": "cdr-modal__outerWrap_13-5-0-alpha-0",
+  "cdr-modal__contentWrap": "cdr-modal__contentWrap_13-5-0-alpha-0",
+  "cdr-modal__innerWrap": "cdr-modal__innerWrap_13-5-0-alpha-0",
+  "cdr-modal__dialog": "cdr-modal__dialog_13-5-0-alpha-0",
+  "cdr-modal__content": "cdr-modal__content_13-5-0-alpha-0",
+  "cdr-modal__header": "cdr-modal__header_13-5-0-alpha-0",
+  "cdr-modal__title": "cdr-modal__title_13-5-0-alpha-0",
+  "cdr-modal__close-button": "cdr-modal__close-button_13-5-0-alpha-0",
+  "cdr-modal__text-content": "cdr-modal__text-content_13-5-0-alpha-0",
+  "cdr-modal--closed": "cdr-modal--closed_13-5-0-alpha-0"
+};
+export {
+  a as default
+};