@rei/cedar 14.0.2-alpha.6 → 14.0.2-alpha.8

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

@@ -0,0 +1,157 @@
+import { defineComponent as q, useCssModule as G, useSlots as J, computed as m, ref as n, provide as Q, onMounted as Y, openBlock as $, createElementBlock as N, normalizeClass as f, unref as s, normalizeStyle as C, createElementVNode as g, Fragment as Z, renderList as ee, withModifiers as te, withKeys as X, toDisplayString as ae, renderSlot as le, nextTick as re } from "vue";
+import { debounce as K } from "../../utils/debounce.mjs";
+import { CdrColorBackgroundPrimary as se, CdrSpaceHalfX as ne, CdrSpaceOneX as ie } from "../../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/js/cdr-tokens.mjs";
+import T from "../../utils/mapClasses.mjs";
+import { modifyClassName as O } from "../../utils/buildClass.mjs";
+import { selectedTabKey as de } from "../../types/symbols.mjs";
+const oe = ["id", "disabled", "aria-selected", "tabIndex", "onClick", "onKeyup"], ue = "cdr-tabs", ge = /* @__PURE__ */ q({
+  name: "CdrTabs",
+  __name: "CdrTabs",
+  props: {
+    /**
+     * Sets height of the tabs container element.
+     * Passing a `px` value will render tabs with a static height,
+     * passing `auto` will render tabs with variable height based on content size.
+     */
+    height: {
+      type: String,
+      default: "240px"
+    },
+    /** Sets the index of the tab that should be active on initial page load. Note that this property is zero-indexed. */
+    activeTab: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Modifies the style variants for this component
+     * @values centered, compact, full-width, no-border
+     */
+    modifier: String,
+    /**
+     * Use `small` to reduce spacing around the tabs for a denser visual design
+     * @demoSelectMultiple true
+     * @values small
+    */
+    size: String,
+    /**
+     * Sets the background color of the tab.
+     * For CdrTabs that are rendered on non-primary backgrounds.
+     * Pass the background-color into the component to ensure that the scrolling gradients render correctly.
+     */
+    backgroundColor: {
+      type: String,
+      default: se
+    }
+  },
+  setup(W) {
+    const b = W, c = G(), d = J(), M = m(() => {
+      var e, t, a, l, r, y;
+      return (a = (t = (e = d.default) == null ? void 0 : e.call(d)[0]) == null ? void 0 : t.children) != null && a.length ? (r = (l = d.default) == null ? void 0 : l.call(d)[0]) == null ? void 0 : r.children : (y = d.default) == null ? void 0 : y.call(d);
+    }), x = m(() => M.value ? M.value.map((e) => ({
+      name: e.props.name,
+      disabled: e.props.disabled,
+      id: e.props["aria-labelledby"]
+    })) : []), k = n(null), i = n(null), R = n(!1), p = n(0), o = n([]), v = n(null), S = n(null), w = n(!1), E = n(!1), u = n(0), h = n(0);
+    Q(de, k);
+    const F = m(() => b.modifier ? O("cdr-tabs", b.modifier) : ""), A = m(() => b.size ? O("cdr-tabs", b.size) : ""), H = m(() => ({
+      transform: `translateX(${u.value}px)`,
+      width: `${h.value}px`
+    })), P = m(() => ({
+      background: `linear-gradient(to left, rgba(255, 255, 255, 0), ${b.backgroundColor})`
+    })), D = m(() => ({
+      background: `linear-gradient(to right, rgba(255, 255, 255, 0),
+    ${b.backgroundColor})`
+    })), I = (e, t) => i.value === e && !t.disabled, L = () => {
+      var t;
+      let e = 0;
+      if (S.value && (e = S.value.offsetWidth), R.value = p.value > e, R.value) {
+        const a = ((t = v.value) == null ? void 0 : t.scrollLeft) ?? 0;
+        w.value = a > 1, E.value = a + 1 < p.value - e;
+      } else
+        w.value = !1, E.value = !1;
+    }, B = () => {
+      let e = [];
+      v.value && (e = Array.from(v.value.children));
+      let t = 0;
+      return e.forEach((a, l) => {
+        l > 0 && (t += b.size === "small" ? Number(ne) : Number(ie)), t += a.offsetWidth || 0;
+      }), t;
+    }, _ = () => {
+      var e, t;
+      if (o.value.length > 0) {
+        const l = o.value[i.value || 0].getBoundingClientRect(), r = (e = v.value) == null ? void 0 : e.getBoundingClientRect(), y = r ? l.x - r.x : 0;
+        u.value = v.value ? y - ((t = v.value) == null ? void 0 : t.scrollLeft) : 0, h.value = l.width, r && u.value + h.value >= r.width ? (h.value = Math.max(0, r.width - u.value), u.value = Math.min(u.value, r.width)) : u.value < 0 && (h.value = Math.max(0, h.value + u.value), u.value = 0);
+      }
+    }, z = async (e) => {
+      const t = o.value[e];
+      k.value = x.value[e].name, i.value = e, await re(), t.focus(), _();
+    }, U = () => {
+      if (i.value === o.value.length - 1)
+        return;
+      let t = (i.value || 0) + 1;
+      o.value[t].disabled && (t += 1), t <= o.value.length - 1 && z(t);
+    }, V = () => {
+      if (i.value && i.value <= 0)
+        return;
+      let t = (i.value || 0) - 1;
+      o.value[t].disabled && (t -= 1), t >= 0 && z(t);
+    }, j = () => {
+      o.value.forEach((e, t) => {
+        !e.disabled && i.value === null && (i.value = t, k.value = x.value[t].name);
+      });
+    };
+    return Y(() => {
+      var e;
+      j(), p.value = B(), L(), setTimeout(() => {
+        _();
+      }, 250), window.addEventListener("resize", K(() => {
+        p.value = B(), L(), _();
+      }, 250)), (e = v.value) == null || e.addEventListener("scroll", K(() => {
+        L(), _();
+      }, 50));
+    }), (e, t) => ($(), N("div", {
+      class: f(s(T)(s(c), ue, F.value, A.value)),
+      ref_key: "containerEl",
+      ref: S,
+      style: C({
+        height: W.height
+      })
+    }, [g("div", {
+      class: f(s(c)["cdr-tabs__gradient-container"])
+    }, [g("div", {
+      class: f(s(T)(s(c), "cdr-tabs__gradient", "cdr-tabs__gradient--left", w.value ? "cdr-tabs__gradient--active" : "")),
+      style: C(P.value)
+    }, null, 6), g("ul", {
+      class: f(s(c)["cdr-tabs__header-container"]),
+      role: "tablist",
+      ref_key: "tablist",
+      ref: v
+    }, [($(!0), N(Z, null, ee(x.value, (a, l) => ($(), N("li", {
+      key: `${a.name}-${l}`,
+      role: "presentation",
+      class: f(s(c)["cdr-tabs__header"])
+    }, [g("button", {
+      ref_for: !0,
+      ref: (r) => {
+        o.value[l] = r;
+      },
+      id: a.id,
+      disabled: a.disabled,
+      "aria-selected": I(l, a),
+      tabIndex: I(l, a) ? 0 : -1,
+      class: f(s(T)(s(c), I(l, a) ? "cdr-tabs__header-item-active" : "", "cdr-tabs__header-item", a.disabled ? "cdr-tabs__header-item--disabled" : "")),
+      role: "tab",
+      onClick: te((r) => z(l), ["prevent"]),
+      onKeyup: [X(U, ["right"]), X(V, ["left"])]
+    }, ae(a.name), 43, oe)], 2))), 128))], 2), g("div", {
+      class: f(s(T)(s(c), "cdr-tabs__gradient", "cdr-tabs__gradient--right", E.value ? "cdr-tabs__gradient--active" : "")),
+      style: C(D.value)
+    }, null, 6), g("div", {
+      class: f(s(c)["cdr-tabs__underline"]),
+      style: C(H.value)
+    }, null, 6)], 2), le(e.$slots, "default")], 6));
+  }
+});
+export {
+  ge as default
+};

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

@@ -0,0 +1,10 @@
+const a = {
+  "cdr-tab-panel": "cdr-tab-panel_14-0-2-alpha-8",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_14-0-2-alpha-8",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_14-0-2-alpha-8",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_14-0-2-alpha-8",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_14-0-2-alpha-8"
+};
+export {
+  a as default
+};

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

@@ -0,0 +1,33 @@
+const a = {
+  "cdr-tab-panel": "cdr-tab-panel_14-0-2-alpha-8",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_14-0-2-alpha-8",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_14-0-2-alpha-8",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_14-0-2-alpha-8",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_14-0-2-alpha-8",
+  "cdr-tabs": "cdr-tabs_14-0-2-alpha-8",
+  "cdr-tabs__header-container": "cdr-tabs__header-container_14-0-2-alpha-8",
+  "cdr-tabs__header": "cdr-tabs__header_14-0-2-alpha-8",
+  "cdr-tabs__header-item": "cdr-tabs__header-item_14-0-2-alpha-8",
+  "cdr-tabs__header-item-active": "cdr-tabs__header-item-active_14-0-2-alpha-8",
+  "cdr-tabs__header-item--disabled": "cdr-tabs__header-item--disabled_14-0-2-alpha-8",
+  "cdr-tabs__gradient-container": "cdr-tabs__gradient-container_14-0-2-alpha-8",
+  "cdr-tabs__gradient": "cdr-tabs__gradient_14-0-2-alpha-8",
+  "cdr-tabs__gradient--left": "cdr-tabs__gradient--left_14-0-2-alpha-8",
+  "cdr-tabs__gradient--right": "cdr-tabs__gradient--right_14-0-2-alpha-8",
+  "cdr-tabs__gradient--active": "cdr-tabs__gradient--active_14-0-2-alpha-8",
+  "cdr-tabs__underline": "cdr-tabs__underline_14-0-2-alpha-8",
+  "cdr-tabs__content-container": "cdr-tabs__content-container_14-0-2-alpha-8",
+  "fade-enter-active": "fade-enter-active_14-0-2-alpha-8",
+  "fade-leave-active": "fade-leave-active_14-0-2-alpha-8",
+  "fade-enter": "fade-enter_14-0-2-alpha-8",
+  "fade-leave-to": "fade-leave-to_14-0-2-alpha-8",
+  "cdr-tabs--compact": "cdr-tabs--compact_14-0-2-alpha-8",
+  "cdr-tabs__header-item-label": "cdr-tabs__header-item-label_14-0-2-alpha-8",
+  "cdr-tabs--small": "cdr-tabs--small_14-0-2-alpha-8",
+  "cdr-tabs--no-border": "cdr-tabs--no-border_14-0-2-alpha-8",
+  "cdr-tabs--full-width": "cdr-tabs--full-width_14-0-2-alpha-8",
+  "cdr-tabs--centered": "cdr-tabs--centered_14-0-2-alpha-8"
+};
+export {
+  a as default
+};

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

@@ -0,0 +1,9 @@
+import s from "./CdrText.vue2.mjs";
+import o from "./styles/CdrText.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,24 @@
+import { defineComponent as n, useCssModule as o, openBlock as r, createBlock as a, resolveDynamicComponent as l, normalizeClass as c, unref as d, withCtx as p, renderSlot as u } from "vue";
+const i = /* @__PURE__ */ n({
+  name: "CdrText",
+  __name: "CdrText",
+  props: {
+    /** Sets the HTML tag (p, span, h1, h2, etc) */
+    tag: {
+      type: String,
+      default: "p"
+    }
+  },
+  setup(e) {
+    const t = o();
+    return (s, m) => (r(), a(l(e.tag), {
+      class: c(d(t)["cdr-text"])
+    }, {
+      default: p(() => [u(s.$slots, "default")]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  i as default
+};

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

@@ -0,0 +1,6 @@
+const t = {
+  "cdr-text": "cdr-text_14-0-2-alpha-8"
+};
+export {
+  t as default
+};

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

@@ -0,0 +1,9 @@
+import s from "./CdrToast.vue2.mjs";
+import o from "./styles/CdrToast.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,103 @@
+import { defineComponent as b, useCssModule as N, useSlots as g, ref as _, computed as w, watch as S, onUpdated as V, openBlock as m, createBlock as z, Transition as H, unref as e, withCtx as y, createElementBlock as C, normalizeClass as l, createElementVNode as E, renderSlot as f, createCommentVNode as T, createVNode as k } from "vue";
+import I from "../../utils/propValidator.mjs";
+import M from "../icon/comps/x-sm.vue.mjs";
+import P from "../button/CdrButton.vue.mjs";
+const h = "cdr-toast", F = /* @__PURE__ */ b({
+  name: "CdrToast",
+  __name: "CdrToast",
+  props: {
+    /**
+     * Sets the toast type.
+     * @demoSelectMultiple false
+     * @values info, success, warning, error, default
+    */
+    type: {
+      type: String,
+      validator: (r) => I(r, ["info", "warning", "success", "error", "default"]),
+      default: "default"
+    },
+    /**
+     * Used to programmatically control the toast open/close state.
+     * @demoIgnore true
+    */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /** Set to `false` to disable automatic closing after the `dismissDelay`. */
+    autoDismiss: {
+      type: Boolean,
+      default: !0
+    },
+    /** Sets the interval (in milliseconds) before the toast automatically closes. */
+    dismissDelay: {
+      type: Number,
+      default: 5e3
+    }
+  },
+  emits: {
+    /** Emits when toast opens */
+    open: null,
+    /** Emits when toast closes */
+    closed: null
+  },
+  setup(r, {
+    emit: c
+  }) {
+    const o = r, t = N(), B = g()["icon-left"], n = _(!1), v = _(null);
+    let i, a;
+    const D = w(() => o.type && `${h}--${o.type}`), d = (s) => {
+      i ? clearTimeout(i) : c("open", s), n.value = !0, o.autoDismiss && !s && u();
+    }, $ = (s) => {
+      p(), n.value = !1, c("closed", s);
+    }, u = (s) => {
+      i = setTimeout(() => {
+        p(), n.value = !1, c("closed", s);
+      }, o.dismissDelay);
+    }, L = () => {
+      a = v.value, a && (a.addEventListener("mouseover", d), a.addEventListener("mouseleave", u));
+    }, p = () => {
+      a && (a.removeEventListener("mouseover", d), a.removeEventListener("mouseleave", u));
+    };
+    return S(() => o.open, () => {
+      o.open && d();
+    }), V(() => {
+      o.autoDismiss && L();
+    }), (s, W) => (m(), z(H, {
+      "enter-from-class": e(t)["cdr-toast__transition--toast-enter-from"],
+      "enter-active-class": e(t)["cdr-toast__transition--toast-enter-active"],
+      "leave-to-class": e(t)["cdr-toast__transition--toast-leave-to"],
+      "leave-active-class": e(t)["cdr-toast__transition--toast-leave-active"]
+    }, {
+      default: y(() => [n.value ? (m(), C("div", {
+        key: 0,
+        class: l([e(t)[h], e(t)[D.value]]),
+        role: "status",
+        ref_key: "toastEl",
+        ref: v
+      }, [E("div", {
+        class: l([e(t)["cdr-toast__main"]])
+      }, [e(B) ? (m(), C("div", {
+        key: 0,
+        class: l([e(t)["cdr-toast__icon-left"]])
+      }, [f(s.$slots, "icon-left")], 2)) : T("", !0), E("span", {
+        class: l([e(t)["cdr-toast__message"]])
+      }, [f(s.$slots, "default")], 2), k(P, {
+        class: l([e(t)["cdr-toast__close-button"]]),
+        "icon-only": "",
+        onClick: $,
+        "aria-label": "Close",
+        size: "small"
+      }, {
+        default: y(() => [f(s.$slots, "icon", {}, () => [k(M, {
+          "inherit-color": ""
+        })])]),
+        _: 3
+      }, 8, ["class"])], 2)], 2)) : T("", !0)]),
+      _: 3
+    }, 8, ["enter-from-class", "enter-active-class", "leave-to-class", "leave-active-class"]));
+  }
+});
+export {
+  F as default
+};

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

@@ -0,0 +1,62 @@
+const t = {
+  "cdr-button": "cdr-button_14-0-2-alpha-8",
+  "cdr-button--has-icon-left": "cdr-button--has-icon-left_14-0-2-alpha-8",
+  "cdr-button--has-icon-right": "cdr-button--has-icon-right_14-0-2-alpha-8",
+  "cdr-button--primary": "cdr-button--primary_14-0-2-alpha-8",
+  "cdr-button--secondary": "cdr-button--secondary_14-0-2-alpha-8",
+  "cdr-button--dark": "cdr-button--dark_14-0-2-alpha-8",
+  "cdr-button--sale": "cdr-button--sale_14-0-2-alpha-8",
+  "cdr-button--link": "cdr-button--link_14-0-2-alpha-8",
+  "cdr-button--large": "cdr-button--large_14-0-2-alpha-8",
+  "cdr-button--medium": "cdr-button--medium_14-0-2-alpha-8",
+  "cdr-button--small": "cdr-button--small_14-0-2-alpha-8",
+  "cdr-button--icon-only": "cdr-button--icon-only_14-0-2-alpha-8",
+  "cdr-button--icon-only-large": "cdr-button--icon-only-large_14-0-2-alpha-8",
+  "cdr-button--with-background": "cdr-button--with-background_14-0-2-alpha-8",
+  "cdr-button--full-width": "cdr-button--full-width_14-0-2-alpha-8",
+  "cdr-button--small@xs": "cdr-button--small@xs_14-0-2-alpha-8",
+  "cdr-button--medium@xs": "cdr-button--medium@xs_14-0-2-alpha-8",
+  "cdr-button--large@xs": "cdr-button--large@xs_14-0-2-alpha-8",
+  "cdr-button--full-width@xs": "cdr-button--full-width@xs_14-0-2-alpha-8",
+  "cdr-button--small@sm": "cdr-button--small@sm_14-0-2-alpha-8",
+  "cdr-button--medium@sm": "cdr-button--medium@sm_14-0-2-alpha-8",
+  "cdr-button--large@sm": "cdr-button--large@sm_14-0-2-alpha-8",
+  "cdr-button--full-width@sm": "cdr-button--full-width@sm_14-0-2-alpha-8",
+  "cdr-button--small@md": "cdr-button--small@md_14-0-2-alpha-8",
+  "cdr-button--medium@md": "cdr-button--medium@md_14-0-2-alpha-8",
+  "cdr-button--large@md": "cdr-button--large@md_14-0-2-alpha-8",
+  "cdr-button--full-width@md": "cdr-button--full-width@md_14-0-2-alpha-8",
+  "cdr-button--small@lg": "cdr-button--small@lg_14-0-2-alpha-8",
+  "cdr-button--medium@lg": "cdr-button--medium@lg_14-0-2-alpha-8",
+  "cdr-button--large@lg": "cdr-button--large@lg_14-0-2-alpha-8",
+  "cdr-button--full-width@lg": "cdr-button--full-width@lg_14-0-2-alpha-8",
+  "cdr-icon": "cdr-icon_14-0-2-alpha-8",
+  "cdr-icon--small": "cdr-icon--small_14-0-2-alpha-8",
+  "cdr-icon--large": "cdr-icon--large_14-0-2-alpha-8",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_14-0-2-alpha-8",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_14-0-2-alpha-8",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_14-0-2-alpha-8",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_14-0-2-alpha-8",
+  "cdr-icon--small@md": "cdr-icon--small@md_14-0-2-alpha-8",
+  "cdr-icon--large@md": "cdr-icon--large@md_14-0-2-alpha-8",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_14-0-2-alpha-8",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_14-0-2-alpha-8",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_14-0-2-alpha-8",
+  "cdr-toast": "cdr-toast_14-0-2-alpha-8",
+  "cdr-toast__transition--toast-enter-from": "cdr-toast__transition--toast-enter-from_14-0-2-alpha-8",
+  "cdr-toast__transition--toast-enter-active": "cdr-toast__transition--toast-enter-active_14-0-2-alpha-8",
+  "cdr-toast__transition--toast-leave-to": "cdr-toast__transition--toast-leave-to_14-0-2-alpha-8",
+  "cdr-toast__transition--toast-leave-active": "cdr-toast__transition--toast-leave-active_14-0-2-alpha-8",
+  "cdr-toast__main": "cdr-toast__main_14-0-2-alpha-8",
+  "cdr-toast__icon-left": "cdr-toast__icon-left_14-0-2-alpha-8",
+  "cdr-toast__message": "cdr-toast__message_14-0-2-alpha-8",
+  "cdr-toast__close-button": "cdr-toast__close-button_14-0-2-alpha-8",
+  "cdr-toast--default": "cdr-toast--default_14-0-2-alpha-8",
+  "cdr-toast--info": "cdr-toast--info_14-0-2-alpha-8",
+  "cdr-toast--warning": "cdr-toast--warning_14-0-2-alpha-8",
+  "cdr-toast--success": "cdr-toast--success_14-0-2-alpha-8",
+  "cdr-toast--error": "cdr-toast--error_14-0-2-alpha-8"
+};
+export {
+  t as default
+};

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

@@ -0,0 +1,9 @@
+import o from "./CdrToggleButton.vue2.mjs";
+import s from "./styles/CdrToggleButton.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,32 @@
+import { defineComponent as s, useCssModule as u, inject as g, ref as i, computed as d, openBlock as m, createElementBlock as f, normalizeClass as o, unref as a, createElementVNode as p, renderSlot as b, createTextVNode as V, toDisplayString as v } from "vue";
+import { selectedToggleKey as C } from "../../types/symbols.mjs";
+const T = ["value", "aria-label", "aria-checked", "tabindex"], x = /* @__PURE__ */ s({
+  name: "CdrToggleButton",
+  __name: "CdrToggleButton",
+  props: {
+    /**
+     * Sets the value and aria-label for the toggle button. Display can be overridden using default slot
+     */
+    toggleValue: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const r = e, t = u(), n = g(C, i("")), l = d(() => r.toggleValue === n.value);
+    return (c, _) => (m(), f("li", {
+      role: "presentation",
+      class: o(a(t)["cdr-toggle-button__container"])
+    }, [p("button", {
+      role: "radio",
+      class: o(a(t)["cdr-toggle-button__item"]),
+      value: e.toggleValue,
+      "aria-label": e.toggleValue,
+      "aria-checked": l.value ? "true" : "false",
+      tabindex: l.value ? 0 : -1
+    }, [b(c.$slots, "default", {}, () => [V(v(e.toggleValue), 1)])], 10, T)], 2));
+  }
+});
+export {
+  x as default
+};

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

@@ -0,0 +1,9 @@
+import o from "./CdrToggleGroup.vue2.mjs";
+import s from "./styles/CdrToggleGroup.module.scss.mjs";
+import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const t = {
+  $style: s
+}, f = /* @__PURE__ */ r(o, [["__cssModules", t]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,74 @@
+import { defineComponent as C, useCssModule as b, ref as a, provide as h, computed as _, onMounted as V, watch as k, openBlock as T, createElementBlock as z, mergeProps as G, unref as i, withModifiers as c, withKeys as d, renderSlot as K } from "vue";
+import S from "../../utils/mapClasses.mjs";
+import w from "../../utils/propValidator.mjs";
+import { selectedToggleKey as A } from "../../types/symbols.mjs";
+const M = ["onClick", "onKeyup"], O = "cdr-toggle-group", F = /* @__PURE__ */ C({
+  name: "CdrToggleGroup",
+  __name: "CdrToggleGroup",
+  props: {
+    /** @ignore */
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array],
+      required: !0
+    },
+    /**
+     * Sets toggle button size
+     * @demoSelectMultiple false
+     * @values medium, large
+    */
+    size: {
+      type: String,
+      default: "medium",
+      validator: (u) => w(u, ["medium", "large"])
+    }
+  },
+  emits: {
+    /**
+     * Event emitted by v-model
+     * @param modelValue
+     */
+    "update:modelValue": null
+  },
+  setup(u, {
+    emit: g
+  }) {
+    const n = u, p = b(), s = a(null), l = a(n.modelValue);
+    h(A, l);
+    const m = _(() => n.size ? `cdr-toggle-group--${n.size}` : "cdr-toggle-group--medium");
+    let r;
+    V(() => {
+      s.value && (r = Array.from(s.value.querySelectorAll("button")));
+    }), k(() => n.modelValue, (e) => {
+      l.value = e;
+    });
+    const f = (e) => {
+      var o;
+      if (!((o = e.target) != null && o.closest("button")))
+        return;
+      const t = e.target.closest("button");
+      t && (l.value = t.value, g("update:modelValue", t.value), t.focus());
+    }, B = (e) => {
+      const t = e.target, o = r.indexOf(t);
+      if (o === r.length - 1)
+        return;
+      r[o + 1].focus();
+    }, v = (e) => {
+      const t = e.target, o = r.indexOf(t);
+      if (o === 0)
+        return;
+      r[o - 1].focus();
+    };
+    return (e, t) => (T(), z("ul", G({
+      ref_key: "toggleGroup",
+      ref: s,
+      role: "radiogroup"
+    }, e.$attrs, {
+      class: i(S)(i(p), O, m.value),
+      onClick: c(f, ["prevent"]),
+      onKeyup: [d(c(B, ["prevent"]), ["right"]), d(c(v, ["prevent"]), ["left"])]
+    }), [K(e.$slots, "default")], 16, M));
+  }
+});
+export {
+  F 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_14-0-2-alpha-8",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_14-0-2-alpha-8"
+};
+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_14-0-2-alpha-8",
+  "cdr-toggle-group--medium": "cdr-toggle-group--medium_14-0-2-alpha-8",
+  "cdr-toggle-button__item": "cdr-toggle-button__item_14-0-2-alpha-8",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_14-0-2-alpha-8",
+  "cdr-toggle-group--large": "cdr-toggle-group--large_14-0-2-alpha-8"
+};
+export {
+  g as default
+};

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

@@ -0,0 +1,9 @@
+import o from "./CdrTooltip.vue2.mjs";
+import s from "./styles/CdrTooltip.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
+export {
+  f as default
+};