@limetech/lime-elements 40.5.0 → 40.5.2

package/dist/cjs/limel-hotkey_4.cjs.entry.js

@@ -1957,6 +1957,7 @@ const Portal = class {
         this.anchor = null;
         this.loaded = false;
         this.writtenStyles = {};
+        this.scheduledRestyle = null;
         this.parents = new WeakMap();
     }
     disconnectedCallback() {
@@ -1991,7 +1992,7 @@ const Portal = class {
         }
     }
     render() {
-        return index.h("slot", { key: '32f6da268363dd30db38fb8189ee2d6414890959' });
+        return index.h("slot", { key: 'ce5bfa7d65680773e1917e0a6d54256f5852bd65' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -2117,6 +2118,7 @@ const Portal = class {
     destroyPopper() {
         var _a, _b;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.cancelScheduledRestyle();
         (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.destroy();
         this.popperInstance = null;
     }
@@ -2126,14 +2128,33 @@ const Portal = class {
             return;
         }
         (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new ResizeObserver(() => {
-            if (this.popperInstance) {
-                this.styleContainer();
-                this.popperInstance.update();
-            }
+            this.scheduleRestyle();
         }));
         this.observer.observe(this.container);
         this.observer.observe(this.anchorElement);
     }
+    // Restyling can resize the container this observer watches, so writing from
+    // inside the callback re-enters it as a `ResizeObserver loop`.
+    scheduleRestyle() {
+        if (this.scheduledRestyle !== null) {
+            return;
+        }
+        this.scheduledRestyle = requestAnimationFrame(() => {
+            this.scheduledRestyle = null;
+            if (!this.popperInstance) {
+                return;
+            }
+            this.styleContainer();
+            this.popperInstance.update();
+        });
+    }
+    cancelScheduledRestyle() {
+        if (this.scheduledRestyle === null) {
+            return;
+        }
+        cancelAnimationFrame(this.scheduledRestyle);
+        this.scheduledRestyle = null;
+    }
     createPopperConfig() {
         const placement = this.getPlacement(this.openDirection);
         const flipPlacement = this.getFlipPlacement(this.openDirection);

package/dist/cjs/limel-popover_2.cjs.entry.js

@@ -165,7 +165,7 @@ const Popover = class {
 };
 Popover.style = popoverCss();
 
-const popoverSurfaceCss = () => `@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-box-shadow, var(--shadow-depth-16));backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}`;
+const popoverSurfaceCss = () => `@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--popover-box-shadow, var(--shadow-depth-16));border:1px solid rgb(var(--contrast-1200), 0.1);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.95;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}`;
 
 const PopoverSurface = class {
     constructor(hostRef) {

package/dist/collection/components/popover-surface/popover-surface.css

@@ -119,6 +119,7 @@
   min-height: 0;
   border-radius: var(--popover-border-radius, 0.75rem);
   box-shadow: var(--popover-box-shadow, var(--shadow-depth-16));
+  border: 1px solid rgb(var(--contrast-1200), 0.1);
   backdrop-filter: blur(0.3125rem);
   -webkit-backdrop-filter: blur(0.3125rem);
 }

package/dist/collection/components/portal/portal.js

@@ -79,6 +79,7 @@ export class Portal {
         this.anchor = null;
         this.loaded = false;
         this.writtenStyles = {};
+        this.scheduledRestyle = null;
         this.parents = new WeakMap();
     }
     disconnectedCallback() {
@@ -113,7 +114,7 @@ export class Portal {
         }
     }
     render() {
-        return h("slot", { key: '32f6da268363dd30db38fb8189ee2d6414890959' });
+        return h("slot", { key: 'ce5bfa7d65680773e1917e0a6d54256f5852bd65' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -239,6 +240,7 @@ export class Portal {
     destroyPopper() {
         var _a, _b;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.cancelScheduledRestyle();
         (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.destroy();
         this.popperInstance = null;
     }
@@ -248,14 +250,33 @@ export class Portal {
             return;
         }
         (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = new ResizeObserver(() => {
-            if (this.popperInstance) {
-                this.styleContainer();
-                this.popperInstance.update();
-            }
+            this.scheduleRestyle();
         }));
         this.observer.observe(this.container);
         this.observer.observe(this.anchorElement);
     }
+    // Restyling can resize the container this observer watches, so writing from
+    // inside the callback re-enters it as a `ResizeObserver loop`.
+    scheduleRestyle() {
+        if (this.scheduledRestyle !== null) {
+            return;
+        }
+        this.scheduledRestyle = requestAnimationFrame(() => {
+            this.scheduledRestyle = null;
+            if (!this.popperInstance) {
+                return;
+            }
+            this.styleContainer();
+            this.popperInstance.update();
+        });
+    }
+    cancelScheduledRestyle() {
+        if (this.scheduledRestyle === null) {
+            return;
+        }
+        cancelAnimationFrame(this.scheduledRestyle);
+        this.scheduledRestyle = null;
+    }
     createPopperConfig() {
         const placement = this.getPlacement(this.openDirection);
         const flipPlacement = this.getFlipPlacement(this.openDirection);