@getflip/swirl-components 0.25.0 → 0.26.0

package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-83363034.js');
 const index$1 = require('./index-2ddd0598.js');
 
-const swirlShellNavigationItemCss = ":host{display:inline-flex;width:100%;height:3rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + var(--s-space-2));flex-shrink:0;justify-content:flex-start;align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-surface-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);cursor:pointer;gap:var(--s-space-12)}:host(:hover){background-color:var(--s-surface-hovered)}:host(:active){background-color:var(--s-surface-pressed)}:host(:focus){outline:none}:host(:focus-visible) .shell-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}:host(.shell-navigation-item--active){color:var(--s-text-highlight);background-color:var(--s-surface-raised-default)}:host(.shell-navigation-item--active) ::part(icon){color:var(--s-icon-highlight)}:host(.shell-navigation-item--active:hover){background-color:var(--s-surface-raised-hovered)}:host(.shell-navigation-item--active:active){background-color:var(--s-surface-raised-pressed)}:host *{box-sizing:border-box}.shell-navigation-item__icon{display:inline-flex}.shell-navigation-item__icon ::part(icon){color:var(--s-icon-default)}.shell-navigation-item__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis}";
+const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  container-type: inline-size;\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 3.5rem;\n  padding-right: var(--s-space-12);\n  padding-left: var(--s-space-12);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  color: var(--s-text-default);\n  background-color: var(--s-surface-default);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  cursor: pointer;\n  gap: var(--s-space-12);\n}\n\n:host(:hover) {\n    background-color: var(--s-surface-hovered);\n  }\n\n:host(:active) {\n    background-color: var(--s-surface-pressed);\n    color: var(--s-text-highlight);\n  }\n\n:host(:focus) {\n    outline: none;\n  }\n\n:host(:focus-visible) .shell-navigation-item__label {\n      border-radius: var(--s-border-radius-xs);\n      box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n    }\n\n:host(.shell-navigation-item--active) {\n    color: var(--s-text-highlight);\n    background-color: var(--s-surface-raised-default);\n  }\n\n:host(.shell-navigation-item--active:hover) {\n    background-color: var(--s-surface-raised-hovered);\n  }\n\n:host(.shell-navigation-item--active:active) {\n    background-color: var(--s-surface-raised-pressed);\n    color: var(--s-text-highlight);\n  }\n\n:host * {\n    box-sizing: border-box;\n  }\n\n:host:before {\n  content: \"\";\n  display: none;\n  position: absolute;\n  left: 0;\n  height: 2.5rem;\n  width: 4px;\n  background-color: var(--s-icon-highlight);\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n\n:host(.shell-navigation-item--active):before {\n  display: block;\n}\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 2.5rem;\n  min-height: 2.5rem;\n}\n\n.shell-navigation-item__label {\n  overflow: hidden;\n  min-width: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\n  .shell-navigation-item__badge {\n    position: absolute;\n    bottom: 0;\n    right: var(--s-space-4);\n  }\n}\n\n@container (min-width: 14rem) {\n  .shell-navigation-item__badge {\n    margin-left: auto;\n    padding-right: var(--s-space-4);\n  }\n}\n";
 
 const SwirlShellNavigationItem = class {
   constructor(hostRef) {
@@ -17,25 +17,14 @@ const SwirlShellNavigationItem = class {
       }
     };
     this.active = undefined;
-    this.icon = undefined;
+    this.badgeLabel = undefined;
     this.label = undefined;
   }
-  componentDidLoad() {
-    this.forceIconProps();
-  }
-  forceIconProps() {
-    if (!Boolean(this.iconEl)) {
-      return;
-    }
-    const icon = this.iconEl.children[0];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "20");
-  }
   render() {
     const className = index$1.classnames("shell-navigation-item", {
       "shell-navigation-item--active": this.active,
-      "shell-navigation-item--has-icon": Boolean(this.icon),
     });
-    return (index.h(index.Host, { class: className, onKeyDown: this.onKeyDown, role: "link", tabIndex: 0 }, index.h("span", { class: "shell-navigation-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), index.h("span", { class: "shell-navigation-item__label" }, this.label)));
+    return (index.h(index.Host, { class: className, onKeyDown: this.onKeyDown, role: "link", tabIndex: 0 }, index.h("span", { class: "shell-navigation-item__icon" }, index.h("slot", { name: "icon" })), index.h("span", { class: "shell-navigation-item__label" }, this.label), this.badgeLabel && (index.h("swirl-badge", { class: "shell-navigation-item__badge", size: "s", "aria-label": this.badgeLabel, label: this.badgeLabel }))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -41,6 +41,7 @@
     "./components/swirl-action-list/swirl-action-list.js",
     "./components/swirl-action-list-section/swirl-action-list-section.js",
     "./components/swirl-app-bar/swirl-app-bar.js",
+    "./components/swirl-app-icon/swirl-app-icon.js",
     "./components/swirl-avatar-group/swirl-avatar-group.js",
     "./components/swirl-card/swirl-card.js",
     "./components/swirl-console-layout/swirl-console-layout.js",

package/dist/collection/components/swirl-app-icon/swirl-app-icon.css

@@ -0,0 +1,46 @@
+:host {
+  display: inline-flex;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.app-icon {
+  position: relative;
+  overflow: hidden;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.625rem;
+}
+
+.app-icon > img {
+    width: 100%;
+    height: 100%;
+  }
+
+.app-icon::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+  border-radius: 0.625rem;
+  box-shadow: 0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset,
+    0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset;
+}
+
+.app-icon--hide-border::after {
+  box-shadow: none;
+}
+
+.app-icon__icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  color: var(--s-icon-default);
+}

package/dist/collection/components/swirl-app-icon/swirl-app-icon.js

@@ -0,0 +1,100 @@
+import { h, Host } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlAppIcon {
+  constructor() {
+    this.setImageAvailable = () => {
+      this.imageAvailable = true;
+    };
+    this.setImageUnavailable = () => {
+      this.imageAvailable = false;
+    };
+    this.icon = undefined;
+    this.src = undefined;
+    this.hideBorder = false;
+    this.imageAvailable = undefined;
+  }
+  render() {
+    const showImage = Boolean(this.src) &&
+      (this.imageAvailable || this.imageAvailable === undefined);
+    const showIcon = !showImage && Boolean(this.icon);
+    const showFallbackIcon = !showImage && !showIcon;
+    const className = classnames("app-icon", {
+      "app-icon--has-icon": showIcon || showFallbackIcon,
+      "app-icon--hide-border": this.hideBorder,
+    });
+    return (h(Host, null, h("span", { class: className }, showImage && (h("img", { alt: "", height: "40", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "40" })), showIcon && (h("span", { class: "app-icon__icon", innerHTML: this.icon })))));
+  }
+  static get is() { return "swirl-app-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-app-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-app-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "src",
+        "reflect": false
+      },
+      "hideBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-border",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "imageAvailable": {}
+    };
+  }
+}

package/dist/collection/components/swirl-app-icon/swirl-app-icon.stories.js

@@ -0,0 +1,19 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-app-icon.mdx";
+export default {
+  component: "swirl-app-icon",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlAppIcon",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-app-icon", args);
+  return element;
+};
+export const SwirlAppIcon = Template.bind({});
+SwirlAppIcon.args = {
+  src: "https://picsum.photos/id/433/144/144",
+};

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

@@ -10,6 +10,7 @@ export class SwirlSearch {
     this.clear = () => {
       this.input.value = "";
       this.input.focus();
+      this.valueChange.emit("");
     };
     this.onBlur = (event) => {
       this.inputBlur.emit(event);

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css

@@ -1,5 +1,5 @@
 :host {
-  --extended-sidebar-width: 17.5rem;
+  --extended-sidebar-width: 17rem;
   --collapsed-sidebar-width: 4rem;
   display: flex;
   width: 100%;
@@ -62,7 +62,9 @@
         }
 
         .shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__collapsed-logo {
-          display: block;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
         }
 
         .shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__expanded-logo {
@@ -127,7 +129,6 @@
   }
 
 .shell-layout__header {
-  padding: var(--s-space-8);
   flex-shrink: 0;
   border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   background-color: var(--s-background-default);
@@ -137,27 +138,24 @@
   display: flex;
   overflow: hidden;
   align-items: center;
+  height: 4.5rem;
 }
 
 .shell-layout__expanded-logo {
-  padding-top: var(--s-space-8);
-  padding-right: calc(var(--s-space-12) + var(--s-space-2));
-  padding-bottom: var(--s-space-8);
-  padding-left: calc(var(--s-space-12) + var(--s-space-2));
+  padding-right: var(--s-space-12);
+  padding-left: var(--s-space-12);
   flex-grow: 1;
 }
 
 .shell-layout__collapsed-logo {
   display: none;
-  padding-top: var(--s-space-8);
-  padding-right: calc(var(--s-space-12) + var(--s-space-2));
-  padding-bottom: var(--s-space-8);
-  padding-left: calc(var(--s-space-12) + var(--s-space-2));
+  padding-right: var(--s-space-12);
+  padding-left: var(--s-space-12);
   flex-grow: 1;
 }
 
 .shell-layout__toggle {
-  padding-right: var(--s-space-8);
+  padding-right: var(--s-space-16);
   padding-left: var(--s-space-12);
   flex-grow: 0;
   flex-shrink: 0;
@@ -177,15 +175,8 @@
 }
   }
 
-.shell-layout__tools {
-  margin-top: var(--s-space-4);
-  flex-basis: 100%;
-  flex-shrink: 0;
-}
-
 .shell-layout__main-navigation {
   overflow: auto;
-  padding: var(--s-space-8);
   flex-grow: 1;
   background-color: var(--s-background-default);
 }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js

@@ -28,24 +28,35 @@ const Template = (args) => {
       </svg>
     </div>
     <div slot="logo-collapsed">
-      <svg width="19" height="32" fill="none">
-        <path fill="#145AF5" d="M.754767 16.6882c-.36-.6516-.612-1.3756-.7200002-2.1358-.072-.7964-.03599996-1.5566.1440002-2.2806.18-.724.54-1.448.972003-2.0272.468-.6154 1.008-1.1222 1.692-1.4842L17.6748 0c.36.6516.612 1.3756.72 2.1358.108.7602.036 1.5204-.144 2.2806-.18.724-.54 1.448-.972 2.0272-.468.6154-1.008 1.1222-1.692 1.4842L.754767 16.6882ZM4.46264 25.702c-.36-.6516-.612-1.3756-.72-2.1358-.108-.7602-.036-1.5204.144-2.2806.18-.724.54-1.448.972-2.0272.468-.6154 1.008-1.1222 1.692-1.4842l8.20796-4.8508c.36.6516.612 1.3756.72 2.1358.108.7602.036 1.5204-.144 2.2806-.18.724-.54 1.448-.972 2.0272-.468.6154-1.008 1.1222-1.692 1.4842L4.46264 25.702Z"/>
-        <path fill="#80A8F4" d="m4.4624 25.702 4.932-2.896c.756 1.3394.936 2.9322.576 4.4164-.396 1.4842-1.332 2.7512-2.664 3.5476l-2.844-5.068ZM14.7584 12.9233l-5.90401-1.0136-8.099995 4.7784 5.759995 1.086 8.24401-4.8508Z"/>
-      </svg>
+      <swirl-app-icon slot="icon" border-hidden="true" label="link" src="/flip-logo.png"></swirl-app-icon>
     </div>
     <div slot="tools">
-      <swirl-stack spacing="4">
-        <swirl-shell-navigation-item icon="<swirl-icon-search></swirl-icon-search>" label="Search"></swirl-shell-navigation-item>
-        <swirl-shell-navigation-item icon="<swirl-icon-notifications></swirl-icon-notifications>" label="Notifications"></swirl-shell-navigation-item>
-        <swirl-shell-navigation-item icon="<swirl-icon-person></swirl-icon-person>" label="Profile & Settings"></swirl-shell-navigation-item>
-        <swirl-shell-navigation-item icon="<swirl-icon-add></swirl-icon-add>" label="Create"></swirl-shell-navigation-item>
+      <swirl-stack>
+        <swirl-shell-navigation-item label="Search">
+          <swirl-app-icon slot="icon" label="link" icon="<swirl-icon-search></swirl-icon-search>"></swirl-app-icon>
+        </swirl-shell-navigation-item>
+        <swirl-shell-navigation-item label="Notifications" badge-label="1">
+          <swirl-app-icon slot="icon" label="link" icon="<swirl-icon-notifications></swirl-icon-notifications>"></swirl-app-icon>
+        </swirl-shell-navigation-item>
+        <swirl-shell-navigation-item label="Profile & Settings">
+          <swirl-avatar slot="icon" label="John Doe" src="https://picsum.photos/id/433/144/144" size="xs"></swirl-avatar>
+        </swirl-shell-navigation-item>
+        <swirl-shell-navigation-item label="Create">
+          <swirl-app-icon slot="icon" label="link" icon="<swirl-icon-add></swirl-icon-add>"></swirl-app-icon>
+        </swirl-shell-navigation-item>
       </swirl-stack>
     </div>
     <div slot="main-navigation">
-      <swirl-stack spacing="4">
-        <swirl-shell-navigation-item active icon="<swirl-icon-menu-outlined></swirl-icon-menu-outlined>" label="Home"></swirl-shell-navigation-item>
-        <swirl-shell-navigation-item icon="<swirl-icon-chats-outlined></swirl-icon-chats-outlined>" label="Chats"></swirl-shell-navigation-item>
-        <swirl-shell-navigation-item icon="<swirl-icon-news-outlined></swirl-icon-news-outlined>" label="News"></swirl-shell-navigation-item>
+      <swirl-stack>
+        <swirl-shell-navigation-item active label="Home" badge-label="2">
+          <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/437/144/144"></swirl-app-icon>
+        </swirl-shell-navigation-item>
+        <swirl-shell-navigation-item label="Chats">
+          <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/437/144/144"></swirl-app-icon>
+        </swirl-shell-navigation-item>
+        <swirl-shell-navigation-item label="News">
+          <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/437/144/144"></swirl-app-icon>
+        </swirl-shell-navigation-item>
       </swirl-stack>
     </div>
     <swirl-banner slot="banner" action-label="Update" content="New version available." dismissable="false" intent="info" size="s"></swirl-banner>

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

@@ -1,13 +1,18 @@
+/**
+* seems the container query does not work as expected
+*/
+
 :host {
+  container-type: inline-size;
+  position: relative;
   display: inline-flex;
   width: 100%;
-  height: 3rem;
+  height: 3.5rem;
   padding-right: var(--s-space-12);
-  padding-left: calc(var(--s-space-12) + var(--s-space-2));
+  padding-left: var(--s-space-12);
   flex-shrink: 0;
   justify-content: flex-start;
   align-items: center;
-  border-radius: var(--s-border-radius-sm);
   color: var(--s-text-default);
   background-color: var(--s-surface-default);
   font-size: var(--s-font-size-sm);
@@ -17,55 +22,88 @@
   gap: var(--s-space-12);
 }
 
-  :host(:hover) {
+:host(:hover) {
     background-color: var(--s-surface-hovered);
   }
 
-  :host(:active) {
+:host(:active) {
     background-color: var(--s-surface-pressed);
+    color: var(--s-text-highlight);
   }
 
-  :host(:focus) {
+:host(:focus) {
     outline: none;
   }
 
-  :host(:focus-visible) .shell-navigation-item__label {
+:host(:focus-visible) .shell-navigation-item__label {
       border-radius: var(--s-border-radius-xs);
       box-shadow: 0 0 0 0.125rem var(--s-focus-default);
     }
 
-  :host(.shell-navigation-item--active) {
+:host(.shell-navigation-item--active) {
     color: var(--s-text-highlight);
     background-color: var(--s-surface-raised-default);
   }
 
-  :host(.shell-navigation-item--active) ::part(icon) {
-      color: var(--s-icon-highlight);
-    }
-
-  :host(.shell-navigation-item--active:hover) {
+:host(.shell-navigation-item--active:hover) {
     background-color: var(--s-surface-raised-hovered);
   }
 
-  :host(.shell-navigation-item--active:active) {
+:host(.shell-navigation-item--active:active) {
     background-color: var(--s-surface-raised-pressed);
+    color: var(--s-text-highlight);
   }
 
-  :host * {
+:host * {
     box-sizing: border-box;
   }
 
+:host:before {
+  content: "";
+  display: none;
+  position: absolute;
+  left: 0;
+  height: 2.5rem;
+  width: 4px;
+  background-color: var(--s-icon-highlight);
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+:host(.shell-navigation-item--active):before {
+  display: block;
+}
+
 .shell-navigation-item__icon {
   display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
 }
 
-.shell-navigation-item__icon ::part(icon) {
-    color: var(--s-icon-default);
-  }
-
 .shell-navigation-item__label {
   overflow: hidden;
   min-width: 0;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+@container (max-width: 4rem) {
+  .shell-navigation-item__label {
+    display: none;
+  }
+
+  .shell-navigation-item__badge {
+    position: absolute;
+    bottom: 0;
+    right: var(--s-space-4);
+  }
+}
+
+@container (min-width: 14rem) {
+  .shell-navigation-item__badge {
+    margin-left: auto;
+    padding-right: var(--s-space-4);
+  }
+}

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

@@ -1,5 +1,8 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
+/**
+ * @slot slot - image or icon to display
+ */
 export class SwirlShellNavigationItem {
   constructor() {
     this.onKeyDown = (event) => {
@@ -9,25 +12,14 @@ export class SwirlShellNavigationItem {
       }
     };
     this.active = undefined;
-    this.icon = undefined;
+    this.badgeLabel = undefined;
     this.label = undefined;
   }
-  componentDidLoad() {
-    this.forceIconProps();
-  }
-  forceIconProps() {
-    if (!Boolean(this.iconEl)) {
-      return;
-    }
-    const icon = this.iconEl.children[0];
-    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "20");
-  }
   render() {
     const className = classnames("shell-navigation-item", {
       "shell-navigation-item--active": this.active,
-      "shell-navigation-item--has-icon": Boolean(this.icon),
     });
-    return (h(Host, { class: className, onKeyDown: this.onKeyDown, role: "link", tabIndex: 0 }, h("span", { class: "shell-navigation-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { class: "shell-navigation-item__label" }, this.label)));
+    return (h(Host, { class: className, onKeyDown: this.onKeyDown, role: "link", tabIndex: 0 }, h("span", { class: "shell-navigation-item__icon" }, h("slot", { name: "icon" })), h("span", { class: "shell-navigation-item__label" }, this.label), this.badgeLabel && (h("swirl-badge", { class: "shell-navigation-item__badge", size: "s", "aria-label": this.badgeLabel, label: this.badgeLabel }))));
   }
   static get is() { return "swirl-shell-navigation-item"; }
   static get encapsulation() { return "shadow"; }
@@ -60,7 +52,7 @@ export class SwirlShellNavigationItem {
         "attribute": "active",
         "reflect": false
       },
-      "icon": {
+      "badgeLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -68,13 +60,13 @@ export class SwirlShellNavigationItem {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "icon",
+        "attribute": "badge-label",
         "reflect": false
       },
       "label": {

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

@@ -1,16 +1,6 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-shell-navigation-item.mdx";
 export default {
-  argTypes: {
-    icon: {
-      table: {
-        type: {
-          detail: "e.g. <swirl-icon-close></swirl-icon-close>",
-          summary: "swirl-icon-*",
-        },
-      },
-    },
-  },
   component: "swirl-shell-navigation-item",
   parameters: {
     docs: {
@@ -21,10 +11,13 @@ export default {
 };
 const Template = (args) => {
   const element = generateStoryElement("swirl-shell-navigation-item", args);
+  element.innerHTML = `
+    <swirl-app-icon slot="icon" label="link" src="https://picsum.photos/id/433/144/144"></swirl-app-icon>
+  `;
   return element;
 };
 export const SwirlShellNavigationItem = Template.bind({});
 SwirlShellNavigationItem.args = {
-  icon: "<swirl-icon-chat-bubble></swirl-icon-chat-bubble>",
   label: "Label",
+  badgeLabel: "1",
 };

package/dist/components/swirl-app-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlAppIcon extends Components.SwirlAppIcon, HTMLElement {}
+export const SwirlAppIcon: {
+  prototype: SwirlAppIcon;
+  new (): SwirlAppIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-app-icon.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlAppIconCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:2.5rem;height:2.5rem;border-radius:0.625rem}.app-icon>img{width:100%;height:100%}.app-icon::after{content:\"\";position:absolute;top:0;display:block;height:100%;width:100%;border-radius:0.625rem;box-shadow:0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset,\n    0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset}.app-icon--hide-border::after{box-shadow:none}.app-icon__icon{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;color:var(--s-icon-default)}";
+
+const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.setImageAvailable = () => {
+      this.imageAvailable = true;
+    };
+    this.setImageUnavailable = () => {
+      this.imageAvailable = false;
+    };
+    this.icon = undefined;
+    this.src = undefined;
+    this.hideBorder = false;
+    this.imageAvailable = undefined;
+  }
+  render() {
+    const showImage = Boolean(this.src) &&
+      (this.imageAvailable || this.imageAvailable === undefined);
+    const showIcon = !showImage && Boolean(this.icon);
+    const showFallbackIcon = !showImage && !showIcon;
+    const className = classnames("app-icon", {
+      "app-icon--has-icon": showIcon || showFallbackIcon,
+      "app-icon--hide-border": this.hideBorder,
+    });
+    return (h(Host, null, h("span", { class: className }, showImage && (h("img", { alt: "", height: "40", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "40" })), showIcon && (h("span", { class: "app-icon__icon", innerHTML: this.icon })))));
+  }
+  static get style() { return swirlAppIconCss; }
+}, [1, "swirl-app-icon", {
+    "icon": [1],
+    "src": [1],
+    "hideBorder": [4, "hide-border"],
+    "imageAvailable": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-app-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-app-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlAppIcon$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlAppIcon = SwirlAppIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlAppIcon, defineCustomElement };