energy-components 1.14.2 → 1.15.1

package/README.md

@@ -9,7 +9,7 @@ which is also available for use.
 ## Installation
 
 You need Vue.js version 3.2+ to use this library.
-It's also necessary to install energy-foundations >= [0.0.10 or the latest](https://www.npmjs.com/package/energy-foundations?activeTab=versions).
+It's also necessary to install energy-foundations on its [latest version](https://www.npmjs.com/package/energy-foundations?activeTab=versions).
 
 **Yarn**
 

package/dist/components/accordion.es.js

@@ -1,8 +1,8 @@
-import { defineComponent as R, toRefs as B, ref as l, watch as D, nextTick as N, inject as v, onMounted as V, onBeforeUnmount as q, createElementBlock as w, openBlock as _, createElementVNode as n, toDisplayString as h, createBlock as H, createCommentVNode as P, createVNode as T, unref as d, mergeProps as j, normalizeClass as y, renderSlot as A, createTextVNode as E } from "vue";
-import { R as I } from "./icon-svg-DuzOdbk1.js";
+import { defineComponent as R, toRefs as B, ref as s, watch as D, nextTick as N, inject as v, onMounted as V, onBeforeUnmount as q, createElementBlock as w, openBlock as _, createElementVNode as n, toDisplayString as h, createBlock as H, createCommentVNode as P, createVNode as T, unref as d, mergeProps as j, normalizeClass as y, renderSlot as A, createTextVNode as E } from "vue";
+import { R as I } from "./icon-svg-BGa9K9qG.js";
 import O from "./tag.es.js";
 import { _ as $ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/accordion.css';const b = { class: "rds-e-accordion" }, z = { class: "rds-e-accordion-title" }, M = { class: "rds-e-accordion-title_right" }, U = /* @__PURE__ */ R({
+import './style/accordion.css';const b = ["id"], z = { class: "rds-e-accordion-title" }, M = { class: "rds-e-accordion-title_right" }, U = /* @__PURE__ */ R({
   __name: "accordion",
   props: {
     /**
@@ -43,22 +43,22 @@ import './style/accordion.css';const b = { class: "rds-e-accordion" }, z = { cla
     }
   },
   emits: ["update:open"],
-  setup(c, { expose: C, emit: S }) {
-    const o = c, k = S, { tag: a } = B(o), t = l(o.open), i = l(null), s = l(null), x = () => {
-      if (!i.value || !s.value) return;
-      const e = s.value.scrollHeight;
-      i.value.style.maxHeight = t.value ? `${e}px` : "0px";
-    }, r = (e) => {
+  setup(r, { expose: C, emit: S }) {
+    const o = r, k = S, { tag: c } = B(o), t = s(o.open), a = s(null), l = s(null), x = () => {
+      if (!a.value || !l.value) return;
+      const e = l.value.scrollHeight;
+      a.value.style.maxHeight = t.value ? `${e}px` : "0px";
+    }, i = (e) => {
       e === void 0 ? t.value = !t.value : t.value = e, k("update:open", t.value), x();
-    }, p = () => {
-      r(!0);
     }, u = () => {
-      r(!1);
+      i(!0);
+    }, p = () => {
+      i(!1);
     };
     D(
       () => o.open,
       (e) => N(() => {
-        r(e);
+        i(e);
       }),
       { immediate: !0 }
     );
@@ -66,8 +66,8 @@ import './style/accordion.css';const b = { class: "rds-e-accordion" }, z = { cla
     return V(() => {
       m && m({
         id: o.id,
-        open: p,
-        close: u
+        open: u,
+        close: p
       });
     }), q(() => {
       f && f(o.id);
@@ -75,22 +75,25 @@ import './style/accordion.css';const b = { class: "rds-e-accordion" }, z = { cla
       /**
        * Abre el panel.
        */
-      openPanel: p,
+      openPanel: u,
       /**
        * Cierra el panel.
        */
-      closePanel: u
-    }), (e, g) => (_(), w("div", b, [
+      closePanel: p
+    }), (e, g) => (_(), w("div", {
+      id: r.id,
+      class: "rds-e-accordion"
+    }, [
       n("div", {
         class: "rds-e-accordion-title_container",
-        onClick: g[0] || (g[0] = () => r())
+        onClick: g[0] || (g[0] = () => i())
       }, [
-        n("span", z, h(c.title), 1),
+        n("span", z, h(r.title), 1),
         n("div", M, [
-          d(a) && d(a).icon ? (_(), H(O, j({
+          d(c) && d(c).icon ? (_(), H(O, j({
             key: 0,
             class: "rds-e-accordion-title_tag"
-          }, d(a), { small: "" }), null, 16)) : P("", !0),
+          }, d(c), { small: "" }), null, 16)) : P("", !0),
           T(I, {
             class: y(["rds-e-accordion-title_icon", { "rds-e-accordion-title_icon--open": t.value }]),
             name: "arrow_down"
@@ -99,22 +102,22 @@ import './style/accordion.css';const b = { class: "rds-e-accordion" }, z = { cla
       ]),
       n("div", {
         ref_key: "panel",
-        ref: i,
+        ref: a,
         class: y(["rds-e-accordion-panel", { "rds-e-accordion-panel--open": t.value }])
       }, [
         n("div", {
           ref_key: "panelContent",
-          ref: s,
+          ref: l,
           class: "rds-e-accordion-panel_content"
         }, [
           A(e.$slots, "default", {}, () => [
-            E(h(c.content), 1)
+            E(h(r.content), 1)
           ], !0)
         ], 512)
       ], 2)
-    ]));
+    ], 8, b));
   }
-}), L = /* @__PURE__ */ $(U, [["__scopeId", "data-v-150c3a24"]]);
+}), L = /* @__PURE__ */ $(U, [["__scopeId", "data-v-620f5458"]]);
 export {
   L as default
 };

package/dist/components/actionButton.es.js

@@ -1,7 +1,8 @@
-import { defineComponent as o, createBlock as a, openBlock as r, mergeProps as n } from "vue";
-import s from "./button.es.js";
-import { _ as l } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/actionButton.css';const p = /* @__PURE__ */ o({
+import { defineComponent as r, createBlock as o, openBlock as i, withCtx as l, createVNode as d, mergeProps as n } from "vue";
+import a from "./button.es.js";
+import s from "./tooltip.es.js";
+import { _ as p } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/actionButton.css';const c = /* @__PURE__ */ r({
   __name: "action-button",
   props: {
     /**
@@ -19,8 +20,8 @@ import './style/actionButton.css';const p = /* @__PURE__ */ o({
     variant: {
       type: String,
       default: "primary",
-      validator(e) {
-        return ["primary", "secondary", "ghost"].includes(e);
+      validator(t) {
+        return ["primary", "secondary", "ghost"].includes(t);
       }
     },
     /**
@@ -50,15 +51,59 @@ import './style/actionButton.css';const p = /* @__PURE__ */ o({
     loading: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * <span>ID del botón para testing</span>
+     */
+    id: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * <span>Contenido del tooltip. Si se proporciona, se mostrará el tooltip al hacer hover</span>
+     */
+    tooltip: {
+      type: String,
+      default: ""
+    },
+    /**
+     * <span>Posición del tooltip (top, bottom, left, right). Si no se especifica, se posiciona automáticamente</span>
+     */
+    tooltipPosition: {
+      type: String,
+      default: void 0,
+      validator(t) {
+        return t === void 0 || ["top", "bottom", "left", "right"].includes(t);
+      }
     }
   },
-  setup(e) {
-    return (t, i) => (r(), a(s, n({ class: "rds-e-btn--action" }, { ...t.$props, ...t.$attrs }, {
+  setup(t) {
+    return (e, f) => t.tooltip ? (i(), o(s, {
+      key: 0,
+      content: t.tooltip,
+      placement: t.tooltipPosition || void 0,
+      inverse: t.inverse
+    }, {
+      default: l(() => [
+        d(a, n({
+          id: t.id,
+          class: "rds-e-btn--action"
+        }, { ...e.$props, ...e.$attrs }, {
+          text: "",
+          "is-action": ""
+        }), null, 16, ["id"])
+      ]),
+      _: 1
+    }, 8, ["content", "placement", "inverse"])) : (i(), o(a, n({
+      key: 1,
+      id: t.id,
+      class: "rds-e-btn--action"
+    }, { ...e.$props, ...e.$attrs }, {
       text: "",
       "is-action": ""
-    }), null, 16));
+    }), null, 16, ["id"]));
   }
-}), f = /* @__PURE__ */ l(p, [["__scopeId", "data-v-261a503b"]]);
+}), g = /* @__PURE__ */ p(c, [["__scopeId", "data-v-765c5af6"]]);
 export {
-  f as default
+  g as default
 };

package/dist/components/avatar.es.js

@@ -1,14 +1,14 @@
-import { defineComponent as _, computed as a, createElementBlock as s, openBlock as r, withKeys as o, normalizeStyle as u, normalizeClass as h, createBlock as k, createCommentVNode as b, toDisplayString as z } from "vue";
-import { R as C } from "./icon-svg-DuzOdbk1.js";
+import { defineComponent as h, computed as a, createElementBlock as s, openBlock as n, withKeys as o, normalizeStyle as u, normalizeClass as k, createBlock as _, createCommentVNode as b, toDisplayString as z } from "vue";
+import { R as C } from "./icon-svg-BGa9K9qG.js";
 import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/avatar.css';const A = ["aria-label"], B = ["src", "alt"], D = {
+import './style/avatar.css';const A = ["id", "aria-label"], B = ["src", "alt"], D = {
   key: 1,
   class: "rds-e-avatar__initials"
 }, N = {
   key: 3,
   class: "rds-e-avatar__badge",
   "aria-hidden": "true"
-}, E = /* @__PURE__ */ _({
+}, E = /* @__PURE__ */ h({
   __name: "avatar",
   props: {
     /**
@@ -78,6 +78,13 @@ import './style/avatar.css';const A = ["aria-label"], B = ["src", "alt"], D = {
     alt: {
       type: String,
       default: "Avatar"
+    },
+    /**
+     * ID del avatar para testing
+     */
+    id: {
+      type: String,
+      default: void 0
     }
   },
   emits: ["click"],
@@ -87,7 +94,7 @@ import './style/avatar.css';const A = ["aria-label"], B = ["src", "alt"], D = {
       m: "32px",
       l: "40px",
       xl: "48px"
-    }, v = a(() => `rds-e-avatar--${e.size}`), n = a(() => !e.initials || typeof e.initials != "string" ? "" : e.initials.trim().substring(0, 2).toUpperCase()), y = a(() => {
+    }, v = a(() => `rds-e-avatar--${e.size}`), r = a(() => !e.initials || typeof e.initials != "string" ? "" : e.initials.trim().substring(0, 2).toUpperCase()), y = a(() => {
       switch (e.size) {
         case "s":
           return "10px";
@@ -109,7 +116,7 @@ import './style/avatar.css';const A = ["aria-label"], B = ["src", "alt"], D = {
         fontSize: y.value,
         lineHeight: i
       };
-    }), c = a(() => e.type === "icon" && e.iconName ? e.iconName : "user_default"), x = a(() => {
+    }), c = a(() => e.type === "icon" && e.iconName ? e.iconName : "user_default"), g = a(() => {
       switch (e.size) {
         case "s":
           return "12px";
@@ -122,14 +129,15 @@ import './style/avatar.css';const A = ["aria-label"], B = ["src", "alt"], D = {
         default:
           return "20px";
       }
-    }), g = a(() => ({
-      fontSize: x.value,
+    }), x = a(() => ({
+      fontSize: g.value,
       color: "#001E37"
-    })), S = a(() => e.alt && e.type === "image" ? e.alt : e.type === "initials" && n.value ? `Avatar con iniciales ${n.value}` : e.type === "icon" ? `Avatar con icono ${c.value}` : e.badge ? "Avatar de usuario con notificación" : "Avatar de usuario"), l = (i) => {
+    })), S = a(() => e.alt && e.type === "image" ? e.alt : e.type === "initials" && r.value ? `Avatar con iniciales ${r.value}` : e.type === "icon" ? `Avatar con icono ${c.value}` : e.badge ? "Avatar de usuario con notificación" : "Avatar de usuario"), l = (i) => {
       p("click", i);
     };
-    return (i, I) => (r(), s("div", {
-      class: h(["rds-e-avatar", [v.value]]),
+    return (i, I) => (n(), s("div", {
+      id: t.id,
+      class: k(["rds-e-avatar", [v.value]]),
       style: u(f.value),
       role: "button",
       tabindex: "0",
@@ -140,22 +148,22 @@ import './style/avatar.css';const A = ["aria-label"], B = ["src", "alt"], D = {
         o(l, ["space"])
       ]
     }, [
-      t.type === "image" && t.src ? (r(), s("img", {
+      t.type === "image" && t.src ? (n(), s("img", {
         key: 0,
         src: t.src,
         alt: t.alt,
         class: "rds-e-avatar__image"
-      }, null, 8, B)) : t.type === "initials" && n.value ? (r(), s("span", D, z(n.value), 1)) : (r(), k(C, {
+      }, null, 8, B)) : t.type === "initials" && r.value ? (n(), s("span", D, z(r.value), 1)) : (n(), _(C, {
         key: 2,
         name: c.value,
         class: "rds-e-avatar__icon",
-        style: u(g.value),
+        style: u(x.value),
         "aria-hidden": "true"
       }, null, 8, ["name", "style"])),
-      t.badge ? (r(), s("span", N)) : b("", !0)
+      t.badge ? (n(), s("span", N)) : b("", !0)
     ], 46, A));
   }
-}), R = /* @__PURE__ */ w(E, [["__scopeId", "data-v-194a7f49"]]);
+}), R = /* @__PURE__ */ w(E, [["__scopeId", "data-v-11470780"]]);
 export {
   R as default
 };

package/dist/components/breadcrumbs.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as h, toRefs as C, ref as y, watchEffect as L, onMounted as T, createElementBlock as o, openBlock as c, Fragment as I, renderList as x, normalizeClass as w, unref as B, createVNode as j, mergeProps as E, toHandlers as P, withCtx as D, createCommentVNode as N } from "vue";
-import O from "./link.es.js";
-import { _ as R } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/breadcrumbs.css';const S = { key: 0 }, V = /* @__PURE__ */ h({
+import { defineComponent as h, toRefs as y, ref as C, watchEffect as L, onMounted as T, createElementBlock as i, openBlock as u, Fragment as I, renderList as w, normalizeClass as x, unref as B, createVNode as j, mergeProps as E, toHandlers as P, withCtx as S, createCommentVNode as D } from "vue";
+import N from "./link.es.js";
+import { _ as O } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/breadcrumbs.css';const R = ["id"], V = { key: 0 }, $ = /* @__PURE__ */ h({
   __name: "breadcrumbs",
   props: {
     /**
@@ -31,17 +31,24 @@ import './style/breadcrumbs.css';const S = { key: 0 }, V = /* @__PURE__ */ h({
     leftTrim: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * ID del breadcrumbs para testing
+     */
+    id: {
+      type: String,
+      default: void 0
     }
   },
   emits: ["onClickTrimmedList"],
-  setup(v, { emit: m }) {
-    const s = v, u = m, {
+  setup(a, { emit: v }) {
+    const s = a, d = v, {
       items: r,
-      inverse: l
-    } = C(s), a = y(), d = () => {
-      s.leftTrim ? u("onClickTrimmedList", r.value.slice(0, -2)) : u("onClickTrimmedList", r.value.slice(1, -1));
+      inverse: n
+    } = y(s), l = C(), m = () => {
+      s.leftTrim ? d("onClickTrimmedList", r.value.slice(0, -2)) : d("onClickTrimmedList", r.value.slice(1, -1));
     }, p = () => {
-      a.value = [
+      l.value = [
         r.value[0],
         {
           text: "...",
@@ -53,7 +60,7 @@ import './style/breadcrumbs.css';const S = { key: 0 }, V = /* @__PURE__ */ h({
         r.value[r.value.length - 1]
       ];
     }, b = () => {
-      a.value = [
+      l.value = [
         {
           text: "...",
           active: !1,
@@ -64,47 +71,48 @@ import './style/breadcrumbs.css';const S = { key: 0 }, V = /* @__PURE__ */ h({
         r.value[r.value.length - 2],
         r.value[r.value.length - 1]
       ];
-    }, i = () => {
-      s.trimItems && r.value.length >= 3 ? p() : s.leftTrim && r.value.length >= 3 ? b() : typeof s.items == "object" ? a.value = s.items : console.error("energy-components: The prop is not an Object");
-    }, k = (e, n) => {
+    }, f = () => {
+      s.trimItems && r.value.length >= 3 ? p() : s.leftTrim && r.value.length >= 3 ? b() : typeof s.items == "object" ? l.value = s.items : console.error("energy-components: The prop is not an Object");
+    }, k = (e, o) => {
       const t = {
         ...e,
-        inverse: l.value,
+        inverse: n.value,
         customClass: "rds-e-breadcrumbs__link--text"
       };
-      return n !== a.value.length - 1 && Object.assign(t, {
+      return o !== l.value.length - 1 && Object.assign(t, {
         arrow: !0,
         right: !0,
         arrowSmall: !0
       }), t;
     }, _ = (e) => ({
       click: (t) => {
-        t.preventDefault(), t.stopPropagation(), e != null && e.clickable && d();
+        t.preventDefault(), t.stopPropagation(), e != null && e.clickable && m();
       }
     }), g = (e) => [
       "rds-e-breadcrumbs__link",
       e != null && e.active ? "rds-e-breadcrumbs__link--active" : "",
-      l.value && (e != null && e.active) ? "rds-e-breadcrumbs__link--inverse-active" : ""
+      n.value && (e != null && e.active) ? "rds-e-breadcrumbs__link--inverse-active" : ""
     ];
     return L(() => {
-      i();
+      f();
     }), T(() => {
-      i();
-    }), (e, n) => (c(!0), o(I, null, x(a.value, (t, f) => (c(), o("ul", {
-      key: f,
-      class: w(["rds-e-breadcrumbs", `${B(l) ? "rds-e-breadcrumbs--inverse" : ""}`])
+      f();
+    }), (e, o) => (u(!0), i(I, null, w(l.value, (t, c) => (u(), i("ul", {
+      id: a.id ? `${a.id}-${c}` : void 0,
+      key: c,
+      class: x(["rds-e-breadcrumbs", `${B(n) ? "rds-e-breadcrumbs--inverse" : ""}`])
     }, [
-      j(O, E({
+      j(N, E({
         class: g(t)
-      }, { ref_for: !0 }, k(t, f), P(_(t))), {
-        default: D(() => [
-          t != null && t.clickable ? (c(), o("span", S, "...")) : N("", !0)
+      }, { ref_for: !0 }, k(t, c), P(_(t))), {
+        default: S(() => [
+          t != null && t.clickable ? (u(), i("span", V, "...")) : D("", !0)
         ]),
         _: 2
       }, 1040, ["class"])
-    ], 2))), 128));
+    ], 10, R))), 128));
   }
-}), F = /* @__PURE__ */ R(V, [["__scopeId", "data-v-ea69b47a"]]);
+}), F = /* @__PURE__ */ O($, [["__scopeId", "data-v-dfc178d7"]]);
 export {
   F as default
 };

package/dist/components/button.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as S, toRefs as x, computed as r, createElementBlock as I, openBlock as b, normalizeClass as m, unref as s, createBlock as $, createCommentVNode as k, createElementVNode as C, renderSlot as N, createTextVNode as R, toDisplayString as V } from "vue";
-import { R as D } from "./icon-svg-DuzOdbk1.js";
-import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/button.css';const L = ["type", "disabled"], w = { class: "rds-e-btn__text" }, W = /* @__PURE__ */ S({
+import { defineComponent as x, toRefs as I, computed as r, createElementBlock as $, openBlock as b, normalizeClass as m, unref as n, createBlock as k, createCommentVNode as C, createElementVNode as N, renderSlot as R, createTextVNode as V, toDisplayString as D } from "vue";
+import { R as E } from "./icon-svg-BGa9K9qG.js";
+import { _ as L } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/button.css';const w = ["id", "type", "disabled"], W = { class: "rds-e-btn__text" }, j = /* @__PURE__ */ x({
   __name: "button",
   props: {
     /**
@@ -102,12 +102,19 @@ import './style/button.css';const L = ["type", "disabled"], w = { class: "rds-e-
     destructive: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * <span>ID del botón para testing</span>
+     */
+    id: {
+      type: String,
+      default: void 0
     }
   },
   setup(t) {
     const a = t, {
       text: l,
-      icon: n,
+      icon: s,
       type: i,
       variant: u,
       small: p,
@@ -116,36 +123,38 @@ import './style/button.css';const L = ["type", "disabled"], w = { class: "rds-e-
       inverse: c,
       revertIcon: h,
       loading: v,
-      destructive: _
-    } = x(a), f = r(() => v.value ? "loading" : n != null && n.value ? n == null ? void 0 : n.value : ""), g = r(() => i.value && ["button", "submit", "reset"].includes(i.value) ? i.value : "button"), o = r(() => ["primary", "secondary", "ghost", "commercial"].includes(u.value) ? u.value : "primary"), B = r(() => {
+      destructive: _,
+      id: g
+    } = I(a), f = r(() => v.value ? "loading" : s != null && s.value ? s == null ? void 0 : s.value : ""), B = r(() => i.value && ["button", "submit", "reset"].includes(i.value) ? i.value : "button"), o = r(() => ["primary", "secondary", "ghost", "commercial"].includes(u.value) ? u.value : "primary"), S = r(() => {
       const e = ["rds-e-btn"];
       return u.value && e.push(`rds-e-btn--${o.value}`), c.value && e.push(`rds-e-btn--${o.value}-inverse`), f.value && e.push(
         l != null && l.value ? "rds-e-btn--with-icon" : "rds-e-btn--icon"
       ), p.value && e.push("rds-e-btn--small"), h.value && e.push("rds-e-btn--revert"), d.value && e.push("rds-e-style-state-disabled"), v.value && e.push("rds-e-btn--loading"), y.value && e.push("rds-e-btn--mobile-width"), _.value && (o.value === "secondary" || o.value === "ghost") && e.push(`rds-e-btn--${o.value}-destructive`), e.join(" ");
     });
-    return (e, j) => (b(), I("button", {
-      type: g.value,
-      disabled: s(d),
-      class: m(B.value)
+    return (e, z) => (b(), $("button", {
+      id: n(g),
+      type: B.value,
+      disabled: n(d),
+      class: m(S.value)
     }, [
-      f.value ? (b(), $(D, {
+      f.value ? (b(), k(E, {
         key: 0,
         name: f.value,
-        small: s(p),
+        small: n(p),
         class: m(["rds-e-btn__icon", [
-          s(c) ? `rds-e-btn__icon--${s(c)}` : "",
-          s(d) ? "rds-e-btn__icon--disabled" : ""
+          n(c) ? `rds-e-btn__icon--${n(c)}` : "",
+          n(d) ? "rds-e-btn__icon--disabled" : ""
         ]]),
         "aria-hidden": "true"
-      }, null, 8, ["name", "small", "class"])) : k("", !0),
-      C("span", w, [
-        N(e.$slots, "default", {}, () => [
-          R(V(s(l)), 1)
+      }, null, 8, ["name", "small", "class"])) : C("", !0),
+      N("span", W, [
+        R(e.$slots, "default", {}, () => [
+          V(D(n(l)), 1)
         ], !0)
       ])
-    ], 10, L));
+    ], 10, w));
   }
-}), q = /* @__PURE__ */ E(W, [["__scopeId", "data-v-9550b6cc"]]);
+}), A = /* @__PURE__ */ L(j, [["__scopeId", "data-v-508169ab"]]);
 export {
-  q as default
+  A as default
 };

package/dist/components/card.es.js

@@ -1,6 +1,6 @@
-import { defineComponent as s, createElementBlock as o, openBlock as r, normalizeClass as a, renderSlot as c } from "vue";
-import { _ as n } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/card.css';const d = /* @__PURE__ */ s({
+import { defineComponent as o, createElementBlock as s, openBlock as d, normalizeClass as r, renderSlot as a } from "vue";
+import { _ as c } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/card.css';const n = ["id"], i = /* @__PURE__ */ o({
   __name: "card",
   props: {
     /**
@@ -9,16 +9,24 @@ import './style/card.css';const d = /* @__PURE__ */ s({
     customClass: {
       type: String,
       default: ""
+    },
+    /**
+     * ID de la card para testing
+     */
+    id: {
+      type: String,
+      default: void 0
     }
   },
   setup(e) {
-    return (t, l) => (r(), o("div", {
-      class: a(["rds-e-card", e.customClass])
+    return (t, l) => (d(), s("div", {
+      id: e.id,
+      class: r(["rds-e-card", e.customClass])
     }, [
-      c(t.$slots, "default", {}, void 0, !0)
-    ], 2));
+      a(t.$slots, "default", {}, void 0, !0)
+    ], 10, n));
   }
-}), _ = /* @__PURE__ */ n(d, [["__scopeId", "data-v-f2e83835"]]);
+}), p = /* @__PURE__ */ c(i, [["__scopeId", "data-v-efdb39c8"]]);
 export {
-  _ as default
+  p as default
 };