@getflip/swirl-components 0.483.0 → 0.485.0

package/dist/collection/components/swirl-symbol/symbols/swirl-symbol-youtube.js

@@ -7,7 +7,7 @@ export class SwirlSymbolYoutube {
     }
     render() {
         const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
-        return (h("svg", { key: 'e6dcf9f13f9fc459a3ce4e7a1e2a618c149e3522', class: className, fill: "none", height: this.size, part: "symbol", viewBox: "0 0 24 24", width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '2557b917c95f8b29c3d61e3d8340940b20eb3f4e' }, h("path", { key: '4cd2f8cf49ec77ecd619ab839259ee0014cac88b', d: "M21.582 7.201C21.4691 6.77542 21.2463 6.38698 20.936 6.07459C20.6257 5.76219 20.2388 5.5368 19.814 5.421C18.254 5 12 5 12 5C12 5 5.74599 5 4.18599 5.421C3.76123 5.5369 3.37436 5.76231 3.06408 6.0747C2.7538 6.38708 2.53101 6.77547 2.41799 7.201C2.12953 8.79965 1.9896 10.4216 1.99999 12.046C1.9896 13.6704 2.12953 15.2923 2.41799 16.891C2.53092 17.3166 2.75368 17.705 3.06397 18.0174C3.37426 18.3298 3.76118 18.5552 4.18599 18.671C5.74499 19.092 11.999 19.092 11.999 19.092C11.999 19.092 18.253 19.092 19.813 18.671C20.2378 18.5553 20.6248 18.3299 20.9351 18.0175C21.2454 17.7051 21.4682 17.3166 21.581 16.891C21.8695 15.2923 22.0098 13.6705 22 12.046C22.0104 10.4216 21.8704 8.79965 21.582 7.201ZM9.95399 15.019V9.072L15.181 12.045L9.95399 15.019Z", fill: "currentColor" }))));
+        return (h("svg", { key: '2120bb54087d2627e8ecd0953b7835b234a44aca', class: className, fill: "none", height: this.size, part: "symbol", viewBox: "0 0 24 24", width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '77ab72e2304fe7997847de607090db01a18152c3' }, h("path", { key: '1c21415aa8c82f437258f6b5b19907fae3734c48', d: "M21.582 7.201C21.4691 6.77542 21.2463 6.38698 20.936 6.07459C20.6257 5.76219 20.2388 5.5368 19.814 5.421C18.254 5 12 5 12 5C12 5 5.74599 5 4.18599 5.421C3.76123 5.5369 3.37436 5.76231 3.06408 6.0747C2.7538 6.38708 2.53101 6.77547 2.41799 7.201C2.12953 8.79965 1.9896 10.4216 1.99999 12.046C1.9896 13.6704 2.12953 15.2923 2.41799 16.891C2.53092 17.3166 2.75368 17.705 3.06397 18.0174C3.37426 18.3298 3.76118 18.5552 4.18599 18.671C5.74499 19.092 11.999 19.092 11.999 19.092C11.999 19.092 18.253 19.092 19.813 18.671C20.2378 18.5553 20.6248 18.3299 20.9351 18.0175C21.2454 17.7051 21.4682 17.3166 21.581 16.891C21.8695 15.2923 22.0098 13.6705 22 12.046C22.0104 10.4216 21.8704 8.79965 21.582 7.201ZM9.95399 15.019V9.072L15.181 12.045L9.95399 15.019Z", fill: "currentColor" }))));
     }
     static get is() { return "swirl-symbol-youtube"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlTableCell {
     render() {
-        return (h(Host, { key: '5e6df70a9c98402f5962da717243bdc2cd43b5f9', class: "table-cell", role: "cell" }, h("slot", { key: '24bcf5006bf8ee59fdc838876658fdfe5aa7fc79' })));
+        return (h(Host, { key: 'f540c8c7efb54aab02a342af6279050365c46222', class: "table-cell", role: "cell" }, h("slot", { key: '06a735913e0fabd926f5695a9e63b36ac28ef6e4' })));
     }
     static get is() { return "swirl-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class SwirlTableRow {
         const className = classnames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: 'd916184cb9c15acac9f98a4297ab96f28725a3f5', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '454610799849e8be61091e41941324562b8f4032' })));
+        return (h(Host, { key: 'dd6e8e034c8e7bc7058d4429ddaa7cee4b5707c4', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'd853d6d56a912faf384868f1cf1476675450a347' })));
     }
     static get is() { return "swirl-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,10 +38,10 @@ export class SwirlTableRowGroup {
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (h(Host, { key: '35b21415ba3b76d6465adf2dbc9140fa64d0b318', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'a3a463a77ec51a29780e379aaeefcae5e5014480', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'cd68cda37b8d22d5d83bb8dad920bbab316073a1', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: '6a95fc9e4b1349b80836cc5e1760f86fafa5438b', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '8f08e784e6733d4a915df816061e1f7957ae84b8', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '9d3b84bed98ef5b370b8faa574ed927b5bbd1d5b', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: 'ac0355889f98ae0d5570ffea5228c43fc478a6ef', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '6b1b0c0ef43bed1d4920449c045c17aea365d2a4', class: {
+        return (h(Host, { key: '37fd49facc93a338c7da3db546c74261d699caec', class: "table-row-group", role: "rowgroup" }, h("div", { key: '366124069b69d3920e368b6a38fd5775d9dcb399', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '1ab6de08b0af9df132c591e64be11b6baeed8b02', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'e542f4663ea9748b160c62a8953bfb54946bc81c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'dc77ae5e12c30cf6814bc2a3b760792e00c9b49e', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'db4d39f865fbd92b25df75ed23d5d029caf914f7', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: '7d303a8347f7e6d7941f6e20eca3eaf6daabd899', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '15683ef5c4d5ef8b99324fd7663a2f43ee1e1210', class: {
                 "table-row-group__rows-container": true,
                 "table-row-group__rows-container--is-hidden": this.isVisible,
-            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '0a23458a1fef8e4409f08b908bb83d363e0e7f38' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'ce6e7412c2199a5203dc0a356f77a3dec2e47af8' }))));
     }
     static get is() { return "swirl-table-row-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class SwirlTabs {
         }));
     }
     render() {
-        return (h(Host, { key: '7bed9a7a1592918b4015b05456b6584e7e63b84b' }, h("div", { key: 'cbcd8a2c5e09cbc5cbab16752d1912a901024250', class: "tabs" }, h("swirl-tab-bar", { key: 'b7e91345c077601e1722629d9773749fb913531c', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'a27bdba238727cc1c34ccb87e1bd591b3d02f695' })));
+        return (h(Host, { key: 'f384209dbfb6918060138d266316b8480f5f506e' }, h("div", { key: '385dc610d2a05d9d48fd9ae015ee061e4f6cfc60', class: "tabs" }, h("swirl-tab-bar", { key: 'cb6254cec2bb56304dce1cc9ff9d34ac9f820c68', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: '5d0c6ab2e4e11e324d5dd93ae2214ea9bf11f1de' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-theme-provider/swirl-theme-provider.js

@@ -144,7 +144,7 @@ export class SwirlThemeProvider {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: 'd78719001cfabe13989c4a2bfa1fa47dc1c8838e' }, h("slot", { key: '85f4ab6aa08ec53d0dfc222eca97357b3d851493' })));
+        return (h(Host, { key: 'e48f98c499a5d4b4e0020b0718fb9e4732bb0af4' }, h("slot", { key: '65ffc19d59eaed25b0b627f4ebfd87197afe2031' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,31 +10,30 @@
   position: relative;
   display: inline-flex;
   overflow: hidden;
-  padding: 0.0625rem;
   border-radius: var(--s-border-radius-s);
 }
 
 .thumbnail--size-s {
   --swirl-thumbnail-size: 2.5rem;
+  --swirl-thumbnail-compact-button-size: 1.5rem;
 }
 
 .thumbnail--size-m {
   --swirl-thumbnail-size: 3rem;
+  --swirl-thumbnail-compact-button-size: 1.5rem;
 }
 
 .thumbnail--size-l {
   --swirl-thumbnail-size: 4rem;
+  --swirl-thumbnail-compact-button-size: 1.5rem;
 }
 
 .thumbnail--size-xl {
-  --swirl-thumbnail-size: 5rem;
+  --swirl-thumbnail-size: 5.5rem;
+  --swirl-thumbnail-compact-button-size: 1.75rem;
   border-radius: var(--s-border-radius-sm);
 }
 
-.thumbnail--size-xl .thumbnail__buttons {
-    transform: scale(0.75);
-  }
-
 .thumbnail--size-2xl {
   --swirl-thumbnail-size: 7.5rem;
   border-radius: var(--s-border-radius-sm);
@@ -55,15 +54,32 @@
   height: var(--swirl-thumbnail-size);
 }
 
-.thumbnail--has-progress .thumbnail__timestamp {
+.thumbnail--uploading-bar .thumbnail__timestamp {
     bottom: var(--s-space-8);
   }
 
+.thumbnail__image-wrapper {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  border-radius: inherit;
+  background-color: transparent;
+  box-shadow: inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1);
+}
+
+.thumbnail__image-wrapper:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.thumbnail__image-wrapper:focus-visible {
+    outline: 0.125rem solid var(--s-focus-default);
+    outline-offset: calc(-1 * 0.125rem);
+  }
+
 .thumbnail--interactive .thumbnail__image-wrapper {
-    position: relative;
-    padding: 0;
-    border: none;
-    background-color: transparent;
     cursor: pointer;
   }
 
@@ -81,14 +97,6 @@
         inset: 0;
       }
 
-.thumbnail__image-wrapper {
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--s-border-radius-s);
-  box-shadow: inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1);
-}
-
 .thumbnail__image {
   width: 100%;
   height: 100%;
@@ -96,7 +104,8 @@
      object-fit: cover;
 }
 
-.thumbnail__progress-indicator {
+.thumbnail__progress-indicator,
+.thumbnail__uploading-overlay {
   position: absolute;
   z-index: 1;
   right: 0;
@@ -104,6 +113,24 @@
   left: 0;
 }
 
+.thumbnail__uploading-overlay {
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--s-surface-on-image-default);
+}
+
+.thumbnail__error {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--s-surface-on-image-default);
+}
+
 .thumbnail__buttons {
   position: absolute;
   z-index: 1;
@@ -111,32 +138,63 @@
   right: var(--s-space-4);
 }
 
-@media (hover: hover) {
-  .thumbnail__buttons {
-    opacity: 0;
+.thumbnail__compact-action {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+}
+
+.thumbnail__compact-button {
+  width: var(--swirl-thumbnail-compact-button-size, 1.5rem);
+  height: var(--swirl-thumbnail-compact-button-size, 1.5rem);
+  padding: 0;
+  border: none;
+  border-bottom-left-radius: var(--s-border-radius-s);
+  color: var(--s-text-on-image);
+  background-color: var(--s-surface-on-image-default);
+  cursor: pointer;
+}
+
+.thumbnail__compact-button:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.thumbnail__compact-button:focus-visible {
+    outline: 0.125rem solid var(--s-focus-default);
+    outline-offset: calc(-1 * 0.125rem);
   }
-    .thumbnail:hover .thumbnail__buttons {
-      opacity: 1;
-    }
+
+.thumbnail__buttons,
+.thumbnail__compact-action {
+  opacity: 0;
 }
 
+.thumbnail:hover .thumbnail__buttons,
+  .thumbnail:hover .thumbnail__compact-action,
+  .thumbnail:focus-within .thumbnail__buttons,
+  .thumbnail:focus-within .thumbnail__compact-action {
+    opacity: 1;
+  }
+
 .thumbnail__timestamp {
   position: absolute;
   z-index: 1;
-  bottom: var(--s-space-4);
-  left: var(--s-space-4);
+  bottom: 0;
+  left: 0;
   display: block;
   overflow: hidden;
   max-width: calc(100% - 2 * var(--s-space-4));
-  height: 1.5rem;
-  padding-right: var(--s-space-8);
-  padding-left: var(--s-space-8);
+  height: 1.25rem;
+  padding-right: var(--s-space-4);
+  padding-left: var(--s-space-4);
   align-items: center;
   border-radius: var(--s-border-radius-s);
   color: var(--s-text-on-image);
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: var(--s-surface-on-image-default);
   font-size: var(--s-font-size-sm);
-  line-height: 1.5rem;
+  line-height: 1.25rem;
   white-space: nowrap;
   text-overflow: ellipsis;
+  pointer-events: none;
 }

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

@@ -1,28 +1,86 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+const COMPACT_SIZES = ["s", "m", "l"];
 export class SwirlThumbnail {
     constructor() {
+        this.cursor = "pointer";
         this.editButtonIcon = "<swirl-icon-crop></swirl-icon-crop>";
         this.editButtonLabel = "Edit";
         this.format = "landscape";
+        this.menuButtonLabel = "More actions";
+        this.openButtonIcon = "<swirl-icon-visibility></swirl-icon-visibility>";
+        this.openButtonLabel = "Open";
         this.progressLabel = "Loading progress";
+        this.removeButtonIcon = "<swirl-icon-delete></swirl-icon-delete>";
         this.removeButtonLabel = "Remove";
         this.size = "m";
+        this.hasHover = true;
+        this.onEditClick = (event) => {
+            this.edit.emit(event);
+            this.popoverEl?.close();
+        };
+        this.onOpenClick = (event) => {
+            this.thumbnailClick.emit(event);
+            this.popoverEl?.close();
+        };
+        this.onRemoveClick = (event) => {
+            this.remove.emit(event);
+            this.popoverEl?.close();
+        };
+        this.onHoverChange = (event) => {
+            this.hasHover = event.matches;
+        };
+    }
+    connectedCallback() {
+        if (typeof window === "undefined" || !window.matchMedia) {
+            return;
+        }
+        this.hoverMediaQuery = window.matchMedia("(hover: hover)");
+        this.hasHover = this.hoverMediaQuery.matches;
+        this.hoverMediaQuery.addEventListener?.("change", this.onHoverChange);
+    }
+    disconnectedCallback() {
+        this.hoverMediaQuery?.removeEventListener?.("change", this.onHoverChange);
+        this.hoverMediaQuery = undefined;
+    }
+    componentDidRender() {
+        if (this.popoverTriggerEl && this.popoverEl) {
+            this.popoverTriggerEl.swirlPopover = this.popoverEl;
+        }
     }
     render() {
-        const showInteractable = (this.size === "xl" || this.size === "2xl") && this.format === "square";
-        const showRemoveButton = this.showRemoveButton && showInteractable;
-        const showEditButton = this.showEditButton &&
-            showInteractable &&
-            !(this.size === "xl" && showRemoveButton);
-        const showButtonGroup = showEditButton || showRemoveButton;
-        const showTimestamp = Boolean(this.timestamp) && showInteractable;
-        const ImageWrapper = this.interactive ? "button" : "span";
+        const isCompact = COMPACT_SIZES.includes(this.size);
+        const isUploading = this.progress !== undefined;
+        const showError = Boolean(this.error);
+        const showUploadingOverlay = isUploading && !showError;
+        const showEditButton = Boolean(this.showEditButton);
+        const showRemoveButton = Boolean(this.showRemoveButton);
+        const hasAnyAction = showEditButton || showRemoveButton;
+        const useThumbnailAsPopoverTrigger = !this.hasHover && hasAnyAction;
+        const showCompactMenu = isCompact && this.hasHover && showEditButton && showRemoveButton;
+        const showCompactEditButton = isCompact && this.hasHover && showEditButton && !showRemoveButton;
+        const showCompactRemoveButton = isCompact && this.hasHover && showRemoveButton && !showEditButton;
+        const showSegmentedGroup = !isCompact && this.hasHover && hasAnyAction;
+        const showPopover = showCompactMenu || useThumbnailAsPopoverTrigger;
+        const showOpenAction = useThumbnailAsPopoverTrigger && this.interactive;
+        const showTimestamp = Boolean(this.timestamp) && this.size !== "s";
+        const hideTimestampForUploading = isUploading && isCompact;
+        const isImageWrapperButton = this.interactive || useThumbnailAsPopoverTrigger;
+        const ImageWrapper = isImageWrapperButton ? "button" : "span";
         const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
             "thumbnail--interactive": this.interactive,
-            "thumbnail--has-progress": this.progress !== undefined,
+            "thumbnail--uploading-bar": isUploading && !isCompact,
         });
-        return (h(Host, { key: '5bc10ca0eb14a06dc7c6a72cede93d36c613214c' }, h("span", { key: '4523056916a2132b7c2b964fbe6e7e337590f63c', class: className, role: "group" }, h(ImageWrapper, { key: 'efa9b35d3151d6948ce7bc66314b5da4e55f5f85', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '63a56765433c59dee5499c5b28de2bfffde1c7ad', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'fcabdab3221ead6e7c12e6b1586c6d68c0779c17', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: 'c9c31ce168b9427a94cbd0593a31e26e3c0bb5c8', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '5c0b3d9a2393bef230d61ddfa219de99146dd087', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '1c2b15b0a651247bdcccc76576d62f2c7ab51207' }, h("swirl-button", { key: '2aab8450f7b3a1216ec20a950eeffd6f7cdc8b5b', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'e8f4b28fd68dddf920d9d7af96110c87832eb8cb' }, h("swirl-button", { key: '4459e8f2c4931dcd0abb009ebeed4d64b06323f4', hideLabel: true, icon: "<swirl-icon-delete></swirl-icon-delete>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '2e754460a8b4df69c027b281882b3169dabb363a', class: "thumbnail__timestamp" }, this.timestamp)))));
+        const imageWrapper = (h(ImageWrapper, { key: 'ba572297c4bc18760c2c106b4e738b49d68a53df', class: "thumbnail__image-wrapper", onClick: useThumbnailAsPopoverTrigger ? undefined : this.thumbnailClick.emit, style: isImageWrapperButton && this.cursor !== "pointer"
+                ? { cursor: this.cursor }
+                : undefined, type: isImageWrapperButton ? "button" : undefined }, h("img", { key: 'c80259bd15a87f787435ffc974be78f0d59297d7', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })));
+        return (h(Host, { key: 'e117c0dc831ba538324e0066c7fa1f638545271f' }, h("span", { key: '928b82872d5bb8fafc184a76c6d4321bb3b48745', class: className, role: "group" }, useThumbnailAsPopoverTrigger ? (h("swirl-popover-trigger", { ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, imageWrapper)) : (imageWrapper), showUploadingOverlay && (h("span", { key: 'f12c5faf328c7a625133974385e3cdd49da66e19', class: isCompact
+                ? "thumbnail__uploading-overlay"
+                : "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '1f4544f587af7e8a580cfda0b85e688b3bcf7b35', label: this.progressLabel, size: isCompact ? "s" : undefined, value: this.progress, variant: isCompact ? "circle" : undefined }))), showError && (h("span", { key: '7babb76a660d6406346a42d0797ad540a6a08368', class: "thumbnail__error" }, h("swirl-icon-error", { key: '2076a840833af16d26a2deed5717476d04120669', color: "critical" }))), showSegmentedGroup && (h("swirl-button-group", { key: '757bcb7b1679b7e222af8ebcb2f7e129b0cfb2be', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '8af120c6ca0e5880f66431242fe2325de36c4c93' }, h("swirl-button", { key: '30f31e9bbbc2a1185b5f294a790120a518cb6835', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, variant: "on-image" }))), showRemoveButton && (h("span", { key: '9f74a1266a0af9aa49762acebfa41ce826ec2509' }, h("swirl-button", { key: '2768666d0976934786c156d468ca5fc5b2062d52', hideLabel: true, icon: this.removeButtonIcon, label: this.removeButtonLabel, onClick: this.remove.emit, variant: "on-image" }))))), (showCompactEditButton || showCompactRemoveButton) && (h("span", { key: '38bf22b5d9ac7f092c9e7e787054494db2358126', class: "thumbnail__compact-action" }, h("button", { key: '202087b05c0929f17802ce3cfd6de194b5f6d194', "aria-label": showCompactEditButton
+                ? this.editButtonLabel
+                : this.removeButtonLabel, class: "thumbnail__compact-button", onClick: showCompactEditButton ? this.edit.emit : this.remove.emit, type: "button" }, h("span", { key: '043d9c2a87f6ab7fdfd90f78fff2eb33566b47ac', innerHTML: showCompactEditButton
+                ? this.editButtonIcon
+                : this.removeButtonIcon, ref: (el) => el?.children[0]?.setAttribute("size", "20") })))), showCompactMenu && (h("span", { key: 'acfe9142f49d86b61eb9235682e61d6fde4ff373', class: "thumbnail__compact-action" }, h("swirl-popover-trigger", { key: '824c061b9a86de1f6a550feeec4747129bf558e2', ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, h("button", { key: '41b381bf338f21725e189613f69604821fdf33c1', "aria-label": this.menuButtonLabel, class: "thumbnail__compact-button", type: "button" }, h("swirl-icon-more-horizontal", { key: '9c60e34c4149d2f6d4ee9452d763b74ca5820721', size: 20 }))))), showPopover && (h("swirl-popover", { key: 'f0bdf5a554b2c86a9829f0cc7cd7bf98afff85df', label: this.menuButtonLabel, placement: "bottom-end", padded: false, ref: (el) => (this.popoverEl = el) }, h("swirl-action-list", { key: 'ebc942d4e0774005b725a7d947119eb297f8e798' }, showOpenAction && (h("swirl-action-list-item", { key: '811143ffecfcf512595d7c661500fc0d80f69c33', icon: this.openButtonIcon, label: this.openButtonLabel, onClick: this.onOpenClick })), showEditButton && (h("swirl-action-list-item", { key: '35e6d6f4710838757389a45899b3ed6179b201d8', icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.onEditClick })), showRemoveButton && (h("swirl-action-list-item", { key: 'b21d2837db025d6f17ee56b2ccdd9049b5690114', icon: this.removeButtonIcon, intent: "critical", label: this.removeButtonLabel, onClick: this.onRemoveClick }))))), showTimestamp && !hideTimestampForUploading && (h("span", { key: 'be2c6da605381330fb91afe3188a7be065224c76', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get is() { return "swirl-thumbnail"; }
     static get encapsulation() { return "shadow"; }
@@ -57,6 +115,33 @@ export class SwirlThumbnail {
                 "reflect": false,
                 "attribute": "alt"
             },
+            "cursor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlCursor",
+                    "resolved": "\"alias\" | \"all-scroll\" | \"auto\" | \"cell\" | \"col-resize\" | \"context-menu\" | \"copy\" | \"crosshair\" | \"default\" | \"e-resize\" | \"ew-resize\" | \"grab\" | \"grabbing\" | \"help\" | \"move\" | \"n-resize\" | \"ne-resize\" | \"nesw-resize\" | \"no-drop\" | \"none\" | \"not-allowed\" | \"ns-resize\" | \"nw-resize\" | \"nwse-resize\" | \"pointer\" | \"progress\" | \"row-resize\" | \"s-resize\" | \"se-resize\" | \"sw-resize\" | \"text\" | \"vertical-text\" | \"w-resize\" | \"wait\" | \"zoom-in\" | \"zoom-out\"",
+                    "references": {
+                        "SwirlCursor": {
+                            "location": "import",
+                            "path": "../../utils",
+                            "id": "src/utils.ts::SwirlCursor",
+                            "referenceLocation": "SwirlCursor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cursor",
+                "defaultValue": "\"pointer\""
+            },
             "editButtonIcon": {
                 "type": "string",
                 "mutable": false,
@@ -97,6 +182,25 @@ export class SwirlThumbnail {
                 "attribute": "edit-button-label",
                 "defaultValue": "\"Edit\""
             },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
             "format": {
                 "type": "string",
                 "mutable": false,
@@ -142,6 +246,66 @@ export class SwirlThumbnail {
                 "reflect": false,
                 "attribute": "interactive"
             },
+            "menuButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-button-label",
+                "defaultValue": "\"More actions\""
+            },
+            "openButtonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-button-icon",
+                "defaultValue": "\"<swirl-icon-visibility></swirl-icon-visibility>\""
+            },
+            "openButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-button-label",
+                "defaultValue": "\"Open\""
+            },
             "progress": {
                 "type": "number",
                 "mutable": false,
@@ -181,6 +345,26 @@ export class SwirlThumbnail {
                 "attribute": "progress-label",
                 "defaultValue": "\"Loading progress\""
             },
+            "removeButtonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-button-icon",
+                "defaultValue": "\"<swirl-icon-delete></swirl-icon-delete>\""
+            },
             "removeButtonLabel": {
                 "type": "string",
                 "mutable": false,
@@ -305,6 +489,11 @@ export class SwirlThumbnail {
             }
         };
     }
+    static get states() {
+        return {
+            "hasHover": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "edit",

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

@@ -2,23 +2,39 @@ import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-thumbnail.mdx";
 export default {
     argTypes: {
-        showEditButton: {
-            description: "Only displayed with format `square` and either size `2xl` or size `xl` with `show-remove-button` set to `false`. ",
-        },
-        showRemoveButton: {
-            description: "Only displayed with size `xl` or `2xl` and format `square`.",
+        editButtonIcon: {
+            table: {
+                type: {
+                    summary: "swirl-icon-*",
+                },
+            },
         },
-        timestamp: {
-            description: "Only displayed with size `xl` or `2xl` and format `square`.",
+        removeButtonIcon: {
+            table: {
+                type: {
+                    summary: "swirl-icon-*",
+                },
+            },
         },
-        editButtonIcon: {
+        openButtonIcon: {
             table: {
                 type: {
-                    detail: "e.g. <swirl-icon-edit></swirl-icon-edit>",
                     summary: "swirl-icon-*",
                 },
             },
         },
+        showEditButton: {
+            description: "Shows an edit action on hover. On sizes `s`/`m` the action renders as a small corner button (or inside a popover when combined with `showRemoveButton`). On sizes `l`/`xl`/`2xl` it renders as part of a segmented button group.",
+        },
+        showRemoveButton: {
+            description: "Shows a remove action on hover. Follows the same compact/segmented rules as `showEditButton`.",
+        },
+        timestamp: {
+            description: "Rendered at the bottom-left of the thumbnail for sizes `m` and above. Commonly used to display a video duration.",
+        },
+        progress: {
+            description: "When set, shows an uploading indicator. Sizes `s`/`m` show a centered circular spinner on a dark overlay, sizes `l`/`xl`/`2xl` show a bottom progress bar.",
+        },
     },
     component: "swirl-thumbnail",
     tags: ["autodocs"],
@@ -29,10 +45,7 @@ export default {
     },
     title: "Components/SwirlThumbnail",
 };
-const Template = (args) => {
-    const element = generateStoryElement("swirl-thumbnail", args);
-    return element;
-};
+const Template = (args) => generateStoryElement("swirl-thumbnail", args);
 export const SwirlThumbnail = Template.bind({});
 SwirlThumbnail.args = {
     alt: "Brief description of the image.",

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -161,7 +161,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '917c50baa5d5fe5dd8c8be8c5b10c4d9a7e649f9' }, h("div", { key: '1928271813a5ee0963caa64c9dab899779637e27', class: className }, h("input", { key: 'e2959b039e91f863560f047cd645cb94a5d9ee7a', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: '026d2ab8bfe7a8da339fa94c1db0f51e9f0d1bf5', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'c5ce4280df1293bc1477d66052deb6643801c4f5', size: this.iconSize })))));
+        return (h(Host, { key: '9a5bbb3c50c9db2cb4b2bb48021113209d733ab0' }, h("div", { key: '4740af4707a2ec76a2fb96c63e0fceb58d165c5a', class: className }, h("input", { key: '52ee31427daf2de83127d27f3837f835f1ebafa5', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: '7b6c9327d394608af3603f90ad808bf7a57494bc', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '2689cbab234f65cdc5776b7dd31a378c0a29ed79', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -52,7 +52,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '755346b31178e4af07834e1d95bf0241faedfc89' }, h("div", { key: 'baf1e4f5691fcfc21b11c35f6584e951a9039c43', class: className }, this.icon && (h("span", { key: 'af1d9cd2a9ccb33d4d473e2e8139018a55074adc', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '9bf836f9e64a343c76527c09868afb93b89dc1b6', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'be669cb508dd92b6d8dbc7cc416a147ba40a0bbe' })), this.actionLabel && (h("swirl-button", { key: '754a0a06417dfde70903c6099e3150913d1927c9', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" })), h("button", { key: '822e778a495dbfb52d872d461c7275f76bcf0ead', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'ed76a1a28b11be0da4973afb0669a2935d768bcf', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: 'b262aeaffd17ea3bd343809cfb0d8e97b1b62396' }, h("div", { key: '78272b495c2092ff7a4ee9e0eb5b4f13726aa9b7', class: className }, this.icon && (h("span", { key: '967d5fceb7d7497429313c832da27986ed160d5d', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '8b36bf2a453fb30a56b9eac3ca1b30e1add71d7e', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '781e18bb04e70bdfa4f7425db0fa3e93fbd8bffb' })), this.actionLabel && (h("swirl-button", { key: '59df81ec318efd3084317cc9af56e6c6d57cf21f', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" })), h("button", { key: 'f5677d18055dd6e51f78d45dde03e893cb93c466', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '701b783b1c5a7ae56e79e5873c991d6ca74839c7', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js

@@ -115,7 +115,7 @@ export class SwirlToastProvider {
         this.popoverEl.showPopover();
     }
     render() {
-        return (h(Host, { key: '1999b5fabf0e1a73277adf8e7897ffa53d246c91', role: "status" }, h("swirl-stack", { key: 'b7ae38cdba993695c19e89b013767a83c07a38a1', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
+        return (h(Host, { key: 'bd3dd3bf3b7965997cb99afb8b886d0d022b4a24', role: "status" }, h("swirl-stack", { key: '7699d04c7ff9b4d315f903bd69f0599bc8a55a39', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
             const props = {
                 ...toast,
                 content: undefined,