@getflip/swirl-components 0.236.0 → 0.236.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +69 -6
- package/dist/cjs/swirl-box.cjs.entry.js +32 -12
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +30 -9
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-app-layout/swirl-app-layout.css +25 -69
- package/dist/collection/components/swirl-app-layout/swirl-app-layout.js +72 -6
- package/dist/collection/components/swirl-box/swirl-box.css +29 -64
- package/dist/collection/components/swirl-box/swirl-box.js +36 -11
- package/dist/collection/components/swirl-box/swirl-box.spec.js +3 -3
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css +5 -54
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +32 -10
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.spec.js +1 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-app-layout2.js +73 -7
- package/dist/components/swirl-box2.js +34 -13
- package/dist/components/swirl-shell-layout.js +33 -11
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-app-layout_5.entry.js +70 -7
- package/dist/esm/swirl-box.entry.js +33 -13
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-shell-layout.entry.js +31 -10
- package/dist/swirl-components/p-18eaac73.entry.js +1 -0
- package/dist/swirl-components/p-78bcc5e4.entry.js +1 -0
- package/dist/swirl-components/p-f8c383cf.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-app-layout/swirl-app-layout.d.ts +23 -0
- package/dist/types/components/swirl-box/swirl-box.d.ts +9 -0
- package/dist/types/components/swirl-shell-layout/swirl-shell-layout.d.ts +8 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-3625bbf5.entry.js +0 -1
- package/dist/swirl-components/p-b4f192f1.entry.js +0 -1
- package/dist/swirl-components/p-e4d94c29.entry.js +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import * as focusTrap from "focus-trap";
|
|
4
|
-
import { isDesktopViewport } from "../../utils";
|
|
4
|
+
import { debounce, isDesktopViewport } from "../../utils";
|
|
5
5
|
const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
|
|
6
6
|
const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
|
|
7
7
|
const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
|
|
@@ -48,6 +48,9 @@ export class SwirlShellLayout {
|
|
|
48
48
|
this.onNavigationClick = () => {
|
|
49
49
|
this.hideMobileNavigation();
|
|
50
50
|
};
|
|
51
|
+
this.onSidebarScroll = debounce(() => {
|
|
52
|
+
this.updateSidebarScrollState();
|
|
53
|
+
}, 16);
|
|
51
54
|
this.brandedHeader = undefined;
|
|
52
55
|
this.browserBackButtonLabel = "Navigate back";
|
|
53
56
|
this.browserForwardButtonLabel = "Navigate forward";
|
|
@@ -66,11 +69,15 @@ export class SwirlShellLayout {
|
|
|
66
69
|
this.sidebarToggleIcon = "notifications";
|
|
67
70
|
this.sidebarToggleLabel = "Toggle sidebar";
|
|
68
71
|
this.skipLinkLabel = "Skip to main content";
|
|
72
|
+
this.isDesktopViewport = true;
|
|
69
73
|
this.mobileNavigationActive = undefined;
|
|
70
74
|
this.navigationCollapsed = undefined;
|
|
71
75
|
this.secondaryNavCollapsed = undefined;
|
|
72
76
|
this.secondaryNavView = "list";
|
|
73
|
-
this.
|
|
77
|
+
this.sidebarScrollState = {
|
|
78
|
+
scrollable: false,
|
|
79
|
+
scrolledToTop: false,
|
|
80
|
+
};
|
|
74
81
|
}
|
|
75
82
|
componentWillLoad() {
|
|
76
83
|
this.isDesktopViewport = isDesktopViewport();
|
|
@@ -102,6 +109,9 @@ export class SwirlShellLayout {
|
|
|
102
109
|
childList: true,
|
|
103
110
|
subtree: true,
|
|
104
111
|
});
|
|
112
|
+
queueMicrotask(() => {
|
|
113
|
+
this.updateSidebarScrollState();
|
|
114
|
+
});
|
|
105
115
|
}
|
|
106
116
|
componentDidRender() {
|
|
107
117
|
this.focusTrap?.updateContainerElements(this.navElement);
|
|
@@ -179,6 +189,15 @@ export class SwirlShellLayout {
|
|
|
179
189
|
restoredSecondaryNavigationViewState;
|
|
180
190
|
}
|
|
181
191
|
}
|
|
192
|
+
updateSidebarScrollState() {
|
|
193
|
+
const newSidebarScrollState = {
|
|
194
|
+
scrollable: this.sidebarContentEl.scrollHeight > this.sidebarContentEl.clientHeight,
|
|
195
|
+
scrolledToTop: this.sidebarContentEl.scrollTop === 0,
|
|
196
|
+
};
|
|
197
|
+
if (Object.keys(newSidebarScrollState).some((key) => newSidebarScrollState[key] !== this.sidebarScrollState[key])) {
|
|
198
|
+
this.sidebarScrollState = newSidebarScrollState;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
182
201
|
render() {
|
|
183
202
|
const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
|
|
184
203
|
const mainNavCollapsed = this.navigationCollapsed && this.isDesktopViewport;
|
|
@@ -190,26 +209,28 @@ export class SwirlShellLayout {
|
|
|
190
209
|
"shell-layout--mobile-navigation-active": this.mobileNavigationActive,
|
|
191
210
|
"shell-layout--navigation-collapsed": mainNavCollapsed,
|
|
192
211
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
212
|
+
"shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
|
|
213
|
+
"shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
|
|
193
214
|
});
|
|
194
|
-
return (h(Host, { key: '
|
|
215
|
+
return (h(Host, { key: '3b4dde369cc2ff87ec3787fd16c6d3891eee64a2' }, h("div", { key: '481d0ffb5971b469c8c3aeabbbd9664ac60b9ecc', class: className }, h("header", { key: '4a7c9b3e3ec8d94e9b57af3e3e9234a75616cb04', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '1657cf85ff234865c97b781ef43c61a6b0408787', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '6dcf45949f30e1c8a8a9f546b57bf4c301683383', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '52aaa6168ae6ba526de7d166f2715ed308a4f14b', content: this.navigationCollapsed
|
|
195
216
|
? this.expandNavigationButtonLabel
|
|
196
|
-
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '
|
|
217
|
+
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '5794af83ada5a690d5b886b7851ebf3040eb3a6f', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '7377d48d26b43655fdfe6e81a707d6a22e5a8fe5' }, this.navigationCollapsed
|
|
197
218
|
? this.expandNavigationButtonLabel
|
|
198
|
-
: this.collapseNavigationButtonLabel))), h("a", { key: '
|
|
219
|
+
: this.collapseNavigationButtonLabel))), h("a", { key: 'a79fd7930d423211d0ca0612526cbc04fd9b4f75', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '5990be011ad330438b1f83db24af889031798416', size: 20 }), h("swirl-visually-hidden", { key: 'fcf6be5e10ec3025bda5955c6b2f7a398ef15d44' }, this.browserBackButtonLabel)), h("a", { key: '405400b3ef2ba463a99491a5d57db59a3f0a2b12', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'df9e159d79ba95988af66a4b4a458e1589737e8f', size: 20 }), h("swirl-visually-hidden", { key: 'b4d18ead34e9413e97c622185fea3bbbb32b6dcb' }, this.browserForwardButtonLabel)), h("slot", { key: '2ee9f2c2a81a91292f80772cf371f5d2ccb493db', name: "left-header-tools" })), h("div", { key: '529199ad8c9ceff25399c235e947bf7027982b20', class: "shell-layout__logo" }, h("slot", { key: '1f9fb29b9147e2b6eaad49389d17cb17aa80658a', name: "logo" })), h("div", { key: 'e2b887179b9960d8863dd24ccbf2c7e8be009602', class: "shell-layout__header-right" }, h("slot", { key: '5540a6435490d75aff8864301d93ad72a3c7c6dd', name: "right-header-tools" }), h("button", { key: '26b6176d55c5c1e079691caa36a725922392aec5', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'ec7b16e7412ba48981aebffd91c2d9e014efb2a5', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '4b1903a46a028e0895a101e865ab8242c92dc89c' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: 'ce74e5c85492858648ca7265e7b1365ee84ffe87', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
199
220
|
? this.sidebarToggleBadgeAriaLabel
|
|
200
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '
|
|
221
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'f52288a44afbeb1392193d05f0bc4501a17940dd', name: "avatar" }))), h("div", { key: '924b06cd336bf0cc0292edadc08b0b2b3e0dfb47', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'bed15393425dc10357b10ba7d022c853d0b9b32a', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '6c02d3de25c1812624b46d058ee943c343fc3089', class: "shell-layout__mobile-header" }, h("slot", { key: '97d21882939ac034227d2017157503d1f4f901e4', name: "mobile-logo" }), h("div", { key: 'bb5bc9344be7981ac68e57f69065fc6d482d536e', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'fc58fa45d88b04d882a10d53e44474b30cb98921', name: "mobile-header-tools" }), h("button", { key: '011c8055b176a4174cff580e96f884e2518641c9', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'f414e31f2f2c91c83a8cc4ae3ac965977549723a', size: 20 }), h("swirl-visually-hidden", { key: '4328d1f7a9bbbbc9abcfe73aeb4a2927244ace8e' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '48f594da912cd8cb3f3d88ef222c6ff4e1999e0a', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '4c5ce4e38948ac823a08b91bffccc8393e52e05f' }, h("span", { key: 'da7e77e9c3dbc8853e9bd1c00efe3c85d1f806f2', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'f2d21298b9271132636ab9cd2132ac7f1f898b85', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'aa7046795d1fcf19407a1328772f6194617edcf5', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'e985bf753c99a57180f33f5c50f4b63bde9e2c4c', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '9085eab5ed541a4a6ed1b176dcb3b8746c848f70', paddingBlockEnd: "16" }, h("swirl-stack", { key: '31f051872f887a15b53558b9ee54b2f93e3df7f1', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '4ca64948fccec45bb342069d54b71f5a7d32a48b', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
|
|
201
222
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
202
223
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
203
224
|
? this.secondaryNavExpandLabel
|
|
204
|
-
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '
|
|
225
|
+
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '001622c91db552e3f52224dd5224e0ce2175f1fe', icon: this.secondaryNavView === "grid"
|
|
205
226
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
206
227
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
207
228
|
? this.gridNavLayoutToggleLabel
|
|
208
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '
|
|
229
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '0596290b2d6cd8631db9cc138c94807570ae0552', class: {
|
|
209
230
|
"shell-layout__secondary-nav-items": true,
|
|
210
231
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
211
232
|
(this.secondaryNavView === "grid" || mainNavCollapsed),
|
|
212
|
-
} }, h("slot", { key: '
|
|
233
|
+
} }, h("slot", { key: '51e19724fca7fca2a2cab5631bec4fc6a2706332', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '100fd956e742c68697b16cd45b95cb69cac6a15e', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '71231c2168345af0a36cd8887f213db08c5a42e1' })), h("aside", { key: '9b199a1cb0fcd73aa80581231cd854e2eb0b2da3', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '30e13e5d44f8dde97286750dbbe65ca2b63a14b5', class: "shell-layout__sidebar-body" }, h("div", { key: '63d5b38abcfca252b27f8bf026646dfa2c0e9d43', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'f32b025048321515bfcc276947a3041aace17b90', name: "sidebar-app-bar" })), h("div", { key: 'b06bad9a0c0e58e1a6db0d8a8477dd081bd959ed', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '3d4c21e42e72af64470b452c7357acd8e2d72fdd', name: "sidebar" })))))));
|
|
213
234
|
}
|
|
214
235
|
static get is() { return "swirl-shell-layout"; }
|
|
215
236
|
static get encapsulation() { return "scoped"; }
|
|
@@ -549,11 +570,12 @@ export class SwirlShellLayout {
|
|
|
549
570
|
}
|
|
550
571
|
static get states() {
|
|
551
572
|
return {
|
|
573
|
+
"isDesktopViewport": {},
|
|
552
574
|
"mobileNavigationActive": {},
|
|
553
575
|
"navigationCollapsed": {},
|
|
554
576
|
"secondaryNavCollapsed": {},
|
|
555
577
|
"secondaryNavView": {},
|
|
556
|
-
"
|
|
578
|
+
"sidebarScrollState": {}
|
|
557
579
|
};
|
|
558
580
|
}
|
|
559
581
|
static get events() {
|
|
@@ -19,6 +19,6 @@ describe("swirl-shell-layout", () => {
|
|
|
19
19
|
<div slot="sidebar">Sidebar</div>
|
|
20
20
|
</swirl-shell-layout>`,
|
|
21
21
|
});
|
|
22
|
-
expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!----> <div slot=\\"header-tools\\" hidden=\\"\\">Tools</div> <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\\"><swirl-tooltip content=\\"Collapse navigation\\" delay=\\"100\\" position=\\"right\\"><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-dock-left-collapse size=\\"20\\"></swirl-icon-dock-left-collapse><swirl-visually-hidden>Collapse navigation</swirl-visually-hidden></button></swirl-tooltip><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.back()\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></a><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.forward()\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></a> </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></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 class=\\"shell-layout__secondary-nav\\"><swirl-separator bordercolor=\\"strong\\" spacing=\\"16\\"></swirl-separator><swirl-box paddingblockend=\\"16\\"><swirl-stack justify=\\"space-between\\" orientation=\\"horizontal\\"><swirl-button icon=\\"<swirl-icon-expand-less></swirl-icon-expand-less>\\" label=\\"Show less\\" variant=\\"plain\\"></swirl-button><swirl-button icon=\\"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>\\" iconposition=\\"end\\" label=\\"List\\" variant=\\"plain\\"></swirl-button></swirl-stack></swirl-box><div class=\\"shell-layout__secondary-nav-items\\"></div></div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\"> <div>Main</div> </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content
|
|
22
|
+
expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!----> <div slot=\\"header-tools\\" hidden=\\"\\">Tools</div> <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\\"><swirl-tooltip content=\\"Collapse navigation\\" delay=\\"100\\" position=\\"right\\"><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-dock-left-collapse size=\\"20\\"></swirl-icon-dock-left-collapse><swirl-visually-hidden>Collapse navigation</swirl-visually-hidden></button></swirl-tooltip><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.back()\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></a><a class=\\"shell-layout__header-tool\\" href=\\"javascript:history.forward()\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></a> </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></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 class=\\"shell-layout__secondary-nav\\"><swirl-separator bordercolor=\\"strong\\" spacing=\\"16\\"></swirl-separator><swirl-box paddingblockend=\\"16\\"><swirl-stack justify=\\"space-between\\" orientation=\\"horizontal\\"><swirl-button icon=\\"<swirl-icon-expand-less></swirl-icon-expand-less>\\" label=\\"Show less\\" variant=\\"plain\\"></swirl-button><swirl-button icon=\\"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>\\" iconposition=\\"end\\" label=\\"List\\" variant=\\"plain\\"></swirl-button></swirl-stack></swirl-box><div class=\\"shell-layout__secondary-nav-items\\"></div></div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\"> <div>Main</div> </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><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>"`);
|
|
23
23
|
});
|
|
24
24
|
});
|