@getflip/swirl-components 0.131.1 → 0.133.0

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.css

@@ -9,28 +9,27 @@
 .avatar-group {
   position: relative;
   display: inline-grid;
-  grid-template-rows: repeat(8, 1fr);
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(9, 1fr);
+  grid-template-columns: repeat(9, 1fr);
 }
 
 .avatar-group ::slotted(*:first-of-type) {
     z-index: 1;
     display: inline-flex;
-    border: 0.25rem solid var(--swirl-avatar-group-border-color);
+    box-shadow: 0 0 0 0.25rem var(--swirl-avatar-group-border-color);
     border-radius: 50%;
     grid-column-start: 1;
     grid-column-end: 7;
-    grid-row-start: 3;
-    grid-row-end: 9;
+    grid-row-start: 4;
+    grid-row-end: 10;
   }
 
 .avatar-group ::slotted(*:nth-of-type(2)) {
     z-index: 0;
     display: inline-flex;
-    border: 0.25rem solid var(--swirl-avatar-group-border-color);
     border-radius: 50%;
-    grid-column-start: 3;
-    grid-column-end: 9;
+    grid-column-start: 4;
+    grid-column-end: 10;
     grid-row-start: 1;
     grid-row-end: 7;
   }
@@ -39,8 +38,12 @@
   position: absolute;
   z-index: 2;
   right: calc(-1 * var(--s-space-4));
-  bottom: 0;
+  bottom: calc(-1 * var(--s-space-4));
   display: inline-flex;
   width: 1.5rem;
   height: 1.5rem;
 }
+
+.avatar-group__badge ::part(badge) {
+    box-shadow: 0 0 0 0.25rem var(--swirl-badge-border-color);
+  }

package/dist/collection/components/swirl-avatar-group/swirl-avatar-group.stories.js

@@ -23,8 +23,8 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-avatar-group", args);
   element.innerHTML = `
-    <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="xs"></swirl-avatar>
-    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="xs"></swirl-avatar>
+    <swirl-avatar label="Jane Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a" size="s"></swirl-avatar>
+    <swirl-avatar label="John Doe" src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=b" size="s"></swirl-avatar>
   `;
   return element;
 };

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

@@ -12,7 +12,7 @@ export class SwirlBadge {
     const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
       "badge--has-icon": this.icon,
     });
-    return (h(Host, { role: "status" }, h("span", { class: className }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
+    return (h(Host, { role: "status" }, h("span", { class: className, part: "badge" }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
   }
   static get is() { return "swirl-badge"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-badge/swirl-badge.spec.js

@@ -6,14 +6,14 @@ describe("swirl-badge", () => {
       components: [SwirlBadge],
       html: `<swirl-badge label="Label"></swirl-badge>`,
     });
-    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default\\"><span class=\\"badge__label\\">Label</span></span>"`);
+    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default\\" part=\\"badge\\"><span class=\\"badge__label\\">Label</span></span>"`);
   });
   it("shows its icon", async () => {
     const page = await newSpecPage({
       components: [SwirlBadge],
       html: `<swirl-badge label="Label" icon="<swirl-icon-close></swirl-icon-close>"></swirl-badge>`,
     });
-    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default badge--has-icon\\"><span class=\\"badge__icon\\"><swirl-icon-close></swirl-icon-close></span></span>"`);
+    expect(page.root.shadowRoot.innerHTML).toMatchInlineSnapshot(`"<span class=\\"badge badge--intent-critical badge--size-m badge--variant-default badge--has-icon\\" part=\\"badge\\"><span class=\\"badge__icon\\"><swirl-icon-close></swirl-icon-close></span></span>"`);
     expect(page.root.querySelector(".badge__icon")).toBeDefined();
     expect(page.root.querySelector(".badge__label")).toBeNull();
   });

package/dist/collection/components/swirl-empty-state/swirl-empty-state.css

@@ -14,6 +14,10 @@
   gap: var(--s-space-16);
 }
 
+.empty-state--has-controls .empty-state__controls {
+    display: block;
+  }
+
 .empty-state__illustration {
   max-width: 16rem;
 }
@@ -22,5 +26,9 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  gap: var(--s-space-8);
+  gap: var(--s-space-24);
+}
+
+.empty-state__controls {
+  display: none;
 }

package/dist/collection/components/swirl-empty-state/swirl-empty-state.js

@@ -1,11 +1,20 @@
 import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+/**
+ * @slot slot - The component content
+ * @slot controls - The component content
+ */
 export class SwirlEmptyState {
   constructor() {
     this.heading = undefined;
     this.illustration = undefined;
   }
   render() {
-    return (h(Host, null, h("div", { class: "empty-state" }, this.illustration && (h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { class: "empty-state__body" }, this.heading && (h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), h("div", { class: "empty-state__content" }, h("swirl-text", { align: "center", color: "subdued" }, h("slot", null)))))));
+    const hasControls = Boolean(this.el.querySelector('[slot="controls"]'));
+    const className = classnames("empty-state", {
+      "empty-state--has-controls": hasControls,
+    });
+    return (h(Host, null, h("div", { class: className }, this.illustration && (h("img", { alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { class: "empty-state__body" }, h("swirl-stack", { align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { align: "center", as: "p", level: 4, text: this.heading })), h("div", { class: "empty-state__content" }, h("swirl-text", { align: "center", color: "subdued" }, h("slot", null)))), h("div", { class: "empty-state__controls" }, h("slot", { name: "controls" }))))));
   }
   static get is() { return "swirl-empty-state"; }
   static get encapsulation() { return "shadow"; }
@@ -57,4 +66,5 @@ export class SwirlEmptyState {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/swirl-empty-state/swirl-empty-state.spec.js

@@ -18,11 +18,16 @@ describe("swirl-empty-state", () => {
           <div class="empty-state">
             <img alt="" class="empty-state__illustration" src="/assets/images/empty-state-1.svg">
             <div class="empty-state__body">
-              <swirl-heading align="center" as="p" level="4" text="Nothing to see here."></swirl-heading>
-              <div class="empty-state__content">
-                <swirl-text align="center" color="subdued">
-                  <slot></slot>
-                </swirl-text>
+              <swirl-stack align="stretch" spacing="8">
+                <swirl-heading align="center" as="p" level="4" text="Nothing to see here."></swirl-heading>
+                <div class="empty-state__content">
+                  <swirl-text align="center" color="subdued">
+                    <slot></slot>
+                  </swirl-text>
+                </div>
+              </swirl-stack>
+              <div class="empty-state__controls">
+                <slot name="controls"></slot>
               </div>
             </div>
           </div>

package/dist/collection/components/swirl-empty-state/swirl-empty-state.stories.js

@@ -13,10 +13,15 @@ export default {
 const Template = (args) => {
   const element = generateStoryElement("swirl-empty-state", args);
   element.innerHTML = `
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-    voluptua.
-  `;
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+  voluptua.
+
+  <swirl-button-group slot="controls">
+    <swirl-button label="Button"></swirl-button>
+    <swirl-button intent="primary" label="Button" variant="flat"></swirl-button>
+  </swirl-button-group>
+`;
   return element;
 };
 export const SwirlEmptyState = Template.bind({});

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

@@ -232,7 +232,7 @@ export class SwirlResourceList {
     this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
   }
   render() {
-    return (h(Host, { onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("swirl-stack", { "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid" }, h("slot", null))));
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("swirl-box", { paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid" }, h("slot", null)))));
   }
   static get is() { return "swirl-resource-list"; }
   static get encapsulation() { return "scoped"; }

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

@@ -47,10 +47,12 @@ describe("swirl-resource-list", () => {
     expect(page.root).toEqualHtml(`
       <swirl-resource-list label="Label">
         <swirl-visually-hidden role="alert"></swirl-visually-hidden>
-        <swirl-stack aria-label="Label" class="resource-list" id="${id}" role="grid">
-          <swirl-resource-list-item description="With a description" label="This is a resource item" media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></swirl-avatar>"></swirl-resource-list-item>
-          <swirl-resource-list-item description="With a description" label="This is a resource item" media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></swirl-avatar>"></swirl-resource-list-item>
-        </swirl-stack>
+        <swirl-box paddinginlineend="8" paddinginlinestart="8">
+          <swirl-stack aria-label="Label" class="resource-list" id="${id}" role="grid">
+            <swirl-resource-list-item description="With a description" label="This is a resource item" media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/433/144/144&quot;></swirl-avatar>"></swirl-resource-list-item>
+            <swirl-resource-list-item description="With a description" label="This is a resource item" media="<swirl-avatar label=&quot;John Doe&quot; src=&quot;https://picsum.photos/id/103/144/144&quot;></swirl-avatar>"></swirl-resource-list-item>
+          </swirl-stack>
+        </swirl-box>
       </swirl-resource-list>
     `);
   });
@@ -86,7 +88,8 @@ describe("swirl-resource-list", () => {
     });
     const items = Array.from(page.root.querySelectorAll("swirl-resource-list-item"));
     const assistiveText = page.root.querySelector('[role="alert"]');
-    const resourceList = page.root.querySelector(".resource-list").parentElement;
+    const resourceList = page.root.querySelector(".resource-list").parentElement
+      .parentElement;
     for (const item of items) {
       expect(item.getAttribute("allow-drag")).toBeNull();
     }

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

@@ -17,20 +17,20 @@ const Template = (args) => {
       description="With a description"
       label="This is a resource item 1"
     >
-      <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
+      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
     <swirl-resource-list-item
       description="With a <strong>description</strong>"
       label="This is a <strong>resource item 2</strong>"
       meta="Yesterday"
     >
-      <swirl-thumbnail alt="Brief description of the image." src="https://picsum.photos/id/433/400/400" size="s" format="square" slot="badges"></swirl-thumbnail>
+      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1028/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
     <swirl-resource-list-item
       description="With a description"
       label="This is a resource item 3"
     >
-      <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
+      <swirl-avatar label="John Doe" size="l" src="https://picsum.photos/id/1029/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
   `;
   return element;

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

@@ -24,18 +24,6 @@
   width: 100%;
 }
 
-.resource-list-item:not(.resource-list-item--show-meta) {
-    display: flex;
-    align-items: center;
-  }
-
-.resource-list-item:not(.resource-list-item--show-meta) .resource-list-item__control {
-      position: relative;
-      top: auto;
-      right: auto;
-      transform: none;
-    }
-
 .resource-list-item--interactive:hover {
     --swirl-ghost-button-background-default: var(--s-background-hovered);
   }
@@ -86,6 +74,21 @@
     background-color: var(--s-icon-highlight);
   }
 
+.resource-list-item--compact .resource-list-item__content {
+    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 .resource-list-item__label-container {
+    min-height: 0;
+  }
+
 @media (min-width: 768px) {
 
 .resource-list-item--selectable .resource-list-item__content {
@@ -104,14 +107,10 @@
   }
     }
 
-.resource-list-item--hide-divider .resource-list-item__content:after {
-    display: none;
+.resource-list-item--label-weight-medium .resource-list-item__label {
+    font-weight: var(--s-font-weight-medium);
   }
 
-.resource-list-item--label-weight-medium {
-  font-weight: var(--s-font-weight-medium);
-}
-
 .resource-list-item--show-control-on-focus:hover,
   .resource-list-item--show-control-on-focus:focus,
   .resource-list-item--show-control-on-focus:focus-within {
@@ -173,6 +172,10 @@
     color: var(--s-text-on-status);
   }
 
+.resource-list-item--wrap-description .resource-list-item__description {
+    white-space: normal;
+  }
+
 .resource-list-item--wrap-label .resource-list-item__label {
     white-space: normal;
   }
@@ -189,13 +192,14 @@
   padding-top: var(--s-space-12);
   padding-right: 0;
   padding-bottom: var(--s-space-12);
-  padding-left: var(--s-space-16);
-  align-items: center;
+  padding-left: var(--s-space-8);
+  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);
   font: inherit;
-  line-height: var(--s-line-height-base);
+  line-height: var(--s-line-height-sm);
   text-align: left;
   text-decoration: none;
   gap: var(--s-space-12);
@@ -223,22 +227,11 @@
       color: var(--s-text-disabled);
     }
 
-.resource-list-item__content:after {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 0.0625rem;
-    background-color: var(--s-border-default);
-    content: "";
-  }
-
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .resource-list-item__content {
-    padding: var(--s-space-12);
-    font-size: var(--s-font-size-sm);
-    line-height: var(--s-line-height-sm)
+    padding: var(--s-space-12) var(--s-space-8);
+    line-height: var(--s-line-height-base)
 }
   }
 
@@ -251,7 +244,7 @@
   position: relative;
   display: flex;
   min-width: 0;
-  min-height: 2.875rem;
+  min-height: 3rem;
   padding-right: var(--s-space-16);
   flex-grow: 1;
   justify-content: center;
@@ -260,13 +253,22 @@
 
 .resource-list-item__label {
   overflow: hidden;
+  font-size: var(--s-font-size-base);
+  line-height: var(--s-line-height-base);
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.resource-list-item__label {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
+}
+  }
+
 .resource-list-item__description {
   overflow: hidden;
-  margin-top: var(--s-space-2);
   color: var(--s-text-subdued);
   font-size: var(--s-font-size-sm);
   line-height: var(--s-line-height-sm);
@@ -284,7 +286,7 @@
 .resource-list-item__control {
   position: absolute;
   top: 50%;
-  right: var(--s-space-16);
+  right: var(--s-space-8);
   transform: translateY(-50%);
 }
 

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

@@ -42,7 +42,9 @@ export class SwirlResourceListItem {
     this.active = undefined;
     this.allowDrag = undefined;
     this.checked = false;
+    this.compact = undefined;
     this.description = undefined;
+    this.descriptionWrap = undefined;
     this.disabled = undefined;
     this.dragging = undefined;
     this.dragHandleDescription = "Press spacebar to toggle grab";
@@ -123,9 +125,15 @@ export class SwirlResourceListItem {
     const showMeta = (Boolean(this.meta) || hasBadges) && !this.selectable;
     const ariaChecked = this.selectable ? String(this.checked) : undefined;
     const role = this.interactive && this.selectable ? "checkbox" : undefined;
+    const labelContainerStyles = !showMeta && Boolean(this.controlContainer)
+      ? {
+        paddingRight: `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`,
+      }
+      : undefined;
     const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
       "resource-list-item--active": this.active,
       "resource-list-item--checked": this.checked,
+      "resource-list-item--compact": this.compact,
       "resource-list-item--disabled": this.disabled,
       "resource-list-item--draggable": this.allowDrag,
       "resource-list-item--dragging": this.dragging,
@@ -135,9 +143,10 @@ export class SwirlResourceListItem {
       "resource-list-item--selectable": this.selectable,
       "resource-list-item--show-control-on-focus": showControlOnFocus,
       "resource-list-item--show-meta": showMeta,
+      "resource-list-item--wrap-description": this.descriptionWrap,
       "resource-list-item--wrap-label": this.labelWrap,
     });
-    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", 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", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.description }))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control" }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "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", { "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", { size: this.iconSize })))));
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", 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", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.description }))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control", ref: (el) => (this.controlContainer = el) }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "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", { "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", { size: this.iconSize })))));
   }
   static get is() { return "swirl-resource-list-item"; }
   static get encapsulation() { return "scoped"; }
@@ -205,6 +214,23 @@ export class SwirlResourceListItem {
         "reflect": false,
         "defaultValue": "false"
       },
+      "compact": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "compact",
+        "reflect": false
+      },
       "description": {
         "type": "string",
         "mutable": false,
@@ -222,6 +248,23 @@ export class SwirlResourceListItem {
         "attribute": "description",
         "reflect": false
       },
+      "descriptionWrap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description-wrap",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

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

@@ -28,11 +28,12 @@ const Template = (args) => {
       <swirl-avatar
         slot="media"
         label="Jane Doe"
-        src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144"></swirl-avatar>
+        size="l"
+        src="https://api.dicebear.com/7.x/bottts-neutral/svg?size=144&seed=a"></swirl-avatar>
 
       <swirl-stack slot="badges" align="center" orientation="horizontal" spacing="8">
         <swirl-icon-notifications-off size="16"></swirl-icon-notifications-off>
-        <swirl-badge label="1" size="s"></swirl-badge>
+        <swirl-badge label="1" size="xs"></swirl-badge>
       </swirl-stack>
 
   `;
@@ -73,7 +74,7 @@ const Template = (args) => {
 };
 export const SwirlResourceListItem = Template.bind({});
 SwirlResourceListItem.args = {
-  description: "With a <strong>description</strong>",
-  label: "This is a <strong>resource item</strong>",
+  description: "With a description",
+  label: "This is a resource item",
   meta: "Today",
 };