@rei/cedar 13.5.3 → 14.0.0-beta.0

package/dist/src/components/select/CdrSelect.vue2.mjs

@@ -0,0 +1,196 @@
+import "core-js/modules/es.array.push.js";
+import { defineComponent as R, useCssModule as U, useSlots as H, useAttrs as T, computed as o, openBlock as i, createBlock as C, unref as t, createSlots as G, withCtx as n, createElementVNode as S, normalizeClass as p, createElementBlock as f, renderSlot as d, createCommentVNode as y, withDirectives as J, mergeProps as K, toDisplayString as k, Fragment as Q, renderList as W, vModelSelect as X, createVNode as Y } from "vue";
+import Z from "../icon/comps/caret-down.vue.mjs";
+import _ from "../labelStandalone/CdrLabelStandalone.vue.mjs";
+import ee from "../formError/CdrFormError.vue.mjs";
+import re from "../../props/size.mjs";
+import te from "../../props/background.mjs";
+import $ from "../../utils/mapClasses.mjs";
+import le from "../../utils/uid.mjs";
+const oe = ["id", "multiple", "size", "disabled", "aria-required", "aria-invalid", "aria-errormessage", "aria-describedby"], ae = ["value"], z = "cdr-select", be = /* @__PURE__ */ R({
+  name: "CdrSelect",
+  inheritAttrs: !1,
+  customOptions: {},
+  __name: "CdrSelect",
+  props: {
+    /**
+     * Custom ID that is mapped to the label ‘for’ attribute. If this value is not set, it will be auto-generated.
+    */
+    id: {
+      type: String
+    },
+    /**
+     * Sets the text value for the select label.
+     * Required for accessibility compliance. Use ‘hideLabel’ to
+     * visually hide the label but keep it available to screenreaders.
+    */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Visually hides the label element, but leaves it available to screen readers for accessibility compliance.
+     */
+    hideLabel: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Adds an option that is disabled and selected by default to serve as a `placeholder` for the select.
+    */
+    prompt: String,
+    /**
+     * Build options programmatically with data.
+     * Provide an array of objects [{ text: String, value: String}] for greater control
+     * or provide an array of strings ['String'] for simpler setup (value and text will be the same).
+    */
+    options: {
+      type: Array
+    },
+    /**
+     * Sets the background color the radio button is rendered on
+     * @values primary, secondary
+     */
+    background: te,
+    /**
+     * Sets the component's size; values can target responsive breakpoints. Example `small@lg`
+     * @demoSelectMultiple false
+     * @values small, medium, large
+    */
+    size: re,
+    /** Sets the select to an error state, displays the `error` slot if one is present. */
+    error: {
+      type: [Boolean, String],
+      default: !1
+    },
+    /**
+    * Sets the `role` attribute for the embedded error state messaging.
+    */
+    errorRole: {
+      type: String,
+      default: "status"
+    },
+    /** @ignore */
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array, Symbol, Function]
+    },
+    /** Disables the input and sets appropriate styling */
+    disabled: Boolean,
+    /** Sets aria-required on the input field and displays an asterisk next to the select label */
+    required: Boolean,
+    /** Displays '(optional)' text next to the select label. */
+    optional: Boolean,
+    /** Turns CdrSelect into a multi-select element. */
+    multiple: Boolean,
+    /** Sets the height of the CdrSelect when using the multiple option.
+     * This number corresponds to the number of select options that will be visible without scrolling.
+     */
+    multipleSize: Number
+  },
+  emits: {
+    /**
+     * Event emitted by v-model on the radio's <input> element
+     * @param modelValue
+     */
+    "update:modelValue": null
+  },
+  setup(e, {
+    emit: B
+  }) {
+    const r = e, c = U(), u = H(), q = T(), V = u["helper-text"], x = u.info, A = u["info-action"], h = u["pre-icon"], m = r.id ? r.id : le(), I = o(() => r.multiple ? "cdr-select--multiple" : ""), N = o(() => r.modelValue ? "" : "cdr-select__prompt"), E = o(() => h ? "cdr-select--preicon" : ""), L = o(() => r.error ? "cdr-select--error" : ""), O = o(() => `cdr-select--${r.background}`), P = o(() => r.size ? `${z}--${r.size}` : ""), j = o(() => r.disabled ? "cdr-select__caret--disabled" : ""), w = o(() => {
+      const l = [u["helper-text"] ? `${r.id}-helper-text-top` : "", q["aria-describedby"]].filter((a) => a).join(" ");
+      return r.error ? `${r.id}-error` : l;
+    }), D = o(() => {
+      const l = [];
+      return r.options && r.options.forEach((a) => {
+        const s = {
+          text: "",
+          value: ""
+        };
+        let b = "", v = "";
+        if (typeof a == "string")
+          b = a, v = a;
+        else {
+          const {
+            text: F,
+            value: M
+          } = a;
+          b = F, v = M;
+        }
+        s.text = b, s.value = v, l.push(s);
+      }), l;
+    }), g = o({
+      get() {
+        return r.modelValue;
+      },
+      set(l) {
+        B("update:modelValue", l);
+      }
+    });
+    return (l, a) => (i(), C(_, {
+      "for-id": t(m),
+      label: e.label,
+      "hide-label": e.hideLabel,
+      required: e.required,
+      optional: e.optional,
+      disabled: e.disabled
+    }, G({
+      default: n(() => [S("div", {
+        class: p(t(c)["cdr-select-wrap"])
+      }, [t(h) ? (i(), f("span", {
+        key: 0,
+        class: p(t(c)["cdr-select__pre-icon"])
+      }, [d(l.$slots, "pre-icon")], 2)) : y("", !0), J(S("select", K({
+        id: t(m),
+        class: t($)(t(c), z, P.value, N.value, I.value, O.value, L.value, E.value),
+        multiple: e.multiple,
+        size: e.multipleSize,
+        disabled: e.disabled,
+        "aria-required": e.required || void 0,
+        "aria-invalid": !!e.error || void 0,
+        "aria-errormessage": !!e.error && `${t(m)}-error` || void 0
+      }, l.$attrs, {
+        "aria-describedby": w.value || void 0,
+        "onUpdate:modelValue": a[0] || (a[0] = (s) => g.value = s)
+      }), [e.prompt ? (i(), f("option", {
+        key: 0,
+        class: p(t(c)["cdr-select__prompt"]),
+        value: "",
+        disabled: ""
+      }, k(e.prompt), 3)) : y("", !0), (i(!0), f(Q, null, W(D.value, (s) => (i(), f("option", {
+        key: s.text,
+        value: s.value
+      }, k(s.text), 9, ae))), 128)), d(l.$slots, "default")], 16, oe), [[X, g.value]]), Y(Z, {
+        class: p(t($)(t(c), "cdr-select__caret", j.value))
+      }, null, 8, ["class"])], 2)]),
+      _: 2
+    }, [t(V) ? {
+      name: "helper",
+      fn: n(() => [d(l.$slots, "helper-text")]),
+      key: "0"
+    } : void 0, t(x) ? {
+      name: "info",
+      fn: n(() => [d(l.$slots, "info")]),
+      key: "1"
+    } : void 0, t(A) ? {
+      name: "info-action",
+      fn: n(() => [d(l.$slots, "info-action")]),
+      key: "2"
+    } : void 0, e.error ? {
+      name: "error",
+      fn: n(() => [e.error ? (i(), C(ee, {
+        key: 0,
+        error: e.error,
+        role: e.errorRole,
+        id: `${t(m)}-error`
+      }, {
+        error: n(() => [d(l.$slots, "error")]),
+        _: 3
+      }, 8, ["error", "role", "id"])) : y("", !0)]),
+      key: "3"
+    } : void 0]), 1032, ["for-id", "label", "hide-label", "required", "optional", "disabled"]));
+  }
+});
+export {
+  be as default
+};

package/dist/src/components/select/styles/CdrSelect.module.scss.mjs

@@ -1,47 +1,47 @@
-const l = {
-  "cdr-icon": "cdr-icon_13-5-3",
-  "cdr-icon--small": "cdr-icon--small_13-5-3",
-  "cdr-icon--large": "cdr-icon--large_13-5-3",
-  "cdr-icon--small@xs": "cdr-icon--small@xs_13-5-3",
-  "cdr-icon--large@xs": "cdr-icon--large@xs_13-5-3",
-  "cdr-icon--small@sm": "cdr-icon--small@sm_13-5-3",
-  "cdr-icon--large@sm": "cdr-icon--large@sm_13-5-3",
-  "cdr-icon--small@md": "cdr-icon--small@md_13-5-3",
-  "cdr-icon--large@md": "cdr-icon--large@md_13-5-3",
-  "cdr-icon--small@lg": "cdr-icon--small@lg_13-5-3",
-  "cdr-icon--large@lg": "cdr-icon--large@lg_13-5-3",
-  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-5-3",
-  "cdr-label-standalone": "cdr-label-standalone_13-5-3",
-  "cdr-label-standalone__label-wrapper": "cdr-label-standalone__label-wrapper_13-5-3",
-  "cdr-label-standalone__label": "cdr-label-standalone__label_13-5-3",
-  "cdr-label-standalone__label--sr-only": "cdr-label-standalone__label--sr-only_13-5-3",
-  "cdr-label-standalone__label--disabled": "cdr-label-standalone__label--disabled_13-5-3",
-  "cdr-label-standalone__optional": "cdr-label-standalone__optional_13-5-3",
-  "cdr-label-standalone__helper": "cdr-label-standalone__helper_13-5-3",
-  "cdr-label-standalone__info": "cdr-label-standalone__info_13-5-3",
-  "cdr-label-standalone__post-content": "cdr-label-standalone__post-content_13-5-3",
-  "cdr-label-standalone__info-action": "cdr-label-standalone__info-action_13-5-3",
-  "cdr-label-standalone__input-wrap": "cdr-label-standalone__input-wrap_13-5-3",
-  "cdr-label-standalone__input-spacing": "cdr-label-standalone__input-spacing_13-5-3",
-  "cdr-form-error": "cdr-form-error_13-5-3",
-  "cdr-form-error__icon": "cdr-form-error__icon_13-5-3",
-  "cdr-select": "cdr-select_13-5-3",
-  "cdr-select--primary": "cdr-select--primary_13-5-3",
-  "cdr-select--secondary": "cdr-select--secondary_13-5-3",
-  "cdr-select--error": "cdr-select--error_13-5-3",
-  "cdr-select--preicon": "cdr-select--preicon_13-5-3",
-  "cdr-select__prompt": "cdr-select__prompt_13-5-3",
-  "cdr-select__caret": "cdr-select__caret_13-5-3",
-  "cdr-select__caret--disabled": "cdr-select__caret--disabled_13-5-3",
-  "cdr-select__pre-icon": "cdr-select__pre-icon_13-5-3",
-  "cdr-select--multiple": "cdr-select--multiple_13-5-3",
-  "cdr-select--large@xs": "cdr-select--large@xs_13-5-3",
-  "cdr-select--large": "cdr-select--large_13-5-3",
-  "cdr-select--large@sm": "cdr-select--large@sm_13-5-3",
-  "cdr-select--large@md": "cdr-select--large@md_13-5-3",
-  "cdr-select--large@lg": "cdr-select--large@lg_13-5-3",
-  "cdr-select-wrap": "cdr-select-wrap_13-5-3"
+const e = {
+  "cdr-icon": "cdr-icon_14-0-0-beta-0",
+  "cdr-icon--small": "cdr-icon--small_14-0-0-beta-0",
+  "cdr-icon--large": "cdr-icon--large_14-0-0-beta-0",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_14-0-0-beta-0",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_14-0-0-beta-0",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_14-0-0-beta-0",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_14-0-0-beta-0",
+  "cdr-icon--small@md": "cdr-icon--small@md_14-0-0-beta-0",
+  "cdr-icon--large@md": "cdr-icon--large@md_14-0-0-beta-0",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_14-0-0-beta-0",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_14-0-0-beta-0",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_14-0-0-beta-0",
+  "cdr-label-standalone": "cdr-label-standalone_14-0-0-beta-0",
+  "cdr-label-standalone__label-wrapper": "cdr-label-standalone__label-wrapper_14-0-0-beta-0",
+  "cdr-label-standalone__label": "cdr-label-standalone__label_14-0-0-beta-0",
+  "cdr-label-standalone__label--sr-only": "cdr-label-standalone__label--sr-only_14-0-0-beta-0",
+  "cdr-label-standalone__label--disabled": "cdr-label-standalone__label--disabled_14-0-0-beta-0",
+  "cdr-label-standalone__optional": "cdr-label-standalone__optional_14-0-0-beta-0",
+  "cdr-label-standalone__helper": "cdr-label-standalone__helper_14-0-0-beta-0",
+  "cdr-label-standalone__info": "cdr-label-standalone__info_14-0-0-beta-0",
+  "cdr-label-standalone__post-content": "cdr-label-standalone__post-content_14-0-0-beta-0",
+  "cdr-label-standalone__info-action": "cdr-label-standalone__info-action_14-0-0-beta-0",
+  "cdr-label-standalone__input-wrap": "cdr-label-standalone__input-wrap_14-0-0-beta-0",
+  "cdr-label-standalone__input-spacing": "cdr-label-standalone__input-spacing_14-0-0-beta-0",
+  "cdr-form-error": "cdr-form-error_14-0-0-beta-0",
+  "cdr-form-error__icon": "cdr-form-error__icon_14-0-0-beta-0",
+  "cdr-select": "cdr-select_14-0-0-beta-0",
+  "cdr-select--primary": "cdr-select--primary_14-0-0-beta-0",
+  "cdr-select--secondary": "cdr-select--secondary_14-0-0-beta-0",
+  "cdr-select--error": "cdr-select--error_14-0-0-beta-0",
+  "cdr-select--preicon": "cdr-select--preicon_14-0-0-beta-0",
+  "cdr-select__prompt": "cdr-select__prompt_14-0-0-beta-0",
+  "cdr-select__caret": "cdr-select__caret_14-0-0-beta-0",
+  "cdr-select__caret--disabled": "cdr-select__caret--disabled_14-0-0-beta-0",
+  "cdr-select__pre-icon": "cdr-select__pre-icon_14-0-0-beta-0",
+  "cdr-select--multiple": "cdr-select--multiple_14-0-0-beta-0",
+  "cdr-select--large@xs": "cdr-select--large@xs_14-0-0-beta-0",
+  "cdr-select--large": "cdr-select--large_14-0-0-beta-0",
+  "cdr-select--large@sm": "cdr-select--large@sm_14-0-0-beta-0",
+  "cdr-select--large@md": "cdr-select--large@md_14-0-0-beta-0",
+  "cdr-select--large@lg": "cdr-select--large@lg_14-0-0-beta-0",
+  "cdr-select-wrap": "cdr-select-wrap_14-0-0-beta-0"
 };
 export {
-  l as default
+  e as default
 };

package/dist/src/components/skeleton/CdrSkeleton.vue.mjs

@@ -1,38 +1,9 @@
-import { defineComponent as t, toRef as n, provide as r, useCssModule as l, openBlock as a, createElementBlock as i, normalizeClass as p, renderSlot as c } from "vue";
-import d from "./styles/CdrSkeleton.module.scss.mjs";
-import m from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const u = t({
-  name: "CdrSkeleton",
-  props: {
-    /**
-     * Toggle animation on/off.
-     * When `true`, animated gradient will be used while loading.
-     * When `false` a static background color will be used.
-     * Automatically disabled if `prefers-reduced-motion` is set by user.
-     */
-    motion: {
-      type: Boolean,
-      default: !0
-    }
-  },
-  setup(e) {
-    const o = "cdr-skeleton", s = n(e, "motion");
-    return r("motionToggle", s), {
-      baseClass: o,
-      style: l()
-    };
-  }
-});
-function f(e, o, s, _, y, $) {
-  return a(), i("div", {
-    class: p(e.style[e.baseClass]),
-    "aria-live": "polite",
-    "aria-busy": "true"
-  }, [c(e.$slots, "default")], 2);
-}
-const C = {
-  $style: d
-}, g = /* @__PURE__ */ m(u, [["render", f], ["__cssModules", C]]);
+import o from "./CdrSkeleton.vue2.mjs";
+import s from "./styles/CdrSkeleton.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const e = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", e]]);
 export {
-  g as default
+  f as default
 };

package/dist/src/components/skeleton/CdrSkeleton.vue2.mjs

@@ -0,0 +1,29 @@
+import { defineComponent as r, useCssModule as l, toRef as a, provide as i, openBlock as m, createElementBlock as c, normalizeClass as p, unref as u, renderSlot as d } from "vue";
+import { motionKey as f } from "./symbols.mjs";
+const C = "cdr-skeleton", S = /* @__PURE__ */ r({
+  name: "CdrSkeleton",
+  __name: "CdrSkeleton",
+  props: {
+    /**
+       * Toggle animation on/off.
+       * When `true`, animated gradient will be used while loading.
+       * When `false` a static background color will be used.
+       * Automatically disabled if `prefers-reduced-motion` is set by user.
+    */
+    motion: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e) {
+    const o = e, t = l(), n = a(o, "motion");
+    return i(f, n), (s, k) => (m(), c("div", {
+      class: p(u(t)[C]),
+      "aria-live": "polite",
+      "aria-busy": "true"
+    }, [d(s.$slots, "default")], 2));
+  }
+});
+export {
+  S as default
+};

package/dist/src/components/skeleton/CdrSkeletonBone.vue.mjs

@@ -1,43 +1,9 @@
-import { defineComponent as a, inject as r, computed as n, useCssModule as p, openBlock as m, createElementBlock as i, normalizeClass as d } from "vue";
-import c from "../../utils/propValidator.mjs";
-import u from "../../utils/mapClasses.mjs";
-import f from "./styles/CdrSkeletonBone.module.scss.mjs";
-import C from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const y = a({
-  name: "CdrSkeletonBone",
-  props: {
-    /**
-     * Sets the type of content placeholder
-     * @demoSelectMultiple false
-     * @values default, heading, line, rectangle, square
-    */
-    type: {
-      type: String,
-      required: !1,
-      default: "default",
-      validator: (e) => c(e, ["default", "heading", "line", "rectangle", "square"])
-    }
-  },
-  setup(e) {
-    const s = "cdr-skeleton-bone", o = r("motionToggle"), t = n(() => `${s}--${e.type}`), l = n(() => o.value ? `${s}__shimmer` : null);
-    return {
-      style: p(),
-      baseClass: s,
-      typeClass: t,
-      motionToggle: o,
-      motionClass: l,
-      mapClasses: u
-    };
-  }
-});
-function $(e, s, o, t, l, _) {
-  return m(), i("div", {
-    class: d(e.mapClasses(e.style, e.baseClass, e.typeClass, e.motionClass))
-  }, null, 2);
-}
-const g = {
-  $style: f
-}, M = /* @__PURE__ */ C(y, [["render", $], ["__cssModules", g]]);
+import o from "./CdrSkeletonBone.vue2.mjs";
+import s from "./styles/CdrSkeletonBone.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const e = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", e]]);
 export {
-  M as default
+  f as default
 };

package/dist/src/components/skeleton/CdrSkeletonBone.vue2.mjs

@@ -0,0 +1,29 @@
+import { defineComponent as c, useCssModule as p, computed as t, inject as i, ref as u, openBlock as d, createElementBlock as f, normalizeClass as C, unref as n } from "vue";
+import _ from "../../utils/propValidator.mjs";
+import v from "../../utils/mapClasses.mjs";
+import { motionKey as y } from "./symbols.mjs";
+const o = "cdr-skeleton-bone", b = /* @__PURE__ */ c({
+  name: "CdrSkeletonBone",
+  __name: "CdrSkeletonBone",
+  props: {
+    /**
+     * Sets the type of content placeholder
+     * @demoSelectMultiple false
+     * @values default, heading, line, rectangle, square
+    */
+    type: {
+      type: String,
+      default: "default",
+      validator: (e) => _(e, ["default", "heading", "line", "rectangle", "square"])
+    }
+  },
+  setup(e) {
+    const s = e, a = p(), l = t(() => `${o}--${s.type}`), r = i(y, u(!0)), m = t(() => r.value ? `${o}__shimmer` : "");
+    return (g, k) => (d(), f("div", {
+      class: C(n(v)(n(a), o, l.value, m.value))
+    }, null, 2));
+  }
+});
+export {
+  b as default
+};

package/dist/src/components/skeleton/styles/CdrSkeleton.module.scss.mjs

@@ -1,5 +1,5 @@
 const e = {
-  "cdr-skeleton": "cdr-skeleton_13-5-3"
+  "cdr-skeleton": "cdr-skeleton_14-0-0-beta-0"
 };
 export {
   e as default

package/dist/src/components/skeleton/styles/CdrSkeletonBone.module.scss.mjs

@@ -1,11 +1,11 @@
-const e = "shimmer_13-5-3", n = {
-  "cdr-skeleton-bone": "cdr-skeleton-bone_13-5-3",
-  "cdr-skeleton-bone__shimmer": "cdr-skeleton-bone__shimmer_13-5-3",
+const e = "shimmer_14-0-0-beta-0", n = {
+  "cdr-skeleton-bone": "cdr-skeleton-bone_14-0-0-beta-0",
+  "cdr-skeleton-bone__shimmer": "cdr-skeleton-bone__shimmer_14-0-0-beta-0",
   shimmer: e,
-  "cdr-skeleton-bone--line": "cdr-skeleton-bone--line_13-5-3",
-  "cdr-skeleton-bone--heading": "cdr-skeleton-bone--heading_13-5-3",
-  "cdr-skeleton-bone--rectangle": "cdr-skeleton-bone--rectangle_13-5-3",
-  "cdr-skeleton-bone--square": "cdr-skeleton-bone--square_13-5-3"
+  "cdr-skeleton-bone--line": "cdr-skeleton-bone--line_14-0-0-beta-0",
+  "cdr-skeleton-bone--heading": "cdr-skeleton-bone--heading_14-0-0-beta-0",
+  "cdr-skeleton-bone--rectangle": "cdr-skeleton-bone--rectangle_14-0-0-beta-0",
+  "cdr-skeleton-bone--square": "cdr-skeleton-bone--square_14-0-0-beta-0"
 };
 export {
   n as default,

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

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

package/dist/src/components/switch/CdrSwitch.vue.mjs

@@ -1,96 +1,9 @@
-import { defineComponent as h, useCssModule as p, computed as m, resolveComponent as u, openBlock as C, createElementBlock as y, normalizeClass as s, createElementVNode as n, renderSlot as _, createVNode as f } from "vue";
-import b from "../../utils/propValidator.mjs";
-import { buildBooleanClass as w } from "../../utils/buildClass.mjs";
-import k from "../icon/comps/check-sm.vue.mjs";
-import $ from "../icon/comps/x-sm.vue.mjs";
-import v from "../../utils/mapClasses.mjs";
-import S from "../../utils/uid.mjs";
-import V from "./styles/CdrSwitch.module.scss.mjs";
-import z from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const B = h({
-  name: "CdrSwitch",
-  components: {
-    IconCheckSm: k,
-    IconXSm: $
-  },
-  props: {
-    /**
-     * Sets a custom ID for the switch. If this value is not set, it will be auto-generated.
-    */
-    id: {
-      type: String
-    },
-    /**
-     * Sets the size of the switch
-     * @demoSelectMultiple false
-     * @values medium, large
-    */
-    size: {
-      type: String,
-      default: "medium",
-      validator: (e) => b(e, ["medium", "large"])
-    },
-    /**
-     * Sets the label and switch to expand to the full width of its container with `space-between`
-     */
-    fullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * @demoIgnore true
-    */
-    modelValue: {
-      type: Boolean,
-      required: !0
-    }
-  },
-  emits: {
-    /**
-     * Event emitted by v-model on switch
-     * @param modelValue
-     */
-    "update:modelValue": null
-  },
-  setup(e, l) {
-    const d = p(), a = e.id ? e.id : S(), c = (r) => {
-      l.emit("update:modelValue", !r);
-    }, o = "cdr-switch", t = m(() => e.size ? `cdr-switch--${e.size}` : "cdr-switch--medium"), i = m(() => e.fullWidth && w(o, e.fullWidth, "full-width"));
-    return {
-      style: d,
-      mapClasses: v,
-      uniqueId: a,
-      onClick: c,
-      baseClass: o,
-      sizeClass: t,
-      fullWidthClass: i
-    };
-  }
-}), I = ["id"], W = ["aria-checked", "aria-labelledby"];
-function g(e, l, d, a, c, o) {
-  const t = u("icon-check-sm"), i = u("icon-x-sm");
-  return C(), y("div", {
-    class: s(e.mapClasses(e.style, e.baseClass, e.fullWidthClass, e.sizeClass))
-  }, [n("div", {
-    id: e.uniqueId,
-    class: s(e.style["cdr-switch__label"])
-  }, [_(e.$slots, "default")], 10, I), n("button", {
-    onClick: l[0] || (l[0] = (r) => e.onClick(e.modelValue)),
-    class: s(e.style["cdr-switch__button"]),
-    role: "switch",
-    "aria-checked": e.modelValue,
-    "aria-labelledby": e.uniqueId
-  }, [f(t, {
-    class: s(e.style["cdr-switch__button-icon"])
-  }, null, 8, ["class"]), f(i, {
-    class: s(e.style["cdr-switch__button-icon"])
-  }, null, 8, ["class"]), n("div", {
-    class: s(e.style["cdr-switch__handle"])
-  }, null, 2)], 10, W)], 2);
-}
-const q = {
-  $style: V
-}, F = /* @__PURE__ */ z(B, [["render", g], ["__cssModules", q]]);
+import s from "./CdrSwitch.vue2.mjs";
+import o from "./styles/CdrSwitch.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
+  f as default
 };

package/dist/src/components/switch/CdrSwitch.vue2.mjs

@@ -0,0 +1,78 @@
+import { defineComponent as _, useCssModule as w, computed as r, openBlock as C, createElementBlock as b, normalizeClass as s, unref as e, createElementVNode as a, renderSlot as v, createVNode as n } from "vue";
+import y from "../../utils/propValidator.mjs";
+import { buildBooleanClass as V } from "../../utils/buildClass.mjs";
+import k from "../icon/comps/check-sm.vue.mjs";
+import z from "../icon/comps/x-sm.vue.mjs";
+import B from "../../utils/mapClasses.mjs";
+import S from "../../utils/uid.mjs";
+const $ = ["id"], g = ["aria-checked", "aria-labelledby"], u = "cdr-switch", U = /* @__PURE__ */ _({
+  name: "CdrSwitch",
+  __name: "CdrSwitch",
+  props: {
+    /**
+     * Sets a custom ID for the switch. If this value is not set, it will be auto-generated.
+    */
+    id: {
+      type: String
+    },
+    /**
+     * Sets the size of the switch
+     * @demoSelectMultiple false
+     * @values medium, large
+    */
+    size: {
+      type: String,
+      default: "medium",
+      validator: (i) => y(i, ["medium", "large"])
+    },
+    /**
+     * Sets the label and switch to expand to the full width of its container with `space-between`
+     */
+    fullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @demoIgnore true
+    */
+    modelValue: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: {
+    /**
+     * Event emitted by v-model on switch
+     * @param modelValue
+     */
+    "update:modelValue": null
+  },
+  setup(i, {
+    emit: m
+  }) {
+    const l = i, t = w(), d = l.id ? l.id : S(), f = (o) => {
+      m("update:modelValue", !o);
+    }, h = r(() => l.size ? `cdr-switch--${l.size}` : "cdr-switch--medium"), p = r(() => l.fullWidth ? V(u, l.fullWidth, "full-width") : "");
+    return (o, c) => (C(), b("div", {
+      class: s(e(B)(e(t), u, p.value, h.value))
+    }, [a("div", {
+      id: e(d),
+      class: s(e(t)["cdr-switch__label"])
+    }, [v(o.$slots, "default")], 10, $), a("button", {
+      onClick: c[0] || (c[0] = (W) => f(i.modelValue)),
+      class: s(e(t)["cdr-switch__button"]),
+      role: "switch",
+      "aria-checked": i.modelValue,
+      "aria-labelledby": e(d)
+    }, [n(k, {
+      class: s(e(t)["cdr-switch__button-icon"])
+    }, null, 8, ["class"]), n(z, {
+      class: s(e(t)["cdr-switch__button-icon"])
+    }, null, 8, ["class"]), a("div", {
+      class: s(e(t)["cdr-switch__handle"])
+    }, null, 2)], 10, g)], 2));
+  }
+});
+export {
+  U as default
+};