@descope/web-components-ui 3.14.10 → 3.15.1

package/dist/index.esm.js

@@ -15686,6 +15686,10 @@ const customMixin$8 = (superclass) =>
       return this.getAttribute('opened') === 'true';
     }
 
+    get closeOnOutsideClick() {
+      return this.getAttribute('close-on-outside-click') === 'true';
+    }
+
     handleOpened() {
       if (this.opened) {
         this.style.display = '';
@@ -15751,6 +15755,28 @@ const customMixin$8 = (superclass) =>
       overlay._enterModalState = () => {};
 
       overlay.close = () => false;
+
+      // close the modal when the user clicks/taps the backdrop (outside the modal
+      // box). Vaadin's own outside-click does not fire here because we keep the
+      // overlay in the shadow DOM (see _attachOverlay above), which leaves it out
+      // of Vaadin's overlay stack, so we detect the backdrop click ourselves.
+      // the listener is always attached and reads `closeOnOutsideClick` at click
+      // time, so toggling the attribute after init is respected.
+      overlay.addEventListener('click', (event) => {
+        if (!this.closeOnOutsideClick || !this.opened) return;
+
+        // the visible modal box; clicks inside it (content + its padding) keep
+        // the modal open, only clicks on the dimmed backdrop close it. if we
+        // can't find the box, don't close - safer than closing on an inside click
+        const overlayPart = overlay.shadowRoot?.querySelector('[part="overlay"]');
+        if (!overlayPart || event.composedPath().includes(overlayPart)) {
+          return;
+        }
+
+        // just close ourselves; consumers that need to react (e.g. ModalDriver
+        // resetting the content) observe the `opened` attribute
+        this.removeAttribute('opened');
+      });
     }
   };
 
@@ -18279,6 +18305,17 @@ const ListClass = compose$1(
         selector: () => 'slot[name="empty-state"]',
         property: 'font-family',
       },
+      // allow overriding empty state height and padding from parent list components:
+      emptyStateVerticalPadding: [
+        {
+          selector: () => 'slot[name="empty-state"]',
+          property: 'padding-top',
+        },
+        {
+          selector: () => 'slot[name="empty-state"]',
+          property: 'padding-bottom',
+        },
+      ],
     },
   }),
   draggableMixin$1,
@@ -25024,6 +25061,14 @@ const OutboundAppsClass = compose$1(
           property: ListClass.cssVarList.horizontalPadding,
         },
       ],
+      emptyStateMinHeight: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.minHeight,
+      },
+      emptyStateVerticalPadding: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.emptyStateVerticalPadding,
+      },
     },
   }),
   draggableMixin$1,
@@ -25055,6 +25100,8 @@ const outboundApps = {
   [vars$R.listPadding]: '0',
   [vars$R.listBorderWidth]: '0',
   [vars$R.listBoxShadow]: 'none',
+  [vars$R.emptyStateMinHeight]: '0',
+  [vars$R.emptyStateVerticalPadding]: globals.spacing.lg,
 
   size: {
     xs: {
@@ -25551,6 +25598,14 @@ const TrustedDevicesClass = compose$1(
           property: ListClass.cssVarList.horizontalPadding,
         },
       ],
+      emptyStateMinHeight: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.minHeight,
+      },
+      emptyStateVerticalPadding: {
+        selector: () => ListClass.componentName,
+        property: ListClass.cssVarList.emptyStateVerticalPadding,
+      },
 
       itemVerticalPadding: {
         selector: ListItemClass.componentName,
@@ -25655,6 +25710,8 @@ const TrustedDevices = {
   [vars$P.listPadding]: '0',
   [vars$P.listBoxShadow]: 'none',
   [vars$P.listItemsGap]: globals.spacing.lg,
+  [vars$P.emptyStateMinHeight]: '0',
+  [vars$P.emptyStateVerticalPadding]: globals.spacing.lg,
 
   [vars$P.itemBorderColor]: globals.colors.surface.light,
   [vars$P.itemVerticalPadding]: globals.spacing.lg,