@getflip/swirl-components 0.67.0 → 0.68.1

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

@@ -7,13 +7,12 @@ import { d as defineCustomElement$4 } from './swirl-inline-error2.js';
 import { d as defineCustomElement$3 } from './swirl-spinner2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.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$1 = /*@__PURE__*/ proxyCustomElement(class SwirlResourceListFileItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
     this.remove = createEvent(this, "remove", 7);
     this.desktopMediaQuery = getDesktopMediaQuery();
     this.desktopMediaQueryHandler = (event) => {
@@ -53,7 +52,7 @@ const SwirlResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class Swirl
     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 style() { return swirlResourceListFileItemCss; }
-}, [1, "swirl-resource-list-file-item", {
+}, [2, "swirl-resource-list-file-item", {
     "description": [1],
     "errorMessage": [1, "error-message"],
     "icon": [1],

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

@@ -1,16 +1,23 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-import { d as defineCustomElement$2 } from './swirl-button2.js';
-import { d as defineCustomElement$1 } from './swirl-icon-check-strong2.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+import { d as defineCustomElement$3 } from './swirl-button2.js';
+import { d as defineCustomElement$2 } from './swirl-icon-check-strong2.js';
+import { d as defineCustomElement$1 } from './swirl-icon-drag-handle2.js';
 
-const swirlResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item--label-weight-medium{font-weight:var(--s-font-weight-medium)}.resource-list-item__content{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .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:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{outline:none}.resource-list-item__content:focus-visible{background-color:var(--s-background-hovered)}.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);background-color:var(--s-background-default);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{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-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-item__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.resource-list-item__label b,.resource-list-item__label strong{font-weight:var(--s-font-weight-semibold)}.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);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
+const swirlResourceListItemCss = ".sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%}.resource-list-item.sc-swirl-resource-list-item:hover{--swirl-ghost-button-background-default:var(--s-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item:after{display:none}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{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.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{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),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-resource-list-item-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:hover:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item{--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.sc-swirl-resource-list-item:active:not(:disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item__content.sc-swirl-resource-list-item:active:not(:disabled) .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item__content.sc-swirl-resource-list-item:focus{outline:none}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:focus-visible .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content.sc-swirl-resource-list-item:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content.sc-swirl-resource-list-item:disabled .resource-list-item__description.sc-swirl-resource-list-item{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container.sc-swirl-resource-list-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-item__label.sc-swirl-resource-list-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.resource-list-item__label.sc-swirl-resource-list-item b.sc-swirl-resource-list-item,.resource-list-item__label.sc-swirl-resource-list-item strong.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item__description.sc-swirl-resource-list-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-item__menu-trigger.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.resource-list-item__drag-handle.sc-swirl-resource-list-item{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.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}";
 
 const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResourceListItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
+    this.toggleDrag = createEvent(this, "toggleDrag", 7);
     this.valueChange = createEvent(this, "valueChange", 7);
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+      this.updateIconSize(event.matches);
+    };
     this.onClick = () => {
       if (!this.selectable) {
         return;
@@ -23,9 +30,19 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
         event.stopPropagation();
       }
     };
+    this.onDragHandleKeyDown = (event) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        event.preventDefault();
+        this.toggleDrag.emit(this.el);
+      }
+    };
+    this.allowDrag = undefined;
     this.checked = false;
     this.description = undefined;
     this.disabled = undefined;
+    this.dragging = undefined;
+    this.dragHandleDescription = "Press spacebar to toggle grab";
+    this.dragHandleLabel = "Move item";
     this.hideDivider = undefined;
     this.href = undefined;
     this.label = undefined;
@@ -36,10 +53,28 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
     this.selectable = undefined;
     this.value = undefined;
     this.hasMedia = false;
+    this.iconSize = 24;
   }
   async componentWillLoad() {
     this.updateMediaState();
   }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    var _a;
+    const icon = (_a = this.iconEl) === null || _a === void 0 ? void 0 : _a.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
   updateMediaState() {
     const mediaContainer = this.el.querySelector('[slot="media"]');
     const hasMedia = Boolean(mediaContainer);
@@ -57,18 +92,24 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
     const role = this.selectable ? "checkbox" : undefined;
     const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
       "resource-list-item--checked": this.checked,
+      "resource-list-item--draggable": this.allowDrag,
+      "resource-list-item--dragging": this.dragging,
       "resource-list-item--has-menu": hasMenu,
       "resource-list-item--hide-divider": this.hideDivider,
       "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: this.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 })))));
+    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: this.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 })))));
   }
   get el() { return this; }
   static get style() { return swirlResourceListItemCss; }
-}, [1, "swirl-resource-list-item", {
+}, [6, "swirl-resource-list-item", {
+    "allowDrag": [4, "allow-drag"],
     "checked": [1028],
     "description": [1],
     "disabled": [4],
+    "dragging": [4],
+    "dragHandleDescription": [1, "drag-handle-description"],
+    "dragHandleLabel": [1, "drag-handle-label"],
     "hideDivider": [4, "hide-divider"],
     "href": [1],
     "label": [1],
@@ -78,13 +119,14 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
     "meta": [1],
     "selectable": [4],
     "value": [1],
-    "hasMedia": [32]
+    "hasMedia": [32],
+    "iconSize": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-resource-list-item", "swirl-button", "swirl-icon-check-strong"];
+  const components = ["swirl-resource-list-item", "swirl-button", "swirl-icon-check-strong", "swirl-icon-drag-handle"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-resource-list-item":
       if (!customElements.get(tagName)) {
@@ -93,10 +135,15 @@ function defineCustomElement() {
       break;
     case "swirl-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "swirl-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "swirl-icon-drag-handle":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/swirl-resource-list2.js

@@ -1,23 +1,70 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './swirl-stack2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { S as Sortable } from './sortable.esm.js';
+import { d as defineCustomElement$2 } from './swirl-stack2.js';
+import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
 
-const swirlResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
+const swirlResourceListCss = ".sc-swirl-resource-list-h{display:block;width:100%}.sc-swirl-resource-list-h *.sc-swirl-resource-list{box-sizing:border-box}";
 
 const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceList extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
+    this.itemDrop = createEvent(this, "itemDrop", 7);
     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();
@@ -31,28 +78,79 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
     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;
     }
@@ -70,19 +168,47 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
     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 }))));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "allowDrag": ["watchAllowDrag"]
+  }; }
   static get style() { return swirlResourceListCss; }
-}, [1, "swirl-resource-list", {
-    "label": [1]
+}, [6, "swirl-resource-list", {
+    "allowDrag": [4, "allow-drag"],
+    "assistiveTextItemGrabbed": [1, "assistive-text-item-grabbed"],
+    "assistiveTextItemMoving": [1, "assistive-text-item-moving"],
+    "assistiveTextItemMoved": [1, "assistive-text-item-moved"],
+    "label": [1],
+    "assistiveText": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-resource-list", "swirl-stack"];
+  const components = ["swirl-resource-list", "swirl-stack", "swirl-visually-hidden"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-resource-list":
       if (!customElements.get(tagName)) {
@@ -90,6 +216,11 @@ function defineCustomElement() {
       }
       break;
     case "swirl-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "swirl-visually-hidden":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }