@getflip/swirl-components 0.378.0 → 0.379.1

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css

@@ -22,6 +22,28 @@
 .resource-list-item {
   position: relative;
   width: 100%;
+  display: flex;
+  padding: var(--s-space-12) var(--s-space-8);
+  gap: var(--s-space-12);
+  border-radius: var(--s-border-radius-sm);
+  background-color: var(--swirl-resource-list-item-background-default);
+}
+
+.resource-list-item:has(.resource-list-item__content:focus-visible) {
+    background-color: var(--s-background-hovered);
+    outline-color: var(--s-focus-default);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    z-index: 1;
+  }
+
+.resource-list-item:has(.resource-list-item__content:focus-visible) .resource-list-item__media {
+      --swirl-avatar-group-border-color: var(--s-background-hovered);
+      --swirl-badge-border-color: var(--s-background-hovered);
+    }
+
+.resource-list-item--interactive {
+  cursor: pointer;
 }
 
 .resource-list-item--interactive:hover {
@@ -36,37 +58,39 @@
       cursor: default;
     }
 
-.resource-list-item--interactive .resource-list-item__content:hover:not(:disabled),
-    .resource-list-item--interactive .resource-list-item__content:focus:not(:disabled) {
-      background-color: var(--swirl-resource-list-item-background-hovered);
-    }
+.resource-list-item--interactive.resource-list-item--disabled {
+    cursor: default;
+  }
 
-.resource-list-item--interactive .resource-list-item__content:hover:not(:disabled) .resource-list-item__media,
-      .resource-list-item--interactive .resource-list-item__content:hover:not(:disabled) .resource-list-item__meta,
-      .resource-list-item--interactive .resource-list-item__content:focus:not(:disabled) .resource-list-item__media,
-      .resource-list-item--interactive .resource-list-item__content:focus:not(:disabled) .resource-list-item__meta {
-        --swirl-avatar-background-color: var(--s-surface-raised-hovered);
-        --swirl-avatar-group-border-color: var(--s-background-hovered);
-        --swirl-badge-border-color: var(--s-background-hovered);
-      }
+.resource-list-item--interactive:hover:not(.resource-list-item--disabled),
+  .resource-list-item--interactive:focus:not(.resource-list-item--disabled) {
+    background-color: var(--swirl-resource-list-item-background-hovered);
+  }
 
-.resource-list-item--interactive .resource-list-item__content:active:not(:disabled) {
-      background-color: var(--swirl-resource-list-item-background-pressed);
+.resource-list-item--interactive:hover:not(.resource-list-item--disabled) .resource-list-item__media,
+    .resource-list-item--interactive:hover:not(.resource-list-item--disabled) .resource-list-item__meta,
+    .resource-list-item--interactive:focus:not(.resource-list-item--disabled) .resource-list-item__media,
+    .resource-list-item--interactive:focus:not(.resource-list-item--disabled) .resource-list-item__meta {
+      --swirl-avatar-background-color: var(--s-surface-raised-hovered);
+      --swirl-avatar-group-border-color: var(--s-background-hovered);
+      --swirl-badge-border-color: var(--s-background-hovered);
     }
 
-.resource-list-item--interactive .resource-list-item__content:active:not(:disabled) .resource-list-item__media,
-      .resource-list-item--interactive .resource-list-item__content:active:not(:disabled) .resource-list-item__meta {
-        --swirl-avatar-group-border-color: var(--s-background-pressed);
-        --swirl-badge-border-color: var(--s-background-pressed);
-      }
+.resource-list-item--interactive:active:not(.resource-list-item--disabled) {
+    background-color: var(--swirl-resource-list-item-background-pressed);
+  }
 
-.resource-list-item--active .resource-list-item__content {
-    --swirl-badge-border-color: var(
-      --swirl-resource-list-item-background-hovered
-    );
+.resource-list-item--interactive:active:not(.resource-list-item--disabled) .resource-list-item__media,
+    .resource-list-item--interactive:active:not(.resource-list-item--disabled) .resource-list-item__meta {
+      --swirl-avatar-group-border-color: var(--s-background-pressed);
+      --swirl-badge-border-color: var(--s-background-pressed);
+    }
 
-    background-color: var(--swirl-resource-list-item-background-hovered);
-  }
+.resource-list-item--active {
+  --swirl-badge-border-color: var(--swirl-resource-list-item-background-hovered);
+
+  background-color: var(--swirl-resource-list-item-background-hovered);
+}
 
 .resource-list-item--checked .resource-list-item__checkbox {
     border-color: var(--s-icon-highlight);
@@ -74,16 +98,16 @@
     background-color: var(--s-icon-highlight);
   }
 
-.resource-list-item--compact .resource-list-item__content {
-    padding: var(--s-space-8);
-  }
+.resource-list-item--compact {
+  padding: var(--s-space-8);
+}
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
-.resource-list-item--compact .resource-list-item__content {
-      padding: var(--s-space-8)
+.resource-list-item--compact {
+    padding: var(--s-space-8)
+}
   }
-    }
 
 .resource-list-item--compact .resource-list-item__label-container {
     min-height: 2.5rem;
@@ -131,23 +155,39 @@
 .resource-list-item--show-control-on-focus:hover .resource-list-item__control, .resource-list-item--show-control-on-focus:focus .resource-list-item__control, .resource-list-item--show-control-on-focus:focus-within .resource-list-item__control {
       pointer-events: auto;
       opacity: 1;
-      width: auto;
+      position: static;
+      transform: none;
     }
 
+.resource-list-item--show-control-on-focus:hover .resource-list-item__meta, .resource-list-item--show-control-on-focus:focus .resource-list-item__meta, .resource-list-item--show-control-on-focus:focus-within .resource-list-item__meta {
+      margin-right: 0;
+      padding-right: 0;
+    }
+
+.resource-list-item--show-control-on-focus .resource-list-item__meta {
+    margin-right: calc(-1 * var(--s-space-16));
+    padding-right: var(--s-space-16);
+    transition: margin 0.1s;
+  }
+
 .resource-list-item--show-control-on-focus .resource-list-item__control {
     pointer-events: none;
     opacity: 0;
-    width: 0;
+    position: absolute;
+    top: 50%;
+    right: var(--s-space-8);
+    transform: translateY(-50%);
+    transition: opacity 0.1s;
   }
 
 .resource-list-item--draggable .resource-list-item__content {
-    padding-left: calc(var(--s-space-16) * 2 + 1.5rem);
+    padding-left: calc(var(--s-space-12) * 2 + 1.5rem);
   }
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .resource-list-item--draggable .resource-list-item__content {
-      padding-left: calc(var(--s-space-16) * 2 + 1rem)
+      padding-left: calc(var(--s-space-12) * 2 + 1rem)
   }
     }
 
@@ -188,18 +228,15 @@
 .resource-list-item__content {
   --swirl-avatar-group-border-color: var(--s-background-default);
   --swirl-badge-border-color: var(--s-background-default);
-
-  position: relative;
   display: flex;
   width: 100%;
   min-width: 0;
   margin: 0;
-  padding: var(--s-space-12) var(--s-space-8);
+  padding: 0;
   align-items: flex-start;
   border: none;
-  border-radius: var(--s-border-radius-sm);
   color: var(--s-text-default);
-  background-color: var(--swirl-resource-list-item-background-default);
+  background: none;
   font: inherit;
   line-height: var(--s-line-height-sm);
   text-align: left;
@@ -207,32 +244,11 @@
   gap: var(--s-space-12);
 }
 
-.resource-list-item__content:focus {
+.resource-list-item__content:focus,
+  .resource-list-item__content:focus-visible {
     outline: none;
   }
 
-.resource-list-item__content:focus-visible {
-    background-color: var(--s-background-hovered);
-    outline-color: var(--s-focus-default);
-    outline-style: solid;
-    outline-width: 0.125rem;
-    z-index: 1;
-  }
-
-.resource-list-item__content:focus-visible .resource-list-item__media {
-      --swirl-avatar-group-border-color: var(--s-background-hovered);
-      --swirl-badge-border-color: var(--s-background-hovered);
-    }
-
-.resource-list-item__content:disabled {
-    color: var(--s-text-disabled);
-    cursor: default;
-  }
-
-.resource-list-item__content:disabled .resource-list-item__description {
-      color: var(--s-text-disabled);
-    }
-
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .resource-list-item__content {
@@ -329,6 +345,8 @@
 .resource-list-item__meta {
   display: flex;
   align-items: flex-end;
+  justify-content: center;
+  min-height: 3rem;
   color: var(--s-text-subdued);
   font-size: var(--s-font-size-sm);
   flex-direction: column;
@@ -341,9 +359,17 @@
   }
 
 .resource-list-item__meta-text {
+  line-height: var(--s-line-height-base);
   white-space: nowrap;
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.resource-list-item__meta-text {
+    line-height: var(--s-line-height-sm)
+}
+  }
+
 .resource-list-item__badges {
   display: inline-flex;
   width: -webkit-max-content;
@@ -358,7 +384,6 @@
   left: var(--s-space-4);
   display: inline-flex;
   margin: 0;
-  padding: 0;
   padding: var(--s-space-8);
   flex-shrink: 0;
   border: none;

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

@@ -44,6 +44,7 @@ export class SwirlResourceListItem {
             }
         };
         this.onControlClick = (event) => {
+            event.preventDefault();
             event.stopPropagation();
         };
     }
@@ -140,7 +141,7 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (h(Host, { key: '11933ae24d2585cbb10e5887710f2cc68a3b715f', role: hostRole }, h("div", { key: 'e08d5727bec2020af85f7fa908392e918fff2dd7', class: className, role: containerRole }, h(Tag, { key: '54bb31cdb3052852e1e3f0761cd85b5a36384e7e', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '3bd4c30212fec4c7dfb40af5d8b031ba0598cdbc', class: "resource-list-item__media" }, h("slot", { key: 'bea58e83e1559bfa2eb41283a6276c9b4d912df3', name: "media" }))), h("span", { key: '93ca3144cf21b345c2a968f00e52f7be08312b41', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '8f7d8b3e0889e1cde597768d35e9c98f83c398e6', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '560c3dbfdfbbc1761538ccdf17e6298f2b84ebbf', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '3a2caabd9fdc97f2457c6f6ba7d1f5294c7def3c', class: "resource-list-item__meta" }, this.meta && (h("span", { key: '8f5bfdfa5d2d43cf4956e5823bb8a23800cac721', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '0cdafa25237e75f9a89c52ae5a8a479823c4941c', class: "resource-list-item__badges" }, h("slot", { key: '2cf36e069fc037da1bed6db347a63338ae5a6760', name: "badges" })))), h("span", { key: 'b1020faf71bc845573964992fe34df4e662b7dff', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: 'fd1ec18fcd5d514dfc64c6ae35864186abe7ba11', name: "control" }))), this.selectable && (h("span", { key: 'd0edb382c8ac099a17ee3ca5a195e650664c466a', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '17d5c1908a43c59f546b07cebef88f90aaaa1f5b', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '57cc3129428969bc4f503bc7cfa8a170211f5aa8' }))))), showMenu && (h("swirl-popover-trigger", { key: '50a0444e651b8cd4e1ada2ca9740c74a17bd333e', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '388470e5330fdce56b3205b4c203487728da94f4', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'cd45a36bea6a924ce4cb47f43da36f971051a605', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '9e02a7f596ce572f911987cecb36cd211c8d7cdf', size: this.iconSize })))));
+        return (h(Host, { key: '7cb12be3a9a09b71dc24bc8f981d1d61b8f254e9', role: hostRole }, h("div", { key: '7014fcad197a4f7eb245af6a46a29378bb857750', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '8e673d4ffbd706c06804aa6ee55a380fd53f3099', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '1172de33f197a865c39bc1f7dc394de5d1a4d89e', class: "resource-list-item__media" }, h("slot", { key: '1768bf905bda828888aab82ede57fb62d58615de', name: "media" }))), h("span", { key: '39789664f9eab1eeb4801ec2509c54d2fa0eaa2c', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '880f0d472efda294324a74ab8a2c1bccf794d870', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '6e43920e4516b750136e810a6ab305586607b291', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: '256f16e58f88275cc84b9eb2cdb5c58a6726f7a9', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '93fa4dfe68c08d3f60d3f891df2cc40008495607', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'e86f4921242fc80e32f0a067aa244a5a9a911022' }))))), showMeta && (h("span", { key: '8396dff56b5f7911f9ebd05da7f209dfae9f01db', class: "resource-list-item__meta" }, this.meta && (h("span", { key: 'bbd1d2b8892dce6e938f9a9aa5fa18b9bcc4d998', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '1c73a5c08c17218c3e38073094865634b2405079', class: "resource-list-item__badges" }, h("slot", { key: '7b4da3575ca6dbc89305fbe65bd453428df40423', name: "badges" })))), h("span", { key: '5be12310c2a0b842ae5b3817da98162759c86628', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: '0fdbf28efd85b9a130ccef446a7f7c0d02b8e532', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: 'e6cfdb5108d171a427e6af540a237227ae0b158f', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'de40fbe74fc9f17a68a3fd5b4387f745b74c09ad', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '2a6917be30e0a20c277532152507273c5e72aa62', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '510a758ef7a8c8e317416a5fb654f86691eac6d5', size: this.iconSize })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils.js

@@ -209,8 +209,14 @@ export function getISODateString(date) {
 export function getCircularArrayIndex(index, arrayLength) {
     return ((index % arrayLength) + arrayLength) % arrayLength;
 }
-export function isImageMimeType(mimeType) {
-    return mimeType.startsWith("image/");
+export function isSupportedImageMimeType(mimeType) {
+    return [
+        "image/jpeg",
+        "image/png",
+        "image/avif",
+        "image/gif",
+        "image/webp",
+    ].includes(mimeType);
 }
 export function isVideoMimeType(mimeType) {
     return mimeType.startsWith("video/");