@rei/cedar 13.4.0-alpha.1 → 13.4.1

package/dist/src/components/tabs/CdrTabs.vue.mjs

@@ -0,0 +1,168 @@
+import { defineComponent as V, ref as r, provide as j, computed as h, onMounted as q, useCssModule as G, openBlock as L, createElementBlock as N, normalizeClass as c, normalizeStyle as C, createElementVNode as b, Fragment as J, renderList as Q, withModifiers as Y, withKeys as W, toDisplayString as Z, renderSlot as x, nextTick as ee } from "vue";
+import { debounce as A } from "lodash-es";
+import { CdrColorBackgroundPrimary as te, CdrSpaceHalfX as ae, CdrSpaceOneX as le } from "../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.mjs";
+import se from "../../utils/mapClasses.mjs";
+import { modifyClassName as B } from "../../utils/buildClass.mjs";
+import re from "./styles/CdrTabs.module.scss.mjs";
+import ne from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const ie = V({
+  name: "CdrTabs",
+  props: {
+    height: {
+      type: String,
+      default: "240px"
+    },
+    activeTab: {
+      type: Number,
+      default: 0
+    },
+    modifier: String,
+    size: String,
+    backgroundColor: {
+      type: String,
+      default: te
+    }
+  },
+  setup(e, d) {
+    var R;
+    const T = (R = d.slots.default()[0].children) != null && R.length ? d.slots.default()[0].children : d.slots.default(), z = "cdr-tabs", p = r(T.map((a) => ({
+      name: a.props.name,
+      disabled: a.props.disabled,
+      id: a.props["aria-labelledby"]
+    }))), m = r(null), l = r(null), n = r(!1), s = r(0), o = r([]), v = r(null), S = r(null), k = r(!1), w = r(!1), i = r(0), f = r(0);
+    j("selectedTabName", m);
+    const X = h(() => e.modifier && B("cdr-tabs", e.modifier)), O = h(() => e.size && B("cdr-tabs", e.size)), P = h(() => ({
+      transform: `translateX(${i.value}px)`,
+      width: `${f.value}px`
+    })), F = h(() => ({
+      background: `linear-gradient(to left, rgba(255, 255, 255, 0), ${e.backgroundColor})`
+    })), _ = h(() => ({
+      background: `linear-gradient(to right, rgba(255, 255, 255, 0),
+        ${e.backgroundColor})`
+    })), H = (a, t) => l.value === a && !t.disabled, y = () => {
+      let a = 0;
+      if (S.value && (a = S.value.offsetWidth), n.value = s.value > a, n.value) {
+        const t = v.value.scrollLeft;
+        k.value = t > 1, w.value = t + 1 < s.value - a;
+      } else
+        k.value = !1, w.value = !1;
+    }, E = () => {
+      let a = [];
+      v.value && (a = Array.from(v.value.children));
+      let t = 0;
+      return a.forEach((u, $) => {
+        $ > 0 && (t += e.size === "small" ? Number(ae) : Number(le)), t += u.offsetWidth || 0;
+      }), t;
+    }, g = () => {
+      if (o.value.length > 0) {
+        const t = o.value[l.value].getBoundingClientRect(), u = v.value.getBoundingClientRect(), $ = t.x - u.x;
+        i.value = $ - v.value.scrollLeft, f.value = t.width, i.value + f.value >= u.width ? (f.value = Math.max(0, u.width - i.value), i.value = Math.min(i.value, u.width)) : i.value < 0 && (f.value = Math.max(0, f.value + i.value), i.value = 0);
+      }
+    }, I = async (a) => {
+      const t = o.value[a];
+      m.value = p.value[a].name, l.value = a, await ee(), t.focus(), g();
+    }, K = () => {
+      if (l.value === o.value.length - 1)
+        return;
+      let t = l.value + 1;
+      o.value[t].disabled && (t += 1), t <= o.value.length - 1 && I(t);
+    }, D = () => {
+      if (l.value <= 0)
+        return;
+      let t = l.value - 1;
+      o.value[t].disabled && (t -= 1), t >= 0 && I(t);
+    }, M = () => {
+      o.value.forEach((a, t) => {
+        !a.disabled && l.value === null && (l.value = t, m.value = p.value[t].name);
+      });
+    };
+    q(() => {
+      M(), s.value = E(), y(), setTimeout(() => {
+        g();
+      }, 250), window.addEventListener("resize", A(() => {
+        s.value = E(), y(), g();
+      }, 250)), v.value.addEventListener("scroll", A(() => {
+        y(), g();
+      }, 50));
+    });
+    const U = G();
+    return {
+      slottedTabs: T,
+      baseClass: z,
+      tabs: p,
+      selectedTabName: m,
+      selectedIndex: l,
+      headerOverflow: n,
+      headerWidth: s,
+      tabElements: o,
+      tablist: v,
+      containerEl: S,
+      overflowLeft: k,
+      overflowRight: w,
+      underlineOffsetX: i,
+      underlineWidth: f,
+      mapClasses: se,
+      modifierClass: X,
+      sizeClass: O,
+      underlineStyle: P,
+      gradientLeftStyle: F,
+      gradientRightStyle: _,
+      checkIfActive: H,
+      calculateOverflow: y,
+      getHeaderWidth: E,
+      updateUnderline: g,
+      selectTabNext: K,
+      selectTabPrev: D,
+      selectTab: I,
+      setInitialTabStates: M,
+      style: U
+    };
+  }
+}), oe = ["id", "disabled", "aria-selected", "tabIndex", "onClick"];
+function de(e, d, T, z, p, m) {
+  return L(), N("div", {
+    class: c(e.mapClasses(e.style, e.baseClass, e.modifierClass, e.sizeClass)),
+    ref: "containerEl",
+    style: C({
+      height: e.height
+    })
+  }, [b("div", {
+    class: c(e.style["cdr-tabs__gradient-container"])
+  }, [b("div", {
+    class: c(e.mapClasses(e.style, "cdr-tabs__gradient", "cdr-tabs__gradient--left", e.overflowLeft ? "cdr-tabs__gradient--active" : "")),
+    style: C(e.gradientLeftStyle)
+  }, null, 6), b("ul", {
+    class: c(e.style["cdr-tabs__header-container"]),
+    role: "tablist",
+    ref: "tablist"
+  }, [(L(!0), N(J, null, Q(e.tabs, (l, n) => (L(), N("li", {
+    key: `${l.name}-${n}`,
+    role: "presentation",
+    class: c(e.style["cdr-tabs__header"])
+  }, [b("button", {
+    ref_for: !0,
+    ref: (s) => {
+      e.tabElements[n] = s;
+    },
+    id: l.id,
+    disabled: l.disabled,
+    "aria-selected": e.checkIfActive(n, l),
+    tabIndex: e.checkIfActive(n, l) ? 0 : -1,
+    class: c(e.mapClasses(e.style, e.checkIfActive(n, l) ? "cdr-tabs__header-item-active" : "", "cdr-tabs__header-item", l.disabled ? "cdr-tabs__header-item--disabled" : "")),
+    role: "tab",
+    onClick: Y((s) => e.selectTab(n), ["prevent"]),
+    onKeyup: [d[0] || (d[0] = W((...s) => e.selectTabNext && e.selectTabNext(...s), ["right"])), d[1] || (d[1] = W((...s) => e.selectTabPrev && e.selectTabPrev(...s), ["left"]))]
+  }, Z(l.name), 43, oe)], 2))), 128))], 2), b("div", {
+    class: c(e.mapClasses(e.style, "cdr-tabs__gradient", "cdr-tabs__gradient--right", e.overflowRight ? "cdr-tabs__gradient--active" : "")),
+    style: C(e.gradientRightStyle)
+  }, null, 6), b("div", {
+    class: c(e.style["cdr-tabs__underline"]),
+    style: C(e.underlineStyle)
+  }, null, 6)], 2), x(e.$slots, "default")], 6);
+}
+const ue = {
+  $style: re
+}, pe = /* @__PURE__ */ ne(ie, [["render", de], ["__cssModules", ue]]);
+export {
+  pe as default
+};

package/dist/src/components/tabs/styles/CdrTabPanel.module.scss.mjs

@@ -0,0 +1,10 @@
+const t = {
+  "cdr-tab-panel": "cdr-tab-panel_13-4-1",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-4-1",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-4-1",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-4-1",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-4-1"
+};
+export {
+  t as default
+};

package/dist/src/components/tabs/styles/CdrTabs.module.scss.mjs

@@ -0,0 +1,33 @@
+const e = {
+  "cdr-tab-panel": "cdr-tab-panel_13-4-1",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-4-1",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-4-1",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-4-1",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-4-1",
+  "cdr-tabs": "cdr-tabs_13-4-1",
+  "cdr-tabs__header-container": "cdr-tabs__header-container_13-4-1",
+  "cdr-tabs__header": "cdr-tabs__header_13-4-1",
+  "cdr-tabs__header-item": "cdr-tabs__header-item_13-4-1",
+  "cdr-tabs__header-item-active": "cdr-tabs__header-item-active_13-4-1",
+  "cdr-tabs__header-item--disabled": "cdr-tabs__header-item--disabled_13-4-1",
+  "cdr-tabs__gradient-container": "cdr-tabs__gradient-container_13-4-1",
+  "cdr-tabs__gradient": "cdr-tabs__gradient_13-4-1",
+  "cdr-tabs__gradient--left": "cdr-tabs__gradient--left_13-4-1",
+  "cdr-tabs__gradient--right": "cdr-tabs__gradient--right_13-4-1",
+  "cdr-tabs__gradient--active": "cdr-tabs__gradient--active_13-4-1",
+  "cdr-tabs__underline": "cdr-tabs__underline_13-4-1",
+  "cdr-tabs__content-container": "cdr-tabs__content-container_13-4-1",
+  "fade-enter-active": "fade-enter-active_13-4-1",
+  "fade-leave-active": "fade-leave-active_13-4-1",
+  "fade-enter": "fade-enter_13-4-1",
+  "fade-leave-to": "fade-leave-to_13-4-1",
+  "cdr-tabs--compact": "cdr-tabs--compact_13-4-1",
+  "cdr-tabs__header-item-label": "cdr-tabs__header-item-label_13-4-1",
+  "cdr-tabs--small": "cdr-tabs--small_13-4-1",
+  "cdr-tabs--no-border": "cdr-tabs--no-border_13-4-1",
+  "cdr-tabs--full-width": "cdr-tabs--full-width_13-4-1",
+  "cdr-tabs--centered": "cdr-tabs--centered_13-4-1"
+};
+export {
+  e as default
+};

package/dist/src/components/text/CdrText.vue.mjs

@@ -0,0 +1,31 @@
+import { defineComponent as t, useCssModule as s, openBlock as o, createBlock as r, resolveDynamicComponent as n, normalizeClass as l, withCtx as a, renderSlot as p } from "vue";
+import c from "./styles/CdrText.module.scss.mjs";
+import d from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const u = t({
+  name: "CdrText",
+  props: {
+    tag: {
+      type: String,
+      default: "p"
+    }
+  },
+  setup() {
+    return {
+      style: s()
+    };
+  }
+});
+function f(e, i, _, C, y, $) {
+  return o(), r(n(e.tag), {
+    class: l(e.style["cdr-text"])
+  }, {
+    default: a(() => [p(e.$slots, "default")]),
+    _: 3
+  }, 8, ["class"]);
+}
+const m = {
+  $style: c
+}, h = /* @__PURE__ */ d(u, [["render", f], ["__cssModules", m]]);
+export {
+  h as default
+};

package/dist/src/components/text/styles/CdrText.module.scss.mjs

@@ -0,0 +1,6 @@
+const t = {
+  "cdr-text": "cdr-text_13-4-1"
+};
+export {
+  t as default
+};

package/dist/src/components/toast/CdrToast.vue.mjs

@@ -0,0 +1,110 @@
+import { defineComponent as D, useCssModule as L, ref as _, computed as N, watch as g, onUpdated as w, resolveComponent as C, openBlock as u, createBlock as I, Transition as M, withCtx as $, createElementBlock as E, normalizeClass as n, createElementVNode as T, renderSlot as f, createCommentVNode as b, createVNode as h } from "vue";
+import S from "../../utils/propValidator.mjs";
+import V from "../icon/comps/x-sm.vue.mjs";
+import z from "../button/CdrButton.vue.mjs";
+import H from "./styles/CdrToast.module.scss.mjs";
+import P from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const U = D({
+  name: "CdrToast",
+  components: {
+    IconXSm: V,
+    CdrButton: z
+  },
+  props: {
+    type: {
+      type: String,
+      validator: (e) => S(e, ["info", "warning", "success", "error", "default"]),
+      default: "default"
+    },
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    autoDismiss: {
+      type: Boolean,
+      default: !0
+    },
+    dismissDelay: {
+      type: Number,
+      default: 5e3
+    }
+  },
+  emits: ["open", "closed"],
+  setup(e, a) {
+    const d = "cdr-toast", v = L(), p = a.slots["icon-left"], l = _(null), r = _(null);
+    let s, t;
+    const k = N(() => e.type && `${d}--${e.type}`), i = (o) => {
+      s ? clearTimeout(s) : a.emit("open", o), l.value = !0, e.autoDismiss && !o && c();
+    }, B = (o) => {
+      m(), l.value = !1, a.emit("closed", o);
+    }, c = (o) => {
+      s = setTimeout(() => {
+        m(), l.value = !1, a.emit("closed", o);
+      }, e.dismissDelay);
+    }, y = () => {
+      t = r.value, t && (t.addEventListener("mouseover", i), t.addEventListener("mouseleave", c));
+    }, m = () => {
+      t && (t.removeEventListener("mouseover", i), t.removeEventListener("mouseleave", c));
+    };
+    return g(() => e.open, () => {
+      e.open && i();
+    }), w(() => {
+      e.autoDismiss && y();
+    }), {
+      baseClass: d,
+      style: v,
+      hasIconLeft: p,
+      opened: l,
+      toastEl: r,
+      timeout: s,
+      toastElement: t,
+      typeClass: k,
+      openToast: i,
+      closeToast: B,
+      closeToastWithDelay: c,
+      addHandlers: y,
+      removeHandlers: m
+    };
+  }
+});
+function W(e, a, d, v, p, l) {
+  const r = C("icon-x-sm"), s = C("cdr-button");
+  return u(), I(M, {
+    "enter-from-class": e.style["cdr-toast__transition--toast-enter-from"],
+    "enter-active-class": e.style["cdr-toast__transition--toast-enter-active"],
+    "leave-to-class": e.style["cdr-toast__transition--toast-leave-to"],
+    "leave-active-class": e.style["cdr-toast__transition--toast-leave-active"]
+  }, {
+    default: $(() => [e.opened ? (u(), E("div", {
+      key: 0,
+      class: n([e.style[e.baseClass], e.style[e.typeClass]]),
+      role: "status",
+      ref: "toastEl"
+    }, [T("div", {
+      class: n([e.style["cdr-toast__main"]])
+    }, [e.hasIconLeft ? (u(), E("div", {
+      key: 0,
+      class: n([e.style["cdr-toast__icon-left"]])
+    }, [f(e.$slots, "icon-left")], 2)) : b("", !0), T("span", {
+      class: n([e.style["cdr-toast__message"]])
+    }, [f(e.$slots, "default")], 2), h(s, {
+      class: n([e.style["cdr-toast__close-button"]]),
+      "icon-only": "",
+      onClick: e.closeToast,
+      "aria-label": "Close",
+      size: "small"
+    }, {
+      default: $(() => [f(e.$slots, "icon", {}, () => [h(r, {
+        "inherit-color": ""
+      })])]),
+      _: 3
+    }, 8, ["class", "onClick"])], 2)], 2)) : b("", !0)]),
+    _: 3
+  }, 8, ["enter-from-class", "enter-active-class", "leave-to-class", "leave-active-class"]);
+}
+const X = {
+  $style: H
+}, K = /* @__PURE__ */ P(U, [["render", W], ["__cssModules", X]]);
+export {
+  K as default
+};

package/dist/src/components/toast/styles/CdrToast.module.scss.mjs

@@ -0,0 +1,62 @@
+const t = {
+  "cdr-button": "cdr-button_13-4-1",
+  "cdr-button--has-icon-left": "cdr-button--has-icon-left_13-4-1",
+  "cdr-button--has-icon-right": "cdr-button--has-icon-right_13-4-1",
+  "cdr-button--primary": "cdr-button--primary_13-4-1",
+  "cdr-button--secondary": "cdr-button--secondary_13-4-1",
+  "cdr-button--dark": "cdr-button--dark_13-4-1",
+  "cdr-button--sale": "cdr-button--sale_13-4-1",
+  "cdr-button--link": "cdr-button--link_13-4-1",
+  "cdr-button--large": "cdr-button--large_13-4-1",
+  "cdr-button--medium": "cdr-button--medium_13-4-1",
+  "cdr-button--small": "cdr-button--small_13-4-1",
+  "cdr-button--icon-only": "cdr-button--icon-only_13-4-1",
+  "cdr-button--icon-only-large": "cdr-button--icon-only-large_13-4-1",
+  "cdr-button--with-background": "cdr-button--with-background_13-4-1",
+  "cdr-button--full-width": "cdr-button--full-width_13-4-1",
+  "cdr-button--small@xs": "cdr-button--small@xs_13-4-1",
+  "cdr-button--medium@xs": "cdr-button--medium@xs_13-4-1",
+  "cdr-button--large@xs": "cdr-button--large@xs_13-4-1",
+  "cdr-button--full-width@xs": "cdr-button--full-width@xs_13-4-1",
+  "cdr-button--small@sm": "cdr-button--small@sm_13-4-1",
+  "cdr-button--medium@sm": "cdr-button--medium@sm_13-4-1",
+  "cdr-button--large@sm": "cdr-button--large@sm_13-4-1",
+  "cdr-button--full-width@sm": "cdr-button--full-width@sm_13-4-1",
+  "cdr-button--small@md": "cdr-button--small@md_13-4-1",
+  "cdr-button--medium@md": "cdr-button--medium@md_13-4-1",
+  "cdr-button--large@md": "cdr-button--large@md_13-4-1",
+  "cdr-button--full-width@md": "cdr-button--full-width@md_13-4-1",
+  "cdr-button--small@lg": "cdr-button--small@lg_13-4-1",
+  "cdr-button--medium@lg": "cdr-button--medium@lg_13-4-1",
+  "cdr-button--large@lg": "cdr-button--large@lg_13-4-1",
+  "cdr-button--full-width@lg": "cdr-button--full-width@lg_13-4-1",
+  "cdr-icon": "cdr-icon_13-4-1",
+  "cdr-icon--small": "cdr-icon--small_13-4-1",
+  "cdr-icon--large": "cdr-icon--large_13-4-1",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_13-4-1",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_13-4-1",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_13-4-1",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_13-4-1",
+  "cdr-icon--small@md": "cdr-icon--small@md_13-4-1",
+  "cdr-icon--large@md": "cdr-icon--large@md_13-4-1",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_13-4-1",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_13-4-1",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-4-1",
+  "cdr-toast": "cdr-toast_13-4-1",
+  "cdr-toast__transition--toast-enter-from": "cdr-toast__transition--toast-enter-from_13-4-1",
+  "cdr-toast__transition--toast-enter-active": "cdr-toast__transition--toast-enter-active_13-4-1",
+  "cdr-toast__transition--toast-leave-to": "cdr-toast__transition--toast-leave-to_13-4-1",
+  "cdr-toast__transition--toast-leave-active": "cdr-toast__transition--toast-leave-active_13-4-1",
+  "cdr-toast__main": "cdr-toast__main_13-4-1",
+  "cdr-toast__icon-left": "cdr-toast__icon-left_13-4-1",
+  "cdr-toast__message": "cdr-toast__message_13-4-1",
+  "cdr-toast__close-button": "cdr-toast__close-button_13-4-1",
+  "cdr-toast--default": "cdr-toast--default_13-4-1",
+  "cdr-toast--info": "cdr-toast--info_13-4-1",
+  "cdr-toast--warning": "cdr-toast--warning_13-4-1",
+  "cdr-toast--success": "cdr-toast--success_13-4-1",
+  "cdr-toast--error": "cdr-toast--error_13-4-1"
+};
+export {
+  t as default
+};

package/dist/src/components/toggleButton/CdrToggleButton.vue.mjs

@@ -0,0 +1,38 @@
+import { defineComponent as s, inject as r, computed as a, useCssModule as n, openBlock as i, createElementBlock as u, normalizeClass as l, createElementVNode as c, renderSlot as d, createTextVNode as g, toDisplayString as p } from "vue";
+import m from "./styles/CdrToggleButton.module.scss.mjs";
+import f from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const V = s({
+  name: "CdrToggleButton",
+  props: {
+    toggleValue: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const t = r("selectedToggleValue"), o = a(() => e.toggleValue === t.value);
+    return {
+      style: n(),
+      isActive: o
+    };
+  }
+}), _ = ["value", "aria-label", "aria-checked", "tabindex"];
+function b(e, t, o, v, $, C) {
+  return i(), u("li", {
+    role: "presentation",
+    class: l(e.style["cdr-toggle-button__container"])
+  }, [c("button", {
+    role: "radio",
+    class: l(e.style["cdr-toggle-button__item"]),
+    value: e.toggleValue,
+    "aria-label": e.toggleValue,
+    "aria-checked": e.isActive ? "true" : "false",
+    tabindex: e.isActive ? 0 : -1
+  }, [d(e.$slots, "default", {}, () => [g(p(e.toggleValue), 1)])], 10, _)], 2);
+}
+const y = {
+  $style: m
+}, B = /* @__PURE__ */ f(V, [["render", b], ["__cssModules", y]]);
+export {
+  B as default
+};

package/dist/src/components/toggleButton/CdrToggleGroup.vue.mjs

@@ -0,0 +1,75 @@
+import { defineComponent as C, ref as g, provide as b, computed as $, onMounted as T, watch as V, useCssModule as z, openBlock as M, createElementBlock as P, mergeProps as G, withModifiers as i, withKeys as c, renderSlot as N } from "vue";
+import S from "../../utils/mapClasses.mjs";
+import k from "../../utils/propValidator.mjs";
+import w from "./styles/CdrToggleGroup.module.scss.mjs";
+import A from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const O = C({
+  name: "CdrToggleGroup",
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array],
+      required: !0
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => k(e, ["medium", "large"])
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, t) {
+    const a = g(null), u = g(e.modelValue);
+    b("selectedToggleValue", u);
+    const d = $(() => e.size ? `cdr-toggle-group--${e.size}` : "cdr-toggle-group--medium");
+    let o;
+    T(() => {
+      o = Array.from(a.value.querySelectorAll("button"));
+    }), V(() => e.modelValue, (s) => {
+      u.value = s;
+    });
+    const r = (s) => {
+      if (!s.target.closest("button"))
+        return;
+      const n = s.target.closest("button");
+      u.value = n.value, t.emit("update:modelValue", n.value), n.focus();
+    }, m = (s) => {
+      const n = s.target, l = o.indexOf(n);
+      if (l === o.length - 1)
+        return;
+      o[l + 1].focus();
+    }, f = (s) => {
+      const n = s.target, l = o.indexOf(n);
+      if (l === 0)
+        return;
+      o[l - 1].focus();
+    }, p = "cdr-toggle-group", B = z();
+    return {
+      toggleGroup: a,
+      selectedToggleValue: u,
+      toggleButtonElements: o,
+      selectToggleButton: r,
+      focusNext: m,
+      focusPrev: f,
+      sizeClass: d,
+      baseClass: p,
+      mapClasses: S,
+      style: B
+    };
+  }
+});
+function q(e, t, a, u, d, o) {
+  return M(), P("ul", G({
+    ref: "toggleGroup",
+    role: "radiogroup"
+  }, e.$attrs, {
+    class: e.mapClasses(e.style, e.baseClass, e.sizeClass),
+    onClick: t[0] || (t[0] = i((...r) => e.selectToggleButton && e.selectToggleButton(...r), ["prevent"])),
+    onKeyup: [t[1] || (t[1] = c(i((...r) => e.focusNext && e.focusNext(...r), ["prevent"]), ["right"])), t[2] || (t[2] = c(i((...r) => e.focusPrev && e.focusPrev(...r), ["prevent"]), ["left"]))]
+  }), [N(e.$slots, "default")], 16);
+}
+const x = {
+  $style: w
+}, j = /* @__PURE__ */ A(O, [["render", q], ["__cssModules", x]]);
+export {
+  j as default
+};

package/dist/src/components/toggleButton/styles/CdrToggleButton.module.scss.mjs

@@ -0,0 +1,7 @@
+const t = {
+  "cdr-toggle-button__item": "cdr-toggle-button__item_13-4-1",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_13-4-1"
+};
+export {
+  t as default
+};

package/dist/src/components/toggleButton/styles/CdrToggleGroup.module.scss.mjs

@@ -0,0 +1,10 @@
+const g = {
+  "cdr-toggle-group": "cdr-toggle-group_13-4-1",
+  "cdr-toggle-group--medium": "cdr-toggle-group--medium_13-4-1",
+  "cdr-toggle-button__item": "cdr-toggle-button__item_13-4-1",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_13-4-1",
+  "cdr-toggle-group--large": "cdr-toggle-group--large_13-4-1"
+};
+export {
+  g as default
+};

package/dist/src/components/tooltip/CdrTooltip.vue.mjs

@@ -0,0 +1,94 @@
+import { defineComponent as v, useCssModule as C, ref as a, watch as E, onMounted as y, resolveComponent as h, openBlock as T, createElementBlock as $, normalizeClass as L, createElementVNode as b, renderSlot as f, createVNode as _, withCtx as B } from "vue";
+import M from "../../utils/mapClasses.mjs";
+import P from "../popup/CdrPopup.vue.mjs";
+import S from "../../utils/propValidator.mjs";
+import q from "./styles/CdrTooltip.module.scss.mjs";
+import w from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const k = v({
+  name: "CdrTooltip",
+  components: {
+    CdrPopup: P
+  },
+  props: {
+    position: {
+      type: String,
+      required: !1,
+      default: "top",
+      validator: (e) => S(e, ["top", "bottom", "left", "right"])
+    },
+    autoPosition: {
+      type: Boolean,
+      default: !0
+    },
+    id: {
+      type: String,
+      required: !0
+    },
+    contentClass: {
+      type: String,
+      required: !1
+    },
+    open: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["opened", "closed"],
+  setup(e, r) {
+    const u = C(), i = a(!1);
+    let l, t;
+    const p = a(null), d = a(null), g = r.slots.trigger, s = (o) => {
+      l && clearTimeout(l), i.value = !0, r.emit("opened", o);
+    }, n = (o) => {
+      l = setTimeout(() => {
+        i.value = !1, r.emit("closed", o);
+      }, 250);
+    }, c = () => {
+      var m;
+      const o = d.value.children[0];
+      t = (m = p.value) == null ? void 0 : m.$el, o && (o.addEventListener("mouseover", s), o.addEventListener("focus", s), o.addEventListener("mouseleave", n), o.addEventListener("blur", n), t.addEventListener("mouseover", s), t.addEventListener("mouseleave", n));
+    };
+    return E(() => e.open, () => e.open ? s() : n()), y(() => {
+      c();
+      const o = d.value.children[0];
+      o && o.setAttribute("aria-describedby", e.id);
+    }), {
+      style: u,
+      isOpen: i,
+      popupElement: t,
+      popupEl: p,
+      triggerEl: d,
+      hasTrigger: g,
+      openTooltip: s,
+      closeTooltip: n,
+      addHandlers: c,
+      mapClasses: M
+    };
+  }
+}), N = {
+  ref: "triggerEl"
+};
+function O(e, r, u, i, l, t) {
+  const p = h("cdr-popup");
+  return T(), $("div", {
+    class: L(e.mapClasses(e.style, "cdr-tooltip--wrapper", e.hasTrigger && "cdr-tooltip--position"))
+  }, [b("div", N, [f(e.$slots, "trigger")], 512), _(p, {
+    "content-class": e.contentClass,
+    role: "tooltip",
+    ref: "popupEl",
+    position: e.position,
+    "auto-position": e.autoPosition,
+    opened: e.isOpen,
+    id: e.id,
+    onClosed: e.closeTooltip
+  }, {
+    default: B(() => [f(e.$slots, "default")]),
+    _: 3
+  }, 8, ["content-class", "position", "auto-position", "opened", "id", "onClosed"])], 2);
+}
+const V = {
+  $style: q
+}, G = /* @__PURE__ */ w(k, [["render", O], ["__cssModules", V]]);
+export {
+  G as default
+};

package/dist/src/components/tooltip/styles/CdrTooltip.module.scss.mjs

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