@getflip/swirl-components 0.54.2 → 0.55.0

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

@@ -9,75 +9,63 @@
   }
 
 .popover--active:not(.popover--closing) .popover__backdrop {
-    -webkit-animation: 0.15s popover-fade-in;
-            animation: 0.15s popover-fade-in;
+    animation: 0.15s popover-fade-in;
   }
 
 @media (prefers-reduced-motion) {
 
 .popover--active:not(.popover--closing) .popover__backdrop {
-      -webkit-animation: none;
-              animation: none
+      animation: none
   }
     }
 
 .popover--active:not(.popover--closing) .popover__content {
-    -webkit-animation: 0.15s popover-slide-in;
-            animation: 0.15s popover-slide-in;
+    animation: 0.15s popover-slide-in;
   }
 
 @media (min-width: 768px) {
 
 .popover--active:not(.popover--closing) .popover__content {
       transform-origin: top left;
-      -webkit-animation: 0.15s popover-fade-scale-in-xy;
-              animation: 0.15s popover-fade-scale-in-xy
+      animation: 0.15s popover-fade-scale-in-xy
   }
     }
 
 @media (prefers-reduced-motion) {
 
 .popover--active:not(.popover--closing) .popover__content {
-      -webkit-animation: none;
-              animation: none
+      animation: none
   }
     }
 
 .popover--closing .popover__backdrop {
-    -webkit-animation: 0.15s popover-fade-out;
-            animation: 0.15s popover-fade-out;
-    -webkit-animation-fill-mode: forwards;
-            animation-fill-mode: forwards;
+    animation: 0.15s popover-fade-out;
+    animation-fill-mode: forwards;
   }
 
 @media (prefers-reduced-motion) {
 
 .popover--closing .popover__backdrop {
-      -webkit-animation: none;
-              animation: none
+      animation: none
   }
     }
 
 .popover--closing .popover__content {
-    -webkit-animation: 0.15s popover-slide-out;
-            animation: 0.15s popover-slide-out;
-    -webkit-animation-fill-mode: forwards;
-            animation-fill-mode: forwards;
+    animation: 0.15s popover-slide-out;
+    animation-fill-mode: forwards;
   }
 
 @media (min-width: 768px) {
 
 .popover--closing .popover__content {
-      -webkit-animation: 0.15s popover-fade-out;
-              animation: 0.15s popover-fade-out
+      animation: 0.15s popover-fade-out
   }
     }
 
 @media (prefers-reduced-motion) {
 
 .popover--closing .popover__content {
-      -webkit-animation: none;
-              animation: none
+      animation: none
   }
     }
 
@@ -87,27 +75,22 @@
 
 @media (max-width: 767px) {
       .popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content {
-        -webkit-animation: 0.15s popover-fade-in;
-                animation: 0.15s popover-fade-in;
+        animation: 0.15s popover-fade-in;
       }
 
         @media (prefers-reduced-motion) {
       .popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content {
-          -webkit-animation: none;
-                  animation: none
+          animation: none
       }
         }
       .popover--fullscreen-bottom-sheet.popover--closing .popover__content {
-        -webkit-animation: 0.15s popover-fade-out;
-                animation: 0.15s popover-fade-out;
-        -webkit-animation-fill-mode: forwards;
-                animation-fill-mode: forwards;
+        animation: 0.15s popover-fade-out;
+        animation-fill-mode: forwards;
       }
 
         @media (prefers-reduced-motion) {
       .popover--fullscreen-bottom-sheet.popover--closing .popover__content {
-          -webkit-animation: none;
-                  animation: none
+          animation: none
       }
         }
 
@@ -136,16 +119,14 @@
 @media (min-width: 768px) {
 
 .popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content {
-        -webkit-animation: 0.15s popover-fade-scale-in-y;
-                animation: 0.15s popover-fade-scale-in-y
+        animation: 0.15s popover-fade-scale-in-y
     }
       }
 
 @media (prefers-reduced-motion) {
 
 .popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content {
-        -webkit-animation: none;
-                animation: none
+        animation: none
     }
       }
 
@@ -153,16 +134,14 @@
   position: fixed;
   z-index: 0;
   background-color: rgba(0, 0, 0, 0.2);
-  -webkit-animation: 0.15s popover-backdrop-fade-in;
-          animation: 0.15s popover-backdrop-fade-in;
+  animation: 0.15s popover-backdrop-fade-in;
   inset: 0;
 }
 
 @media (prefers-reduced-motion) {
 
 .popover__backdrop {
-    -webkit-animation: none;
-            animation: none
+    animation: none
 }
   }
 
@@ -193,8 +172,7 @@
     left: unset;
     max-width: 22.5rem;
     border-radius: var(--s-border-radius-sm);
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     box-shadow: var(--s-shadow-level-1)
 }
   }
@@ -236,15 +214,6 @@
 }
   }
 
-@-webkit-keyframes popover-slide-in {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
 @keyframes popover-slide-in {
   from {
     transform: translateY(100%);
@@ -254,15 +223,6 @@
   }
 }
 
-@-webkit-keyframes popover-slide-out {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
 @keyframes popover-slide-out {
   from {
     transform: translateY(0);
@@ -272,15 +232,6 @@
   }
 }
 
-@-webkit-keyframes popover-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes popover-fade-in {
   from {
     opacity: 0;
@@ -290,15 +241,6 @@
   }
 }
 
-@-webkit-keyframes popover-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 @keyframes popover-fade-out {
   from {
     opacity: 1;
@@ -308,17 +250,6 @@
   }
 }
 
-@-webkit-keyframes popover-fade-scale-in-xy {
-  from {
-    transform: scale(0);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
 @keyframes popover-fade-scale-in-xy {
   from {
     transform: scale(0);
@@ -330,17 +261,6 @@
   }
 }
 
-@-webkit-keyframes popover-fade-scale-in-y {
-  from {
-    transform: scaleY(0);
-    opacity: 0;
-  }
-  to {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-
 @keyframes popover-fade-scale-in-y {
   from {
     transform: scaleY(0);

package/dist/collection/components/swirl-popover/swirl-popover.js

@@ -75,10 +75,13 @@ export class SwirlPopover {
       return;
     }
     const target = event.target;
+    const relatedTarget = event.relatedTarget;
     const activeElement = getActiveElement();
     const popoverLostFocus = !this.el.contains(target) &&
       !this.el.contains(activeElement) &&
-      target !== this.triggerEl;
+      !this.el.contains(relatedTarget || target) &&
+      target !== this.triggerEl &&
+      relatedTarget !== this.el;
     if (popoverLostFocus) {
       this.close();
     }

package/dist/collection/components/swirl-popover/swirl-popover.stories.js

@@ -24,6 +24,7 @@ export default {
     },
   },
   component: "swirl-popover",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-progress-indicator/swirl-progress-indicator.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-progress-indicator.mdx";
 export default {
   component: "swirl-progress-indicator",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-radio/swirl-radio.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-radio.mdx";
 export default {
   component: "swirl-radio",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-radio-group/swirl-radio-group.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-radio-group.mdx";
 export default {
   component: "swirl-radio-group",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-resource-list/swirl-resource-list.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-resource-list.mdx";
 export default {
   component: "swirl-resource-list",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.stories.js

@@ -12,6 +12,7 @@ export default {
     },
   },
   component: "swirl-resource-list-file-item",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-resource-list-item.mdx";
 export default {
   component: "swirl-resource-list-item",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-search/swirl-search.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-search.mdx";
 export default {
   component: "swirl-search",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-select/swirl-select.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-select.mdx";
 export default {
   component: "swirl-select",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-separator/swirl-separator.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-separator.mdx";
 export default {
   component: "swirl-separator",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

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

@@ -210,8 +210,7 @@
   position: fixed;
   z-index: 1;
   background-color: rgba(0, 0, 0, 0.4);
-  -webkit-animation: shell-layout-backdrop-fade-in 0.1s;
-          animation: shell-layout-backdrop-fade-in 0.1s;
+  animation: shell-layout-backdrop-fade-in 0.1s;
   inset: 0;
 }
 
@@ -223,17 +222,7 @@
   }
 
 .shell-layout__backdrop--fading {
-  -webkit-animation: shell-layout-backdrop-fade-out 0.2s;
-          animation: shell-layout-backdrop-fade-out 0.2s;
-}
-
-@-webkit-keyframes shell-layout-backdrop-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  animation: shell-layout-backdrop-fade-out 0.2s;
 }
 
 @keyframes shell-layout-backdrop-fade-in {
@@ -245,15 +234,6 @@
   }
 }
 
-@-webkit-keyframes shell-layout-backdrop-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 @keyframes shell-layout-backdrop-fade-out {
   from {
     opacity: 1;

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js

@@ -2,6 +2,7 @@ import { fullscreenStoryDecorator, generateStoryElement } from "../../utils";
 import Docs from "./swirl-shell-layout.mdx";
 export default {
   component: "swirl-shell-layout",
+  tags: ["autodocs"],
   decorators: [fullscreenStoryDecorator(false)],
   parameters: {
     docs: {

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-shell-navigation-item.mdx";
 export default {
   component: "swirl-shell-navigation-item",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.css

@@ -29,16 +29,9 @@
     );
     content: "";
     transform: translateX(-100%);
-    -webkit-animation: skeleton-box-shimmer 3s infinite;
-            animation: skeleton-box-shimmer 3s infinite;
+    animation: skeleton-box-shimmer 3s infinite;
   }
 
-@-webkit-keyframes skeleton-box-shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
 @keyframes skeleton-box-shimmer {
   100% {
     transform: translateX(100%);

package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-skeleton-box.mdx";
 export default {
   component: "swirl-skeleton-box",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-skeleton-text/swirl-skeleton-text.css

@@ -149,8 +149,7 @@
     );
     content: "";
     transform: translateX(-100%);
-    -webkit-animation: skeleton-text-shimmer 3s infinite;
-            animation: skeleton-text-shimmer 3s infinite;
+    animation: skeleton-text-shimmer 3s infinite;
   }
 
 .skeleton-text__line:first-child:last-child {
@@ -161,12 +160,6 @@
     width: 25%;
   }
 
-@-webkit-keyframes skeleton-text-shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
 @keyframes skeleton-text-shimmer {
   100% {
     transform: translateX(100%);

package/dist/collection/components/swirl-skeleton-text/swirl-skeleton-text.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-skeleton-text.mdx";
 export default {
   component: "swirl-skeleton-text",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-spinner/swirl-spinner.css

@@ -40,8 +40,7 @@
   width: 100%;
   height: 100%;
   transform-origin: center center;
-  -webkit-animation: spinner-rotate 2s linear infinite;
-          animation: spinner-rotate 2s linear infinite;
+  animation: spinner-rotate 2s linear infinite;
 }
 
 .spinner__background {
@@ -50,41 +49,19 @@
 }
 
 .spinner__circle {
-  -webkit-animation: spinner-dash 1.5s ease-in-out infinite;
-          animation: spinner-dash 1.5s ease-in-out infinite;
+  animation: spinner-dash 1.5s ease-in-out infinite;
   stroke: var(--s-interactive-primary-default);
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
   stroke-linecap: round;
 }
 
-@-webkit-keyframes spinner-rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes spinner-rotate {
   100% {
     transform: rotate(360deg);
   }
 }
 
-@-webkit-keyframes spinner-dash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124;
-  }
-}
-
 @keyframes spinner-dash {
   0% {
     stroke-dasharray: 1, 200;

package/dist/collection/components/swirl-spinner/swirl-spinner.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-spinner.mdx";
 export default {
   component: "swirl-spinner",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-stack/swirl-stack.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-stack.mdx";
 export default {
   component: "swirl-stack",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-switch/swirl-switch.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-switch.mdx";
 export default {
   component: "swirl-switch",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-tab/swirl-tab.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-tab.mdx";
 export default {
   component: "swirl-tab",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-tab-bar.mdx";
 export default {
   component: "swirl-tab-bar",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-table/swirl-table.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-table.mdx";
 export default {
   component: "swirl-table",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-table-cell/swirl-table-cell.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-table-cell.mdx";
 export default {
   component: "swirl-table-cell",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-table-column/swirl-table-column.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-table-column.mdx";
 export default {
   component: "swirl-table-column",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-table-row/swirl-table-row.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-table-row.mdx";
 export default {
   component: "swirl-table-row",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-table-row-group.mdx";
 export default {
   component: "swirl-table-row-group",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-tabs/swirl-tabs.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-tabs.mdx";
 export default {
   component: "swirl-tabs",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-tag/swirl-tag.stories.js

@@ -2,6 +2,7 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-tag.mdx";
 export default {
   component: "swirl-tag",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,

package/dist/collection/components/swirl-text/swirl-text.stories.js

@@ -7,6 +7,7 @@ export default {
     },
   },
   component: "swirl-text",
+  tags: ["autodocs"],
   parameters: {
     docs: {
       page: Docs,