@getflip/swirl-components 0.78.0 → 0.79.0

package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.spec.js

@@ -48,7 +48,9 @@ describe("swirl-pdf-reader", () => {
                   </span>
                 </span>
                 <span class="pdf-reader__header-right">
-                  <swirl-button class="pdf-reader__menu-button" hidelabel="" icon="<swirl-icon-more-vertikal></swirl-icon-more-vertikal>" id="menu-trigger" label="Open file menu"></swirl-button>
+                  <swirl-popover-trigger>
+                    <swirl-button class="pdf-reader__menu-button" hidelabel="" icon="<swirl-icon-more-vertikal></swirl-icon-more-vertikal>" label="Open file menu"></swirl-button>
+                  </swirl-popover-trigger>
                 </span>
                 <span class="pdf-reader__floating-tools">
                   <button aria-label="Toggle side by side view" class="pdf-reader__floating-tool-button" type="button">
@@ -75,7 +77,7 @@ describe("swirl-pdf-reader", () => {
                 </div>
               </div>
             </div>
-            <swirl-popover animation="scale-in-y" disablescrolllock="" label="File menu" placement="bottom-end" popoverid="menu" trigger="menu-trigger">
+            <swirl-popover animation="scale-in-y" disablescrolllock="" id="menu" label="File menu" placement="bottom-end">
               <swirl-stack>
                 <div class="pdf-reader__meta">
                   <div class="pdf-reader__file-icon">

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

@@ -55,7 +55,6 @@ export class SwirlPopover {
     this.maxHeight = "22rem";
     this.offset = 8;
     this.placement = "bottom-start";
-    this.popoverId = undefined;
     this.trigger = undefined;
     this.triggerContainer = undefined;
     this.useContainerWidth = undefined;
@@ -65,13 +64,16 @@ export class SwirlPopover {
   }
   componentDidLoad() {
     this.connectTrigger();
-    this.updateFocusableChildren();
     this.updateTriggerAttributes();
+    if (Boolean(this.trigger)) {
+      console.warn('[Swirl] The "trigger" prop of swirl-popover is deprecated and will be removed with the next major release. Please use the swirl-popover-trigger component instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlpopovertrigger--docs');
+    }
   }
   disconnectedCallback() {
     this.unlockBodyScroll();
   }
   onWindowFocusIn(event) {
+    var _a;
     if (!this.active) {
       return;
     }
@@ -82,7 +84,7 @@ export class SwirlPopover {
     const popoverLostFocus = !this.el.contains(target) &&
       !this.el.contains(activeElement) &&
       target !== this.triggerEl &&
-      !this.triggerEl.contains(target) &&
+      !((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.contains(target)) &&
       (!isSafari ||
         (isSafari &&
           !this.el.contains(relatedTarget || target) &&
@@ -102,7 +104,7 @@ export class SwirlPopover {
       .some((el) => Boolean(el) && el instanceof Node
       ? this.el.contains(el)
       : false);
-    const clickedTrigger = event.target === this.triggerEl;
+    const clickedTrigger = target === this.triggerEl;
     if (!clickedChild && !clickedShadowChild && !clickedTrigger) {
       this.close();
     }
@@ -133,19 +135,20 @@ export class SwirlPopover {
    * Open the popover.
    * @returns
    */
-  async open() {
-    if (this.active) {
+  async open(triggerEl) {
+    this.triggerEl = triggerEl || this.triggerEl;
+    if (this.active || !Boolean(this.triggerEl)) {
       return;
     }
     this.adjustWidth();
     this.active = true;
-    this.updateFocusableChildren();
     this.updateTriggerAttributes();
+    const focusableChildren = this.getFocusableChildren();
     requestAnimationFrame(async () => {
       await this.reposition();
       this.popoverOpen.emit({ position: this.position });
-      if (this.focusableChildren.length > 0) {
-        this.focusableChildren[0].focus();
+      if (focusableChildren.length > 0) {
+        focusableChildren[0].focus();
       }
       else {
         this.contentContainer.focus();
@@ -153,12 +156,16 @@ export class SwirlPopover {
       if (this.disableAutoUpdate) {
         this.disableAutoUpdate();
       }
-      this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+      this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, () => this.reposition());
       this.scrollContainer.scrollTop = 0;
       this.lockBodyScroll();
     });
   }
   connectTrigger() {
+    if (!Boolean(this.trigger)) {
+      this.triggerEl = undefined;
+      return;
+    }
     this.triggerEl =
       typeof this.trigger === "string"
         ? querySelectorAllDeep(this.triggerContainer || document.body, `#${this.trigger}`)[0]
@@ -171,10 +178,10 @@ export class SwirlPopover {
     });
   }
   getNativeTriggerElement() {
-    var _a, _b, _c;
-    return this.triggerEl.tagName.startsWith("SWIRL-")
-      ? (((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.children[0]) ||
-        ((_c = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.children[0]) ||
+    var _a, _b, _c, _d;
+    return ((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.tagName.startsWith("SWIRL-"))
+      ? (((_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.children[0]) ||
+        ((_d = (_c = this.triggerEl) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.children[0]) ||
         this.triggerEl)
       : this.triggerEl;
   }
@@ -183,12 +190,12 @@ export class SwirlPopover {
       return;
     }
     const nativeTriggerEl = this.getNativeTriggerElement();
-    nativeTriggerEl.setAttribute("aria-controls", this.popoverId);
+    nativeTriggerEl.setAttribute("aria-controls", this.el.id);
     nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
     nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
   }
-  updateFocusableChildren() {
-    this.focusableChildren = querySelectorAllDeep(this.el, '[role="menuitem"], [role="listbox"]');
+  getFocusableChildren() {
+    return querySelectorAllDeep(this.el, '[role="menuitem"], [role="listbox"]');
   }
   adjustWidth() {
     let useContainerWidth = this.useContainerWidth;
@@ -235,7 +242,7 @@ export class SwirlPopover {
       "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
       "popover--inactive": !this.active,
     });
-    return (h(Host, { id: this.popoverId }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+    return (h(Host, null, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
         top: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.y}px` : "",
         left: Boolean(this.position) ? `${(_c = this.position) === null || _c === void 0 ? void 0 : _c.x}px` : "",
       }, tabindex: "-1" }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
@@ -409,23 +416,6 @@ export class SwirlPopover {
         "reflect": false,
         "defaultValue": "\"bottom-start\""
       },
-      "popoverId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "popover-id",
-        "reflect": false
-      },
       "trigger": {
         "type": "string",
         "mutable": false,
@@ -438,8 +428,8 @@ export class SwirlPopover {
             }
           }
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -553,11 +543,17 @@ export class SwirlPopover {
       },
       "open": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(triggerEl?: HTMLElement) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"

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

@@ -1,10 +1,13 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SwirlPopover } from "./swirl-popover";
+import { SwirlPopoverTrigger } from "../swirl-popover-trigger/swirl-popover-trigger";
 describe("swirl-popover", () => {
   const template = `
     <div>
-      <button id="trigger">Trigger popover</button>
-      <swirl-popover label="Popover" popover-id="popover" trigger="trigger">
+      <swirl-popover-trigger popover="popover">
+        <button id="trigger">Trigger popover</button>
+      </swirl-popover-trigger>
+      <swirl-popover label="Popover" id="popover">
         <div>Content</div>
       </swirl-popover>
     </div>
@@ -19,13 +22,15 @@ describe("swirl-popover", () => {
   });
   it("renders the trigger and content", async () => {
     const page = await newSpecPage({
-      components: [SwirlPopover],
+      components: [SwirlPopover, SwirlPopoverTrigger],
       html: template,
     });
     expect(page.body).toEqualHtml(`
       <div>
-        <button aria-controls="popover" aria-expanded="false" aria-haspopup="dialog" id="trigger">Trigger popover</button>
-        <swirl-popover id="popover" label="Popover" popover-id="popover" trigger="trigger">
+        <swirl-popover-trigger popover="popover">
+          <button aria-controls="popover" aria-expanded="false" aria-haspopup="dialog" id="trigger">Trigger popover</button>
+        </swirl-popover-trigger>
+        <swirl-popover id="popover" label="Popover">
           <mock:shadow-root>
             <div class="popover popover--animation-scale-in-xy popover--inactive  popover--placement-undefined">
               <div aria-hidden="true" aria-label="Popover" class="popover__content" part="popover__content" role="dialog" tabindex="-1">
@@ -45,18 +50,20 @@ describe("swirl-popover", () => {
   });
   it("opens on click and closes on blur/esc", async () => {
     const page = await newSpecPage({
-      components: [SwirlPopover],
+      components: [SwirlPopover, SwirlPopoverTrigger],
       html: template,
     });
     function isOpen() {
-      return !page.root.shadowRoot
-        .querySelector(".popover")
+      return !page.doc
+        .querySelector("swirl-popover")
+        .shadowRoot.querySelector(".popover")
         .classList.contains("popover--inactive");
     }
     expect(isOpen()).toBeFalsy();
     // click trigger
-    const trigger = page.body.querySelector("#trigger");
+    const trigger = page.root;
     trigger.click();
+    await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();
     expect(isOpen()).toBeTruthy();
     // blur popover
@@ -66,11 +73,13 @@ describe("swirl-popover", () => {
     expect(isOpen()).toBeFalsy();
     // re-open popover
     trigger.click();
+    await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();
     expect(isOpen()).toBeTruthy();
     // close via escape key
-    page.root.shadowRoot
-      .querySelector(".popover")
+    page.doc
+      .querySelector("swirl-popover")
+      .shadowRoot.querySelector(".popover")
       .dispatchEvent(new KeyboardEvent("keydown", { code: "Escape" }));
     await new Promise((resolve) => setTimeout(resolve, 150));
     await page.waitForChanges();

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

@@ -13,7 +13,7 @@ export default {
       },
     },
     trigger: {
-      description: "ID of the trigger element or the trigger DOM element.",
+      description: "**Deprecated! Please use the swirl-popover-trigger component instead.** ID of the trigger element or the trigger DOM element.",
       control: {
         type: "text",
       },
@@ -31,34 +31,18 @@ export default {
   parameters: {
     docs: {
       page: Docs,
-      source: {
-        code: `<swirl-button id="trigger" label="Trigger"></swirl-button>
-
-<swirl-popover label="Popover" popover-id="popover" trigger="trigger">
-  <swirl-action-list>
-    <swirl-action-list-section label="Section 1">
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 1"></swirl-action-list-item>
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 2"></swirl-action-list-item>
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 3"></swirl-action-list-item>
-    </swirl-action-list-section>
-    <swirl-action-list-section label="Section 2">
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 1"></swirl-action-list-item>
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 2"></swirl-action-list-item>
-      <swirl-action-list-item icon="<swirl-icon-mention></swirl-icon-mention>" label="Action item 3"></swirl-action-list-item>
-    </swirl-action-list-section>
-  </swirl-action-list>
-</swirl-popover>`,
-      },
     },
   },
   title: "Components/SwirlPopover",
 };
 const Template = (args) => {
   const container = document.createElement("div");
-  const trigger = document.createElement("swirl-button");
+  const trigger = document.createElement("swirl-popover-trigger");
   const element = generateStoryElement("swirl-popover", args);
-  trigger.id = "trigger";
-  trigger.label = "Trigger popover";
+  trigger.setAttribute("popover", "popover");
+  trigger.innerHTML = `
+    <swirl-button label="Trigger popover"></swirl-button>
+  `;
   element.innerHTML = `
     <swirl-action-list>
       <swirl-action-list-section label="Section 1">
@@ -73,7 +57,7 @@ const Template = (args) => {
       </swirl-action-list-section>
     </swirl-action-list>
   `;
-  container.append(trigger, element);
+  container.append("\n  ", trigger, "\n  ", element);
   element.addEventListener("click", (event) => {
     const target = event.target;
     if ((target === null || target === void 0 ? void 0 : target.tagName) === "SWIRL-ACTION-LIST-ITEM") {
@@ -84,7 +68,6 @@ const Template = (args) => {
 };
 export const SwirlPopover = Template.bind({});
 SwirlPopover.args = {
+  id: "popover",
   label: "Popover",
-  popoverId: "popover",
-  trigger: "trigger",
 };

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -0,0 +1,132 @@
+import { h, Host } from "@stencil/core";
+export class SwirlPopoverTrigger {
+  constructor() {
+    this.popoverOpen = false;
+    this.onClick = (event) => {
+      event.stopPropagation();
+      const popoverEl = this.getPopoverEl();
+      if (!Boolean(popoverEl)) {
+        return;
+      }
+      if (this.popoverOpen) {
+        popoverEl.close();
+        return;
+      }
+      const triggerEl = this.getTriggerEl();
+      if (!Boolean(triggerEl)) {
+        return;
+      }
+      popoverEl.open(triggerEl);
+      popoverEl.addEventListener("popoverOpen", () => {
+        this.popoverOpen = true;
+        this.updateTriggerElAriaAttributes(true);
+      }, { once: true });
+      popoverEl.addEventListener("popoverClose", () => {
+        this.popoverOpen = false;
+        this.updateTriggerElAriaAttributes(false);
+      }, { once: true });
+    };
+    this.updateTriggerElAriaAttributes = (open) => {
+      var _a;
+      if (!this.setAriaAttributes) {
+        return;
+      }
+      const triggerEl = this.getTriggerEl();
+      const popoverId = typeof this.popover === "string" ? this.popover : (_a = this.popover) === null || _a === void 0 ? void 0 : _a.id;
+      if (triggerEl.tagName.startsWith("SWIRL-")) {
+        triggerEl.setAttribute("swirl-aria-controls", popoverId);
+        triggerEl.setAttribute("swirl-aria-expanded", String(open || "false"));
+        triggerEl.setAttribute("swirl-aria-haspopup", "dialog");
+      }
+      else {
+        triggerEl.setAttribute("aria-controls", popoverId);
+        triggerEl.setAttribute("aria-expanded", String(open || "false"));
+        triggerEl.setAttribute("aria-haspopup", "dialog");
+      }
+    };
+    this.popover = undefined;
+    this.setAriaAttributes = true;
+  }
+  componentDidLoad() {
+    this.updateTriggerElAriaAttributes();
+  }
+  watchPopover() {
+    this.updateTriggerElAriaAttributes();
+  }
+  getPopoverEl() {
+    return typeof this.popover === "string"
+      ? document.querySelector(`#${this.popover}`)
+      : this.popover;
+  }
+  getTriggerEl() {
+    if (this.el.children.length !== 1) {
+      console.warn('[Swirl] The "swirl-popover-trigger" component expects exactly one child element.');
+    }
+    return this.el.children[0];
+  }
+  render() {
+    return (h(Host, { onClick: this.onClick }, h("slot", null)));
+  }
+  static get is() { return "swirl-popover-trigger"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-popover-trigger.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-popover-trigger.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "popover": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | HTMLSwirlPopoverElement",
+          "resolved": "HTMLSwirlPopoverElement | string",
+          "references": {
+            "HTMLSwirlPopoverElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover",
+        "reflect": false
+      },
+      "setAriaAttributes": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "set-aria-attributes",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "popover",
+        "methodName": "watchPopover"
+      }];
+  }
+}

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.spec.js

@@ -0,0 +1,26 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlPopoverTrigger } from "./swirl-popover-trigger";
+import { SwirlButton } from "../swirl-button/swirl-button";
+describe("swirl-popover-trigger", () => {
+  it("renders its trigger element and adds aria attributes", async () => {
+    const page = await newSpecPage({
+      components: [SwirlPopoverTrigger, SwirlButton],
+      html: `
+        <swirl-popover-trigger popover="popover">
+          <swirl-button label="trigger"></swirl-button>
+        </swirl-popover-trigger>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-popover-trigger popover="popover">
+        <swirl-button label="trigger" swirl-aria-controls="popover" swirl-aria-expanded="false" swirl-aria-haspopup="dialog">
+          <button aria-controls="popover" aria-expanded="false" aria-haspopup="dialog" class="button button--icon-position-start button--intent-default button--size-m button--variant-ghost" type="button">
+            <span class="button__label">
+              trigger
+            </span>
+          </button>
+        </swirl-button>
+      </swirl-popover-trigger>
+    `);
+  });
+});

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.stories.js

@@ -0,0 +1,48 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-popover-trigger.mdx";
+export default {
+  argTypes: {
+    popover: {
+      description: "ID of a popover element or a reference to a DOM element of type HTMLSwirlPopoverElement.",
+      control: {
+        type: "text",
+      },
+    },
+  },
+  component: "swirl-popover-trigger",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlPopoverTrigger",
+};
+const Template = (args) => {
+  const container = document.createElement("swirl-stack");
+  const element = generateStoryElement("swirl-popover-trigger", args);
+  const secondTrigger = generateStoryElement("swirl-popover-trigger", args);
+  const popover = document.createElement("swirl-popover");
+  container.orientation = "horizontal";
+  container.spacing = "16";
+  popover.label = "Popover";
+  popover.id = "popover";
+  popover.placement = "bottom-start";
+  popover.innerHTML = `
+    <swirl-box padding="12">
+      <swirl-text size="sm">Popover</swirl-text>
+    </swirl-box>
+  `;
+  element.innerHTML = `
+    <swirl-button label="Trigger element" variant="flat"></swirl-button>
+  `;
+  secondTrigger.innerHTML = `
+    <swirl-button label="Second trigger, same popover" variant="flat"></swirl-button>
+  `;
+  container.append("\n  ", element, "\n  ", secondTrigger, "\n  ", popover, "\n");
+  return container;
+};
+export const SwirlPopoverTrigger = Template.bind({});
+SwirlPopoverTrigger.args = {
+  popover: "popover",
+};

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

@@ -223,6 +223,13 @@
   transform: translateY(-50%);
 }
 
+.resource-list-item__control {
+  position: absolute;
+  top: 50%;
+  right: var(--s-space-16);
+  transform: translateY(-50%);
+}
+
 .resource-list-item__checkbox {
   position: absolute;
   top: 50%;

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

@@ -2,6 +2,7 @@ import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { getDesktopMediaQuery } from "../../utils";
 /**
+ * @slot control - Used to add a menu button to the item
  * @slot media - Media displayed inside the item (e.g. swirl-avatar)
  */
 export class SwirlResourceListItem {
@@ -56,6 +57,9 @@ export class SwirlResourceListItem {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    if (Boolean(this.menuTriggerId)) {
+      console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
+    }
   }
   disconnectedCallback() {
     var _a, _b;
@@ -83,9 +87,9 @@ export class SwirlResourceListItem {
         ? "a"
         : "button";
     const disabled = this.disabled && !Boolean(this.href);
-    const hasMenu = Boolean(this.menuTriggerId);
+    const hasMenu = Boolean(this.menuTriggerId) || this.el.querySelector("[slot='control']");
     const href = this.interactive && Boolean(this.href) ? this.href : undefined;
-    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;
+    const showMenu = Boolean(this.menuTriggerId) && !Boolean(this.meta) && !this.selectable;
     const showMeta = Boolean(this.meta) && !this.selectable;
     const ariaChecked = this.selectable ? String(this.checked) : undefined;
     const role = this.interactive && this.selectable ? "checkbox" : undefined;
@@ -99,7 +103,7 @@ export class SwirlResourceListItem {
       "resource-list-item--interactive": this.interactive || this.selectable,
       "resource-list-item--selectable": this.selectable,
     });
-    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, 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: "label", innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), 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))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (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>", id: this.menuTriggerId, 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": "label", class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, 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: "label", innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), 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))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), 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 })))));
   }
   static get is() { return "swirl-resource-list-item"; }
   static get encapsulation() { return "scoped"; }

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

@@ -29,6 +29,7 @@ describe("swirl-resource-list-item", () => {
               </span>
             </span>
           </button>
+          <span class="resource-list-item__control"></span>
         </div>
       </swirl-resource-list-item>
     `);