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

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

@@ -0,0 +1,94 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot, normalizeStyle, toDisplayString, createCommentVNode, createVNode, withCtx } from 'vue';
+
+const _hoisted_1 = ["tabIndex"];
+const _hoisted_2 = ["role", "aria-modal", "aria-label"];
+const _hoisted_3 = ["tabIndex"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_x_lg = resolveComponent("icon-x-lg");
+  const _component_cdr_button = resolveComponent("cdr-button");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, !_ctx.opened && 'cdr-modal--closed')),
+    ref: "wrapperEl"
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass([_ctx.style['cdr-modal__outerWrap'], _ctx.wrapperClass])
+    }, [
+      createElementVNode("div", {
+        "aria-hidden": "true",
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.onClick && _ctx.onClick(...args))),
+        class: normalizeClass([_ctx.style['cdr-modal__overlay'], _ctx.overlayClass])
+      }, null, 2 /* CLASS */),
+      createElementVNode("div", {
+        tabIndex: _ctx.opened ? '0' : undefined
+      }, null, 8 /* PROPS */, _hoisted_1),
+      createElementVNode("div", mergeProps({
+        ref: "modalEl",
+        class: _ctx.mapClasses(_ctx.style, 'cdr-modal__contentWrap', 'cdr-modal__dialog'),
+        tabIndex: "-1",
+        role: _ctx.role,
+        "aria-modal": !!_ctx.opened,
+        "aria-label": _ctx.label
+      }, _ctx.dialogAttrs), [
+        renderSlot(_ctx.$slots, "modal", {}, () => [
+          createElementVNode("div", {
+            class: normalizeClass([_ctx.style['cdr-modal__innerWrap'], _ctx.contentClass]),
+            style: normalizeStyle(_ctx.reallyClosed ? {display: 'none'} : undefined)
+          }, [
+            createElementVNode("section", null, [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.style['cdr-modal__content'])
+              }, [
+                createElementVNode("div", {
+                  class: normalizeClass(_ctx.style['cdr-modal__header']),
+                  ref: "headerEl"
+                }, [
+                  createElementVNode("div", {
+                    class: normalizeClass(_ctx.style['cdr-modal__title'])
+                  }, [
+                    (_ctx.showTitle)
+                      ? renderSlot(_ctx.$slots, "title", { key: 0 }, () => [
+                          createElementVNode("h1", null, toDisplayString(_ctx.label), 1 /* TEXT */)
+                        ])
+                      : createCommentVNode("v-if", true)
+                  ], 2 /* CLASS */),
+                  createVNode(_component_cdr_button, {
+                    class: normalizeClass(_ctx.style['cdr-modal__close-button']),
+                    "icon-only": "",
+                    "with-background": true,
+                    onClick: _ctx.onClick,
+                    "aria-label": "Close"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_icon_x_lg, { "inherit-color": "" })
+                    ]),
+                    _: 1 /* STABLE */
+                  }, 8 /* PROPS */, ["class", "onClick"])
+                ], 2 /* CLASS */),
+                createElementVNode("div", {
+                  role: "document",
+                  class: normalizeClass(_ctx.style['cdr-modal__text'])
+                }, [
+                  createElementVNode("div", {
+                    class: normalizeClass(_ctx.style['cdr-modal__text-content']),
+                    style: normalizeStyle({ maxHeight: `${_ctx.scrollMaxHeight}px`, paddingRight: `${_ctx.scrollPadding}px`}),
+                    ref: "contentEl",
+                    tabindex: "0"
+                  }, [
+                    renderSlot(_ctx.$slots, "default")
+                  ], 6 /* CLASS, STYLE */)
+                ], 2 /* CLASS */)
+              ], 2 /* CLASS */)
+            ])
+          ], 6 /* CLASS, STYLE */)
+        ])
+      ], 16 /* FULL_PROPS */, _hoisted_2),
+      createElementVNode("div", {
+        tabIndex: _ctx.opened ? '0' : undefined
+      }, null, 8 /* PROPS */, _hoisted_3)
+    ], 2 /* CLASS */)
+  ], 2 /* CLASS */))
+}
+
+export { render };

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

@@ -0,0 +1,44 @@
+/* eslint-env browser */
+const transitions = {
+  transition: 'transitionend',
+  WebkitTransition: 'webkitTransitionEnd',
+  MozTransition: 'transitionend',
+  OTransition: 'oTransitionEnd otransitionend'
+}; // Also has to run on transitioncancel? if modal removed before this runs...
+
+let transitionEvent;
+
+if (typeof document !== 'undefined') {
+  const {
+    style
+  } = document.createElement('div');
+  const keys = Object.keys(transitions);
+
+  for (let i = 0, key = keys[i]; i < keys.length; i += 1, key = keys[i]) {
+    if (key in style) {
+      transitionEvent = transitions[key];
+      console.log(transitionEvent, key);
+      break;
+    }
+  }
+}
+
+var onTransitionEnd = ((element, callback, timeout) => {
+  element.addEventListener(transitionEvent, callback);
+  let timeoutId;
+
+  if (timeout) {
+    // console.log('onTransitionEnd timeout', timeout);
+    timeoutId = setTimeout(() => {
+      element.removeEventListener(transitionEvent, callback);
+      callback();
+    }, timeout);
+  }
+
+  return () => {
+    clearTimeout(timeoutId);
+    element.removeEventListener(transitionEvent, callback);
+  };
+});
+
+export { onTransitionEnd as default };

package/dist/lib/src/components/modal/styles/CdrModal.module.scss_vue_type_style_index_0_src_id_57e9fd64_module_true_lang.css.mjs

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

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

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

package/dist/lib/src/components/pagination/CdrPagination.vue_vue_type_script_lang.mjs

@@ -0,0 +1,189 @@
+import { defineComponent, ref, computed, onMounted, watch, useCssModule, nextTick } from 'vue';
+import mapClasses from '../../utils/mapClasses.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+import '../icon/comps/caret-left.mjs';
+import '../icon/comps/caret-right.mjs';
+import '../select/CdrSelect.mjs';
+import script$1 from '../icon/comps/caret-left.vue_vue_type_script_lang.mjs';
+import script$2 from '../icon/comps/caret-right.vue_vue_type_script_lang.mjs';
+import script$3 from '../select/CdrSelect.vue_vue_type_script_lang.mjs';
+
+var script = defineComponent({
+  name: 'CdrPagination',
+  components: {
+    IconCaretLeft: script$1,
+    IconCaretRight: script$2,
+    CdrSelect: script$3,
+  },
+  props: {
+    // NOTE pagination now requires an ID
+    id: {
+      type: String,
+      required: true,
+    },
+    /**
+     * 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: true,
+      validator: (value) => {
+        const result = value.every((obj) => {
+          if (!Object.prototype.hasOwnProperty.call(obj, 'page')
+          || typeof obj.page !== 'number') {
+            console.error('Property "page" is missing or is not a number', obj); // eslint-disable-line
+            return false;
+          } if (!Object.prototype.hasOwnProperty.call(obj, 'url')
+          || typeof obj.url !== 'string') {
+            console.error('Property "url" is missing or is not a string', obj); // eslint-disable-line
+            return false;
+          }
+          return true;
+        });
+        return result;
+      },
+    },
+    linkTag: {
+      type: String,
+      default: 'a',
+      validator: (value) => validateProp(
+        value,
+        ['a', 'button'],
+      ),
+    },
+    forLabel: {
+      type: String,
+      default: '',
+    },
+    /** @ignore used for binding v-model, represents the current page */
+    modelValue: {
+      type: Number,
+    },
+  },
+  setup(props, ctx) {
+    const currentIdx = ref(0);
+
+    const innerValue = computed({
+      get: () => props.modelValue,
+      set: val => {
+        setCurrentIdx(val);
+        ctx.emit('update:modelValue', val);
+      }
+    });
+
+    const setCurrentIdx = (page) => {
+      currentIdx.value = props.pages.map((x) => x.page).indexOf(page);
+    };
+
+    const navigate = (pageNum, e) => {
+      // TODO: provide option to just emit without navigating to support vue-router?
+      // Dont do anything if clicking the current active page
+      if (pageNum === innerValue.value) {
+        e.preventDefault();
+        return;
+      }
+      innerValue.value = pageNum;
+      ctx.emit('navigate', pageNum, currentUrl.value, e);
+
+      // TODO: is this still necessary?
+      nextTick(() => {
+        // Done in a nextTick() to ensure rendering complete
+        try {
+          // Emulate native link click page reloading behaviour by blurring the
+          // paginator and returning focus to the document
+          const target = e.currentTarget || e.target;
+          target.blur();
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.error(err);
+        }
+      });
+    };
+    const select = (page, e) => {
+      e.preventDefault();
+      console.log('IMPLEMENT ME!', page);
+      // TODO: add page links to refs array? better way to do this???
+      // $refs[`page-link-${page}-${componentID}`].click();
+    };
+
+    const currentUrl = computed(() => props.pages[currentIdx.value].url);
+    const ariaLabel = computed(() => props.forLabel || 'Pagination');
+
+    const prevPageData = computed(() => props.pages[currentIdx.value - 1]);
+    const nextPageData = computed(() => props.pages[currentIdx.value + 1]);
+
+
+    const paginationData = computed(() => {
+      const total = props.pages.length;
+      const current = innerValue.value;
+      const delta = 1;
+      let range = [];
+      let over5 = true;
+      let over5remain = true;
+
+      if (total <= 7) {
+        // all pages
+        return props.pages;
+      }
+
+      if (current < 5) {
+      // if first 5 pages
+        over5 = false;
+        // [2-5]
+        range = props.pages.slice(1, 5);
+      } else if (total - current < 4) {
+      // if last 5 pages
+        over5remain = false;
+        range = props.pages.slice(-5, -1);
+      } else {
+      // else in between
+        for (
+          let i = Math.max(2, current - delta);
+          i <= Math.min(total - 1, current + delta);
+          i += 1
+        ) {
+          range.push(props.pages[i - 1]);
+        }
+      }
+
+      if ((current - delta > 2) && over5) {
+        range.unshift('&hellip;');
+      }
+      if ((current + delta < total - 1) && over5remain) {
+        range.push('&hellip;');
+      }
+
+      range.unshift(props.pages[0]);
+      range.push(props.pages[total - 1]);
+
+      return range;
+    });
+
+    onMounted(() => setCurrentIdx(innerValue.value));
+
+    watch(() => props.pages, () => setCurrentIdx(innerValue.value));
+
+    return {
+      style: useCssModule(),
+      innerValue,
+      currentIdx,
+      ariaLabel,
+      prevPageData,
+      nextPageData,
+      paginationData,
+      select,
+      navigate,
+      mapClasses,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/pagination/CdrPagination.vue_vue_type_template_id_15a761e6_lang.mjs

@@ -0,0 +1,130 @@
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, createBlock, resolveDynamicComponent, withCtx, createVNode, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
+
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = {
+  key: 1,
+  "aria-hidden": "true"
+};
+const _hoisted_4 = ["value"];
+const _hoisted_5 = { key: 2 };
+const _hoisted_6 = {
+  key: 3,
+  "aria-hidden": "true"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_caret_left = resolveComponent("icon-caret-left");
+  const _component_cdr_select = resolveComponent("cdr-select");
+  const _component_icon_caret_right = resolveComponent("icon-caret-right");
+
+  return (openBlock(), createElementBlock("nav", { "aria-label": _ctx.ariaLabel }, [
+    createElementVNode("ol", {
+      class: normalizeClass(_ctx.style['cdr-pagination'])
+    }, [
+      (_ctx.innerValue > _ctx.pages[0].page)
+        ? (openBlock(), createElementBlock("li", _hoisted_2, [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.linkTag), {
+              "aria-label": "Go to previous page",
+              href: (_ctx.linkTag === 'a' && _ctx.prevPageData && _ctx.prevPageData.url) || undefined,
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', 'cdr-pagination__prev')),
+              onClick: _cache[0] || (_cache[0] = (e) => _ctx.navigate(_ctx.prevPageData.page, e))
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_icon_caret_left, {
+                  class: normalizeClass(_ctx.style['cdr-pagination_caret--prev'])
+                }, null, 8 /* PROPS */, ["class"])
+              ]),
+              _: 1 /* STABLE */
+            }, 8 /* PROPS */, ["href", "class"]))
+          ]))
+        : (openBlock(), createElementBlock("li", _hoisted_3, [
+            createElementVNode("span", {
+              "aria-disabled": "true",
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', 'cdr-pagination__prev', 'cdr-pagination__link--disabled'))
+            }, [
+              createVNode(_component_icon_caret_left, {
+                class: normalizeClass(_ctx.style['cdr-pagination_caret--prev']),
+                "inherit-color": ""
+              }, null, 8 /* PROPS */, ["class"])
+            ], 2 /* CLASS */)
+          ])),
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.paginationData, (n) => {
+        return (openBlock(), createElementBlock("li", {
+          key: `pagination-${_ctx.id}-li-${n.page}`,
+          class: normalizeClass(_ctx.style['cdr-pagination__li--links'])
+        }, [
+          (n.page)
+            ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.linkTag), {
+                key: 0,
+                class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', n.page === _ctx.innerValue && 'cdr-pagination__link--current')),
+                "aria-label": n.page === _ctx.innerValue ? `Current page, page ${n.page}` : `Go to page ${n.page}`,
+                "aria-current": n.page === _ctx.innerValue ? 'page' : null,
+                href: (_ctx.linkTag === 'a' && n.url) || undefined,
+                onClick: (e) => _ctx.navigate(n.page, e)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(n.page), 1 /* TEXT */)
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "aria-label", "aria-current", "href", "onClick"]))
+            : (openBlock(), createElementBlock("span", {
+                key: 1,
+                class: normalizeClass(_ctx.style['cdr-pagination__ellipse'])
+              }, " … ", 2 /* CLASS */))
+        ], 2 /* CLASS */))
+      }), 128 /* KEYED_FRAGMENT */)),
+      createElementVNode("li", {
+        class: normalizeClass(_ctx.style['cdr-pagination__li--select'])
+      }, [
+        createVNode(_component_cdr_select, {
+          id: `pagination-select-${_ctx.id}`,
+          modelValue: _ctx.innerValue,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => ((_ctx.innerValue) = $event)),
+          label: "Navigate to page",
+          "hide-label": "",
+          onChange: _ctx.select
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.paginationData.filter(n => n.page), (page) => {
+              return (openBlock(), createElementBlock("option", {
+                key: `pagination-${_ctx.id}-select-${page.page}`,
+                value: page.page
+              }, " Page " + toDisplayString(page.page) + toDisplayString(_ctx.totalPages === null ? '' : ` of ${_ctx.totalPages}`), 9 /* TEXT, PROPS */, _hoisted_4))
+            }), 128 /* KEYED_FRAGMENT */))
+          ]),
+          _: 1 /* STABLE */
+        }, 8 /* PROPS */, ["id", "modelValue", "onChange"])
+      ], 2 /* CLASS */),
+      (_ctx.innerValue < _ctx.pages[_ctx.pages.length - 1].page)
+        ? (openBlock(), createElementBlock("li", _hoisted_5, [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.linkTag), {
+              "aria-label": "Go to next page",
+              href: (_ctx.linkTag === 'a' && _ctx.nextPageData && _ctx.nextPageData.url) || undefined,
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', 'cdr-pagination__next')),
+              onClick: _cache[2] || (_cache[2] = (e) => _ctx.navigate(_ctx.nextPageData.page, e))
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_icon_caret_right, {
+                  class: normalizeClass(_ctx.style['cdr-pagination_caret--next'])
+                }, null, 8 /* PROPS */, ["class"])
+              ]),
+              _: 1 /* STABLE */
+            }, 8 /* PROPS */, ["href", "class"]))
+          ]))
+        : (openBlock(), createElementBlock("li", _hoisted_6, [
+            createElementVNode("span", {
+              "aria-disabled": "true",
+              class: normalizeClass(_ctx.mapClasses(_ctx.style, 'cdr-pagination__link', 'cdr-pagination__next', 'cdr-pagination__link--disabled'))
+            }, [
+              createVNode(_component_icon_caret_right, {
+                class: normalizeClass(_ctx.style['cdr-pagination_caret--next']),
+                "inherit-color": ""
+              }, null, 8 /* PROPS */, ["class"])
+            ], 2 /* CLASS */)
+          ]))
+    ], 2 /* CLASS */)
+  ], 8 /* PROPS */, _hoisted_1))
+}
+
+export { render };

package/dist/lib/src/components/pagination/styles/CdrPagination.module.scss_vue_type_style_index_0_src_id_15a761e6_module_true_lang.css.mjs

@@ -0,0 +1,3 @@
+var style0 = {"cdr-pagination":"cdr-pagination_13-0-0-alpha-3","cdr-pagination__li--links":"cdr-pagination__li--links_13-0-0-alpha-3","cdr-pagination__li--select":"cdr-pagination__li--select_13-0-0-alpha-3","cdr-pagination__link":"cdr-pagination__link_13-0-0-alpha-3","cdr-pagination__link--current":"cdr-pagination__link--current_13-0-0-alpha-3","cdr-pagination__link--disabled":"cdr-pagination__link--disabled_13-0-0-alpha-3","cdr-pagination__ellipse":"cdr-pagination__ellipse_13-0-0-alpha-3","cdr-pagination__prev":"cdr-pagination__prev_13-0-0-alpha-3","cdr-pagination__next":"cdr-pagination__next_13-0-0-alpha-3","cdr-pagination__caret--prev":"cdr-pagination__caret--prev_13-0-0-alpha-3","cdr-pagination__caret--next":"cdr-pagination__caret--next_13-0-0-alpha-3"};
+
+export { style0 as default };

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

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

package/dist/lib/src/components/popover/CdrPopover.vue_vue_type_script_lang.mjs

@@ -0,0 +1,115 @@
+import { defineComponent, ref, watch, onMounted, useCssModule, nextTick } from 'vue';
+import tabbable from 'tabbable';
+import '../icon/comps/x-sm.mjs';
+import '../button/CdrButton.mjs';
+import '../popup/CdrPopup.mjs';
+import validateProp from '../../utils/propValidator.mjs';
+import mapClasses from '../../utils/mapClasses.mjs';
+import script$1 from '../popup/CdrPopup.vue_vue_type_script_lang.mjs';
+import script$3 from '../icon/comps/x-sm.vue_vue_type_script_lang.mjs';
+import script$2 from '../button/CdrButton.vue_vue_type_script_lang.mjs';
+
+var script = defineComponent({
+  name: 'CdrPopover',
+  components: {
+    CdrPopup: script$1,
+    CdrButton: script$2,
+    IconXSm: script$3,
+  },
+  props: {
+    position: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator: (value) => validateProp(
+        value,
+        ['top', 'bottom', 'left', 'right'],
+      ),
+    },
+    autoPosition: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: true,
+    },
+    contentClass: {
+      type: String,
+      required: false,
+    },
+    open: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  setup(props, ctx) {
+    const isOpen = ref(false);
+    let lastActive;
+
+    const triggerEl = ref(null);
+    const popupEl = ref(null);
+
+    const hasTrigger = ctx.slots.trigger;
+    const hasTitle = ctx.slots.title || props.label;
+
+    const openPopover = (e) => {
+      const { activeElement } = document;
+
+      lastActive = activeElement;
+      isOpen.value = true;
+      ctx.emit('opened', e);
+      nextTick(() => {
+        const tabbables = tabbable(popupEl.value);
+        if (tabbables[0]) tabbables[0].focus();
+      });
+    };
+
+    const closePopover = (e) => {
+      isOpen.value = false;
+      ctx.emit('closed', e);
+      if (lastActive) lastActive.focus();
+    };
+
+    const addHandlers = ()  =>{
+      const triggerElement = triggerEl.value.children[0];
+      if (triggerElement) {
+        triggerElement.addEventListener('click', openPopover);
+      }
+    };
+
+    watch(() => props.open, () => {
+      // TODO: if eslint yells about this then eslint must go :)
+      props.open ? openPopover() : closePopover();
+    });
+
+    onMounted(() => {
+      addHandlers();
+
+      const trigger = triggerEl.value.children[0];
+      if (trigger) {
+        trigger.setAttribute('aria-controls', props.id);
+        trigger.setAttribute('aria-haspopup', 'dialog');
+      }
+    });
+
+    return {
+      style: useCssModule(),
+      mapClasses,
+      hasTrigger,
+      triggerEl,
+      hasTitle,
+      closePopover,
+      openPopover,
+      isOpen,
+    };
+  },
+});
+
+export { script as default };

package/dist/lib/src/components/popover/CdrPopover.vue_vue_type_template_id_764fda0e_lang.mjs

@@ -0,0 +1,72 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+
+const _hoisted_1 = { ref: "triggerEl" };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_x_sm = resolveComponent("icon-x-sm");
+  const _component_cdr_button = resolveComponent("cdr-button");
+  const _component_cdr_popup = resolveComponent("cdr-popup");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.mapClasses(
+    _ctx.style,
+    'cdr-popover--wrapper',
+    _ctx.hasTrigger && 'cdr-popover--position',
+  ))
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "trigger")
+    ], 512 /* NEED_PATCH */),
+    createVNode(_component_cdr_popup, {
+      role: "dialog",
+      ref: "popupEl",
+      onClosed: _ctx.closePopover,
+      position: _ctx.position,
+      "auto-position": _ctx.autoPosition,
+      opened: _ctx.isOpen,
+      "aria-expanded": `${_ctx.isOpen}`,
+      id: _ctx.id,
+      "content-class": _ctx.contentClass
+    }, {
+      default: withCtx(() => [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.style['cdr-popover__container'])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.style['cdr-popover__content'])
+          }, [
+            (_ctx.hasTitle)
+              ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass(_ctx.style['cdr-popover__title'])
+                }, [
+                  renderSlot(_ctx.$slots, "title", {}, () => [
+                    createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)
+                  ])
+                ], 2 /* CLASS */))
+              : createCommentVNode("v-if", true),
+            renderSlot(_ctx.$slots, "default")
+          ], 2 /* CLASS */),
+          createVNode(_component_cdr_button, {
+            class: normalizeClass(_ctx.style['cdr-popover__close-button']),
+            "icon-only": "",
+            onClick: _ctx.closePopover,
+            "aria-label": "Close",
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_icon_x_sm, {
+                slot: "icon",
+                "inherit-color": ""
+              })
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["class", "onClick"])
+        ], 2 /* CLASS */)
+      ]),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["onClosed", "position", "auto-position", "opened", "aria-expanded", "id", "content-class"])
+  ], 2 /* CLASS */))
+}
+
+export { render };