@getflip/swirl-components 0.342.0 → 0.343.0

package/dist/cjs/swirl-tree-view.cjs.entry.js

@@ -20,6 +20,7 @@ const SwirlTreeView = class {
         this.itemExpansionChanged = index.createEvent(this, "itemExpansionChanged", 7);
         this.dragDropInstructions = defaultDragDropInstructions;
         this.dragDropItemSelector = "swirl-tree-view-item";
+        this.semantics = "tree";
         this.liveRegionText = "";
         this.onSlotChange = () => {
             this.init();
@@ -53,6 +54,9 @@ const SwirlTreeView = class {
         this.setUpDragDrop();
     }
     async expandItems(itemIds) {
+        if (this.semantics !== "tree") {
+            return;
+        }
         const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
         items.forEach((item) => item.expand());
     }
@@ -83,6 +87,9 @@ const SwirlTreeView = class {
         }
     }
     onKeyDown(event) {
+        if (this.semantics !== "tree") {
+            return;
+        }
         if (event.key === "ArrowDown") {
             event.preventDefault();
             this.selectNextItem();
@@ -134,6 +141,9 @@ const SwirlTreeView = class {
         this.updateLiveRegionText("moved", event.detail);
     }
     init() {
+        if (this.semantics !== "tree") {
+            return;
+        }
         const selectedItem = this.getSelectedItem();
         const allItems = this.getItems();
         allItems.forEach((item) => item.unselect());
@@ -322,7 +332,7 @@ const SwirlTreeView = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5841450ebd499f6290eb090acd17d96bedcf7b77' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: '6b77f266f22f83839ce83bc5005ba751b2b3708d' }, index.h("span", { key: '0efedd79e4bcd8b0c9b1583ee9fcb5e55a5687a7', "aria-live": "assertive" }, this.liveRegionText))), index.h("ul", { key: '715055e1da350a03543c9ea843daefc89df380c4', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: "tree", ref: (el) => (this.listElement = el), tabIndex: -1 }, index.h("slot", { key: '254bb98cde4a2f28af6d018928a487bf388adb3a', onSlotchange: this.onSlotChange }))));
+        return (index.h(index.Host, { key: '7177dd9e2f74be230521a2f9a139ad1277d11556' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: 'd39aa04b285432925acd615b96cf33c6939d6902' }, index.h("span", { key: '2b6a48e97c71dd795d1fe2a4cd74a5330b3ede4e', "aria-live": "assertive" }, this.liveRegionText))), index.h("ul", { key: 'fb057f182e27709fb30d8ee9c460984d3f962be1', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, index.h("slot", { key: '164cb029c89c6124b6c3c91a951f8ceca4b3af04', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -6,6 +6,9 @@ import classnames from "classnames";
  * @slot illustration - The placeholder illustration
  */
 export class SwirlEmptyState {
+    constructor() {
+        this.headingLevel = 4;
+    }
     render() {
         const hasControls = Boolean(this.el.querySelector('[slot="controls"]'));
         const hasSlottedIllustration = Boolean(this.el.querySelector('[slot="illustration"]'));
@@ -13,7 +16,7 @@ export class SwirlEmptyState {
             "empty-state--has-controls": hasControls,
             "empty-state--has-slotted-illustration": hasSlottedIllustration,
         });
-        return (h(Host, { key: '57bb48416bd0e8c54aef3418fa6a0e54d9ad6760' }, h("div", { key: 'fe0ef156a1ef90334da88fa527dbc78add141f1d', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: 'a3960dcbbc837014d6d6ac9a1f1a4f6daf75025f', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '78e024c7574e79d251e656489a8022934511a939', class: "empty-state__slotted-illustration" }, h("slot", { key: '0da696ddb12e08584734c156d2d23ab1bad39107', name: "illustration" })), h("div", { key: 'd42cca981abe0f80b0936a21626498c9366ba494', class: "empty-state__body" }, h("swirl-stack", { key: 'bff4dc647454634e113e6c064693e8dd6f3a3adf', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '1277ed9427723dfbfe4919096db8c90c038d7c3e', align: "center", as: "p", level: 4, text: this.heading })), h("div", { key: 'c3cafed4c94b20662439937c83cbc8ab3e17d8a6', class: "empty-state__content" }, h("swirl-text", { key: '6a08959009c52e25c01c4653808c654e612b40f7', align: "center", color: "subdued" }, h("slot", { key: '89b29fd85aa8cc98d2f8a6dd73ef04118b09d652' })))), h("div", { key: 'b67486ab67e4ad91a5085bcb591d5f6cd138467e', class: "empty-state__controls" }, h("slot", { key: 'ac9564b7696cb74d19da40451b7a84e6eeea77d7', name: "controls" }))))));
+        return (h(Host, { key: '00e52df34a36117df2781215682467b0a14c1693' }, h("div", { key: 'eac591aed9d90e013818fc07c13279cc593cd825', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '6ed1d924856bae08bae3616a88cc69c1e2985362', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '32c75b2e4fd6676b439de4d94745b4b8a784916d', class: "empty-state__slotted-illustration" }, h("slot", { key: 'f9b9a14cfc6835f540458d4435492f7bcec0b2ab', name: "illustration" })), h("div", { key: '1934f9f3972ba81882d54718e9a1498d485f769f', class: "empty-state__body" }, h("swirl-stack", { key: 'cf91a0b0074857b7eae3e9f7610020e1135c5474', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '8f2a7343a711859ec35e086478607b82316144c4', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: '2c9810a1f2506a0bda4e97db0085b4db7d67d5b6', class: "empty-state__content" }, h("swirl-text", { key: '891d182d7e839790681b0085b1e25c5ff6cd49e7', align: "center", color: "subdued" }, h("slot", { key: 'bfdbbb87d057f54f37bc259612150d60561d4300' })))), h("div", { key: '4f547fa5a2e713cf680fe13fcec43af77ad985f4', class: "empty-state__controls" }, h("slot", { key: 'b418c9ca3d09781afcca58a8b2f0716433be3a26', name: "controls" }))))));
     }
     static get is() { return "swirl-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -48,6 +51,32 @@ export class SwirlEmptyState {
                 "setter": false,
                 "reflect": false
             },
+            "headingLevel": {
+                "type": "number",
+                "attribute": "heading-level",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlHeadingLevel",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {
+                        "SwirlHeadingLevel": {
+                            "location": "import",
+                            "path": "../swirl-heading/swirl-heading",
+                            "id": "src/components/swirl-heading/swirl-heading.tsx::SwirlHeadingLevel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "4"
+            },
             "illustration": {
                 "type": "string",
                 "attribute": "illustration",

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

@@ -6,6 +6,7 @@ export class SwirlResourceList {
         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.semantics = "grid";
         this.spacing = "0";
         this.listId = uuid();
         this.focusedIndex = 0;
@@ -35,35 +36,19 @@ export class SwirlResourceList {
             this.draggingStartIndex = undefined;
         };
         this.onKeyDown = (event) => {
-            if (event.code === "ArrowDown") {
-                event.preventDefault();
-                if (!Boolean(this.dragging)) {
+            if (this.semantics === "grid" && !Boolean(this.dragging)) {
+                if (event.code === "ArrowDown") {
+                    event.preventDefault();
                     this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
                 }
-                else {
-                    this.moveDraggedItemDown();
-                }
-            }
-            else if (event.code === "ArrowUp") {
-                event.preventDefault();
-                if (!Boolean(this.dragging)) {
+                else if (event.code === "ArrowUp") {
+                    event.preventDefault();
                     const prevIndex = this.focusedIndex === 0
                         ? this.items.length - 1
                         : this.focusedIndex - 1;
                     this.focusItemAtIndex(prevIndex);
                 }
-                else {
-                    this.moveDraggedItemUp();
-                }
-            }
-            else if (event.code === "Space" || event.code === "Enter") {
-                const target = event.composedPath()[0];
-                if (Boolean(this.dragging) &&
-                    !target?.classList.contains("resource-list-item__drag-handle")) {
-                    event.preventDefault();
-                    this.stopDrag(this.dragging);
-                }
-                else if (Boolean(this.controllingElement) && event.code === "Enter") {
+                else if (event.code === "Enter" && Boolean(this.controllingElement)) {
                     const item = this.items[this.focusedIndex];
                     if (!Boolean(item) || !item.isConnected) {
                         return;
@@ -72,14 +57,31 @@ export class SwirlResourceList {
                     event.preventDefault();
                     item.click();
                 }
+                else if (event.code === "Home") {
+                    event.preventDefault();
+                    this.focusItemAtIndex(0);
+                }
+                else if (event.code === "End") {
+                    event.preventDefault();
+                    this.focusItemAtIndex(this.items.length - 1);
+                }
             }
-            else if (event.code === "Home") {
-                event.preventDefault();
-                this.focusItemAtIndex(0);
-            }
-            else if (event.code === "End") {
-                event.preventDefault();
-                this.focusItemAtIndex(this.items.length - 1);
+            if (Boolean(this.dragging)) {
+                if (event.code === "ArrowDown") {
+                    event.preventDefault();
+                    this.moveDraggedItemDown();
+                }
+                else if (event.code === "ArrowUp") {
+                    event.preventDefault();
+                    this.moveDraggedItemUp();
+                }
+                else if (event.code === "Space" || event.code === "Enter") {
+                    const target = event.composedPath()[0];
+                    if (!target?.classList.contains("resource-list-item__drag-handle")) {
+                        event.preventDefault();
+                        this.stopDrag(this.dragging);
+                    }
+                }
             }
         };
     }
@@ -137,6 +139,9 @@ export class SwirlResourceList {
         return this.items.map((i) => i).findIndex((i) => i === item);
     }
     removeItemsFromTabOrder() {
+        if (this.semantics !== "grid") {
+            return;
+        }
         this.items.forEach((item) => {
             const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
             const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
@@ -245,7 +250,7 @@ export class SwirlResourceList {
         });
     }
     render() {
-        return (h(Host, { key: 'd831867280abfc173c787cdff663d902353e233d', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'c1b47cba7d9ed0a08ea51218ec07c85d38144aa1', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'e0d7270c8c9cf07441dd72c37acf49fe70c7ee0a', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '128c961a67bcb88b6283731a598c4d2e780d0276', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: 'bbb035001ae31e6ea0f5b83bd4714528a8e39bf3' })))));
+        return (h(Host, { key: 'c75f0ba1985a00ac6dbc67289a6b4810c37be961', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '90494b940f1e6c1293d60c04458822c99c0fb2ba', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'f33276012374609326842e3d638c21d0f556a0d9', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '46a26973aaa57dff81309f36c62bdaf457f0c1e2', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: '5270fb4d8807d1818369b3afde14ea0cb5ccf20b' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }
@@ -507,6 +512,32 @@ export class SwirlResourceList {
                 "setter": false,
                 "reflect": false
             },
+            "semantics": {
+                "type": "string",
+                "attribute": "semantics",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlResourceListSemantics",
+                    "resolved": "\"grid\" | \"list\"",
+                    "references": {
+                        "SwirlResourceListSemantics": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-resource-list/swirl-resource-list.tsx",
+                            "id": "src/components/swirl-resource-list/swirl-resource-list.tsx::SwirlResourceListSemantics"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"grid\""
+            },
             "spacing": {
                 "type": "string",
                 "attribute": "spacing",

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlResourceListFileItem {
@@ -27,10 +27,12 @@ export class SwirlResourceListFileItem {
         const showDescription = !showError && Boolean(this.description);
         const showSpinner = !showError && this.loading;
         const showRemoveButton = this.removable && !showSpinner;
+        const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
+        const containerRole = hostRole === "row" ? "gridcell" : undefined;
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: '834a6d4b5711c8739b433af1dda1e2c244624216', role: "row" }, h("div", { key: '6a736623a0321cc41af6f5b911331f0168699d7e', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: 'f889d157d7457e8a5440fcbc0af2e1135f921426', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'e497be50b84b00442354c44b7c6a2a760496bf1b', class: "resource-list-file-item__label-container" }, h("span", { key: 'd8825e416808371e8dcc3b679381c868d291af85', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '07d1c0ce2a197ba41c35a2f3d6560fe19daeaaef', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '3adda11098345706a63f8dc25c148a66ac5029da', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'ade46ef407835785cf9935847ffc8c4bbcabee5e', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '998c1d1036523816e264ce40a7c0ab4ec50aac20', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '1f2a20ae42e4555d93d730326d7767de02298fe8', size: "s" }))), showRemoveButton && (h("span", { key: '241287042b814de24c577dc8a543e9383425b7c5', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '03da0e3ffa5380121db2fec55ae8704cf142af67', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: 'e2ff93b8e9698c59646fb70a7bf7ec6c9e677e34', role: hostRole }, h("div", { key: '3aba84c116b03284540c2d5d37c88c4d82cc639b', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: '1cec8dbd0040268f40c5cdc5125562dd843fe9b1', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'c506356a5e0d481cd9b929d7c834420a807b201b', class: "resource-list-file-item__label-container" }, h("span", { key: '2da1188edcf7d475282f6f42400b17ad2a235de0', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'ac2f3191cc1bbedb6ea9d28d226bcc5d09b3e10e', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '8fbf817f446a7c9a2c8b33ad018ea7c83651b08b', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '38bb4cd2eaa2540d90700edb8f227ef60bbf97ad', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'd515f6e941bd05120235c573e7876dc3bb971179', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '085056f884effa5f6799d62dc016ee4478ca7723', size: "s" }))), showRemoveButton && (h("span", { key: '990e0157642026ee96bf2df65bd0593d8ce5f3f6', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '749963c8ba905bad98e4d196da6dba8dda8f7120', 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 "scoped"; }
@@ -206,4 +208,5 @@ export class SwirlResourceListFileItem {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -114,6 +114,8 @@ export class SwirlResourceListItem {
             : this.label;
         const ariaChecked = this.selectable ? String(this.checked) : undefined;
         const role = this.interactive && this.selectable ? "checkbox" : undefined;
+        const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
+        const containerRole = hostRole === "row" ? "gridcell" : undefined;
         const labelContainerStyles = {
             paddingRight: !showMeta && Boolean(this.controlContainer)
                 ? `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`
@@ -136,7 +138,7 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (h(Host, { key: 'fac4e9ef2141b02c0f47fbcbaf2368561da743ec', role: "row" }, h("div", { key: 'a2050efe1bb7cfaf5828fec38275c0ef64b1dca7', class: className, role: "gridcell" }, h(Tag, { key: '88a45a25ad6c890128048803f69636bd918269e5', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '6ce6a2eedcb38541b3e33f36a1418f7697b66556', class: "resource-list-item__media" }, h("slot", { key: '5c8abcabc0dd83fa1febf9de89888c915eb961e8', name: "media" }))), h("span", { key: '0bdf11a2b1329239bac9046457b2997ca332dea0', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '0e326421287e7e1f156ead02ca3a4ee4639c635c', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'fc8d7ab472ae4efdc2234906d256ae6e6bea3e16', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: 'dccf17ffff66bcb875e56a360753fffc117a5cb0', class: "resource-list-item__meta" }, h("span", { key: 'e5d2ea91c855d64ba858c54a80e690b0e7e684ad', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: '6e97965511d965b623ecbb8f1c58b5f182220033', class: "resource-list-item__badges" }, h("slot", { key: 'd2a5a5b5e8b1819b0df39a7692ba20ac3d34c1e9', name: "badges" }))))), this.selectable && (h("span", { key: '19c93f99b610f9aa27b701dd1d11fb2f1e6e2df0', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'e9c993566fdcdd32f4260bd39625238bee12614b', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '56589cf146b91c631c0370dcd4a86095d2515a82' }))))), h("span", { key: 'b174ac3e106b4ebb3c919134d21e52b4995b035e', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '2365755ae94002a07654be9b398364f42c48dfe8', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '6922e4d265d60655da0236ba4838bc2e7cc23332', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '4bee5268cb623e2a8ebaf75ee785e2bad0bb54a7', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'c0c43019891547e02b947e90f6112f4afadf853e', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '9ba1dbc373631cdb8203f4b435bb66bfeb31c19b', size: this.iconSize })))));
+        return (h(Host, { key: '43910581e423c8294ab457c2a57f64237b54cdd6', role: hostRole }, h("div", { key: 'ab0b2780717232150f32e87e2318c76e90b8f5c5', class: className, role: containerRole }, h(Tag, { key: 'b0395a0c6e1ddfb373ef7c3129c93c618774aaf4', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'f619c5e071cbb9df143f4087c9a0e9e7f2f7c36d', class: "resource-list-item__media" }, h("slot", { key: 'ffe57fbf43568adcdcf96c04fbff860f5f2b8dac', name: "media" }))), h("span", { key: '4394d66aa315b48ce82c3df81f0cfaf7bc74ccb1', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '2f0fb5875316ad19340522b7bf483d959f39d01c', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'b1769ae51201b0cdf1c89027079d9615141cf44a', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '570ed201f5aaf20d68ae87efefd967d68af2a778', class: "resource-list-item__meta" }, h("span", { key: '53d1b22a6458e660a0d609229d23abeab3deffa5', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'af5e115892c913a9cf670c9545877807891eb8fe', class: "resource-list-item__badges" }, h("slot", { key: 'fa3a843bdbb23e7e0875855fa0a63ea8d9b93d13', name: "badges" }))))), this.selectable && (h("span", { key: '05164b24c5e4e82e78a3c679599483baced77f69', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '0dcca5e98ed85bb5686d10e8b4fa6bb736b52df5', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '47d03574a7392fe30e640781b57bd7fcd2d3c3d8' }))))), h("span", { key: '566e7ec233e0bc60c2d2c1a79d81a445e5fac8c3', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '240f3fb8d911922f151cfb32f0a1f4d6da4099d6', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '44adea3818f9cdec7feb46305b9d120ba648999b', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '070a1bd983131334c3041b5b93ee524bab87dff8', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '1f0fb8b9273e7ffdc854f09e98dfe189e0310f51', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '39b750e0c4794233b1295b1aa729522199f61d1d', size: this.iconSize })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -9,7 +9,9 @@ export class SwirlResourceListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '4eae7efd53e84cec73ae5b067a18e0af0e3e175d' }, this.hasSeparator && (h("swirl-separator", { key: '70f39e2e49bd9101a4f0b19c107f6b3d4212fb47', spacing: this.separatorSpacing })), h("div", { key: '65eb9256b3fbe8d6433b4448ba0c7aa6de5d1a57', "aria-labelledby": "label", role: "rowgroup" }, h("span", { key: 'ff85cd46aab8262be9c01ea22bf32f2f1611d5a1', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: '309bc5667b652814a85341b748668e61125ffb99', spacing: this.spacing }, h("slot", { key: 'a505ceb8bfb2658d4f33a661dbf357432ae251be' })))));
+        const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
+        const childrenListRole = role === "listitem" ? "list" : undefined;
+        return (h(Host, { key: '15b79ab20202e3dbb997a1f3d7bd54b0cb0d85fc' }, this.hasSeparator && (h("swirl-separator", { key: 'fba6307d69cce0f888cd2be35eabb5c4e3e0468e', spacing: this.separatorSpacing })), h("div", { key: 'ca09d549a371ac0ce67ea1232c492a4435fa8df4', "aria-labelledby": "label", role: role }, h("span", { key: '34c025c8b1703a252b498b0d8a2234bdaa640e42', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: '71efc08c6d84f3c36dbc7e650570d2d28d038e6c', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: 'f537afc6ab3f73aed3c1f43a23da7c2cef242026' })))));
     }
     static get is() { return "swirl-resource-list-section"; }
     static get encapsulation() { return "shadow"; }
@@ -118,4 +120,5 @@ export class SwirlResourceListSection {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -17,7 +17,7 @@ export class SwirlStack {
             height: this.height,
         };
         const className = classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
-        return (h(Host, { key: '0f40991d0ba663ca796ebda5e5dbda4df44ebc32', style: { height: this.height } }, h(Tag, { key: 'e2a5d61db131f70a76011778ae296e5fff58c5c0', class: className, style: styles }, h("slot", { key: '74deebe7f99a5e215e312f39c54e3bbc411e2a08' }))));
+        return (h(Host, { key: '9361133b37cb5c677dbf6dd49a39eec30c762e7a', style: { height: this.height } }, h(Tag, { key: '0fa5eaca5ac99e482f50793f170e6349e1854846', class: className, role: this.swirlAriaRole, style: styles }, h("slot", { key: '66e0cc4865421fbad50be48718d045a742fecedf' }))));
     }
     static get is() { return "swirl-stack"; }
     static get encapsulation() { return "shadow"; }
@@ -226,6 +226,25 @@ export class SwirlStack {
                 "reflect": false,
                 "defaultValue": "\"0\""
             },
+            "swirlAriaRole": {
+                "type": "string",
+                "attribute": "swirl-aria-role",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "wrap": {
                 "type": "boolean",
                 "attribute": "wrap",

package/dist/collection/components/swirl-tree-view/swirl-tree-view.js

@@ -15,6 +15,7 @@ export class SwirlTreeView {
     constructor() {
         this.dragDropInstructions = defaultDragDropInstructions;
         this.dragDropItemSelector = "swirl-tree-view-item";
+        this.semantics = "tree";
         this.liveRegionText = "";
         this.onSlotChange = () => {
             this.init();
@@ -48,6 +49,9 @@ export class SwirlTreeView {
         this.setUpDragDrop();
     }
     async expandItems(itemIds) {
+        if (this.semantics !== "tree") {
+            return;
+        }
         const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
         items.forEach((item) => item.expand());
     }
@@ -78,6 +82,9 @@ export class SwirlTreeView {
         }
     }
     onKeyDown(event) {
+        if (this.semantics !== "tree") {
+            return;
+        }
         if (event.key === "ArrowDown") {
             event.preventDefault();
             this.selectNextItem();
@@ -129,6 +136,9 @@ export class SwirlTreeView {
         this.updateLiveRegionText("moved", event.detail);
     }
     init() {
+        if (this.semantics !== "tree") {
+            return;
+        }
         const selectedItem = this.getSelectedItem();
         const allItems = this.getItems();
         allItems.forEach((item) => item.unselect());
@@ -317,7 +327,7 @@ export class SwirlTreeView {
         }
     }
     render() {
-        return (h(Host, { key: '5841450ebd499f6290eb090acd17d96bedcf7b77' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '6b77f266f22f83839ce83bc5005ba751b2b3708d' }, h("span", { key: '0efedd79e4bcd8b0c9b1583ee9fcb5e55a5687a7', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '715055e1da350a03543c9ea843daefc89df380c4', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: "tree", ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '254bb98cde4a2f28af6d018928a487bf388adb3a', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '7177dd9e2f74be230521a2f9a139ad1277d11556' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'd39aa04b285432925acd615b96cf33c6939d6902' }, h("span", { key: '2b6a48e97c71dd795d1fe2a4cd74a5330b3ede4e', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'fb057f182e27709fb30d8ee9c460984d3f962be1', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '164cb029c89c6124b6c3c91a951f8ceca4b3af04', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get originalStyleUrls() {
@@ -450,6 +460,32 @@ export class SwirlTreeView {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "semantics": {
+                "type": "string",
+                "attribute": "semantics",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTreeViewSemantics",
+                    "resolved": "\"list\" | \"tree\"",
+                    "references": {
+                        "SwirlTreeViewSemantics": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tree-view/swirl-tree-view.tsx",
+                            "id": "src/components/swirl-tree-view/swirl-tree-view.tsx::SwirlTreeViewSemantics"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"tree\""
             }
         };
     }

package/dist/collection/components/swirl-tree-view-item/swirl-tree-view-item.js

@@ -17,7 +17,7 @@ export class SwirlTreeViewItem {
         this.movingViaKeyboard = false;
         this.selected = false;
         this.onFocus = () => {
-            if (!this.selected) {
+            if (!this.selected && this.getSemantics() === "tree") {
                 this.select();
             }
         };
@@ -63,20 +63,23 @@ export class SwirlTreeViewItem {
         this.setUpDragDrop();
     }
     async expand() {
-        if (this.expanded || !this.expandable) {
+        if (this.expanded || !this.expandable || this.getSemantics() !== "tree") {
             return;
         }
         this.expanded = true;
         this.expandedChange.emit(this.expanded);
     }
     async collapse() {
-        if (!this.expanded || !this.expandable) {
+        if (!this.expanded || !this.expandable || this.getSemantics() !== "tree") {
             return;
         }
         this.expanded = false;
         this.expandedChange.emit(this.expanded);
     }
     async select(focus) {
+        if (this.getSemantics() !== "tree") {
+            return;
+        }
         this.selected = true;
         if (focus) {
             this.link?.focus();
@@ -84,6 +87,9 @@ export class SwirlTreeViewItem {
         this.itemSelected.emit(this.el);
     }
     async unselect() {
+        if (this.getSemantics() !== "tree") {
+            return;
+        }
         this.selected = false;
     }
     setUpDragDrop() {
@@ -303,11 +309,18 @@ export class SwirlTreeViewItem {
         }
         this.cannotKeyboardDropInCurrentPosition = false;
     }
+    getSemantics() {
+        const hasTreeSemantics = this.el.closest('[role="tree"]');
+        return hasTreeSemantics ? "tree" : "list";
+    }
     render() {
         const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
         const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
         const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
         const shouldShowChildrenDropZone = this.enableDragDrop && !hasChildren;
+        const semantics = this.getSemantics();
+        const expanded = this.expanded || semantics !== "tree";
+        const tabIndex = semantics === "tree" ? (this.selected ? 0 : -1) : undefined;
         const className = classNames("tree-view-item", {
             "tree-view-item--active": this.active,
             "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
@@ -315,13 +328,17 @@ export class SwirlTreeViewItem {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: 'e407aad02c536ae6f3bf0adc999f4d6cef4deeb4', id: this.itemId, role: "none" }, h("li", { key: '30cad8635d5770373be5347ccd7b2c00ba99a6ff', class: className, role: "none" }, h("a", { key: 'ec8628de981fbc8246abdd5e7503abd6762f7b43', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '1e556ae354352718c83db374555cffef2906aec2', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: 'b8083166676ee2bd38b45727c984bdbaabb442cc', size: 20 }))), this.expandable && (h("span", { key: 'e90c1603518c56135cf3e9b1b04323947045d62e', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'ec6c9d66674cc67d40945c2424bb4549629032eb' }, this.expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'e2399828aa48599248340f33bbf743934bcaaa6d' }, h("span", { key: '571b89b1766fd79ea0041d6d67d8b818c2186c21', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '915cfff5478e90ce13dde92cc57383e9ba1e3a82', class: "tree-view-item__label" }, this.label), h("span", { key: 'cafd19fe2bb21141713d946543b17e2a8e3af7c1', class: "tree-view-item__tags" }, h("slot", { key: '59e8d26054053902bdb83ac0f0431392a1822f81', name: "tags" }))), h("ul", { key: '19ba4fd45f7d38c886e69eb7e616d9c43e064163', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+        return (h(Host, { key: '65881342c7a8332a6511e9607bbdd6ec087a9272', id: this.itemId, role: "none" }, h("li", { key: 'b10d8040f05ae9eaba034a811ad742608810c239', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '5935418c8673bbc8029d6bd2f3104149761c11a7', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+                ? undefined
+                : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
+                ? `${this.itemId}-children`
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: 'ad52424f81e920a71f98a79f797c55009a8581e7', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '5bc418c16e4a2b9eb86b22af7447490a23f0657b', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: 'fd1f419299f9b08f70eec8167fe3e11864025793', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'c68c8e65e923026abfbbfa86845ddedcc03fd431' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '895c9fa1a7cd5e48029c264e16294837780329b6' }, h("span", { key: '0c6493585abec28ddb004f8054ccbb7e306fe297', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '10603cdbaaeaeb87637885dd7c796e56f7039903', class: "tree-view-item__label" }, this.label), h("span", { key: 'a76b6724dcef1aee95280c4483dcd1226aaaa142', class: "tree-view-item__tags" }, h("slot", { key: 'b5f93fe196914382421f0307100d9c53f0d3f5ff', name: "tags" }))), h("ul", { key: '8bf0322fc3576a6255ce8cf14c4432dc96c093a0', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: "group", style: {
-                display: (!this.expanded || !hasChildren) && !shouldShowChildrenDropZone
+                display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: '2e074013de5942bf92e445581ceb4f9f94e041b7' })))));
+            } }, h("slot", { key: '5c17ad91e8055f44e0f3e083d6abe970b773add6' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get originalStyleUrls() {