@rei/cedar 13.5.2 → 14.0.0-ts.0

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

@@ -1,126 +1,9 @@
-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: {
-    /**
-     * Sets the toast type.
-     * @demoSelectMultiple false
-     * @values info, success, warning, error, default
-    */
-    type: {
-      type: String,
-      validator: (e) => S(e, ["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(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]]);
+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 {
-  K as default
+  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

@@ -1,61 +1,61 @@
 const t = {
-  "cdr-button": "cdr-button_13-5-2",
-  "cdr-button--has-icon-left": "cdr-button--has-icon-left_13-5-2",
-  "cdr-button--has-icon-right": "cdr-button--has-icon-right_13-5-2",
-  "cdr-button--primary": "cdr-button--primary_13-5-2",
-  "cdr-button--secondary": "cdr-button--secondary_13-5-2",
-  "cdr-button--dark": "cdr-button--dark_13-5-2",
-  "cdr-button--sale": "cdr-button--sale_13-5-2",
-  "cdr-button--link": "cdr-button--link_13-5-2",
-  "cdr-button--large": "cdr-button--large_13-5-2",
-  "cdr-button--medium": "cdr-button--medium_13-5-2",
-  "cdr-button--small": "cdr-button--small_13-5-2",
-  "cdr-button--icon-only": "cdr-button--icon-only_13-5-2",
-  "cdr-button--icon-only-large": "cdr-button--icon-only-large_13-5-2",
-  "cdr-button--with-background": "cdr-button--with-background_13-5-2",
-  "cdr-button--full-width": "cdr-button--full-width_13-5-2",
-  "cdr-button--small@xs": "cdr-button--small@xs_13-5-2",
-  "cdr-button--medium@xs": "cdr-button--medium@xs_13-5-2",
-  "cdr-button--large@xs": "cdr-button--large@xs_13-5-2",
-  "cdr-button--full-width@xs": "cdr-button--full-width@xs_13-5-2",
-  "cdr-button--small@sm": "cdr-button--small@sm_13-5-2",
-  "cdr-button--medium@sm": "cdr-button--medium@sm_13-5-2",
-  "cdr-button--large@sm": "cdr-button--large@sm_13-5-2",
-  "cdr-button--full-width@sm": "cdr-button--full-width@sm_13-5-2",
-  "cdr-button--small@md": "cdr-button--small@md_13-5-2",
-  "cdr-button--medium@md": "cdr-button--medium@md_13-5-2",
-  "cdr-button--large@md": "cdr-button--large@md_13-5-2",
-  "cdr-button--full-width@md": "cdr-button--full-width@md_13-5-2",
-  "cdr-button--small@lg": "cdr-button--small@lg_13-5-2",
-  "cdr-button--medium@lg": "cdr-button--medium@lg_13-5-2",
-  "cdr-button--large@lg": "cdr-button--large@lg_13-5-2",
-  "cdr-button--full-width@lg": "cdr-button--full-width@lg_13-5-2",
-  "cdr-icon": "cdr-icon_13-5-2",
-  "cdr-icon--small": "cdr-icon--small_13-5-2",
-  "cdr-icon--large": "cdr-icon--large_13-5-2",
-  "cdr-icon--small@xs": "cdr-icon--small@xs_13-5-2",
-  "cdr-icon--large@xs": "cdr-icon--large@xs_13-5-2",
-  "cdr-icon--small@sm": "cdr-icon--small@sm_13-5-2",
-  "cdr-icon--large@sm": "cdr-icon--large@sm_13-5-2",
-  "cdr-icon--small@md": "cdr-icon--small@md_13-5-2",
-  "cdr-icon--large@md": "cdr-icon--large@md_13-5-2",
-  "cdr-icon--small@lg": "cdr-icon--small@lg_13-5-2",
-  "cdr-icon--large@lg": "cdr-icon--large@lg_13-5-2",
-  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-5-2",
-  "cdr-toast": "cdr-toast_13-5-2",
-  "cdr-toast__transition--toast-enter-from": "cdr-toast__transition--toast-enter-from_13-5-2",
-  "cdr-toast__transition--toast-enter-active": "cdr-toast__transition--toast-enter-active_13-5-2",
-  "cdr-toast__transition--toast-leave-to": "cdr-toast__transition--toast-leave-to_13-5-2",
-  "cdr-toast__transition--toast-leave-active": "cdr-toast__transition--toast-leave-active_13-5-2",
-  "cdr-toast__main": "cdr-toast__main_13-5-2",
-  "cdr-toast__icon-left": "cdr-toast__icon-left_13-5-2",
-  "cdr-toast__message": "cdr-toast__message_13-5-2",
-  "cdr-toast__close-button": "cdr-toast__close-button_13-5-2",
-  "cdr-toast--default": "cdr-toast--default_13-5-2",
-  "cdr-toast--info": "cdr-toast--info_13-5-2",
-  "cdr-toast--warning": "cdr-toast--warning_13-5-2",
-  "cdr-toast--success": "cdr-toast--success_13-5-2",
-  "cdr-toast--error": "cdr-toast--error_13-5-2"
+  "cdr-button": "cdr-button_14-0-0-ts-0",
+  "cdr-button--has-icon-left": "cdr-button--has-icon-left_14-0-0-ts-0",
+  "cdr-button--has-icon-right": "cdr-button--has-icon-right_14-0-0-ts-0",
+  "cdr-button--primary": "cdr-button--primary_14-0-0-ts-0",
+  "cdr-button--secondary": "cdr-button--secondary_14-0-0-ts-0",
+  "cdr-button--dark": "cdr-button--dark_14-0-0-ts-0",
+  "cdr-button--sale": "cdr-button--sale_14-0-0-ts-0",
+  "cdr-button--link": "cdr-button--link_14-0-0-ts-0",
+  "cdr-button--large": "cdr-button--large_14-0-0-ts-0",
+  "cdr-button--medium": "cdr-button--medium_14-0-0-ts-0",
+  "cdr-button--small": "cdr-button--small_14-0-0-ts-0",
+  "cdr-button--icon-only": "cdr-button--icon-only_14-0-0-ts-0",
+  "cdr-button--icon-only-large": "cdr-button--icon-only-large_14-0-0-ts-0",
+  "cdr-button--with-background": "cdr-button--with-background_14-0-0-ts-0",
+  "cdr-button--full-width": "cdr-button--full-width_14-0-0-ts-0",
+  "cdr-button--small@xs": "cdr-button--small@xs_14-0-0-ts-0",
+  "cdr-button--medium@xs": "cdr-button--medium@xs_14-0-0-ts-0",
+  "cdr-button--large@xs": "cdr-button--large@xs_14-0-0-ts-0",
+  "cdr-button--full-width@xs": "cdr-button--full-width@xs_14-0-0-ts-0",
+  "cdr-button--small@sm": "cdr-button--small@sm_14-0-0-ts-0",
+  "cdr-button--medium@sm": "cdr-button--medium@sm_14-0-0-ts-0",
+  "cdr-button--large@sm": "cdr-button--large@sm_14-0-0-ts-0",
+  "cdr-button--full-width@sm": "cdr-button--full-width@sm_14-0-0-ts-0",
+  "cdr-button--small@md": "cdr-button--small@md_14-0-0-ts-0",
+  "cdr-button--medium@md": "cdr-button--medium@md_14-0-0-ts-0",
+  "cdr-button--large@md": "cdr-button--large@md_14-0-0-ts-0",
+  "cdr-button--full-width@md": "cdr-button--full-width@md_14-0-0-ts-0",
+  "cdr-button--small@lg": "cdr-button--small@lg_14-0-0-ts-0",
+  "cdr-button--medium@lg": "cdr-button--medium@lg_14-0-0-ts-0",
+  "cdr-button--large@lg": "cdr-button--large@lg_14-0-0-ts-0",
+  "cdr-button--full-width@lg": "cdr-button--full-width@lg_14-0-0-ts-0",
+  "cdr-icon": "cdr-icon_14-0-0-ts-0",
+  "cdr-icon--small": "cdr-icon--small_14-0-0-ts-0",
+  "cdr-icon--large": "cdr-icon--large_14-0-0-ts-0",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_14-0-0-ts-0",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_14-0-0-ts-0",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_14-0-0-ts-0",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_14-0-0-ts-0",
+  "cdr-icon--small@md": "cdr-icon--small@md_14-0-0-ts-0",
+  "cdr-icon--large@md": "cdr-icon--large@md_14-0-0-ts-0",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_14-0-0-ts-0",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_14-0-0-ts-0",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_14-0-0-ts-0",
+  "cdr-toast": "cdr-toast_14-0-0-ts-0",
+  "cdr-toast__transition--toast-enter-from": "cdr-toast__transition--toast-enter-from_14-0-0-ts-0",
+  "cdr-toast__transition--toast-enter-active": "cdr-toast__transition--toast-enter-active_14-0-0-ts-0",
+  "cdr-toast__transition--toast-leave-to": "cdr-toast__transition--toast-leave-to_14-0-0-ts-0",
+  "cdr-toast__transition--toast-leave-active": "cdr-toast__transition--toast-leave-active_14-0-0-ts-0",
+  "cdr-toast__main": "cdr-toast__main_14-0-0-ts-0",
+  "cdr-toast__icon-left": "cdr-toast__icon-left_14-0-0-ts-0",
+  "cdr-toast__message": "cdr-toast__message_14-0-0-ts-0",
+  "cdr-toast__close-button": "cdr-toast__close-button_14-0-0-ts-0",
+  "cdr-toast--default": "cdr-toast--default_14-0-0-ts-0",
+  "cdr-toast--info": "cdr-toast--info_14-0-0-ts-0",
+  "cdr-toast--warning": "cdr-toast--warning_14-0-0-ts-0",
+  "cdr-toast--success": "cdr-toast--success_14-0-0-ts-0",
+  "cdr-toast--error": "cdr-toast--error_14-0-0-ts-0"
 };
 export {
   t as default

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

@@ -1,41 +1,9 @@
-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: {
-    /**
-     * 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 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]]);
+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 {
-  B as default
+  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 "./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

@@ -1,87 +1,9 @@
-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: {
-    /** @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: (e) => k(e, ["medium", "large"])
-    }
-  },
-  emits: {
-    /**
-     * Event emitted by v-model
-     * @param modelValue
-     */
-    "update:modelValue": null
-  },
-  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]]);
+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 {
-  j as default
+  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 "./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

@@ -1,6 +1,6 @@
 const t = {
-  "cdr-toggle-button__item": "cdr-toggle-button__item_13-5-2",
-  "cdr-toggle-button__container": "cdr-toggle-button__container_13-5-2"
+  "cdr-toggle-button__item": "cdr-toggle-button__item_14-0-0-ts-0",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_14-0-0-ts-0"
 };
 export {
   t as default

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

@@ -1,10 +1,10 @@
-const g = {
-  "cdr-toggle-group": "cdr-toggle-group_13-5-2",
-  "cdr-toggle-group--medium": "cdr-toggle-group--medium_13-5-2",
-  "cdr-toggle-button__item": "cdr-toggle-button__item_13-5-2",
-  "cdr-toggle-button__container": "cdr-toggle-button__container_13-5-2",
-  "cdr-toggle-group--large": "cdr-toggle-group--large_13-5-2"
+const t = {
+  "cdr-toggle-group": "cdr-toggle-group_14-0-0-ts-0",
+  "cdr-toggle-group--medium": "cdr-toggle-group--medium_14-0-0-ts-0",
+  "cdr-toggle-button__item": "cdr-toggle-button__item_14-0-0-ts-0",
+  "cdr-toggle-button__container": "cdr-toggle-button__container_14-0-0-ts-0",
+  "cdr-toggle-group--large": "cdr-toggle-group--large_14-0-0-ts-0"
 };
 export {
-  g as default
+  t as default
 };

package/dist/src/components/toggleButton/symbols.mjs

@@ -0,0 +1,4 @@
+const e = Symbol();
+export {
+  e as selectedToggleKey
+};