@dropi/ui 0.1.45 → 0.1.46

package/dist/dropi-ui/{index-D0Z06C2b.js → index-CZu1AKUh.js}

@@ -6,7 +6,7 @@ const globalScripts = () => {};
 const globalStyles = "/* ============================================================\n   DROPI DESIGN SYSTEM — TOKENS GLOBALES\n   Fuente: tokens.scss + variables_system_design.scss\n   ============================================================ */\n\n:root {\n  /* ── Brand: Primary ─────────────────────────────────────── */\n  --Primary-Primary-50: #fef8f2;\n  --Primary-Primary-100: #ffecda;\n  --Primary-Primary-200: #fcddbd;\n  --Primary-Primary-300: #f2bc85;\n  --Primary-Primary-400: #f7b46f;\n  --Primary-Primary-500: #f49a3d;\n  --Primary-Primary-600: #e58017;\n  --Primary-Primary-700: #99540f;\n  --Primary-Primary-800: #66380a;\n  --Primary-Primary-900: #331c05;\n\n  /* ── Brand: Secondary ───────────────────────────────────── */\n  --Secondary-Secondary-50: #f0fafc;\n  --Secondary-Secondary-100: #cee8f2;\n  --Secondary-Secondary-200: #95d0e5;\n  --Secondary-Secondary-300: #62bad9;\n  --Secondary-Secondary-400: #33a4cc;\n  --Secondary-Secondary-500: #008dbf;\n  --Secondary-Secondary-600: #007199;\n  --Secondary-Secondary-700: #005573;\n  --Secondary-Secondary-800: #00384d;\n  --Secondary-Secondary-900: #001c26;\n\n  /* ── Neutral ─────────────────────────────────────────────── */\n  --Neutral-White: #ffffff;\n  --Neutral-Black: #000000;\n\n  /* ── Gray ────────────────────────────────────────────────── */\n  --Gray-Gray-50: #f7f8fa;\n  --Gray-Gray-100: #e6eaf2;\n  --Gray-Gray-200: #c3c9d9;\n  --Gray-Gray-300: #a3abbf;\n  --Gray-Gray-400: #858ea6;\n  --Gray-Gray-500: #69738c;\n  --Gray-Gray-600: #475066;\n  --Gray-Gray-700: #32394d;\n  --Gray-Gray-800: #1f2433;\n  --Gray-Gray-900: #0e111a;\n\n  /* ── Success ─────────────────────────────────────────────── */\n  --Success-Success-50: #e7f8f3;\n  --Success-Success-100: #b3eada;\n  --Success-Success-200: #8ee0c8;\n  --Success-Success-300: #5bd1af;\n  --Success-Success-400: #3bc99f;\n  --Success-Success-500: #0abb87;\n  --Success-Success-600: #09aa7b;\n  --Success-Success-700: #078560;\n  --Success-Success-800: #06674a;\n  --Success-Success-900: #044f39;\n\n  /* ── Error ───────────────────────────────────────────────── */\n  --Error-Error-50: #fef0f0;\n  --Error-Error-100: #fcd1d1;\n  --Error-Error-200: #fababb;\n  --Error-Error-300: #f89b9c;\n  --Error-Error-400: #f68889;\n  --Error-Error-500: #f46a6b;\n  --Error-Error-600: #de6061;\n  --Error-Error-700: #ad4b4c;\n  --Error-Error-800: #863a3b;\n  --Error-Error-900: #662d2d;\n\n  /* ── Info ────────────────────────────────────────────────── */\n  --Info-Info-50: #eef6fe;\n  --Info-Info-100: #c9e3fb;\n  --Info-Info-200: #afd6f9;\n  --Info-Info-300: #8ac3f6;\n  --Info-Info-400: #73b7f4;\n  --Info-Info-500: #50a5f1;\n  --Info-Info-600: #4996db;\n  --Info-Info-700: #3975ab;\n  --Info-Info-800: #2c5b85;\n  --Info-Info-900: #224565;\n\n  /* ── Warning ─────────────────────────────────────────────── */\n  --Warning-Warning-50: #fef8ed;\n  --Warning-Warning-100: #fbe8c8;\n  --Warning-Warning-200: #f9ddad;\n  --Warning-Warning-300: #f6cd87;\n  --Warning-Warning-400: #f4c370;\n  --Warning-Warning-500: #f1b44c;\n  --Warning-Warning-600: #dba445;\n  --Warning-Warning-700: #ab8036;\n  --Warning-Warning-800: #85632a;\n  --Warning-Warning-900: #654c20;\n\n  /* ── Orange ──────────────────────────────────────────────── */\n  --Orange-orange-50: #fef5ec;\n  --Orange-orange-500: #f49a3d;\n\n  /* ── Spacing ─────────────────────────────────────────────── */\n  --Size-1: 4px;\n  --Size-2: 8px;\n  --Size-3: 12px;\n  --Size-4: 16px;\n  --Size-5: 24px;\n  --Size-6: 32px;\n  --Size-7: 40px;\n  --Size-8: 48px;\n  --Size-9: 56px;\n  --Size-10: 64px;\n\n  /* ── Border Radius ───────────────────────────────────────── */\n  --Border-1: 4px;\n  --Border-2: 8px;\n  --Border-3: 12px;\n  --Border-4: 24px;\n  --Border-5: 32px;\n  --Border-full: 9999px;\n\n  /* ── Font Size ───────────────────────────────────────────── */\n  --font-size-xxxxl: 36px;\n  --font-size-xxxl: 30px;\n  --font-size-xxl: 24px;\n  --font-size-xl: 20px;\n  --font-size-l: 18px;\n  --font-size-m: 16px;\n  --font-size-s: 14px;\n  --font-size-xs: 12px;\n  --font-size-xxs: 10px;\n\n  /* ── Line Height ─────────────────────────────────────────── */\n  --lineheight-simple: 110%;\n  --lineheight-large: 150%;\n\n  /* ── Font Weight ─────────────────────────────────────────── */\n  --font-weight-bold: 700;\n  --font-weight-semibold: 600;\n  --font-weight-medium: 500;\n  --font-weight-regular: 400;\n  --font-weight-light: 300;\n\n  /* ── Font Family ─────────────────────────────────────────── */\n  --font-family-01: 'Inter', sans-serif;\n\n  /* ── Breakpoints ─────────────────────────────────────────── */\n  --breakpoint-extra-small: 576px;\n  --breakpoint-small: 600px;\n  --breakpoint-medium: 1000px;\n  --breakpoint-large: 1200px;\n  --breakpoint-extra-large: 1536px;\n  --breakpoint-full-width: 1920px;\n\n  /* ── Shadows ─────────────────────────────────────────────── */\n  --Shadow-small: 0px 0px 12px rgba(0, 0, 0, 0.04);\n  --Shadow-medium: 0.5px 4px 8px rgba(0, 0, 0, 0.08);\n  --Shadow-large: 0px 4px 16px rgba(0, 0, 0, 0.16);\n  --Shadow-icon: 0px 0px 4px rgba(0, 0, 0, 0.16);\n\n  /* ── Transportadoras ─────────────────────────────────────── */\n  --Interrapidisimo: #383637;\n  --Domina: #464ffe;\n  --Coordinadora: #2686c5;\n  --Servientrega: #1ba558;\n  --99-minutos: #9cd453;\n  --TCC: #f8dd49;\n  --Veloces: #dc2e76;\n  --Envia: #e7484e;\n  --Restlogix: #90dd92;\n  --Tiui: #0596a5;\n  --Fedex: #4d148c;\n  --Laarcourier: #faf063;\n  --Gintracom: #ff3939;\n  --Blue-express: #1542a3;\n  --Lulu: #f03a3e;\n  --Urbano: #e53237;\n  --Tipsa: #1d3681;\n\n  /* ── Z-Index ────────────────────────────────────────────── */\n  --dropi-z-index-base: 0;\n  --dropi-z-index-sticky: 100;\n  --dropi-z-index-navbar: 1000;\n  --dropi-z-index-modal: 9999;\n  --dropi-z-index-drawer: 9999;\n  --dropi-z-index-overlay: 11000;\n  --dropi-z-index-toast: 12000;\n}\n\n/* ── Responsive Font Sizes (mobile) ─────────────────────── */\n@media (max-width: 600px) {\n  :root {\n    --font-size-xxxxl: 32px;\n    --font-size-xxxl: 26px;\n    --font-size-xxl: 20px;\n    --font-size-xl: 18px;\n    --font-size-l: 16px;\n    --font-size-m: 16px;\n    --font-size-s: 14px;\n    --font-size-xs: 12px;\n    --font-size-xxs: 10px;\n  }\n}\n\n/* ── Base ────────────────────────────────────────────────── */\n* {\n  font-family: var(--font-family-01);\n  box-sizing: border-box;\n  text-align: left;\n}\n\n/* ── Headings ────────────────────────────────────────────── */\nh1 {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-xxxxl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\nh2 {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-xxxl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\nh3 {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-xxl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\nh4 {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\nh5 {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-l);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\n\n/* ── Typography Utility Classes ──────────────────────────── */\n.Body-L-Medium {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-m);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--lineheight-large);\n}\n.Body-L-Regular {\n  color: var(--Gray-Gray-600);\n  font-size: var(--font-size-m);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--lineheight-large);\n}\n.Body-M-Medium {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-s);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--lineheight-large);\n}\n.Body-M-Regular {\n  color: var(--Gray-Gray-600);\n  font-size: var(--font-size-s);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--lineheight-large);\n}\n.Body-S-Medium {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--lineheight-large);\n}\n.Body-S-Regular {\n  color: var(--Gray-Gray-600);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--lineheight-large);\n}\n.Caption-M {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\n.Caption-S {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-xxs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\n.Label-L {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-m);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\n.Label-M {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-s);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\n.Label-S {\n  color: var(--Gray-Gray-700);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--lineheight-simple);\n}\n\n/* Support for scroll locking in modals/drawers without direct style manipulation (SSR safe) */\nbody.dropi-modal-open {\n  overflow: hidden !important;\n}\n\n/* Prevent dropi-icon from flashing at full size before the component is defined */\ndropi-icon:not(:defined) {\n  display: inline-flex;\n  width: 24px;\n  height: 24px;\n  overflow: hidden;\n}\n";
 
 /*
- Stencil Client Platform v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.4 | MIT Licensed | https://stenciljs.com
  */
 
 var Build = {
@@ -2127,6 +2127,31 @@ var getMode = (ref) => {
   return (_a = getHostRef(ref)) == null ? void 0 : _a.$modeName$;
 };
 
+// src/runtime/normalize-watchers.ts
+var normalizeWatchers = (raw) => {
+  if (!raw) return void 0;
+  const keys = Object.keys(raw);
+  if (keys.length === 0) return void 0;
+  let hasLegacy = false;
+  for (const propName of keys) {
+    if (hasLegacy) break;
+    for (const h2 of raw[propName]) {
+      if (typeof h2 === "string") {
+        hasLegacy = true;
+        break;
+      }
+    }
+  }
+  if (!hasLegacy) return raw;
+  const out = {};
+  for (const propName of keys) {
+    out[propName] = raw[propName].map(
+      (h2) => typeof h2 === "string" ? { [h2]: 0 } : h2
+    );
+  }
+  return out;
+};
+
 // src/utils/remote-value.ts
 var RemoteValue = class _RemoteValue {
   /**
@@ -2223,11 +2248,19 @@ var RemoteValue = class _RemoteValue {
 };
 
 // src/utils/serialize.ts
+function decodeBase64Unicode(base64) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i2 = 0; i2 < binary.length; i2++) {
+    bytes[i2] = binary.charCodeAt(i2);
+  }
+  return new TextDecoder().decode(bytes);
+}
 function deserializeProperty(value) {
   if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) {
     return value;
   }
-  return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+  return RemoteValue.fromLocalValue(JSON.parse(decodeBase64Unicode(value.slice(SERIALIZED_PREFIX.length))));
 }
 
 // src/runtime/parse-property-value.ts
@@ -3526,7 +3559,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   if (BUILD.member && cmpMeta.$members$ || BUILD.propChangeCallback) {
     if (BUILD.propChangeCallback) {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
-        cmpMeta.$watchers$ = Cstr.watchers;
+        cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
       }
       if (Cstr.deserializers && !cmpMeta.$deserializers$) {
         cmpMeta.$deserializers$ = Cstr.deserializers;
@@ -3704,11 +3737,13 @@ More information: https://stenciljs.com/docs/properties#prop-mutability`
             return;
           }
           const propFlags = members.find(([m]) => m === propName);
-          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+          const isBooleanTarget = propFlags && propFlags[1][0] & 4 /* Boolean */;
+          const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
+          if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -3756,7 +3791,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         }
         if (BUILD.member && !Cstr.isProxied) {
           if (BUILD.propChangeCallback) {
-            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
             cmpMeta.$serializers$ = Cstr.serializers;
             cmpMeta.$deserializers$ = Cstr.deserializers;
           }
@@ -3970,7 +4005,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
       cmpMeta.$listeners$ = compactMeta[3];
     }
     if (BUILD.propChangeCallback) {
-      cmpMeta.$watchers$ = Cstr.$watchers$;
+      cmpMeta.$watchers$ = normalizeWatchers(Cstr.$watchers$);
       cmpMeta.$deserializers$ = Cstr.$deserializers$;
       cmpMeta.$serializers$ = Cstr.$serializers$;
     }
@@ -4126,7 +4161,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2, _b, _c;
+      var _a2, _b;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -4146,9 +4181,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         cmpMeta.$attrsToReflect$ = [];
       }
       if (BUILD.propChangeCallback) {
-        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
-        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
-        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+        cmpMeta.$watchers$ = normalizeWatchers(compactMeta[4]);
+        cmpMeta.$serializers$ = (_a2 = compactMeta[5]) != null ? _a2 : {};
+        cmpMeta.$deserializers$ = (_b = compactMeta[6]) != null ? _b : {};
       }
       if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
         cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
@@ -4356,16 +4391,21 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 var setPlatformOptions = (opts) => Object.assign(plt, opts);
 
 // src/runtime/render.ts
+var hostRefCache = /* @__PURE__ */ new WeakMap();
 function render(vnode, container) {
-  const cmpMeta = {
-    $flags$: 0,
-    $tagName$: container.tagName
-  };
-  const ref = {
-    $flags$: 0,
-    $cmpMeta$: cmpMeta,
-    $hostElement$: container
-  };
+  let ref = hostRefCache.get(container);
+  if (!ref) {
+    const cmpMeta = {
+      $flags$: 0,
+      $tagName$: container.tagName
+    };
+    ref = {
+      $flags$: 0,
+      $cmpMeta$: cmpMeta,
+      $hostElement$: container
+    };
+    hostRefCache.set(container, ref);
+  }
   renderVdom(ref, vnode);
 }
 
@@ -4580,6 +4620,6 @@ var insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, inde
 };
 
 export { BUILD as B, H, NAMESPACE as N, getElement as a, bootstrapLazy as b, consoleDevInfo as c, createEvent as d, Build as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s, win as w };
-//# sourceMappingURL=index-D0Z06C2b.js.map
+//# sourceMappingURL=index-CZu1AKUh.js.map
 
-//# sourceMappingURL=index-D0Z06C2b.js.map
+//# sourceMappingURL=index-CZu1AKUh.js.map