@rei/cedar 13.0.0-alpha.2 → 13.0.0-alpha.3

package/dist/lib/src/components/labelStandalone/CdrLabelStandalone.vue_vue_type_template_id_0fc61c8e_lang.mjs

@@ -0,0 +1,75 @@
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, renderSlot } from 'vue';
+
+const _hoisted_1 = ["for"];
+const _hoisted_2 = {
+  key: 0,
+  "aria-label": "required"
+};
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = ["id"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.style[_ctx.baseClass])
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.style['cdr-label-standalone__label-wrapper'])
+    }, [
+      createElementVNode("label", {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-label-standalone__label', _ctx.disabledLabelClass, _ctx.srOnlyLabelClass)),
+        for: _ctx.forId
+      }, [
+        createTextVNode(toDisplayString(_ctx.label) + toDisplayString(_ctx.required || _ctx.optional ? '' : '') + " ", 1 /* TEXT */),
+        (_ctx.required)
+          ? (openBlock(), createElementBlock("span", _hoisted_2, "*"))
+          : (_ctx.optional)
+            ? (openBlock(), createElementBlock("span", {
+                key: 1,
+                class: normalizeClass(_ctx.style['cdr-label-standalone__optional'])
+              }, "(optional)", 2 /* CLASS */))
+            : createCommentVNode("v-if", true)
+      ], 10 /* CLASS, PROPS */, _hoisted_1),
+      (!_ctx.hideLabel && _ctx.hasHelper)
+        ? (openBlock(), createElementBlock("br", _hoisted_3))
+        : createCommentVNode("v-if", true),
+      (_ctx.hasHelper)
+        ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: normalizeClass(_ctx.style['cdr-label-standalone__helper']),
+            id: `${_ctx.forId}-helper-text-top`
+          }, [
+            renderSlot(_ctx.$slots, "helper")
+          ], 10 /* CLASS, PROPS */, _hoisted_4))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-label-standalone__input-wrap', _ctx.inputSpacingClass))
+    }, [
+      renderSlot(_ctx.$slots, "default"),
+      (_ctx.hasInfoAction)
+        ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.style['cdr-label-standalone__info-action'])
+          }, [
+            renderSlot(_ctx.$slots, "info-action")
+          ], 2 /* CLASS */))
+        : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    (_ctx.hasInfo)
+      ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: normalizeClass(_ctx.style['cdr-label-standalone__info'])
+        }, [
+          renderSlot(_ctx.$slots, "info")
+        ], 2 /* CLASS */))
+      : createCommentVNode("v-if", true),
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.style['cdr-label-standalone__post-content'])
+    }, [
+      renderSlot(_ctx.$slots, "helper-text-bottom"),
+      renderSlot(_ctx.$slots, "error")
+    ], 2 /* CLASS */)
+  ], 2 /* CLASS */))
+}
+
+export { render };

package/dist/lib/src/components/labelStandalone/styles/CdrLabelStandalone.module.scss_vue_type_style_index_0_src_id_0fc61c8e_module_true_lang.css.mjs

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

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

@@ -0,0 +1,10 @@
+import script from './CdrLabelWrapper.vue_vue_type_script_lang.mjs';
+export { default } from './CdrLabelWrapper.vue_vue_type_script_lang.mjs';
+import { render } from './CdrLabelWrapper.vue_vue_type_template_id_1b3bfeb0_lang.mjs';
+import style0 from './styles/CdrLabelWrapper.module.scss_vue_type_style_index_0_src_id_1b3bfeb0_module_true_lang.css.mjs';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/labelWrapper/CdrLabelWrapper.vue";

package/dist/lib/src/components/labelWrapper/CdrLabelWrapper.vue_vue_type_script_lang.mjs

@@ -0,0 +1,32 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import { buildClass } from '../../utils/buildClass.mjs';
+import backgroundProps from '../../props/background.mjs';
+import mapClasses from '../../utils/mapClasses.mjs';
+
+var script = defineComponent({
+  name: 'CdrLabelWrapper',
+  props: {
+    labelClass: String,
+    contentClass: String,
+    background: backgroundProps,
+    disabled: Boolean,
+    modifier: String,
+    size: String,
+  },
+  setup(props) {
+    const baseClass = 'cdr-label-wrapper';
+    const modifierClass = computed(() => buildClass(baseClass, props.modifier));
+    const sizeClass = computed(() => props.size && buildClass(baseClass, props.size));
+    const disabledClass = computed(() => props.disabled && buildClass(baseClass, 'disabled')); // TODO: this works right?
+    return {
+      style: useCssModule(),
+      mapClasses,
+      baseClass,
+      modifierClass,
+      sizeClass,
+      disabledClass,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/labelWrapper/CdrLabelWrapper.vue_vue_type_template_id_1b3bfeb0_lang.mjs

@@ -0,0 +1,29 @@
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.style['cdr-label-wrapper__container'])
+  }, [
+    createElementVNode("label", {
+      class: normalizeClass(_ctx.mapClasses(_ctx.style,
+                         'cdr-label-wrapper',
+                         `cdr-label-wrapper--${_ctx.background}`,
+                         _ctx.disabledClass,
+                         _ctx.modifierClass,
+                         _ctx.sizeClass,
+      ).concat(` ${_ctx.labelClass || ''}`))
+    }, [
+      renderSlot(_ctx.$slots, "input"),
+      createElementVNode("span", {
+        class: normalizeClass(_ctx.style['cdr-label-wrapper__figure'])
+      }, null, 2 /* CLASS */),
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-label-wrapper__content', _ctx.contentClass))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2 /* CLASS */)
+    ], 2 /* CLASS */)
+  ], 2 /* CLASS */))
+}
+
+export { render };

package/dist/lib/src/components/labelWrapper/styles/CdrLabelWrapper.module.scss_vue_type_style_index_0_src_id_1b3bfeb0_module_true_lang.css.mjs

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

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

@@ -0,0 +1,10 @@
+import script from './CdrLink.vue_vue_type_script_lang.mjs';
+export { default } from './CdrLink.vue_vue_type_script_lang.mjs';
+import { render } from './CdrLink.vue_vue_type_template_id_6c2e23a6_lang.mjs';
+import style0 from './styles/CdrLink.module.scss_vue_type_style_index_0_src_id_6c2e23a6_module_true_lang.css.mjs';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/link/CdrLink.vue";

package/dist/lib/src/components/link/CdrLink.vue_vue_type_script_lang.mjs

@@ -0,0 +1,55 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import mapClasses from '../../utils/mapClasses.mjs';
+import { buildClass } from '../../utils/buildClass.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+
+var script = defineComponent({
+  name: 'CdrLink',
+  props: {
+    tag: {
+      type: String,
+      default: 'a',
+    },
+    href: {
+      type: String,
+      default: '#',
+    },
+    inheritColor: {
+      type: Boolean,
+      default: false,
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: (value) => validateProp(value, ['', 'standalone']),
+    },
+    /** @ignore */
+    target: String,
+    /** @ignore */
+    rel: String,
+  },
+  setup(props) {
+    const computedHref = computed(() => (props.tag === 'a' ? props.href : null));
+    const computedRel = computed(() => {
+      if (props.target === '_blank') {
+        return props.rel || 'noopener noreferrer';
+      }
+      return props.rel;
+    });
+    const baseClass = 'cdr-link';
+    const modifierClass = computed(() => props.modifier && buildClass(baseClass, props.modifier));
+    const inheritColorClass = computed(() => props.inheritColor && 'cdr-link--inherit-color');
+
+    return {
+      style: useCssModule(),
+      mapClasses,
+      computedHref,
+      computedRel,
+      baseClass,
+      modifierClass,
+      inheritColorClass,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/link/CdrLink.vue_vue_type_template_id_6c2e23a6_lang.mjs

@@ -0,0 +1,17 @@
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.modifierClass, _ctx.inheritColorClass)),
+    target: _ctx.target,
+    rel: _ctx.computedRel,
+    href: _ctx.computedHref
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class", "target", "rel", "href"]))
+}
+
+export { render };

package/dist/lib/src/components/link/styles/CdrLink.module.scss_vue_type_style_index_0_src_id_6c2e23a6_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-link":"cdr-link_13-0-0-alpha-3","cdr-link--standalone":"cdr-link--standalone_13-0-0-alpha-3","cdr-link--inherit-color":"cdr-link--inherit-color_13-0-0-alpha-3"};
+
+export { style0 as default };

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

@@ -0,0 +1,10 @@
+import script from './CdrList.vue_vue_type_script_lang.mjs';
+export { default } from './CdrList.vue_vue_type_script_lang.mjs';
+import { render } from './CdrList.vue_vue_type_template_id_41255cee_lang.mjs';
+import style0 from './styles/CdrList.module.scss_vue_type_style_index_0_src_id_41255cee_module_true_lang.css.mjs';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/list/CdrList.vue";

package/dist/lib/src/components/list/CdrList.vue_vue_type_script_lang.mjs

@@ -0,0 +1,33 @@
+import { defineComponent, computed, useCssModule } from 'vue';
+import { buildClass } from '../../utils/buildClass.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+
+var script = defineComponent({
+  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: (value) => validateProp(value, ['ul', 'ol']),
+    },
+    modifier: {
+      type: String,
+      default: '',
+      validator: (value) => validateProp(value, ['', 'ordered', 'unordered', 'compact', 'inline']),
+    },
+  },
+  setup(props) {
+    const baseClass = 'cdr-list';
+    const modifierClass = computed(() => props.modifier && buildClass(baseClass, props.modifier));
+    return {
+      style: useCssModule(),
+      baseClass,
+      modifierClass,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/list/CdrList.vue_vue_type_template_id_41255cee_lang.mjs

@@ -0,0 +1,14 @@
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    class: normalizeClass([_ctx.style[_ctx.baseClass], _ctx.style[_ctx.modifierClass]])
+  }, {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class"]))
+}
+
+export { render };

package/dist/lib/src/components/list/styles/CdrList.module.scss_vue_type_style_index_0_src_id_41255cee_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-list":"cdr-list_13-0-0-alpha-3","cdr-list--compact":"cdr-list--compact_13-0-0-alpha-3","cdr-list--ordered":"cdr-list--ordered_13-0-0-alpha-3","cdr-list--unordered":"cdr-list--unordered_13-0-0-alpha-3","cdr-list--inline":"cdr-list--inline_13-0-0-alpha-3"};
+
+export { style0 as default };

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

@@ -0,0 +1,10 @@
+import script from './CdrModal.vue_vue_type_script_lang.mjs';
+export { default } from './CdrModal.vue_vue_type_script_lang.mjs';
+import { render } from './CdrModal.vue_vue_type_template_id_57e9fd64_lang.mjs';
+import style0 from './styles/CdrModal.module.scss_vue_type_style_index_0_src_id_57e9fd64_module_true_lang.css.mjs';
+
+const cssModules = script.__cssModules = {};
+cssModules["$style"] = style0;
+
+script.render = render;
+script.__file = "src/components/modal/CdrModal.vue";

package/dist/lib/src/components/modal/CdrModal.vue_vue_type_script_lang.mjs

@@ -0,0 +1,292 @@
+import debounce from 'lodash/debounce';
+import tabbable from 'tabbable';
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, useCssModule, nextTick } from 'vue';
+import { CdrSpaceTwoX, CdrSpaceOneX, CdrBreakpointSm } from '../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.esm.mjs';
+import onTransitionEnd from './onTransitionEnd.mjs';
+import '../button/CdrButton.mjs';
+import '../icon/comps/x-lg.mjs';
+import mapClasses from '../../utils/mapClasses.mjs';
+import script$2 from '../icon/comps/x-lg.vue_vue_type_script_lang.mjs';
+import script$1 from '../button/CdrButton.vue_vue_type_script_lang.mjs';
+
+var script = defineComponent({
+  name: 'CdrModal',
+  components: {
+    CdrButton: script$1,
+    IconXLg: script$2,
+  },
+  props: {
+    opened: {
+      type: Boolean,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    showTitle: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    ariaDescribedby: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    role: {
+       type: String,
+       required: false,
+       default: 'dialog',
+     },
+    id: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    overlayClass: String,
+    wrapperClass: String,
+    contentClass: String,
+    animationDuration: {
+      type: Number,
+      default: 300,
+    },
+  },
+  setup(props, ctx) {
+    const baseClass = 'cdr-modal';
+
+
+    const reallyClosed = ref(!props.opened);
+
+  // REFS or LET?
+    let unsubscribe;
+    let lastActive;
+    const isOpening = ref(false);
+    const offset = ref(null);
+    const headerHeight = ref(0);
+    const totalHeight = ref(0);
+    const scrollHeight = ref(0);
+    const offsetHeight = ref(0);
+    const offsetWidth = ref(0);
+    const clientWidth = ref(0);
+    const fullscreen = ref(false);
+
+    const modalEl = ref(null);
+    const wrapperEl = ref(null);
+    const contentEl = ref(null);
+    const headerEl = ref(null);
+
+    const measureContent = () => {
+      nextTick(() => {
+        totalHeight.value = window.innerHeight;
+        fullscreen.value = window.innerWidth < CdrBreakpointSm; // wrap breakpoint in Number() here???
+        headerHeight.value = headerEl.value.offsetHeight;
+        scrollHeight.value = contentEl.value.scrollHeight;
+        offsetHeight.value = contentEl.value.offsetHeight;
+        offsetWidth.value = contentEl.value.offsetWidth;
+        clientWidth.value = contentEl.value.clientWidth;
+      });
+    };
+    const handleKeyDown = ({ key }) => {
+      switch (key) {
+        case 'Escape':
+        case 'Esc':
+          onClick();
+          break;
+      }
+    };
+    const handleFocus = (e) => {
+      const { documentElement } = document;
+      if (modalEl.value.contains(e.target) || !documentElement) return;
+
+      const tabbables = tabbable(documentElement);
+      const these = tabbable(modalEl.value);
+      const nextIx = tabbables.indexOf(e.target);
+      const firstModalIx = tabbables.indexOf(these[0]);
+      const nextRef = nextIx < firstModalIx ? these[these.length - 1] : these[0];
+      if (nextRef) nextRef.focus();
+
+  // ...uhhh???? what?
+      // documentElement.scrollTop = this.scrollTop;
+      // documentElement.scrollLeft = this.scrollLeft;
+    };
+
+    const handleResize = debounce(() => {
+      measureContent();
+    }, 300);
+
+    const handleOpened = () => {
+      const { activeElement } = document;
+      addNoScroll();
+      isOpening.value = true;
+      reallyClosed.value = false;
+      lastActive = activeElement;
+
+      nextTick(() => {
+        if (modalEl.value) modalEl.value.focus(); // wrapped in if so testing error isn't thrown
+        measureContent();
+        addHandlers();
+
+        setTimeout(() => {
+          // for some reason Safari scrolls the wrapper down a bit?
+          // doesn't work without setTimeout for some unknown reason
+          if (wrapperEl.value) wrapperEl.value.scrollTop = 0;
+
+          // there is a race condition for measuring overflow when modal defaults to open,
+          // this seems to cover that
+          measureContent();
+        });
+      });
+    };
+
+    const handleClosed = () => {
+      const { documentElement } = document;
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('focusin', handleFocus, true);
+      isOpening.value = false;
+
+      unsubscribe = onTransitionEnd(
+        wrapperEl.value,
+        () => {
+          if (isOpening.value) return;
+          unsubscribe();
+          removeNoScroll();
+          unsubscribe = null;
+          reallyClosed.value = true;
+
+          // handle scroll-behavior: smooth
+          if (documentElement) documentElement.style.scrollBehavior = 'auto';
+          // restore previous scroll position
+          window.scrollTo(offset.value.x, offset.value.y);
+          if (documentElement) documentElement.style.scrollBehavior = '';
+
+          if (lastActive) lastActive.focus();
+        },
+        props.animationDuration + 16,
+      );
+    };
+
+    const addNoScroll = () => {
+      const { documentElement, body } = document;
+      offset.value = {
+        x: window.scrollX
+          || (documentElement || {}).scrollLeft
+          || (body || {}).scrollLeft
+          || 0,
+        y: window.scrollY
+          || (documentElement || {}).scrollTop
+          || (body || {}).scrollTop
+          || 0,
+      };
+
+      if (documentElement) {
+        documentElement.classList.add('cdr-modal__noscroll');
+        // keep current scroll position manually
+        documentElement.style.top = `-${offset.value.y}px`;
+        documentElement.style.left = `-${offset.value.x}px`;
+      }
+
+      if (body) {
+        body.classList.add('cdr-modal__noscroll');
+      }
+    };
+
+    const removeNoScroll = () => {
+      const { documentElement, body } = document;
+
+      if (body) {
+        body.classList.remove('cdr-modal__noscroll');
+      }
+
+      if (documentElement) {
+        documentElement.classList.remove('cdr-modal__noscroll');
+        documentElement.style.top = '';
+        documentElement.style.left = '';
+      }
+    };
+
+    const addHandlers = () => {
+      document.addEventListener('focusin', handleFocus, true);
+      document.addEventListener('keydown', handleKeyDown);
+    };
+
+    const onClick = (e) => {
+      ctx.emit('closed', e);
+    };
+
+    const dialogAttrs = computed(() => {
+      // TODO: remove aria-desc and id from props? just ingest as attrs?
+      return {
+        ...ctx.attrs,
+        'aria-describedby': props.ariaDescribedby,
+        'aria-modal': 'true',
+        id: props.id,
+      };
+    });
+    const verticalSpace = computed(() => {
+      // contentWrap vertical padding
+      const fullscreenSpace = Number(CdrSpaceTwoX);
+      const windowedSpace = Number(CdrSpaceTwoX) + Number(CdrSpaceOneX);
+
+      return fullscreen.value
+        ? fullscreenSpace
+        : windowedSpace + fullscreenSpace;
+      // fullscreen, here, would account for outerWrap padding, which is the same CdrSpaceTwoX
+    });
+    const scrollMaxHeight = computed(() => {
+      return totalHeight.value
+        - headerHeight.value
+        - verticalSpace.value;
+    });
+
+    const scrollPadding = computed(() => {
+      const isScrolling = scrollHeight.value > offsetHeight.value;
+      const hasScrollbar = offsetWidth.value - clientWidth.value > 0;
+      if (isScrolling && hasScrollbar) {
+        return 4;
+      } else if (isScrolling) {
+        return 12;
+      } else {
+        return 0
+      }
+    });
+
+    watch(() => props.opened, (newValue, oldValue) => {
+      if (!!newValue === !!oldValue) return;
+      newValue ? handleOpened() : handleClosed();
+    });
+
+    onMounted(() => {
+      if (props.opened) {
+        handleOpened();
+      }
+      window.addEventListener('resize', handleResize);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('resize', handleResize);
+    });
+
+    return {
+      style: useCssModule(),
+      baseClass,
+      mapClasses,
+      dialogAttrs,
+      verticalSpace,
+      scrollMaxHeight,
+      reallyClosed,
+      modalEl,
+      wrapperEl,
+      contentEl,
+      headerEl,
+      onClick,
+      handleClosed,
+      measureContent,
+      removeNoScroll,
+      scrollPadding,
+      handleFocus,
+    };
+  },
+});
+
+export { script as default };