@mapvx/web-components 0.0.22 → 0.0.24

package/dist/components/zoom-controls.js

@@ -0,0 +1,40 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+let ZoomControls = class ZoomControls extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.zoomLevel = 100;
+    }
+    render() {
+        return html `
+      <div class="flex flex-col gap-2 bg-white p-3 rounded-lg shadow-md">
+        <button
+          class="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg"
+          @click=${() => (this.zoomLevel += 10)}
+        >
+          🔍+ (${this.zoomLevel}%)
+        </button>
+        <button
+          class="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg"
+          @click=${() => (this.zoomLevel = Math.max(50, this.zoomLevel - 10))}
+        >
+          🔍-
+        </button>
+      </div>
+    `;
+    }
+};
+__decorate([
+    state()
+], ZoomControls.prototype, "zoomLevel", void 0);
+ZoomControls = __decorate([
+    customElement('zoom-controls')
+], ZoomControls);
+export { ZoomControls };
+//# sourceMappingURL=zoom-controls.js.map

package/dist/es/assets/{compact-floor-selector-D-LPjNVW.js → compact-floor-selector-BS3kmZbM.js}

@@ -1,5 +1,5 @@
-import { x, a as i, n, t } from './route-view-totems-Cu8sG0kp.js';
-import { B as BaseFloorSelector, e } from './components-BGe90NOX.js';
+import { x, i, n, t } from './route-view-totems-Bpxdz9bU.js';
+import { B as BaseFloorSelector, e } from './components-Cg181WRf.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -18,12 +18,11 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _borderColor, _borderWidth;
+var _disabled;
 let CompactFloorSelector = class extends BaseFloorSelector {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _borderColor, "#251660");
-    __privateAdd(this, _borderWidth, 1);
+    __privateAdd(this, _disabled, false);
     this.isOpen = false;
     this._handleClickOutside = (event) => {
       if (this.isOpen && !this.shadowRoot?.contains(event.target)) {
@@ -32,24 +31,20 @@ let CompactFloorSelector = class extends BaseFloorSelector {
       }
     };
   }
-  get borderColor() {
-    return __privateGet(this, _borderColor);
+  get disabled() {
+    return __privateGet(this, _disabled);
   }
-  set borderColor(_) {
-    __privateSet(this, _borderColor, _);
-  }
-  get borderWidth() {
-    return __privateGet(this, _borderWidth);
-  }
-  set borderWidth(_) {
-    __privateSet(this, _borderWidth, _);
+  set disabled(_) {
+    __privateSet(this, _disabled, _);
   }
   _toggleDropdown(event) {
+    if (this.disabled) return;
     event.stopPropagation();
     this.isOpen = !this.isOpen;
     this.requestUpdate();
   }
   _selectFloor(floorKey) {
+    if (this.disabled) return;
     this.selectFloor(floorKey);
     this.isOpen = false;
     this.requestUpdate();
@@ -77,7 +72,8 @@ let CompactFloorSelector = class extends BaseFloorSelector {
       active: !!currentFloor,
       open: this.isOpen
     })}
-          style="border: ${this.borderWidth}px solid ${this.borderColor};"
+          style="border: var(--floor-selector-border-width, 1px) solid var(--floor-selector-border-color, #251660);"
+          ?disabled=${this.disabled}
           @click=${this._toggleDropdown}
         >
           <span>${currentFloorName}</span>
@@ -109,8 +105,7 @@ let CompactFloorSelector = class extends BaseFloorSelector {
     `;
   }
 };
-_borderColor = new WeakMap();
-_borderWidth = new WeakMap();
+_disabled = new WeakMap();
 CompactFloorSelector.styles = [
   i`
       :host {
@@ -125,30 +120,36 @@ CompactFloorSelector.styles = [
       }
 
       .floor-button {
-        background: #fff;
-        border-radius: 8px;
+        font-family: var(--floor-selector-font-family, inherit);
+        background: var(--floor-selector-surface, #fff);
+        border-radius: var(--floor-selector-radius, 8px);
         padding: 8px 12px;
         font-size: 14px;
         font-weight: 500;
-        color: #251660;
+        color: var(--floor-selector-color, #251660);
         cursor: pointer;
         display: flex;
         align-items: center;
         gap: 8px;
         min-width: 120px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--floor-selector-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
         transition: all 0.2s ease;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        border: var(--floor-selector-border-width, 1px) solid var(--floor-selector-border-color, #251660);
       }
 
       .floor-button:hover {
-        border-color: #007bff;
-        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
+        border-color: var(--floor-selector-hover-accent, #007bff);
+        box-shadow: 0 2px 8px color-mix(in srgb, var(--floor-selector-hover-accent, #007bff) 20%, transparent);
       }
 
       .floor-button.active {
-        background: #fff;
-        color: #251660;
-        border-color: #251660;
+        background: var(--floor-selector-surface, #fff);
+        color: var(--floor-selector-color, #251660);
+        border-color: var(--floor-selector-border-color, #251660);
       }
 
       .floor-button.disabled {
@@ -156,6 +157,13 @@ CompactFloorSelector.styles = [
         cursor: not-allowed;
       }
 
+      .floor-button[disabled] {
+        background: var(--floor-selector-surface, #fff);
+        color: var(--floor-selector-color, #251660);
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
       .dropdown-arrow {
         width: 0;
         height: 0;
@@ -169,14 +177,18 @@ CompactFloorSelector.styles = [
         transform: rotate(180deg);
       }
 
+      .floor-button[disabled] .dropdown-arrow {
+        display: none;
+      }
+
       .floor-list {
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
-        background: #fff;
-        border: 1px solid #ddd;
-        border-radius: 8px;
+        background: var(--floor-selector-surface, #fff);
+        border: var(--floor-selector-border-width, 1px) solid color-mix(in srgb, var(--floor-selector-border-color, #251660) 30%, #ffffff);
+        border-radius: var(--floor-selector-radius, 8px);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         max-height: 200px;
         overflow-y: auto;
@@ -190,12 +202,17 @@ CompactFloorSelector.styles = [
       }
 
       .floor-option {
+        font-family: var(--floor-selector-font-family, inherit);
         padding: 8px 12px;
         cursor: pointer;
-        border-bottom: 1px solid #f0f0f0;
+        border-bottom: 1px solid color-mix(in srgb, var(--floor-selector-border-color, #251660) 20%, #ffffff);
         transition: background-color 0.2s ease;
         font-size: 14px;
-        color: #251660;
+        color: var(--floor-selector-color, #251660);
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
       }
 
       .floor-option:last-child {
@@ -203,12 +220,12 @@ CompactFloorSelector.styles = [
       }
 
       .floor-option:hover {
-        background-color: #f8f9fa;
+        background-color: color-mix(in srgb, var(--floor-selector-hover-accent, #007bff) 8%, #ffffff);
       }
 
       .floor-option.active {
-        background-color: #f3e7ff;
-        color: #251660;
+        background-color: var(--floor-selector-active-bg, #f3e7ff);
+        color: var(--floor-selector-color, #251660);
       }
 
       .floor-option.disabled {
@@ -240,14 +257,11 @@ CompactFloorSelector.styles = [
     `
 ];
 __decorateClass([
-  n({ type: String })
-], CompactFloorSelector.prototype, "borderColor", 1);
-__decorateClass([
-  n({ type: Number })
-], CompactFloorSelector.prototype, "borderWidth", 1);
+  n({ type: Boolean })
+], CompactFloorSelector.prototype, "disabled", 1);
 CompactFloorSelector = __decorateClass([
   t("compact-floor-selector")
 ], CompactFloorSelector);
 
 export { CompactFloorSelector };
-//# sourceMappingURL=compact-floor-selector-D-LPjNVW.js.map
+//# sourceMappingURL=compact-floor-selector-BS3kmZbM.js.map

package/dist/es/assets/{components-BGe90NOX.js → components-Cg181WRf.js}

@@ -1,5 +1,5 @@
-import { i as i$2, x, r, a as i$3, t as t$1, T } from './route-view-totems-Cu8sG0kp.js';
-import { R as RouteAnimationController, M as MarkerController } from './utils-4sQ3ZnpP.js';
+import { a as i$2, x, r, i as i$3, t as t$1, T } from './route-view-totems-Bpxdz9bU.js';
+import { R as RouteAnimationController, M as MarkerController } from './utils-D3oP0BX3.js';
 
 /**
  * @license
@@ -42,7 +42,7 @@ class s{get value(){return this.o}set value(s){this.setValue(s);}setValue(s,t=fa
 
 const sdkContext = n("lazarillo-sdk");
 
-const style$3 = ":host{display:block;height:100%;width:100%}#map,.maplibregl-canvas{width:100%;height:100%}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 20px 50px 0}.maplibregl-ctrl{bottom:var(--zoom-button-margin, 80px);right:var(--zoom-button-margin, 40px);border:3px solid #000;padding:0;border-radius:100px;background:#fff;overflow:hidden;display:flex;flex-direction:column;width:var(--zoom-button-size, 70px);height:calc(var(--zoom-button-size, 70px) * 1.8)}.maplibregl-ctrl button{background-color:transparent;box-shadow:none;border-radius:0;margin:0;font-size:calc(var(--zoom-button-size, 70px) * .45);font-weight:400;width:100%;height:100%;color:#000;transition:background-color .4s ease,color .4s ease}.maplibregl-ctrl button:hover{background-color:#000!important;color:#fff}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in{border-bottom:3px solid #000}.maplibregl-ctrl-group .maplibregl-ctrl-icon{background:none!important;display:none!important}.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in:after{content:\"+\";display:block;font-size:calc(var(--zoom-button-size, 70px) * .46);font-weight:600;line-height:1;text-align:center}.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out:after{content:\"–\";display:block;font-size:calc(var(--zoom-button-size, 70px) * .46);font-weight:600;line-height:1;text-align:center}#modal{position:absolute;width:100%;height:100%;background:#0003;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;justify-items:center;top:0;left:0;z-index:100}.modal-content{min-width:100px;min-height:100px;background-color:#fff;border:1px solid #000;border-radius:10px;padding:10px;width:fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}@media (max-width: 768px){#modal{align-items:flex-start;padding-top:60px}.modal-content{max-width:90%;margin:0 auto;border-radius:12px;box-shadow:0 4px 12px #00000026}}:host([compact-mode]){border-radius:12px!important;overflow:hidden!important;box-shadow:0 4px 12px #00000026!important}:host([compact-mode]) #map{border-radius:12px}:host([compact-mode]) .maplibregl-canvas{border-radius:12px}.modal-text{font-family:Poppins,sans-serif;font-size:20pt;font-weight:500;color:#000}.modal-icon{height:100px;align-self:center}.maplibregl-marker:has(.popup){z-index:10}.maplibregl-marker:not(:has(.popup)){z-index:5}.maplibregl-ctrl-compass{visibility:hidden;height:0px}";
+const style$3 = ":host{display:block;height:100%;width:100%}#map,.maplibregl-canvas{width:100%;height:100%}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 20px 50px 0}.maplibregl-ctrl{bottom:var(--zoom-button-margin, 80px);right:var(--zoom-button-margin, 40px);border:var(--mvx-border-width, 0px) solid var(--mvx-border-color, transparent);padding:0;border-radius:100px;background:#fff;overflow:hidden;display:flex;flex-direction:column;width:var(--zoom-button-size, 70px);height:calc(var(--zoom-button-size, 70px) * 1.8)}.maplibregl-ctrl button{font-family:var(--mvx-font-family, inherit);background-color:transparent;box-shadow:none;border-radius:0;margin:0;font-size:calc(var(--zoom-button-size, 70px) * .45);font-weight:400;width:100%;height:100%;color:var(--mvx-primary-color, #251660);transition:background-color .4s ease,color .4s ease}.maplibregl-ctrl button:hover{background-color:var(--mvx-primary-color, #251660)!important;color:#fff}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in{border-bottom:var(--zoom-border-width, 0px) solid var(--zoom-border-color, transparent)}.maplibregl-ctrl-group .maplibregl-ctrl-icon{background:none!important;display:none!important}.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in:after{content:\"+\";display:block;font-size:calc(var(--zoom-button-size, 70px) * .46);font-weight:600;line-height:1;text-align:center}.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out:after{content:\"–\";display:block;font-size:calc(var(--zoom-button-size, 70px) * .46);font-weight:600;line-height:1;text-align:center}#modal{position:absolute;width:100%;height:100%;background:#0003;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;justify-items:center;top:0;left:0;z-index:100}.modal-content{min-width:100px;min-height:100px;background-color:#fff;border:1px solid #000;border-radius:10px;padding:10px;width:fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}@media (max-width: 768px){#modal{align-items:flex-start;padding-top:60px}.modal-content{max-width:90%;margin:0 auto;border-radius:12px;box-shadow:0 4px 12px #00000026}}:host([compact-mode]){border-radius:12px!important;overflow:hidden!important;box-shadow:0 4px 12px #00000026!important}:host([compact-mode]) #map{border-radius:12px}:host([compact-mode]) .maplibregl-canvas{border-radius:12px}.modal-text{font-family:Poppins,sans-serif;font-size:20pt;font-weight:500;color:#000}.modal-icon{height:100px;align-self:center}.maplibregl-marker:has(.popup){z-index:10}.maplibregl-marker:not(:has(.popup)){z-index:5}.maplibregl-ctrl-compass{visibility:hidden;height:0px}";
 
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
@@ -236,13 +236,10 @@ let CustomMap = class extends i$2 {
       const zoomSize = parentElement.getAttribute("zoom-size") || "normal";
       if (compactMode) {
         this.setAttribute("compact-mode", "");
-        console.log("Modo compacto activado");
       } else {
         this.removeAttribute("compact-mode");
-        console.log("Modo compacto desactivado");
       }
       this.setAttribute("zoom-size", zoomSize);
-      console.log("Tamaño de zoom aplicado:", zoomSize);
     }
   }
   render() {
@@ -294,7 +291,7 @@ CustomMap.styles = [
         --zoom-button-margin: 16px;
       }
 
-      /* Aplicar variables CSS a los botones de zoom */
+      /* Apply CSS variables to zoom buttons */
       :host([zoom-size='small']) .maplibregl-ctrl {
         width: 32px !important;
         height: 58px !important;
@@ -316,7 +313,7 @@ CustomMap.styles = [
         right: 16px !important;
       }
 
-      /* Ajustar tamaño de fuente según el tamaño del botón */
+      /* Adjust font size according to button size */
       :host([zoom-size='small']) .maplibregl-ctrl button {
         font-size: 14px !important;
       }
@@ -340,6 +337,26 @@ CustomMap.styles = [
       :host([zoom-size='large']) .maplibregl-ctrl-group button::after {
         font-size: 22px !important;
       }
+
+      /* Zoom button border driven by CSS variables (no attribute gating) */
+      .maplibregl-ctrl {
+        border: var(--zoom-border-width, 0px) solid var(--zoom-border-color, transparent) !important;
+      }
+
+      .maplibregl-ctrl button {
+        border: none;
+        border-radius: unset;
+      }
+
+      /* Divider between zoom buttons based on border width */
+      .maplibregl-ctrl button:first-child {
+        border-bottom: var(--zoom-border-width, 0px) solid var(--zoom-border-color, transparent) !important;
+      }
+
+      .maplibregl-ctrl button:hover {
+        background-color: var(--zoom-border-color, #251660) !important;
+        color: #fff !important;
+      }
     `
 ];
 __decorateClass$4([
@@ -3783,4 +3800,4 @@ const routeOptions = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProper
 }, Symbol.toStringTag, { value: 'Module' }));
 
 export { BaseFloorSelector as B, customMap as c, e, floorSelector as f, i$1 as i, qrModal as q, routeOptions as r, sdkContext as s };
-//# sourceMappingURL=components-BGe90NOX.js.map
+//# sourceMappingURL=components-Cg181WRf.js.map

package/dist/es/assets/{map-view-with-modal-CwE9e04X.js → map-view-with-modal-DRCi4MZE.js}

@@ -1,5 +1,5 @@
-import { i, a as i$1, A as AnalyticsController, l as loadCustomMap, b as loadCompactFloorSelector, R as RollbarController, x, n, t } from './route-view-totems-Cu8sG0kp.js';
-import { S as SDKController } from './utils-4sQ3ZnpP.js';
+import { i, n, a as i$1, A as AnalyticsController, l as loadCustomMap, b as loadCompactFloorSelector, R as RollbarController, x, t } from './route-view-totems-Bpxdz9bU.js';
+import { S as SDKController } from './utils-D3oP0BX3.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -18,49 +18,10 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _apiKey, _parentPlaceId, _locale, _placeId, _compactMode, _zoomButtonSize, _showFloorSelector, _floorSelectorPosition, _floorSelectorBorderColor, _floorSelectorBorderWidth;
-let MapViewWithModal = class extends i {
+var _apiKey, _parentPlaceId, _locale, _placeId, _compactMode, _zoomButtonSize, _showFloorSelector, _floorSelectorPosition, _floorSelectorDisabled;
+let MapViewWithModal = class extends i$1 {
   constructor() {
     super(...arguments);
-    this.styles = [
-      i$1`
-      :host {
-        display: block;
-        height: 100%;
-        width: 100%;
-      }
-    `,
-      i$1`
-      .map-container {
-        height: 100%;
-        width: 100%;
-      }
-    `,
-      i$1`
-      :host([compact-mode]) .map-container {
-        border-radius: 12px;
-        overflow: hidden;
-      }
-    `,
-      i$1`
-      :host([zoom-size='small']) ::slotted(*) {
-        --zoom-button-size: 32px;
-        --zoom-button-margin: 8px;
-      }
-    `,
-      i$1`
-      :host([zoom-size='normal']) ::slotted(*) {
-        --zoom-button-size: 40px;
-        --zoom-button-margin: 12px;
-      }
-    `,
-      i$1`
-      :host([zoom-size='large']) ::slotted(*) {
-        --zoom-button-size: 48px;
-        --zoom-button-margin: 16px;
-      }
-    `
-    ];
     __privateAdd(this, _apiKey, "");
     __privateAdd(this, _parentPlaceId, "");
     __privateAdd(this, _locale, "es");
@@ -69,8 +30,7 @@ let MapViewWithModal = class extends i {
     __privateAdd(this, _zoomButtonSize, "normal");
     __privateAdd(this, _showFloorSelector, true);
     __privateAdd(this, _floorSelectorPosition, "top-left");
-    __privateAdd(this, _floorSelectorBorderColor, "#251660");
-    __privateAdd(this, _floorSelectorBorderWidth, 1);
+    __privateAdd(this, _floorSelectorDisabled, false);
     this.sdkController = new SDKController(this);
     this.analyticsController = AnalyticsController.getInstance();
     this.currentFloorId = "";
@@ -123,17 +83,11 @@ let MapViewWithModal = class extends i {
   set floorSelectorPosition(_) {
     __privateSet(this, _floorSelectorPosition, _);
   }
-  get floorSelectorBorderColor() {
-    return __privateGet(this, _floorSelectorBorderColor);
-  }
-  set floorSelectorBorderColor(_) {
-    __privateSet(this, _floorSelectorBorderColor, _);
-  }
-  get floorSelectorBorderWidth() {
-    return __privateGet(this, _floorSelectorBorderWidth);
+  get floorSelectorDisabled() {
+    return __privateGet(this, _floorSelectorDisabled);
   }
-  set floorSelectorBorderWidth(_) {
-    __privateSet(this, _floorSelectorBorderWidth, _);
+  set floorSelectorDisabled(_) {
+    __privateSet(this, _floorSelectorDisabled, _);
   }
   async _loadComponents() {
     await Promise.all([loadCustomMap(), loadCompactFloorSelector()]);
@@ -207,6 +161,11 @@ let MapViewWithModal = class extends i {
           class="map-container"
           ?compact-mode=${this.compactMode}
           zoom-size=${this.zoomButtonSize}
+          style="
+            /* Forward theme to custom-map */
+            --zoom-border-color: var(--mvx-border-color);
+            --zoom-border-width: var(--mvx-border-width);
+          "
           @mapReady=${this._mapReadyHandler}
           @cameraInitialized=${this._cameraInitializedHandler}
           @floorChange=${this._updateFloorHandler}
@@ -217,8 +176,19 @@ let MapViewWithModal = class extends i {
               <div style="position: absolute; ${this.getFloorSelectorPositionStyles()} z-index: 1000;">
                 <compact-floor-selector
                   @floorChange=${this._updateFloorHandler}
-                  border-color=${this.floorSelectorBorderColor}
-                  border-width=${this.floorSelectorBorderWidth}
+                  ?disabled=${this.floorSelectorDisabled}
+                  style="
+                    /* Forward theme to floor selector */
+                    --floor-selector-surface: var(--mvx-surface-color);
+                    --floor-selector-color: var(--mvx-on-surface-color);
+                    --floor-selector-border-color: var(--mvx-border-color);
+                    --floor-selector-border-width: var(--mvx-border-width);
+                    --floor-selector-radius: var(--mvx-radius);
+                    --floor-selector-shadow: var(--mvx-shadow);
+                    --floor-selector-hover-accent: var(--mvx-primary-color);
+                    --floor-selector-active-bg: #f3e7ff;
+                    --floor-selector-font-family: var(--mvx-font-family);
+                  "
                 ></compact-floor-selector>
               </div>
             ` : ""}
@@ -234,8 +204,42 @@ _compactMode = /* @__PURE__ */ new WeakMap();
 _zoomButtonSize = /* @__PURE__ */ new WeakMap();
 _showFloorSelector = /* @__PURE__ */ new WeakMap();
 _floorSelectorPosition = /* @__PURE__ */ new WeakMap();
-_floorSelectorBorderColor = /* @__PURE__ */ new WeakMap();
-_floorSelectorBorderWidth = /* @__PURE__ */ new WeakMap();
+_floorSelectorDisabled = /* @__PURE__ */ new WeakMap();
+MapViewWithModal.styles = [
+  i`
+      :host {
+        display: block;
+        height: 100%;
+        width: 100%;
+
+        /* THEME: Base colors */
+        --mvx-primary-color: #251660;
+        --mvx-surface-color: #ffffff;
+        --mvx-on-surface-color: #251660;
+
+        /* THEME: Border and elevation */
+        --mvx-border-color: var(--mvx-primary-color);
+        --mvx-border-width: 1px;
+        --mvx-radius: 8px;
+        --mvx-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+        /* THEME: Typography */
+        --mvx-font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+      }
+    `,
+  i`
+      .map-container {
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  i`
+      :host([compact-mode]) .map-container {
+        border-radius: 12px;
+        overflow: hidden;
+      }
+    `
+];
 __decorateClass([
   n({ type: String })
 ], MapViewWithModal.prototype, "apiKey", 1);
@@ -249,10 +253,10 @@ __decorateClass([
   n({ type: String })
 ], MapViewWithModal.prototype, "placeId", 1);
 __decorateClass([
-  n({ type: Boolean })
+  n({ type: Boolean, attribute: "compact-mode", reflect: true })
 ], MapViewWithModal.prototype, "compactMode", 1);
 __decorateClass([
-  n({ type: String })
+  n({ type: String, attribute: "zoom-size", reflect: true })
 ], MapViewWithModal.prototype, "zoomButtonSize", 1);
 __decorateClass([
   n({ type: Boolean })
@@ -261,14 +265,11 @@ __decorateClass([
   n({ type: String })
 ], MapViewWithModal.prototype, "floorSelectorPosition", 1);
 __decorateClass([
-  n({ type: String })
-], MapViewWithModal.prototype, "floorSelectorBorderColor", 1);
-__decorateClass([
-  n({ type: Number })
-], MapViewWithModal.prototype, "floorSelectorBorderWidth", 1);
+  n({ type: Boolean })
+], MapViewWithModal.prototype, "floorSelectorDisabled", 1);
 MapViewWithModal = __decorateClass([
   t("map-view-with-modal")
 ], MapViewWithModal);
 
 export { MapViewWithModal as M };
-//# sourceMappingURL=map-view-with-modal-CwE9e04X.js.map
+//# sourceMappingURL=map-view-with-modal-DRCi4MZE.js.map

package/dist/es/assets/{route-view-totems-Cu8sG0kp.js → route-view-totems-Bpxdz9bU.js}

@@ -1,4 +1,4 @@
-import { S as SDKController } from './utils-4sQ3ZnpP.js';
+import { S as SDKController } from './utils-D3oP0BX3.js';
 
 /**
  * @license
@@ -184,11 +184,11 @@ class AnalyticsController {
   }
 }
 
-const loadCustomMap = () => import('./components-BGe90NOX.js').then(n => n.c);
-const loadFloorSelector = () => import('./components-BGe90NOX.js').then(n => n.f);
-const loadCompactFloorSelector = () => import('./compact-floor-selector-D-LPjNVW.js');
-const loadQrModal = () => import('./components-BGe90NOX.js').then(n => n.q);
-const loadRouteOptions = () => import('./components-BGe90NOX.js').then(n => n.r);
+const loadCustomMap = () => import('./components-Cg181WRf.js').then(n => n.c);
+const loadFloorSelector = () => import('./components-Cg181WRf.js').then(n => n.f);
+const loadCompactFloorSelector = () => import('./compact-floor-selector-BS3kmZbM.js');
+const loadQrModal = () => import('./components-Cg181WRf.js').then(n => n.q);
+const loadRouteOptions = () => import('./components-Cg181WRf.js').then(n => n.r);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -334,6 +334,11 @@ let RouteViewTotems = class extends i {
           @mapReady=${this._mapReadyHandler}
           @cameraInitialized=${this._cameraInitializedHandler}
           @floorChange=${this._updateFloorHandler}
+          style="
+            /* Forward theme to custom-map */
+            --zoom-border-color: #000;
+            --zoom-border-width: 3px;
+          "
         ></custom-map>
         <floor-selector @floorChange=${this._updateFloorHandler}></floor-selector>
         <route-options></route-options>
@@ -412,5 +417,5 @@ RouteViewTotems = __decorateClass([
   t("route-view-totems")
 ], RouteViewTotems);
 
-export { AnalyticsController as A, RollbarController as R, T, i$3 as a, loadCompactFloorSelector as b, RouteViewTotems as c, i, loadCustomMap as l, n, r$3 as r, t, x };
-//# sourceMappingURL=route-view-totems-Cu8sG0kp.js.map
+export { AnalyticsController as A, RollbarController as R, T, i as a, loadCompactFloorSelector as b, RouteViewTotems as c, i$3 as i, loadCustomMap as l, n, r$3 as r, t, x };
+//# sourceMappingURL=route-view-totems-Bpxdz9bU.js.map

package/dist/es/assets/{utils-4sQ3ZnpP.js → utils-D3oP0BX3.js}

@@ -1,5 +1,5 @@
-import { i, s as sdkContext } from './components-BGe90NOX.js';
-import { R as RollbarController } from './route-view-totems-Cu8sG0kp.js';
+import { i, s as sdkContext } from './components-Cg181WRf.js';
+import { R as RollbarController } from './route-view-totems-Bpxdz9bU.js';
 
 var dist = {exports: {}};
 
@@ -12950,4 +12950,4 @@ class RouteAnimationController {
 }
 
 export { MarkerController as M, RouteAnimationController as R, SDKController as S };
-//# sourceMappingURL=utils-4sQ3ZnpP.js.map
+//# sourceMappingURL=utils-D3oP0BX3.js.map

package/dist/es/index.js

@@ -1,3 +1,3 @@
-export { c as RouteViewTotems } from './assets/route-view-totems-Cu8sG0kp.js';
-export { M as MapViewWithModal } from './assets/map-view-with-modal-CwE9e04X.js';
+export { c as RouteViewTotems } from './assets/route-view-totems-Bpxdz9bU.js';
+export { M as MapViewWithModal } from './assets/map-view-with-modal-DRCi4MZE.js';
 //# sourceMappingURL=index.js.map

package/dist/es/route-view-totems.js

@@ -1,3 +1,3 @@
-export { c as RouteViewTotems } from './assets/route-view-totems-Cu8sG0kp.js';
-import './assets/utils-4sQ3ZnpP.js';
+export { c as RouteViewTotems } from './assets/route-view-totems-Bpxdz9bU.js';
+import './assets/utils-D3oP0BX3.js';
 //# sourceMappingURL=route-view-totems.js.map