@getflip/swirl-components 0.254.1 → 0.256.0

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

@@ -6,6 +6,7 @@ export class SwirlTag {
             this.remove?.emit(event);
         };
         this.icon = undefined;
+        this.iconPosition = "start";
         this.intent = "default";
         this.label = undefined;
         this.removable = undefined;
@@ -31,8 +32,8 @@ export class SwirlTag {
         }
     }
     render() {
-        const className = classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
-        return (h(Host, { key: 'e3c0b221de0a1f8cd317d14bad52e9f939e51d4d' }, h("span", { key: '95aceb1610dbf977510a16f8b8065aeda2645717', class: className, part: "tag" }, this.icon && (h("span", { key: 'be04cfcb7c44b5356c89fb27596a2ea6ebb85fe1', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '0653116f331776225b83858fcd8b9c14299c57e2', class: "tag__label" }, this.label), this.removable && (h("button", { key: '58d497c1479fac5f69c9f5d16317d60d6b4783b9', "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: '2563d048adf0d679aa321278934532ecf0b51744', size: 16 }))))));
+        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: '204d1c3fe0bbcef05b508655761a23a47a58786b' }, h("span", { key: '8c6d6db0bcfc9af1a4ccc245168493903ecce558', class: className, part: "tag" }, this.icon && (h("span", { key: 'a34e88b761151981de60cdbeed367ed9c712d8b5', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '5922d4c417c94fc6937bae98ae2c2ee2d3900c9b', class: "tag__label" }, this.label), this.removable && (h("button", { key: '4eda50b6b734c5ecba333b65089bdd53894d9e4e', "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: 'ccdb13c568d1ae1bb434e23668c988a4ba15fd08', size: 16 }))))));
     }
     static get is() { return "swirl-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +66,30 @@ export class SwirlTag {
                 "attribute": "icon",
                 "reflect": false
             },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTagIconPosition",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "SwirlTagIconPosition": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tag/swirl-tag.tsx",
+                            "id": "src/components/swirl-tag/swirl-tag.tsx::SwirlTagIconPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "\"start\""
+            },
             "intent": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/swirl-tag/swirl-tag.spec.js

@@ -9,7 +9,7 @@ describe("swirl-tag", () => {
         expect(page.root).toEqualHtml(`
       <swirl-tag intent="info" label="Label">
         <mock:shadow-root>
-          <span class="tag tag--intent-info tag--size-m tag--variant-default" part="tag">
+          <span class="tag tag--icon-position-start tag--intent-info tag--size-m tag--variant-default" part="tag">
             <span class="tag__label">
               Label
             </span>
@@ -26,7 +26,7 @@ describe("swirl-tag", () => {
         expect(page.root).toEqualHtml(`
       <swirl-tag icon="<swirl-icon-mail></swirl-icon-mail>" intent="info" label="Label">
         <mock:shadow-root>
-          <span class="tag tag--intent-info tag--size-m tag--variant-default" part="tag">
+          <span class="tag tag--icon-position-start tag--intent-info tag--size-m tag--variant-default" part="tag">
             <span class="tag__icon">
               <swirl-icon-mail size="16"></swirl-icon-mail>
             </span>
@@ -46,7 +46,7 @@ describe("swirl-tag", () => {
         expect(page.root).toEqualHtml(`
       <swirl-tag icon="<swirl-icon-mail></swirl-icon-mail>" intent="info" label="Label" variant="strong" bordered="true">
         <mock:shadow-root>
-          <span class="tag tag--intent-info tag--size-m tag--variant-outline" part="tag">
+          <span class="tag tag--icon-position-start tag--intent-info tag--size-m tag--variant-outline" part="tag">
             <span class="tag__icon">
               <swirl-icon-mail size="16"></swirl-icon-mail>
             </span>

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

@@ -54,7 +54,7 @@ export class SwirlText {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: '1c70325988126cc54a9c8942ba337f2615caa5f9' }, h(Tag, { key: '719cde01bef1a2baae91eaa7d1f25e069706cb45', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'bee24f184bdaf8da03c7b3c3a09adbbc000e55df' }))));
+        return (h(Host, { key: '67b3f84f719c449587fdee7cec69b658137b7318' }, h(Tag, { key: 'ed03d274cde2bba9af7bf6cc0d65e66592392c0d', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: 'c5ebf1c1a2ea1619100a8dd05fffc3fbbcf80071' }))));
     }
     static get is() { return "swirl-text"; }
     static get encapsulation() { return "scoped"; }

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

@@ -145,7 +145,7 @@ export class SwirlThemeProvider {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: 'e200ab2b068a93d90f991b118078f4ff6a17ee7f' }, h("slot", { key: 'eca8ad2eebec5d60da9842723215bba6c756eab5' })));
+        return (h(Host, { key: '1266378fdaa0421b4a28d5c133f6990e4dd842c7' }, h("slot", { key: 'ebf5af293a781e4b405f4dd3c6a8c0f0399e0d41' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -29,7 +29,7 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: 'dc17abfe75a0e31a41d47608fa9cc8ac8e5f338a' }, h("span", { key: 'd1c1035b270571bd43f3073fe790654dbf71dc6e', class: className, role: "group" }, h(ImageWrapper, { key: 'b8c87d971c55a14be54e41b2714b2b9275df20fe', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'b64b49d3cd04481531dfa72523d334aa4e79cc4d', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '34e85a96dfeebacc9e1a0ea15d4e37fa9e2c8ee4', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '1e4df833546a26b189eeca4ea5712f2e74614be3', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: 'fd703755dd6ebb5865ab7210797227869cc9f146', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '24d448fa23eb0a2844560b101afad478ff51a5e0' }, h("swirl-button", { key: '7b495487cbb2a9ad7cad96f2bc4224696fde7d3b', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '67d9c76c0aa10c948fbac981be4d8afcf1820d85' }, h("swirl-button", { key: 'd509ead6c53d1b1b28853ac3a885130090588f42', 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: '6b67c1c8f58b91edf402255d7db5f36a615905ae', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: '5266f9b7d117f537630c24b187a7e58df5516da4' }, h("span", { key: 'f6f0f8cec5e0e452a3f8d38a98ceccaa437a6408', class: className, role: "group" }, h(ImageWrapper, { key: '7a51e9d06227fc5ca9126133b6d090ef684b9089', class: "thumbnail__image-wrapper", onClick: this.thumbnailClick.emit, type: this.interactive ? "button" : undefined }, h("img", { key: 'd8479f1665e20da32b9ede11be38d434183e8b96', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '1a78e24f0ce8fbaede2c1fe0014dc0382d78dd78', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '1d12b6eb914a79bbeecebf04c3f0459ccc162193', label: this.progressLabel, value: this.progress }))), showButtonGroup && (h("swirl-button-group", { key: '7243a2f19d81ab1a9a0573759d1fbdbc7d249e53', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '1f265bb2a97290f28f3ae625c19b5350719126bd' }, h("swirl-button", { key: '007ee87ae5075e7f6351f3f53a9d7eb688cc9297', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, pill: this.size === "xl", variant: "on-image" }))), showRemoveButton && (h("span", { key: '95000396598b8aa488c1828f17ab4fc9573b4a05' }, h("swirl-button", { key: 'a1bdfb1ce72748b5ed9eb5198c23c77b145fd367', 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: 'bcae073db9a30ff6ed4eb52420329039927369ee', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get is() { return "swirl-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,7 +117,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '825c7aefe5770d5d8e28a35531c10e448bf08bb1' }, h("div", { key: '7c1ac3c752e2778b380ca513a90e8e2484e29b7d', class: className }, h("input", { key: 'c9ccc6d7afee9c7b5875ff8eb0809d00cf8ea16c', "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: '961180beb8d133377e6fec941b879348b3268b5d', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'fa023c4f00d534935904b471990d48524a3bc961', size: this.iconSize })))));
+        return (h(Host, { key: '6326c3a42f6ff4a21778fea7933efd21e7f586ad' }, h("div", { key: 'aad488c92bd2232bcb98453ab80182f5509a26cd', class: className }, h("input", { key: 'dfd55229a490341a911524f9c68c62a999653c58', "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: 'c9dd879952e1e1cf2305980297e890ae57b7185d', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'ce749a3f6cb76f482a1fc3a18f10f9b7a9c4a0fe', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -53,7 +53,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '1da46b96aef7cec3e3b3711964a2d8083f45131e' }, h("div", { key: '22e1fb9c7bf3314e3aba587f884783baebfd07dd', class: className }, this.icon && (h("span", { key: 'ee45314f8a40d8a72500704c2f2b2f8b895f8f9d', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'a8e12cf94d5f78dc75fa7b3087563020733e75cf', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '93eba2783424f44a5fe4d27ba7ea8d7b177e325a' })), h("button", { key: '794ab47b83f98e9ed36280539ea17a863725daee', "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: 'd3f3ea7b0faf733ac7a0acd01bef775fcd086f56', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: 'd1a206cc1408bd32f79b2feb9dfd26dbcfe1789a' }, h("div", { key: 'ae3d5d0cb7670db77bff1dabaa44c25f65aea10a', class: className }, this.icon && (h("span", { key: '7cf231b57090e4bdd862662e4e847ba22c9117ad', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '87ead7ae92ad5c54455942c47b81a436dedeba63', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '095331448ed5216d25a6afb5509b31ac64a6796e' })), h("button", { key: 'cca7dd9b24296c10cc17139fe687e26598303d54', "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: 'ce360cc5829a71d521cceebb6a8b0418f3692302', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,7 +49,7 @@ export class SwirlToastProvider {
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: '4ca07c887b78a25c8cfb65f62de4597b1311151d', role: "status" }, h("swirl-stack", { key: '072c718f837a9e2b07b42257171ba04a1ee6ac24', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '291cbaa4de84f5642e2e81f2a1dc5725fc1f760f', role: "status" }, h("swirl-stack", { key: '3a0ddb12cdfa15889ae18097657dd448f77e5348', 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/collection/components/swirl-toggle-button/swirl-toggle-button.js

@@ -13,7 +13,7 @@ export class SwirlToggleButton {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: 'e3fd405e07b5a94eceb77e42681cbbdd563d1946', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'bff2993c2631e575332a5107d39cd7355f441b12', class: "button__label" }, this.label)));
+        return (h("button", { key: '3861fde82eabc6dfbd4ea9d329ea36010c48e9a0', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'ae3b3b0635ca955084ded5360f419bbc8e00af56', class: "button__label" }, this.label)));
     }
     static get is() { return "swirl-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class SwirlToggleGroup {
         });
     }
     render() {
-        return (h("swirl-stack", { key: '5170589489c60e79ea7e8ae00f7c3e3df002a628', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '13c3cc274a5844a430640a8ea2b268dcc9650495', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '8bffb40c1f341f5ba672ac8fd3335fde1259b6fd', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'f85e75cef254a1dd0522ef0cd9edb89603b965a4', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "swirl-toggle-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: '4088eb0256fc47727edce81af5829f4ebbbbeed1' }, h("swirl-stack", { key: 'b18ad85af85caf9418e498602d387d2bb888e8e6', 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: 'f644ae3de4b776e4822240dc033779a671c4a684' }))));
+        return (h(Host, { key: '72977493f6b33b2b1d053027fa0f4ab363090973' }, h("swirl-stack", { key: 'f7d0790b83c039a0550e3e355111b1e96445303b', 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: '08334df6038b818ca78243beaec98d85f97a7e04' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -110,7 +110,7 @@ export class SwirlTooltip {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: 'f3706b57f74c0223d9a0de457ae39737a23a4038', onKeydown: this.onKeydown }, h("span", { key: '27535b77f5b2e1e4adf25e2bce512dd019912e25', class: className }, h("span", { key: '5440bc1e39796bdec1dd1836fbc4e0483ec6a4a6', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '6e30483c1a9ca4d1118c0f785d56a5fef246d7df' })), h("span", { key: 'f7c45dfe92b9ad8192538f7b37cd8f117ac687f8', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '7a14595f01dd2cc707ef5d540664f0cca2766e3f', onKeydown: this.onKeydown }, h("span", { key: 'cd4f0f8f6ecf8db5aa096822f69abf8859ca4bcb', class: className }, h("span", { key: '55da1452153d3bdbf2dec9a597cae31343b803d8', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '62c1e9c1a88102d18dfc6ca4686102b419ff79c4' })), h("span", { key: '6243161edb779b3bb9d885416f4688382ceeac03', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -118,7 +118,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: 'e8579729115384e96187814ad455d7a68fdcbe4f', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '2e490d94936c5dfb4fc983d084d7fa629ca51f9a', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '878b49d11caef03cbf0bcdd78e40d492bfc93d03', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '3fced37e021251c5d868641536ebf9ec9470b480', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '77f9e4ff72dfe1c8427a7eaae83632a16fe5e38d', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '555e04a2f087b29d380fac6d6ac85f8aa553758c', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

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);
 }