@getflip/swirl-components 0.236.0 → 0.237.0

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

@@ -36,7 +36,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'cb3eee31d034b88907599cf4165fe718ff5f2566' }, h("slot", { key: '68f864d1c4e14d22b448fe5d311c3c118f085969' })));
+        return (h(Host, { key: '4ffbbe723e9a0878fd7bfafbb2a842053d2e2691' }, h("slot", { key: 'bd6ebba41058302406f997b96919f881fc7d3204' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.js

@@ -58,7 +58,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '11c14d9dfed09379d80099bf6f65ad7fd4e2abd1' }, h("div", { key: '528a89c896b091f2037cf9d84b81f3930eadce91', class: className }, h(HeadingTag, { key: '23536a431d58019eca2c40e0fce121dc00cc611f', class: "accordion-item__heading" }, h("button", { key: '4b5f8bba01228c8640a5ec19433299362de3777a', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '322983a1bb1eedd46543dd563a15c5f4317268e9', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'b4aba41917ab4274caf0b4f897017dd43113fde5', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '64e2fcd9102f2992077199f0fcfab14e77111fdf', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '8b9f2b492f6db1164cc4bde2ace9fa3a62440eb3', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'd19c09e37a42536ad74fc8144ee835a13db5f9fb', glyph: "expand-more", size: 20 }))))), h("div", { key: 'b2752a5e87fb19b21ca993487a75c3f0fa19e594', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '30c6f733029289d95bd4f8ea1acd432cc92956dc' })))));
+        return (h(Host, { key: 'c9f7880e2558bf5be244e5ef240889abc877a79f' }, h("div", { key: '77615540f6ff04a07229bcbe91acf2a9b90d79e3', class: className }, h(HeadingTag, { key: '0b71f248897f68e0ebee9ce0dceee4cb9d034e6a', class: "accordion-item__heading" }, h("button", { key: 'a81242957d36d9411ee912ab895c054f5bf5630a', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '57cae7c4358369453929baa55bb3180eb1a813bf', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '7f6d0b33ccdbd3e4c5d36cba0c121d419922ff6b', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '6bf087737bf33d1ec67fe5093dabd51dc4fe5f4f', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '982d8a9183440ac33c3725bd0de4929f956e45fc', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '19dd5942a8ed05307fe1f63b06b8da15a818f78c', glyph: "expand-more", size: 20 }))))), h("div", { key: '8690e2bda8974f767cdaf5b8196767c77fec822a', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'bb1ccb6f278931b3fba7ef7b98401d0e89a94d3e' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-action-list/swirl-action-list.js

@@ -76,7 +76,7 @@ export class SwirlActionList {
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
     render() {
-        return (h(Host, { key: '4d7644990d1e429d0677515bd72d68d70e4fafb8' }, h("div", { key: 'fd0e1cab4f5be6b6acd4bbf6610119a5939939e6', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '56f38e2b41efbfdce13dba0ab683865a814f6616' }))));
+        return (h(Host, { key: 'a844dda8b296495edcfc8a088837e7b42727db12' }, h("div", { key: '780baffea6d243824d5b31cc03027c2e0b723cf8', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '18409332e59b5aa130738d6fa4c0187d1a3acf65' }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-action-list-section/swirl-action-list-section.js

@@ -7,7 +7,7 @@ export class SwirlActionListSection {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '57bc383e7c03f4a39aea45773191c6c89454dfd7' }, h("div", { key: '446d24441c9372811c1a0906ff0d65d70485be60', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: '0647f77843aafc83376a026f25180afc45b2e5fd', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: '8047d3c7567b8cd584ccaaa616af4e232ecb6a84', class: "action-list-section__items" }, h("slot", { key: '80682346c7a71da4bec74d6a880f73ef43cd35b3' })))));
+        return (h(Host, { key: 'fb2e2ada9783101b411418233a6a9a67b48bbeb5' }, h("div", { key: '11c81dc8150bd02a6321d94ac3a4e14918bf476a', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'c75f4362cb64da7a9b31b26e6eb4cd31a6d291d2', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: '1c7c891886e2aa2f0a66b89b1fbb936dbb490ed3', class: "action-list-section__items" }, h("slot", { key: '5a3adb719a287c65bd0cb0a7a9972f601502905b' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class SwirlAppIcon {
         const className = classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (h(Host, { key: '937316f91558e4de6d0c4f6b7184f705d88fe6e7' }, h("span", { key: '03109a483290d210b5b2962bd1e06ef228551159', class: className }, showImage && (h("img", { key: 'e425539db0f95cf89ff0db1e7944b2d267fa6097', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: '8c550c7bdf1588c81f212708b304858690db1ba8', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (h(Host, { key: '99b6a929fe3046aa957eb09bb36d8bf9d47d14bf' }, h("span", { key: '4019af2ae49b02e1b50da36bd771172515798004', class: className }, showImage && (h("img", { key: 'a9d15e7e463cf123ae48da613aa9e7b6e74e8927', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: 'dd6dcf83160ad1b47db7eb3e73ffefd9b3c6f9af', class: "app-icon__icon", innerHTML: this.icon })))));
     }
     static get is() { return "swirl-app-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
 :host {
-  --swirl-app-layout-border-visibility: hidden;
+  --header-height: 3.5625rem;
 
   position: relative;
   z-index: 1;
@@ -27,7 +27,7 @@
   width: 100%;
   height: 100%;
   grid-template-columns: 100%;
-  grid-template-rows: 3.5625rem 1fr;
+  grid-template-rows: var(--header-height) 1fr;
   grid-template-areas:
     "body"
     "body";
@@ -89,6 +89,55 @@
   }
     }
 
+@media (min-width: 992px) {
+        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid {
+          grid-template-columns: 0 1fr;
+        }
+        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid {
+          grid-template-columns: 0 1fr;
+        }
+
+        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,
+        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation {
+          position: absolute;
+          z-index: 4;
+          top: 0;
+          left: 0;
+          width: 22.5rem;
+          animation: app-layout-nav-overlay-slide-in-desktop 0.1s;
+          animation-fill-mode: forwards;
+        }
+          .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header:after {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: calc(100% + var(--s-border-width-default));
+            display: block;
+            width: 2rem;
+            height: 100vh;
+            background-image: linear-gradient(
+              to right,
+              rgba(0, 0, 0, 0.05) 0,
+              rgba(0, 0, 0, 0) 80%,
+              rgba(0, 0, 0, 0) 100%
+            );
+            content: "";
+          }
+
+        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation {
+          z-index: 3;
+          bottom: 0;
+        }
+    }
+
+@media (min-width: 1440px) {
+        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__header,
+        .app-layout--has-navigation.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__navigation {
+          width: 25rem;
+          animation: app-layout-nav-overlay-slide-in-large-desktop 0.1s;
+        }
+    }
+
 @media (min-width: 768px) {
         .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;
@@ -130,19 +179,29 @@
   }
 
 @media (min-width: 1800px) {
-      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
-        animation: app-layout-sidebar-slide-in 0.3s;
+
+.app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
         grid-template-columns: 25rem 1fr 25rem;
         grid-template-areas:
           "header body sidebar"
-          "navigation body sidebar";
+          "navigation body sidebar"
+    }
+      }
+
+@media (min-width: 1800px) {
+      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid {
+        animation: app-layout-sidebar-slide-in 0.3s;
+        animation-fill-mode: forwards;
       }
 
         @media (prefers-reduced-motion) {
-      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
+      .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening .app-layout__grid {
           animation: none
       }
         }
+        .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-collapsed .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-opening.app-layout--nav-overlayed .app-layout__grid {
+          animation: app-layout-sidebar-slide-in-with-collapsed-nav 0.3s;
+        }
     }
 
 @media (min-width: 1800px) {
@@ -155,6 +214,9 @@
           animation: none
       }
         }
+        .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-collapsed .app-layout__grid, .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-closing.app-layout--nav-overlayed .app-layout__grid {
+          animation: app-layout-sidebar-slide-out-with-collapsed-nav 0.3s;
+        }
     }
 
 @media (min-width: 768px) {
@@ -181,6 +243,15 @@
   }
     }
 
+@media (min-width: 992px) {
+        .app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-collapsed .app-layout__grid {
+          grid-template-columns: 0 1fr;
+        }
+        .app-layout--has-navigation.app-layout--has-sidebar.app-layout--nav-collapsible.app-layout--nav-overlayed .app-layout__grid {
+          grid-template-columns: 0 1fr;
+        }
+    }
+
 @media (min-width: 768px) and (max-width: 1799px) {
     .app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar {
       position: absolute;
@@ -264,7 +335,7 @@
   }
 
 .app-layout--has-bottom-bar .app-layout__body {
-    grid-template-rows: minmax(3.5625rem, auto) auto 1fr auto;
+    grid-template-rows: minmax(var(--header-height), auto) auto 1fr auto;
     grid-template-areas:
       "app-bar"
       "banner"
@@ -272,6 +343,10 @@
       "bottom-bar";
   }
 
+.app-layout--has-bottom-bar .app-layout__content {
+    border-bottom: var(--s-border-width-default) solid transparent;
+  }
+
 .app-layout--has-bottom-bar .app-layout__bottom-bar {
     display: block;
   }
@@ -299,15 +374,34 @@
       "content";
   }
 
+.app-layout--content-scrollable:not(.app-layout--content-scrolled-to-top) .app-layout__app-bar {
+      border-bottom-color: var(--s-border-default);
+    }
+
+.app-layout--content-scrollable.app-layout--has-bottom-bar:not(.app-layout--content-scrolled-to-bottom) .app-layout__content {
+      border-bottom-color: var(--s-border-default);
+    }
+
+.app-layout--nav-scrollable:not(.app-layout--nav-scrolled-to-top) .app-layout__header {
+      border-bottom-color: var(--s-border-default);
+    }
+
+.app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__sidebar-header,
+    .app-layout--sidebar-scrollable:not(.app-layout--sidebar-scrolled-to-top) .app-layout__custom-sidebar-header {
+      border-bottom-color: var(--s-border-default);
+    }
+
 .app-layout__header {
   z-index: 1;
   display: flex;
   min-width: 0;
+  height: var(--header-height);
   padding-top: var(--s-space-12);
   padding-right: var(--s-space-8);
   padding-bottom: var(--s-space-12);
   padding-left: var(--s-space-8);
   align-items: center;
+  border-bottom: var(--s-border-width-default) solid transparent;
   background-color: var(--s-background-default);
   grid-area: header;
   gap: var(--s-space-8);
@@ -386,13 +480,30 @@
   grid-area: navigation;
 }
 
+.app-layout__nav-overlay-toggle,
+.app-layout__nav-expansion-toggle {
+  display: none;
+}
+
+@media (min-width: 992px) {
+
+.app-layout__nav-overlay-toggle,
+.app-layout__nav-expansion-toggle {
+    display: block
+}
+  }
+
+.app-layout__nav-expansion-toggle {
+  padding-left: var(--s-space-16);
+}
+
 .app-layout__body {
   z-index: 2;
   display: grid;
   width: 100%;
   height: 100%;
   grid-area: body;
-  grid-template-rows: minmax(3.5625rem, auto) auto 1fr;
+  grid-template-rows: minmax(var(--header-height), auto) auto 1fr;
   grid-template-areas:
     "app-bar"
     "banner"
@@ -406,6 +517,7 @@
   display: flex;
   min-width: 0;
   align-items: center;
+  border-bottom: var(--s-border-width-default) solid transparent;
   background-color: var(--s-background-default);
   grid-area: app-bar;
   gap: var(--s-space-8);
@@ -469,7 +581,7 @@
   height: 100%;
   border-left: var(--s-border-width-default) solid var(--s-border-default);
   grid-area: sidebar;
-  grid-template-rows: 3.5625rem 1fr;
+  grid-template-rows: var(--header-height) 1fr;
   grid-template-areas:
     "sidebar-header"
     "sidebar-content";
@@ -500,7 +612,7 @@
 .app-layout__custom-sidebar-header {
   display: none;
   min-width: 0;
-  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  border-bottom: var(--s-border-width-default) solid transparent;
   background-color: var(--s-background-default);
   grid-area: sidebar-header;
 }
@@ -513,6 +625,7 @@
   padding-bottom: var(--s-space-12);
   padding-left: var(--s-space-8);
   align-items: center;
+  border-bottom: var(--s-border-width-default) solid transparent;
   background-color: var(--s-background-default);
   grid-area: sidebar-header;
   gap: var(--s-space-8);
@@ -547,69 +660,23 @@
   grid-area: sidebar-content;
 }
 
-.app-layout__bordered-container-when-scrolled {
-  /*
-  * Use scroll-timeline and animation-timeline to detect scrollable and
-  * scrolled content and display the top border accordingly.
-  */
-  animation: app-layout-detect-scroll;
-  animation-fill-mode: none;
-  scroll-timeline: --scroll-timeline y;
-  animation-timeline: --scroll-timeline;
-}
-
-.app-layout__bordered-container-when-scrolled:before,
-  .app-layout__bordered-container-when-scrolled:after {
-    position: sticky;
-    z-index: 1;
-    top: 0;
-    display: block;
-    width: 100%;
-    height: var(--s-border-width-default);
-    background-color: var(--s-border-default);
-    content: "";
-  }
-
-@supports (
-      (scroll-timeline: --scroll-timeline y) and
-        (animation-timeline: --scroll-timeline)
-    ) {
-
-.app-layout__bordered-container-when-scrolled:before,
-  .app-layout__bordered-container-when-scrolled:after {
-      visibility: var(--swirl-app-layout-border-visibility);
-      animation-name: app-layout-border-reveal;
-      animation-fill-mode: both;
-      animation-range: 1px 1px;
-      animation-timeline: --scroll-timeline
-  }
-    }
-
-.app-layout__bordered-container-when-scrolled:after {
-    display: none;
-    top: auto;
-    bottom: 0;
+@keyframes app-layout-nav-overlay-slide-in-desktop {
+  from {
+    width: 0;
   }
 
-.app-layout__bordered-container-when-scrolled--with-bottom:after {
-    display: block;
-    animation-direction: reverse;
-    animation-range: calc(100% - 1px) calc(100% - 1px);
+  to {
+    width: 22.5rem;
   }
+}
 
-@keyframes app-layout-border-reveal {
-  0% {
-    background-color: transparent;
-  }
-  100% {
-    background-color: var(--s-border-default);
+@keyframes app-layout-nav-overlay-slide-in-large-desktop {
+  from {
+    width: 0;
   }
-}
 
-@keyframes app-layout-detect-scroll {
-  from,
   to {
-    --swirl-app-layout-border-visibility: visible;
+    width: 25rem;
   }
 }
 
@@ -1022,6 +1089,17 @@
   }
 }
 
+@keyframes app-layout-sidebar-slide-in-with-collapsed-nav {
+  from {
+    overflow: hidden;
+    grid-template-columns: 0 1fr 0;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 0 1fr 25rem;
+  }
+}
+
 @keyframes app-layout-sidebar-slide-out {
   from {
     overflow: hidden;
@@ -1033,6 +1111,17 @@
   }
 }
 
+@keyframes app-layout-sidebar-slide-out-with-collapsed-nav {
+  from {
+    overflow: hidden;
+    grid-template-columns: 0 1fr 25rem;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 0 1fr 0;
+  }
+}
+
 @keyframes app-layout-no-nav-sidebar-slide-in {
   from {
     overflow: hidden;