@getflip/swirl-components 0.208.2 → 0.208.3

package/dist/collection/components/swirl-app-layout/swirl-app-layout.css

@@ -91,12 +91,24 @@
         .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid {
           animation: app-layout-no-nav-sidebar-slide-in 0.3s;
         }
+
+          @media (prefers-reduced-motion) {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid {
+            animation: none
+        }
+          }
       }
 
 @media (min-width: 768px) {
         .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid {
           animation: app-layout-no-nav-sidebar-slide-out 0.3s;
         }
+
+          @media (prefers-reduced-motion) {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid {
+            animation: none
+        }
+          }
       }
 
 @media (min-width: 768px) {
@@ -123,12 +135,24 @@
           "header body sidebar"
           "navigation body sidebar";
       }
+
+        @media (prefers-reduced-motion) {
+      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
+          animation: none
+      }
+        }
     }
 
 @media (min-width: 1800px) {
       .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid {
         animation: app-layout-sidebar-slide-out 0.3s;
       }
+
+        @media (prefers-reduced-motion) {
+      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing .app-layout__grid {
+          animation: none
+      }
+        }
     }
 
 @media (min-width: 768px) {
@@ -217,6 +241,13 @@
 .app-layout--sidebar-closing .app-layout__sidebar {
       animation: app-layout-sidebar-overlay-slide-out 0.3s
   }
+
+      @media (prefers-reduced-motion) {
+
+.app-layout--sidebar-closing .app-layout__sidebar {
+        animation: none
+  }
+      }
     }
 
 @media (min-width: 1800px) {
@@ -449,6 +480,13 @@
 .app-layout__sidebar {
     animation: app-layout-slide-in 0.3s
 }
+
+    @media (prefers-reduced-motion) {
+
+.app-layout__sidebar {
+      animation: none
+}
+    }
   }
 
 @media (min-width: 1800px) {
@@ -609,6 +647,23 @@
         animation: app-layout-slide-out 0.4s;
       }
 
+        @media (prefers-reduced-motion) {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__header,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__navigation,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__header,
+      .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__navigation {
+          animation: none
+      }
+        }
+
       .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
       .app-layout--mobile-view-body
     ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
@@ -617,6 +672,17 @@
         animation: app-layout-slide-in 0.4s;
       }
 
+        @media (prefers-reduced-motion) {
+
+      .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
+          animation: none
+      }
+        }
+
         .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
       .app-layout--mobile-view-body
     ) .app-layout__body:after, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
@@ -632,6 +698,17 @@
           content: "";
           animation: app-layout-fade-in 0.4s;
         }
+
+          @media (prefers-reduced-motion) {
+
+        .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body:after, .app-layout--transition-style-slides.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body:after {
+            animation: none
+        }
+          }
     }
 
 @media (max-width: 767px) {
@@ -669,6 +746,16 @@
         animation: app-layout-slide-out 0.4s;
       }
 
+        @media (prefers-reduced-motion) {
+      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__body, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body {
+          animation: none
+      }
+        }
+
       .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
       .app-layout--mobile-view-sidebar
     ) .app-layout__sidebar, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
@@ -677,6 +764,17 @@
         animation: app-layout-slide-in 0.4s;
       }
 
+        @media (prefers-reduced-motion) {
+
+      .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
+          animation: none
+      }
+        }
+
         .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
       .app-layout--mobile-view-sidebar
     ) .app-layout__sidebar:after, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
@@ -692,6 +790,17 @@
           content: "";
           animation: app-layout-fade-in 0.4s;
         }
+
+          @media (prefers-reduced-motion) {
+
+        .app-layout--transition-style-slides.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar:after, .app-layout--transition-style-slides.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar:after {
+            animation: none
+        }
+          }
     }
 
 @media (max-width: 991px) {
@@ -724,6 +833,16 @@
     ) .app-layout__body {
         animation: app-layout-scale-in 0.3s;
       }
+
+        @media (prefers-reduced-motion) {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-navigation:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__body, .app-layout--transition-style-dialog.app-layout--transitioning-to-navigation.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-navigation
+    ) .app-layout__body {
+          animation: none
+      }
+        }
     }
 
 @media (max-width: 767px) {
@@ -754,6 +873,16 @@
     ) .app-layout__sidebar {
         animation: app-layout-scale-in 0.3s;
       }
+
+        @media (prefers-reduced-motion) {
+      .app-layout--transition-style-dialog.app-layout--transitioning-to-sidebar.app-layout--transitioning-from-body:not(
+      .app-layout--mobile-view-sidebar
+    ) .app-layout__sidebar, .app-layout--transition-style-dialog.app-layout--transitioning-to-body.app-layout--transitioning-from-sidebar:not(
+      .app-layout--mobile-view-body
+    ) .app-layout__sidebar {
+          animation: none
+      }
+        }
     }
 
 @media (max-width: 991px) {

package/dist/collection/components/swirl-app-layout/swirl-app-layout.js

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { isMobileViewport } from "../../utils";
+import { isMobileViewport, prefersReducedMotion } from "../../utils";
 /**
  * @slot content - Main content area
  * @slot navigation - The navigation area content
@@ -91,7 +91,7 @@ export class SwirlAppLayout {
             clearTimeout(this.sidebarClosingTimeout);
         }
         this.sidebarClosing = true;
-        const delay = isMobileViewport() ? 0 : 300;
+        const delay = isMobileViewport() || prefersReducedMotion() ? 0 : 300;
         this.sidebarClosingTimeout = setTimeout(() => {
             this.sidebarActive = false;
             this.sidebarClosing = false;
@@ -134,13 +134,14 @@ export class SwirlAppLayout {
         }
         this.transitioningFrom = this.mobileView;
         this.transitioningTo = mobileView;
-        let delay = 0;
-        if (this.transitionStyle === "slides") {
-            delay = 400;
-        }
-        else if (this.transitionStyle === "dialog") {
-            delay = 300;
-        }
+        const userPrefersReducedMotion = prefersReducedMotion();
+        const delay = userPrefersReducedMotion
+            ? 0
+            : this.transitionStyle === "slides"
+                ? 400
+                : this.transitionStyle === "dialog"
+                    ? 300
+                    : 0;
         this.transitionTimeout = setTimeout(() => {
             this.mobileView = mobileView;
             this.transitioningFrom = undefined;
@@ -197,9 +198,9 @@ export class SwirlAppLayout {
             "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
             "app-layout--sidebar-closing": this.sidebarClosing,
         });
-        return (h(Host, { key: '6d961491aca6930666b7d587789eb3bff6bf1e2d' }, h("section", { key: 'e34654e362f28c3a57aa4716a3a10a86909d9aa8', "aria-labelledby": "app-name", class: className }, h("div", { key: '3e6cc02c9c3701e195a8a92f97f2fa49be7a5325', class: "app-layout__grid" }, h("header", { key: '7b4b7743aa9225c591f05705f18d50bd3009bfff', class: "app-layout__header" }, h("span", { key: '18050ae2d54fd438da16a6df7a57ecd80fac35a6', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '2a4a8d6f30c2e5e02ab512ff2be09197ea61c68c', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: 'c461ab4bd9f6f116cd6c019c0e967633946f0a5c', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '94a59959334c405d871b9d89b7d72c25a644571c', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: 'f5fd24b0ad24656831b66da8c024df6d1f5c62a6', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '04a2d228a04980e946b2d764bf1783a7c75a8e2f', class: "app-layout__navigation-controls" }, h("slot", { key: '1850db373293226330e64f6c45cb6d2b1792b6fe', name: "navigation-controls" })))), h("nav", { key: 'f90677d445f076e80615a73265e1abf5fd206821', "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { key: '1342aa7f9766d8bc7f5ceff39ae14b407871ba5b', name: "navigation" })), h("section", { key: '54bbd47bd318cf77ccfeee3ca0176504928d6c62', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '6861a37fd4fbafcf4389f9df561abc1010fe94b8', class: "app-layout__app-bar" }, h("span", { key: 'e92f067fbf50cca7931213bc75cf195210d5cd29', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '37c85dcf2fa77c37ea3aef4537c313ac14eb9ad9', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'a647140e357d1099774c239dbdb0c486aeedc74e', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '86b0502d617c12fb7123ef81c46126cc5ea18fca', hideLabel: true, icon: this.transitionStyle === "dialog"
+        return (h(Host, { key: '6e7b1fb8e820c5df6bddc4a07d568aba44c78fc2' }, h("section", { key: 'e2523a00678f76d23765be5f5245ed8ef36b772b', "aria-labelledby": "app-name", class: className }, h("div", { key: '0a35883504693d22196086d2d192df940695ab3d', class: "app-layout__grid" }, h("header", { key: '595cf6137de3f8c55aae7821e9b3be35ec8fb3e0', class: "app-layout__header" }, h("span", { key: '2f811e9f81706e9b7bee4f931d67b2bc6a9df600', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '661c053d500eaa9d3cd536a7be538ace1819df49', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: 'b955c5f227aca005c02679104943586bb237f88b', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: 'e313c403f96cc6e67de6eeb5db8453294b218e91', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '22e232563638cf73c3e6297142de6574442ecaee', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '77a7f997eb95020d5e70699fa0713e40efcbc7b4', class: "app-layout__navigation-controls" }, h("slot", { key: '0b9658989e188b7d35dc0f4a27d19d343c1918d2', name: "navigation-controls" })))), h("nav", { key: 'd238f90f3b05de555b954290aaf1146d196657d6', "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { key: 'bbdc977904503ca4114b621ecd93934c2334108b', name: "navigation" })), h("section", { key: 'b48132a8158191263dd7c2a67b8c2a9b00af76fc', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: 'c611663c10529f62b04ec98f6fba52fb06a0231e', class: "app-layout__app-bar" }, h("span", { key: 'f0268dd8cb7839e76f734d52c848f9fed8822b26', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: 'b2e3c55f74dfb6bbc77df0c5e75fb05840aa3d2d', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'ffe44556d2f26ab36634443e579323917082db4c', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '332f83cd0a7c9a9ff6c7b87e928826e586e9a0c3', hideLabel: true, icon: this.transitionStyle === "dialog"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { key: '0d1bef25d834457390cc3f1e8a16af30ee8ec411', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: 'ef609f9b32db88320c940927939b2bd3f87a28e5', name: "custom-app-bar-back-button" })), h("div", { key: 'd885bbea33f0c6b046e8cd574f61623e3b7cc225', class: "app-layout__app-bar-content" }, h("slot", { key: '70189b7672d8b70f490c3efdfde15d82c0b5c48c', name: "app-bar" })), h("div", { key: '23b3747628acc4fd2c61ee54de55253a3fc41203', class: "app-layout__app-bar-controls" }, h("slot", { key: '1bb20b112b186544833b10d3f67d48b002773bbc', name: "app-bar-controls" })))), h("div", { key: '33bad47951b64672f1f838b96d51e7e9f9d7c832', class: "app-layout__banner" }, h("slot", { key: 'e59682438a1d7aaec36e143c0c07d69a2205a24f', name: "banner" })), h("div", { key: '322eab095e9bf9d01f331adccdcd8953fcfa9fd0', class: "app-layout__content" }, h("slot", { key: '259690ee199cdc0ac3d037733b54544ea2b483ee', name: "content" })), h("div", { key: '7495427d0a523a22268c19c4ae56c977b4e295d0', class: "app-layout__bottom-bar" }, h("slot", { key: '50cc7202f5bbec17324ca23378617831d9fc199d', name: "bottom-bar" }))), h("aside", { key: '781981ef566aa8717d94331549272e7b9d2eeb6a', class: "app-layout__sidebar" }, h("header", { key: 'e6df1707394682f125448c1cf770600539bb1cfa', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '6e6187ae87c94d9c2a2e7e6f573a384dcea43125', name: "custom-sidebar-header" })), h("header", { key: '7d9a21343c070d3a9aeea9236852be1a2cb12e1e', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '6f4a53a16176d30139d497f4b510586f3bef2252', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '6b32dc32a6844cfd258d0148a949f06fa86a222b', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '64914275c88e1843af23ad087774d48092c70a36', class: "app-layout__sidebar-content" }, h("slot", { key: 'c6667fcf5d7702704752360854d9181d8ff35652', name: "sidebar" }))), h("span", { key: '7b8347d1a450aaed9c2e31ae1f308f46a760227b', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '62393818e2205700c6b090dee8783049f95c747c', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '32708bdfa2a5a36fbc7cd79bf0012bbf1928db68', name: "floating-action-button" }))))));
+                : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { key: '05c553b3f06acb416efb611393a142375615aafb', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '384efd3c0b8b1931c1386f79cc726e7cfd447a59', name: "custom-app-bar-back-button" })), h("div", { key: '525fcbc43fba00f2529ba87c1c4086a5835015c2', class: "app-layout__app-bar-content" }, h("slot", { key: '60f6b0c5ec6ffd68c93522863466bd6b3c0db363', name: "app-bar" })), h("div", { key: '87ec7fe96353196b906e44c6361751584ba6fc9e', class: "app-layout__app-bar-controls" }, h("slot", { key: '79ebad5cf6ce6dff917c3902690f90ede110395a', name: "app-bar-controls" })))), h("div", { key: '69708a765e8d144a33e39752c12c205ea68c28ce', class: "app-layout__banner" }, h("slot", { key: '44c74227806acf3d6367ea373698fcda7fb8d06c', name: "banner" })), h("div", { key: 'f06ccbce3e86d8b5923cb299e09a271013a7c1b1', class: "app-layout__content" }, h("slot", { key: 'a82bfde80fc6deef3652b3b7fe253907d970ecf7', name: "content" })), h("div", { key: 'd803093908c6fc820c3e2f38f8b065272c9844b9', class: "app-layout__bottom-bar" }, h("slot", { key: '6f89842c944a309fd080d91a6fc462b178b63a3f', name: "bottom-bar" }))), h("aside", { key: 'bab9d428055b9c20f46b850f83c12964d72b5bf4', class: "app-layout__sidebar" }, h("header", { key: 'c71437f69b01dd11660d3bbd2f3d3c7a41ab2f56', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'aa44cad222053bdb8ee7fb1819bc2152a4d0c878', name: "custom-sidebar-header" })), h("header", { key: 'a81e3b7a9b6471d39edf5d6c8764bc20020cd22b', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'ee62ccd13ed77be1a0c9c6f6ced052c2f2af1035', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: 'cd381a558de158ada2958e9cbd76c106ef51481b', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '52c7f14a9bf4db580c1435b2f21e45a17fd22aed', class: "app-layout__sidebar-content" }, h("slot", { key: 'abcc082e929aecf20d08427cea0a6a6a59a4b547', name: "sidebar" }))), h("span", { key: 'e79fc4b23a6bd62249eead44136b52393b9134d6', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: 'e7b751e38f923ca8ca83c88baab521abad426cd2', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '4e18e70ef2a91504e97ee9ad728e6cdca208debc', name: "floating-action-button" }))))));
     }
     static get is() { return "swirl-app-layout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css

@@ -29,6 +29,13 @@
   grid-template-areas: "nav main";
 }
 
+@media (prefers-reduced-motion) {
+
+.shell-layout {
+    transition: none
+}
+  }
+
 @media (min-width: 992px) {
 
 .shell-layout {
@@ -309,6 +316,13 @@
   grid-area: nav;
 }
 
+@media (prefers-reduced-motion) {
+
+.shell-layout__nav {
+    transition: none
+}
+  }
+
 @media (min-width: 992px) {
 
 .shell-layout__nav {
@@ -460,6 +474,13 @@
 }
   }
 
+@media (prefers-reduced-motion) {
+
+.shell-layout__sidebar-body {
+    transition: none
+}
+  }
+
 .shell-layout__sidebar-app-bar {
   flex-grow: 0;
   flex-shrink: 0;

package/dist/collection/utils.js

@@ -136,6 +136,9 @@ export function getVisibleHeight(element, container) {
 export function isMobileViewport() {
     return !window.matchMedia("(min-width: 768px)").matches;
 }
+export function prefersReducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 export function parentsPassShadow(node, selector, matches = []) {
     if (!node) {
         return matches;