@getflip/swirl-components 0.252.0 → 0.252.1

package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js

@@ -54,9 +54,11 @@ export class SwirlImageGridItem {
         this.computedSrc = this.src;
         this.gifPaused = false;
     }
+    componentWillLoad() {
+        this.computedSrc = this.src;
+    }
     componentDidLoad() {
         this.setupIntersectionObserver();
-        this.computedSrc = this.src;
         if (this.img?.complete) {
             this.loaded = true;
         }
@@ -115,16 +117,16 @@ export class SwirlImageGridItem {
             "image-grid-item--has-error": this.error,
             "image-grid-item--has-overlay": this.overlay,
         });
-        return (h(Host, { key: '75658ab5e5c9dfa05b47af29e6b173045a3046b0', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '730e1ae5791eea95fb9156b6c503ad8a86d0702e', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '1af6c077e717b71b40e8f9a815a731218d0a37f4', class: "image-grid-item__background", style: {
+        return (h(Host, { key: 'cdc714907ae1fc9c9624f56f41b9fcf0025eb285', "data-sibling-count": siblingCount, role: "listitem" }, h(Tag, { key: '5464cfb479a797e4dfa90c47079998948f2e3157', class: className, type: this.interactive ? "button" : undefined }, h("div", { key: '6f25439257b6df1507c7799c4a3b59b2c7a6e7d0', class: "image-grid-item__background", style: {
                 backgroundImage: showBlurredBackground
                     ? `url(${this.computedSrc})`
                     : undefined,
             } }), this.loading !== "intersecting" ||
             this.inViewport ||
-            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: '0fd42074e485aa8c504060db5259891403e49665', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: '66440c7eaea08167d32dceb3efe89bea404a94f7', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '7311b452251d0dbd0004b50855b51b8dd4a45a26', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: 'fda7c865e98ba6235035f21b63437bf2840c748a', size: 20 })))), this.loaded &&
+            this.gifPaused ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.computedSrc })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.showGifControls && (h("swirl-stack", { key: 'fb75324360455d6cfe7e2284e7412377cc855427', class: "image-grid-item__gif-controls", orientation: "horizontal", spacing: "4" }, h("button", { key: 'c830ee3ce7ae6dec733814c87ead9e86e9f849bd', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--button", onClick: this.handleControlClick, type: "button", "aria-label": this.gifPaused ? this.gifPlayLabel : this.gifPauseLabel }, this.gifPaused ? (h("swirl-icon-play-arrow", { size: 20 })) : (h("swirl-icon-pause", { size: 20 }))), h("div", { key: '095c819753f83f4626adfedb8a0f684263b295bb', class: "image-grid-item__gif-controls__icon image-grid-item__gif-controls__icon--label" }, h("swirl-icon-gif", { key: '64bc862874b6823ceabaaf0aa23a5a2b0f3c5358', size: 20 })))), this.loaded &&
             !this.error &&
             this.icon &&
-            !Boolean(this.overlay) && (h("div", { key: 'ec261fd8161f6c4a0dbd1e4d453d53efa6078ffb', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '7ba82f4ae19a32b3645a9b78e896b77fe11d0fe7', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: '5b10aa43ee80c16d2f49fc30d9a638700056bf6e', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '4e654ea8e949853cf0b2ab7c624a7d8335920117' }))), this.loaded && this.error && (h("div", { key: '2cebd11ed5552cd6c8e1637a3b0dc88858d8d01d', class: "image-grid-item__error" }, h("swirl-icon-error", { key: '1ceb0a99118b6cc9ac2e693e09010ee5213db913', color: "critical" }))))));
+            !Boolean(this.overlay) && (h("div", { key: '3c555ad4e984cc83e3d1b0c4a890357f2733dd79', class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { key: '6bbf9b518ef50a33b67a7bfcd6401a910343efbc', class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { key: 'b9a362e3241d12569702f3a4a23ad982cd578343', class: "image-grid-item__spinner" }, h("swirl-spinner", { key: '8321dbb7ecc0f011267542aab3f4778c80ee1af0' }))), this.loaded && this.error && (h("div", { key: '5d4b51352870858fc00e89d59ea66ad3323568dd', class: "image-grid-item__error" }, h("swirl-icon-error", { key: 'caf660c996da50aea9089a4ed3d186598685d03b', color: "critical" }))))));
     }
     static get is() { return "swirl-image-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -69,22 +69,22 @@ const Template = (args) => {
 
     <ul slot="secondary-nav">
       <li>
-        <swirl-shell-navigation-item label="Reporting hub">
+        <swirl-shell-navigation-item label="Reporting hub" with-gradient>
           <swirl-app-icon src="/menu-item-1.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="My absences">
+        <swirl-shell-navigation-item label="My absences" with-gradient>
           <swirl-app-icon src="/menu-item-2.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="IT self-service">
+        <swirl-shell-navigation-item label="IT self-service" with-gradient>
           <swirl-app-icon src="/menu-item-3.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>
       <li>
-        <swirl-shell-navigation-item label="Office door key">
+        <swirl-shell-navigation-item label="Office door key" with-gradient>
           <swirl-app-icon src="/menu-item-4.png" slot="icon"></swirl-app-icon>
         </swirl-shell-navigation-item>
       </li>

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css

@@ -13,6 +13,10 @@
 
 .shell-navigation-item {
   --swirl-app-icon-size: 1.5rem;
+  --swirl-shell-navigation-item-gradient: linear-gradient(
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8)
+  );
 
   position: relative;
   display: flex;
@@ -67,11 +71,9 @@
 
 .shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {
       overflow: hidden;
-      border-width: var(--s-border-width-default);
-      border-style: solid;
-      border-color: var(--s-border-default);
       border-radius: var(--s-border-radius-sm);
       background-color: var(--s-background-default);
+      box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);
     }
 
 .shell-navigation-item.shell-navigation-item--tiled {
@@ -80,8 +82,9 @@
     height: auto;
     padding: 0;
     align-items: start;
+    border-radius: var(--s-border-radius-base);
     flex-direction: column;
-    container-type: unset;
+    container-type: inline-size;
     gap: var(--s-space-8);
   }
 
@@ -95,8 +98,8 @@
 
 .shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {
       position: absolute;
-      left: var(--s-space-12);
       top: var(--s-space-12);
+      left: var(--s-space-12);
     }
 
 .shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {
@@ -117,16 +120,13 @@
     }
 
 .shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {
-          content: "";
           position: absolute;
-          width: 100%;
-          aspect-ratio: 1;
           display: inline-block;
+          width: 100%;
           border-radius: var(--s-border-radius-base);
-          background-image: linear-gradient(
-            rgba(0, 0, 0, 0),
-            rgba(0, 0, 0, 0.8)
-          );
+          background-image: var(--swirl-shell-navigation-item-gradient);
+          content: "";
+          aspect-ratio: 1;
         }
 
 .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {
@@ -139,12 +139,12 @@
 .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {
       display: -webkit-box;
       overflow: hidden;
-      text-align: start;
+      color: var(--s-text-default);
       font-weight: var(--s-font-weight-semibold);
+      text-align: start;
       white-space: normal;
       text-overflow: unset;
       overflow-wrap: anywhere;
-      color: var(--s-text-default);
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
     }
@@ -238,6 +238,10 @@
     padding: var(--s-space-2);
   }
 
+  .shell-navigation-item--gradient .shell-navigation-item__icon {
+    --swirl-shell-navigation-item-gradient: none;
+  }
+
   .shell-navigation-item__badge--dot {
     top: var(--s-space-8);
     right: var(--s-space-8);