@rei/cedar 13.0.0-alpha.0 → 13.0.0-alpha.1

package/dist/lib/src/components/accordion/CdrAccordion.js

@@ -1,7 +1,7 @@
-import script from './CdrAccordion.vue_vue&type=script&lang.js';
-export { default } from './CdrAccordion.vue_vue&type=script&lang.js';
-import { render } from './CdrAccordion.vue_vue&type=template&id=529b06a4&lang.js';
-import style0 from './styles/CdrAccordion.module.scss_vue&type=style&index=0&src&id=529b06a4&module=true&lang.css.js';
+import script from './CdrAccordion.vue_vue_type_script_lang.js';
+export { default } from './CdrAccordion.vue_vue_type_script_lang.js';
+import { render } from './CdrAccordion.vue_vue_type_template_id_529b06a4_lang.js';
+import style0 from './styles/CdrAccordion.module.scss_vue_type_style_index_0_src_id_529b06a4_module_true_lang.css.js';
 
 const cssModules = script.__cssModules = {};
 cssModules["$style"] = style0;

package/dist/lib/src/components/accordion/CdrAccordion.vue_vue_type_script_lang.js

@@ -0,0 +1,151 @@
+import { defineComponent, inject, computed, ref, watch, onMounted, useCssModule } from 'vue';
+import '../icon/comps/caret-down.js';
+import { modifyClassName, buildClass } from '../../utils/buildClass.js';
+import mapClasses from '../../utils/mapClasses.js';
+import script$1 from '../icon/comps/caret-down.vue_vue_type_script_lang.js';
+
+var script = defineComponent({
+  name: 'CdrAccordion',
+  components: {
+    IconCaretDown: script$1
+  },
+  props: {
+    /**
+     * The unique id of an accordion.
+     */
+    id: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Toggle this value to open/close the accordion.
+     */
+    opened: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Sets a compact style.
+     */
+    compact: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Sets a border-aligned style.
+     */
+    borderAligned: {
+      type: Boolean,
+      default: false
+    },
+    // Sets the heading level
+    level: {
+      type: [String, Number],
+      required: true
+    },
+    label: {
+      type: String
+    }
+  },
+
+  setup(props, ctx) {
+    var unwrap = inject('unwrap', {
+      val: false
+    });
+    console.log('HEY', unwrap.value);
+    var headingTag = "h".concat(props.level);
+    var headingClass = computed(function () {
+      return unwrap.value && unwrap.value.val ? 'cdr-accordion__header--unwrapped' : 'cdr-accordion__header';
+    });
+    var buttonClass = 'cdr-accordion__button js-cdr-accordion-button';
+    var accordionContentEl = ref(null);
+    var focused = ref(false);
+    var maxHeight = ref(props.opened ? 'none' : 0);
+    var labelClass = 'cdr-accordion__label';
+    var baseClass = 'cdr-accordion';
+    var compactClass = computed(function () {
+      return props.compact ? modifyClassName('cdr-accordion', 'compact') : '';
+    });
+    var borderAlignedClass = computed(function () {
+      return props.borderAligned ? modifyClassName('cdr-accordion', 'border-aligned') : '';
+    });
+    var focusedClass = computed(function () {
+      return focused.value ? modifyClassName('cdr-accordion', 'focused') : null;
+    });
+    var unwrapClass = computed(function () {
+      return unwrap.value && unwrap.value.val ? modifyClassName('cdr-accordion', 'unwrap') : null;
+    });
+    var modifierClass = computed(function () {
+      return buildClass(baseClass, props.modifier);
+    });
+    var iconClass = 'cdr-accordion__icon';
+    var containerClass = 'cdr-accordion__content-container'; // is this class really not scoped?!?!?!?
+
+    var isOpenClass = computed(function () {
+      return props.opened ? 'cdr-tabs--open' : 'cdr-tabs--closed';
+    });
+    var contentClass = 'cdr-accordion__content';
+
+    var onClick = function onClick(event) {
+      ctx.emit('accordion-toggle', event);
+    };
+
+    var onFocus = function onFocus() {
+      focused.value = true;
+    };
+
+    var onBlur = function onBlur() {
+      focused.value = false;
+    };
+
+    watch(function () {
+      return props.opened;
+    }, function (opened) {
+      maxHeight.value = !opened ? "".concat(accordionContentEl.value.clientHeight, "px") : 0; // nextTick is not sufficient here, must wait for CSS to re-paint
+
+      setTimeout(function () {
+        // on next frame, set maxHeight to new value
+        maxHeight.value = opened ? "".concat(accordionContentEl.value.clientHeight, "px") : 0;
+        setTimeout(function () {
+          // after animation is complete, remove max-height so content can reflow
+          maxHeight.value = opened ? 'none' : 0;
+        }, 350); // cdr-duration-3x + 50ms
+      }, 50);
+    });
+    onMounted(function () {
+      if (props.opened && accordionContentEl.value) {
+        maxHeight.value = 'none';
+      }
+    });
+    return {
+      style: useCssModule(),
+      headingTag,
+      headingClass,
+      buttonClass,
+      accordionContentEl,
+      focused,
+      maxHeight,
+      baseClass,
+      labelClass,
+      compactClass,
+      borderAlignedClass,
+      focusedClass,
+      iconClass,
+      containerClass,
+      isOpenClass,
+      contentClass,
+      modifierClass,
+      onClick,
+      onFocus,
+      onBlur,
+      unwrapClass,
+      mapClasses
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/accordion/CdrAccordion.vue_vue_type_template_id_529b06a4_lang.js

@@ -0,0 +1,73 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, normalizeStyle } from 'vue';
+
+var _hoisted_1 = ["id"];
+var _hoisted_2 = ["id", "aria-expanded", "aria-controls"];
+var _hoisted_3 = ["id"];
+var _hoisted_4 = ["aria-hidden", "id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_icon_caret_down = resolveComponent("icon-caret-down");
+
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.baseClass, _ctx.modifierClass, _ctx.compactClass, _ctx.borderAlignedClass, _ctx.focusedClass)),
+    id: "".concat(_ctx.id, "-accordion")
+  }, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.headingTag), {
+    class: normalizeClass(_ctx.style[_ctx.headingClass])
+  }, {
+    default: withCtx(function () {
+      return [createElementVNode("button", {
+        class: normalizeClass([_ctx.style['cdr-accordion__button'], 'js-cdr-accordion-button']),
+        id: _ctx.id,
+        onClick: _cache[0] || (_cache[0] = function () {
+          return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
+        }),
+        onFocus: _cache[1] || (_cache[1] = function () {
+          return _ctx.onFocus && _ctx.onFocus.apply(_ctx, arguments);
+        }),
+        onBlur: _cache[2] || (_cache[2] = function () {
+          return _ctx.onBlur && _ctx.onBlur.apply(_ctx, arguments);
+        }),
+        "aria-expanded": "".concat(_ctx.opened),
+        "aria-controls": "".concat(_ctx.id, "-collapsible")
+      }, [createElementVNode("span", {
+        class: normalizeClass(_ctx.style['cdr-accordion__label']),
+        id: "".concat(_ctx.id, "-label")
+      }, [renderSlot(_ctx.$slots, "label", {}, function () {
+        return [createTextVNode(toDisplayString(_ctx.label), 1
+        /* TEXT */
+        )];
+      })], 10
+      /* CLASS, PROPS */
+      , _hoisted_3), createVNode(_component_icon_caret_down, {
+        class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.iconClass, _ctx.isOpenClass)),
+        size: _ctx.compact ? 'small' : null
+      }, null, 8
+      /* PROPS */
+      , ["class", "size"])], 42
+      /* CLASS, PROPS, HYDRATE_EVENTS */
+      , _hoisted_2)];
+    }),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["class"])), createElementVNode("div", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.containerClass, _ctx.isOpenClass)),
+    style: normalizeStyle({
+      maxHeight: _ctx.maxHeight
+    })
+  }, [createElementVNode("div", {
+    class: normalizeClass(_ctx.mapClasses(_ctx.style, _ctx.contentClass, _ctx.isOpenClass)),
+    "aria-hidden": "".concat(!_ctx.opened),
+    id: "".concat(_ctx.id, "-collapsible"),
+    ref: "accordionContentEl"
+  }, [renderSlot(_ctx.$slots, "default")], 10
+  /* CLASS, PROPS */
+  , _hoisted_4)], 6
+  /* CLASS, STYLE */
+  )], 10
+  /* CLASS, PROPS */
+  , _hoisted_1);
+}
+
+export { render };

package/dist/lib/src/components/accordion/CdrAccordionGroup.js

@@ -1,7 +1,7 @@
-import script from './CdrAccordionGroup.vue_vue&type=script&lang.js';
-export { default } from './CdrAccordionGroup.vue_vue&type=script&lang.js';
-import { render } from './CdrAccordionGroup.vue_vue&type=template&id=09b98521&lang.js';
-import style0 from './styles/CdrAccordionGroup.module.scss_vue&type=style&index=0&src&id=09b98521&module=true&lang.css.js';
+import script from './CdrAccordionGroup.vue_vue_type_script_lang.js';
+export { default } from './CdrAccordionGroup.vue_vue_type_script_lang.js';
+import { render } from './CdrAccordionGroup.vue_vue_type_template_id_09b98521_lang.js';
+import style0 from './styles/CdrAccordionGroup.module.scss_vue_type_style_index_0_src_id_09b98521_module_true_lang.css.js';
 
 const cssModules = script.__cssModules = {};
 cssModules["$style"] = style0;

package/dist/lib/src/components/accordion/CdrAccordionGroup.vue_vue_type_script_lang.js

@@ -0,0 +1,102 @@
+import { defineComponent, ref, computed, onMounted, provide, useCssModule } from 'vue';
+import debounce from 'lodash/debounce';
+import validateProp from '../../utils/propValidator.js';
+import getCurrentBreakpoint from '../../mixins/breakpoints.js';
+
+var script = defineComponent({
+  name: 'CdrAccordionGroup',
+  props: {
+    unwrap: {
+      type: [String, Boolean],
+      default: false,
+      validator: function validator(value) {
+        if (typeof value === 'string') {
+          return validateProp(value, ['@xs', '@sm', '@md', '@lg'], false);
+        }
+
+        return typeof value === 'boolean';
+      }
+    }
+  },
+
+  setup(props, ctx) {
+    var baseClass = 'cdr-accordion-group';
+    var currentIdx = ref(0);
+    var accordionButtons = ref([]);
+    var accordionGroupEl = ref(null);
+    var isUnwrapped = ref(!!props.unwrap); //
+
+    var nextIdx = computed(function () {
+      var idx = currentIdx.value + 1;
+      return idx >= accordionButtons.value.length ? 0 : idx;
+    });
+    var prevIdx = computed(function () {
+      var idx = currentIdx.value - 1;
+      return idx <= -1 ? accordionButtons.value.length - 1 : idx;
+    });
+    console.log('what', props); // TODO: how to handle $el?
+
+    onMounted(function () {
+      console.log('what', props.unwrap);
+      accordionButtons.value = accordionGroupEl.value.querySelectorAll('.js-cdr-accordion-button');
+
+      if (typeof props.unwrap === 'string') {
+        console.log('unwrappy', props.unwrap);
+        isUnwrapped.value = props.unwrap.indexOf(getCurrentBreakpoint()) !== -1;
+        window.addEventListener('resize', debounce(function () {
+          isUnwrapped.value = props.unwrap.indexOf(getCurrentBreakpoint()) !== -1;
+        }, 300));
+      }
+    }); // TODO: unwrap logic needs to be refactored. Might need to pass a reactive object into provide? Is not currently working
+
+    provide('unwrap', {
+      val: isUnwrapped.value
+    });
+
+    var handleKeyDown = function handleKeyDown(e) {
+      // something besides the button is focused
+      if (currentIdx.value === -1) return;
+      var key = e.key;
+
+      switch (key) {
+        case 'Home':
+          e.preventDefault();
+          accordionButtons.value[0].focus();
+          break;
+
+        case 'End':
+          e.preventDefault();
+          accordionButtons.value[accordionButtons.value.length - 1].focus();
+          break;
+
+        case 'ArrowDown':
+        case 'Down':
+          e.preventDefault();
+          accordionButtons.value[nextIdx.value].focus();
+          break;
+
+        case 'ArrowUp':
+        case 'Up':
+          e.preventDefault();
+          accordionButtons.value[prevIdx.value].focus();
+          break;
+      }
+    };
+
+    var focusin = function focusin(e) {
+      // find out which, if any, button is focused
+      currentIdx.value = Array.prototype.indexOf.call(accordionButtons, e.target);
+    };
+
+    return {
+      style: useCssModule(),
+      handleKeyDown,
+      focusin,
+      baseClass,
+      accordionGroupEl
+    };
+  }
+
+});
+
+export { script as default };

package/dist/lib/src/components/accordion/CdrAccordionGroup.vue_vue_type_template_id_09b98521_lang.js

@@ -0,0 +1,18 @@
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("ul", {
+    class: normalizeClass(_ctx.style[_ctx.baseClass]),
+    ref: "accordionGroupEl",
+    onFocusin: _cache[0] || (_cache[0] = function () {
+      return _ctx.focusin && _ctx.focusin.apply(_ctx, arguments);
+    }),
+    onKeydown: _cache[1] || (_cache[1] = function () {
+      return _ctx.handleKeyDown && _ctx.handleKeyDown.apply(_ctx, arguments);
+    })
+  }, [renderSlot(_ctx.$slots, "default")], 34
+  /* CLASS, HYDRATE_EVENTS */
+  );
+}
+
+export { render };

package/dist/lib/src/components/accordion/styles/CdrAccordion.module.scss_vue_type_style_index_0_src_id_529b06a4_module_true_lang.css.js

@@ -0,0 +1,18 @@
+var style0 = {
+  "cdr-accordion": "cdr-accordion_13-0-0-alpha-1",
+  "cdr-accordion__button": "cdr-accordion__button_13-0-0-alpha-1",
+  "cdr-accordion__label": "cdr-accordion__label_13-0-0-alpha-1",
+  "cdr-accordion__header": "cdr-accordion__header_13-0-0-alpha-1",
+  "cdr-accordion__header--unwrapped": "cdr-accordion__header--unwrapped_13-0-0-alpha-1",
+  "cdr-accordion__icon": "cdr-accordion__icon_13-0-0-alpha-1",
+  "cdr-tabs--open": "cdr-tabs--open_13-0-0-alpha-1",
+  "cdr-accordion__content-container": "cdr-accordion__content-container_13-0-0-alpha-1",
+  "cdr-accordion__content": "cdr-accordion__content_13-0-0-alpha-1",
+  "cdr-tabs--closed": "cdr-tabs--closed_13-0-0-alpha-1",
+  "cdr-accordion--unwrap": "cdr-accordion--unwrap_13-0-0-alpha-1",
+  "cdr-accordion--border-aligned": "cdr-accordion--border-aligned_13-0-0-alpha-1",
+  "cdr-accordion--compact": "cdr-accordion--compact_13-0-0-alpha-1",
+  "cdr-accordion--focused": "cdr-accordion--focused_13-0-0-alpha-1"
+};
+
+export { style0 as default };

package/dist/lib/src/components/accordion/styles/CdrAccordionGroup.module.scss_vue_type_style_index_0_src_id_09b98521_module_true_lang.css.js

@@ -0,0 +1,6 @@
+var style0 = {
+  "cdr-accordion-group": "cdr-accordion-group_13-0-0-alpha-1",
+  "cdr-accordion": "cdr-accordion_13-0-0-alpha-1"
+};
+
+export { style0 as default };

package/dist/lib/src/components/banner/CdrBanner.js

@@ -1,10 +1,9 @@
-import script from './CdrBanner.vue_vue&type=script&lang.js';
-export { default } from './CdrBanner.vue_vue&type=script&lang.js';
-import { render } from './CdrBanner.vue_vue&type=template&id=0217b2ec&lang.js';
-import style0 from './styles/CdrBanner.module.scss_vue&type=style&index=0&src&id=0217b2ec&module=true&lang.css.js';
+import script from './CdrBanner.vue_vue_type_script_setup_true_lang.js';
+export { default } from './CdrBanner.vue_vue_type_script_setup_true_lang.js';
+import style0 from './styles/CdrBanner.module.scss_vue_type_style_index_0_src_id_0217b2ec_module_true_lang.css.js';
 
 const cssModules = script.__cssModules = {};
 cssModules["$style"] = style0;
 
-script.render = render;
+
 script.__file = "src/components/banner/CdrBanner.vue";

package/dist/lib/src/components/banner/CdrBanner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import { useSlots, useCssModule, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createCommentVNode } from 'vue';
+import validateProp from '../../utils/propValidator.js';
+import { buildClass } from '../../utils/buildClass.js';
+
+var script = {
+  props: {
+    type: {
+      type: String,
+      validator: function validator(value) {
+        return validateProp(value, ['info', 'warning', 'success', 'error', 'default']);
+      },
+      default: 'default'
+    }
+  },
+
+  setup(__props) {
+    var props = __props;
+    var slots = useSlots();
+    var baseClass = 'cdr-banner';
+    var style = useCssModule();
+    var typeClass = computed(function () {
+      return props.type && buildClass(baseClass, props.type);
+    });
+    var prominenceClass = computed(function () {
+      return slots['message-body'] ? buildClass("".concat(baseClass, "__wrapper"), 'prominence') : undefined;
+    });
+    var hasIconLeft = slots['icon-left'];
+    var hasIconRight = slots['icon-right'];
+    var hasMessageBody = slots['message-body'];
+    var hasInfoAction = slots['info-action'];
+    return function (_ctx, _cache) {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(style)[baseClass], unref(style)[unref(typeClass)]])
+      }, [createElementVNode("div", {
+        class: normalizeClass([unref(style)['cdr-banner__wrapper'], unref(style)[unref(prominenceClass)]])
+      }, [createElementVNode("div", {
+        class: normalizeClass([unref(style)['cdr-banner__main']])
+      }, [unref(hasIconLeft) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([unref(style)['cdr-banner__icon-left']])
+      }, [renderSlot(_ctx.$slots, "icon-left")], 2
+      /* CLASS */
+      )) : createCommentVNode("v-if", true), createElementVNode("span", {
+        class: normalizeClass([unref(style)['cdr-banner__message']])
+      }, [renderSlot(_ctx.$slots, "default")], 2
+      /* CLASS */
+      ), unref(hasIconRight) ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass([unref(style)['cdr-banner__icon-right']])
+      }, [renderSlot(_ctx.$slots, "icon-right")], 2
+      /* CLASS */
+      )) : createCommentVNode("v-if", true)], 2
+      /* CLASS */
+      ), unref(hasMessageBody) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([unref(style)['cdr-banner__message-body']])
+      }, [renderSlot(_ctx.$slots, "message-body")], 2
+      /* CLASS */
+      )) : createCommentVNode("v-if", true)], 2
+      /* CLASS */
+      ), unref(hasInfoAction) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([unref(style)['cdr-banner__info-action']])
+      }, [renderSlot(_ctx.$slots, "info-action")], 2
+      /* CLASS */
+      )) : createCommentVNode("v-if", true)], 2
+      /* CLASS */
+      );
+    };
+  }
+
+};
+
+export { script as default };

package/dist/lib/src/components/banner/styles/CdrBanner.module.scss_vue_type_style_index_0_src_id_0217b2ec_module_true_lang.css.js

@@ -0,0 +1,18 @@
+var style0 = {
+  "cdr-banner": "cdr-banner_13-0-0-alpha-1",
+  "cdr-banner__wrapper--prominence": "cdr-banner__wrapper--prominence_13-0-0-alpha-1",
+  "cdr-banner__main": "cdr-banner__main_13-0-0-alpha-1",
+  "cdr-banner__icon-left": "cdr-banner__icon-left_13-0-0-alpha-1",
+  "cdr-banner__message": "cdr-banner__message_13-0-0-alpha-1",
+  "cdr-banner__message-body": "cdr-banner__message-body_13-0-0-alpha-1",
+  "cdr-banner__icon-right": "cdr-banner__icon-right_13-0-0-alpha-1",
+  "cdr-banner__info-action": "cdr-banner__info-action_13-0-0-alpha-1",
+  "cdr-banner--default": "cdr-banner--default_13-0-0-alpha-1",
+  "cdr-banner__wrapper": "cdr-banner__wrapper_13-0-0-alpha-1",
+  "cdr-banner--info": "cdr-banner--info_13-0-0-alpha-1",
+  "cdr-banner--warning": "cdr-banner--warning_13-0-0-alpha-1",
+  "cdr-banner--success": "cdr-banner--success_13-0-0-alpha-1",
+  "cdr-banner--error": "cdr-banner--error_13-0-0-alpha-1"
+};
+
+export { style0 as default };

package/dist/lib/src/components/breadcrumb/CdrBreadcrumb.js

@@ -1,7 +1,7 @@
-import script from './CdrBreadcrumb.vue_vue&type=script&lang.js';
-export { default } from './CdrBreadcrumb.vue_vue&type=script&lang.js';
-import { render } from './CdrBreadcrumb.vue_vue&type=template&id=71430df8&lang.js';
-import style0 from './styles/CdrBreadcrumb.module.scss_vue&type=style&index=0&src&id=71430df8&module=true&lang.css.js';
+import script from './CdrBreadcrumb.vue_vue_type_script_lang.js';
+export { default } from './CdrBreadcrumb.vue_vue_type_script_lang.js';
+import { render } from './CdrBreadcrumb.vue_vue_type_template_id_71430df8_lang.js';
+import style0 from './styles/CdrBreadcrumb.module.scss_vue_type_style_index_0_src_id_71430df8_module_true_lang.css.js';
 
 const cssModules = script.__cssModules = {};
 cssModules["$style"] = style0;

package/dist/lib/src/components/breadcrumb/CdrBreadcrumb.vue_vue_type_script_lang.js

@@ -0,0 +1,81 @@
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import { defineComponent, ref, watch, computed, useCssModule } from 'vue';
+
+var script = defineComponent({
+  name: 'CdrBreadcrumb',
+  props: {
+    items: {
+      type: Array,
+      default: function _default() {
+        return [];
+      },
+      validator: function validator(value) {
+        if (value.length && value.length > 0) {
+          for (var i = 0; i < value.length; i += 1) {
+            if (!(typeof value[i].item === 'object')) {
+              console.error('Breadcrumb items array missing item key at index ', i); // eslint-disable-line no-console
+
+              return false;
+            }
+
+            if (!Object.hasOwnProperty.call(value[i].item, 'name')) {
+              console.error('Breadcrumb items array is missing item.name value at index ', i); // eslint-disable-line no-console
+
+              return false;
+            }
+          }
+        }
+
+        return true;
+      }
+    },
+
+    /**
+     * Flag to track container width threshold exceeded
+     */
+    truncationEnabled: {
+      type: Boolean,
+      default: true
+    },
+    id: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props) {
+    var truncate = ref(props.truncationEnabled && props.items.length > 2);
+    watch(function () {
+      return props.items;
+    }, function () {
+      truncate.value = props.truncationEnabled && props.items.length > 2;
+    });
+    var itemListEl = ref(null);
+
+    var handleEllipsisClick = function handleEllipsisClick() {
+      truncate.value = false;
+      setTimeout(function () {
+        // TODO: ref does not seem to update children here?
+        console.log(itemListEl.value.querySelector('.cdr-breadcrumb__item'));
+        itemListEl.value.querySelector('.cdr-breadcrumb__item').focus();
+      }, 1000);
+    };
+
+    var ellipsisLabel = computed(function () {
+      var _context;
+
+      var s = props.items.length - 2 > 1 ? 's' : '';
+      return _concatInstanceProperty(_context = "show ".concat(props.items.length - 2, " more navigation level")).call(_context, s);
+    });
+    return {
+      style: useCssModule(),
+      truncate,
+      handleEllipsisClick,
+      itemListEl,
+      ellipsisLabel
+    };
+  }
+
+});
+
+export { script as default };