@getflip/swirl-components 0.255.0 → 0.256.0

package/dist/collection/components/swirl-tree-navigation/swirl-tree-navigation.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tree-navigation {
+  margin: 0;
+  padding: 0;
+}

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

@@ -0,0 +1,42 @@
+import { h, Host } from "@stencil/core";
+export class SwirlTreeNavigation {
+    constructor() {
+        this.label = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'f835261b423e4be4734248f87d4d85beb0d1e6b1' }, h("ul", { key: 'c877a5d4ba5ef4038d600ebd997bc6594a6d5672', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '3ca7889623881b4b3f7e38050435d0f2c82d8782' }))));
+    }
+    static get is() { return "swirl-tree-navigation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swirl-tree-navigation.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swirl-tree-navigation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,19 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlTreeNavigation } from "./swirl-tree-navigation";
+describe("swirl-tree-navigation", () => {
+    it("renders", async () => {
+        const page = await newSpecPage({
+            components: [SwirlTreeNavigation],
+            html: `<swirl-tree-navigation label="navigation"></swirl-tree-navigation>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-tree-navigation label="navigation">
+        <mock:shadow-root>
+          <ul aria-label="navigation" class="tree-navigation" role="tree">
+           <slot></slot>
+          </ul>
+        </mock:shadow-root>
+      </swirl-tree-navigation>
+    `);
+    });
+});

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

@@ -0,0 +1,32 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-tree-navigation.mdx";
+export default {
+    component: "swirl-tree-navigation",
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            page: Docs,
+        },
+    },
+    title: "Admin/SwirlTreeNavigation",
+};
+const Template = (args) => {
+    const element = generateStoryElement("swirl-tree-navigation", args);
+    element.innerHTML = `
+    <swirl-tree-navigation-item label="Home" icon='home' href='#home'></swirl-tree-navigation-item>
+    <swirl-tree-navigation-item label="User Management" icon='person'>
+      <swirl-tree-navigation-item label="Users" active='true' href='#users'></swirl-tree-navigation-item>
+      <swirl-tree-navigation-item label="User groups" href='#user-groups'></swirl-tree-navigation-item>
+    </swirl-tree-navigation-item>
+    <swirl-tree-navigation-item label="Settings" icon='settings'>
+      <swirl-tree-navigation-item label="Languages" href='#users'></swirl-tree-navigation-item>
+      <swirl-tree-navigation-item label="General" href='#user-groups'></swirl-tree-navigation-item>
+    </swirl-tree-navigation-item>
+    <swirl-tree-navigation-item href='https://getflip.com' target='__blank' label="File" icon='file' external='true'></swirl-tree-navigation-item>
+  `;
+    return element;
+};
+export const SwirlTreeNavigation = Template.bind({});
+SwirlTreeNavigation.args = {
+    label: "Label",
+};

package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.css

@@ -3,74 +3,128 @@
   width: 100%;
 }
 
-  :host * {
-    box-sizing: border-box;
-  }
+:host * {
+  box-sizing: border-box;
+}
 
+/* Base item styles */
 .tree-navigation-item {
-  display: inline-flex;
   width: 100%;
-  height: 2.5rem;
-  padding-right: var(--s-space-16);
-  padding-left: calc(var(--s-space-16) + 1.5rem + var(--s-space-8));
-  flex-shrink: 0;
-  justify-content: flex-start;
+  list-style: none;
+  border-radius: var(--s-border-radius-sm);
+}
+
+/* Link styles */
+.tree-navigation-item__link {
+  display: inline-flex;
   align-items: center;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0 var(--s-space-16) 0 var(--tree-nav-item-padding, var(--s-space-8));
+  margin-bottom: var(--s-space-2);
+  gap: calc(var(--s-space-4) - var(--s-space-2));
+  min-width: 0;
+
+  /* Reset button/link styles */
   border: none;
-  color: var(--s-text-default);
   background-color: transparent;
+  color: var(--s-text-default);
+  cursor: pointer;
+  text-decoration: none;
+
+  /* Typography */
   font: inherit;
   font-size: var(--s-font-size-sm);
+  font-weight: var(--tree-nav-item-label-weight, var(--s-font-weight-medium));
   line-height: var(--s-line-height-sm);
-  text-decoration: none;
-  cursor: pointer;
-  gap: calc(var(--s-space-8) - var(--s-space-2));
+
+  /* Border radius */
+  border-radius: var(--s-border-radius-sm);
 }
 
-.tree-navigation-item:hover {
-    background-color: var(--s-surface-hovered);
-  }
+/* Link states */
+.tree-navigation-item__link:hover {
+  background-color: var(--s-background-hovered);
+}
 
-.tree-navigation-item:active {
-    background-color: var(--s-surface-pressed);
-  }
+.tree-navigation-item__link:active {
+  background-color: var(--s-background-pressed);
+}
 
-.tree-navigation-item:focus {
-    outline: none;
-  }
+.tree-navigation-item__link:focus {
+  outline: none;
+}
 
-.tree-navigation-item:focus-visible .tree-navigation-item__label {
-      border-radius: var(--s-border-radius-xs);
-      box-shadow: 0 0 0 0.125rem var(--s-focus-default);
-    }
+.tree-navigation-item__link:focus-visible .tree-navigation-item__label {
+  border-radius: var(--s-border-radius-xs);
+  box-shadow: 0 0 0 0.125rem var(--s-focus-default);
+}
 
-.tree-navigation-item--active {
+/* Active link styles */
+.tree-navigation-item__link--active {
   background-color: var(--s-surface-raised-default);
-  box-shadow: inset 0.25rem 0 0 0 var(--s-border-highlight);
+  color: var(--tree-nav-item-color--active, var(--s-text-highlight));
+  --tree-nav-item-label-weight: var(--s-font-weight-medium);
 }
 
-.tree-navigation-item--active:hover {
+.tree-navigation-item__link--active:hover {
   background-color: var(--s-surface-raised-hovered);
 }
 
-.tree-navigation-item--active:active {
+.tree-navigation-item__link--active:active {
   background-color: var(--s-surface-raised-pressed);
 }
 
-.tree-navigation-item--has-icon {
-  padding-left: var(--s-space-16);
+/* Layout components */
+.tree-navigation-item--expanded {
+  height: 100%;
 }
 
+.tree-navigation-item__content {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+}
+
+/* Icon styles */
 .tree-navigation-item__icon {
   display: inline-flex;
   flex-shrink: 0;
+  padding-right: var(--s-space-8);
 }
 
+.tree-navigation-item__toggle-icon {
+  flex-shrink: 0;
+  max-height: 1rem;
+  color: var(--s-icon-default);
+}
+
+.tree-navigation-item__external-icon {
+  max-height: 1rem;
+  color: var(--s-icon-default);
+}
+
+/* Label styles */
 .tree-navigation-item__label {
   overflow: hidden;
   min-width: 0;
-  padding-right: var(--s-space-2);
-  padding-left: var(--s-space-2);
+  padding: 0 var(--s-space-2);
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: var(--tree-nav-item-color, inherit);
+}
+
+/* Children container */
+.tree-navigation-item__children {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+}
+
+/* Nested items */
+.tree-navigation-item__children > ::slotted(swirl-tree-navigation-item) {
+  --tree-nav-item-padding: 2.25rem;
+  --tree-nav-item-label-weight: var(--s-font-weight-normal);
 }

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

@@ -1,21 +1,84 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlTreeNavigationItem {
     constructor() {
+        this.buttonId = `${this.navigationItemId}-button`;
+        this.childrenId = `${this.navigationItemId}-children`;
+        this.onKeyDown = (event) => {
+            switch (event.key) {
+                case " ":
+                    event.preventDefault();
+                    this.toggleExpanded(event);
+                    break;
+                case "ArrowRight":
+                    event.preventDefault();
+                    if (!this.expanded && this.hasChildren) {
+                        this.expand();
+                    }
+                    break;
+                case "ArrowLeft":
+                    event.preventDefault();
+                    if (this.expanded) {
+                        this.collapse();
+                    }
+                    break;
+            }
+        };
+        this.toggleExpanded = (event) => {
+            if (!this.href) {
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.expanded) {
+                    this.collapse();
+                }
+                else {
+                    this.expand();
+                }
+            }
+        };
         this.active = undefined;
         this.href = undefined;
         this.icon = undefined;
         this.label = undefined;
         this.target = undefined;
+        this.navigationItemId = undefined;
+        this.level = 1;
+        this.expandable = true;
+        this.external = false;
+        this.expanded = false;
+        this.hasChildren = false;
+    }
+    componentWillLoad() {
+        this.checkForChildren();
+    }
+    handleExpandedChange() {
+        this.expansionChange.emit(this.expanded);
+    }
+    checkForChildren() {
+        this.hasChildren = Boolean(this.el.querySelector("swirl-tree-navigation-item"));
+    }
+    async expand() {
+        if (this.expanded || !this.expandable || !this.hasChildren) {
+            return;
+        }
+        this.expanded = true;
+    }
+    async collapse() {
+        if (!this.expanded || !this.expandable || !this.hasChildren) {
+            return;
+        }
+        this.expanded = false;
     }
     render() {
         const isLink = Boolean(this.href);
         const Tag = isLink ? "a" : "button";
-        const className = classnames("tree-navigation-item", {
-            "tree-navigation-item--active": this.active,
-            "tree-navigation-item--has-icon": Boolean(this.icon),
+        const linkClassName = classnames("tree-navigation-item__link", {
+            "tree-navigation-item__link--active": this.active,
+            "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: 'f9cadfd076d14950488b114f4efbab0330a70172' }, h(Tag, { key: 'b78001b5376e0c1f0e4d97965f5fa3d6e316414f', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: '48fceebb6c56be3f2a96a7411f581698bfa4f8b7', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: 'b3de5413ab8b45e98f455fbd1873b1d9c25eb6d5', class: "tree-navigation-item__label" }, this.label))));
+        return (h(Host, { key: 'e3bfad9988e2f3fd9d7b2d92bed466008bddee46', role: "none" }, h("li", { key: 'eb1da2091f8168ca76b5356b5747139e59c73845', class: "tree-navigation-item", role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: 'c630c70f43bd45758d929c14026c9c28941d082e', 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: '0001a3da5777d5ba7d98a862433a3340c523722e', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'c1671f5761c2a6554309da4a22eeac8be12aa0da', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'c21401058cdcd0b8a695f42adfddf867b7295286', class: "tree-navigation-item__label" }, this.label)), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'b2213d840c108846a0f2ba776ee3ff733a75b95f', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, this.expanded ? (h("swirl-icon-expand-more", { size: 16, role: "img", "aria-label": "Collapse" })) : (h("swirl-icon-chevron-right", { size: 16, role: "img", "aria-label": "Expand" })))), this.external && (h("span", { key: '818cb51c0ea3330392f87cc3aa429974bd363d12', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'ef01b1ca0fd70fd0c85ae80ab914ab89b407a56c', size: 16, role: "img", "aria-label": "External link" })))), this.hasChildren && (h("ul", { key: 'c576a994a7434de80b2945798b46118950cb6b1b', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, style: {
+                display: !this.expanded ? "none" : undefined,
+            } }, h("slot", { key: 'cf31e4f6c71cc39028f2aa5d2748fd3798c3c393' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }
@@ -115,8 +178,147 @@ export class SwirlTreeNavigationItem {
                 },
                 "attribute": "target",
                 "reflect": false
+            },
+            "navigationItemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "navigation-item-id",
+                "reflect": false
+            },
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "level",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expandable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "external": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "external",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {},
+            "hasChildren": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expansionChange",
+                "name": "expansionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "expand": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "collapse": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "handleExpandedChange"
+            }];
+    }
 }

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

@@ -7,16 +7,18 @@ describe("swirl-tree-navigation-item", () => {
             html: `<swirl-tree-navigation-item icon="Icon" label="Label"></swirl-tree-navigation-item>`,
         });
         expect(page.root).toMatchInlineSnapshot(`
-      <swirl-tree-navigation-item icon="Icon" label="Label">
+      <swirl-tree-navigation-item icon="Icon" label="Label" role="none">
         <mock:shadow-root>
-          <button class="tree-navigation-item tree-navigation-item--has-icon" type="button">
-            <span class="tree-navigation-item__icon">
-              Icon
-            </span>
-            <span class="tree-navigation-item__label">
-              Label
-            </span>
-          </button>
+          <li aria-level="1" class="tree-navigation-item" role="treeitem">
+            <button class="tree-navigation-item__link tree-navigation-item__link--has-icon" id="undefined-button" type="button">
+              <span class="tree-navigation-item__content">
+                <swirl-icon aria-hidden="true" aria-label="Label icon" class="tree-navigation-item__icon" glyph="Icon" role="img" size="20"></swirl-icon>
+                <span class="tree-navigation-item__label">
+                  Label
+                </span>
+              </span>
+            </button>
+          </li>
         </mock:shadow-root>
       </swirl-tree-navigation-item>
     `);
@@ -26,6 +28,9 @@ describe("swirl-tree-navigation-item", () => {
             components: [SwirlTreeNavigationItem],
             html: `<swirl-tree-navigation-item active="true" label="Label"></swirl-tree-navigation-item>`,
         });
-        expect(page.root.shadowRoot.children[0].classList.contains("tree-navigation-item--active")).toBeTruthy();
+        // Update to check for the new active class on the link element
+        expect(page.root.shadowRoot
+            .querySelector(".tree-navigation-item__link")
+            .classList.contains("tree-navigation-item__link--active")).toBeTruthy();
     });
 });

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

@@ -1,16 +1,6 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-tree-navigation-item.mdx";
 export default {
-    argTypes: {
-        icon: {
-            table: {
-                type: {
-                    detail: "e.g. <swirl-icon-close></swirl-icon-close>",
-                    summary: "swirl-icon-*",
-                },
-            },
-        },
-    },
     component: "swirl-tree-navigation-item",
     tags: ["autodocs"],
     parameters: {
@@ -26,6 +16,6 @@ const Template = (args) => {
 };
 export const SwirlTreeNavigationItem = Template.bind({});
 SwirlTreeNavigationItem.args = {
-    icon: "<swirl-icon-arrow-right-small></swirl-icon-arrow-right-small>",
+    icon: "file",
     label: "Label",
 };

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

@@ -192,7 +192,7 @@ export class SwirlTreeView {
         return nestedSibling ?? undefined;
     }
     render() {
-        return (h(Host, { key: 'f6cd60716528a4bc08ae34b7f7b8bcc468fa87af' }, h("ul", { key: '5353f9e9f359c6b3eeb53107d47cc62ec8820a9e', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: '93f6e2df68fb6c837a185c24c8f8afc53faba4f0', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: 'c4594413feaa68e716f32654673a69145a05458e' }, h("ul", { key: 'c329031d71b7261db724c736feea3a91108cc781', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: 'eb0795310248879201115103569038c179deb980', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,11 +74,11 @@ export class SwirlTreeViewItem {
             "tree-view-item--has-tags": hasTags,
         });
         const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
-        return (h(Host, { key: '0e2af8248203e90bbac24ada811a3227821b215c', id: this.itemId, role: "none" }, h("li", { key: 'ffb0b8a5d984855cea00b7d55c6c5e1a7abae87e', class: className, role: "none" }, h("a", { key: 'c38f8b1c4dfdbdd36c99482901d2a47d976d3586', "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, style: {
+        return (h(Host, { key: 'a586d7bdd3d312b4cdcf38399344bda0526953ff', id: this.itemId, role: "none" }, h("li", { key: 'c1753b03121d4a379eb9987dea274f36b4bcf81f', class: className, role: "none" }, h("a", { key: 'a6d93db38529deafc481a23f04492fb022ef808d', "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, style: {
                 paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-${this.expandable ? "4" : "8"}))`,
-            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: '8f37cc76cc31d7be558ef88afe7a4b7d53573b54', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '13d0b9b334ea8a98788e0b2552506f95977d1910' }, 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: '180aeb1daf320302256c2a810d61c7b11e5cd4d6' }, h("span", { key: '2c210128e558c257376d5d553865795f95a3b762', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '0278c88a4d7d87d0bdf9b4af007840822e83aa65', class: "tree-view-item__label" }, this.label), h("span", { key: '8ba4b1e0b5c82a12fbac7ba4333e2b5aa8ada3d2', class: "tree-view-item__tags" }, h("slot", { key: '1e03e13118893e30f699c2c09c616eef7da980c2', name: "tags" }))), h("ul", { key: 'cc47c02c20d6819618caee618d7489436ec41b72', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
+            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: 'd24b8263d4cebdaf9d2624115e5d013cf4889b83', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '388c9048b2a89c9e81aef48fa0b57dd6d1c2844c' }, 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: '3f777177322b411d8a85dbda1f4cac21620e9ce3' }, h("span", { key: 'e99d17c654386c5dea9026edacad342d2693b16c', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: 'f929b088d3698229063fc62e2a0c5740ff22f1ec', class: "tree-view-item__label" }, this.label), h("span", { key: 'e091236fc48506b89af4f984f2a313540576b272', class: "tree-view-item__tags" }, h("slot", { key: 'ba8fabb6e95172aea1a9a7fdb8853452a712055a', name: "tags" }))), h("ul", { key: '9627a321c8d54d72d34b3239fc03d6b0e46eeffc', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
                 display: !this.expanded || !hasChildren ? "none" : undefined,
-            } }, h("slot", { key: '24784fcc3a80d13b36e9a2a66e7dc3be5943d347' })))));
+            } }, h("slot", { key: '0fb8e1a8190e6c31dd49315e9696da198297af19' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-video-thumbnail/swirl-video-thumbnail.js

@@ -7,7 +7,7 @@ export class SwirlVideoThumbnail {
         this.src = undefined;
     }
     render() {
-        return (h(Host, { key: '5bece81a92879404b264d43716fc8c4c6221fa1e' }, h("button", { key: '208242ba2a4db8bee97a3459483ef230865021c4', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'bb371fe167c3f4a5a2e6a5951226a098375d89d2', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '9099ba6df115019e0e3e6caf68b18678936d2376', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '3285eca5bb93ffd981fa66821b7810c22859e0d8' }, this.durationLabel), this.duration)), h("svg", { key: '127b1082041d0dea0f6d6c3015d1b967ad786156', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1b83f69e25704549ff46c422d31e50ad881fbe1c', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (h(Host, { key: 'd794f1583cc40b334a556369be9fd5cad5f7fb70' }, h("button", { key: 'e11c59d0cd5408f6bb3d3b5b9779c61a5ab757e5', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'd384a49dc48f744b317306267567f7c1078feb6c', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ebdc431ae39edf02c6f23620305d8d5fb0df9192', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'faed768009978536f3773a28d09e854084213a7d' }, this.durationLabel), this.duration)), h("svg", { key: '50561a309689475ac0d5ff1d836d614cd5b46909', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5fcd54d38b882b33876f45a4d4672ee615692722', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
     static get is() { return "swirl-video-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlVisuallyHidden {
     render() {
-        return (h(Host, { key: '50e93b9287d485366e949a82ce4620d57e75898a' }, h("slot", { key: '8f2682a482b5bf224bd4855d61deaedd66866a45' })));
+        return (h(Host, { key: 'bb3e602678ca5fa272b507b6de5d58f3a070c698' }, h("slot", { key: '7438101a2790eb40e97379beed8afafca5324945' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }