@getflip/swirl-components 0.14.1 → 0.16.0

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

@@ -20,6 +20,9 @@ export class SwirlActionListItem {
     this.forceIconProps(this.desktopMediaQuery.matches);
     (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
   }
+  componentDidRender() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+  }
   disconnectedCallback() {
     var _a, _b;
     (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);

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

@@ -1,4 +1,6 @@
 :host {
+  position: relative;
+  z-index: 1;
   display: flex;
   width: 100%;
   height: 100%;
@@ -12,21 +14,12 @@
   display: flex;
   overflow: hidden;
   width: 100%;
-  max-width: 100rem;
   height: 100%;
   margin-right: auto;
   margin-left: auto;
-  border: var(--s-border-width-default) solid var(--s-border-default);
   background-color: var(--s-border-default);
 }
 
-@media (min-width: 1440px) {
-
-.app-layout {
-    border-radius: var(--s-border-radius-base)
-}
-  }
-
 .app-layout__grid {
   position: relative;
   display: grid;
@@ -208,7 +201,10 @@
 .app-layout__header {
   z-index: 1;
   display: flex;
-  padding: var(--s-space-12) var(--s-space-16);
+  padding-top: var(--s-space-12);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-12);
+  padding-left: calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);
   align-items: center;
   background-color: var(--s-background-default);
   grid-area: header;
@@ -216,6 +212,13 @@
   gap: var(--s-space-8);
 }
 
+@media (min-width: 992px) {
+
+.app-layout__header {
+    padding-left: var(--s-space-16)
+}
+  }
+
 .app-layout__app-name {
   min-width: 0;
 }
@@ -266,13 +269,23 @@
 .app-layout__app-bar {
   display: flex;
   min-width: 0;
-  padding: var(--s-space-12) var(--s-space-16);
+  padding-top: var(--s-space-12);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-12);
+  padding-left: calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);
   align-items: center;
   background-color: var(--s-background-default);
   grid-area: app-bar;
   gap: var(--s-space-8);
 }
 
+@media (min-width: 992px) {
+
+.app-layout__app-bar {
+    padding-left: var(--s-space-16)
+}
+  }
+
 .app-layout__back-to-navigation-button {
   margin-left: calc(-1 * var(--s-space-4));
 }
@@ -351,13 +364,23 @@
 .app-layout__sidebar-header {
   display: flex;
   min-width: 0;
-  padding: var(--s-space-12) var(--s-space-16);
+  padding-top: var(--s-space-12);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-12);
+  padding-left: calc(var(--s-space-16) + var(--s-space-8) + 2.5rem);
   align-items: center;
   background-color: var(--s-background-default);
   grid-area: sidebar-header;
   gap: var(--s-space-8);
 }
 
+@media (min-width: 992px) {
+
+.app-layout__sidebar-header {
+    padding-left: var(--s-space-16)
+}
+  }
+
 .app-layout__sidebar-heading {
   min-width: 0;
   flex-grow: 1;

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

@@ -166,9 +166,9 @@ export class SwirlAppLayout {
       "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
       "app-layout--sidebar-closing": this.sidebarClosing,
     });
-    return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", intent: "primary", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 2, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? (h("header", { class: "app-layout__app-bar" }, showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
+    return (h(Host, null, h("section", { "aria-labelledby": "app-name", class: className, role: "document", tabIndex: 0 }, h("div", { class: "app-layout__grid" }, h("header", { class: "app-layout__header" }, this.showNavigationBackButton && (h("span", { class: "app-layout__navigation-back-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 2, text: this.appName }), this.hasNavigation && (h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { name: "navigation" })), h("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? (h("header", { class: "app-layout__app-bar" }, showBackToNavigationButton && (h("span", { class: "app-layout__back-to-navigation-button" }, h("swirl-button", { hideLabel: true, icon: this.transitionStyle === "dialog"
         ? "<swirl-icon-close></swirl-icon-close>"
-        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", intent: "primary", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.appBarMedia && (h("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia })), h("div", { class: "app-layout__app-bar-heading" }, this.heading && (h("swirl-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading })), this.subheading && (h("span", { class: "app-layout__app-bar-subheading" }, this.subheading))), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))) : (h("header", { class: "app-layout__app-bar" }, h("swirl-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", intent: "primary", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 2, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
+        : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.appBarMedia && (h("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia })), h("div", { class: "app-layout__app-bar-heading" }, this.heading && (h("swirl-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading })), this.subheading && (h("span", { class: "app-layout__app-bar-subheading" }, this.subheading))), h("div", { class: "app-layout__app-bar-controls" }, h("slot", { name: "app-bar-controls" })))) : (h("header", { class: "app-layout__app-bar" }, h("swirl-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), h("span", { class: "app-layout__navigation-controls" }, h("slot", { name: "navigation-controls" })))), h("div", { class: "app-layout__content" }, h("slot", { name: "content" }))), h("aside", { class: "app-layout__sidebar" }, h("header", { class: "app-layout__sidebar-header" }, h("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 2, text: this.sidebarHeading })), h("div", { class: "app-layout__sidebar-content" }, h("slot", { name: "sidebar" }))), this.ctaLabel && (h("span", { class: "app-layout__floating-cta" }, h("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))))));
   }
   static get is() { return "swirl-app-layout"; }
   static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export default {
     },
   },
   component: "swirl-app-layout",
-  decorators: [fullscreenStoryDecorator],
+  decorators: [fullscreenStoryDecorator()],
   parameters: {
     docs: {
       page: Docs,

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

@@ -32,6 +32,9 @@ export class SwirlButton {
     this.forceIconProps(this.desktopMediaQuery.matches);
     (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
   }
+  componentDidRender() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+  }
   disconnectedCallback() {
     var _a, _b;
     (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);

package/dist/collection/components/swirl-file-viewer/swirl-file-viewer.js

@@ -10,6 +10,7 @@ export class SwirlFileViewer {
     this.description = undefined;
     this.errorMessage = "File could not be loaded.";
     this.file = undefined;
+    this.thumbnailUrl = undefined;
     this.type = undefined;
     this.typeUnsupportedMessage = "File type is not supported.";
     this.zoom = 1;
@@ -141,6 +142,23 @@ export class SwirlFileViewer {
         "attribute": "file",
         "reflect": false
       },
+      "thumbnailUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "thumbnail-url",
+        "reflect": false
+      },
       "type": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-bookmark.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconBookmark {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M4.66666 11.9667L7.99999 10.5333L11.3333 11.9667V3.33333H4.66666V11.9667ZM4.26666 13.6C4.04444 13.6889 3.83333 13.6693 3.63333 13.5413C3.43333 13.4138 3.33333 13.2278 3.33333 12.9833V3.33333C3.33333 2.96667 3.46399 2.65267 3.72533 2.39133C3.98622 2.13044 4.29999 2 4.66666 2H11.3333C11.7 2 12.014 2.13044 12.2753 2.39133C12.5362 2.65267 12.6667 2.96667 12.6667 3.33333V12.9833C12.6667 13.2278 12.5667 13.4138 12.3667 13.5413C12.1667 13.6693 11.9556 13.6889 11.7333 13.6L7.99999 12L4.26666 13.6Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M7 17.95L12 15.8L17 17.95V5H7V17.95ZM6.4 20.4C6.06667 20.5333 5.75 20.504 5.45 20.312C5.15 20.1207 5 19.8417 5 19.475V5C5 4.45 5.196 3.979 5.588 3.587C5.97933 3.19567 6.45 3 7 3H17C17.55 3 18.021 3.19567 18.413 3.587C18.8043 3.979 19 4.45 19 5V19.475C19 19.8417 18.85 20.1207 18.55 20.312C18.25 20.504 17.9333 20.5333 17.6 20.4L12 18L6.4 20.4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M8.16666 20.9417L14 18.4333L19.8333 20.9417V5.83333H8.16666V20.9417ZM7.46666 23.8C7.07777 23.9556 6.70833 23.9213 6.35833 23.6973C6.00833 23.4741 5.83333 23.1486 5.83333 22.7208V5.83333C5.83333 5.19167 6.06199 4.64217 6.51933 4.18483C6.97588 3.72828 7.525 3.5 8.16666 3.5H19.8333C20.475 3.5 21.0245 3.72828 21.4818 4.18483C21.9384 4.64217 22.1667 5.19167 22.1667 5.83333V22.7208C22.1667 23.1486 21.9917 23.4741 21.6417 23.6973C21.2917 23.9213 20.9222 23.9556 20.5333 23.8L14 21L7.46666 23.8Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-bookmark"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-double-arrow-left.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconDoubleArrowLeft {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M10.9833 11.5378L7.91667 8.47112C7.85 8.40445 7.80289 8.33223 7.77534 8.25445C7.74734 8.17667 7.73334 8.09334 7.73334 8.00445C7.73334 7.91556 7.74734 7.83223 7.77534 7.75445C7.80289 7.67667 7.85 7.60445 7.91667 7.53778L10.9833 4.47112C11.1056 4.34889 11.2582 4.28489 11.4413 4.27912C11.6249 4.27378 11.7833 4.33778 11.9167 4.47112C12.0389 4.59334 12.1 4.74889 12.1 4.93778C12.1 5.12667 12.0389 5.28223 11.9167 5.40445L9.33334 8.00445L11.9167 10.6044C12.0389 10.7267 12.1027 10.8793 12.108 11.0624C12.1138 11.246 12.05 11.4044 11.9167 11.5378C11.7944 11.66 11.6389 11.7211 11.45 11.7211C11.2611 11.7211 11.1056 11.66 10.9833 11.5378ZM6.58334 11.5378L3.51667 8.47112C3.45 8.40445 3.40289 8.33223 3.37534 8.25445C3.34734 8.17667 3.33334 8.09334 3.33334 8.00445C3.33334 7.91556 3.34734 7.83223 3.37534 7.75445C3.40289 7.67667 3.45 7.60445 3.51667 7.53778L6.58334 4.47112C6.70556 4.34889 6.85845 4.28489 7.042 4.27912C7.22511 4.27378 7.38334 4.33778 7.51667 4.47112C7.63889 4.59334 7.7 4.74889 7.7 4.93778C7.7 5.12667 7.63889 5.28223 7.51667 5.40445L4.93334 8.00445L7.51667 10.6044C7.63889 10.7267 7.70289 10.8793 7.70867 11.0624C7.714 11.246 7.65 11.4044 7.51667 11.5378C7.39445 11.66 7.23889 11.7211 7.05 11.7211C6.86111 11.7211 6.70556 11.66 6.58334 11.5378Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M16.475 17.3067L11.875 12.7067C11.775 12.6067 11.7043 12.4983 11.663 12.3817C11.621 12.265 11.6 12.14 11.6 12.0067C11.6 11.8733 11.621 11.7483 11.663 11.6317C11.7043 11.515 11.775 11.4067 11.875 11.3067L16.475 6.70667C16.6583 6.52334 16.8873 6.42734 17.162 6.41867C17.4373 6.41067 17.675 6.50667 17.875 6.70667C18.0583 6.89001 18.15 7.12334 18.15 7.40667C18.15 7.69001 18.0583 7.92334 17.875 8.10667L14 12.0067L17.875 15.9067C18.0583 16.09 18.154 16.319 18.162 16.5937C18.1707 16.869 18.075 17.1067 17.875 17.3067C17.6917 17.49 17.4583 17.5817 17.175 17.5817C16.8917 17.5817 16.6583 17.49 16.475 17.3067ZM9.875 17.3067L5.275 12.7067C5.175 12.6067 5.10433 12.4983 5.063 12.3817C5.021 12.265 5 12.14 5 12.0067C5 11.8733 5.021 11.7483 5.063 11.6317C5.10433 11.515 5.175 11.4067 5.275 11.3067L9.875 6.70667C10.0583 6.52334 10.2877 6.42734 10.563 6.41867C10.8377 6.41067 11.075 6.50667 11.275 6.70667C11.4583 6.89001 11.55 7.12334 11.55 7.40667C11.55 7.69001 11.4583 7.92334 11.275 8.10667L7.4 12.0067L11.275 15.9067C11.4583 16.09 11.5543 16.319 11.563 16.5937C11.571 16.869 11.475 17.1067 11.275 17.3067C11.0917 17.49 10.8583 17.5817 10.575 17.5817C10.2917 17.5817 10.0583 17.49 9.875 17.3067Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M19.2208 20.191L13.8542 14.8243C13.7375 14.7077 13.6551 14.5813 13.6068 14.4452C13.5578 14.3091 13.5333 14.1632 13.5333 14.0077C13.5333 13.8521 13.5578 13.7063 13.6068 13.5702C13.6551 13.4341 13.7375 13.3077 13.8542 13.191L19.2208 7.82433C19.4347 7.61044 19.7019 7.49844 20.0223 7.48833C20.3436 7.479 20.6208 7.591 20.8542 7.82433C21.0681 8.03822 21.175 8.31044 21.175 8.641C21.175 8.97155 21.0681 9.24378 20.8542 9.45766L16.3333 14.0077L20.8542 18.5577C21.0681 18.7716 21.1797 19.0387 21.189 19.3592C21.1991 19.6804 21.0875 19.9577 20.8542 20.191C20.6403 20.4049 20.3681 20.5118 20.0375 20.5118C19.7069 20.5118 19.4347 20.4049 19.2208 20.191ZM11.5208 20.191L6.15417 14.8243C6.0375 14.7077 5.95506 14.5813 5.90684 14.4452C5.85784 14.3091 5.83334 14.1632 5.83334 14.0077C5.83334 13.8521 5.85784 13.7063 5.90684 13.5702C5.95506 13.4341 6.0375 13.3077 6.15417 13.191L11.5208 7.82433C11.7347 7.61044 12.0023 7.49844 12.3235 7.48833C12.6439 7.479 12.9208 7.591 13.1542 7.82433C13.3681 8.03822 13.475 8.31044 13.475 8.641C13.475 8.97155 13.3681 9.24378 13.1542 9.45766L8.63334 14.0077L13.1542 18.5577C13.3681 18.7716 13.4801 19.0387 13.4902 19.3592C13.4995 19.6804 13.3875 19.9577 13.1542 20.191C12.9403 20.4049 12.6681 20.5118 12.3375 20.5118C12.0069 20.5118 11.7347 20.4049 11.5208 20.191Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-double-arrow-left"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-double-arrow-right.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconDoubleArrowRight {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M4.08503 11.5291C3.9628 11.4068 3.90169 11.2513 3.90169 11.0624C3.90169 10.8735 3.9628 10.7179 4.08503 10.5957L6.66836 7.99572L4.08503 5.39572C3.9628 5.2735 3.89903 5.12061 3.89369 4.93705C3.88792 4.75394 3.95169 4.59572 4.08503 4.46239C4.20725 4.34016 4.3628 4.27905 4.55169 4.27905C4.74058 4.27905 4.89614 4.34016 5.01836 4.46239L8.08503 7.52905C8.15169 7.59572 8.19903 7.66794 8.22703 7.74572C8.25458 7.8235 8.26836 7.90683 8.26836 7.99572C8.26836 8.08461 8.25458 8.16794 8.22703 8.24572C8.19903 8.3235 8.15169 8.39572 8.08503 8.46239L5.01836 11.5291C4.89614 11.6513 4.74325 11.7151 4.55969 11.7204C4.37658 11.7262 4.21836 11.6624 4.08503 11.5291ZM8.48503 11.5291C8.3628 11.4068 8.30169 11.2513 8.30169 11.0624C8.30169 10.8735 8.3628 10.7179 8.48503 10.5957L11.0684 7.99572L8.48503 5.39572C8.3628 5.2735 8.2988 5.12061 8.29303 4.93705C8.28769 4.75394 8.35169 4.59572 8.48503 4.46239C8.60725 4.34016 8.7628 4.27905 8.95169 4.27905C9.14058 4.27905 9.29614 4.34016 9.41836 4.46239L12.485 7.52905C12.5517 7.59572 12.5988 7.66794 12.6264 7.74572C12.6544 7.8235 12.6684 7.90683 12.6684 7.99572C12.6684 8.08461 12.6544 8.16794 12.6264 8.24572C12.5988 8.3235 12.5517 8.39572 12.485 8.46239L9.41836 11.5291C9.29614 11.6513 9.14347 11.7151 8.96036 11.7204C8.7768 11.7262 8.61836 11.6624 8.48503 11.5291Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M6.12754 17.2937C5.94421 17.1104 5.85254 16.877 5.85254 16.5937C5.85254 16.3104 5.94421 16.077 6.12754 15.8937L10.0025 11.9937L6.12754 8.0937C5.94421 7.91037 5.84854 7.68103 5.84054 7.4057C5.83187 7.13103 5.92754 6.8937 6.12754 6.6937C6.31087 6.51037 6.54421 6.4187 6.82754 6.4187C7.11087 6.4187 7.34421 6.51037 7.52754 6.6937L12.1275 11.2937C12.2275 11.3937 12.2985 11.502 12.3405 11.6187C12.3819 11.7354 12.4025 11.8604 12.4025 11.9937C12.4025 12.127 12.3819 12.252 12.3405 12.3687C12.2985 12.4854 12.2275 12.5937 12.1275 12.6937L7.52754 17.2937C7.34421 17.477 7.11487 17.5727 6.83954 17.5807C6.56487 17.5894 6.32754 17.4937 6.12754 17.2937ZM12.7275 17.2937C12.5442 17.1104 12.4525 16.877 12.4525 16.5937C12.4525 16.3104 12.5442 16.077 12.7275 15.8937L16.6025 11.9937L12.7275 8.0937C12.5442 7.91037 12.4482 7.68103 12.4395 7.4057C12.4315 7.13103 12.5275 6.8937 12.7275 6.6937C12.9109 6.51037 13.1442 6.4187 13.4275 6.4187C13.7109 6.4187 13.9442 6.51037 14.1275 6.6937L18.7275 11.2937C18.8275 11.3937 18.8982 11.502 18.9395 11.6187C18.9815 11.7354 19.0025 11.8604 19.0025 11.9937C19.0025 12.127 18.9815 12.252 18.9395 12.3687C18.8982 12.4854 18.8275 12.5937 18.7275 12.6937L14.1275 17.2937C13.9442 17.477 13.7152 17.5727 13.4405 17.5807C13.1652 17.5894 12.9275 17.4937 12.7275 17.2937Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7.14879 20.176C6.93491 19.9621 6.82796 19.6899 6.82796 19.3594C6.82796 19.0288 6.93491 18.7566 7.14879 18.5427L11.6696 13.9927L7.14879 9.44269C6.93491 9.2288 6.82329 8.96125 6.81396 8.64003C6.80385 8.31958 6.91546 8.04269 7.14879 7.80936C7.36268 7.59547 7.63491 7.48853 7.96546 7.48853C8.29602 7.48853 8.56824 7.59547 8.78213 7.80936L14.1488 13.176C14.2655 13.2927 14.3483 13.4191 14.3973 13.5552C14.4455 13.6913 14.4696 13.8371 14.4696 13.9927C14.4696 14.1482 14.4455 14.2941 14.3973 14.4302C14.3483 14.5663 14.2655 14.6927 14.1488 14.8094L8.78213 20.176C8.56824 20.3899 8.30068 20.5015 7.97946 20.5109C7.65902 20.521 7.38213 20.4094 7.14879 20.176ZM14.8488 20.176C14.6349 19.9621 14.528 19.6899 14.528 19.3594C14.528 19.0288 14.6349 18.7566 14.8488 18.5427L19.3696 13.9927L14.8488 9.44269C14.6349 9.2288 14.5229 8.96125 14.5128 8.64003C14.5035 8.31958 14.6155 8.04269 14.8488 7.80936C15.0627 7.59547 15.3349 7.48853 15.6655 7.48853C15.996 7.48853 16.2682 7.59547 16.4821 7.80936L21.8488 13.176C21.9655 13.2927 22.0479 13.4191 22.0961 13.5552C22.1451 13.6913 22.1696 13.8371 22.1696 13.9927C22.1696 14.1482 22.1451 14.2941 22.0961 14.4302C22.0479 14.5663 21.9655 14.6927 21.8488 14.8094L16.4821 20.176C16.2682 20.3899 16.0011 20.5015 15.6806 20.5109C15.3594 20.521 15.0821 20.4094 14.8488 20.176Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-double-arrow-right"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

package/dist/collection/components/swirl-icon/icons/swirl-icon-folder.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconFolder {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M2.66668 14.1482C2.30001 14.1482 1.98623 14.0177 1.72534 13.7568C1.46401 13.4955 1.33334 13.1815 1.33334 12.8148V4.81484C1.33334 4.44817 1.46401 4.1344 1.72534 3.87351C1.98623 3.61217 2.30001 3.48151 2.66668 3.48151H6.11668C6.29445 3.48151 6.46401 3.51484 6.62534 3.58151C6.78623 3.64817 6.92779 3.74262 7.05001 3.86484L8.00001 4.81484H13.3333C13.7 4.81484 14.014 4.94551 14.2753 5.20684C14.5362 5.46773 14.6667 5.78151 14.6667 6.14817V12.8148C14.6667 13.1815 14.5362 13.4955 14.2753 13.7568C14.014 14.0177 13.7 14.1482 13.3333 14.1482H2.66668Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M4 20C3.45 20 2.97933 19.8043 2.588 19.413C2.196 19.021 2 18.55 2 18V6C2 5.45 2.196 4.97933 2.588 4.588C2.97933 4.196 3.45 4 4 4H9.175C9.44167 4 9.696 4.05 9.938 4.15C10.1793 4.25 10.3917 4.39167 10.575 4.575L12 6H20C20.55 6 21.021 6.196 21.413 6.588C21.8043 6.97933 22 7.45 22 8V18C22 18.55 21.8043 19.021 21.413 19.413C21.021 19.8043 20.55 20 20 20H4Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M4.66668 23.3334C4.02501 23.3334 3.4759 23.1051 3.01934 22.6485C2.56201 22.1912 2.33334 21.6417 2.33334 21V7.00002C2.33334 6.35835 2.56201 5.80924 3.01934 5.35269C3.4759 4.89535 4.02501 4.66669 4.66668 4.66669H10.7042C11.0153 4.66669 11.312 4.72502 11.5943 4.84169C11.8759 4.95835 12.1236 5.12363 12.3375 5.33752L14 7.00002H23.3333C23.975 7.00002 24.5245 7.22869 24.9818 7.68602C25.4384 8.14258 25.6667 8.69169 25.6667 9.33335V21C25.6667 21.6417 25.4384 22.1912 24.9818 22.6485C24.5245 23.1051 23.975 23.3334 23.3333 23.3334H4.66668Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-folder"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

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

@@ -93,7 +93,7 @@
   }
 
 .lightbox__close-button,
-.lightbox__download-button,
+.lightbox__menu-button,
 .lightbox__previous-slide-button,
 .lightbox__next-slide-button {
   display: inline-flex;
@@ -110,7 +110,7 @@
   pointer-events: auto;
 }
 
-.lightbox__close-button:disabled, .lightbox__download-button:disabled, .lightbox__previous-slide-button:disabled, .lightbox__next-slide-button:disabled {
+.lightbox__close-button:disabled, .lightbox__menu-button:disabled, .lightbox__previous-slide-button:disabled, .lightbox__next-slide-button:disabled {
     pointer-events: none;
     opacity: 0;
   }
@@ -171,6 +171,35 @@
 }
   }
 
+.lightbox__meta {
+  display: flex;
+  padding-top: var(--s-space-4);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-4);
+  padding-left: var(--s-space-16);
+  align-items: center;
+  gap: var(--s-space-12);
+}
+
+@media (min-width: 768px) {
+
+.lightbox__meta {
+    max-width: 18rem
+}
+  }
+
+.lightbox__thumbnail {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.lightbox__file-info {
+  display: flex;
+  min-width: 0;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
 @-webkit-keyframes lightbox-fade-in {
   from {
     opacity: 0;

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

@@ -13,6 +13,7 @@ export class SwirlLightbox {
     this.onDownloadButtonClick = () => {
       var _a;
       (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.download();
+      this.menu.close();
     };
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
@@ -32,7 +33,7 @@ export class SwirlLightbox {
       this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
     };
     this.registerSlides = () => {
-      this.slides = Array.from(this.el.children);
+      this.slides = Array.from(this.el.children).filter((el) => el.tagName === "SWIRL-FILE-VIEWER");
       this.setSlideAttributes();
       this.updateMediaPlayers();
     };
@@ -88,8 +89,10 @@ export class SwirlLightbox {
       }
     };
     this.closeButtonLabel = "Close modal";
-    this.downloadButtonLabel = "Download active slide content";
+    this.downloadButtonLabel = "Download";
     this.label = undefined;
+    this.menuLabel = "Slide options";
+    this.menuTriggerLabel = "Open slide menu";
     this.nextSlideButtonLabel = "Next slide";
     this.previousSlideButtonLabel = "Previous slide";
     this.activeSlideIndex = 0;
@@ -135,6 +138,8 @@ export class SwirlLightbox {
    * @param newActiveSlideIndex
    */
   async activateSlide(newActiveSlideIndex) {
+    var _a, _b;
+    (_b = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
     this.dragging = false;
     this.activeSlideIndex = newActiveSlideIndex;
     this.slides.forEach((slide, index) => {
@@ -179,6 +184,18 @@ export class SwirlLightbox {
       slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
     });
   }
+  getCurrentFileName() {
+    var _a, _b;
+    return (_b = (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.file) === null || _b === void 0 ? void 0 : _b.split("/").pop();
+  }
+  getCurrentFileType() {
+    var _a;
+    return (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.type;
+  }
+  getCurrentThumbnailUrl() {
+    var _a;
+    return (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.thumbnailUrl;
+  }
   lockBodyScroll() {
     disableBodyScroll(this.el);
   }
@@ -203,10 +220,13 @@ export class SwirlLightbox {
   }
   render() {
     const showPagination = this.slides.length > 1;
+    const currentFileName = this.getCurrentFileName();
+    const currentFileType = this.getCurrentFileType();
+    const currentThumbnailUrl = this.getCurrentThumbnailUrl();
     const className = classnames("lightbox", {
       "lightbox--closing": this.closing,
     });
-    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", null)), h("button", { "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick }, h("swirl-icon-download", null))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))))));
+    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "lightbox__body", role: "document" }, h("header", { class: "lightbox__header" }, h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", null)), h("button", { "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button", id: "slide-menu-trigger" }, h("swirl-icon-more-vertikal", null))), h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" }, h("slot", { onSlotchange: this.registerSlides }))), h("div", { class: "lightbox__controls" }, h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", null)), h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", null))), showPagination && (h("span", { class: "lightbox__pagination" }, h("span", { "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, label: this.menuLabel, placement: "bottom-end", popoverId: "slide-menu", ref: (el) => (this.menu = el), trigger: "slide-menu-trigger" }, h("swirl-stack", null, h("div", { class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { class: "lightbox__thumbnail" }, h("swirl-thumbnail", { alt: "", src: currentThumbnailUrl }))), h("div", { class: "lightbox__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, currentFileType))), h("swirl-separator", null), h("swirl-action-list", null, h("swirl-action-list-item", { icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), h("slot", { name: "menu-items" })))))));
   }
   static get is() { return "swirl-lightbox"; }
   static get encapsulation() { return "shadow"; }
@@ -256,7 +276,7 @@ export class SwirlLightbox {
         },
         "attribute": "download-button-label",
         "reflect": false,
-        "defaultValue": "\"Download active slide content\""
+        "defaultValue": "\"Download\""
       },
       "label": {
         "type": "string",
@@ -275,6 +295,42 @@ export class SwirlLightbox {
         "attribute": "label",
         "reflect": false
       },
+      "menuLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "menu-label",
+        "reflect": false,
+        "defaultValue": "\"Slide options\""
+      },
+      "menuTriggerLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "menu-trigger-label",
+        "reflect": false,
+        "defaultValue": "\"Open slide menu\""
+      },
       "nextSlideButtonLabel": {
         "type": "string",
         "mutable": false,

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

@@ -29,10 +29,21 @@ const Template = (args) => {
   trigger.label = "Open lightbox";
   trigger.addEventListener("click", () => element.open());
   element.innerHTML = `
-    <swirl-file-viewer description="Cute dog in a blanket." file="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
-    <swirl-file-viewer description="Another cute dog in a blanket." file="/sample-2.jpg" type="image/jpeg"></swirl-file-viewer>
-    <swirl-file-viewer description="Black puppy." file="/sample-3.jpg" type="image/jpeg"></swirl-file-viewer>
+    <swirl-file-viewer description="Another cute dog in a blanket." file="/sample-2.jpg" thumbnail-url="/sample-2.jpg" type="image/jpeg"></swirl-file-viewer>
+    <swirl-file-viewer description="Cute dog in a blanket." file="/sample.jpg" thumbnail-url="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
+    <swirl-file-viewer description="Black puppy." file="/sample-3.jpg" thumbnail-url="/sample-3.jpg" type="image/jpeg"></swirl-file-viewer>
     <swirl-file-viewer autoplay file="/sample.mp4" type="video/mp4"></swirl-file-viewer>
+
+    <swirl-action-list-item
+      icon="<swirl-icon-attachment></swirl-icon-attachment>"
+      label="Custom action 1"
+      slot="menu-items"
+    ></swirl-action-list-item>
+    <swirl-action-list-item
+      icon="<swirl-icon-cloud-upload></swirl-icon-cloud-upload>"
+      label="Custom action 2"
+      slot="menu-items"
+    ></swirl-action-list-item>
   `;
   container.append(trigger, element);
   return container;