@getflip/swirl-components 0.67.0 → 0.68.1

package/dist/cjs/swirl-resource-list-file-item.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-506fe4ea.js');
 const index$1 = require('./index-2ddd0598.js');
 const utils = require('./utils-c00c09b9.js');
 
-const swirlResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{outline:none}.resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-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);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
+const swirlResourceListFileItemCss = ".sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h *.sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{color:var(--s-icon-highlight)}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{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);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
 
 const SwirlResourceListFileItem = class {
   constructor(hostRef) {

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

@@ -19,7 +19,7 @@
 
 .avatar--has-icon {
   color: var(--s-icon-default);
-  background-color: var(--s-surface-raised-default);
+  background-color: var(--swirl-avatar-background-color);
 }
 
 .avatar--has-initials {

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

@@ -23,6 +23,9 @@
   --swirl-ghost-button-background-default: var(--s-surface-default);
   --swirl-ghost-button-background-hovered: var(--s-surface-hovered);
   --swirl-ghost-button-background-pressed: var(--s-surface-pressed);
+  --swirl-resource-list-item-background-default: var(--s-surface-default);
+  --swirl-resource-list-item-background-hovered: var(--s-surface-hovered);
+  --swirl-resource-list-item-background-pressed: var(--s-surface-pressed);
 }
 
 a.card,

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

@@ -10,6 +10,15 @@
   --swirl-ghost-button-background-default: var(--s-surface-overlay-default);
   --swirl-ghost-button-background-hovered: var(--s-surface-overlay-hovered);
   --swirl-ghost-button-background-pressed: var(--s-surface-overlay-pressed);
+  --swirl-resource-list-item-background-default: var(
+    --s-surface-overlay-default
+  );
+  --swirl-resource-list-item-background-hovered: var(
+    --s-surface-overlay-hovered
+  );
+  --swirl-resource-list-item-background-pressed: var(
+    --s-surface-overlay-pressed
+  );
 
   position: fixed;
   z-index: var(--s-z-40);

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

@@ -1,16 +1,62 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
+import Sortable from "sortablejs";
 export class SwirlResourceList {
   constructor() {
     this.focusedIndex = 0;
+    this.toggleDrag = (event) => {
+      const item = event.detail;
+      if (Boolean(this.dragging)) {
+        this.stopDrag(item);
+      }
+      else {
+        this.startDrag(item);
+      }
+    };
+    this.startDrag = (item) => {
+      this.dragging = item;
+      this.draggingStartIndex = this.getItemIndex(this.dragging);
+      item.setAttribute("dragging", "true");
+      const index = this.getItemIndex(this.dragging);
+      this.focusItemAtIndex(index);
+      this.assistiveText = this.assistiveTextItemGrabbed;
+    };
+    this.stopDrag = (item) => {
+      const newIndex = this.getItemIndex(this.dragging);
+      this.dragging = undefined;
+      item.removeAttribute("dragging");
+      this.assistiveText = `${this.assistiveTextItemMoved} ${newIndex + 1}`;
+      this.itemDrop.emit({ item, oldIndex: this.draggingStartIndex, newIndex });
+      this.draggingStartIndex = undefined;
+    };
     this.onKeyDown = (event) => {
       if (event.key === "ArrowDown") {
         event.preventDefault();
-        this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+        if (!Boolean(this.dragging)) {
+          this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+        }
+        else {
+          this.moveDraggedItemDown();
+        }
       }
       else if (event.key === "ArrowUp") {
         event.preventDefault();
-        const prevIndex = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
-        this.focusItemAtIndex(prevIndex);
+        if (!Boolean(this.dragging)) {
+          const prevIndex = this.focusedIndex === 0
+            ? this.items.length - 1
+            : this.focusedIndex - 1;
+          this.focusItemAtIndex(prevIndex);
+        }
+        else {
+          this.moveDraggedItemUp();
+        }
+      }
+      else if (event.key === "Space" || event.key === "Enter") {
+        const target = event.composedPath()[0];
+        if (Boolean(this.dragging) &&
+          !(target === null || target === void 0 ? void 0 : target.classList.contains("resource-list-item__drag-handle"))) {
+          event.preventDefault();
+          this.stopDrag(this.dragging);
+        }
       }
       else if (event.key === "Home") {
         event.preventDefault();
@@ -24,28 +70,79 @@ export class SwirlResourceList {
     this.onSlotChange = () => {
       this.collectItems();
     };
+    this.allowDrag = undefined;
+    this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
+    this.assistiveTextItemMoving = "Current position:";
+    this.assistiveTextItemMoved = "Item moved. New position:";
     this.label = undefined;
+    this.assistiveText = undefined;
   }
   componentDidLoad() {
     this.collectItems();
+    this.setItemAllowDragState();
+    this.setupDragDrop();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  watchAllowDrag() {
+    this.setItemAllowDragState();
+    this.setupDragDrop();
   }
   collectItems() {
     this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item")).filter((el) => el.isConnected);
     this.removeItemsFromTabOrder();
     this.enableItemFocus(this.items[this.focusedIndex]);
   }
+  getItemIndex(item) {
+    return this.items.map((i) => i).findIndex((i) => i === item);
+  }
   removeItemsFromTabOrder() {
     this.items.forEach((item) => {
-      var _a, _b;
-      return (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabIndex", "-1");
+      var _a;
+      return (_a = item === null || item === void 0 ? void 0 : item.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _a === void 0 ? void 0 : _a.setAttribute("tabIndex", "-1");
+    });
+  }
+  setItemAllowDragState() {
+    if (this.allowDrag) {
+      this.items.forEach((item) => {
+        item.setAttribute("allow-drag", "true");
+        item.addEventListener("toggleDrag", this.toggleDrag);
+      });
+    }
+    else {
+      this.items.forEach((item) => {
+        item.removeAttribute("allow-drag");
+        item.removeEventListener("toggleDrag", this.toggleDrag);
+      });
+    }
+  }
+  setupDragDrop() {
+    if (Boolean(this.sortable)) {
+      this.sortable.destroy();
+    }
+    if (!this.allowDrag) {
+      return;
+    }
+    this.sortable = Sortable.create(this.gridEl, {
+      animation: 150,
+      draggable: "swirl-resource-list-item",
+      handle: ".resource-list-item__drag-handle",
+      onEnd: (event) => {
+        this.itemDrop.emit({
+          item: event.item,
+          oldIndex: event.oldIndex,
+          newIndex: event.newIndex,
+        });
+      },
     });
   }
   enableItemFocus(item, focus) {
-    var _a;
     if (!Boolean(item)) {
       return;
     }
-    const interactiveElement = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".resource-list-item__content, .resource-list-file-item");
+    const interactiveElement = item.querySelector(".resource-list-item__content, .resource-list-file-item");
     if (!Boolean(interactiveElement)) {
       return;
     }
@@ -63,11 +160,31 @@ export class SwirlResourceList {
     this.enableItemFocus(item, true);
     this.focusedIndex = index;
   }
+  moveDraggedItemDown() {
+    const nextSibling = this.dragging.nextElementSibling;
+    if (!Boolean(nextSibling)) {
+      return;
+    }
+    nextSibling.after(this.dragging);
+    this.collectItems();
+    this.focusItemAtIndex(this.getItemIndex(this.dragging));
+    this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+  }
+  moveDraggedItemUp() {
+    const prevSibling = this.dragging.previousElementSibling;
+    if (!Boolean(prevSibling)) {
+      return;
+    }
+    prevSibling.before(this.dragging);
+    this.collectItems();
+    this.focusItemAtIndex(this.getItemIndex(this.dragging));
+    this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`;
+  }
   render() {
-    return (h(Host, { onKeyDown: this.onKeyDown }, h("swirl-stack", { "aria-label": this.label, role: "grid" }, h("slot", { onSlotchange: this.onSlotChange }))));
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { role: "alert" }, this.assistiveText), h("swirl-stack", { "aria-label": this.label, class: "resource-list", ref: (el) => (this.gridEl = el), role: "grid" }, h("slot", { onSlotchange: this.onSlotChange }))));
   }
   static get is() { return "swirl-resource-list"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["swirl-resource-list.css"]
@@ -80,6 +197,77 @@ export class SwirlResourceList {
   }
   static get properties() {
     return {
+      "allowDrag": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "allow-drag",
+        "reflect": false
+      },
+      "assistiveTextItemGrabbed": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "assistive-text-item-grabbed",
+        "reflect": false,
+        "defaultValue": "\"Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.\""
+      },
+      "assistiveTextItemMoving": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "assistive-text-item-moving",
+        "reflect": false,
+        "defaultValue": "\"Current position:\""
+      },
+      "assistiveTextItemMoved": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "assistive-text-item-moved",
+        "reflect": false,
+        "defaultValue": "\"Item moved. New position:\""
+      },
       "label": {
         "type": "string",
         "mutable": false,
@@ -99,5 +287,38 @@ export class SwirlResourceList {
       }
     };
   }
+  static get states() {
+    return {
+      "assistiveText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemDrop",
+        "name": "itemDrop",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\n    item: HTMLSwirlResourceListItemElement;\n    oldIndex: number;\n    newIndex: number;\n  }",
+          "resolved": "{ item: HTMLSwirlResourceListItemElement; oldIndex: number; newIndex: number; }",
+          "references": {
+            "HTMLSwirlResourceListItemElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "allowDrag",
+        "methodName": "watchAllowDrag"
+      }];
+  }
 }

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

@@ -1,6 +1,23 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { SwirlResourceListItem } from "../swirl-resource-list-item/swirl-resource-list-item";
 import { SwirlResourceList } from "./swirl-resource-list";
+import { MockElement } from "@stencil/core/mock-doc";
+MockElement.prototype.after = function () {
+  var argArr = Array.prototype.slice.call(arguments);
+  var docFrag = document.createDocumentFragment();
+  for (var n = 0; n < argArr.length; n++) {
+    docFrag.appendChild(argArr[n]);
+  }
+  this.parentNode.insertBefore(docFrag, this.nextSibling);
+};
+MockElement.prototype.before = function () {
+  var argArr = Array.prototype.slice.call(arguments);
+  var docFrag = document.createDocumentFragment();
+  for (var n = 0; n < argArr.length; n++) {
+    docFrag.appendChild(argArr[n]);
+  }
+  this.parentNode.insertBefore(docFrag, this.previousSibling);
+};
 describe("swirl-resource-list", () => {
   const template = `
     <swirl-resource-list label="Label">
@@ -23,13 +40,11 @@ describe("swirl-resource-list", () => {
     });
     expect(page.root).toEqualHtml(`
       <swirl-resource-list label="Label">
-        <mock:shadow-root>
-          <swirl-stack aria-label="Label" role="grid">
-            <slot></slot>
-          </swirl-stack>
-        </mock:shadow-root>
-        <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-visually-hidden role="alert"></swirl-visually-hidden>
+        <swirl-stack aria-label="Label" class="resource-list" 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-resource-list>
     `);
   });
@@ -39,9 +54,9 @@ describe("swirl-resource-list", () => {
       html: template,
     });
     const items = Array.from(page.root.querySelectorAll("swirl-resource-list-item"));
-    const interactiveElements = items.map((item) => item.shadowRoot.querySelector(".resource-list-item__content"));
+    const interactiveElements = items.map((item) => item.querySelector(".resource-list-item__content"));
     // focuses the first element if list is focused
-    page.root.shadowRoot.children[0].focus();
+    page.root.children[0].focus();
     expect(interactiveElements[0].getAttribute("tabIndex")).toBe("0");
     // Down arrow focues the next element
     page.root.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
@@ -60,4 +75,32 @@ describe("swirl-resource-list", () => {
     expect(interactiveElements[0].getAttribute("tabIndex")).toBe("0");
     expect(interactiveElements[1].getAttribute("tabIndex")).toBe("-1");
   });
+  it("makes items draggable", async () => {
+    const page = await newSpecPage({
+      components: [SwirlResourceList, SwirlResourceListItem],
+      html: template,
+    });
+    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;
+    for (const item of items) {
+      expect(item.getAttribute("allow-drag")).toBeNull();
+    }
+    page.root.setAttribute("allow-drag", "true");
+    await page.waitForChanges();
+    for (const item of items) {
+      expect(item.getAttribute("allow-drag")).toBe("true");
+    }
+    items[0]
+      .querySelector(".resource-list-item__drag-handle")
+      .dispatchEvent(new KeyboardEvent("keydown", { code: "Space" }));
+    await page.waitForChanges();
+    expect(assistiveText.innerHTML).toBe("Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.");
+    resourceList.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
+    await page.waitForChanges();
+    expect(assistiveText.innerHTML).toBe("Current position: 2");
+    resourceList.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowUp" }));
+    await page.waitForChanges();
+    expect(assistiveText.innerHTML).toBe("Current position: 1");
+  });
 });

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

@@ -15,51 +15,23 @@ const Template = (args) => {
   element.innerHTML = `
     <swirl-resource-list-item
       description="With a description"
-      label="This is a resource item"
+      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-resource-list-item>
     <swirl-resource-list-item
       description="With a description"
-      label="This is a resource item"
+      label="This is a resource item 2"
     >
       <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
     </swirl-resource-list-item>
     <swirl-resource-list-item
       description="With a description"
-      label="This is a resource item"
+      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-resource-list-item>
   `;
-  setTimeout(() => {
-    element.innerHTML = `
-    <swirl-resource-list-item
-      description="With a description"
-      label="This is a resource item"
-    >
-      <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
-    </swirl-resource-list-item>
-    <swirl-resource-list-item
-      description="With a description"
-      label="This is a resource item"
-    >
-      <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
-    </swirl-resource-list-item>
-    <swirl-resource-list-item
-      description="With a description"
-      label="This is a resource item"
-    >
-      <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
-    </swirl-resource-list-item>
-    <swirl-resource-list-item
-      description="With a description"
-      label="New"
-    >
-      <swirl-avatar label="John Doe" src="https://picsum.photos/id/1027/144/144" slot="media"></swirl-avatar>
-    </swirl-resource-list-item>
-  `;
-  }, 4000);
   return element;
 };
 export const SwirlResourceList = Template.bind({});

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

@@ -41,7 +41,7 @@ export class SwirlResourceListFileItem {
     return (h(Host, { role: "row" }, h("div", { class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { class: "resource-list-file-item__label-container" }, h("span", { class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { class: "resource-list-file-item__spinner" }, h("swirl-spinner", { size: "s" }))), showRemoveButton && (h("span", { class: "resource-list-file-item__remove-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
   }
   static get is() { return "swirl-resource-list-file-item"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["swirl-resource-list-file-item.css"]

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

@@ -14,24 +14,22 @@ describe("swirl-resource-list-file-item", () => {
     });
     expect(page.root).toEqualHtml(`
       <swirl-resource-list-file-item description="Description" label="Label" loading="true" role="row">
-        <mock:shadow-root>
-          <div class="resource-list-file-item resource-list-file-item--has-control" part="resource-list-file-item" role="gridcell">
-            <span class="resource-list-file-item__icon">
-              <swirl-icon-file size="24"></swirl-icon-file>
+        <div class="resource-list-file-item resource-list-file-item--has-control" part="resource-list-file-item" role="gridcell">
+          <span class="resource-list-file-item__icon">
+            <swirl-icon-file size="24"></swirl-icon-file>
+          </span>
+          <span class="resource-list-file-item__label-container">
+            <span class="resource-list-file-item__label" id="label">
+              Label
             </span>
-            <span class="resource-list-file-item__label-container">
-              <span class="resource-list-file-item__label" id="label">
-                Label
-              </span>
-              <span class="resource-list-file-item__description">
-                Description
-              </span>
+            <span class="resource-list-file-item__description">
+              Description
             </span>
-            <span class="resource-list-file-item__spinner">
-              <swirl-spinner size="s"></swirl-spinner>
-            </span>
-          </div>
-        </mock:shadow-root>
+          </span>
+          <span class="resource-list-file-item__spinner">
+            <swirl-spinner size="s"></swirl-spinner>
+          </span>
+        </div>
       </swirl-resource-list-file-item>
     `);
   });
@@ -40,7 +38,7 @@ describe("swirl-resource-list-file-item", () => {
       components: [SwirlResourceListFileItem],
       html: `<swirl-resource-list-file-item label="Label" error-message="Error"></swirl-resource-list-file-item>`,
     });
-    expect(page.root.shadowRoot
+    expect(page.root
       .querySelector('[aria-live="polite"] > swirl-inline-error')
       .getAttribute("message")).toBe("Error");
   });
@@ -51,7 +49,7 @@ describe("swirl-resource-list-file-item", () => {
     });
     const spy = jest.fn();
     page.root.addEventListener("remove", spy);
-    page.root.shadowRoot
+    page.root
       .querySelector(".resource-list-file-item__remove-button > swirl-button")
       .click();
     expect(spy).toHaveBeenCalled();

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

@@ -1,4 +1,5 @@
 :host {
+  position: relative;
   display: block;
   width: 100%;
 }
@@ -12,6 +13,10 @@
   width: 100%;
 }
 
+.resource-list-item:hover {
+    --swirl-ghost-button-background-default: var(--s-background-hovered);
+  }
+
 .resource-list-item--checked .resource-list-item__checkbox {
     border-color: var(--s-icon-highlight);
     color: var(--s-text-on-status);
@@ -48,6 +53,29 @@
   font-weight: var(--s-font-weight-medium);
 }
 
+.resource-list-item--draggable .resource-list-item__content {
+    padding-left: calc(var(--s-space-16) * 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)
+  }
+    }
+
+.resource-list-item--dragging {
+  z-index: 1;
+  border-radius: var(--s-border-radius-s);
+  background-color: var(--s-surface-overlay-pressed);
+  box-shadow: 0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),
+    0 0.25rem 2rem rgba(25, 26, 28, 0.16);
+}
+
+.resource-list-item--dragging:hover:not(.resource-list-item--disabled) {
+    background-color: var(--s-surface-overlay-pressed);
+  }
+
 .resource-list-item__content {
   --swirl-avatar-group-border-color: var(--s-background-default);
   --swirl-badge-border-color: var(--s-background-default);
@@ -62,7 +90,7 @@
   align-items: center;
   border: none;
   color: var(--s-text-default);
-  background-color: var(--s-background-default);
+  background-color: var(--swirl-resource-list-item-background-default);
   font: inherit;
   line-height: var(--s-line-height-base);
   text-align: left;
@@ -72,16 +100,17 @@
 }
 
 .resource-list-item__content:hover:not(:disabled) {
-    background-color: var(--s-background-hovered);
+    background-color: var(--swirl-resource-list-item-background-hovered);
   }
 
 .resource-list-item__content:hover:not(:disabled) .resource-list-item__media {
+      --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__content:active:not(:disabled) {
-    background-color: var(--s-background-pressed);
+    background-color: var(--swirl-resource-list-item-background-pressed);
   }
 
 .resource-list-item__content:active:not(:disabled) .resource-list-item__media {
@@ -215,3 +244,32 @@
   color: var(--s-text-subdued);
   font-size: var(--s-font-size-sm);
 }
+
+.resource-list-item__drag-handle {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: var(--s-space-4);
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  padding: var(--s-space-8);
+  flex-shrink: 0;
+  border: none;
+  color: var(--s-icon-default);
+  background-color: transparent;
+  cursor: grab;
+  transform: translateY(-50%);
+}
+
+.resource-list-item__drag-handle:active {
+    cursor: grabbing;
+  }
+
+.resource-list-item__drag-handle:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.resource-list-item__drag-handle:focus-visible {
+    outline-color: var(--s-focus-default);
+  }