energy-components 1.6.0-beta.1 → 1.7.0

package/dist/components/{icon-svg-pUb3-FXk.js → icon-svg-BmDOQ0kL.js}

@@ -1,6 +1,6 @@
-import { defineComponent as a, computed as v, openBlock as l, createElementBlock as t, normalizeClass as i, normalizeStyle as d, Fragment as M, renderList as z } from "vue";
-import { _ as p } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/icon-svg.css';const n = "selection", I = [
+import { defineComponent as M, computed as o, openBlock as t, createElementBlock as r, normalizeClass as h, normalizeStyle as z, Fragment as p, renderList as n } from "vue";
+import { _ as I } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/icon-svg.css';const u = "selection", g = [
   {
     icon: {
       paths: [
@@ -10757,9 +10757,9 @@ import './style/icon-svg.css';const n = "selection", I = [
     setId: 2,
     iconIdx: 332
   }
-], g = 1024, u = {
+], f = 1024, x = {
   name: "rds-e-icon-font"
-}, f = {
+}, m = {
   showGlyphs: !0,
   showCodes: !0,
   showQuickUse: !0,
@@ -10804,13 +10804,13 @@ import './style/icon-svg.css';const n = "selection", I = [
   gridSize: 16,
   showGrid: !1,
   showLiga: !1
-}, x = {
-  IcoMoonType: n,
-  icons: I,
-  height: g,
-  metadata: u,
-  preferences: f
-}, o = x.icons.map(
+}, S = {
+  IcoMoonType: u,
+  icons: g,
+  height: f,
+  metadata: x,
+  preferences: m
+}, a = S.icons.map(
   (c) => {
     var s;
     return {
@@ -10819,7 +10819,7 @@ import './style/icon-svg.css';const n = "selection", I = [
       codes: ((s = c.properties) == null ? void 0 : s.codes) || []
     };
   }
-), k = o.sort((c, s) => c.name.localeCompare(s.name)).map((c) => c.name), m = o.reduce((c, s) => (c[s.name] = s, c), {}), S = /* @__PURE__ */ a({
+), w = a.sort((c, s) => c.name.localeCompare(s.name)).map((c) => c.name), _ = a.reduce((c, s) => (c[s.name] = s, c), {}), b = /* @__PURE__ */ M({
   __name: "icon-svg",
   props: {
     /**
@@ -10852,31 +10852,47 @@ import './style/icon-svg.css';const n = "selection", I = [
     color: {
       type: String,
       default: ""
+    },
+    /**
+     * <span>Tamaño personalizado del icono en píxeles.</span>
+     * <br>
+     * Ejemplo: 64 creará un icono de 64x64px
+     */
+    size: {
+      type: [Number, String],
+      default: null
     }
   },
   setup(c) {
-    const s = c, h = v(() => {
+    const s = c, v = o(() => {
+      const e = {};
+      if (s.color && (e.color = s.color), s.size) {
+        const l = typeof s.size == "number" ? `${s.size}px` : s.size;
+        e.fontSize = l, e.width = l, e.height = l;
+      }
+      return e;
+    }), d = o(() => {
       var e;
-      return ((e = m[s.name]) == null ? void 0 : e.codes.length) || 0;
+      return ((e = _[s.name]) == null ? void 0 : e.codes.length) || 0;
     });
-    return (e, _) => (l(), t("span", {
+    return (e, l) => (t(), r("span", {
       "aria-hidden": "true",
-      class: i(["icon rds-e-icon", [
+      class: h(["icon rds-e-icon", [
         `rds-e-icon-${c.name}`,
         c.modifier && `icon--${c.modifier}`,
-        c.small && "icon--small"
+        c.small && !c.size && "icon--small"
       ]]),
-      style: d({ color: c.color })
+      style: z(v.value)
     }, [
-      (l(!0), t(M, null, z(h.value, (r) => (l(), t("span", {
-        key: `name-layer-${r}`,
-        class: i(`path${r}`)
+      (t(!0), r(p, null, n(d.value, (i) => (t(), r("span", {
+        key: `name-layer-${i}`,
+        class: h(`path${i}`)
       }, null, 2))), 128))
     ], 6));
   }
-}), w = /* @__PURE__ */ p(S, [["__scopeId", "data-v-426142e9"]]);
+}), C = /* @__PURE__ */ I(b, [["__scopeId", "data-v-690c53ee"]]);
 export {
-  w as I,
-  o as i,
-  k as s
+  C as R,
+  a as i,
+  w as s
 };

package/dist/components/iconList.es.js

@@ -1,9 +1,9 @@
 import { defineComponent as p, ref as a, computed as v, openBlock as s, createElementBlock as i, Fragment as u, withDirectives as f, createElementVNode as r, vModelText as C, renderList as L, normalizeClass as x, createVNode as g, toDisplayString as h } from "vue";
-import { i as m, I as k } from "./icon-svg-pUb3-FXk.js";
+import { i as m, R as k } from "./icon-svg-BmDOQ0kL.js";
 import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/iconList.css';const y = { class: "rds-e-icon-list" }, I = ["onClick"], N = /* @__PURE__ */ p({
+import './style/iconList.css';const y = { class: "rds-e-icon-list" }, D = ["onClick"], N = /* @__PURE__ */ p({
   __name: "icon-list",
-  setup(T) {
+  setup(S) {
     const o = a(""), l = a(!1), c = a(""), d = v(() => {
       let t = m;
       return o.value.length > 2 && (t = m.filter(
@@ -33,13 +33,13 @@ import './style/iconList.css';const y = { class: "rds-e-icon-list" }, I = ["onCl
           class: x(["rds-e-icon-list__item", {
             "rds-e-icon-list__item--active": l.value && c.value === e.name
           }]),
-          onClick: (V) => _(e.name)
+          onClick: (T) => _(e.name)
         }, [
           g(k, {
             name: e.name
           }, null, 8, ["name"]),
           r("code", null, h(e.name), 1)
-        ], 10, I))), 128))
+        ], 10, D))), 128))
       ])
     ], 64));
   }

package/dist/components/iconSvg.es.js

@@ -1,4 +1,4 @@
-import { I as a } from "./icon-svg-pUb3-FXk.js";
+import { R as a } from "./icon-svg-BmDOQ0kL.js";
 import "./_plugin-vue_export-helper-CHgC5LLL.js";
 export {
   a as default

package/dist/components/index.es.js

@@ -1,4 +1,4 @@
-import { I as i } from "./icon-svg-pUb3-FXk.js";
+import { R as i } from "./icon-svg-BmDOQ0kL.js";
 import a from "./button.es.js";
 import e from "./floatingActionButton.es.js";
 import m from "./actionButton.es.js";
@@ -9,69 +9,71 @@ import R from "./switch.es.js";
 import p from "./radioButton.es.js";
 import { _ as s } from "./radio-group.vue_vue_type_script_setup_true_lang-B-kg-575.js";
 import c from "./dropdown.es.js";
-import d from "./datepicker.es.js";
-import f from "./quantitySelector.es.js";
+import f from "./datepicker.es.js";
+import d from "./quantitySelector.es.js";
 import l from "./toggle.es.js";
 import u from "./selectionChip.es.js";
-import b from "./tag.es.js";
-import T from "./accordionGroup.es.js";
+import b from "./filterChip.es.js";
+import T from "./tag.es.js";
+import B from "./accordionGroup.es.js";
 import g from "./accordion.es.js";
-import B from "./divider.es.js";
-import A from "./card.es.js";
+import A from "./divider.es.js";
+import h from "./card.es.js";
 import x from "./tablepaginatedcomponent.es.js";
-import I from "./link.es.js";
-import w from "./breadcrumbs.es.js";
-import v from "./tabBar.es.js";
-import _ from "./pagination.es.js";
-import h from "./indicator.es.js";
-import y from "./persistentToast.es.js";
-import P from "./infoBox.es.js";
-import C from "./modal.es.js";
-import k from "./overlay.es.js";
+import w from "./link.es.js";
+import C from "./breadcrumbs.es.js";
+import _ from "./tabBar.es.js";
+import y from "./pagination.es.js";
+import I from "./indicator.es.js";
+import P from "./persistentToast.es.js";
+import v from "./infoBox.es.js";
+import k from "./modal.es.js";
+import F from "./overlay.es.js";
 import G from "./tooltip.es.js";
-import F from "./sidebar.es.js";
-import M from "./sidedrawer.es.js";
+import M from "./sidebar.es.js";
+import O from "./sidedrawer.es.js";
 const t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   RDSAccordion: g,
-  RDSAccordionGroup: T,
+  RDSAccordionGroup: B,
   RDSActionButton: m,
-  RDSBreadcrumbs: w,
+  RDSBreadcrumbs: C,
   RDSButton: a,
-  RDSCard: A,
+  RDSCard: h,
   RDSCheckbox: S,
-  RDSDatePicker: d,
-  RDSDivider: B,
+  RDSDatePicker: f,
+  RDSDivider: A,
   RDSDropdown: c,
+  RDSFilterChip: b,
   RDSFloatinActionButton: e,
   RDSIconSvg: i,
-  RDSIndicator: h,
-  RDSInfoBox: P,
-  RDSLink: I,
-  RDSModal: C,
-  RDSOverlay: k,
-  RDSPagination: _,
-  RDSPersistentToast: y,
-  RDSQuantitySelector: f,
+  RDSIndicator: I,
+  RDSInfoBox: v,
+  RDSLink: w,
+  RDSModal: k,
+  RDSOverlay: F,
+  RDSPagination: y,
+  RDSPersistentToast: P,
+  RDSQuantitySelector: d,
   RDSRadioButton: p,
   RDSRadioGroup: s,
   RDSSelectionChip: u,
-  RDSSidebar: F,
-  RDSSidedrawer: M,
+  RDSSidebar: M,
+  RDSSidedrawer: O,
   RDSSwitch: R,
-  RDSTabBar: v,
+  RDSTabBar: _,
   RDSTable: x,
-  RDSTag: b,
+  RDSTag: T,
   RDSTextArea: D,
   RDSTextField: n,
   RDSToggle: l,
   RDSTooltip: G
 }, Symbol.toStringTag, { value: "Module" }));
-let O;
-function uo(o) {
-  O = o;
+let j;
+function To(o) {
+  j = o;
 }
-const bo = {
+const Bo = {
   install: (o) => {
     for (const r in t)
       o.component(
@@ -82,39 +84,40 @@ const bo = {
 };
 export {
   g as RDSAccordion,
-  T as RDSAccordionGroup,
+  B as RDSAccordionGroup,
   m as RDSActionButton,
-  w as RDSBreadcrumbs,
+  C as RDSBreadcrumbs,
   a as RDSButton,
-  A as RDSCard,
+  h as RDSCard,
   S as RDSCheckbox,
-  d as RDSDatePicker,
-  B as RDSDivider,
+  f as RDSDatePicker,
+  A as RDSDivider,
   c as RDSDropdown,
+  b as RDSFilterChip,
   e as RDSFloatinActionButton,
   i as RDSIconSvg,
-  h as RDSIndicator,
-  P as RDSInfoBox,
-  I as RDSLink,
-  C as RDSModal,
-  k as RDSOverlay,
-  _ as RDSPagination,
-  y as RDSPersistentToast,
-  f as RDSQuantitySelector,
+  I as RDSIndicator,
+  v as RDSInfoBox,
+  w as RDSLink,
+  k as RDSModal,
+  F as RDSOverlay,
+  y as RDSPagination,
+  P as RDSPersistentToast,
+  d as RDSQuantitySelector,
   p as RDSRadioButton,
   s as RDSRadioGroup,
   u as RDSSelectionChip,
-  F as RDSSidebar,
-  M as RDSSidedrawer,
+  M as RDSSidebar,
+  O as RDSSidedrawer,
   R as RDSSwitch,
-  v as RDSTabBar,
+  _ as RDSTabBar,
   x as RDSTable,
-  b as RDSTag,
+  T as RDSTag,
   D as RDSTextArea,
   n as RDSTextField,
   l as RDSToggle,
   G as RDSTooltip,
-  O as VueInstance,
-  bo as default,
-  uo as setVueInstance
+  j as VueInstance,
+  Bo as default,
+  To as setVueInstance
 };

package/dist/components/infoBox.es.js

@@ -1,28 +1,28 @@
-import { defineComponent as k, ref as u, toRefs as h, computed as $, watch as w, nextTick as C, openBlock as t, createElementBlock as s, normalizeClass as m, createElementVNode as a, createVNode as b, createCommentVNode as o, toDisplayString as r, renderSlot as _ } from "vue";
-import { I as v } from "./icon-svg-pUb3-FXk.js";
-import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import { defineComponent as k, ref as u, toRefs as h, computed as $, watch as w, nextTick as S, openBlock as t, createElementBlock as s, normalizeClass as m, createElementVNode as a, createVNode as b, createCommentVNode as o, toDisplayString as r, renderSlot as _ } from "vue";
+import { R as v } from "./icon-svg-BmDOQ0kL.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 import './style/infoBox.css';const q = { class: "alert" }, B = {
   key: 0,
   class: "rds-e-info-box__custom-icon-block"
-}, H = { class: "rds-e-info-box__wrapper" }, I = { class: "rds-e-info-box__title__wrapper" }, N = {
+}, H = { class: "rds-e-info-box__wrapper" }, N = { class: "rds-e-info-box__title__wrapper" }, R = {
   key: 0,
   class: "rds-e-info-box__title rds-mb-03"
 }, V = {
   key: 0,
   class: "rds-e-info-box__title rds-mb-03"
-}, E = {
+}, D = {
   key: 2,
   class: "rds-e-info-box__text"
-}, z = {
+}, E = {
   key: 3,
   class: "rds-e-info-box__content-section"
-}, D = {
+}, I = {
   key: 0,
   class: "rds-e-info-box__text"
-}, O = {
+}, z = {
   key: 1,
   class: "rds-e-info-box__content-section"
-}, R = /* @__PURE__ */ k({
+}, O = /* @__PURE__ */ k({
   __name: "info-box",
   props: {
     /**
@@ -100,7 +100,7 @@ import './style/infoBox.css';const q = { class: "alert" }, B = {
     };
     w(
       () => l.value,
-      () => C(() => {
+      () => S(() => {
         g();
       }),
       { immediate: !0 }
@@ -121,8 +121,8 @@ import './style/infoBox.css';const q = { class: "alert" }, B = {
           }, null, 8, ["name"])
         ])) : o("", !0),
         a("div", H, [
-          a("div", I, [
-            e.title && !e.collapsable ? (t(), s("div", N, r(e.title), 1)) : o("", !0),
+          a("div", N, [
+            e.title && !e.collapsable ? (t(), s("div", R, r(e.title), 1)) : o("", !0),
             e.collapsable ? (t(), s("div", {
               key: 1,
               class: "rds-e-info-box__collapsable rds-mb-03",
@@ -135,8 +135,8 @@ import './style/infoBox.css';const q = { class: "alert" }, B = {
                 "aria-hidden": "true"
               }, null, 8, ["class"])
             ])) : o("", !0),
-            e.message && !e.collapsable && !n.$slots["content-section"] ? (t(), s("p", E, r(e.message), 1)) : o("", !0),
-            n.$slots["content-section"] && !e.collapsable ? (t(), s("div", z, [
+            e.message && !e.collapsable && !n.$slots["content-section"] ? (t(), s("p", D, r(e.message), 1)) : o("", !0),
+            n.$slots["content-section"] && !e.collapsable ? (t(), s("div", E, [
               _(n.$slots, "content-section", {}, void 0, !0)
             ])) : o("", !0),
             e.collapsable ? (t(), s("div", {
@@ -150,8 +150,8 @@ import './style/infoBox.css';const q = { class: "alert" }, B = {
                 ref: d,
                 class: "rds-e-info-box__panel-content"
               }, [
-                n.$slots["content-section"] ? o("", !0) : (t(), s("p", D, r(e.message), 1)),
-                n.$slots["content-section"] ? (t(), s("div", O, [
+                n.$slots["content-section"] ? o("", !0) : (t(), s("p", I, r(e.message), 1)),
+                n.$slots["content-section"] ? (t(), s("div", z, [
                   _(n.$slots, "content-section", {}, void 0, !0)
                 ])) : o("", !0)
               ], 512)
@@ -161,7 +161,7 @@ import './style/infoBox.css';const q = { class: "alert" }, B = {
       ])
     ], 2));
   }
-}), F = /* @__PURE__ */ S(R, [["__scopeId", "data-v-39ef726d"]]);
+}), F = /* @__PURE__ */ C(O, [["__scopeId", "data-v-39ef726d"]]);
 export {
   F as default
 };

package/dist/components/link.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as E, toRefs as L, computed as f, openBlock as r, createBlock as d, resolveDynamicComponent as N, unref as e, normalizeClass as m, withCtx as R, mergeProps as _, createCommentVNode as i, createElementBlock as b, renderSlot as B, createTextVNode as S, toDisplayString as I } from "vue";
-import { I as k } from "./icon-svg-pUb3-FXk.js";
+import { defineComponent as j, toRefs as E, computed as f, openBlock as r, createBlock as d, resolveDynamicComponent as L, unref as e, normalizeClass as m, withCtx as N, mergeProps as _, createCommentVNode as i, createElementBlock as S, renderSlot as b, createTextVNode as B, toDisplayString as I } from "vue";
+import { R as k } from "./icon-svg-BmDOQ0kL.js";
 import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/link.css';const $ = /* @__PURE__ */ E({
+import './style/link.css';const $ = /* @__PURE__ */ j({
   __name: "link",
   props: {
     /**
@@ -86,8 +86,8 @@ import './style/link.css';const $ = /* @__PURE__ */ E({
       arrow: u,
       right: t,
       underline: h,
-      customClass: j
-    } = L(v), D = f(() => {
+      customClass: D
+    } = E(v), R = f(() => {
       var l, C;
       const a = ["rds-e-link"];
       return p.value && a.push("rds-e-link--inverse"), h.value && a.push("rds-e-link--underline"), c.value && a.push("rds-e-style-state-disabled"), ((l = n == null ? void 0 : n.value) == null ? void 0 : l.name) !== "arrow" && a.push("link"), ((C = n == null ? void 0 : n.value) == null ? void 0 : C.name) !== "arrow" && p.value && a.push("link__icon--inverse"), a.join(" ");
@@ -101,13 +101,13 @@ import './style/link.css';const $ = /* @__PURE__ */ E({
       var a;
       return u.value || ((a = n == null ? void 0 : n.value) == null ? void 0 : a.name);
     });
-    return (a, l) => (r(), d(N(e(o) === "a" ? e(o) : "router-link"), {
-      class: m(D.value),
+    return (a, l) => (r(), d(L(e(o) === "a" ? e(o) : "router-link"), {
+      class: m(R.value),
       to: e(o) === "router-link" ? e(g) : null,
       href: e(o) === "a" ? e(g) : null,
       disable: e(c)
     }, {
-      default: R(() => [
+      default: N(() => [
         e(n).name && !e(t) && !e(u) ? (r(), d(k, _({
           key: 0,
           name: e(n).name
@@ -116,15 +116,15 @@ import './style/link.css';const $ = /* @__PURE__ */ E({
         }, {
           class: ["rds-e-link__icon-left", w.value]
         }), null, 16, ["name", "class"])) : i("", !0),
-        e(t) ? (r(), b("span", {
+        e(t) ? (r(), S("span", {
           key: 1,
-          class: m(["rds-e-link__text", [e(j), {
+          class: m(["rds-e-link__text", [e(D), {
             "rds-e-mr-xs": x.value,
             "rds-e-link__text--underline": e(h)
           }]])
         }, [
-          B(a.$slots, "default", {}, () => [
-            S(I(e(y)), 1)
+          b(a.$slots, "default", {}, () => [
+            B(I(e(y)), 1)
           ], !0)
         ], 2)) : i("", !0),
         e(u) ? (r(), d(k, _({ key: 2 }, {
@@ -134,12 +134,12 @@ import './style/link.css';const $ = /* @__PURE__ */ E({
             e(t) ? "link__icon--animation-right" : "link__icon--animation-left"
           ]]
         }), null, 16, ["class"])) : i("", !0),
-        e(t) ? i("", !0) : (r(), b("span", {
+        e(t) ? i("", !0) : (r(), S("span", {
           key: 3,
           class: m(["rds-e-link__text", { "rds-e-ml-xs": x.value }])
         }, [
-          B(a.$slots, "default", {}, () => [
-            S(I(e(y)), 1)
+          b(a.$slots, "default", {}, () => [
+            B(I(e(y)), 1)
           ], !0)
         ], 2)),
         e(n).name && e(t) && !e(u) ? (r(), d(k, _({

package/dist/components/modal.es.js

@@ -1,15 +1,15 @@
-import { defineComponent as h, ref as C, computed as v, openBlock as r, createBlock as m, unref as a, withCtx as u, createVNode as k, normalizeStyle as b, withModifiers as w, createElementVNode as d, renderSlot as n, createCommentVNode as l, createElementBlock as c } from "vue";
-import x from "./overlay.es.js";
+import { defineComponent as C, ref as R, computed as k, openBlock as d, createBlock as u, unref as a, withCtx as p, createVNode as v, normalizeStyle as b, withModifiers as g, createElementVNode as l, renderSlot as i, createCommentVNode as n, createElementBlock as c } from "vue";
+import w from "./overlay.es.js";
 import S from "./card.es.js";
-import { I as $ } from "./icon-svg-pUb3-FXk.js";
-import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = { class: "rds-e-modal__header" }, W = {
+import { R as q } from "./icon-svg-BmDOQ0kL.js";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/modal.css';const $ = { class: "rds-e-modal__container" }, B = { class: "rds-e-modal__header" }, O = {
   key: 0,
   class: "rds-e-modal__section-spacer"
-}, g = { class: "rds-e-modal__body" }, q = {
+}, M = { class: "rds-e-modal__body" }, N = {
   key: 1,
   class: "rds-e-modal__section-spacer"
-}, I = { class: "rds-e-modal__footer" }, V = /* @__PURE__ */ h({
+}, W = { class: "rds-e-modal__footer" }, D = /* @__PURE__ */ C({
   __name: "modal",
   props: {
     /**
@@ -48,7 +48,7 @@ import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = {
     maxWidth: {
       type: [String, Number],
       default: 820,
-      validator: (t) => typeof t == "number" ? !0 : /^\d+(?:px|em|rem|%)$/.test(t)
+      validator: (o) => typeof o == "number" ? !0 : /^\d+(?:px|em|rem|%)$/.test(o)
     },
     /**
      * Ancho del modal en dispositivos de escritorio.
@@ -56,54 +56,84 @@ import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = {
     width: {
       type: [String, Number],
       default: 600,
-      validator: (t) => typeof t == "number" ? !0 : /^\d+(?:px|em|rem|%)$/.test(t)
+      validator: (o) => typeof o == "number" ? !0 : /^\d+(?:px|em|rem|%)$/.test(o)
     }
   },
-  emits: ["onCloseRequest"],
-  setup(t, { emit: p }) {
-    const e = t, i = p, f = C(null), _ = v(() => {
-      const o = typeof e.maxWidth == "number" ? `${e.maxWidth}px` : e.maxWidth, s = typeof e.width == "number" ? `${e.width}px` : e.width;
+  emits: ["onCloseRequest", "onOpenRequest", "onToggleRequest"],
+  setup(o, { expose: f, emit: _ }) {
+    const e = o, s = _, y = R(null), h = k(() => {
+      const t = typeof e.maxWidth == "number" ? `${e.maxWidth}px` : e.maxWidth, r = typeof e.width == "number" ? `${e.width}px` : e.width;
       return {
-        "--rds-modal-max-width": o,
-        "--rds-modal-width": s
+        "--rds-modal-max-width": t,
+        "--rds-modal-width": r
       };
-    }), y = () => {
-      e.preventClose || i("onCloseRequest");
+    }), m = () => {
+      e.preventClose || s("onCloseRequest");
     };
-    return (o, s) => t.open ? (r(), m(a(x), {
+    return f({
+      /**
+       * { () => void } Gestiona el clic fuera del modal.
+       */
+      modalClickOutside: () => m(),
+      /**
+       * { () => void } Solicita abrir el modal.
+       */
+      openModal: () => {
+        s("onOpenRequest");
+      },
+      /**
+       * { () => void } Solicita cerrar el modal.
+       */
+      closeModal: () => {
+        s("onCloseRequest");
+      },
+      /**
+       * { (state: boolean) => void } Cambia el estado del modal.
+       * @param {boolean} state - true para abrir, false para cerrar
+       */
+      changeModalState: (t) => {
+        s(t ? "onOpenRequest" : "onCloseRequest");
+      },
+      /**
+       * { () => void } Alterna el estado del modal.
+       */
+      toggleModal: () => {
+        s("onToggleRequest");
+      }
+    }), (t, r) => o.open ? (d(), u(a(w), {
       key: 0,
       ref_key: "overlay",
-      ref: f,
+      ref: y,
       class: "rds-e-modal__overlay",
       teleport: e.teleport,
-      onClick: y
+      onClick: m
     }, {
-      default: u(() => [
-        k(a(S), {
+      default: p(() => [
+        v(a(S), {
           class: "rds-e-modal__card",
-          style: b(_.value),
-          onClick: s[1] || (s[1] = w(() => {
+          style: b(h.value),
+          onClick: r[1] || (r[1] = g(() => {
           }, ["stop"]))
         }, {
-          default: u(() => [
-            d("div", N, [
-              d("div", R, [
-                n(o.$slots, "header", {}, void 0, !0),
-                e.showClose ? (r(), m(a($), {
+          default: p(() => [
+            l("div", $, [
+              l("div", B, [
+                i(t.$slots, "header", {}, void 0, !0),
+                e.showClose ? (d(), u(a(q), {
                   key: 0,
                   class: "rds-e-modal__header-close",
                   name: "close",
                   small: "",
-                  onClick: s[0] || (s[0] = () => i("onCloseRequest"))
-                })) : l("", !0)
+                  onClick: r[0] || (r[0] = () => s("onCloseRequest"))
+                })) : n("", !0)
               ]),
-              o.$slots.body ? (r(), c("span", W)) : l("", !0),
-              d("div", g, [
-                n(o.$slots, "body", {}, void 0, !0)
+              t.$slots.body ? (d(), c("span", O)) : n("", !0),
+              l("div", M, [
+                i(t.$slots, "body", {}, void 0, !0)
               ]),
-              o.$slots.footer ? (r(), c("span", q)) : l("", !0),
-              d("div", I, [
-                n(o.$slots, "footer", {}, void 0, !0)
+              t.$slots.footer ? (d(), c("span", N)) : n("", !0),
+              l("div", W, [
+                i(t.$slots, "footer", {}, void 0, !0)
               ])
             ])
           ]),
@@ -111,9 +141,9 @@ import './style/modal.css';const N = { class: "rds-e-modal__container" }, R = {
         }, 8, ["style"])
       ]),
       _: 3
-    }, 8, ["teleport"])) : l("", !0);
+    }, 8, ["teleport"])) : n("", !0);
   }
-}), j = /* @__PURE__ */ B(V, [["__scopeId", "data-v-24bc0adc"]]);
+}), j = /* @__PURE__ */ x(D, [["__scopeId", "data-v-2dbe0d23"]]);
 export {
   j as default
 };