@getflip/swirl-components 0.165.0 → 0.166.0

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

@@ -4,7 +4,7 @@
 
   --swirl-shell-header-height: 3.25rem;
 
-  --swirl-shell-collapsed-nav-width: 3.75rem;
+  --swirl-shell-collapsed-nav-width: 4rem;
   --swirl-shell-extended-nav-width: 14rem;
   --swirl-shell-sidebar-width: 21rem;
 

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

@@ -102,13 +102,16 @@ export class SwirlShellLayout {
     this.mobileNavigationActive = false;
   }
   render() {
+    const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
     const className = classnames("shell-layout", {
       "shell-layout--branded-header": this.brandedHeader,
       "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
       "shell-layout--navigation-collapsed": this.navigationCollapsed,
       "shell-layout--sidebar-active": this.sidebarActive,
     });
-    return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-hamburger-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: this.sidebarToggleBadge, size: "xs" }))), h("slot", { name: "header-tools" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
+    return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-hamburger-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+        ? this.sidebarToggleBadgeAriaLabel
+        : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { name: "header-tools" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
   }
   static get is() { return "swirl-shell-layout"; }
   static get encapsulation() { return "scoped"; }
@@ -249,11 +252,11 @@ export class SwirlShellLayout {
         "reflect": false
       },
       "sidebarToggleBadge": {
-        "type": "string",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | boolean",
+          "resolved": "boolean | string",
           "references": {}
         },
         "required": false,

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

@@ -1,6 +1,13 @@
 import { fullscreenStoryDecorator, generateStoryElement } from "../../utils";
 import Docs from "./swirl-shell-layout.mdx";
 export default {
+  argTypes: {
+    sidebarToggleBadge: {
+      control: {
+        type: "text",
+      },
+    },
+  },
   component: "swirl-shell-layout",
   tags: ["autodocs"],
   decorators: [fullscreenStoryDecorator(false)],
@@ -31,12 +38,12 @@ const Template = (args) => {
           </swirl-shell-navigation-item>
         </li>
         <li>
-          <swirl-shell-navigation-item active label="News">
+          <swirl-shell-navigation-item active label="News" badge-label="">
             <swirl-app-icon icon="<swirl-icon-news-filled size=&quot;20&quot;></swirl-icon-news-filled>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>
         <li>
-          <swirl-shell-navigation-item label="Chat">
+          <swirl-shell-navigation-item label="Chat" badge-label="3">
             <swirl-app-icon icon="<swirl-icon-chat-bubble size=&quot;20&quot;></swirl-icon-chat-bubble>" slot="icon"></swirl-app-icon>
           </swirl-shell-navigation-item>
         </li>

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

@@ -15,20 +15,20 @@
   position: relative;
   display: flex;
   width: 100%;
-  height: 2.75rem;
+  height: 3rem;
   padding: var(--s-space-12);
   flex-shrink: 0;
   justify-content: flex-start;
   align-items: center;
   border: none;
   border-radius: var(--s-border-radius-sm);
-  background-color: var(--s-surface-overlay-default);
   color: var(--s-text-default);
-  text-decoration: none;
+  background-color: var(--s-surface-overlay-default);
   font: inherit;
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-sm);
+  text-decoration: none;
   cursor: pointer;
   container-type: inline-size;
   gap: var(--s-space-16);
@@ -92,8 +92,8 @@
 
 .shell-navigation-item__icon {
   display: inline-flex;
-  min-width: 1.25rem;
-  min-height: 1.25rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   justify-content: center;
   align-items: center;
 }
@@ -101,6 +101,8 @@
 .shell-navigation-item__label {
   overflow: hidden;
   min-width: 0;
+  flex-grow: 1;
+  text-align: start;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
@@ -117,7 +119,7 @@
   .shell-navigation-item__badge {
     position: absolute;
     right: var(--s-space-4);
-    bottom: 0;
+    bottom: var(--s-space-4);
   }
 }
 

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

@@ -17,7 +17,7 @@ export class SwirlShellNavigationItem {
     });
     const isLink = Boolean(this.href);
     const Tag = isLink ? "a" : "button";
-    return (h(Host, null, h(Tag, { class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, 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 })))));
+    return (h(Host, null, h(Tag, { class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { class: "shell-navigation-item__icon" }, h("slot", { name: "icon" })), h("span", { class: "shell-navigation-item__label" }, this.label), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { "aria-label": this.badgeLabel, class: "shell-navigation-item__badge", label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" })))));
   }
   static get is() { return "swirl-shell-navigation-item"; }
   static get encapsulation() { return "shadow"; }