@watermarkinsights/ripple 5.31.1-alpha.2 → 5.31.1-alpha.3

package/dist/collection/components/wm-flyout/wm-flyout.css

@@ -888,17 +888,19 @@
 }
 
 :host {
-  display: block;
+  display: none;
   position: relative;
-  inline-size: var(--flyout-width, 45rem);
+  inline-size: 0;
+  block-size: 0;
+  transition: display 250ms allow-discrete;
 }
 
 :host * {
   color: inherit;
 }
 
-:host(.collapsed) {
-  display: none;
+:host(.visible) {
+  display: block;
 }
 
 dialog {
@@ -925,6 +927,8 @@ dialog {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transform: translateX(100%);
+  transition: transform 250ms ease-out, overlay 250ms ease-out allow-discrete, display 250ms ease-out allow-discrete;
 }
 @media (max-width: 33.375rem) {
   dialog {
@@ -1053,55 +1057,24 @@ dialog .flyout-footer .button-group {
 }
 dialog::backdrop {
   background: rgba(25, 25, 25, 0.4);
+  opacity: 0;
+  transition: opacity 250ms ease-out, overlay 250ms ease-out allow-discrete, display 250ms ease-out allow-discrete;
 }
 dialog:not([open]) {
   display: none;
 }
-dialog.slide-in {
-  transform: translateX(100%);
-  animation: slideIn 250ms ease-out forwards;
-  animation-delay: 50ms;
-}
-dialog.slide-in::backdrop {
-  animation: fadeIn 50ms ease-out forwards;
+dialog[open] {
+  transform: translateX(0);
 }
-dialog.slide-out {
-  animation: slideOut 250ms ease-out forwards;
-}
-dialog.slide-out ::backdrop {
-  animation: fadeOut 50ms ease-out forwards;
-  animation-delay: 50ms;
+dialog[open]::backdrop {
+  opacity: 1;
 }
 
-@keyframes slideIn {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes slideOut {
-  from {
-    transform: translateX(0);
-  }
-  to {
+@starting-style {
+  dialog[open] {
     transform: translateX(100%);
   }
-}
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
+  dialog[open]::backdrop {
     opacity: 0;
   }
 }

package/dist/collection/components/wm-flyout/wm-flyout.js

@@ -186,9 +186,6 @@ export class Flyout {
             this.focusOnOpenEl.focus();
         };
         this.el.style.setProperty("--flyout-width", this.flyoutWidth);
-        if (!this.open) {
-            this.el.classList.add("collapsed");
-        }
     }
     componentDidLoad() {
         // Initialize and attach resize observer
@@ -241,8 +238,7 @@ export class Flyout {
         }
     }
     showFlyout() {
-        this.el.classList.remove("collapsed");
-        this.dialogEl.classList.add("slide-in");
+        this.el.classList.add("visible");
         this.returnFocusEl = document.activeElement;
         this.initialBodyOverflow = document.body.style.overflow;
         document.body.style.overflow = "hidden"; // Prevents background scrolling
@@ -251,27 +247,20 @@ export class Flyout {
             this.checkBreadcrumbOverflow();
             this.focusOnOpenEl.focus();
         });
-        setTimeout(() => {
-            this.dialogEl.classList.remove("slide-in");
-        }, 300);
     }
     hideFlyout() {
-        this.dialogEl.classList.add("slide-out");
+        this.el.classList.remove("visible");
+        document.body.style.overflow = this.initialBodyOverflow; // TypeScript doesn't like that this can be undefined, but we do want to assign undefined if that's what initialBodyOverFlow is set to.
+        this.dialogEl.close();
+        // Return focus to the trigger once the dialog has closed, if focus fell back to the body.
         setTimeout(() => {
-            // Wait for slide out animation to complete before closing
-            this.dialogEl.classList.remove("slide-out");
-            document.body.style.overflow = this.initialBodyOverflow; // TypeScript doesn't like that this can be undefined, but we do want to assign undefined if that's what initialBodyOverFlow is set to.
-            this.dialogEl.close();
-            this.el.classList.add("collapsed");
-            setTimeout(() => {
-                if (this.returnFocusEl && document.activeElement === document.body) {
-                    if (this.returnFocusEl.tagName === "WM-MENUITEM") {
-                        this.returnFocusEl = this.returnFocusEl.parentElement;
-                    }
-                    this.returnFocusEl.focus();
+            if (this.returnFocusEl && document.activeElement === document.body) {
+                if (this.returnFocusEl.tagName === "WM-MENUITEM") {
+                    this.returnFocusEl = this.returnFocusEl.parentElement;
                 }
-            }, 20);
-        }, 250);
+                this.returnFocusEl.focus();
+            }
+        }, 20);
     }
     renderBreadcrumbList() {
         if (this.breadcrumb) {
@@ -297,7 +286,7 @@ export class Flyout {
         }
     }
     render() {
-        return (h(Host, { key: 'cee80fe753b00eb2a104d0d61f25e9b2d1988007' }, h("dialog", { key: 'c68eb2bc6d7ab3ea160fa0de0c8f13058e1b21da', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '7480babcef43c76c88ea062d9b6a5d56793b6632', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: '9766da450d3f737e2fba67a9cdd0fc5a131bafd2', class: "flyout-content" }, h("slot", { key: '59ef6cc68e566c48bf1fde7fd770d61b4cfe7493' })), this.renderFooter(), h("div", { key: '150dc8cfcff6cd2c6aab27baf0d88c1a58dc0b56', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: 'e5a1f831594d2035c2ddd00839fbfe3ce17d09e9' }, h("dialog", { key: '86431cc161af2e84a859b0737d4314f1113201bd', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'd62ec25438efbc9fba42f228ba5857ccd10a0392', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'dc2fd559f5636069314e0753857e59884699cf8a', class: "flyout-content" }, h("slot", { key: '063110f8c5f757c5cd34ec0f6f7a2f5cbd235412' })), this.renderFooter(), h("div", { key: '36d90d2ede3d50c6e0246902f253910b6489056f', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
     }
     static get is() { return "wm-flyout"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-21T19:56:15",
+  "timestamp": "2026-07-21T21:14:02",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.21.0",

package/dist/esm/{app-globals-46d6011b.js → app-globals-da7fe8a2.js}

@@ -1,6 +1,6 @@
 import './index-3425d80d.js';
 
-const version = "5.31.1-alpha.2";
+const version = "5.31.1-alpha.3";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-3425d80d.js';
 export { s as setNonce } from './index-3425d80d.js';
-import { g as globalScripts } from './app-globals-46d6011b.js';
+import { g as globalScripts } from './app-globals-da7fe8a2.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-3425d80d.js';
 export { s as setNonce } from './index-3425d80d.js';
-import { g as globalScripts } from './app-globals-46d6011b.js';
+import { g as globalScripts } from './app-globals-da7fe8a2.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com