@getflip/swirl-components 0.184.3 → 0.185.1

package/dist/cjs/swirl-icon-news-off.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1de6abbd.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlIconCss = ":host{display:inline-flex;max-width:100%;max-height:100%}.swirl-icon{max-width:100%;max-height:100%}";
+
+const SwirlIconNewsOff = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.color = undefined;
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
+    const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (index.h("svg", { "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, null, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6569 13.6569C13.9172 13.9172 13.9172 14.3393 13.6569 14.5997C13.3965 14.86 12.9744 14.86 12.714 14.5997L12.1113 13.997C12.0745 13.999 12.0374 14 12 14H4C2.89543 14 2 13.1046 2 12V4C2 3.96264 2.00102 3.92552 2.00305 3.88866L1.40034 3.28596C1.13999 3.02561 1.13999 2.6035 1.40034 2.34315C1.66069 2.0828 2.0828 2.0828 2.34315 2.34315L13.6569 13.6569ZM3.33333 5.21895V7.33333H5.44772L3.33333 5.21895ZM6.78105 8.66667H3.33333V12C3.33333 12.3682 3.63181 12.6667 4 12.6667H10.781L6.78105 8.66667Z", fill: "currentColor" }), index.h("path", { d: "M12.6667 7.33333H8.93221L10.2655 8.66667H12.6667V11.0678L13.9663 12.3674C13.9884 12.2483 14 12.1255 14 12V4C14 2.89543 13.1046 2 12 2H4C3.87448 2 3.75167 2.01156 3.63256 2.03368L4.93221 3.33333H12C12.3682 3.33333 12.6667 3.63181 12.6667 4V7.33333Z", fill: "currentColor" }), index.h("path", { d: "M7.33333 5.33333C7.33333 4.96514 7.63181 4.66667 8 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333C11.3333 5.70152 11.0349 6 10.6667 6H8C7.63181 6 7.33333 5.70152 7.33333 5.33333Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, null, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20.4853 20.4853C20.8758 20.8758 20.8758 21.509 20.4853 21.8995C20.0948 22.29 19.4616 22.29 19.0711 21.8995L18.167 20.9954C18.1117 20.9985 18.056 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 5.94396 3.00154 5.88828 3.00457 5.833L2.10051 4.92894C1.70999 4.53841 1.70999 3.90525 2.10051 3.51472C2.49103 3.1242 3.1242 3.1242 3.51472 3.51472L20.4853 20.4853ZM5 7.82843V11H8.17157L5 7.82843ZM10.1716 13H5V18C5 18.5523 5.44772 19 6 19H16.1716L10.1716 13Z", fill: "currentColor" }), index.h("path", { d: "M19 11H13.3983L15.3983 13H19V16.6017L20.9495 18.5512C20.9827 18.3725 21 18.1883 21 18V6C21 4.34315 19.6569 3 18 3H6C5.81172 3 5.6275 3.01734 5.44884 3.05052L7.39831 5H18C18.5523 5 19 5.44772 19 6V11Z", fill: "currentColor" }), index.h("path", { d: "M11 8C11 7.44772 11.4477 7 12 7H16C16.5523 7 17 7.44772 17 8C17 8.55228 16.5523 9 16 9H12C11.4477 9 11 8.55228 11 8Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, null, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.8995 23.8995C24.3551 24.3551 24.3551 25.0938 23.8995 25.5494C23.4439 26.005 22.7052 26.005 22.2496 25.5494L21.1948 24.4947C21.1303 24.4982 21.0654 24.5 21 24.5H7C5.067 24.5 3.5 22.933 3.5 21V7C3.5 6.93462 3.50179 6.86966 3.50533 6.80516L2.4506 5.75043C1.99498 5.29482 1.99498 4.55612 2.4506 4.10051C2.90621 3.6449 3.6449 3.6449 4.10051 4.10051L23.8995 23.8995ZM5.83333 9.13316V12.8333H9.5335L5.83333 9.13316ZM11.8668 15.1667H5.83333V21C5.83333 21.6443 6.35567 22.1667 7 22.1667H18.8668L11.8668 15.1667Z", fill: "currentColor" }), index.h("path", { d: "M22.1667 12.8333H15.6314L17.9647 15.1667H22.1667V19.3686L24.4411 21.643C24.4798 21.4346 24.5 21.2197 24.5 21V7C24.5 5.067 22.933 3.5 21 3.5H7C6.78034 3.5 6.56542 3.52023 6.35698 3.55894L8.63137 5.83333H21C21.6443 5.83333 22.1667 6.35567 22.1667 7V12.8333Z", fill: "currentColor" }), index.h("path", { d: "M12.8333 9.33333C12.8333 8.689 13.3557 8.16667 14 8.16667H18.6667C19.311 8.16667 19.8333 8.689 19.8333 9.33333C19.8333 9.97766 19.311 10.5 18.6667 10.5H14C13.3557 10.5 12.8333 9.97766 12.8333 9.33333Z", fill: "currentColor" })))));
+  }
+};
+SwirlIconNewsOff.style = swirlIconCss;
+
+exports.swirl_icon_news_off = SwirlIconNewsOff;

package/dist/cjs/swirl-shell-layout.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-1de6abbd.js');
 const index$1 = require('./index-2ddd0598.js');
 const focusTrap_esm = require('./focus-trap.esm-a1e3774c.js');
 
-const swirlShellLayoutCss = ".sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:14rem;--swirl-shell-sidebar-width:21rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.2s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:\"header header header\"\n      \"nav main sidebar\"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-right.sc-swirl-shell-layout{display:inline-flex}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:hover{width:var(--swirl-shell-extended-nav-width);padding-right:var(--s-space-12)}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover){scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover)::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n          --swirl-shell-sidebar-width\n        )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__main.sc-swirl-shell-layout{width:100%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@media (min-width: 992px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar-body.sc-swirl-shell-layout{border:0.0625rem solid var(--s-border-default);transform:translate3d(0, 0, 0)}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n        --swirl-shell-sidebar-width\n      )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.2s;animation-fill-mode:forwards}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default);color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-4);right:var(--s-space-4);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 992px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-hamburger-menu.sc-swirl-shell-layout{display:none}.shell-layout__navigation-toggle.sc-swirl-shell-layout:hover swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:inline-flex}.shell-layout__navigation-toggle.sc-swirl-shell-layout swirl-icon-double-arrow-right.sc-swirl-shell-layout,.shell-layout__navigation-toggle.sc-swirl-shell-layout swirl-icon-double-arrow-left.sc-swirl-shell-layout{display:none}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.2s, box-shadow 0.2s, width 0.2s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:static;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.2s;inset:0}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}.shell-layout__sidebar.sc-swirl-shell-layout{position:relative;display:none;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.shell-layout__sidebar-body.sc-swirl-shell-layout{z-index:1;display:flex;width:var(--swirl-shell-sidebar-width);height:100%;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);flex-direction:column}@media (min-width: 992px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:absolute;top:0;right:0;bottom:0;transition:transform 0.2s;transform:translate3d(calc(100% + var(--s-space-24)), 0, 0);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 1440px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:relative;transform:none;box-shadow:none;inset:auto}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
+const swirlShellLayoutCss = ".sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:14rem;--swirl-shell-sidebar-width:21rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.2s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:\"header header header\"\n      \"nav main sidebar\"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:hover{width:var(--swirl-shell-extended-nav-width);padding-right:var(--s-space-12)}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover){scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout:not(:hover)::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n          --swirl-shell-sidebar-width\n        )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__main.sc-swirl-shell-layout{width:100%}}.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar.sc-swirl-shell-layout{overflow:initial}@media (min-width: 992px){.shell-layout--sidebar-active.sc-swirl-shell-layout .shell-layout__sidebar-body.sc-swirl-shell-layout{border:0.0625rem solid var(--s-border-default);transform:translate3d(0, 0, 0)}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n        --swirl-shell-sidebar-width\n      )}}.sc-swirl-shell-layout:not(.shell-layout--sidebar-active) .shell-layout__sidebar.sc-swirl-shell-layout{animation:shell-layout-no-overflow-after-transition 0.2s;animation-fill-mode:forwards}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default);color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-4);right:var(--s-space-4);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 992px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.2s, box-shadow 0.2s, width 0.2s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:static;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.2s;inset:0}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}.shell-layout__sidebar.sc-swirl-shell-layout{position:relative;display:none;min-height:0;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.shell-layout__sidebar-body.sc-swirl-shell-layout{z-index:1;display:flex;width:var(--swirl-shell-sidebar-width);height:100%;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);flex-direction:column}@media (min-width: 992px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:absolute;top:0;right:0;bottom:0;transition:transform 0.2s;transform:translate3d(calc(100% + var(--s-space-24)), 0, 0);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 1440px){.shell-layout__sidebar-body.sc-swirl-shell-layout{position:relative;transform:none;box-shadow:none;inset:auto}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
 
 const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
 const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
@@ -109,7 +109,7 @@ const SwirlShellLayout = class {
       "shell-layout--navigation-collapsed": this.navigationCollapsed,
       "shell-layout--sidebar-active": this.sidebarActive,
     });
-    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { class: "shell-layout__header-left" }, index.h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-hamburger-menu", { size: 20 }), index.h("swirl-icon-double-arrow-left", { size: 20 }), index.h("swirl-icon-double-arrow-right", { size: 20 }), index.h("swirl-visually-hidden", null, this.navigationToggleLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, index.h("swirl-icon-arrow-back", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserBackButtonLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, index.h("swirl-icon-arrow-forward", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserForwardButtonLabel)), index.h("slot", { name: "left-header-tools" })), index.h("div", { class: "shell-layout__logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "shell-layout__header-right" }, index.h("slot", { name: "right-header-tools" }), index.h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { class: "shell-layout__header-left" }, index.h("button", { class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { size: 20 }), index.h("swirl-visually-hidden", null, this.navigationToggleLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, index.h("swirl-icon-arrow-back", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserBackButtonLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, index.h("swirl-icon-arrow-forward", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserForwardButtonLabel)), index.h("slot", { name: "left-header-tools" })), index.h("div", { class: "shell-layout__logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "shell-layout__header-right" }, index.h("slot", { name: "right-header-tools" }), index.h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (index.h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
         ? this.sidebarToggleBadgeAriaLabel
         : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), index.h("slot", { name: "avatar" }))), index.h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { class: "shell-layout__mobile-header" }, index.h("slot", { name: "mobile-logo" }), index.h("div", { class: "shell-layout__mobile-header-tools" }, index.h("slot", { name: "mobile-header-tools" }), index.h("button", { class: "shell-layout__header-tool", type: "button" }, index.h("swirl-icon-double-arrow-left", { size: 20 }), index.h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), index.h("div", { class: "shell-layout__nav-body" }, index.h("swirl-visually-hidden", null, index.h("span", { id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { name: "nav" }))), index.h("main", { class: "shell-layout__main", id: "main-content" }, index.h("slot", null)), index.h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, index.h("div", { class: "shell-layout__sidebar-body" }, index.h("div", { class: "shell-layout__sidebar-app-bar" }, index.h("slot", { name: "sidebar-app-bar" })), index.h("div", { class: "shell-layout__sidebar-content" }, index.h("slot", { name: "sidebar" })))))));
   }

package/dist/collection/collection-manifest.json

@@ -183,6 +183,7 @@
     "./components/swirl-icon/icons/swirl-icon-more-horizontal.js",
     "./components/swirl-icon/icons/swirl-icon-more-vertikal.js",
     "./components/swirl-icon/icons/swirl-icon-news-filled.js",
+    "./components/swirl-icon/icons/swirl-icon-news-off.js",
     "./components/swirl-icon/icons/swirl-icon-news.js",
     "./components/swirl-icon/icons/swirl-icon-notifications-active.js",
     "./components/swirl-icon/icons/swirl-icon-notifications-off.js",

package/dist/collection/components/swirl-icon/icons/swirl-icon-news-off.js

@@ -0,0 +1,78 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconNewsOff {
+  constructor() {
+    this.color = undefined;
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { "aria-hidden": "true", class: className, fill: "none", height: this.size, part: "icon", style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6569 13.6569C13.9172 13.9172 13.9172 14.3393 13.6569 14.5997C13.3965 14.86 12.9744 14.86 12.714 14.5997L12.1113 13.997C12.0745 13.999 12.0374 14 12 14H4C2.89543 14 2 13.1046 2 12V4C2 3.96264 2.00102 3.92552 2.00305 3.88866L1.40034 3.28596C1.13999 3.02561 1.13999 2.6035 1.40034 2.34315C1.66069 2.0828 2.0828 2.0828 2.34315 2.34315L13.6569 13.6569ZM3.33333 5.21895V7.33333H5.44772L3.33333 5.21895ZM6.78105 8.66667H3.33333V12C3.33333 12.3682 3.63181 12.6667 4 12.6667H10.781L6.78105 8.66667Z", fill: "currentColor" }), h("path", { d: "M12.6667 7.33333H8.93221L10.2655 8.66667H12.6667V11.0678L13.9663 12.3674C13.9884 12.2483 14 12.1255 14 12V4C14 2.89543 13.1046 2 12 2H4C3.87448 2 3.75167 2.01156 3.63256 2.03368L4.93221 3.33333H12C12.3682 3.33333 12.6667 3.63181 12.6667 4V7.33333Z", fill: "currentColor" }), h("path", { d: "M7.33333 5.33333C7.33333 4.96514 7.63181 4.66667 8 4.66667H10.6667C11.0349 4.66667 11.3333 4.96514 11.3333 5.33333C11.3333 5.70152 11.0349 6 10.6667 6H8C7.63181 6 7.33333 5.70152 7.33333 5.33333Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20.4853 20.4853C20.8758 20.8758 20.8758 21.509 20.4853 21.8995C20.0948 22.29 19.4616 22.29 19.0711 21.8995L18.167 20.9954C18.1117 20.9985 18.056 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 5.94396 3.00154 5.88828 3.00457 5.833L2.10051 4.92894C1.70999 4.53841 1.70999 3.90525 2.10051 3.51472C2.49103 3.1242 3.1242 3.1242 3.51472 3.51472L20.4853 20.4853ZM5 7.82843V11H8.17157L5 7.82843ZM10.1716 13H5V18C5 18.5523 5.44772 19 6 19H16.1716L10.1716 13Z", fill: "currentColor" }), h("path", { d: "M19 11H13.3983L15.3983 13H19V16.6017L20.9495 18.5512C20.9827 18.3725 21 18.1883 21 18V6C21 4.34315 19.6569 3 18 3H6C5.81172 3 5.6275 3.01734 5.44884 3.05052L7.39831 5H18C18.5523 5 19 5.44772 19 6V11Z", fill: "currentColor" }), h("path", { d: "M11 8C11 7.44772 11.4477 7 12 7H16C16.5523 7 17 7.44772 17 8C17 8.55228 16.5523 9 16 9H12C11.4477 9 11 8.55228 11 8Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.8995 23.8995C24.3551 24.3551 24.3551 25.0938 23.8995 25.5494C23.4439 26.005 22.7052 26.005 22.2496 25.5494L21.1948 24.4947C21.1303 24.4982 21.0654 24.5 21 24.5H7C5.067 24.5 3.5 22.933 3.5 21V7C3.5 6.93462 3.50179 6.86966 3.50533 6.80516L2.4506 5.75043C1.99498 5.29482 1.99498 4.55612 2.4506 4.10051C2.90621 3.6449 3.6449 3.6449 4.10051 4.10051L23.8995 23.8995ZM5.83333 9.13316V12.8333H9.5335L5.83333 9.13316ZM11.8668 15.1667H5.83333V21C5.83333 21.6443 6.35567 22.1667 7 22.1667H18.8668L11.8668 15.1667Z", fill: "currentColor" }), h("path", { d: "M22.1667 12.8333H15.6314L17.9647 15.1667H22.1667V19.3686L24.4411 21.643C24.4798 21.4346 24.5 21.2197 24.5 21V7C24.5 5.067 22.933 3.5 21 3.5H7C6.78034 3.5 6.56542 3.52023 6.35698 3.55894L8.63137 5.83333H21C21.6443 5.83333 22.1667 6.35567 22.1667 7V12.8333Z", fill: "currentColor" }), h("path", { d: "M12.8333 9.33333C12.8333 8.689 13.3557 8.16667 14 8.16667H18.6667C19.311 8.16667 19.8333 8.689 19.8333 9.33333C19.8333 9.97766 19.311 10.5 18.6667 10.5H14C13.3557 10.5 12.8333 9.97766 12.8333 9.33333Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-news-off"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconColor",
+          "resolved": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+          "references": {
+            "SwirlIconColor": {
+              "location": "import",
+              "path": "../swirl-icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

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

@@ -66,14 +66,6 @@
         --swirl-badge-border-color: var(--s-action-primary-default);
       }
 
-.shell-layout--navigation-collapsed .shell-layout__navigation-toggle:hover swirl-icon-double-arrow-left {
-        display: none;
-      }
-
-.shell-layout--navigation-collapsed .shell-layout__navigation-toggle:hover swirl-icon-double-arrow-right {
-        display: inline-flex;
-      }
-
 @media (min-width: 992px) {
 
 .shell-layout--navigation-collapsed .shell-layout__nav:hover {
@@ -215,6 +207,7 @@
 
 .shell-layout__header-left {
   display: flex;
+  padding-left: var(--s-space-2);
   flex-basis: 8rem;
   flex-shrink: 0;
   align-items: center;
@@ -301,19 +294,6 @@
 }
   }
 
-.shell-layout__navigation-toggle:hover swirl-icon-hamburger-menu {
-      display: none;
-    }
-
-.shell-layout__navigation-toggle:hover swirl-icon-double-arrow-left {
-      display: inline-flex;
-    }
-
-.shell-layout__navigation-toggle swirl-icon-double-arrow-right,
-  .shell-layout__navigation-toggle swirl-icon-double-arrow-left {
-    display: none;
-  }
-
 .shell-layout__nav {
   position: fixed;
   z-index: 9;

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

@@ -111,7 +111,7 @@ export class SwirlShellLayout {
       "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("slot", { name: "left-header-tools" })), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("slot", { name: "right-header-tools" }), 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
+    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", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { 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("slot", { name: "left-header-tools" })), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("slot", { name: "right-header-tools" }), 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: "avatar" }))), 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" })))))));
   }

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

@@ -14,6 +14,6 @@ describe("swirl-shell-layout", () => {
         <div slot="sidebar">Sidebar</div>
       </swirl-shell-layout>`,
     });
-    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\\"><button class=\\"shell-layout__header-tool shell-layout__navigation-toggle\\" type=\\"button\\"><swirl-icon-hamburger-menu size=\\"20\\"></swirl-icon-hamburger-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></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\\" 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>"`);
+    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\\"><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-dock-left size=\\"20\\"></swirl-icon-dock-left><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></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\\" 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>"`);
   });
 });