@getflip/swirl-components 0.116.0 → 0.117.0

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

@@ -1,110 +1,117 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery, getActiveElement } from "../../utils";
+import * as focusTrap from "focus-trap";
+const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
+const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
 /**
- * @slot logo-expanded - Logo shown inside expanded sidebar.
- * @slot logo-collapsed - Logo shown inside collapsed sidebar.
- * @slot tools - Items shown in the upper sidebar part.
- * @slot main-navigation - Items shown in the lower sidebar part.
- * @slot banner - Used to show a swirl-banner on top of the page.
- * @slot main - Contents of the main area.
+ * @slot logo - Logo shown inside header.
+ * @slot header-tools - Tools positioned on the header's right-hand side.
+ * @slot mobile-header-tools - Tools positioned in the mobile drawer header.
+ * @slot nav - Items shown in the lower sidebar part.
+ * @slot mobile-logo - Logo shown inside the mobile navigation drawer.
+ * @slot default - Contents of the main area.
+ * @slot sidebar-app-bar - Contents of the right sidebar header.
+ * @slot sidebar - Contents of the right sidebar.
  */
 export class SwirlShellLayout {
   constructor() {
-    this.desktopMediaQuery = getDesktopMediaQuery();
-    this.desktopMediaQueryHandler = (event) => {
-      if (event.matches) {
-        this.expandLeftSidebar();
-      }
-      else {
-        this.collapseLeftSidebar();
-      }
-    };
-    this.collapseLeftSidebar = () => {
-      this.collapsedSidebar = true;
-      this.collapsing = true;
-      setTimeout(() => {
-        this.collapsing = false;
-        // Some browsers don't update the hovered state of an element correctly,
-        // if the element was moved and is no longer underneath the cursor.
-        // https://bugs.chromium.org/p/chromium/issues/detail?id=276329
-        this.sidebarHovered = false;
-      }, 200);
-    };
-    this.expandLeftSidebar = () => {
-      if (this.hideSidebar) {
-        return;
-      }
-      this.collapsedSidebar = false;
-    };
-    this.toggleSidebar = () => {
-      if (this.collapsedSidebar) {
-        this.expandLeftSidebar();
-      }
-      else {
-        this.collapseLeftSidebar();
-      }
-    };
-    this.onBackdropClick = () => {
-      if (!this.collapsedSidebar) {
-        this.collapseLeftSidebar();
-      }
+    this.onBrowserBackClick = () => {
+      history.back();
     };
-    this.onSidebarClick = () => {
-      if (this.collapsedSidebar) {
-        document.activeElement?.blur();
-        getActiveElement()?.blur();
-      }
+    this.onBrowserForwardClick = () => {
+      history.forward();
     };
-    this.onSidebarMouseEnter = () => {
-      this.sidebarHovered = true;
+    this.onNavigationToggleClick = () => {
+      this.navigationCollapsed = !this.navigationCollapsed;
     };
-    this.onSidebarMouseLeave = () => {
-      this.sidebarHovered = false;
+    this.onNavigationClick = () => {
+      this.hideMobileNavigation();
     };
-    this.hideSidebar = undefined;
-    this.mainNavigationLabel = "Main";
+    this.brandedHeader = undefined;
+    this.browserBackButtonLabel = "Navigate back";
+    this.browserForwardButtonLabel = "Navigate forward";
+    this.hideMobileNavigationButtonLabel = "Close navigation";
+    this.navigationLabel = "Main";
+    this.navigationToggleLabel = "Toggle navigation";
+    this.sidebarActive = undefined;
+    this.sidebarToggleBadge = undefined;
+    this.sidebarToggleBadgeAriaLabel = undefined;
+    this.sidebarToggleIcon = "notifications";
     this.sidebarToggleLabel = "Toggle sidebar";
-    this.collapsedSidebar = undefined;
-    this.collapsing = undefined;
-    this.sidebarHovered = undefined;
+    this.skipLinkLabel = "Skip to main content";
+    this.mobileNavigationActive = undefined;
+    this.navigationCollapsed = undefined;
   }
   componentWillLoad() {
-    if (!this.desktopMediaQuery.matches) {
-      this.collapseLeftSidebar();
+    const restoredSidebarState = localStorage.getItem(SIDEBAR_STORAGE_KEY) === "true";
+    this.sidebarActive =
+      this.sidebarActive === undefined
+        ? restoredSidebarState
+        : this.sidebarActive;
+    const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
+    this.navigationCollapsed = restoredNavigationCollapseState;
+  }
+  componentDidLoad() {
+    this.focusTrap = focusTrap.createFocusTrap(this.navElement, {
+      allowOutsideClick: true,
+      tabbableOptions: {
+        getShadowRoot: (node) => {
+          return node.shadowRoot;
+        },
+      },
+    });
+  }
+  componentDidRender() {
+    this.focusTrap?.updateContainerElements(this.navElement);
+  }
+  disconnectedCallback() {
+    this.focusTrap?.deactivate();
+  }
+  onWindowKeyDown(event) {
+    if (event.key === "Escape" && this.mobileNavigationActive) {
+      this.hideMobileNavigation();
     }
-    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  watchMobileNavigationState() {
+    if (this.mobileNavigationActive) {
+      // wait for animation
+      setTimeout(() => {
+        this.focusTrap.activate();
+      }, 200);
+    }
+    else {
+      this.focusTrap.deactivate();
+    }
+  }
+  watchNavigationCollapsed() {
+    localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
+  }
+  watchSidebarActive() {
+    localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
   }
   /**
-   * Collapse the left sidebar.
+   * Opens the mobile navigation.
    */
-  async collapseSidebar() {
-    this.collapseLeftSidebar();
+  async showMobileNavigation() {
+    this.mobileNavigationActive = true;
   }
   /**
-   * Extend the left sidebar.
+   * Hides the mobile navigation.
    */
-  async extendSidebar() {
-    this.expandLeftSidebar();
+  async hideMobileNavigation() {
+    this.mobileNavigationActive = false;
   }
   render() {
     const className = classnames("shell-layout", {
-      "shell-layout--collapsed-sidebar": this.collapsedSidebar,
-      "shell-layout--collapsing": this.collapsing,
-      "shell-layout--hide-sidebar": this.hideSidebar,
+      "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,
     });
-    const sidebarWrapperClassName = classnames("shell-layout__sidebar-wrapper", {
-      "shell-layout__sidebar-wrapper--hovered": this.sidebarHovered,
-    });
-    const backdropClassName = classnames("shell-layout__backdrop", {
-      "shell-layout__backdrop--fading": this.collapsing,
-    });
-    return (h(Host, null, h("div", { class: className }, h("div", { class: "shell-layout__banner" }, h("slot", { name: "banner" })), h("div", { class: sidebarWrapperClassName, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, !this.hideSidebar && (h("div", { class: "shell-layout__sidebar" }, h("header", { class: "shell-layout__header" }, h("div", { class: "shell-layout__logo-bar" }, h("div", { class: "shell-layout__expanded-logo" }, h("slot", { name: "logo-expanded" })), h("div", { class: "shell-layout__collapsed-logo" }, h("slot", { name: "logo-collapsed" })), h("div", { class: "shell-layout__toggle" }, h("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: true, icon: this.collapsedSidebar
-        ? "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>"
-        : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), h("div", { class: "shell-layout__tools" }, h("slot", { name: "tools" }))), h("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, h("slot", { name: "main-navigation" }))))), h("main", { class: "shell-layout__main" }, h("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && (h("div", { class: backdropClassName, onClick: this.onBackdropClick })))));
+    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-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" }, 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 "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["swirl-shell-layout.css"]
@@ -117,7 +124,7 @@ export class SwirlShellLayout {
   }
   static get properties() {
     return {
-      "hideSidebar": {
+      "brandedHeader": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -131,10 +138,10 @@ export class SwirlShellLayout {
           "tags": [],
           "text": ""
         },
-        "attribute": "hide-sidebar",
+        "attribute": "branded-header",
         "reflect": false
       },
-      "mainNavigationLabel": {
+      "browserBackButtonLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -143,15 +150,156 @@ export class SwirlShellLayout {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "main-navigation-label",
+        "attribute": "browser-back-button-label",
+        "reflect": false,
+        "defaultValue": "\"Navigate back\""
+      },
+      "browserForwardButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "browser-forward-button-label",
+        "reflect": false,
+        "defaultValue": "\"Navigate forward\""
+      },
+      "hideMobileNavigationButtonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-mobile-navigation-button-label",
+        "reflect": false,
+        "defaultValue": "\"Close navigation\""
+      },
+      "navigationLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "navigation-label",
         "reflect": false,
         "defaultValue": "\"Main\""
       },
+      "navigationToggleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "navigation-toggle-label",
+        "reflect": false,
+        "defaultValue": "\"Toggle navigation\""
+      },
+      "sidebarActive": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sidebar-active",
+        "reflect": false
+      },
+      "sidebarToggleBadge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sidebar-toggle-badge",
+        "reflect": false
+      },
+      "sidebarToggleBadgeAriaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sidebar-toggle-badge-aria-label",
+        "reflect": false
+      },
+      "sidebarToggleIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sidebar-toggle-icon",
+        "reflect": false,
+        "defaultValue": "\"notifications\""
+      },
       "sidebarToggleLabel": {
         "type": "string",
         "mutable": false,
@@ -161,7 +309,7 @@ export class SwirlShellLayout {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
@@ -169,19 +317,77 @@ export class SwirlShellLayout {
         "attribute": "sidebar-toggle-label",
         "reflect": false,
         "defaultValue": "\"Toggle sidebar\""
+      },
+      "skipLinkLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "skip-link-label",
+        "reflect": false,
+        "defaultValue": "\"Skip to main content\""
       }
     };
   }
   static get states() {
     return {
-      "collapsedSidebar": {},
-      "collapsing": {},
-      "sidebarHovered": {}
+      "mobileNavigationActive": {},
+      "navigationCollapsed": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "sidebarToggleClick",
+        "name": "sidebarToggleClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "skipLinkClick",
+        "name": "skipLinkClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
   static get methods() {
     return {
-      "collapseSidebar": {
+      "showMobileNavigation": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -193,11 +399,11 @@ export class SwirlShellLayout {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Collapse the left sidebar.",
+          "text": "Opens the mobile navigation.",
           "tags": []
         }
       },
-      "extendSidebar": {
+      "hideMobileNavigation": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -209,10 +415,31 @@ export class SwirlShellLayout {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Extend the left sidebar.",
+          "text": "Hides the mobile navigation.",
           "tags": []
         }
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "mobileNavigationActive",
+        "methodName": "watchMobileNavigationState"
+      }, {
+        "propName": "navigationCollapsed",
+        "methodName": "watchNavigationCollapsed"
+      }, {
+        "propName": "sidebarActive",
+        "methodName": "watchSidebarActive"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "onWindowKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -5,65 +5,15 @@ describe("swirl-shell-layout", () => {
     const page = await newSpecPage({
       components: [SwirlShellLayout],
       html: `<swirl-shell-layout main-navigation-label="Test">
-        <div slot="logo-expanded">Expanded logo</div>
-        <div slot="logo-collapsed">Collapsed logo</div>
-        <div slot="tools">Tools</div>
-        <div slot="main-navigation">Main navigation</div>
-        <div slot="main">Main</div>
+        <div slot="logo">Logo</div>
+        <div slot="mobile-logo">Mobile logo</div>
+        <div slot="header-tools">Tools</div>
+        <div slot="nav">nav</div>
+        <div>Main</div>
+        <div slot="sidebar-header">Sidebar header</div>
+        <div slot="sidebar">Sidebar</div>
       </swirl-shell-layout>`,
     });
-    expect(page.root).toEqualHtml(`
-      <swirl-shell-layout main-navigation-label="Test">
-        <mock:shadow-root>
-          <div class="shell-layout shell-layout--collapsed-sidebar shell-layout--collapsing">
-            <div class="shell-layout__banner">
-              <slot name="banner"></slot>
-            </div>
-            <div class="shell-layout__sidebar-wrapper">
-              <div class="shell-layout__sidebar">
-                <header class="shell-layout__header">
-                  <div class="shell-layout__logo-bar">
-                    <div class="shell-layout__expanded-logo">
-                      <slot name="logo-expanded"></slot>
-                    </div>
-                    <div class="shell-layout__collapsed-logo">
-                      <slot name="logo-collapsed"></slot>
-                    </div>
-                    <div class="shell-layout__toggle">
-                      <swirl-button hidelabel="" icon="<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>" label="Toggle sidebar" swirlariaexpanded="false"></swirl-button>
-                    </div>
-                  </div>
-                  <div class="shell-layout__tools">
-                    <slot name="tools"></slot>
-                  </div>
-                </header>
-                <nav aria-label="Test" class="shell-layout__main-navigation">
-                  <slot name="main-navigation"></slot>
-                </nav>
-              </div>
-            </div>
-            <main class="shell-layout__main">
-              <slot name="main"></slot>
-            </main>
-            <div class="shell-layout__backdrop shell-layout__backdrop--fading"></div>
-          </div>
-        </mock:shadow-root>
-        <div slot="logo-expanded">
-          Expanded logo
-        </div>
-        <div slot="logo-collapsed">
-          Collapsed logo
-        </div>
-        <div slot="tools">
-          Tools
-        </div>
-        <div slot="main-navigation">
-          Main navigation
-        </div>
-        <div slot="main">
-          Main
-        </div>
-      </swirl-shell-layout>
-    `);
+    expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!---->            <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div>   <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool shell-layout__navigation-toggle\\" type=\\"button\\"><swirl-icon-menu size=\\"20\\"></swirl-icon-menu><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-icon-double-arrow-right size=\\"20\\"></swirl-icon-double-arrow-right><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></button></div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"><button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> <div slot=\\"header-tools\\">Tools</div></div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\">      <div>Main</div>   </main><aside class=\\"shell-layout__sidebar\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
   });
 });