@getflip/swirl-components 0.363.0 → 0.363.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/swirl-shell-layout.cjs.entry.js +9 -9
- package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css +7 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +8 -8
- package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.css +3 -0
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-shell-layout.js +9 -9
- package/dist/components/swirl-shell-navigation-item.js +1 -1
- package/dist/esm/swirl-shell-layout.entry.js +9 -9
- package/dist/esm/swirl-shell-navigation-item.entry.js +1 -1
- package/dist/swirl-components/p-5e243452.entry.js +1 -0
- package/dist/swirl-components/{p-95fbbb55.entry.js → p-f13bc5c2.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-8caae638.entry.js +0 -1
|
@@ -16,7 +16,7 @@ import { d as defineCustomElement$4 } from './swirl-stack2.js';
|
|
|
16
16
|
import { d as defineCustomElement$3 } from './swirl-tooltip2.js';
|
|
17
17
|
import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
|
|
18
18
|
|
|
19
|
-
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:18rem;--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.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-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{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@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.1s;animation-fill-mode:forwards}.shell-layout--sidebar-scrollable.sc-swirl-shell-layout:not(.shell-layout--sidebar-scrolled-to-top) .shell-layout__sidebar-app-bar.sc-swirl-shell-layout{border-bottom-color:var(--s-border-default)}.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--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.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;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);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-2);right:var(--s-space-2);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-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;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.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(32% - var(--s-space-8))}.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.1s;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}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid transparent}.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}}";
|
|
19
|
+
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:18rem;--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.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-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{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@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.1s;animation-fill-mode:forwards}.shell-layout--sidebar-scrollable.sc-swirl-shell-layout:not(.shell-layout--sidebar-scrolled-to-top) .shell-layout__sidebar-app-bar.sc-swirl-shell-layout{border-bottom-color:var(--s-border-default)}.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--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.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;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);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-2);right:var(--s-space-2);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-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;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.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul{row-gap:var(--s-space-16);-moz-column-gap:0;column-gap:0}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(100% / 3)}.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.1s;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}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid transparent}.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}}";
|
|
20
20
|
|
|
21
21
|
const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
|
|
22
22
|
const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
|
|
@@ -105,7 +105,6 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
105
105
|
this.collectNavItems();
|
|
106
106
|
this.navMutationObserver = new MutationObserver(() => {
|
|
107
107
|
this.collectNavItems();
|
|
108
|
-
this.setSecondaryNavItemsTiled();
|
|
109
108
|
});
|
|
110
109
|
this.navMutationObserver.observe(this.navElement, {
|
|
111
110
|
childList: true,
|
|
@@ -144,6 +143,7 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
144
143
|
watchNavigationCollapsed() {
|
|
145
144
|
localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
|
|
146
145
|
this.toggleNavItemLabels();
|
|
146
|
+
this.setSecondaryNavItemsTiled();
|
|
147
147
|
}
|
|
148
148
|
watchSidebarActive() {
|
|
149
149
|
localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
|
|
@@ -216,26 +216,26 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
|
|
|
216
216
|
"shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
|
|
217
217
|
"shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
|
|
218
218
|
});
|
|
219
|
-
return (h(Host, { key: '
|
|
219
|
+
return (h(Host, { key: '628b0239a6325d6e59d57a3ac122bd71c86332ac' }, h("div", { key: '62e3364f3d3f0a2529b34012b98970dc7afbc558', class: className }, h("header", { key: 'a4aaea70bae5ac06a8940a364623c0f1d9a0f7db', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'b119a9efebc481f0a89a7f6c8cbda5822c299657', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '65476e53eca4c4a13abe9d93f39a5d9b4eab2d10', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '3d6517107efcca90bd7e35e0821f785a1addc281', content: this.navigationCollapsed
|
|
220
220
|
? this.expandNavigationButtonLabel
|
|
221
|
-
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '
|
|
221
|
+
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '3ad74046c3d2826bfd923989b5ddf00a3cf0cb09', 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: '4e4f4d2e355775dfb6ff15445672df7e51bf6df1' }, this.navigationCollapsed
|
|
222
222
|
? this.expandNavigationButtonLabel
|
|
223
|
-
: this.collapseNavigationButtonLabel))), h("a", { key: '
|
|
223
|
+
: this.collapseNavigationButtonLabel))), h("a", { key: '0c4f8f92df65d9607166e4a1d07d9b2ecbc09a04', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '8c8df719671229b748f419711182b4b1d1b38a8f', size: 20 }), h("swirl-visually-hidden", { key: '974d1625c5f3a7bbe04faef98f68e51581777a00' }, this.browserBackButtonLabel)), h("a", { key: '9375147f7dba53cb62a8caa48a2b86373a5d656f', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '6c2b91011ce28f3f24252798d92b226d74389d36', size: 20 }), h("swirl-visually-hidden", { key: '05e66fdc139584c0e6b8d1b5b33fdf50aa636d52' }, this.browserForwardButtonLabel)), h("slot", { key: '5162118dfad58b80cb8f124b856dc438c7a6c473', name: "left-header-tools" })), h("div", { key: 'ab60ae994ef7e65eb932ada1af8f7d65d1cedf09', class: "shell-layout__logo" }, h("slot", { key: 'cdea707605a9b7c68dc0cc296820f6bc06297142', name: "logo" })), h("div", { key: '4c13e5878a20d867103b9feb3f9cb27aa6fef4d9', class: "shell-layout__header-right" }, h("slot", { key: '3c4acb3981f8b152893b2d212c64492eac0b7f53', name: "right-header-tools" }), h("button", { key: '71a135e5f35d75c982d1a8daf4df375b22587644', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '10ea578c29fbf33eb77c6b068b046e7be66ad516', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '51fccb8014557d06195689ec61b7255d4a0fb449' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '20d812a01969fd87159eff00da7f020e95b39f2e', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
224
224
|
? this.sidebarToggleBadgeAriaLabel
|
|
225
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '
|
|
225
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '0e4e5bd5060be685f7932bbb751c1d4018ca8501', name: "avatar" }))), h("div", { key: 'e13859eb6cb1241f2785cfd9d6e413d4b5377934', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '28712f6cae073f31ddf5008fd6c6a406eb96b143', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '3832ebc73dcf729177fcf52a8a0c7a49d65548cf', class: "shell-layout__mobile-header" }, h("slot", { key: 'a53481a65c10c81da3042f20f22cc0b7ab07a236', name: "mobile-logo" }), h("div", { key: 'de4d6a748d7807f43075af93263b3885cd10d0bf', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '6279924cf235bedfe903484b231c94710661b9fc', name: "mobile-header-tools" }), h("button", { key: 'c8bb1aa7eed100fb730c0ed9080c99ff653c65f2', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'a528085d6dbe080f92b94642d8598ce6b88353b0', size: 20 }), h("swirl-visually-hidden", { key: 'a96b1990f453de202370874d33bb39c17488353f' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'aa8b5c48091996f6b598e3dc40bb1c34993f2873', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '3ca6dfb2049669d5234827d2aaebdb4de3ebc129' }, h("span", { key: 'a95f9dbfa884188762b7f1f2f12f2874f0ddf386', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '5182c7cf4d4a8090f77ccd3ebb02fdc3310545f0', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'ae33f496399ad791199d20e5115b5ba5d7b4af52', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'b6fa20f6596cc6893191ebf8c73ab06729042df7', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '561badbcf05812085ab6deee1e8bc21d2c5114f8', paddingBlockEnd: "16" }, h("swirl-stack", { key: '3f7e37adc62d0e84c3766e99e6856d4f4f791f7a', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'e6c9ef70f5adc2cd706f587f2529c5e1f3eec275', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
|
|
226
226
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
227
227
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
228
228
|
? this.secondaryNavExpandLabel
|
|
229
|
-
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '
|
|
229
|
+
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '38cbe7241785b6f74ae8b097e5471fdfdfc37f62', icon: this.secondaryNavView === "grid"
|
|
230
230
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
231
231
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
232
232
|
? this.gridNavLayoutToggleLabel
|
|
233
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '
|
|
233
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: 'f281e5540e6a30b69cf1b69d51749f74987c0bee', class: {
|
|
234
234
|
[`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
|
|
235
235
|
"shell-layout__secondary-nav-items": true,
|
|
236
236
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
237
237
|
this.secondaryNavView === "grid",
|
|
238
|
-
} }, h("slot", { key: '
|
|
238
|
+
} }, h("slot", { key: 'd4703ece0f8c3f0259a3475e546c4228a7e456a3', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '19866fcf65b21cd4822ffd3cfb8e114e61c64cb5', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '9fad863f37c5542b9c6942750a26a97819076040' })), h("aside", { key: '609c70a85bef0fe48088d3f065dbe951bdfd95c8', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '0ac65b1b87c2971771d9c539bf94b20c6173667e', class: "shell-layout__sidebar-body" }, h("div", { key: '86da5fdd6629ff641ccac52bd0590fb981c7fac3', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'f002916b3d97704079f70f0d5d961f6f49bd5905', name: "sidebar-app-bar" })), h("div", { key: '1b00cfdec4f37e7c457688438ce220df2c2599df', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '9f5c8633267ac25bc475db84b827b3f768d27924', name: "sidebar" })))))));
|
|
239
239
|
}
|
|
240
240
|
get el() { return this; }
|
|
241
241
|
static get watchers() { return {
|
|
@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './swirl-tag2.js';
|
|
|
6
6
|
import { d as defineCustomElement$3 } from './swirl-tooltip2.js';
|
|
7
7
|
import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
|
|
8
8
|
|
|
9
|
-
const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 2rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge,\n .shell-navigation-item:hover .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge,\n .shell-navigation-item:active .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--filled {\n padding: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n color: var(--s-icon-on-action-primary);\n background-color: var(--s-action-primary-default);\n }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: \"\";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n --swirl-app-icon-size: 100%;\n font-size: var(--s-font-size-xs);\n padding: var(--s-space-8) var(--s-space-4);\n align-items: center;\n height: auto;\n border-radius: var(--s-border-radius-sm);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n padding: var(--s-space-8);\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n max-width: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n max-width: 2rem;\n max-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n max-width: 3.5rem;\n height: auto;\n border-radius: var(--s-border-radius-base);\n\n color: var(--s-icon-on-action-primary);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n max-width: 3.5rem;\n max-height: 3.5rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n line-height: var(--s-line-height-xs);\n text-align: center;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\n }\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n margin-left: var(--s-space-8);\n font-weight: var(--s-font-weight-normal);\n color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n position: absolute;\n top: 0.625rem;\n right: 0.625rem;\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n";
|
|
9
|
+
const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 2rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge,\n .shell-navigation-item:hover .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge,\n .shell-navigation-item:active .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--filled {\n padding: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n color: var(--s-icon-on-action-primary);\n background-color: var(--s-action-primary-default);\n }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: \"\";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n --swirl-app-icon-size: 100%;\n font-size: var(--s-font-size-xs);\n padding: var(--s-space-8) var(--s-space-4);\n align-items: center;\n height: auto;\n border-radius: var(--s-border-radius-sm);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n align-items: start;\n padding: var(--s-space-8);\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n max-width: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n max-width: 2rem;\n max-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n max-width: 3.5rem;\n height: auto;\n border-radius: var(--s-border-radius-base);\n\n color: var(--s-icon-on-action-primary);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n max-width: 3.5rem;\n max-height: 3.5rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n line-height: var(--s-line-height-xs);\n text-align: center;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\n }\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n margin-left: var(--s-space-8);\n font-weight: var(--s-font-weight-normal);\n color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n position: absolute;\n top: 0.625rem;\n right: 0.625rem;\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n";
|
|
10
10
|
|
|
11
11
|
const SwirlShellNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellNavigationItem extends HTMLElement {
|
|
12
12
|
constructor() {
|
|
@@ -3,7 +3,7 @@ import { c as classnames } from './index-orsBiyT_.js';
|
|
|
3
3
|
import { c as createFocusTrap } from './focus-trap.esm-DIdMBZfn.js';
|
|
4
4
|
import { d as debounce, m as isDesktopViewport } from './utils-D_MUFqkF.js';
|
|
5
5
|
|
|
6
|
-
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:18rem;--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.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-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{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@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.1s;animation-fill-mode:forwards}.shell-layout--sidebar-scrollable.sc-swirl-shell-layout:not(.shell-layout--sidebar-scrolled-to-top) .shell-layout__sidebar-app-bar.sc-swirl-shell-layout{border-bottom-color:var(--s-border-default)}.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--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.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;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);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-2);right:var(--s-space-2);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-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;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.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(32% - var(--s-space-8))}.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.1s;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}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid transparent}.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}}";
|
|
6
|
+
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:18rem;--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.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-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{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@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.1s;animation-fill-mode:forwards}.shell-layout--sidebar-scrollable.sc-swirl-shell-layout:not(.shell-layout--sidebar-scrolled-to-top) .shell-layout__sidebar-app-bar.sc-swirl-shell-layout{border-bottom-color:var(--s-border-default)}.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--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.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;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);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-2);right:var(--s-space-2);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-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;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.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul{row-gap:var(--s-space-16);-moz-column-gap:0;column-gap:0}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(100% / 3)}.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.1s;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}}@media (prefers-reduced-motion){.shell-layout__sidebar-body.sc-swirl-shell-layout{transition:none}}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid transparent}.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}}";
|
|
7
7
|
|
|
8
8
|
const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
|
|
9
9
|
const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
|
|
@@ -91,7 +91,6 @@ const SwirlShellLayout = class {
|
|
|
91
91
|
this.collectNavItems();
|
|
92
92
|
this.navMutationObserver = new MutationObserver(() => {
|
|
93
93
|
this.collectNavItems();
|
|
94
|
-
this.setSecondaryNavItemsTiled();
|
|
95
94
|
});
|
|
96
95
|
this.navMutationObserver.observe(this.navElement, {
|
|
97
96
|
childList: true,
|
|
@@ -130,6 +129,7 @@ const SwirlShellLayout = class {
|
|
|
130
129
|
watchNavigationCollapsed() {
|
|
131
130
|
localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
|
|
132
131
|
this.toggleNavItemLabels();
|
|
132
|
+
this.setSecondaryNavItemsTiled();
|
|
133
133
|
}
|
|
134
134
|
watchSidebarActive() {
|
|
135
135
|
localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
|
|
@@ -202,26 +202,26 @@ const SwirlShellLayout = class {
|
|
|
202
202
|
"shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
|
|
203
203
|
"shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
|
|
204
204
|
});
|
|
205
|
-
return (h(Host, { key: '
|
|
205
|
+
return (h(Host, { key: '628b0239a6325d6e59d57a3ac122bd71c86332ac' }, h("div", { key: '62e3364f3d3f0a2529b34012b98970dc7afbc558', class: className }, h("header", { key: 'a4aaea70bae5ac06a8940a364623c0f1d9a0f7db', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'b119a9efebc481f0a89a7f6c8cbda5822c299657', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '65476e53eca4c4a13abe9d93f39a5d9b4eab2d10', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '3d6517107efcca90bd7e35e0821f785a1addc281', content: this.navigationCollapsed
|
|
206
206
|
? this.expandNavigationButtonLabel
|
|
207
|
-
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '
|
|
207
|
+
: this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '3ad74046c3d2826bfd923989b5ddf00a3cf0cb09', 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: '4e4f4d2e355775dfb6ff15445672df7e51bf6df1' }, this.navigationCollapsed
|
|
208
208
|
? this.expandNavigationButtonLabel
|
|
209
|
-
: this.collapseNavigationButtonLabel))), h("a", { key: '
|
|
209
|
+
: this.collapseNavigationButtonLabel))), h("a", { key: '0c4f8f92df65d9607166e4a1d07d9b2ecbc09a04', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '8c8df719671229b748f419711182b4b1d1b38a8f', size: 20 }), h("swirl-visually-hidden", { key: '974d1625c5f3a7bbe04faef98f68e51581777a00' }, this.browserBackButtonLabel)), h("a", { key: '9375147f7dba53cb62a8caa48a2b86373a5d656f', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '6c2b91011ce28f3f24252798d92b226d74389d36', size: 20 }), h("swirl-visually-hidden", { key: '05e66fdc139584c0e6b8d1b5b33fdf50aa636d52' }, this.browserForwardButtonLabel)), h("slot", { key: '5162118dfad58b80cb8f124b856dc438c7a6c473', name: "left-header-tools" })), h("div", { key: 'ab60ae994ef7e65eb932ada1af8f7d65d1cedf09', class: "shell-layout__logo" }, h("slot", { key: 'cdea707605a9b7c68dc0cc296820f6bc06297142', name: "logo" })), h("div", { key: '4c13e5878a20d867103b9feb3f9cb27aa6fef4d9', class: "shell-layout__header-right" }, h("slot", { key: '3c4acb3981f8b152893b2d212c64492eac0b7f53', name: "right-header-tools" }), h("button", { key: '71a135e5f35d75c982d1a8daf4df375b22587644', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '10ea578c29fbf33eb77c6b068b046e7be66ad516', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '51fccb8014557d06195689ec61b7255d4a0fb449' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '20d812a01969fd87159eff00da7f020e95b39f2e', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
210
210
|
? this.sidebarToggleBadgeAriaLabel
|
|
211
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '
|
|
211
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '0e4e5bd5060be685f7932bbb751c1d4018ca8501', name: "avatar" }))), h("div", { key: 'e13859eb6cb1241f2785cfd9d6e413d4b5377934', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '28712f6cae073f31ddf5008fd6c6a406eb96b143', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '3832ebc73dcf729177fcf52a8a0c7a49d65548cf', class: "shell-layout__mobile-header" }, h("slot", { key: 'a53481a65c10c81da3042f20f22cc0b7ab07a236', name: "mobile-logo" }), h("div", { key: 'de4d6a748d7807f43075af93263b3885cd10d0bf', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '6279924cf235bedfe903484b231c94710661b9fc', name: "mobile-header-tools" }), h("button", { key: 'c8bb1aa7eed100fb730c0ed9080c99ff653c65f2', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'a528085d6dbe080f92b94642d8598ce6b88353b0', size: 20 }), h("swirl-visually-hidden", { key: 'a96b1990f453de202370874d33bb39c17488353f' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'aa8b5c48091996f6b598e3dc40bb1c34993f2873', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '3ca6dfb2049669d5234827d2aaebdb4de3ebc129' }, h("span", { key: 'a95f9dbfa884188762b7f1f2f12f2874f0ddf386', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '5182c7cf4d4a8090f77ccd3ebb02fdc3310545f0', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'ae33f496399ad791199d20e5115b5ba5d7b4af52', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: 'b6fa20f6596cc6893191ebf8c73ab06729042df7', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: '561badbcf05812085ab6deee1e8bc21d2c5114f8', paddingBlockEnd: "16" }, h("swirl-stack", { key: '3f7e37adc62d0e84c3766e99e6856d4f4f791f7a', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'e6c9ef70f5adc2cd706f587f2529c5e1f3eec275', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
|
|
212
212
|
? "<swirl-icon-expand-more></swirl-icon-expand-more>"
|
|
213
213
|
: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
|
|
214
214
|
? this.secondaryNavExpandLabel
|
|
215
|
-
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '
|
|
215
|
+
: this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '38cbe7241785b6f74ae8b097e5471fdfdfc37f62', icon: this.secondaryNavView === "grid"
|
|
216
216
|
? "<swirl-icon-menu></swirl-icon-menu>"
|
|
217
217
|
: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
|
|
218
218
|
? this.gridNavLayoutToggleLabel
|
|
219
|
-
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '
|
|
219
|
+
: this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: 'f281e5540e6a30b69cf1b69d51749f74987c0bee', class: {
|
|
220
220
|
[`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
|
|
221
221
|
"shell-layout__secondary-nav-items": true,
|
|
222
222
|
"shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
|
|
223
223
|
this.secondaryNavView === "grid",
|
|
224
|
-
} }, h("slot", { key: '
|
|
224
|
+
} }, h("slot", { key: 'd4703ece0f8c3f0259a3475e546c4228a7e456a3', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '19866fcf65b21cd4822ffd3cfb8e114e61c64cb5', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '9fad863f37c5542b9c6942750a26a97819076040' })), h("aside", { key: '609c70a85bef0fe48088d3f065dbe951bdfd95c8', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '0ac65b1b87c2971771d9c539bf94b20c6173667e', class: "shell-layout__sidebar-body" }, h("div", { key: '86da5fdd6629ff641ccac52bd0590fb981c7fac3', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'f002916b3d97704079f70f0d5d961f6f49bd5905', name: "sidebar-app-bar" })), h("div", { key: '1b00cfdec4f37e7c457688438ce220df2c2599df', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '9f5c8633267ac25bc475db84b827b3f768d27924', name: "sidebar" })))))));
|
|
225
225
|
}
|
|
226
226
|
get el() { return getElement(this); }
|
|
227
227
|
static get watchers() { return {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, d as getElement } from './index-CWOhMVtL.js';
|
|
2
2
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
3
3
|
|
|
4
|
-
const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 2rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge,\n .shell-navigation-item:hover .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge,\n .shell-navigation-item:active .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--filled {\n padding: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n color: var(--s-icon-on-action-primary);\n background-color: var(--s-action-primary-default);\n }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: \"\";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n --swirl-app-icon-size: 100%;\n font-size: var(--s-font-size-xs);\n padding: var(--s-space-8) var(--s-space-4);\n align-items: center;\n height: auto;\n border-radius: var(--s-border-radius-sm);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n padding: var(--s-space-8);\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n max-width: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n max-width: 2rem;\n max-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n max-width: 3.5rem;\n height: auto;\n border-radius: var(--s-border-radius-base);\n\n color: var(--s-icon-on-action-primary);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n max-width: 3.5rem;\n max-height: 3.5rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n line-height: var(--s-line-height-xs);\n text-align: center;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\n }\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n margin-left: var(--s-space-8);\n font-weight: var(--s-font-weight-normal);\n color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n position: absolute;\n top: 0.625rem;\n right: 0.625rem;\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n";
|
|
4
|
+
const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 2rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge,\n .shell-navigation-item:hover .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge,\n .shell-navigation-item:active .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--filled {\n padding: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n color: var(--s-icon-on-action-primary);\n background-color: var(--s-action-primary-default);\n }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: \"\";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n --swirl-app-icon-size: 100%;\n font-size: var(--s-font-size-xs);\n padding: var(--s-space-8) var(--s-space-4);\n align-items: center;\n height: auto;\n border-radius: var(--s-border-radius-sm);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n align-items: start;\n padding: var(--s-space-8);\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n max-width: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n max-width: 2rem;\n max-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n max-width: 3.5rem;\n height: auto;\n border-radius: var(--s-border-radius-base);\n\n color: var(--s-icon-on-action-primary);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n max-width: 3.5rem;\n max-height: 3.5rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n line-height: var(--s-line-height-xs);\n text-align: center;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\n }\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n margin-left: var(--s-space-8);\n font-weight: var(--s-font-weight-normal);\n color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n position: absolute;\n top: 0.625rem;\n right: 0.625rem;\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n";
|
|
5
5
|
|
|
6
6
|
const SwirlShellNavigationItem = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as n,h as i,H as e,d as a}from"./p-CWOhMVtL.js";import{c as t}from"./p-orsBiyT_.js";const l=class{constructor(i){n(this,i),this.hideLabel=!1,this.inlineLabelColor="default",this.markAsNewLabel="New",this.variant="default"}componentWillLoad(){this.forceIconProps()}componentDidRender(){this.forceIconProps()}forceIconProps(){const n=this.el.querySelector("[slot='icon']"),i=this.hideLabel&&"app-icon"===this.variant||"default"===this.variant;n&&(n.tagName.startsWith("SWIRL-ICON")||n.tagName.startsWith("SWIRL-EMOJI")||n.tagName.startsWith("SWIRL-SYMBOL"))&&n.setAttribute("size",i?"20":"24")}render(){const n=Boolean(this.el.querySelector("swirl-app-icon")),a=t("shell-navigation-item",`shell-navigation-item--${this.variant}`,{"shell-navigation-item--active":this.active,"shell-navigation-item--boxed":this.boxed,"shell-navigation-item--filled":this.filled,"shell-navigation-item--inline-label":this.inlineLabel,"shell-navigation-item--gradient":this.withGradient,"shell-navigation-item--hide-label":this.hideLabel,"shell-navigation-item--has-app-icon":n}),l=t("shell-navigation-item__label",{"shell-navigation-item__label--light":"light"===this.inlineLabelColor,"shell-navigation-item__label--dark":"dark"===this.inlineLabelColor,"shell-navigation-item__label--inline":this.inlineLabel}),s=null!=this.badgeLabel,o=!s&&this.markAsNew&&!this.hideLabel&&"default"===this.variant,r=!s&&this.markAsNew&&this.hideLabel&&"default"===this.variant,h=Boolean(this.href);return i(e,{key:"8cdedcd426b2b2e2009c935f803d63426c4e4515"},i("swirl-tooltip",{key:"ef8e5f86988bbba1cfbe8c1dc446b6d3bb500446",active:this.hideLabel,content:this.description?`${this.label} ${this.description}`:this.label,delay:100,position:"right",positioning:"fixed"},i(h?"a":"button",{key:"f36579e7527c60cf9cd70565957b0b7dccf48c8e",class:a,href:this.href,target:this.target,type:h?void 0:"button"},i("span",{key:"69dfc89178aafac77250159e405bd5f4cc3e5e81",class:"shell-navigation-item__icon"},i("slot",{key:"7ba883964fde4ebf9c38acb43a82c2d8994b4d0f",name:"icon"})),this.hideLabel?i("swirl-visually-hidden",null,i("span",{class:l},this.label)):"default"!==this.variant?i("span",{class:l},this.label):i("div",{class:"shell-navigation-item__text-wrapper"},i("span",{class:l},this.label),this.description&&i("span",{class:"shell-navigation-item__description"},this.description)),s&&i("span",{key:"f4687790dafb0a89f136e3dc007533d2b1265884",class:"shell-navigation-item__badge-wrapper"},i("swirl-badge",{key:"a55a2eb28cf4d45c5f7f284f36508779cffee8cc","aria-label":this.badgeLabel,class:t("shell-navigation-item__badge",{"shell-navigation-item__badge--dot":""===this.badgeLabel}),label:this.badgeLabel,size:"xs",variant:""===this.badgeLabel?"dot":"default"})),o&&i("swirl-tag",{key:"ade609e7aca0567a3a81dbfb1b9c8b31ee24d45d",class:"shell-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"s",variant:"strong"}),r&&i("swirl-badge",{key:"de0f0217eb8e3e5a3af86997931c60c638fb81b6",class:"shell-navigation-item__is-new-badge",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"xs",variant:"dot"}))))}get el(){return a(this)}};l.style='/**\n* seems the container query does not work as expected\n*/\n\n:host {\n display: inline-flex;\n width: 100%;\n}\n\n:host * {\n box-sizing: border-box;\n }\n\n.shell-navigation-item {\n --swirl-app-icon-size: 2rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\n position: relative;\n display: flex;\n width: 100%;\n height: 3rem;\n padding: var(--s-space-8);\n flex-shrink: 0;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-decoration: none;\n cursor: pointer;\n container-type: size;\n gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:hover .shell-navigation-item__badge,\n .shell-navigation-item:hover .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:active .shell-navigation-item__badge,\n .shell-navigation-item:active .shell-navigation-item__is-new-badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item:focus {\n outline: none;\n }\n\n.shell-navigation-item:focus-visible {\n z-index: 1;\n box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--filled {\n padding: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n color: var(--s-icon-on-action-primary);\n background-color: var(--s-action-primary-default);\n }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: "";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n --swirl-app-icon-size: 100%;\n font-size: var(--s-font-size-xs);\n padding: var(--s-space-8) var(--s-space-4);\n align-items: center;\n height: auto;\n border-radius: var(--s-border-radius-sm);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n align-items: start;\n padding: var(--s-space-8);\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n max-width: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n max-width: 2rem;\n max-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n max-width: 3.5rem;\n height: auto;\n border-radius: var(--s-border-radius-base);\n\n color: var(--s-icon-on-action-primary);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n max-width: 3.5rem;\n max-height: 3.5rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n line-height: var(--s-line-height-xs);\n text-align: center;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\n }\n\n.shell-navigation-item.shell-navigation-item--active {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n background-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n background-color: var(--s-surface-sunken-pressed);\n }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n background-color: var(--s-surface-sunken-default)\n}\n }\n\n.shell-navigation-item__icon {\n display: inline-flex;\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\n overflow: hidden;\n min-width: 0;\n flex-grow: 1;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.shell-navigation-item__description {\n margin-left: var(--s-space-8);\n font-weight: var(--s-font-weight-normal);\n color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n position: absolute;\n top: 0.625rem;\n right: 0.625rem;\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n .shell-navigation-item__badge {\n position: absolute;\n top: var(--s-space-4);\n right: var(--s-space-4);\n padding: var(--s-space-2);\n }\n\n .shell-navigation-item--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\n }\n\n .shell-navigation-item__badge--dot {\n top: var(--s-space-8);\n right: var(--s-space-8);\n }\n}\n\n@container (min-width: 10rem) {\n .shell-navigation-item__badge--dot {\n padding-right: var(--s-space-4);\n }\n}\n';export{l as swirl_shell_navigation_item}
|