@getflip/swirl-components 0.298.0 → 0.300.0

package/dist/components/swirl-table-column.js

@@ -28,7 +28,7 @@ const SwirlTableColumn$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableColu
             maxWidth: this.maxWidth || "",
             minWidth: this.minWidth || "",
         };
-        return (h(Host, { key: 'b4b2b34e8bc2f9dacf9ee83ff0976f7a29deb265', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '494a409686b6826531a8f2b40914c3baf85a4fa6' }, h("slot", { key: 'd7a1607dbe9e7e897f0699dbc7b8f118a667094b' })), this.sortable && (h("span", { key: '71f37474cc4c854bdbf421aead9cfad84abf9ee5', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: '4709f69b17239f3aa10b6513bb1b45b7e0a998a8', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: 'de9b1cdb14ae43dc8a1b042bac4423ba837b1191', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (h(Host, { key: '928c4901ce0a82166ae1869bf4e0a6fc455bc93f', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: '9fd6853d5ca6f749a1594baae50b800a18f49748' }, h("slot", { key: 'a64fd9c2a587f8ea79531d5a145ec66fcce2e1a3' })), this.sortable && (h("span", { key: '9b38668da82995eeee2cc1cfa0938f9cce41d570', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'ae88490ecca4a744ed0391f588104c5c88a801ed', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '1c816479d6ed0c695ac6401b67fcc4539a8a870e', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
     }
     get el() { return this; }
     static get style() { return SwirlTableColumnStyle0; }

package/dist/components/swirl-table-row-group.js

@@ -47,10 +47,10 @@ const SwirlTableRowGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRo
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (h(Host, { key: 'c88b498464392825915456cde50e1cd86784e95b', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'b430a7f8bbce7899a1e305b5f32f84d6d6741cfd', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'f80767556a73cca5be5e161d773b0f48416ef0fc', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: '176eb2d179d37e89259529d6017a9722909ec603', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'a3873dd1f620fbed2eb3f88732070c43960b83ba', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '04b48bab737428de33efc053dec6e230d1ca6189', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: 'e3666b0cef84945676edd6ab67fcd1a94c488890', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'fc4ae5148aa61fb7c47f18c354518706f316df18', class: {
+        return (h(Host, { key: 'cf7d31b53422f4d44a94a2dee538abdfbaaa0f8a', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'ef5076b4454bc61e623771432dbe8efdcd4e8273', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'a30d99f13f8dddfcc3b5e69db6762d469a13caac', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'ae22d3333c3ce17868f9eefc9c1c8284dbce4c3e', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'db5b1dbb3e033daa9aebf75e366ddefb420c284c', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'ef1aa1f305af4ec793f4ef8b77e952edf7c2fd94', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '62ba9fe4742d2e73b13499193875f05ca45a1e46', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'd61b4a5c20ce648991041fbf63a08b6434a26ce9', class: {
                 "table-row-group__rows-container": true,
                 "table-row-group__rows-container--is-hidden": this.isVisible,
-            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '1291364c64464f539014870e1faf5a98ea089173' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'adbf793b772158fe96be757b3a1e1dbdf3b3deb0' }))));
     }
     get el() { return this; }
     static get style() { return SwirlTableRowGroupStyle0; }

package/dist/components/swirl-table-row.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classNames } from './index2.js';
 import { c as closestPassShadow } from './utils.js';
 
-const swirlTableRowCss = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}";
+const swirlTableRowCss = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host(.table-row--moving){border:var(--swirl-table-moving-row-border)}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}";
 const SwirlTableRowStyle0 = swirlTableRowCss;
 
 const SwirlTableRow$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRow extends HTMLElement {
@@ -21,7 +21,7 @@ const SwirlTableRow$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRow ext
         const className = classNames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: '2447fb97560094815d341fc1f2354cd35c2b654e', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '18cb9d6800ec03f2226b01d74129e3255a6a10d6' })));
+        return (h(Host, { key: '3f346c9978c4de720ba49522dea9f308e97ce447', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '7a13cb11d5649321042a53d1b3dc4a347089fde5' })));
     }
     get el() { return this; }
     static get style() { return SwirlTableRowStyle0; }

package/dist/components/swirl-table.js

@@ -1,5 +1,7 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as debounce, i as isMobileViewport } from './utils.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+import { S as Sortable } from './sortable.esm.js';
+import { d as debounce, i as isMobileViewport, q as querySelectorAllDeep } from './utils.js';
 import { d as defineCustomElement$3 } from './swirl-text2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
@@ -74,14 +76,20 @@ function defer() {
   return deferred;
 }
 
-const swirlTableCss = ":host{position:relative;display:block}:host *{box-sizing:border-box}.table__container{position:relative;overflow:auto;width:100%}.table__container--scrolled{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),\n    2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),\n    0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header ::slotted(*){display:flex}.table__empty-row{display:flex}.table__empty-row-cell{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell>*{flex-grow:1}";
+const swirlTableCss = ".sc-swirl-table-h{position:relative;display:block}.sc-swirl-table-h *.sc-swirl-table{box-sizing:border-box}.table--keyboard-move.sc-swirl-table:focus-within{--swirl-table-moving-row-border:var(--s-border-width-default) solid\n      var(--s-border-highlight)}.table__container.sc-swirl-table{position:relative;overflow:auto;width:100%}.table__container--scrolled.sc-swirl-table{--swirl-table-sticky-right-shadow:4px 0 16px -4px rgba(23, 23, 23, 0.04),\n    2px 0 4px -2px rgba(23, 23, 23, 0.04)}.table__container--scrollable.sc-swirl-table:not(.table__container--scrolled-to-end){--swirl-table-sticky-left-shadow:0px 4px 16px 0px rgba(23, 23, 23, 0.04),\n    0px 1px 4px 0px rgba(23, 23, 23, 0.04)}.table__table.sc-swirl-table{width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:max(20rem, 100%)}.table__header.sc-swirl-table-s>*,.table__header .sc-swirl-table-s>*{display:flex}.table__empty-row.sc-swirl-table{display:flex}.table__empty-row-cell.sc-swirl-table{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default)}.table__empty-row-cell.sc-swirl-table>*.sc-swirl-table{flex-grow:1}";
 const SwirlTableStyle0 = swirlTableCss;
 
+const defaultDragDropInstructions = {
+    end: "Dropped. Final position in table: {position} of {rowCount}.",
+    initial: "Press space to move the row.",
+    moved: "Current position in table: {position} of {rowCount}.",
+    start: "Row grabbed. Current position in table: {position} of {rowCount}. Press up and down arrow keys to change position, Space to drop.",
+};
 const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
+        this.dropRow = createEvent(this, "dropRow", 7);
         this.triggerRerender = debounce(async () => {
             await this.updateLayout();
             this.updateEmptyState();
@@ -102,20 +110,86 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         this.onSlotChange = async () => {
             await this.updateLayout();
             this.updateEmptyState();
+            this.setupDragDrop();
+        };
+        this.onFocus = (event) => {
+            if (this.movingViaKeyboard) {
+                const movingRow = this.el.querySelector(".table-row--moving");
+                if (movingRow) {
+                    this.focusDragHandleOfRow(movingRow);
+                }
+            }
+            const focusedDragHandle = !!event.target?.closest(this.dragDropHandle);
+            if (this.liveRegionText === "" && focusedDragHandle) {
+                this.updateLiveRegionText("initial");
+            }
+        };
+        this.onBlur = (event) => {
+            const newlyFocusedElement = event.relatedTarget;
+            const focusedDragHandle = !!newlyFocusedElement?.closest(this.dragDropHandle);
+            if (this.el.contains(newlyFocusedElement) && focusedDragHandle) {
+                return;
+            }
+            if (this.liveRegionText !== "") {
+                this.updateLiveRegionText();
+            }
+        };
+        this.onKeyDown = (event) => {
+            if (!this.enableDragDrop) {
+                return;
+            }
+            const row = event.target?.closest("swirl-table-row");
+            const focusedDragHandle = !!event.target?.closest(this.dragDropHandle);
+            if (!focusedDragHandle) {
+                return;
+            }
+            if (event.code === "Space") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.toggleKeyboardMove(row);
+            }
+            else if (event.code === "ArrowUp") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveRow(row, "up");
+            }
+            else if (event.code === "ArrowDown") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveRow(row, "down");
+            }
+            else if (event.code === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.cancelKeyboardMove();
+            }
         };
         this.caption = undefined;
+        this.dragDropHandle = undefined;
+        this.dragDropInstructions = defaultDragDropInstructions;
         this.emptyStateLabel = "No results found.";
+        this.enableDragDrop = undefined;
         this.label = undefined;
         this.empty = undefined;
+        this.liveRegionText = "";
         this.scrollable = undefined;
         this.scrolled = undefined;
         this.scrolledToEnd = undefined;
     }
     async componentDidLoad() {
         this.setupIntersectionObserver();
+        queueMicrotask(() => {
+            this.setupDragDrop();
+        });
     }
     disconnectedCallback() {
         this.intersectionObserver?.disconnect();
+        this.sortable?.destroy();
+    }
+    handleEnableDragDropChange() {
+        queueMicrotask(() => {
+            this.setupDragDrop();
+        });
     }
     /**
      * Set up an Intersection Observer to monitor when the table container becomes visible.
@@ -128,6 +202,50 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         });
         this.intersectionObserver.observe(this.container);
     }
+    setupDragDrop() {
+        if (this.sortable) {
+            this.sortable.destroy();
+            this.sortable = undefined;
+        }
+        if (this.enableDragDrop) {
+            const tableHasRowGroups = !!this.el.querySelector("swirl-table-row-group");
+            if (tableHasRowGroups) {
+                // Drag & drop for multiple row groups is not yet implemented.
+                console.warn('[Swirl] Drag & drop is not yet supported for swirl-tables using the "swirl-table-row-group" component.');
+                return;
+            }
+            if (!this.dragDropHandle) {
+                console.warn('[Swirl] swirl-table required the "dragDropHandle" prop to be set when drag & drop is enabled.');
+                return;
+            }
+            const slottedEl = this.el.querySelector('[slot="rows"]');
+            this.dragDropContainer =
+                slottedEl?.tagName !== "SWIRL-TABLE-ROW"
+                    ? slottedEl ?? this.bodyEl
+                    : this.bodyEl;
+            this.sortable = new Sortable(this.dragDropContainer, {
+                animation: 100,
+                direction: "vertical",
+                handle: this.dragDropHandle,
+                fallbackOnBody: true,
+                group: `swirl-table-${Math.random().toString().substring(2)}`,
+                onEnd: (event) => {
+                    event.stopPropagation();
+                    const { to, newIndex, oldIndex, item } = event;
+                    this.dropRow.emit({
+                        newIndex,
+                        oldIndex,
+                        item,
+                        itemId: item.id ?? item.querySelector(":scope > swirl-table-row").id,
+                        newNextSiblingItemId: newIndex < to.children.length - 1
+                            ? to.children[newIndex + 1].id
+                            : undefined,
+                        newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
+                    });
+                },
+            });
+        }
+    }
     async onVisibilityChange(entries) {
         const inViewport = entries.some((entry) => entry.isIntersecting);
         if (inViewport) {
@@ -152,7 +270,7 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         this.triggerRerender();
     }
     resetEmptyRowStyles() {
-        const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+        const emptyRow = this.el.querySelector(".table__empty-row");
         if (!Boolean(emptyRow)) {
             return;
         }
@@ -230,16 +348,16 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         return Array.from(this.el.querySelectorAll("swirl-table-cell"));
     }
     layoutEmptyRow() {
-        const emptyRow = this.el.shadowRoot.querySelector(".table__empty-row");
+        const emptyRow = this.el.querySelector(".table__empty-row");
         if (!Boolean(emptyRow)) {
             return;
         }
-        const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container").scrollWidth}px`;
+        const scrollWidth = `${this.el.querySelector(".table__container").scrollWidth}px`;
         emptyRow.style.width = scrollWidth;
     }
     layoutRowGroups() {
         const tableRowGroups = Array.from(this.el.querySelectorAll("swirl-table-row-group"));
-        const scrollWidth = `${this.el.shadowRoot.querySelector(".table__container")?.scrollWidth}px`;
+        const scrollWidth = `${this.el.querySelector(".table__container")?.scrollWidth}px`;
         tableRowGroups.forEach((tableRowGroup) => {
             const headerRow = tableRowGroup.shadowRoot.querySelector(".table-row-group__header-row");
             if (!Boolean(headerRow)) {
@@ -325,21 +443,125 @@ const SwirlTable$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTable extends H
         const rowsContainer = this.el.querySelector('[slot="rows"]');
         this.empty = !Boolean(rowsContainer) || rowsContainer.children.length === 0;
     }
+    updateLiveRegionText(key, data = {}) {
+        let newText = key ? this.dragDropInstructions[key] : "";
+        for (const [key, value] of Object.entries(data ?? {})) {
+            newText = newText.replaceAll(`{${key}}`, String(value));
+        }
+        if (newText !== this.liveRegionText) {
+            this.liveRegionText = newText;
+        }
+    }
+    toggleKeyboardMove(row) {
+        if (this.movingViaKeyboard) {
+            this.endKeyboardMove(row);
+        }
+        else {
+            this.startKeyboardMove(row);
+        }
+    }
+    startKeyboardMove(row) {
+        this.movingViaKeyboard = true;
+        this.positionBeforeKeyboardMove = Array.from(this.dragDropContainer.children).indexOf(row);
+        row.classList.add("table-row--moving");
+        this.updateLiveRegionText("start", {
+            position: Array.from(this.dragDropContainer.children).indexOf(row) + 1,
+            rowCount: this.dragDropContainer.children.length,
+        });
+    }
+    endKeyboardMove(row) {
+        this.movingViaKeyboard = false;
+        row.classList.remove("table-row--moving");
+        this.updateLiveRegionText("end", {
+            position: Array.from(this.dragDropContainer.children).indexOf(row) + 1,
+            rowCount: this.dragDropContainer.children.length,
+        });
+        this.dropRow.emit({
+            item: row,
+            newIndex: Array.from(this.dragDropContainer.children).indexOf(row),
+            oldIndex: this.positionBeforeKeyboardMove,
+            itemId: row.id,
+            newNextSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(row) <
+                this.dragDropContainer.children.length - 1
+                ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(row) + 1].id
+                : undefined,
+            newPrevSiblingItemId: Array.from(this.dragDropContainer.children).indexOf(row) > 0
+                ? this.dragDropContainer.children[Array.from(this.dragDropContainer.children).indexOf(row) - 1].id
+                : undefined,
+        });
+        this.positionBeforeKeyboardMove = undefined;
+    }
+    cancelKeyboardMove() {
+        if (!this.movingViaKeyboard) {
+            return;
+        }
+        const row = this.el.querySelector(".table-row--moving");
+        if (!row) {
+            return;
+        }
+        row.classList.remove("table-row--moving");
+        this.movingViaKeyboard = false;
+        if (this.positionBeforeKeyboardMove !== undefined) {
+            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[this.positionBeforeKeyboardMove]);
+        }
+    }
+    moveRow(row, direction) {
+        if (!this.movingViaKeyboard) {
+            return;
+        }
+        let newIndex;
+        if (direction === "up") {
+            const currentIndex = Array.from(this.dragDropContainer.children).indexOf(row);
+            newIndex = Math.max(0, currentIndex - 1);
+            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[newIndex]);
+        }
+        else {
+            const currentIndex = Array.from(this.dragDropContainer.children).indexOf(row);
+            newIndex = Math.min(this.dragDropContainer.children.length - 1, currentIndex + 1);
+            this.dragDropContainer.insertBefore(row, this.dragDropContainer.children[newIndex + 1]);
+        }
+        this.updateLiveRegionText("moved", {
+            position: newIndex + 1,
+            rowCount: this.dragDropContainer.children.length,
+        });
+        this.focusDragHandleOfRow(row);
+    }
+    focusDragHandleOfRow(row) {
+        const handle = querySelectorAllDeep(row, this.dragDropHandle)?.[0];
+        if (handle.tagName === "BUTTON") {
+            handle.focus();
+        }
+        else {
+            handle.querySelector("button")?.focus();
+        }
+    }
     render() {
-        return (h(Host, { key: '1dad264e782e779ec3c641670d6745ae27f311f1' }, h("div", { key: '972ff6748270ec8c89e68803dec81bb3b696b7d5', class: "table" }, h("div", { key: '8421a34d775292faec2fdb16971aa328a3d9e40d', class: "table__container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("div", { key: '2057cabb89b21c4d2634552b6c868026f90c1746', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: '853d3788f7e0dd1170cfbfc84e5d810e999bf800' }, h("div", { key: '72ecf2b03aa6c46d45609254f5fa9af2fbbcb039', id: "caption" }, this.caption))), h("div", { key: '02b2b15ca2aefc20a3237d95ca34b892a9bc9b41', role: "rowgroup" }, h("div", { key: '6543839c056f6caf174f65670668c2a5c6f2606e', class: "table__header", role: "row" }, h("slot", { key: 'e6581bc48062a1d704ba2b9280b35190f03e2c64', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '04e5564657fed6b436679cd300e56e18d8f64ce8', class: "table__body" }, h("slot", { key: '4054d9418eb60559e996bb630143fbaceca90a5a', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: '8200eb9e5bf3d8b52ead63df6d77db21bc6adbac', class: "table__empty-row", role: "row" }, h("div", { key: 'f86a99a732345affb1e8fd1224673970066da191', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: '29199285a11c90a6839a68c84edd71f04fbf4d6e', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        const className = classNames("table", {
+            "table--keyboard-move": this.movingViaKeyboard,
+        });
+        return (h(Host, { key: '072ad27c0d91fe202a82c853917575d36f9868b9' }, h("div", { key: '30915cb7a92b2f45d0ee3dc6b7af1040d0765b93', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '286a7f9a8a88054c6b330ccd49527495157001e8' }, h("span", { key: '9b94d79b0f8882da55b09cd3edede48ca1bac26d', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '0221127e6feedb0c4f2dc8fefd9f00a08e72e711', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: 'c7afbe0db6e602ff7b7c59c149a2abb2dca39168', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'a02b165844fc9685c158e8115fb90c48ae6e87f3' }, h("div", { key: 'c6fd789ad9d5a7e2ba1af8d1179c96c50806e10d', id: "caption" }, this.caption))), h("div", { key: '7386f5e1d6f6a1ec1e3f81b4f302fb3026e674fa', role: "rowgroup" }, h("div", { key: '4a9c0fb92683cd8530acdb9bc912e9ca080ce5b3', class: "table__header", role: "row" }, h("slot", { key: '23fe3ffe2bf0f78684846c4fd3ecfed994a871b4', name: "columns", onSlotchange: this.onSlotChange }))), h("div", { key: '972dcf9e869a187edc976a30bc513efcd3e6a549', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: '5610098e443132f5a745c8e345d4e3a03c917190', name: "rows", onSlotchange: this.onSlotChange }), this.empty && (h("div", { key: 'c85753cf3ef5cb3ec2e62b623372d248eb485495', class: "table__empty-row", role: "row" }, h("div", { key: '533e9cfebbc9bb4336d1c2c3bba54ccf8ebe1765', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("swirl-text", { key: 'e9a348686f3c80a33501e9bb85f8c92c068e7fe5', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "enableDragDrop": ["handleEnableDragDropChange"]
+    }; }
     static get style() { return SwirlTableStyle0; }
-}, [1, "swirl-table", {
+}, [6, "swirl-table", {
         "caption": [1],
+        "dragDropHandle": [1, "drag-drop-handle"],
+        "dragDropInstructions": [16],
         "emptyStateLabel": [1, "empty-state-label"],
+        "enableDragDrop": [4, "enable-drag-drop"],
         "label": [1],
         "empty": [32],
+        "liveRegionText": [32],
         "scrollable": [32],
         "scrolled": [32],
         "scrolledToEnd": [32],
         "rerender": [64]
-    }, [[9, "resize", "onWindowResize"]]]);
+    }, [[9, "resize", "onWindowResize"]], {
+        "enableDragDrop": ["handleEnableDragDropChange"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/swirl-tabs.js

@@ -86,7 +86,7 @@ const SwirlTabs$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTabs extends HTM
         }));
     }
     render() {
-        return (h(Host, { key: '8f776091b83d55785e936df66c991738f1f98102' }, h("div", { key: '94e213f60729e970661621a683b791c44a67a90e', class: "tabs" }, h("swirl-tab-bar", { key: 'd680d7a11f6a0a89edcd6f0a63cf2d79e64d50f0', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'edc54b9b40475e1930eb98c08774a5e7d721e31e' })));
+        return (h(Host, { key: '341704212596c244b030469cbc133c845f43b17a' }, h("div", { key: 'bea41635c44fa9a7090b39511353d4fe9e38c23f', class: "tabs" }, h("swirl-tab-bar", { key: '1aa5dcdaff37a0934c887dac63bcca6f38da89c3', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: '29e72997a00d6630e6abbaa279ea282f890a03c7' })));
     }
     get el() { return this; }
     static get style() { return SwirlTabsStyle0; }

package/dist/components/swirl-tag2.js

@@ -45,7 +45,7 @@ const SwirlTag = /*@__PURE__*/ proxyCustomElement(class SwirlTag extends HTMLEle
     }
     render() {
         const className = classNames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-        return (h(Host, { key: '294bcbc3d67dd04803c14b5fdcb36d433fbe4e9b' }, h("span", { key: '92833eb63b8c3427bcd8d9f6102dac6a2c6ca5f4', class: className, part: "tag" }, this.icon && (h("span", { key: '04f55468ef43e3afd94a8509925833ad72279332', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '303fb2673aca81f26135fb0b865132133430f162', class: "tag__label" }, this.label), this.removable && (h("button", { key: '21218a740dcab88532eaf8ad66f0b78d62c2975a', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '2148da06e1b0ac4b0b89bc0b686c3ada439484fc', size: 16 }))))));
+        return (h(Host, { key: 'aa043cbe2948f3ee3a96e411db399680f64efb36' }, h("span", { key: 'a33611f3c493208c00d6bf3d11118b8535251759', class: className, part: "tag" }, this.icon && (h("span", { key: '15936268e6597d6c46d10deec46dc3dacc24d2ec', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'c13b0e05353eda1762f1321c7ca5c8fa6149e045', class: "tag__label" }, this.label), this.removable && (h("button", { key: '93aab4e6b46d9bc21b2764e48575b14360c8a3de', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: 'bff1d55e2e453edb9f107e7504a9d46a4acbbe68', size: 16 }))))));
     }
     get el() { return this; }
     static get style() { return SwirlTagStyle0; }

package/dist/components/swirl-text2.js

@@ -985,7 +985,7 @@ const SwirlText = /*@__PURE__*/ proxyCustomElement(class SwirlText extends HTMLE
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: '58852d3eda21365916053627efdfd755cf1a3512' }, h(Tag, { key: 'c88165cea60cb0d540f1636262a449818c8127a2', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '267baa6125ef490f3536adc3d51f16e9782ef94a' }))));
+        return (h(Host, { key: '713388ef1ff5eb7d6114a53cd1145169079edf95' }, h(Tag, { key: '4b14c27894c47122d5ebdb16bea0dc8023693b8d', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '8057eff74c66a986a47c9978fce2f83ca4272112' }))));
     }
     get el() { return this; }
     static get style() { return SwirlTextStyle0; }

package/dist/components/swirl-theme-provider.js

@@ -153,7 +153,7 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: '0f1694a7bf967fcbffdd7e915ec4aa4a8d2f93cf' }, h("slot", { key: '7c3c75d2927e01783040f473ba41f3831164bfa8' })));
+        return (h(Host, { key: 'e292aaf46693437e24ce6f2a331e43ac486dfb6d' }, h("slot", { key: '5d64cc274bfcfcb78cd379730f3361ebb56c4d9f' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

package/dist/components/swirl-thumbnail2.js

@@ -43,7 +43,7 @@ const SwirlThumbnail = /*@__PURE__*/ proxyCustomElement(class SwirlThumbnail ext
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: 'fb5316d102b517a33257a8456a5e0f4fb7c219d6' }, h("span", { key: '845311ca4c110616d57a3c99d8290815d7461ba5', class: className, role: "group" }, h(ImageWrapper, { key: '35936359bf6e1024961fda5fbe974e708b281acf', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: '8b9cfa2921dd9bdb496d2938958ec052e2e789ba', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '7dda168aa81be0d53b6c636446edfda1e17e3630', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '58c625ac6e5d85415e4b197ff566288822ee5def', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '8df79f187e145410c5904f65f3f7ea14fbfcdd42', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'aef0913b9bdfa832860c7cee29e8f8e9f4adbab1' }, h("swirl-button", { key: 'b823976b2859858a18f858be7e2a7079a02e7d6d', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '735de39cbaeb9a6c2ed2cdd1e8501c4fdb8decd9' }, h("swirl-button", { key: '42b9c83a091d612c395f2df20f21d7ada257d8cc', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '76b387f8c129030a5b98e92c9e7e9e1910a54108', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: 'ed7e221526885fbe46f7f1f43a77317c367bb9df' }, h("span", { key: '5b6e7848372d2f6d9a2f79fb3a495b62ef8d6e8e', class: className, role: "group" }, h(ImageWrapper, { key: 'f83de51cd26c0b94e92cbb8aba57c6a5d90911ca', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'b5f76f22619560d332bf55d5b9f63a100d9dfb73', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '816f07bbe77c5f8893c537ee4fbe96fe57dce664', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '4ea95e65720fc2823955f25281b633c9a4e42c56', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '5076f6cfb2d5681546e0c6b79e3c9e3793396953', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'e40db4efd0b497170dc5b51806d7c6d330914400' }, h("swirl-button", { key: '61613f92840a2084ce05a8457a1f2d0c4f9a99bb', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: 'dde95dd38c51b0d610281263bb215aac55fa59ab' }, h("swirl-button", { key: '9b2d1d57f67d06762d9321a0cf88e28b9aa34fdf', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: this.size === "xl", variant: "on-image" }))))), showTimestamp && (h("span", { key: '461df26c806b91e0e518ec370ac9b7474f57c99d', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get style() { return SwirlThumbnailStyle0; }
 }, [1, "swirl-thumbnail", {

package/dist/components/swirl-time-input.js

@@ -125,7 +125,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
         const className = classNames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '2c4924715b04c0e77299b48a29fe7ec044229884' }, h("div", { key: 'b8bceee82f8ee07a206515e8f3bf3ba6c7fd6320', class: className }, h("input", { key: 'd06d11faf603e2c8526ab780ac64bbe10b61d562', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: 'b84dd53cb89b2532904f0978c951dcab01996d33', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '0c6df7dcd4388bfd2b06c6e70e2a30e36474ea3a', size: this.iconSize })))));
+        return (h(Host, { key: '11575c7c43abed50d92714f74e70997ba3513d73' }, h("div", { key: '22b1e8c6fb208fdb04d0564b62aeee6149bfef0d', class: className }, h("input", { key: '6142af4dcf4a7f9cfb83a08f63fa200e29ed8641', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: '2d6b3392c86d2c324b413f3b5d47c9b07bdc8cce', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'f6f663c6628b6268757e2675890bd66afa2980ce', size: this.iconSize })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-toast-provider.js

@@ -56,7 +56,7 @@ const SwirlToastProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToastPr
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: '3650e2962ff80074ed761a02c2181aa199b113e7', role: "status" }, h("swirl-stack", { key: 'a7d56803f722b22f3a58d4a9685d467895e8a65b', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '6b3eb6381417fc57320494b85675634ec8cbd28e', role: "status" }, h("swirl-stack", { key: '26b7c2f18fefc092f0822a995f1066ef8c8fc6ef', spacing: "12" }, this.toasts.map((toast) => {
             const props = { ...toast, content: undefined };
             return (h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
         }))));

package/dist/components/swirl-toast2.js

@@ -62,7 +62,7 @@ const SwirlToast = /*@__PURE__*/ proxyCustomElement(class SwirlToast extends HTM
     }
     render() {
         const className = classNames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: 'ff494adb183bfd3b0cf64f854370f65d9025688d' }, h("div", { key: 'ec42812f4e085d3853d529c5155847d3166d7235', class: className }, this.icon && (h("span", { key: '9565980b265dfb58f2d3f4625642c4b42b286bb0', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '20a9d20e6a1250d8584768db191033b7dca0faeb', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '59a95eece747a0a434c6730c84ca8138b7036b5c' })), h("button", { key: '413e402fb6504c7791d68e21b2dd333a79fb4e2e', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '76fb12bf16bdd0f7dfb1d51becf2774e438921a3', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '676e4706190a84cee6b6b6b1800e8788fc1ba828' }, h("div", { key: '9cc47f4d3c482c091b95d43b497dd90e12e02528', class: className }, this.icon && (h("span", { key: 'ad828f1c327c8ce8628f68ccf7364ee345dc974f', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '7cc6eebcf936e40ebf1bd1f661b595a96dd29d72', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'df2debd57ed2aa87b529aa81fda26bd1fc02a721' })), h("button", { key: '1d1c2938862a572253611bf226265f3cc3e8ac71', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: 'a1ea242f9764316d018c37af9c2c55cc0a11a6a0', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get watchers() { return {
         "duration": ["watchDuration"]

package/dist/components/swirl-toggle-button.js

@@ -20,7 +20,7 @@ const SwirlToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleBu
         const classNames$1 = classNames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: 'f1fd00b70d49441eed96d0c3cd3b513abc2e2942', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: '62b776441bc1175ff19ceaeebd19bb7ea9818b51', class: "button__label" }, this.label)));
+        return (h("button", { key: '60ec065056c43a35a655d5a659230feaa2dfbe7c', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: '90282ff1de8a2bdb023c32f3e41c79c2d763bbaf', class: "button__label" }, this.label)));
     }
     static get style() { return SwirlToggleButtonStyle0; }
 }, [1, "swirl-toggle-button", {

package/dist/components/swirl-toggle-group.js

@@ -60,7 +60,7 @@ const SwirlToggleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleGro
         });
     }
     render() {
-        return (h("swirl-stack", { key: 'dd91f7ccecce01bf2bd29a155b888b1c7ff0325e', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'b22ba319fb73e5c448e513156f64f817766fd055', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '38ba2ae6fd183ef0b1f45af3aa09dc13d9a0fc7e', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '333d7b64beda4587448e92a7dc70e9ff7e7dbd40', onSlotchange: this.onSlotChange })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-toolbar.js

@@ -74,7 +74,7 @@ const SwirlToolbar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToolbar exten
         });
     }
     render() {
-        return (h(Host, { key: '0bd307a0ad1039736f25124308ad98dc4fa03d18' }, h("swirl-stack", { key: '626904a735a98982c9f84aa1e27e1e4b7cd78606', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: 'c4f06b12016aa2589d470ca1dcf4f53a3ed2c099' }))));
+        return (h(Host, { key: '5416d10668ae2e88c6ea3501184dffe87779b9f5' }, h("swirl-stack", { key: '02e4d2a3d41b63d50fa85cbab86ff0a11bfb02ee', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8", wrap: true }, h("slot", { key: '46c598bd3a3b716f28c897669396bd276de3a2dd' }))));
     }
     get el() { return this; }
     static get style() { return SwirlToolbarStyle0; }

package/dist/components/swirl-tooltip2.js

@@ -117,7 +117,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '529375924a131657990ae49ca1577e384d7fb757', onKeydown: this.onKeydown }, h("span", { key: '6738c27b573fd2b6b9ddf090454a67fe1f28a7fa', class: className }, h("span", { key: '4152986331edada0253c5eee675c2841ddee4f21', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '15e1427b464e34bd69aa29527d99294e56e2a432' })), h("span", { key: '1632c52e95fd3b944ba6377beeab511deb1e995d', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: 'bb0876790cd15f687658d29771ceb91b8dd88001', onKeydown: this.onKeydown }, h("span", { key: '9da9846ede5394a165faa1ded155f88f9760a947', class: className }, h("span", { key: '327bbb9753c47e08c0909f2df05aa4d86b5a4022', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '5b5a39b6507808a3926b613af1612b19d64585ad' })), h("span", { key: '81122c462ef32fb61185efe4bd796eec600eb341', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -125,7 +125,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: 'f25541f0a71832bc92bd90cadabb38e22c5e8f1a', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'e7e07ec6b2dbebe5a713e05d9c608a91f8128c80', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '5772550951013f59e059277ba958efc6380f8f73', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '5bdfba1be1a42825041510626995a68726a6cec2', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '98b85837ac1ab5e8809bc264e67eb6b058837405', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'd6486b3b8b03567eadc72b514c2fa874040c1e6c', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

package/dist/components/swirl-tree-navigation-item.js

@@ -100,12 +100,12 @@ const SwirlTreeNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTr
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: 'f18b67c58e0aa8fac5291b8c0a6214852021cc6c', role: "none" }, h("li", { key: '7aa01185db544c5a5d9f97383c75dde04a22dc18', class: {
+        return (h(Host, { key: '91d0825352336d88b1c20738c08f93833957b615', role: "none" }, h("li", { key: '44b1b57d68086aed645921d86ec588dd10a93345', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '817727ed7c788a5faa868fb25effdc3518167228', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: '4a4a71f00bc9a9825a51d39a0dc4dacd3a099400', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '4b887aef2710b7d99ca08879cec167c5bf0d1811', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '0c2416f44caf82a332c79f70856f1b1f7aab93a0', class: "tree-navigation-item__label" }, h("span", { key: '99283c67764645d4eae695c7db89c9526f3cd108', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '0e97d7a64bfb73b2167d6778186cbf8db2981136', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '7c8e76613a0f2534c5f72315cd2266551f96f233', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '9a1783de80521b08918cf06081846b533b4052d6', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '5486be6428722d1b6b28f920f0bd17311c71ab99', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'ebf61cb2e6ec23082a58282e0028ce2dd68097e0', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
+            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '645f8b69e22a756704b64cfeb1147fad52ae21ea', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: 'ee3be24c31d978b237f3365eb9db5ebaa9dcd0bd', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '1a6ba5fa0d42d36b5cef10ae4b5c4a674c54e0a9', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'fb45c421326713a33e4aea6235da052b7faa7267', class: "tree-navigation-item__label" }, h("span", { key: 'f1d44d360ffdd000901d94d7ccf3a339b20ff8a1', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '60092336a4f8258de8dc255d4ff3561bcb421f88', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'c226108f24408a27febff0f21508fbc3053d6dfd', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'f25c601b3bb4a953cb2c50a860fc8c82e34aa4c9', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'f546a936e52e4502d908d35087e10fc1bc042959', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '065e64f7762c564c0210395aabb9ba3521e5b4cd', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, h("slot", { key: '519cdbd7d36202ad4ead9fd87900a70a6f0c7d11' }))))));
+            } }, h("slot", { key: '0ac59a0c165c0e515af930c47da8666f1eac14dc' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-tree-navigation.js

@@ -11,7 +11,7 @@ const SwirlTreeNavigation$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeNa
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '359b8985019aacfff300043c67f0553a6ed87471' }, h("ul", { key: 'f6bdb96a9817f370ab2b926faf8db231534d22b3', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '7fe3965d7916fcf181f851e55d303a413923cc40' }))));
+        return (h(Host, { key: '6170dc1783135092d40e783ee2c8377035057fbd' }, h("ul", { key: 'dc04e572d7a61c96acf21aa3d026b12373d089a9', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '04fb3e839d94ef7bfa13cb0b624909a567c2ba79' }))));
     }
     static get style() { return SwirlTreeNavigationStyle0; }
 }, [1, "swirl-tree-navigation", {

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

@@ -335,13 +335,13 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: '11f945581b2760fddabaa767359c5a2902b25cb5', id: this.itemId, role: "none" }, h("li", { key: '9124bab079d33cd3ee541e50ec3278b3bbd2f2b1', class: className, role: "none" }, h("a", { key: '189f49bd8978bb4effabedd63af16cfb8a11fc5e', "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: '57a4537fbb33910a26763c24181e00f024a07293', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '7567a5e0b97d58fdd90e4b57bc97f787d50d1603', size: 20 }))), this.expandable && (h("span", { key: '08fb4422ade1e4a47337fc2d85c57d8fe8315478', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '2a79ab7004596204a9b2f29d5f0ca90776df7633' }, 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: '935788f84153764f54d6ca441b66be7172912dc4' }, h("span", { key: 'c10a6b7e86db978bd096e0d57615c2fbaa250284', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '59d6dc11da28dbd760408ee8dcce3cbd35224ef3', class: "tree-view-item__label" }, this.label), h("span", { key: 'df26c2bf6d92eb0ccc057c0fd486ca9fb765fcc5', class: "tree-view-item__tags" }, h("slot", { key: 'e818a56e60b8a270846d22e4e719724f04cd5c49', name: "tags" }))), h("ul", { key: '2bab49ba6fe881e5e23f987e9969ec8793f3361f', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+        return (h(Host, { key: '518eb93c8a043e5b7ef286997360245fbb76fe77', id: this.itemId, role: "none" }, h("li", { key: 'c794913be3167e456da5f356c5eb47508f9bda32', class: className, role: "none" }, h("a", { key: '2e2bfc6e89f7abb7087aa05402dbe47540557c6e', "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: '3d4ef51a14292ac38e96d10d5457fdb710654a9e', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '0e3e20697a9c650e8a5b093160ba276f95989fd5', size: 20 }))), this.expandable && (h("span", { key: '3e67ed430d7dc9f5bfad03ac38639360041d1a23', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'fdb782aee9709db0556de1f26360e82f297dce47' }, 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: '4a67bcabd58558df4c2d8b92ab63b819aec33fb0' }, h("span", { key: '62d3082df1ce3bd2fd10b431fedfbd8941ee3348', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '3b7e5656d638adb381cf33d4df02f625bc8e3c25', class: "tree-view-item__label" }, this.label), h("span", { key: '955fa6cf146cb52081f7f2d063e3a1297c65844c', class: "tree-view-item__tags" }, h("slot", { key: '064eaaf4c85aa786c2a05f8ae2cc75b7de698f01', name: "tags" }))), h("ul", { key: '024aad33ecffc93fda3fcb46322fdf2c72f82583', "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
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: '94bc6c05acf1fcce468491f17c61bb0f8a8a01bd' })))));
+            } }, h("slot", { key: '814f3a933e378e6bdc35f8a29f73c0153a1e0c51' })))));
     }
     get el() { return this; }
     static get style() { return SwirlTreeViewItemStyle0; }