@getflip/swirl-components 0.139.0 → 0.140.1

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-02-01T09:42:59",
+  "timestamp": "2024-02-01T12:07:46",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",
@@ -3650,7 +3650,7 @@
       "props": [
         {
           "name": "orientation",
-          "type": "\"horizontal\" | \"vertical\"",
+          "type": "\"horizontal\" | \"horizontal-reverse\" | \"vertical\" | \"vertical-reverse\"",
           "mutable": false,
           "attr": "orientation",
           "reflectToAttr": false,
@@ -3662,9 +3662,17 @@
               "value": "horizontal",
               "type": "string"
             },
+            {
+              "value": "horizontal-reverse",
+              "type": "string"
+            },
             {
               "value": "vertical",
               "type": "string"
+            },
+            {
+              "value": "vertical-reverse",
+              "type": "string"
             }
           ],
           "optional": true,
@@ -22778,7 +22786,7 @@
         },
         {
           "name": "orientation",
-          "type": "\"horizontal\" | \"vertical\"",
+          "type": "\"horizontal\" | \"horizontal-reverse\" | \"vertical\" | \"vertical-reverse\"",
           "mutable": false,
           "attr": "orientation",
           "reflectToAttr": false,
@@ -22790,9 +22798,17 @@
               "value": "horizontal",
               "type": "string"
             },
+            {
+              "value": "horizontal-reverse",
+              "type": "string"
+            },
             {
               "value": "vertical",
               "type": "string"
+            },
+            {
+              "value": "vertical-reverse",
+              "type": "string"
             }
           ],
           "optional": true,

package/dist/cjs/swirl-image-grid-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1de6abbd.js');
 const index$1 = require('./index-2ddd0598.js');
 
-const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus:not(:focus-visible){outline:none}button.image-grid-item:focus-visible{z-index:1;outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__spinner{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.4);inset:0}";
+const swirlImageGridItemCss = ":host{display:block;width:100%;min-height:0}:host *{box-sizing:border-box}:host(:not(:only-child)) .image-grid-item__background{display:none}:host(:not(:only-child)) .image-grid-item__image{-o-object-fit:cover;object-fit:cover}:host(:nth-child(n+5)){display:none}.image-grid-item{position:relative;display:inline-flex;overflow:hidden;width:100%;height:100%}button.image-grid-item{padding:0;border:none;background-color:transparent;cursor:pointer}button.image-grid-item:focus:not(:focus-visible){outline:none}button.image-grid-item:focus-visible{z-index:1;outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.image-grid-item--has-overlay .image-grid-item__image{scale:1.1;filter:blur(5px)}.image-grid-item__background{position:absolute;background-size:cover;inset:-40px;filter:blur(20px)}.image-grid-item__image{z-index:1;display:inline-flex;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.image-grid-item__loading-placeholder{display:inline-flex;width:100%;height:100%}.image-grid-item__icon{position:absolute;z-index:1;top:50%;left:50%;display:flex;width:3rem;height:3rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);transform:translate3d(-50%, -50%, 0)}.image-grid-item__icon ::part(icon){width:2rem;height:2rem}.image-grid-item__overlay{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.4);font-size:var(--s-font-size-2xl);inset:0}.image-grid-item__spinner{position:absolute;z-index:3;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.4);inset:0}";
 
 const SwirlImageGridItem = class {
   constructor(hostRef) {
@@ -53,7 +53,7 @@ const SwirlImageGridItem = class {
           this.loaded
           ? `url(${this.src})`
           : undefined,
-      } }), (this.loading !== "intersecting" || this.inViewport) && (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onLoad: this.onLoad, src: this.src })), this.loaded && this.icon && !Boolean(this.overlay) && (index.h("div", { class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("div", { class: "image-grid-item__spinner" }, index.h("swirl-spinner", null))))));
+      } }), this.loading !== "intersecting" || this.inViewport ? (index.h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onLoad: this.onLoad, src: this.src })) : (index.h("div", { class: "image-grid-item__loading-placeholder" })), this.loaded && this.icon && !Boolean(this.overlay) && (index.h("div", { class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (index.h("div", { class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (index.h("div", { class: "image-grid-item__spinner" }, index.h("swirl-spinner", null))))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-stack.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1de6abbd.js');
 const index$1 = require('./index-2ddd0598.js');
 
-const swirlStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%;margin:0}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}ol.stack,ul.stack{margin:0;padding:0;list-style:none}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-horizontal{flex-direction:row}.stack--wrap{flex-wrap:wrap}";
+const swirlStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%;margin:0}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}ol.stack,ul.stack{margin:0;padding:0;list-style:none}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-vertical-reverse{flex-direction:column-reverse}.stack--orientation-horizontal{flex-direction:row}.stack--orientation-horizontal-reverse{flex-direction:row-reverse}.stack--wrap{flex-wrap:wrap}";
 
 const SwirlStack = class {
   constructor(hostRef) {