@slotted/angular 0.1.0-beta.0 → 0.1.0-beta.10

package/fesm2022/slotted-angular-app-shell.mjs

@@ -1,6 +1,6 @@
 import { createDismissableLayer } from '@slotted/core/dismissable-layer';
 import { extentAtPoint, holdResizeGesture, anchorsAtStart, stepAmountFromPixels, EXTENT_LARGE_STEP_PX, EXTENT_STEP_PX, stepExtent } from '@slotted/core/extent';
-import { createFocusScope } from '@slotted/core/focus';
+import { createFocusScope, focusTarget } from '@slotted/core/focus';
 import { appShellMessages } from '@slotted/core/i18n';
 import { COMPACT_BELOW, clamp, createWidthGate } from '@slotted/core/measure';
 import { setPortalContainer } from '@slotted/core/portal';
@@ -219,7 +219,7 @@ class SlAppShell {
         return narrow === undefined ? null : narrow ? 'overlay' : 'inline';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedAsideMode" }] : /* istanbul ignore next */ []));
-    asideOverlay = computed(() => this.resolvedAsideMode() === 'overlay' && this.asideOpen(), /* @ts-ignore */
+    asideOverlay = computed(() => this.resolvedAsideMode() === 'overlay' && this.asideOpen() && this.regions().aside, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "asideOverlay" }] : /* istanbul ignore next */ []));
     resolvedCollapsedTo = computed(() => this.collapsedTo() ?? this.defaults.collapsedTo, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedCollapsedTo" }] : /* istanbul ignore next */ []));
@@ -258,7 +258,14 @@ class SlAppShell {
         return narrow === undefined ? null : narrow ? 'overlay' : 'inline';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
-    overlay = computed(() => this.resolvedMode() === 'overlay' && this.navOpen(), /* @ts-ignore */
+    /**
+     * A region nobody rendered has no open state to draw: no `data-open`, no
+     * layer and no veil. The regions register in their constructors, so the
+     * first render already knows which of them are written.
+     */
+    navShownOpen = computed(() => this.navOpen() && this.regions().nav, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navShownOpen" }] : /* istanbul ignore next */ []));
+    overlay = computed(() => this.resolvedMode() === 'overlay' && this.navShownOpen(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
     /**
      * The veil has a presence of its own, as a dialog's backdrop does. The
@@ -337,7 +344,11 @@ class SlAppShell {
            overlay is the region's starting point, not a crossing, and the first
            run closed a region the template had just opened. Only a mode the width
            decided — `auto` resolving narrow — is a crossing on first sight. */
+        /* Crossing back out restores what the crossing in closed, and says
+           `resize` again. The flag records only a close the width made: a region
+           the reader closed while wide stays closed through a narrow window. */
         let wasOverlay;
+        let closedByResize = false;
         effect(() => {
             const mode = this.resolvedMode();
             if (mode === null)
@@ -345,15 +356,26 @@ class SlAppShell {
             const overlay = mode === 'overlay';
             const first = wasOverlay === undefined;
             const entered = overlay && (first ? this.wantedMode() === 'auto' : !wasOverlay);
+            const left = !overlay && wasOverlay === true;
             wasOverlay = overlay;
-            if (!entered)
-                return;
-            queueMicrotask(() => {
-                if (this.navOpen())
+            if (entered) {
+                queueMicrotask(() => {
+                    if (!this.navOpen())
+                        return;
+                    closedByResize = true;
                     this.request(false, 'resize', undefined);
-            });
+                });
+            }
+            else if (left && closedByResize) {
+                closedByResize = false;
+                queueMicrotask(() => {
+                    if (!this.navOpen())
+                        this.request(true, 'resize', undefined);
+                });
+            }
         });
         let asideWasOverlay;
+        let asideClosedByResize = false;
         effect(() => {
             const mode = this.resolvedAsideMode();
             if (mode === null)
@@ -361,13 +383,23 @@ class SlAppShell {
             const overlay = mode === 'overlay';
             const first = asideWasOverlay === undefined;
             const entered = overlay && (first ? this.wantedAsideMode() === 'auto' : !asideWasOverlay);
+            const left = !overlay && asideWasOverlay === true;
             asideWasOverlay = overlay;
-            if (!entered)
-                return;
-            queueMicrotask(() => {
-                if (this.asideOpen())
+            if (entered) {
+                queueMicrotask(() => {
+                    if (!this.asideOpen())
+                        return;
+                    asideClosedByResize = true;
                     this.requestAside(false, 'resize', undefined);
-            });
+                });
+            }
+            else if (left && asideClosedByResize) {
+                asideClosedByResize = false;
+                queueMicrotask(() => {
+                    if (!this.asideOpen())
+                        this.requestAside(true, 'resize', undefined);
+                });
+            }
         });
         /**
          * The overlaid region is a dismissable layer with a focus scope over it.
@@ -548,7 +580,8 @@ class SlAppShell {
     }
     /** Moves focus into the content region, which is where a skip link sends it. */
     focusMain() {
-        this.nodes.main?.focus();
+        if (this.nodes.main)
+            focusTarget(this.nodes.main);
     }
     /**
      * A click that lands on an `a[href]` inside the region asks to close, in the
@@ -569,35 +602,41 @@ class SlAppShell {
         this.request(false, 'select', event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlAppShell, isStandalone: true, selector: "[slAppShell]", inputs: { navOpen: { classPropertyName: "navOpen", publicName: "navOpen", isSignal: true, isRequired: false, transformFunction: null }, asideOpen: { classPropertyName: "asideOpen", publicName: "asideOpen", isSignal: true, isRequired: false, transformFunction: null }, asideExtent: { classPropertyName: "asideExtent", publicName: "asideExtent", isSignal: true, isRequired: false, transformFunction: null }, minAsideExtent: { classPropertyName: "minAsideExtent", publicName: "minAsideExtent", isSignal: true, isRequired: false, transformFunction: null }, maxAsideExtent: { classPropertyName: "maxAsideExtent", publicName: "maxAsideExtent", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, canvas: { classPropertyName: "canvas", publicName: "canvas", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null }, navSide: { classPropertyName: "navSide", publicName: "navSide", isSignal: true, isRequired: false, transformFunction: null }, navSize: { classPropertyName: "navSize", publicName: "navSize", isSignal: true, isRequired: false, transformFunction: null }, asideMode: { classPropertyName: "asideMode", publicName: "asideMode", isSignal: true, isRequired: false, transformFunction: null }, asideSize: { classPropertyName: "asideSize", publicName: "asideSize", isSignal: true, isRequired: false, transformFunction: null }, collapsedTo: { classPropertyName: "collapsedTo", publicName: "collapsedTo", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, separation: { classPropertyName: "separation", publicName: "separation", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, outsidePress: { classPropertyName: "outsidePress", publicName: "outsidePress", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navOpen: "navOpenChange", asideOpen: "asideOpenChange", asideExtent: "asideExtentChange", navOpenChangeRequest: "navOpenChangeRequest", asideOpenChangeRequest: "asideOpenChangeRequest", asideExtentChangeRequest: "asideExtentChangeRequest" }, host: { attributes: { "data-ui": "app-shell", "data-part": "root" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-primary": "resolvedPrimary()", "attr.data-canvas": "resolvedCanvas()", "attr.data-nav-mode": "resolvedMode()", "attr.data-aside-mode": "resolvedAsideMode()", "attr.data-nav-side": "resolvedNavSide()", "attr.data-nav-size": "resolvedNavSize()", "attr.data-aside-size": "resolvedAsideSize()", "attr.data-collapsed-to": "resolvedCollapsedTo()", "attr.data-scroll": "resolvedScroll()", "attr.data-separation": "resolvedSeparation()", "attr.data-open": "navOpen() ? '' : null", "attr.data-dragging": "asideDragging() ? '' : null" } }, viewQueries: [{ propertyName: "veilRef", first: true, predicate: ["scrim"], descendants: true, isSignal: true }], exportAs: ["slAppShell"], ngImport: i0, template: `@if (skipTargets().length > 0) {
-      <div data-part="skip">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlAppShell, isStandalone: true, selector: "[slAppShell]", inputs: { navOpen: { classPropertyName: "navOpen", publicName: "navOpen", isSignal: true, isRequired: false, transformFunction: null }, asideOpen: { classPropertyName: "asideOpen", publicName: "asideOpen", isSignal: true, isRequired: false, transformFunction: null }, asideExtent: { classPropertyName: "asideExtent", publicName: "asideExtent", isSignal: true, isRequired: false, transformFunction: null }, minAsideExtent: { classPropertyName: "minAsideExtent", publicName: "minAsideExtent", isSignal: true, isRequired: false, transformFunction: null }, maxAsideExtent: { classPropertyName: "maxAsideExtent", publicName: "maxAsideExtent", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, canvas: { classPropertyName: "canvas", publicName: "canvas", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null }, navSide: { classPropertyName: "navSide", publicName: "navSide", isSignal: true, isRequired: false, transformFunction: null }, navSize: { classPropertyName: "navSize", publicName: "navSize", isSignal: true, isRequired: false, transformFunction: null }, asideMode: { classPropertyName: "asideMode", publicName: "asideMode", isSignal: true, isRequired: false, transformFunction: null }, asideSize: { classPropertyName: "asideSize", publicName: "asideSize", isSignal: true, isRequired: false, transformFunction: null }, collapsedTo: { classPropertyName: "collapsedTo", publicName: "collapsedTo", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null }, separation: { classPropertyName: "separation", publicName: "separation", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null }, outsidePress: { classPropertyName: "outsidePress", publicName: "outsidePress", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigate: { classPropertyName: "closeOnNavigate", publicName: "closeOnNavigate", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navOpen: "navOpenChange", asideOpen: "asideOpenChange", asideExtent: "asideExtentChange", navOpenChangeRequest: "navOpenChangeRequest", asideOpenChangeRequest: "asideOpenChangeRequest", asideExtentChangeRequest: "asideExtentChangeRequest" }, host: { attributes: { "data-ui": "app-shell", "data-ui-app-shell": "", "data-part": "root", "data-part-root": "" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-primary": "resolvedPrimary()", "attr.data-canvas": "resolvedCanvas()", "attr.data-nav-mode": "resolvedMode()", "attr.data-aside-mode": "resolvedAsideMode()", "attr.data-nav-side": "resolvedNavSide()", "attr.data-nav-size": "resolvedNavSize()", "attr.data-aside-size": "resolvedAsideSize()", "attr.data-collapsed-to": "resolvedCollapsedTo()", "attr.data-scroll": "resolvedScroll()", "attr.data-separation": "resolvedSeparation()", "attr.data-open": "navShownOpen() ? '' : null", "attr.data-dragging": "asideDragging() ? '' : null" } }, viewQueries: [{ propertyName: "veilRef", first: true, predicate: ["scrim"], descendants: true, isSignal: true }], exportAs: ["slAppShell"], ngImport: i0, template: `@if (skipTargets().length > 0) {
+      <div data-part="skip" data-part-skip="">
         @for (target of skipTargets(); track target.href) {
-          <a [href]="'#' + target.href">{{ target.label }}</a>
+          <a [href]="'#' + target.href" (click)="target.href === mainId && focusMain()">{{
+            target.label
+          }}</a>
         }
       </div>
     }
     <ng-content />
     @if (veilStatus() !== 'unmounted') {
-      <div data-part="scrim" [attr.data-status]="veilStatus()" #scrim></div>
+      <div data-part="scrim" data-part-scrim="" [attr.data-status]="veilStatus()" #scrim></div>
     }
-    <div data-part="layer" #layer></div>`, isInline: true, styles: ["@layer slotted.components{[data-ui=app-shell]{--_gutter: var( --slotted-app-shell-gutter, calc(var(--slotted-control-gap-lg, 8px) + var(--slotted-space-2, .25rem)) );--_row-inset: var(--slotted-app-shell-row-inset-size, var(--slotted-space-4, .5rem));--_row-mark: var(--slotted-app-shell-row-mark-size, var(--slotted-control-height-md, 34px));--_row-gap: var(--slotted-control-gap-md, 8px);--_row-font-size: var( --slotted-app-shell-row-text-size, var(--slotted-font-size-sm, .8125rem) );--_row-line-height: var( --slotted-app-shell-row-text-line-height, var(--slotted-line-height-sm, 1.45) );--slotted-app-shell-row-inset: var(--_row-inset);--slotted-app-shell-row-mark: var(--_row-mark);--slotted-app-shell-row-gap: var(--_row-gap);--slotted-app-shell-row-height: var(--_row-mark);--slotted-app-shell-row-font-size: var(--_row-font-size);--slotted-app-shell-row-line-height: var(--_row-line-height);--_nav-size: var(--slotted-app-shell-nav-size-md, 15rem);--_nav-overlay-size: var(--slotted-app-shell-nav-overlay-size, 20rem);--_aside-size: var(--slotted-app-shell-aside-size-md, 20rem);--_rail-size: var( --slotted-app-shell-rail-size, calc(var(--_row-mark) + var(--_row-inset) * 2) );--_edge: var(--_gutter);--_nav-inset: 0px;--_nav-edges: 0px;--_frame: var(--slotted-app-shell-frame, var(--slotted-surface-sunken, Canvas));--_canvas: var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas));--_ink: var(--slotted-app-shell-color, var(--slotted-text, CanvasText));--_scrollbar-thumb: var( --slotted-app-shell-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-app-shell-scrollbar-track-color, transparent);--_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-app-shell-radius, var(--slotted-radius-lg, 8px));--_elevation: var(--slotted-app-shell-elevation, var(--slotted-shadow-xs));--_seam: var(--_rule-width) solid var(--_rule);--_seam-width: var(--_rule-width);--_inner-radius: calc(var(--_radius) - var(--_rule-width));--_scrim: var(--slotted-app-shell-scrim, var(--slotted-scrim, Canvas));--_banner-size: var( --slotted-app-shell-banner-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-5, .75rem) * 2) );--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, cubic-bezier(.2, 0, 0, 1));background-color:var(--_frame);background-image:var(--slotted-app-shell-frame-image, none);background-position:center;background-size:cover;color:var(--_ink);container-name:slotted-app-shell;container-type:inline-size;display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;min-block-size:100%;min-inline-size:0;overflow-x:clip;overflow-y:visible;overflow-inline:clip;overflow-block:visible;position:relative}[data-ui=app-shell][data-nav-size=sm]{--_nav-size: var(--slotted-app-shell-nav-size-sm, 13rem)}[data-ui=app-shell][data-nav-size=lg]{--_nav-size: var(--slotted-app-shell-nav-size-lg, 18rem)}[data-ui=app-shell][data-aside-size=sm]{--_aside-size: var(--slotted-app-shell-aside-size-sm, 16rem)}[data-ui=app-shell][data-aside-size=lg]{--_aside-size: var(--slotted-app-shell-aside-size-lg, 26rem)}[data-ui=app-shell][data-scroll=content]{block-size:100%;container-type:size;max-block-size:100dvh}[data-ui=app-shell]>[data-part=skip]{inset-block-start:0;inset-inline-start:0;position:absolute;z-index:var(--slotted-z-index-popover, 1100)}[data-ui=app-shell]>[data-part=skip]>a{background-color:var(--_canvas);border:var(--_rule-width) solid var(--_rule);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-shadow-md);color:var(--slotted-text, CanvasText);display:inline-block;font-size:var(--slotted-control-font-size-md, 13px);font-weight:var(--slotted-font-weight-medium, 500);inset-block-start:var(--_gutter);inset-inline-start:var(--_gutter);padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-5, .75rem);position:absolute;text-decoration:none;transition:translate var(--_duration) var(--_easing);translate:0 -200%;white-space:nowrap}[data-ui=app-shell]>[data-part=skip]>a:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);translate:0 0}[data-ui=app-shell]>[data-part=banner]{align-items:center;background-color:var(--slotted-app-shell-banner-surface, transparent);color:var( --slotted-app-shell-banner-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-banner;container-type:inline-size;display:flex;gap:var(--_row-gap);grid-area:1 / 1 / 2 / -1;min-block-size:var(--_banner-size);min-inline-size:0;padding-inline:var(--_edge)}[data-ui=app-shell] [data-part=brand]{align-items:center;display:flex;flex:0 1 auto;font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--_row-gap);min-inline-size:0;padding-inline-start:var(--_row-inset)}[data-ui=app-shell] [data-part=brand]>*:not([data-part=nav-toggle]){min-inline-size:0;overflow:var(--slotted-app-shell-brand-overflow, hidden);text-overflow:ellipsis;white-space:var(--slotted-app-shell-brand-wrap, nowrap)}[data-ui=app-shell]>[data-part=banner]>[data-part=actions]{align-items:center;display:flex;flex:0 1 auto;min-inline-size:0;gap:var(--slotted-control-gap-sm, 6px);margin-inline-start:auto;padding-inline-end:var(--_row-inset)}[data-ui=app-shell]>[data-part=banner]>[data-part=actions]>*{flex-shrink:0}[data-ui=app-shell]>[data-part=banner]>[data-part=centre]{align-items:center;display:flex;flex:1 1 auto;gap:var(--_row-gap);min-inline-size:0}[data-ui=app-shell]>[data-part=nav]{background-color:var(--slotted-app-shell-nav-surface, transparent);box-sizing:border-box;color:var( --slotted-app-shell-nav-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-nav;container-type:inline-size;display:flex;flex-direction:column;grid-area:2 / 1 / 3 / 2;min-block-size:0;min-inline-size:0;overflow:hidden;transition:inline-size var(--_duration) var(--_easing),visibility var(--_duration) step-start}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-header],[data-ui=app-shell]>[data-part=nav]>[data-part=nav-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset)}[data-ui=app-shell]>[data-part=nav]>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){padding-inline:var(--_nav-inset)}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-body]{align-items:stretch;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-4, .5rem);scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=app-shell]>[data-part=main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );color:var( --slotted-app-shell-main-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );grid-area:2 / 2 / 3 / 3;isolation:isolate;min-block-size:0;min-inline-size:0}[data-ui=app-shell][data-scroll=content]>[data-part=main]{overflow:auto}[data-ui=app-shell]>[data-part=progress]{contain:strict;grid-area:2 / 2 / 3 / 3;inset-block-start:calc(-1 * var(--_progress-lift, 0px));min-block-size:0;min-inline-size:0;overflow:clip;pointer-events:none;position:relative;z-index:1}[data-ui=app-shell][data-scroll=document]>[data-part=progress]{--slotted-progress-indicator-position: sticky}[data-ui=app-shell]>[data-part=main]:focus{outline:none}[data-ui=app-shell]>[data-part=main]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=app-shell]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );box-sizing:border-box;color:var( --slotted-app-shell-aside-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );display:flex;flex-direction:column;grid-area:3 / 1 / 4 / -1;min-block-size:0;min-inline-size:0}[data-ui=app-shell][data-scroll=content]>[data-part=aside]{overflow:auto}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]:not([data-open]){display:none}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header],[data-ui=app-shell]>[data-part=aside]>[data-part=aside-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset);padding-inline:calc(var(--_row-inset) + var(--_row-gap))}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header]>:not([data-part]){flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-footer]{justify-content:flex-end}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-body]{flex:1 1 auto;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-5, .75rem);padding-inline:calc(var(--_row-inset) + var(--_row-gap));scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-body][data-inset=none]{padding:0}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]{--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);background:transparent;border:0 solid transparent;border-inline-start-width:var(--slotted-border-width-thick, 2px);box-sizing:border-box;cursor:col-resize;display:none;inline-size:var(--_resizer-thickness);inset-block:0;inset-inline-start:0;position:absolute;touch-action:none;transition:border-color var(--_duration) var(--_easing);z-index:1}[data-ui=app-shell][data-nav-side=end]>[data-part=aside]>[data-part=aside-resizer]{border-inline-end-width:var(--slotted-border-width-thick, 2px);border-inline-start-width:0;inset-inline-end:0;inset-inline-start:auto}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:before{content:\"\";inset-block:0;inset-inline:calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2);position:absolute}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:not([data-disabled]):hover,[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:focus-visible,[data-ui=app-shell][data-dragging]>[data-part=aside]>[data-part=aside-resizer]{border-color:var( --slotted-app-shell-resizer-color, var(--slotted-border-strong, ButtonBorder) )}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=app-shell]>[data-part=footer]{align-items:center;background-color:var(--slotted-app-shell-footer-surface, transparent);color:var( --slotted-app-shell-footer-color, var(--slotted-app-shell-color, var(--slotted-text-muted, GrayText)) );display:flex;font-size:var(--slotted-control-font-size-sm, 12px);gap:var(--_row-gap);grid-area:4 / 1 / 5 / -1;min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:calc(var(--_edge) + var(--_row-inset))}[data-ui=app-shell]>[data-part=layer]{display:contents}[data-ui=app-shell][data-canvas=inset]>[data-part=nav]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]>[data-part=main],[data-ui=app-shell][data-canvas=floating]>[data-part=aside],[data-ui=app-shell][data-canvas=inset]>[data-part=main],[data-ui=app-shell][data-canvas=inset]>[data-part=aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]>[data-part=aside],[data-ui=app-shell][data-canvas=inset]>[data-part=aside]{margin-inline-start:0}[data-ui=app-shell][data-canvas=floating]>[data-part=footer],[data-ui=app-shell][data-canvas=panel]>[data-part=footer],[data-ui=app-shell][data-canvas=inset]>[data-part=footer]{padding-block-start:0}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=main],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui=app-shell][data-canvas=flush]{--_edge: var(--_row-inset);--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=flush]>[data-part=banner]{background-color:var( --slotted-app-shell-banner-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=main]{background-color:var(--slotted-app-shell-main-surface, transparent)}[data-ui=app-shell][data-canvas=flush]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=footer]{background-color:var( --slotted-app-shell-footer-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=nav]{padding-block:var(--_gutter)}[data-ui=app-shell][data-canvas=flush]>[data-part=banner]{border-block-end:var(--_seam)}[data-ui=app-shell][data-canvas=flush]>[data-part=footer]{border-block-start:var(--_seam)}[data-ui=app-shell][data-canvas=flush]>[data-part=aside]{border-block-start:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=nav]>[data-part=nav-footer]{border-block-start:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]>[data-part=aside-header]{border-block-end:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]>[data-part=aside-footer]{border-block-start:var(--_seam)}[data-ui=app-shell][data-canvas=floating]>[data-part=nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]{--_edge: calc(var(--_gutter) + var(--_rule-width) + var(--_row-inset));--_nav-edges: calc(2 * var(--_rule-width));--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=floating][data-nav-side=end]>[data-part=nav]{margin-inline:0 var(--_gutter)}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before,[data-ui=app-shell][data-canvas=panel]:before{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);content:\"\";grid-area:1 / 2 / 3 / 3;margin:var(--_gutter);min-inline-size:0}[data-ui=app-shell][data-canvas=panel]:before{grid-area:2 / 1 / 3 / -1;margin:0}[data-ui=app-shell][data-canvas=panel]:is([data-primary=nav],[data-primary=main]):before{grid-area:1 / 1 / 3 / -1}[data-ui=app-shell][data-nav-mode=overlay][data-canvas]:before{content:none}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=banner]{margin-block-start:calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width));padding-inline:0}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=main]{border:none;border-radius:0 0 var(--_inner-radius) var(--_inner-radius);box-shadow:none;margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui=app-shell][data-primary=main]>[data-part=banner],[data-ui=app-shell][data-primary=main][data-nav-side=end]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav][data-nav-side=end]>[data-part=banner]{border-block-end:var(--_seam);grid-column:2 / 3}[data-ui=app-shell][data-primary=main][data-nav-mode=overlay]>[data-part=banner]{margin:0;padding-inline:var(--_edge)}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part=main]{border-radius:0;margin:0}[data-ui=app-shell][data-canvas=panel]{--_edge: calc(var(--_rule-width) + var(--_row-inset));--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay],[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]{--_edge: var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]){box-sizing:border-box;padding-block-end:var(--_gutter);padding-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):is([data-primary=nav],[data-primary=main]){padding-block-start:var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=nav]{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);margin:var(--_rule-width) 0 var(--_rule-width) var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])[data-nav-side=end]>[data-part=nav]{border-radius:0 var(--_inner-radius) var(--_inner-radius) 0;margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=main]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part=main]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-primary=banner])>[data-part=banner]{margin-block-start:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=main]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=banner]{margin-inline-end:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-aside-mode=overlay])>[data-part=aside]{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part=main]{border-block-start:var(--_rule-width) solid var(--_rule)}[data-ui=app-shell]:is([data-canvas=flush],[data-primary=main]),[data-ui=app-shell][data-canvas=panel][data-primary=nav]{--_progress-lift: var(--_seam-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]{--_progress-lift: var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]{--_progress-lift: 0px}[data-ui=app-shell][data-canvas=floating]>[data-part=progress],[data-ui=app-shell][data-canvas=inset]>[data-part=progress]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=progress],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=progress]{border-radius:0 0 var(--_inner-radius) var(--_inner-radius);margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=progress]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part=progress]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=progress]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui=app-shell][data-separation=tone]{--_seam: none;--_seam-width: 0px}[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=footer]{--_ground: var( --slotted-app-shell-footer-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part=banner]{--_ground: var( --slotted-app-shell-banner-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part=nav]{--_ground: var( --slotted-app-shell-nav-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part=aside]{--_ground: var( --slotted-app-shell-aside-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell][data-separation=tone]>[data-part=nav]>[data-part=nav-rail]{--_ground: var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) )}[data-ui=app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part=banner],[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=footer],[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>:is([data-part=nav],[data-part=aside]),[data-ui=app-shell][data-separation=tone]>[data-part=nav]>[data-part=nav-rail]{--slotted-tone-secondary-subtle-hover: color-mix( in oklab, var(--_ground), var(--slotted-text) 4% );--slotted-tone-secondary-subtle-active: color-mix( in oklab, var(--_ground), var(--slotted-text) 7% );background-color:var(--_ground)}[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail]){display:grid;grid-template-columns:var(--_rail-size) minmax(var(--_nav-size),1fr);grid-template-rows:auto minmax(0,1fr) auto}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-rail]{align-items:center;border-inline-end:var(--_seam);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);grid-area:1 / 1 / -1 / 2;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block:var(--_row-inset);scrollbar-width:none}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-header]{grid-area:1 / 2 / 2 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-body]{grid-area:2 / 2 / 3 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-footer]{grid-area:3 / 2 / 4 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){padding-inline-start:var(--_row-inset);transition:visibility var(--_duration) step-start}[data-ui=app-shell][data-nav-mode=inline][data-open]>[data-part=nav]:has(>[data-part=nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-size) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]:has(>[data-part=nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]:has(>[data-part=nav-rail])>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){transition:visibility var(--_duration) step-end;visibility:hidden}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-rail]{border-inline-end:none}@media(forced-colors:active){[data-ui=app-shell][data-separation=tone]{--_seam: var(--_rule-width) solid CanvasText;--_seam-width: var(--_rule-width)}}[data-ui=app-shell] [data-part=nav-toggle],[data-ui=app-shell] [data-part=aside-toggle]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px);background-color:transparent;block-size:var(--_row-mark);border:none;border-radius:var(--slotted-control-radius, 4px);color:color-mix(in oklab,currentcolor 70%,transparent);cursor:pointer;display:inline-grid;flex:0 0 auto;inline-size:var(--_row-mark);padding:0;place-items:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1)),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1))}[data-ui=app-shell][data-nav-side=end] [data-part=nav-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell] [data-part=nav-toggle]>[data-ui=icon],[data-ui=app-shell]:not([data-nav-side=end]) [data-part=aside-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell][data-nav-side=end] [data-part=aside-toggle]>[data-ui=icon]{scale:-1 1}[dir=rtl] [data-ui=app-shell][data-nav-side=end] [data-part=nav-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell]:not([data-nav-side=end]) [data-part=aside-toggle]>[data-ui=icon]{scale:1 1}[data-ui=app-shell] [data-part=nav-toggle]:enabled:hover,[data-ui=app-shell] [data-part=aside-toggle]:enabled:hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:currentcolor}[data-ui=app-shell] [data-part=nav-toggle]:enabled:active,[data-ui=app-shell] [data-part=aside-toggle]:enabled:active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui=app-shell] [data-part=nav-toggle]:focus-visible,[data-ui=app-shell] [data-part=aside-toggle]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=app-shell][data-nav-mode=inline]>[data-part=nav]{inline-size:calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline][data-open]>[data-part=nav]{inline-size:var(--_nav-size)}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-header],[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-footer]{flex-wrap:wrap;justify-content:center}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-body]{align-items:center}[data-ui=app-shell][data-nav-mode=inline][data-collapsed-to=hidden]:not([data-open])>[data-part=nav]{display:none}[data-ui=app-shell][data-nav-side=end]>[data-part=nav]{grid-area:2 / 3 / 3 / 4}[data-ui=app-shell][data-canvas=inset][data-nav-side=end]>[data-part=nav]{margin-inline:0 var(--_gutter)}[data-ui=app-shell][data-canvas=flush][data-nav-side=end]>[data-part=nav]{padding-inline:0 var(--_gutter)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=nav]{border-inline-end:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part=nav]{border-inline-end:none;border-inline-start:var(--_seam)}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=nav]{grid-area:1 / 1 / -1 / 2}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=nav]{grid-area:1 / 3 / -1 / 4}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=nav]>[data-part=nav-header]{box-sizing:border-box;min-block-size:var(--_banner-size)}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=banner],[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=footer]{grid-column:2 / -1}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=banner],[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=footer]{grid-column:1 / -2}[data-ui=app-shell][data-primary=main]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav]>[data-part=banner]{grid-column:2 / 3}[data-ui=app-shell][data-nav-mode=overlay]>[data-part=nav]{--_nav-inset: var(--_row-inset);background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:min(var(--_nav-overlay-size),calc(100% - var(--_row-mark) - 2 * var(--_gutter)));inset-block:0;inset-inline-start:0;margin:0;padding-inline:0;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:-100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui=app-shell][data-nav-mode=overlay][data-open]>[data-part=nav]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui=app-shell][data-nav-mode=overlay][data-nav-side=end]>[data-part=nav]{inset-inline-end:0;inset-inline-start:auto;translate:100% 0}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=nav],[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part=nav],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=nav]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-nav-side=end]>[data-part=nav]{margin-inline-end:var(--_gutter);margin-inline-start:0;translate:calc(100% + var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-open]>[data-part=nav]{translate:0 0}[data-ui=app-shell][data-aside-mode=overlay]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:var(--_aside-size);inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;max-inline-size:80%;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui=app-shell][data-aside-mode=overlay]>[data-part=aside][data-open]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui=app-shell][data-aside-mode=overlay][data-nav-side=end]>[data-part=aside]{inset-inline-end:auto;inset-inline-start:0;translate:-100% 0}[data-ui=app-shell][data-canvas=floating][data-aside-mode=overlay]>[data-part=aside],[data-ui=app-shell][data-canvas=panel][data-aside-mode=overlay]>[data-part=aside],[data-ui=app-shell][data-canvas=inset][data-aside-mode=overlay]>[data-part=aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-end:var(--_gutter);translate:calc(100% + var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-aside-mode=overlay][data-nav-side=end]>[data-part=aside]{margin-inline-end:0;margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-aside-mode=overlay]>[data-part=aside][data-open]{translate:0 0}@container slotted-app-shell (inline-size >= 600px){[data-ui=app-shell]:not([data-nav-mode])>[data-part=nav]{inline-size:calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges))}[data-ui=app-shell]:not([data-nav-mode])[data-open]>[data-part=nav]{inline-size:var(--_nav-size)}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]{grid-area:2 / 3 / 3 / 4;inline-size:var(--slotted-app-shell-aside-extent, var(--_aside-size));position:relative}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]>[data-part=aside-resizer]:not([hidden]){display:block}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-nav-side=end]>[data-part=aside]{grid-area:2 / 1 / 3 / 2}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-primary=main]>[data-part=aside],[data-ui=app-shell]:not([data-aside-mode=overlay])[data-canvas=panel][data-primary=nav]>[data-part=aside]{grid-row:1 / 3}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])[data-nav-side=end]>[data-part=aside]{margin-inline:var(--_gutter) 0}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-canvas=flush]>[data-part=aside]{border-block-start:none}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]{border-inline-start:var(--_seam)}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part=aside]{border-inline-end:var(--_seam);border-inline-start:none}}@container slotted-app-shell (inline-size < 600px){[data-ui=app-shell]:not([data-nav-mode])>[data-part=nav]{display:none}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part=main],[data-ui=app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part=main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui=app-shell]:not([data-nav-mode]):is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before{content:none}[data-ui=app-shell]:not([data-nav-mode])[data-primary=main]>[data-part=banner]{margin:0;padding-inline:var(--_edge)}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part=main]{border-block-start:var(--_rule-width) solid var(--_rule);border-radius:0}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part=progress],[data-ui=app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part=progress]{border-radius:0}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])>[data-part=aside]{margin-inline:var(--_gutter)}[data-ui=app-shell][data-scroll=content]:not([data-aside-mode=overlay])>[data-part=aside]{max-block-size:50cqb}[data-ui=app-shell]:not([data-aside-mode])>[data-part=aside]{display:none}}[data-ui=app-shell]>[data-part=scrim]{background-color:var(--_scrim);grid-area:2 / 1 / -1 / -1;inset:0;opacity:1;position:absolute;transition:opacity var(--_duration) var(--_easing);z-index:calc(var(--slotted-z-index-overlay, 1000) - 1)}[data-ui=app-shell]>[data-part=scrim][data-status=entering],[data-ui=app-shell]>[data-part=scrim][data-status=exiting]{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    <div data-part="layer" data-part-layer="" #layer></div>`, isInline: true, styles: ["@layer slotted.components{[data-ui-app-shell]{--_gutter: var( --slotted-app-shell-gutter, calc(var(--slotted-control-gap-lg, 8px) + var(--slotted-space-2, .25rem)) );--_row-inset: var(--slotted-app-shell-row-inset-size, var(--slotted-space-4, .5rem));--_row-mark: var(--slotted-app-shell-row-mark-size, var(--slotted-control-height-md, 34px));--_row-gap: var(--slotted-control-gap-md, 8px);--_row-ring-inset: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px) );--_row-font-size: var( --slotted-app-shell-row-text-size, var(--slotted-font-size-sm, .8125rem) );--_row-line-height: var( --slotted-app-shell-row-text-line-height, var(--slotted-line-height-sm, 1.45) );--slotted-app-shell-row-inset: var(--_row-inset);--slotted-app-shell-row-mark: var(--_row-mark);--slotted-app-shell-row-gap: var(--_row-gap);--slotted-app-shell-row-height: var(--_row-mark);--slotted-app-shell-row-font-size: var(--_row-font-size);--slotted-app-shell-row-line-height: var(--_row-line-height);--_nav-size: var(--slotted-app-shell-nav-size-md, 15rem);--_nav-overlay-size: var(--slotted-app-shell-nav-overlay-size, 20rem);--_aside-size: var(--slotted-app-shell-aside-size-md, 20rem);--_rail-size: var( --slotted-app-shell-rail-size, calc(var(--_row-mark) + var(--_row-inset) * 2) );--_edge: var(--_gutter);--_nav-inset: 0px;--_nav-edges: 0px;--_frame: var(--slotted-app-shell-frame, var(--slotted-surface-sunken, Canvas));--_canvas: var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas));--_ink: var(--slotted-app-shell-color, var(--slotted-text, CanvasText));--_scrollbar-thumb: var( --slotted-app-shell-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-app-shell-scrollbar-track-color, transparent);--_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-app-shell-radius, var(--slotted-radius-lg, 8px));--_elevation: var(--slotted-app-shell-elevation, var(--slotted-shadow-xs));--_seam: var(--_rule-width) solid var(--_rule);--_seam-width: var(--_rule-width);--_inner-radius: calc(var(--_radius) - var(--_rule-width));--_scrim: var(--slotted-app-shell-scrim, var(--slotted-scrim, Canvas));--_banner-size: var( --slotted-app-shell-banner-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-5, .75rem) * 2) );--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, cubic-bezier(.2, 0, 0, 1));background-color:var(--_frame);background-image:var(--slotted-app-shell-frame-image, none);background-position:center;background-size:cover;color:var(--_ink);container-name:slotted-app-shell;container-type:inline-size;display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;min-block-size:100%;min-inline-size:0;overflow-x:clip;overflow-y:visible;overflow-inline:clip;overflow-block:visible;position:relative}[data-ui-app-shell][data-nav-size=sm]{--_nav-size: var(--slotted-app-shell-nav-size-sm, 13rem)}[data-ui-app-shell][data-nav-size=lg]{--_nav-size: var(--slotted-app-shell-nav-size-lg, 18rem)}[data-ui-app-shell][data-aside-size=sm]{--_aside-size: var(--slotted-app-shell-aside-size-sm, 16rem)}[data-ui-app-shell][data-aside-size=lg]{--_aside-size: var(--slotted-app-shell-aside-size-lg, 26rem)}[data-ui-app-shell][data-scroll=content]{block-size:100%;container-type:size;max-block-size:100dvh}[data-ui-app-shell]>[data-part-skip]{inset-block-start:0;inset-inline-start:0;position:absolute;z-index:var(--slotted-z-index-popover, 1100)}[data-ui-app-shell]>[data-part-skip]>a{background-color:var(--_canvas);border:var(--_rule-width) solid var(--_rule);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-shadow-md);color:var(--slotted-text, CanvasText);display:inline-block;font-size:var(--slotted-control-font-size-md, 13px);font-weight:var(--slotted-font-weight-medium, 500);inset-block-start:var(--_gutter);inset-inline-start:var(--_gutter);padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-5, .75rem);position:absolute;text-decoration:none;transition:translate var(--_duration) var(--_easing);translate:0 -200%;white-space:nowrap}[data-ui-app-shell]>[data-part-skip]>a:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);translate:0 0}[data-ui-app-shell]>[data-part-banner]{align-items:center;background-color:var(--slotted-app-shell-banner-surface, transparent);color:var( --slotted-app-shell-banner-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-banner;container-type:inline-size;display:flex;gap:var(--_row-gap);grid-area:1 / 1 / 2 / -1;min-block-size:var(--_banner-size);min-inline-size:0;padding-inline:var(--_edge)}[data-ui-app-shell] [data-part-brand]{align-items:center;display:flex;flex:0 1 auto;font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--_row-gap);min-inline-size:0;padding-inline-start:var(--_row-inset)}[data-ui-app-shell] [data-part-brand]>*:not([data-part-nav-toggle]){min-inline-size:0;overflow:var(--slotted-app-shell-brand-overflow, hidden);text-overflow:ellipsis;white-space:var(--slotted-app-shell-brand-wrap, nowrap)}[data-ui-app-shell]>[data-part-banner]>[data-part-actions]{align-items:center;display:flex;flex:0 1 auto;min-inline-size:0;gap:var(--slotted-control-gap-sm, 6px);margin-inline-start:auto;padding-inline-end:var(--_row-inset)}[data-ui-app-shell]>[data-part-banner]>[data-part-actions]>*{flex-shrink:0}[data-ui-app-shell]>[data-part-banner]>[data-part-centre]{align-items:center;display:flex;flex:1 1 auto;gap:var(--_row-gap);min-inline-size:0}[data-ui-app-shell]>[data-part-nav]{background-color:var(--slotted-app-shell-nav-surface, transparent);box-sizing:border-box;color:var( --slotted-app-shell-nav-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-nav;container-type:inline-size;display:flex;flex-direction:column;grid-area:2 / 1 / 3 / 2;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;transition:inline-size var(--_duration) var(--_easing),visibility var(--_duration) step-start}[data-ui-app-shell]>[data-part-nav]>[data-part-nav-header],[data-ui-app-shell]>[data-part-nav]>[data-part-nav-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;overflow:hidden;padding-block:var(--_row-inset);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui-app-shell]>[data-part-nav]>:is([data-part-nav-header],[data-part-nav-body],[data-part-nav-footer]){--slotted-app-shell-row-ring-inset: var(--_row-ring-inset);padding-inline:calc(var(--_nav-inset) + var(--_row-ring-inset))}[data-ui-app-shell]>[data-part-nav]>[data-part-nav-body]{align-items:stretch;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-4, .5rem);scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui-app-shell]>[data-part-main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );color:var( --slotted-app-shell-main-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );grid-area:2 / 2 / 3 / 3;isolation:isolate;min-block-size:0;min-inline-size:0}[data-ui-app-shell][data-scroll=content]>[data-part-main]{overflow:auto}[data-ui-app-shell]>[data-part-progress]{contain:strict;grid-area:2 / 2 / 3 / 3;inset-block-start:calc(-1 * var(--_progress-lift, 0px));min-block-size:0;min-inline-size:0;overflow:clip;pointer-events:none;position:relative;z-index:1}[data-ui-app-shell][data-scroll=document]>[data-part-progress]{--slotted-progress-indicator-position: sticky}[data-ui-app-shell]>[data-part-main]:focus{outline:none}[data-ui-app-shell]>[data-part-main]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-app-shell]>[data-part-aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );box-sizing:border-box;color:var( --slotted-app-shell-aside-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );display:flex;flex-direction:column;grid-area:3 / 1 / 4 / -1;min-block-size:0;min-inline-size:0}[data-ui-app-shell][data-scroll=content]>[data-part-aside]{overflow:auto}[data-ui-app-shell]:not([data-aside-mode=overlay])>[data-part-aside]:not([data-open]){display:none}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-header],[data-ui-app-shell]>[data-part-aside]>[data-part-aside-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset);padding-inline:calc(var(--_row-inset) + var(--_row-gap))}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-header]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-header]>:not([data-part]){flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-footer]{justify-content:flex-end}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-body]{flex:1 1 auto;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-5, .75rem);padding-inline:calc(var(--_row-inset) + var(--_row-gap));scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-body][data-inset=none]{padding:0}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]{--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);background:transparent;border:0 solid transparent;border-inline-start-width:var(--slotted-border-width-thick, 2px);box-sizing:border-box;cursor:col-resize;display:none;inline-size:var(--_resizer-thickness);inset-block:0;inset-inline-start:0;position:absolute;touch-action:none;transition:border-color var(--_duration) var(--_easing);z-index:1}[data-ui-app-shell][data-nav-side=end]>[data-part-aside]>[data-part-aside-resizer]{border-inline-end-width:var(--slotted-border-width-thick, 2px);border-inline-start-width:0;inset-inline-end:0;inset-inline-start:auto}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]:before{content:\"\";inset-block:0;inset-inline:calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2);position:absolute}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]:not([data-disabled]):hover,[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]:focus-visible,[data-ui-app-shell][data-dragging]>[data-part-aside]>[data-part-aside-resizer]{border-color:var( --slotted-app-shell-resizer-color, var(--slotted-border-strong, ButtonBorder) )}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui-app-shell]>[data-part-footer]{align-items:center;background-color:var(--slotted-app-shell-footer-surface, transparent);color:var( --slotted-app-shell-footer-color, var(--slotted-app-shell-color, var(--slotted-text-muted, GrayText)) );display:flex;font-size:var(--slotted-control-font-size-sm, 12px);gap:var(--_row-gap);grid-area:4 / 1 / 5 / -1;min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:calc(var(--_edge) + var(--_row-inset))}[data-ui-app-shell]>[data-part-layer]{display:contents}[data-ui-app-shell][data-canvas=inset]>[data-part-nav]{--slotted-tone-secondary-subtle-hover: color-mix( in oklab, var(--slotted-app-shell-nav-surface, var(--_frame)), var(--slotted-text) 4% );--slotted-tone-secondary-subtle-active: color-mix( in oklab, var(--slotted-app-shell-nav-surface, var(--_frame)), var(--slotted-text) 7% );border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui-app-shell][data-canvas=floating]>[data-part-main],[data-ui-app-shell][data-canvas=floating]>[data-part-aside],[data-ui-app-shell][data-canvas=inset]>[data-part-main],[data-ui-app-shell][data-canvas=inset]>[data-part-aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui-app-shell][data-canvas=floating]>[data-part-aside],[data-ui-app-shell][data-canvas=inset]>[data-part-aside]{margin-inline-start:0}[data-ui-app-shell][data-canvas=floating]>[data-part-footer],[data-ui-app-shell][data-canvas=panel]>[data-part-footer],[data-ui-app-shell][data-canvas=inset]>[data-part-footer]{padding-block-start:0}[data-ui-app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part-main],[data-ui-app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part-main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui-app-shell][data-canvas=flush]{--_edge: var(--_row-inset);--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui-app-shell][data-canvas=flush]>[data-part-banner]{background-color:var( --slotted-app-shell-banner-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell][data-canvas=flush]>[data-part-nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell][data-canvas=flush]>[data-part-main]{background-color:var(--slotted-app-shell-main-surface, transparent)}[data-ui-app-shell][data-canvas=flush]>[data-part-aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell][data-canvas=flush]>[data-part-footer]{background-color:var( --slotted-app-shell-footer-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell][data-canvas=flush]>[data-part-nav]{padding-block:var(--_gutter)}[data-ui-app-shell][data-canvas=flush]>[data-part-banner]{border-block-end:var(--_seam)}[data-ui-app-shell][data-canvas=flush]>[data-part-footer]{border-block-start:var(--_seam)}[data-ui-app-shell][data-canvas=flush]>[data-part-aside]{border-block-start:var(--_seam)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part-nav]>[data-part-nav-footer]{border-block-start:var(--_seam)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part-aside]>[data-part-aside-header]{border-block-end:var(--_seam)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part-aside]>[data-part-aside-footer]{border-block-start:var(--_seam)}[data-ui-app-shell][data-canvas=floating]>[data-part-nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui-app-shell][data-canvas=floating]{--_edge: calc(var(--_gutter) + var(--_rule-width) + var(--_row-inset));--_nav-edges: calc(2 * var(--_rule-width));--_nav-inset: var(--_row-inset)}[data-ui-app-shell][data-canvas=floating][data-nav-side=end]>[data-part-nav]{margin-inline:0 var(--_gutter)}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before,[data-ui-app-shell][data-canvas=panel]:before{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);content:\"\";grid-area:1 / 2 / 3 / 3;margin:var(--_gutter);min-inline-size:0}[data-ui-app-shell][data-canvas=panel]:before{grid-area:2 / 1 / 3 / -1;margin:0}[data-ui-app-shell][data-canvas=panel]:is([data-primary=nav],[data-primary=main]):before{grid-area:1 / 1 / 3 / -1}[data-ui-app-shell][data-nav-mode=overlay][data-canvas]:before{content:none}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part-banner]{margin-block-start:calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width));padding-inline:0}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part-main]{border:none;border-radius:0 0 var(--_inner-radius) var(--_inner-radius);box-shadow:none;margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui-app-shell][data-primary=main]>[data-part-banner],[data-ui-app-shell][data-primary=main][data-nav-side=end]>[data-part-banner],[data-ui-app-shell][data-canvas=panel][data-primary=nav]>[data-part-banner],[data-ui-app-shell][data-canvas=panel][data-primary=nav][data-nav-side=end]>[data-part-banner]{border-block-end:var(--_seam);grid-column:2 / 3}[data-ui-app-shell][data-primary=main][data-nav-mode=overlay]>[data-part-banner]{margin:0;padding-inline:var(--_edge)}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part-main]{border-radius:0;margin:0}[data-ui-app-shell][data-canvas=panel]{--_edge: calc(var(--_rule-width) + var(--_row-inset));--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui-app-shell][data-canvas=floating][data-nav-mode=overlay],[data-ui-app-shell][data-canvas=panel][data-nav-mode=overlay]{--_edge: var(--_gutter)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]){box-sizing:border-box;padding-block-end:var(--_gutter);padding-inline:var(--_gutter)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):is([data-primary=nav],[data-primary=main]){padding-block-start:var(--_gutter)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part-nav]{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);margin:var(--_rule-width) 0 var(--_rule-width) var(--_rule-width)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay])[data-nav-side=end]>[data-part-nav]{border-radius:0 var(--_inner-radius) var(--_inner-radius) 0;margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part-main]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part-main]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-primary=banner])>[data-part-banner]{margin-block-start:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part-aside][data-open])>[data-part-main]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part-aside][data-open])>[data-part-banner]{margin-inline-end:0}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-aside-mode=overlay])>[data-part-aside]{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui-app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part-main]{border-block-start:var(--_rule-width) solid var(--_rule)}[data-ui-app-shell]:is([data-canvas=flush],[data-primary=main]),[data-ui-app-shell][data-canvas=panel][data-primary=nav]{--_progress-lift: var(--_seam-width)}[data-ui-app-shell][data-canvas=panel][data-primary=banner]{--_progress-lift: var(--_rule-width)}[data-ui-app-shell][data-canvas=panel][data-nav-mode=overlay]{--_progress-lift: 0px}[data-ui-app-shell][data-canvas=floating]>[data-part-progress],[data-ui-app-shell][data-canvas=inset]>[data-part-progress]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui-app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part-progress],[data-ui-app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part-progress]{border-radius:0;margin:0}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part-progress]{border-radius:0 0 var(--_inner-radius) var(--_inner-radius);margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part-progress]{border-radius:0;margin:0}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part-progress]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part-progress]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part-aside][data-open])>[data-part-progress]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui-app-shell]>[data-part]{--_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));--_seam: var(--_rule-width) solid var(--_rule)}[data-ui-app-shell][data-separation=tone],[data-ui-app-shell][data-separation=tone]>[data-part]{--_seam: none;--_seam-width: 0px}[data-ui-app-shell][data-canvas=flush][data-separation=tone]>[data-part-footer]{--_ground: var( --slotted-app-shell-footer-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui-app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part-banner]{--_ground: var( --slotted-app-shell-banner-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part-nav]{--_ground: var( --slotted-app-shell-nav-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part-aside]{--_ground: var( --slotted-app-shell-aside-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui-app-shell][data-separation=tone]>[data-part-nav]>[data-part-nav-rail]{--_ground: var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) )}[data-ui-app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part-banner],[data-ui-app-shell][data-canvas=flush][data-separation=tone]>[data-part-footer],[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>:is([data-part-nav],[data-part-aside]),[data-ui-app-shell][data-separation=tone]>[data-part-nav]>[data-part-nav-rail]{--slotted-tone-secondary-subtle-hover: color-mix( in oklab, var(--_ground), var(--slotted-text) 4% );--slotted-tone-secondary-subtle-active: color-mix( in oklab, var(--_ground), var(--slotted-text) 7% );background-color:var(--_ground)}[data-ui-app-shell][data-canvas=flush][data-separation=tone]>[data-part-main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail]){display:grid;grid-template-columns:var(--_rail-size) minmax(var(--_nav-size),1fr);grid-template-rows:auto minmax(0,1fr) auto}[data-ui-app-shell]>[data-part-nav]>[data-part-nav-rail]{align-items:center;border-inline-end:var(--_seam);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);grid-area:1 / 1 / -1 / 2;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block:var(--_row-inset);scrollbar-width:none}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail])>[data-part-nav-header]{grid-area:1 / 2 / 2 / 3}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail])>[data-part-nav-body]{grid-area:2 / 2 / 3 / 3}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail])>[data-part-nav-footer]{grid-area:3 / 2 / 4 / 3}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail])>:is([data-part-nav-header],[data-part-nav-body],[data-part-nav-footer]){padding-inline-start:calc(var(--_row-inset) + var(--_row-ring-inset));transition:visibility var(--_duration) step-start}[data-ui-app-shell][data-nav-mode=inline][data-open]>[data-part-nav]:has(>[data-part-nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-size) + var(--_nav-edges))}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]:has(>[data-part-nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-edges))}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]:has(>[data-part-nav-rail])>:is([data-part-nav-header],[data-part-nav-body],[data-part-nav-footer]){transition:visibility var(--_duration) step-end;visibility:hidden}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]>[data-part-nav-rail]{border-inline-end:none}@media(forced-colors:active){[data-ui-app-shell][data-separation=tone],[data-ui-app-shell][data-separation=tone]>[data-part]{--_seam: var(--_rule-width) solid CanvasText;--_seam-width: var(--_rule-width)}}[data-ui-app-shell] [data-part-nav-toggle],[data-ui-app-shell] [data-part-aside-toggle]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px);background-color:transparent;block-size:var(--_row-mark);border:none;border-radius:var(--slotted-control-radius, 4px);color:color-mix(in oklab,currentcolor 70%,transparent);cursor:pointer;display:inline-grid;flex:0 0 auto;inline-size:var(--_row-mark);padding:0;place-items:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1)),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1))}[data-ui-app-shell][data-nav-side=end] [data-part-nav-toggle]>[data-ui-icon],[dir=rtl] [data-ui-app-shell] [data-part-nav-toggle]>[data-ui-icon],[data-ui-app-shell]:not([data-nav-side=end]) [data-part-aside-toggle]>[data-ui-icon],[dir=rtl] [data-ui-app-shell][data-nav-side=end] [data-part-aside-toggle]>[data-ui-icon]{scale:-1 1}[dir=rtl] [data-ui-app-shell][data-nav-side=end] [data-part-nav-toggle]>[data-ui-icon],[dir=rtl] [data-ui-app-shell]:not([data-nav-side=end]) [data-part-aside-toggle]>[data-ui-icon]{scale:1 1}[data-ui-app-shell] [data-part-nav-toggle]:enabled:hover,[data-ui-app-shell] [data-part-aside-toggle]:enabled:hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:currentcolor}[data-ui-app-shell] [data-part-nav-toggle]:enabled:active,[data-ui-app-shell] [data-part-aside-toggle]:enabled:active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui-app-shell] [data-part-nav-toggle]:focus-visible,[data-ui-app-shell] [data-part-aside-toggle]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-app-shell][data-nav-mode=inline]>[data-part-nav]{inline-size:calc(var(--_rail-size) + 2 * (var(--_nav-inset) + var(--_row-ring-inset)) + var(--_nav-edges))}[data-ui-app-shell][data-nav-mode=inline][data-open]>[data-part-nav]{inline-size:var(--_nav-size)}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]>[data-part-nav-header],[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]>[data-part-nav-footer]{flex-wrap:wrap;justify-content:center}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]>[data-part-nav-body]{align-items:center}[data-ui-app-shell][data-nav-mode=inline][data-collapsed-to=hidden]:not([data-open])>[data-part-nav]{display:none}[data-ui-app-shell][data-nav-side=end]>[data-part-nav]{grid-area:2 / 3 / 3 / 4}[data-ui-app-shell][data-canvas=inset][data-nav-side=end]>[data-part-nav]{margin-inline:0 var(--_gutter)}[data-ui-app-shell][data-canvas=flush][data-nav-side=end]>[data-part-nav]{padding-inline:0 var(--_gutter)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part-nav]{border-inline-end:var(--_seam)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part-nav]{border-inline-end:none;border-inline-start:var(--_seam)}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])>[data-part-nav]{grid-area:1 / 1 / -1 / 2}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part-nav]{grid-area:1 / 3 / -1 / 4}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])>[data-part-nav]>[data-part-nav-header]{box-sizing:border-box;min-block-size:var(--_banner-size)}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])>[data-part-banner],[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])>[data-part-footer]{grid-column:2 / -1}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part-banner],[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part-footer]{grid-column:1 / -2}[data-ui-app-shell][data-primary=main]>[data-part-banner],[data-ui-app-shell][data-canvas=panel][data-primary=nav]>[data-part-banner]{grid-column:2 / 3}[data-ui-app-shell][data-nav-mode=overlay]>[data-part-nav]{--_nav-inset: var(--_row-inset);background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:min(var(--_nav-overlay-size),calc(100% - var(--_row-mark) - 2 * var(--_gutter)));inset-block:0;inset-inline-start:0;margin:0;padding-inline:0;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:-100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui-app-shell][data-nav-mode=overlay][data-open]>[data-part-nav]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui-app-shell][data-nav-mode=overlay][data-nav-side=end]>[data-part-nav]{inset-inline-end:0;inset-inline-start:auto;translate:100% 0}[data-ui-app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part-nav],[data-ui-app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part-nav],[data-ui-app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part-nav]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui-app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-nav-side=end]>[data-part-nav]{margin-inline-end:var(--_gutter);margin-inline-start:0;translate:calc(100% + var(--_gutter)) 0}[data-ui-app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-open]>[data-part-nav]{translate:0 0}[data-ui-app-shell][data-aside-mode=overlay]>[data-part-aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:var(--_aside-size);inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;max-inline-size:80%;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui-app-shell][data-aside-mode=overlay]>[data-part-aside][data-open]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui-app-shell][data-aside-mode=overlay][data-nav-side=end]>[data-part-aside]{inset-inline-end:auto;inset-inline-start:0;translate:-100% 0}[data-ui-app-shell][data-canvas=floating][data-aside-mode=overlay]>[data-part-aside],[data-ui-app-shell][data-canvas=panel][data-aside-mode=overlay]>[data-part-aside],[data-ui-app-shell][data-canvas=inset][data-aside-mode=overlay]>[data-part-aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-end:var(--_gutter);translate:calc(100% + var(--_gutter)) 0}[data-ui-app-shell]:not([data-canvas=flush])[data-aside-mode=overlay][data-nav-side=end]>[data-part-aside]{margin-inline-end:0;margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui-app-shell]:not([data-canvas=flush])[data-aside-mode=overlay]>[data-part-aside][data-open]{translate:0 0}@container slotted-app-shell (inline-size >= 600px){[data-ui-app-shell]:not([data-nav-mode])>[data-part-nav]{inline-size:calc(var(--_rail-size) + 2 * (var(--_nav-inset) + var(--_row-ring-inset)) + var(--_nav-edges))}[data-ui-app-shell]:not([data-nav-mode])[data-open]>[data-part-nav]{inline-size:var(--_nav-size)}[data-ui-app-shell]:not([data-aside-mode=overlay])>[data-part-aside]{grid-area:2 / 3 / 3 / 4;inline-size:var(--slotted-app-shell-aside-extent, var(--_aside-size));position:relative}[data-ui-app-shell]:not([data-aside-mode=overlay])>[data-part-aside]>[data-part-aside-resizer]:not([hidden]){display:block}[data-ui-app-shell]:not([data-aside-mode=overlay])[data-nav-side=end]>[data-part-aside]{grid-area:2 / 1 / 3 / 2}[data-ui-app-shell]:not([data-aside-mode=overlay])[data-primary=main]>[data-part-aside],[data-ui-app-shell]:not([data-aside-mode=overlay])[data-canvas=panel][data-primary=nav]>[data-part-aside]{grid-row:1 / 3}[data-ui-app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])[data-nav-side=end]>[data-part-aside]{margin-inline:var(--_gutter) 0}[data-ui-app-shell]:not([data-aside-mode=overlay])[data-canvas=flush]>[data-part-aside]{border-block-start:none}[data-ui-app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])>[data-part-aside]{border-inline-start:var(--_seam)}[data-ui-app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part-aside]{border-inline-end:var(--_seam);border-inline-start:none}}@container slotted-app-shell (inline-size < 600px){[data-ui-app-shell]:not([data-nav-mode])>[data-part-nav]{display:none}[data-ui-app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part-main],[data-ui-app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part-main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui-app-shell]:not([data-nav-mode]):is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before{content:none}[data-ui-app-shell]:not([data-nav-mode])[data-primary=main]>[data-part-banner]{margin:0;padding-inline:var(--_edge)}[data-ui-app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part-main]{border-block-start:var(--_rule-width) solid var(--_rule);border-radius:0}[data-ui-app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part-progress],[data-ui-app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part-progress]{border-radius:0;margin:0}[data-ui-app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part-progress]{border-radius:0}[data-ui-app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])>[data-part-aside]{margin-inline:var(--_gutter)}[data-ui-app-shell][data-scroll=content]:not([data-aside-mode=overlay])>[data-part-aside]{max-block-size:50cqb}[data-ui-app-shell]:not([data-aside-mode])>[data-part-aside]{display:none}}[data-ui-app-shell]>[data-part-scrim]{background-color:var(--_scrim);grid-area:2 / 1 / -1 / -1;inset:0;opacity:1;position:absolute;transition:opacity var(--_duration) var(--_easing);z-index:calc(var(--slotted-z-index-overlay, 1000) - 1)}[data-ui-app-shell]>[data-part-scrim][data-status=entering],[data-ui-app-shell]>[data-part-scrim][data-status=exiting]{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShell, decorators: [{
             type: Component,
             args: [{ selector: '[slAppShell]', standalone: true, exportAs: 'slAppShell', template: `@if (skipTargets().length > 0) {
-      <div data-part="skip">
+      <div data-part="skip" data-part-skip="">
         @for (target of skipTargets(); track target.href) {
-          <a [href]="'#' + target.href">{{ target.label }}</a>
+          <a [href]="'#' + target.href" (click)="target.href === mainId && focusMain()">{{
+            target.label
+          }}</a>
         }
       </div>
     }
     <ng-content />
     @if (veilStatus() !== 'unmounted') {
-      <div data-part="scrim" [attr.data-status]="veilStatus()" #scrim></div>
+      <div data-part="scrim" data-part-scrim="" [attr.data-status]="veilStatus()" #scrim></div>
     }
-    <div data-part="layer" #layer></div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+    <div data-part="layer" data-part-layer="" #layer></div>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'app-shell',
+                        'data-ui-app-shell': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-primary]': 'resolvedPrimary()',
                         '[attr.data-canvas]': 'resolvedCanvas()',
                         '[attr.data-nav-mode]': 'resolvedMode()',
@@ -608,10 +647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-collapsed-to]': 'resolvedCollapsedTo()',
                         '[attr.data-scroll]': 'resolvedScroll()',
                         '[attr.data-separation]': 'resolvedSeparation()',
-                        '[attr.data-open]': "navOpen() ? '' : null",
+                        '[attr.data-open]': "navShownOpen() ? '' : null",
                         '[attr.data-dragging]': "asideDragging() ? '' : null",
                         '(click)': 'onClick($event)',
-                    }, styles: ["@layer slotted.components{[data-ui=app-shell]{--_gutter: var( --slotted-app-shell-gutter, calc(var(--slotted-control-gap-lg, 8px) + var(--slotted-space-2, .25rem)) );--_row-inset: var(--slotted-app-shell-row-inset-size, var(--slotted-space-4, .5rem));--_row-mark: var(--slotted-app-shell-row-mark-size, var(--slotted-control-height-md, 34px));--_row-gap: var(--slotted-control-gap-md, 8px);--_row-font-size: var( --slotted-app-shell-row-text-size, var(--slotted-font-size-sm, .8125rem) );--_row-line-height: var( --slotted-app-shell-row-text-line-height, var(--slotted-line-height-sm, 1.45) );--slotted-app-shell-row-inset: var(--_row-inset);--slotted-app-shell-row-mark: var(--_row-mark);--slotted-app-shell-row-gap: var(--_row-gap);--slotted-app-shell-row-height: var(--_row-mark);--slotted-app-shell-row-font-size: var(--_row-font-size);--slotted-app-shell-row-line-height: var(--_row-line-height);--_nav-size: var(--slotted-app-shell-nav-size-md, 15rem);--_nav-overlay-size: var(--slotted-app-shell-nav-overlay-size, 20rem);--_aside-size: var(--slotted-app-shell-aside-size-md, 20rem);--_rail-size: var( --slotted-app-shell-rail-size, calc(var(--_row-mark) + var(--_row-inset) * 2) );--_edge: var(--_gutter);--_nav-inset: 0px;--_nav-edges: 0px;--_frame: var(--slotted-app-shell-frame, var(--slotted-surface-sunken, Canvas));--_canvas: var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas));--_ink: var(--slotted-app-shell-color, var(--slotted-text, CanvasText));--_scrollbar-thumb: var( --slotted-app-shell-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-app-shell-scrollbar-track-color, transparent);--_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-app-shell-radius, var(--slotted-radius-lg, 8px));--_elevation: var(--slotted-app-shell-elevation, var(--slotted-shadow-xs));--_seam: var(--_rule-width) solid var(--_rule);--_seam-width: var(--_rule-width);--_inner-radius: calc(var(--_radius) - var(--_rule-width));--_scrim: var(--slotted-app-shell-scrim, var(--slotted-scrim, Canvas));--_banner-size: var( --slotted-app-shell-banner-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-5, .75rem) * 2) );--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, cubic-bezier(.2, 0, 0, 1));background-color:var(--_frame);background-image:var(--slotted-app-shell-frame-image, none);background-position:center;background-size:cover;color:var(--_ink);container-name:slotted-app-shell;container-type:inline-size;display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;min-block-size:100%;min-inline-size:0;overflow-x:clip;overflow-y:visible;overflow-inline:clip;overflow-block:visible;position:relative}[data-ui=app-shell][data-nav-size=sm]{--_nav-size: var(--slotted-app-shell-nav-size-sm, 13rem)}[data-ui=app-shell][data-nav-size=lg]{--_nav-size: var(--slotted-app-shell-nav-size-lg, 18rem)}[data-ui=app-shell][data-aside-size=sm]{--_aside-size: var(--slotted-app-shell-aside-size-sm, 16rem)}[data-ui=app-shell][data-aside-size=lg]{--_aside-size: var(--slotted-app-shell-aside-size-lg, 26rem)}[data-ui=app-shell][data-scroll=content]{block-size:100%;container-type:size;max-block-size:100dvh}[data-ui=app-shell]>[data-part=skip]{inset-block-start:0;inset-inline-start:0;position:absolute;z-index:var(--slotted-z-index-popover, 1100)}[data-ui=app-shell]>[data-part=skip]>a{background-color:var(--_canvas);border:var(--_rule-width) solid var(--_rule);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-shadow-md);color:var(--slotted-text, CanvasText);display:inline-block;font-size:var(--slotted-control-font-size-md, 13px);font-weight:var(--slotted-font-weight-medium, 500);inset-block-start:var(--_gutter);inset-inline-start:var(--_gutter);padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-5, .75rem);position:absolute;text-decoration:none;transition:translate var(--_duration) var(--_easing);translate:0 -200%;white-space:nowrap}[data-ui=app-shell]>[data-part=skip]>a:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);translate:0 0}[data-ui=app-shell]>[data-part=banner]{align-items:center;background-color:var(--slotted-app-shell-banner-surface, transparent);color:var( --slotted-app-shell-banner-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-banner;container-type:inline-size;display:flex;gap:var(--_row-gap);grid-area:1 / 1 / 2 / -1;min-block-size:var(--_banner-size);min-inline-size:0;padding-inline:var(--_edge)}[data-ui=app-shell] [data-part=brand]{align-items:center;display:flex;flex:0 1 auto;font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--_row-gap);min-inline-size:0;padding-inline-start:var(--_row-inset)}[data-ui=app-shell] [data-part=brand]>*:not([data-part=nav-toggle]){min-inline-size:0;overflow:var(--slotted-app-shell-brand-overflow, hidden);text-overflow:ellipsis;white-space:var(--slotted-app-shell-brand-wrap, nowrap)}[data-ui=app-shell]>[data-part=banner]>[data-part=actions]{align-items:center;display:flex;flex:0 1 auto;min-inline-size:0;gap:var(--slotted-control-gap-sm, 6px);margin-inline-start:auto;padding-inline-end:var(--_row-inset)}[data-ui=app-shell]>[data-part=banner]>[data-part=actions]>*{flex-shrink:0}[data-ui=app-shell]>[data-part=banner]>[data-part=centre]{align-items:center;display:flex;flex:1 1 auto;gap:var(--_row-gap);min-inline-size:0}[data-ui=app-shell]>[data-part=nav]{background-color:var(--slotted-app-shell-nav-surface, transparent);box-sizing:border-box;color:var( --slotted-app-shell-nav-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-nav;container-type:inline-size;display:flex;flex-direction:column;grid-area:2 / 1 / 3 / 2;min-block-size:0;min-inline-size:0;overflow:hidden;transition:inline-size var(--_duration) var(--_easing),visibility var(--_duration) step-start}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-header],[data-ui=app-shell]>[data-part=nav]>[data-part=nav-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset)}[data-ui=app-shell]>[data-part=nav]>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){padding-inline:var(--_nav-inset)}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-body]{align-items:stretch;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-4, .5rem);scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=app-shell]>[data-part=main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );color:var( --slotted-app-shell-main-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );grid-area:2 / 2 / 3 / 3;isolation:isolate;min-block-size:0;min-inline-size:0}[data-ui=app-shell][data-scroll=content]>[data-part=main]{overflow:auto}[data-ui=app-shell]>[data-part=progress]{contain:strict;grid-area:2 / 2 / 3 / 3;inset-block-start:calc(-1 * var(--_progress-lift, 0px));min-block-size:0;min-inline-size:0;overflow:clip;pointer-events:none;position:relative;z-index:1}[data-ui=app-shell][data-scroll=document]>[data-part=progress]{--slotted-progress-indicator-position: sticky}[data-ui=app-shell]>[data-part=main]:focus{outline:none}[data-ui=app-shell]>[data-part=main]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=app-shell]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );box-sizing:border-box;color:var( --slotted-app-shell-aside-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );display:flex;flex-direction:column;grid-area:3 / 1 / 4 / -1;min-block-size:0;min-inline-size:0}[data-ui=app-shell][data-scroll=content]>[data-part=aside]{overflow:auto}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]:not([data-open]){display:none}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header],[data-ui=app-shell]>[data-part=aside]>[data-part=aside-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset);padding-inline:calc(var(--_row-inset) + var(--_row-gap))}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-header]>:not([data-part]){flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-footer]{justify-content:flex-end}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-body]{flex:1 1 auto;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-5, .75rem);padding-inline:calc(var(--_row-inset) + var(--_row-gap));scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-body][data-inset=none]{padding:0}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]{--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);background:transparent;border:0 solid transparent;border-inline-start-width:var(--slotted-border-width-thick, 2px);box-sizing:border-box;cursor:col-resize;display:none;inline-size:var(--_resizer-thickness);inset-block:0;inset-inline-start:0;position:absolute;touch-action:none;transition:border-color var(--_duration) var(--_easing);z-index:1}[data-ui=app-shell][data-nav-side=end]>[data-part=aside]>[data-part=aside-resizer]{border-inline-end-width:var(--slotted-border-width-thick, 2px);border-inline-start-width:0;inset-inline-end:0;inset-inline-start:auto}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:before{content:\"\";inset-block:0;inset-inline:calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2);position:absolute}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:not([data-disabled]):hover,[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:focus-visible,[data-ui=app-shell][data-dragging]>[data-part=aside]>[data-part=aside-resizer]{border-color:var( --slotted-app-shell-resizer-color, var(--slotted-border-strong, ButtonBorder) )}[data-ui=app-shell]>[data-part=aside]>[data-part=aside-resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui=app-shell]>[data-part=footer]{align-items:center;background-color:var(--slotted-app-shell-footer-surface, transparent);color:var( --slotted-app-shell-footer-color, var(--slotted-app-shell-color, var(--slotted-text-muted, GrayText)) );display:flex;font-size:var(--slotted-control-font-size-sm, 12px);gap:var(--_row-gap);grid-area:4 / 1 / 5 / -1;min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:calc(var(--_edge) + var(--_row-inset))}[data-ui=app-shell]>[data-part=layer]{display:contents}[data-ui=app-shell][data-canvas=inset]>[data-part=nav]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]>[data-part=main],[data-ui=app-shell][data-canvas=floating]>[data-part=aside],[data-ui=app-shell][data-canvas=inset]>[data-part=main],[data-ui=app-shell][data-canvas=inset]>[data-part=aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]>[data-part=aside],[data-ui=app-shell][data-canvas=inset]>[data-part=aside]{margin-inline-start:0}[data-ui=app-shell][data-canvas=floating]>[data-part=footer],[data-ui=app-shell][data-canvas=panel]>[data-part=footer],[data-ui=app-shell][data-canvas=inset]>[data-part=footer]{padding-block-start:0}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=main],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui=app-shell][data-canvas=flush]{--_edge: var(--_row-inset);--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=flush]>[data-part=banner]{background-color:var( --slotted-app-shell-banner-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=main]{background-color:var(--slotted-app-shell-main-surface, transparent)}[data-ui=app-shell][data-canvas=flush]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=footer]{background-color:var( --slotted-app-shell-footer-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell][data-canvas=flush]>[data-part=nav]{padding-block:var(--_gutter)}[data-ui=app-shell][data-canvas=flush]>[data-part=banner]{border-block-end:var(--_seam)}[data-ui=app-shell][data-canvas=flush]>[data-part=footer]{border-block-start:var(--_seam)}[data-ui=app-shell][data-canvas=flush]>[data-part=aside]{border-block-start:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=nav]>[data-part=nav-footer]{border-block-start:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]>[data-part=aside-header]{border-block-end:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]>[data-part=aside-footer]{border-block-start:var(--_seam)}[data-ui=app-shell][data-canvas=floating]>[data-part=nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui=app-shell][data-canvas=floating]{--_edge: calc(var(--_gutter) + var(--_rule-width) + var(--_row-inset));--_nav-edges: calc(2 * var(--_rule-width));--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=floating][data-nav-side=end]>[data-part=nav]{margin-inline:0 var(--_gutter)}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before,[data-ui=app-shell][data-canvas=panel]:before{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);content:\"\";grid-area:1 / 2 / 3 / 3;margin:var(--_gutter);min-inline-size:0}[data-ui=app-shell][data-canvas=panel]:before{grid-area:2 / 1 / 3 / -1;margin:0}[data-ui=app-shell][data-canvas=panel]:is([data-primary=nav],[data-primary=main]):before{grid-area:1 / 1 / 3 / -1}[data-ui=app-shell][data-nav-mode=overlay][data-canvas]:before{content:none}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=banner]{margin-block-start:calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width));padding-inline:0}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=main]{border:none;border-radius:0 0 var(--_inner-radius) var(--_inner-radius);box-shadow:none;margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui=app-shell][data-primary=main]>[data-part=banner],[data-ui=app-shell][data-primary=main][data-nav-side=end]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav][data-nav-side=end]>[data-part=banner]{border-block-end:var(--_seam);grid-column:2 / 3}[data-ui=app-shell][data-primary=main][data-nav-mode=overlay]>[data-part=banner]{margin:0;padding-inline:var(--_edge)}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part=main]{border-radius:0;margin:0}[data-ui=app-shell][data-canvas=panel]{--_edge: calc(var(--_rule-width) + var(--_row-inset));--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay],[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]{--_edge: var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]){box-sizing:border-box;padding-block-end:var(--_gutter);padding-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):is([data-primary=nav],[data-primary=main]){padding-block-start:var(--_gutter)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=nav]{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);margin:var(--_rule-width) 0 var(--_rule-width) var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])[data-nav-side=end]>[data-part=nav]{border-radius:0 var(--_inner-radius) var(--_inner-radius) 0;margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=main]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part=main]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-primary=banner])>[data-part=banner]{margin-block-start:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=main]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=banner]{margin-inline-end:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-aside-mode=overlay])>[data-part=aside]{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part=main]{border-block-start:var(--_rule-width) solid var(--_rule)}[data-ui=app-shell]:is([data-canvas=flush],[data-primary=main]),[data-ui=app-shell][data-canvas=panel][data-primary=nav]{--_progress-lift: var(--_seam-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]{--_progress-lift: var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]{--_progress-lift: 0px}[data-ui=app-shell][data-canvas=floating]>[data-part=progress],[data-ui=app-shell][data-canvas=inset]>[data-part=progress]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=progress],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part=progress]{border-radius:0 0 var(--_inner-radius) var(--_inner-radius);margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui=app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part=progress]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part=progress]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui=app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part=aside][data-open])>[data-part=progress]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui=app-shell][data-separation=tone]{--_seam: none;--_seam-width: 0px}[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=footer]{--_ground: var( --slotted-app-shell-footer-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part=banner]{--_ground: var( --slotted-app-shell-banner-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part=nav]{--_ground: var( --slotted-app-shell-nav-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part=aside]{--_ground: var( --slotted-app-shell-aside-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui=app-shell][data-separation=tone]>[data-part=nav]>[data-part=nav-rail]{--_ground: var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) )}[data-ui=app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part=banner],[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=footer],[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>:is([data-part=nav],[data-part=aside]),[data-ui=app-shell][data-separation=tone]>[data-part=nav]>[data-part=nav-rail]{--slotted-tone-secondary-subtle-hover: color-mix( in oklab, var(--_ground), var(--slotted-text) 4% );--slotted-tone-secondary-subtle-active: color-mix( in oklab, var(--_ground), var(--slotted-text) 7% );background-color:var(--_ground)}[data-ui=app-shell][data-canvas=flush][data-separation=tone]>[data-part=main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail]){display:grid;grid-template-columns:var(--_rail-size) minmax(var(--_nav-size),1fr);grid-template-rows:auto minmax(0,1fr) auto}[data-ui=app-shell]>[data-part=nav]>[data-part=nav-rail]{align-items:center;border-inline-end:var(--_seam);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);grid-area:1 / 1 / -1 / 2;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block:var(--_row-inset);scrollbar-width:none}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-header]{grid-area:1 / 2 / 2 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-body]{grid-area:2 / 2 / 3 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>[data-part=nav-footer]{grid-area:3 / 2 / 4 / 3}[data-ui=app-shell]>[data-part=nav]:has(>[data-part=nav-rail])>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){padding-inline-start:var(--_row-inset);transition:visibility var(--_duration) step-start}[data-ui=app-shell][data-nav-mode=inline][data-open]>[data-part=nav]:has(>[data-part=nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-size) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]:has(>[data-part=nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]:has(>[data-part=nav-rail])>:is([data-part=nav-header],[data-part=nav-body],[data-part=nav-footer]){transition:visibility var(--_duration) step-end;visibility:hidden}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-rail]{border-inline-end:none}@media(forced-colors:active){[data-ui=app-shell][data-separation=tone]{--_seam: var(--_rule-width) solid CanvasText;--_seam-width: var(--_rule-width)}}[data-ui=app-shell] [data-part=nav-toggle],[data-ui=app-shell] [data-part=aside-toggle]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px);background-color:transparent;block-size:var(--_row-mark);border:none;border-radius:var(--slotted-control-radius, 4px);color:color-mix(in oklab,currentcolor 70%,transparent);cursor:pointer;display:inline-grid;flex:0 0 auto;inline-size:var(--_row-mark);padding:0;place-items:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1)),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1))}[data-ui=app-shell][data-nav-side=end] [data-part=nav-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell] [data-part=nav-toggle]>[data-ui=icon],[data-ui=app-shell]:not([data-nav-side=end]) [data-part=aside-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell][data-nav-side=end] [data-part=aside-toggle]>[data-ui=icon]{scale:-1 1}[dir=rtl] [data-ui=app-shell][data-nav-side=end] [data-part=nav-toggle]>[data-ui=icon],[dir=rtl] [data-ui=app-shell]:not([data-nav-side=end]) [data-part=aside-toggle]>[data-ui=icon]{scale:1 1}[data-ui=app-shell] [data-part=nav-toggle]:enabled:hover,[data-ui=app-shell] [data-part=aside-toggle]:enabled:hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:currentcolor}[data-ui=app-shell] [data-part=nav-toggle]:enabled:active,[data-ui=app-shell] [data-part=aside-toggle]:enabled:active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui=app-shell] [data-part=nav-toggle]:focus-visible,[data-ui=app-shell] [data-part=aside-toggle]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=app-shell][data-nav-mode=inline]>[data-part=nav]{inline-size:calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges))}[data-ui=app-shell][data-nav-mode=inline][data-open]>[data-part=nav]{inline-size:var(--_nav-size)}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-header],[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-footer]{flex-wrap:wrap;justify-content:center}[data-ui=app-shell][data-nav-mode=inline]:not([data-open])>[data-part=nav]>[data-part=nav-body]{align-items:center}[data-ui=app-shell][data-nav-mode=inline][data-collapsed-to=hidden]:not([data-open])>[data-part=nav]{display:none}[data-ui=app-shell][data-nav-side=end]>[data-part=nav]{grid-area:2 / 3 / 3 / 4}[data-ui=app-shell][data-canvas=inset][data-nav-side=end]>[data-part=nav]{margin-inline:0 var(--_gutter)}[data-ui=app-shell][data-canvas=flush][data-nav-side=end]>[data-part=nav]{padding-inline:0 var(--_gutter)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part=nav]{border-inline-end:var(--_seam)}[data-ui=app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part=nav]{border-inline-end:none;border-inline-start:var(--_seam)}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=nav]{grid-area:1 / 1 / -1 / 2}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=nav]{grid-area:1 / 3 / -1 / 4}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=nav]>[data-part=nav-header]{box-sizing:border-box;min-block-size:var(--_banner-size)}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=banner],[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])>[data-part=footer]{grid-column:2 / -1}[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=banner],[data-ui=app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part=footer]{grid-column:1 / -2}[data-ui=app-shell][data-primary=main]>[data-part=banner],[data-ui=app-shell][data-canvas=panel][data-primary=nav]>[data-part=banner]{grid-column:2 / 3}[data-ui=app-shell][data-nav-mode=overlay]>[data-part=nav]{--_nav-inset: var(--_row-inset);background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:min(var(--_nav-overlay-size),calc(100% - var(--_row-mark) - 2 * var(--_gutter)));inset-block:0;inset-inline-start:0;margin:0;padding-inline:0;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:-100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui=app-shell][data-nav-mode=overlay][data-open]>[data-part=nav]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui=app-shell][data-nav-mode=overlay][data-nav-side=end]>[data-part=nav]{inset-inline-end:0;inset-inline-start:auto;translate:100% 0}[data-ui=app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part=nav],[data-ui=app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part=nav],[data-ui=app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part=nav]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-nav-side=end]>[data-part=nav]{margin-inline-end:var(--_gutter);margin-inline-start:0;translate:calc(100% + var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-open]>[data-part=nav]{translate:0 0}[data-ui=app-shell][data-aside-mode=overlay]>[data-part=aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:var(--_aside-size);inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;max-inline-size:80%;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui=app-shell][data-aside-mode=overlay]>[data-part=aside][data-open]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui=app-shell][data-aside-mode=overlay][data-nav-side=end]>[data-part=aside]{inset-inline-end:auto;inset-inline-start:0;translate:-100% 0}[data-ui=app-shell][data-canvas=floating][data-aside-mode=overlay]>[data-part=aside],[data-ui=app-shell][data-canvas=panel][data-aside-mode=overlay]>[data-part=aside],[data-ui=app-shell][data-canvas=inset][data-aside-mode=overlay]>[data-part=aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-end:var(--_gutter);translate:calc(100% + var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-aside-mode=overlay][data-nav-side=end]>[data-part=aside]{margin-inline-end:0;margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui=app-shell]:not([data-canvas=flush])[data-aside-mode=overlay]>[data-part=aside][data-open]{translate:0 0}@container slotted-app-shell (inline-size >= 600px){[data-ui=app-shell]:not([data-nav-mode])>[data-part=nav]{inline-size:calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges))}[data-ui=app-shell]:not([data-nav-mode])[data-open]>[data-part=nav]{inline-size:var(--_nav-size)}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]{grid-area:2 / 3 / 3 / 4;inline-size:var(--slotted-app-shell-aside-extent, var(--_aside-size));position:relative}[data-ui=app-shell]:not([data-aside-mode=overlay])>[data-part=aside]>[data-part=aside-resizer]:not([hidden]){display:block}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-nav-side=end]>[data-part=aside]{grid-area:2 / 1 / 3 / 2}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-primary=main]>[data-part=aside],[data-ui=app-shell]:not([data-aside-mode=overlay])[data-canvas=panel][data-primary=nav]>[data-part=aside]{grid-row:1 / 3}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])[data-nav-side=end]>[data-part=aside]{margin-inline:var(--_gutter) 0}[data-ui=app-shell]:not([data-aside-mode=overlay])[data-canvas=flush]>[data-part=aside]{border-block-start:none}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])>[data-part=aside]{border-inline-start:var(--_seam)}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part=aside]{border-inline-end:var(--_seam);border-inline-start:none}}@container slotted-app-shell (inline-size < 600px){[data-ui=app-shell]:not([data-nav-mode])>[data-part=nav]{display:none}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part=main],[data-ui=app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part=main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui=app-shell]:not([data-nav-mode]):is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before{content:none}[data-ui=app-shell]:not([data-nav-mode])[data-primary=main]>[data-part=banner]{margin:0;padding-inline:var(--_edge)}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part=main]{border-block-start:var(--_rule-width) solid var(--_rule);border-radius:0}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part=progress],[data-ui=app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part=progress]{border-radius:0;margin:0}[data-ui=app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part=progress]{border-radius:0}[data-ui=app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])>[data-part=aside]{margin-inline:var(--_gutter)}[data-ui=app-shell][data-scroll=content]:not([data-aside-mode=overlay])>[data-part=aside]{max-block-size:50cqb}[data-ui=app-shell]:not([data-aside-mode])>[data-part=aside]{display:none}}[data-ui=app-shell]>[data-part=scrim]{background-color:var(--_scrim);grid-area:2 / 1 / -1 / -1;inset:0;opacity:1;position:absolute;transition:opacity var(--_duration) var(--_easing);z-index:calc(var(--slotted-z-index-overlay, 1000) - 1)}[data-ui=app-shell]>[data-part=scrim][data-status=entering],[data-ui=app-shell]>[data-part=scrim][data-status=exiting]{opacity:0}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-app-shell]{--_gutter: var( --slotted-app-shell-gutter, calc(var(--slotted-control-gap-lg, 8px) + var(--slotted-space-2, .25rem)) );--_row-inset: var(--slotted-app-shell-row-inset-size, var(--slotted-space-4, .5rem));--_row-mark: var(--slotted-app-shell-row-mark-size, var(--slotted-control-height-md, 34px));--_row-gap: var(--slotted-control-gap-md, 8px);--_row-ring-inset: calc( var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px) );--_row-font-size: var( --slotted-app-shell-row-text-size, var(--slotted-font-size-sm, .8125rem) );--_row-line-height: var( --slotted-app-shell-row-text-line-height, var(--slotted-line-height-sm, 1.45) );--slotted-app-shell-row-inset: var(--_row-inset);--slotted-app-shell-row-mark: var(--_row-mark);--slotted-app-shell-row-gap: var(--_row-gap);--slotted-app-shell-row-height: var(--_row-mark);--slotted-app-shell-row-font-size: var(--_row-font-size);--slotted-app-shell-row-line-height: var(--_row-line-height);--_nav-size: var(--slotted-app-shell-nav-size-md, 15rem);--_nav-overlay-size: var(--slotted-app-shell-nav-overlay-size, 20rem);--_aside-size: var(--slotted-app-shell-aside-size-md, 20rem);--_rail-size: var( --slotted-app-shell-rail-size, calc(var(--_row-mark) + var(--_row-inset) * 2) );--_edge: var(--_gutter);--_nav-inset: 0px;--_nav-edges: 0px;--_frame: var(--slotted-app-shell-frame, var(--slotted-surface-sunken, Canvas));--_canvas: var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas));--_ink: var(--slotted-app-shell-color, var(--slotted-text, CanvasText));--_scrollbar-thumb: var( --slotted-app-shell-scrollbar-thumb-color, var(--slotted-border-strong, ButtonBorder) );--_scrollbar-track: var(--slotted-app-shell-scrollbar-track-color, transparent);--_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));--_rule-width: var(--slotted-border-width-thin, 1px);--_radius: var(--slotted-app-shell-radius, var(--slotted-radius-lg, 8px));--_elevation: var(--slotted-app-shell-elevation, var(--slotted-shadow-xs));--_seam: var(--_rule-width) solid var(--_rule);--_seam-width: var(--_rule-width);--_inner-radius: calc(var(--_radius) - var(--_rule-width));--_scrim: var(--slotted-app-shell-scrim, var(--slotted-scrim, Canvas));--_banner-size: var( --slotted-app-shell-banner-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-5, .75rem) * 2) );--_duration: var(--slotted-duration-medium);--_easing: var(--slotted-easing-standard, cubic-bezier(.2, 0, 0, 1));background-color:var(--_frame);background-image:var(--slotted-app-shell-frame-image, none);background-position:center;background-size:cover;color:var(--_ink);container-name:slotted-app-shell;container-type:inline-size;display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto;min-block-size:100%;min-inline-size:0;overflow-x:clip;overflow-y:visible;overflow-inline:clip;overflow-block:visible;position:relative}[data-ui-app-shell][data-nav-size=sm]{--_nav-size: var(--slotted-app-shell-nav-size-sm, 13rem)}[data-ui-app-shell][data-nav-size=lg]{--_nav-size: var(--slotted-app-shell-nav-size-lg, 18rem)}[data-ui-app-shell][data-aside-size=sm]{--_aside-size: var(--slotted-app-shell-aside-size-sm, 16rem)}[data-ui-app-shell][data-aside-size=lg]{--_aside-size: var(--slotted-app-shell-aside-size-lg, 26rem)}[data-ui-app-shell][data-scroll=content]{block-size:100%;container-type:size;max-block-size:100dvh}[data-ui-app-shell]>[data-part-skip]{inset-block-start:0;inset-inline-start:0;position:absolute;z-index:var(--slotted-z-index-popover, 1100)}[data-ui-app-shell]>[data-part-skip]>a{background-color:var(--_canvas);border:var(--_rule-width) solid var(--_rule);border-radius:var(--slotted-control-radius, 4px);box-shadow:var(--slotted-shadow-md);color:var(--slotted-text, CanvasText);display:inline-block;font-size:var(--slotted-control-font-size-md, 13px);font-weight:var(--slotted-font-weight-medium, 500);inset-block-start:var(--_gutter);inset-inline-start:var(--_gutter);padding-block:var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-5, .75rem);position:absolute;text-decoration:none;transition:translate var(--_duration) var(--_easing);translate:0 -200%;white-space:nowrap}[data-ui-app-shell]>[data-part-skip]>a:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px);translate:0 0}[data-ui-app-shell]>[data-part-banner]{align-items:center;background-color:var(--slotted-app-shell-banner-surface, transparent);color:var( --slotted-app-shell-banner-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-banner;container-type:inline-size;display:flex;gap:var(--_row-gap);grid-area:1 / 1 / 2 / -1;min-block-size:var(--_banner-size);min-inline-size:0;padding-inline:var(--_edge)}[data-ui-app-shell] [data-part-brand]{align-items:center;display:flex;flex:0 1 auto;font-weight:var(--slotted-font-weight-semibold, 600);gap:var(--_row-gap);min-inline-size:0;padding-inline-start:var(--_row-inset)}[data-ui-app-shell] [data-part-brand]>*:not([data-part-nav-toggle]){min-inline-size:0;overflow:var(--slotted-app-shell-brand-overflow, hidden);text-overflow:ellipsis;white-space:var(--slotted-app-shell-brand-wrap, nowrap)}[data-ui-app-shell]>[data-part-banner]>[data-part-actions]{align-items:center;display:flex;flex:0 1 auto;min-inline-size:0;gap:var(--slotted-control-gap-sm, 6px);margin-inline-start:auto;padding-inline-end:var(--_row-inset)}[data-ui-app-shell]>[data-part-banner]>[data-part-actions]>*{flex-shrink:0}[data-ui-app-shell]>[data-part-banner]>[data-part-centre]{align-items:center;display:flex;flex:1 1 auto;gap:var(--_row-gap);min-inline-size:0}[data-ui-app-shell]>[data-part-nav]{background-color:var(--slotted-app-shell-nav-surface, transparent);box-sizing:border-box;color:var( --slotted-app-shell-nav-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );container-name:slotted-app-shell-nav;container-type:inline-size;display:flex;flex-direction:column;grid-area:2 / 1 / 3 / 2;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;transition:inline-size var(--_duration) var(--_easing),visibility var(--_duration) step-start}[data-ui-app-shell]>[data-part-nav]>[data-part-nav-header],[data-ui-app-shell]>[data-part-nav]>[data-part-nav-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;overflow:hidden;padding-block:var(--_row-inset);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui-app-shell]>[data-part-nav]>:is([data-part-nav-header],[data-part-nav-body],[data-part-nav-footer]){--slotted-app-shell-row-ring-inset: var(--_row-ring-inset);padding-inline:calc(var(--_nav-inset) + var(--_row-ring-inset))}[data-ui-app-shell]>[data-part-nav]>[data-part-nav-body]{align-items:stretch;display:flex;flex:1 1 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-block-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-4, .5rem);scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui-app-shell]>[data-part-main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );color:var( --slotted-app-shell-main-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );grid-area:2 / 2 / 3 / 3;isolation:isolate;min-block-size:0;min-inline-size:0}[data-ui-app-shell][data-scroll=content]>[data-part-main]{overflow:auto}[data-ui-app-shell]>[data-part-progress]{contain:strict;grid-area:2 / 2 / 3 / 3;inset-block-start:calc(-1 * var(--_progress-lift, 0px));min-block-size:0;min-inline-size:0;overflow:clip;pointer-events:none;position:relative;z-index:1}[data-ui-app-shell][data-scroll=document]>[data-part-progress]{--slotted-progress-indicator-position: sticky}[data-ui-app-shell]>[data-part-main]:focus{outline:none}[data-ui-app-shell]>[data-part-main]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-app-shell]>[data-part-aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );box-sizing:border-box;color:var( --slotted-app-shell-aside-color, var(--slotted-app-shell-color, var(--slotted-text, CanvasText)) );display:flex;flex-direction:column;grid-area:3 / 1 / 4 / -1;min-block-size:0;min-inline-size:0}[data-ui-app-shell][data-scroll=content]>[data-part-aside]{overflow:auto}[data-ui-app-shell]:not([data-aside-mode=overlay])>[data-part-aside]:not([data-open]){display:none}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-header],[data-ui-app-shell]>[data-part-aside]>[data-part-aside-footer]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_row-gap);min-block-size:var(--_rail-size);min-inline-size:0;padding-block:var(--_row-inset);padding-inline:calc(var(--_row-inset) + var(--_row-gap))}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-header]{font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-header]>:not([data-part]){flex:1 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-footer]{justify-content:flex-end}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-body]{flex:1 1 auto;min-block-size:0;min-inline-size:0;overflow-x:hidden;overflow-y:auto;overflow-inline:hidden;overflow-block:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-5, .75rem);padding-inline:calc(var(--_row-inset) + var(--_row-gap));scrollbar-color:var(--_scrollbar-thumb) var(--_scrollbar-track);scrollbar-gutter:stable;scrollbar-width:thin}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-body][data-inset=none]{padding:0}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]{--_resizer-thickness: var(--slotted-space-6, 1rem);--_resizer-reach: var(--slotted-target-min, 24px);background:transparent;border:0 solid transparent;border-inline-start-width:var(--slotted-border-width-thick, 2px);box-sizing:border-box;cursor:col-resize;display:none;inline-size:var(--_resizer-thickness);inset-block:0;inset-inline-start:0;position:absolute;touch-action:none;transition:border-color var(--_duration) var(--_easing);z-index:1}[data-ui-app-shell][data-nav-side=end]>[data-part-aside]>[data-part-aside-resizer]{border-inline-end-width:var(--slotted-border-width-thick, 2px);border-inline-start-width:0;inset-inline-end:0;inset-inline-start:auto}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]:before{content:\"\";inset-block:0;inset-inline:calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2);position:absolute}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]:not([data-disabled]):hover,[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]:focus-visible,[data-ui-app-shell][data-dragging]>[data-part-aside]>[data-part-aside-resizer]{border-color:var( --slotted-app-shell-resizer-color, var(--slotted-border-strong, ButtonBorder) )}[data-ui-app-shell]>[data-part-aside]>[data-part-aside-resizer]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * var(--slotted-focus-ring-offset, 2px))}[data-ui-app-shell]>[data-part-footer]{align-items:center;background-color:var(--slotted-app-shell-footer-surface, transparent);color:var( --slotted-app-shell-footer-color, var(--slotted-app-shell-color, var(--slotted-text-muted, GrayText)) );display:flex;font-size:var(--slotted-control-font-size-sm, 12px);gap:var(--_row-gap);grid-area:4 / 1 / 5 / -1;min-inline-size:0;padding-block:var(--slotted-space-3, .375rem);padding-inline:calc(var(--_edge) + var(--_row-inset))}[data-ui-app-shell]>[data-part-layer]{display:contents}[data-ui-app-shell][data-canvas=inset]>[data-part-nav]{--slotted-tone-secondary-subtle-hover: color-mix( in oklab, var(--slotted-app-shell-nav-surface, var(--_frame)), var(--slotted-text) 4% );--slotted-tone-secondary-subtle-active: color-mix( in oklab, var(--slotted-app-shell-nav-surface, var(--_frame)), var(--slotted-text) 7% );border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui-app-shell][data-canvas=floating]>[data-part-main],[data-ui-app-shell][data-canvas=floating]>[data-part-aside],[data-ui-app-shell][data-canvas=inset]>[data-part-main],[data-ui-app-shell][data-canvas=inset]>[data-part-aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui-app-shell][data-canvas=floating]>[data-part-aside],[data-ui-app-shell][data-canvas=inset]>[data-part-aside]{margin-inline-start:0}[data-ui-app-shell][data-canvas=floating]>[data-part-footer],[data-ui-app-shell][data-canvas=panel]>[data-part-footer],[data-ui-app-shell][data-canvas=inset]>[data-part-footer]{padding-block-start:0}[data-ui-app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part-main],[data-ui-app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part-main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui-app-shell][data-canvas=flush]{--_edge: var(--_row-inset);--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui-app-shell][data-canvas=flush]>[data-part-banner]{background-color:var( --slotted-app-shell-banner-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell][data-canvas=flush]>[data-part-nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell][data-canvas=flush]>[data-part-main]{background-color:var(--slotted-app-shell-main-surface, transparent)}[data-ui-app-shell][data-canvas=flush]>[data-part-aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell][data-canvas=flush]>[data-part-footer]{background-color:var( --slotted-app-shell-footer-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell][data-canvas=flush]>[data-part-nav]{padding-block:var(--_gutter)}[data-ui-app-shell][data-canvas=flush]>[data-part-banner]{border-block-end:var(--_seam)}[data-ui-app-shell][data-canvas=flush]>[data-part-footer]{border-block-start:var(--_seam)}[data-ui-app-shell][data-canvas=flush]>[data-part-aside]{border-block-start:var(--_seam)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part-nav]>[data-part-nav-footer]{border-block-start:var(--_seam)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part-aside]>[data-part-aside-header]{border-block-end:var(--_seam)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part-aside]>[data-part-aside-footer]{border-block-start:var(--_seam)}[data-ui-app-shell][data-canvas=floating]>[data-part-nav]{background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);margin-block:var(--_gutter);margin-inline-start:var(--_gutter)}[data-ui-app-shell][data-canvas=floating]{--_edge: calc(var(--_gutter) + var(--_rule-width) + var(--_row-inset));--_nav-edges: calc(2 * var(--_rule-width));--_nav-inset: var(--_row-inset)}[data-ui-app-shell][data-canvas=floating][data-nav-side=end]>[data-part-nav]{margin-inline:0 var(--_gutter)}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before,[data-ui-app-shell][data-canvas=panel]:before{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface)) );border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--_elevation);content:\"\";grid-area:1 / 2 / 3 / 3;margin:var(--_gutter);min-inline-size:0}[data-ui-app-shell][data-canvas=panel]:before{grid-area:2 / 1 / 3 / -1;margin:0}[data-ui-app-shell][data-canvas=panel]:is([data-primary=nav],[data-primary=main]):before{grid-area:1 / 1 / 3 / -1}[data-ui-app-shell][data-nav-mode=overlay][data-canvas]:before{content:none}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part-banner]{margin-block-start:calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width));padding-inline:0}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part-main]{border:none;border-radius:0 0 var(--_inner-radius) var(--_inner-radius);box-shadow:none;margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui-app-shell][data-primary=main]>[data-part-banner],[data-ui-app-shell][data-primary=main][data-nav-side=end]>[data-part-banner],[data-ui-app-shell][data-canvas=panel][data-primary=nav]>[data-part-banner],[data-ui-app-shell][data-canvas=panel][data-primary=nav][data-nav-side=end]>[data-part-banner]{border-block-end:var(--_seam);grid-column:2 / 3}[data-ui-app-shell][data-primary=main][data-nav-mode=overlay]>[data-part-banner]{margin:0;padding-inline:var(--_edge)}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part-main]{border-radius:0;margin:0}[data-ui-app-shell][data-canvas=panel]{--_edge: calc(var(--_rule-width) + var(--_row-inset));--_nav-edges: var(--_seam-width);--_nav-inset: var(--_row-inset)}[data-ui-app-shell][data-canvas=floating][data-nav-mode=overlay],[data-ui-app-shell][data-canvas=panel][data-nav-mode=overlay]{--_edge: var(--_gutter)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]){box-sizing:border-box;padding-block-end:var(--_gutter);padding-inline:var(--_gutter)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):is([data-primary=nav],[data-primary=main]){padding-block-start:var(--_gutter)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part-nav]{border-end-start-radius:var(--_inner-radius);border-start-start-radius:var(--_inner-radius);margin:var(--_rule-width) 0 var(--_rule-width) var(--_rule-width)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay])[data-nav-side=end]>[data-part-nav]{border-radius:0 var(--_inner-radius) var(--_inner-radius) 0;margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part-main]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part-main]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-primary=banner])>[data-part-banner]{margin-block-start:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part-aside][data-open])>[data-part-main]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part-aside][data-open])>[data-part-banner]{margin-inline-end:0}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):not([data-aside-mode=overlay])>[data-part-aside]{border-end-end-radius:var(--_inner-radius);border-start-end-radius:var(--_inner-radius);margin:var(--_rule-width) var(--_rule-width) var(--_rule-width) 0}[data-ui-app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part-main]{border-block-start:var(--_rule-width) solid var(--_rule)}[data-ui-app-shell]:is([data-canvas=flush],[data-primary=main]),[data-ui-app-shell][data-canvas=panel][data-primary=nav]{--_progress-lift: var(--_seam-width)}[data-ui-app-shell][data-canvas=panel][data-primary=banner]{--_progress-lift: var(--_rule-width)}[data-ui-app-shell][data-canvas=panel][data-nav-mode=overlay]{--_progress-lift: 0px}[data-ui-app-shell][data-canvas=floating]>[data-part-progress],[data-ui-app-shell][data-canvas=inset]>[data-part-progress]{border-radius:var(--_radius);margin-block:var(--_gutter);margin-inline:var(--_gutter)}[data-ui-app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part-progress],[data-ui-app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part-progress]{border-radius:0;margin:0}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main]>[data-part-progress]{border-radius:0 0 var(--_inner-radius) var(--_inner-radius);margin-block:0 calc(var(--_gutter) + var(--_rule-width));margin-inline:calc(var(--_gutter) + var(--_rule-width))}[data-ui-app-shell]:is([data-canvas=floating],[data-canvas=inset])[data-primary=main][data-nav-mode=overlay]>[data-part-progress]{border-radius:0;margin:0}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay])>[data-part-progress]{border-end-end-radius:var(--_inner-radius);margin-block-end:var(--_rule-width);margin-inline-end:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel][data-primary=banner]:not([data-nav-mode=overlay])>[data-part-progress]{border-start-end-radius:var(--_inner-radius);margin-block-start:var(--_rule-width)}[data-ui-app-shell][data-canvas=panel]:not([data-nav-mode=overlay]):has(>[data-part-aside][data-open])>[data-part-progress]{border-end-end-radius:0;border-start-end-radius:0;margin-inline-end:0}[data-ui-app-shell]>[data-part]{--_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));--_seam: var(--_rule-width) solid var(--_rule)}[data-ui-app-shell][data-separation=tone],[data-ui-app-shell][data-separation=tone]>[data-part]{--_seam: none;--_seam-width: 0px}[data-ui-app-shell][data-canvas=flush][data-separation=tone]>[data-part-footer]{--_ground: var( --slotted-app-shell-footer-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui-app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part-banner]{--_ground: var( --slotted-app-shell-banner-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part-nav]{--_ground: var( --slotted-app-shell-nav-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>[data-part-aside]{--_ground: var( --slotted-app-shell-aside-surface, var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) ) )}[data-ui-app-shell][data-separation=tone]>[data-part-nav]>[data-part-nav-rail]{--_ground: var( --slotted-app-shell-tone-surface, color-mix(in oklab, var(--slotted-surface), var(--slotted-text) 4.5%) )}[data-ui-app-shell][data-canvas=flush][data-separation=tone]:not([data-primary=main])>[data-part-banner],[data-ui-app-shell][data-canvas=flush][data-separation=tone]>[data-part-footer],[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-separation=tone]>:is([data-part-nav],[data-part-aside]),[data-ui-app-shell][data-separation=tone]>[data-part-nav]>[data-part-nav-rail]{--slotted-tone-secondary-subtle-hover: color-mix( in oklab, var(--_ground), var(--slotted-text) 4% );--slotted-tone-secondary-subtle-active: color-mix( in oklab, var(--_ground), var(--slotted-text) 7% );background-color:var(--_ground)}[data-ui-app-shell][data-canvas=flush][data-separation=tone]>[data-part-main]{background-color:var( --slotted-app-shell-main-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) )}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail]){display:grid;grid-template-columns:var(--_rail-size) minmax(var(--_nav-size),1fr);grid-template-rows:auto minmax(0,1fr) auto}[data-ui-app-shell]>[data-part-nav]>[data-part-nav-rail]{align-items:center;border-inline-end:var(--_seam);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);grid-area:1 / 1 / -1 / 2;min-block-size:0;overflow:auto;overscroll-behavior:contain;padding-block:var(--_row-inset);scrollbar-width:none}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail])>[data-part-nav-header]{grid-area:1 / 2 / 2 / 3}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail])>[data-part-nav-body]{grid-area:2 / 2 / 3 / 3}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail])>[data-part-nav-footer]{grid-area:3 / 2 / 4 / 3}[data-ui-app-shell]>[data-part-nav]:has(>[data-part-nav-rail])>:is([data-part-nav-header],[data-part-nav-body],[data-part-nav-footer]){padding-inline-start:calc(var(--_row-inset) + var(--_row-ring-inset));transition:visibility var(--_duration) step-start}[data-ui-app-shell][data-nav-mode=inline][data-open]>[data-part-nav]:has(>[data-part-nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-size) + var(--_nav-edges))}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]:has(>[data-part-nav-rail]){inline-size:calc(var(--_rail-size) + var(--_nav-edges))}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]:has(>[data-part-nav-rail])>:is([data-part-nav-header],[data-part-nav-body],[data-part-nav-footer]){transition:visibility var(--_duration) step-end;visibility:hidden}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]>[data-part-nav-rail]{border-inline-end:none}@media(forced-colors:active){[data-ui-app-shell][data-separation=tone],[data-ui-app-shell][data-separation=tone]>[data-part]{--_seam: var(--_rule-width) solid CanvasText;--_seam-width: var(--_rule-width)}}[data-ui-app-shell] [data-part-nav-toggle],[data-ui-app-shell] [data-part-aside-toggle]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px);background-color:transparent;block-size:var(--_row-mark);border:none;border-radius:var(--slotted-control-radius, 4px);color:color-mix(in oklab,currentcolor 70%,transparent);cursor:pointer;display:inline-grid;flex:0 0 auto;inline-size:var(--_row-mark);padding:0;place-items:center;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1)),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing, cubic-bezier(.2, 0, 0, 1))}[data-ui-app-shell][data-nav-side=end] [data-part-nav-toggle]>[data-ui-icon],[dir=rtl] [data-ui-app-shell] [data-part-nav-toggle]>[data-ui-icon],[data-ui-app-shell]:not([data-nav-side=end]) [data-part-aside-toggle]>[data-ui-icon],[dir=rtl] [data-ui-app-shell][data-nav-side=end] [data-part-aside-toggle]>[data-ui-icon]{scale:-1 1}[dir=rtl] [data-ui-app-shell][data-nav-side=end] [data-part-nav-toggle]>[data-ui-icon],[dir=rtl] [data-ui-app-shell]:not([data-nav-side=end]) [data-part-aside-toggle]>[data-ui-icon]{scale:1 1}[data-ui-app-shell] [data-part-nav-toggle]:enabled:hover,[data-ui-app-shell] [data-part-aside-toggle]:enabled:hover{background-color:var(--slotted-tone-secondary-subtle-hover, ButtonFace);color:currentcolor}[data-ui-app-shell] [data-part-nav-toggle]:enabled:active,[data-ui-app-shell] [data-part-aside-toggle]:enabled:active{background-color:var(--slotted-tone-secondary-subtle-active, ButtonFace)}[data-ui-app-shell] [data-part-nav-toggle]:focus-visible,[data-ui-app-shell] [data-part-aside-toggle]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-app-shell][data-nav-mode=inline]>[data-part-nav]{inline-size:calc(var(--_rail-size) + 2 * (var(--_nav-inset) + var(--_row-ring-inset)) + var(--_nav-edges))}[data-ui-app-shell][data-nav-mode=inline][data-open]>[data-part-nav]{inline-size:var(--_nav-size)}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]>[data-part-nav-header],[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]>[data-part-nav-footer]{flex-wrap:wrap;justify-content:center}[data-ui-app-shell][data-nav-mode=inline]:not([data-open])>[data-part-nav]>[data-part-nav-body]{align-items:center}[data-ui-app-shell][data-nav-mode=inline][data-collapsed-to=hidden]:not([data-open])>[data-part-nav]{display:none}[data-ui-app-shell][data-nav-side=end]>[data-part-nav]{grid-area:2 / 3 / 3 / 4}[data-ui-app-shell][data-canvas=inset][data-nav-side=end]>[data-part-nav]{margin-inline:0 var(--_gutter)}[data-ui-app-shell][data-canvas=flush][data-nav-side=end]>[data-part-nav]{padding-inline:0 var(--_gutter)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])>[data-part-nav]{border-inline-end:var(--_seam)}[data-ui-app-shell]:is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part-nav]{border-inline-end:none;border-inline-start:var(--_seam)}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])>[data-part-nav]{grid-area:1 / 1 / -1 / 2}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part-nav]{grid-area:1 / 3 / -1 / 4}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])>[data-part-nav]>[data-part-nav-header]{box-sizing:border-box;min-block-size:var(--_banner-size)}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])>[data-part-banner],[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])>[data-part-footer]{grid-column:2 / -1}[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part-banner],[data-ui-app-shell]:is([data-primary=nav],[data-primary=main])[data-nav-side=end]>[data-part-footer]{grid-column:1 / -2}[data-ui-app-shell][data-primary=main]>[data-part-banner],[data-ui-app-shell][data-canvas=panel][data-primary=nav]>[data-part-banner]{grid-column:2 / 3}[data-ui-app-shell][data-nav-mode=overlay]>[data-part-nav]{--_nav-inset: var(--_row-inset);background-color:var( --slotted-app-shell-nav-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:min(var(--_nav-overlay-size),calc(100% - var(--_row-mark) - 2 * var(--_gutter)));inset-block:0;inset-inline-start:0;margin:0;padding-inline:0;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:-100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui-app-shell][data-nav-mode=overlay][data-open]>[data-part-nav]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui-app-shell][data-nav-mode=overlay][data-nav-side=end]>[data-part-nav]{inset-inline-end:0;inset-inline-start:auto;translate:100% 0}[data-ui-app-shell][data-canvas=floating][data-nav-mode=overlay]>[data-part-nav],[data-ui-app-shell][data-canvas=panel][data-nav-mode=overlay]>[data-part-nav],[data-ui-app-shell][data-canvas=inset][data-nav-mode=overlay]>[data-part-nav]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui-app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-nav-side=end]>[data-part-nav]{margin-inline-end:var(--_gutter);margin-inline-start:0;translate:calc(100% + var(--_gutter)) 0}[data-ui-app-shell]:not([data-canvas=flush])[data-nav-mode=overlay][data-open]>[data-part-nav]{translate:0 0}[data-ui-app-shell][data-aside-mode=overlay]>[data-part-aside]{background-color:var( --slotted-app-shell-aside-surface, var(--slotted-app-shell-canvas, var(--slotted-surface, Canvas)) );border-block-start:var(--_rule-width) solid var(--_rule);box-shadow:var(--slotted-shadow-lg);display:flex;grid-area:2 / 1 / -1 / -1;inline-size:var(--_aside-size);inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;max-inline-size:80%;position:absolute;transition:translate var(--_duration) var(--slotted-easing-exit, cubic-bezier(.3, 0, .8, .15)),visibility var(--_duration) step-end;translate:100% 0;visibility:hidden;z-index:var(--slotted-z-index-overlay, 1000)}[data-ui-app-shell][data-aside-mode=overlay]>[data-part-aside][data-open]{transition:translate var(--_duration) var(--slotted-easing-enter, cubic-bezier(.05, .7, .1, 1)),visibility var(--_duration) step-start;translate:0 0;visibility:visible}[data-ui-app-shell][data-aside-mode=overlay][data-nav-side=end]>[data-part-aside]{inset-inline-end:auto;inset-inline-start:0;translate:-100% 0}[data-ui-app-shell][data-canvas=floating][data-aside-mode=overlay]>[data-part-aside],[data-ui-app-shell][data-canvas=panel][data-aside-mode=overlay]>[data-part-aside],[data-ui-app-shell][data-canvas=inset][data-aside-mode=overlay]>[data-part-aside]{border:var(--_rule-width) solid var(--_rule);border-radius:var(--_radius);box-shadow:var(--slotted-shadow-lg);margin-block:var(--_gutter);margin-inline-end:var(--_gutter);translate:calc(100% + var(--_gutter)) 0}[data-ui-app-shell]:not([data-canvas=flush])[data-aside-mode=overlay][data-nav-side=end]>[data-part-aside]{margin-inline-end:0;margin-inline-start:var(--_gutter);translate:calc(-100% - var(--_gutter)) 0}[data-ui-app-shell]:not([data-canvas=flush])[data-aside-mode=overlay]>[data-part-aside][data-open]{translate:0 0}@container slotted-app-shell (inline-size >= 600px){[data-ui-app-shell]:not([data-nav-mode])>[data-part-nav]{inline-size:calc(var(--_rail-size) + 2 * (var(--_nav-inset) + var(--_row-ring-inset)) + var(--_nav-edges))}[data-ui-app-shell]:not([data-nav-mode])[data-open]>[data-part-nav]{inline-size:var(--_nav-size)}[data-ui-app-shell]:not([data-aside-mode=overlay])>[data-part-aside]{grid-area:2 / 3 / 3 / 4;inline-size:var(--slotted-app-shell-aside-extent, var(--_aside-size));position:relative}[data-ui-app-shell]:not([data-aside-mode=overlay])>[data-part-aside]>[data-part-aside-resizer]:not([hidden]){display:block}[data-ui-app-shell]:not([data-aside-mode=overlay])[data-nav-side=end]>[data-part-aside]{grid-area:2 / 1 / 3 / 2}[data-ui-app-shell]:not([data-aside-mode=overlay])[data-primary=main]>[data-part-aside],[data-ui-app-shell]:not([data-aside-mode=overlay])[data-canvas=panel][data-primary=nav]>[data-part-aside]{grid-row:1 / 3}[data-ui-app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])[data-nav-side=end]>[data-part-aside]{margin-inline:var(--_gutter) 0}[data-ui-app-shell]:not([data-aside-mode=overlay])[data-canvas=flush]>[data-part-aside]{border-block-start:none}[data-ui-app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])>[data-part-aside]{border-inline-start:var(--_seam)}[data-ui-app-shell]:not([data-aside-mode=overlay]):is([data-canvas=flush],[data-canvas=panel])[data-nav-side=end]>[data-part-aside]{border-inline-end:var(--_seam);border-inline-start:none}}@container slotted-app-shell (inline-size < 600px){[data-ui-app-shell]:not([data-nav-mode])>[data-part-nav]{display:none}[data-ui-app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part-main],[data-ui-app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part-main]{border-block-end:0;border-inline:0;border-radius:0;box-shadow:none;margin:0}[data-ui-app-shell]:not([data-nav-mode]):is([data-canvas=floating],[data-canvas=inset])[data-primary=main]:before{content:none}[data-ui-app-shell]:not([data-nav-mode])[data-primary=main]>[data-part-banner]{margin:0;padding-inline:var(--_edge)}[data-ui-app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part-main]{border-block-start:var(--_rule-width) solid var(--_rule);border-radius:0}[data-ui-app-shell]:not([data-nav-mode])[data-canvas=floating]>[data-part-progress],[data-ui-app-shell]:not([data-nav-mode])[data-canvas=inset]>[data-part-progress]{border-radius:0;margin:0}[data-ui-app-shell]:not([data-nav-mode])[data-canvas=panel]>[data-part-progress]{border-radius:0}[data-ui-app-shell]:not([data-aside-mode=overlay]):is([data-canvas=floating],[data-canvas=inset])>[data-part-aside]{margin-inline:var(--_gutter)}[data-ui-app-shell][data-scroll=content]:not([data-aside-mode=overlay])>[data-part-aside]{max-block-size:50cqb}[data-ui-app-shell]:not([data-aside-mode])>[data-part-aside]{display:none}}[data-ui-app-shell]>[data-part-scrim]{background-color:var(--_scrim);grid-area:2 / 1 / -1 / -1;inset:0;opacity:1;position:absolute;transition:opacity var(--_duration) var(--_easing);z-index:calc(var(--slotted-z-index-overlay, 1000) - 1)}[data-ui-app-shell]>[data-part-scrim][data-status=entering],[data-ui-app-shell]>[data-part-scrim][data-status=exiting]{opacity:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { navOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "navOpen", required: false }] }, { type: i0.Output, args: ["navOpenChange"] }], asideOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideOpen", required: false }] }, { type: i0.Output, args: ["asideOpenChange"] }], asideExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideExtent", required: false }] }, { type: i0.Output, args: ["asideExtentChange"] }], minAsideExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "minAsideExtent", required: false }] }], maxAsideExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAsideExtent", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], canvas: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvas", required: false }] }], navMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "navMode", required: false }] }], navSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "navSide", required: false }] }], navSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "navSize", required: false }] }], asideMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideMode", required: false }] }], asideSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "asideSize", required: false }] }], collapsedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedTo", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], separation: [{ type: i0.Input, args: [{ isSignal: true, alias: "separation", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], escape: [{ type: i0.Input, args: [{ isSignal: true, alias: "escape", required: false }] }], outsidePress: [{ type: i0.Input, args: [{ isSignal: true, alias: "outsidePress", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], closeOnNavigate: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigate", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], navOpenChangeRequest: [{ type: i0.Output, args: ["navOpenChangeRequest"] }], asideOpenChangeRequest: [{ type: i0.Output, args: ["asideOpenChangeRequest"] }], asideExtentChangeRequest: [{ type: i0.Output, args: ["asideExtentChangeRequest"] }], veilRef: [{ type: i0.ViewChild, args: ['scrim', { isSignal: true }] }] } });
 function optionalBoolean(value) {
     return value === undefined ? undefined : booleanAttribute(value);
@@ -636,7 +675,7 @@ class SlAppShellBanner {
         attach('banner');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellBanner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellBanner, isStandalone: true, selector: "header[slAppShellBanner]", host: { attributes: { "data-part": "banner" } }, exportAs: ["slAppShellBanner"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellBanner, isStandalone: true, selector: "header[slAppShellBanner]", host: { attributes: { "data-part": "banner", "data-part-banner": "" } }, exportAs: ["slAppShellBanner"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellBanner, decorators: [{
             type: Directive,
@@ -644,13 +683,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'header[slAppShellBanner]',
                     standalone: true,
                     exportAs: 'slAppShellBanner',
-                    host: { 'data-part': 'banner' },
+                    host: { 'data-part': 'banner', 'data-part-banner': '' },
                 }]
         }], ctorParameters: () => [] });
 /** The start cluster of the banner: the toggle, the mark, the name of the workspace. */
 class SlAppShellBrand {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellBrand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellBrand, isStandalone: true, selector: "[slAppShellBrand]", host: { attributes: { "data-part": "brand" } }, exportAs: ["slAppShellBrand"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellBrand, isStandalone: true, selector: "[slAppShellBrand]", host: { attributes: { "data-part": "brand", "data-part-brand": "" } }, exportAs: ["slAppShellBrand"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellBrand, decorators: [{
             type: Directive,
@@ -658,13 +697,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellBrand]',
                     standalone: true,
                     exportAs: 'slAppShellBrand',
-                    host: { 'data-part': 'brand' },
+                    host: { 'data-part': 'brand', 'data-part-brand': '' },
                 }]
         }] });
 /** The middle of the bar, and the one cluster that grows: a search, a trail, a route title. */
 class SlAppShellCentre {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellCentre, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellCentre, isStandalone: true, selector: "[slAppShellCentre]", host: { attributes: { "data-part": "centre" } }, exportAs: ["slAppShellCentre"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellCentre, isStandalone: true, selector: "[slAppShellCentre]", host: { attributes: { "data-part": "centre", "data-part-centre": "" } }, exportAs: ["slAppShellCentre"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellCentre, decorators: [{
             type: Directive,
@@ -672,13 +711,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellCentre]',
                     standalone: true,
                     exportAs: 'slAppShellCentre',
-                    host: { 'data-part': 'centre' },
+                    host: { 'data-part': 'centre', 'data-part-centre': '' },
                 }]
         }] });
 /** The end cluster, pushed there by the space it takes. */
 class SlAppShellActions {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellActions, isStandalone: true, selector: "[slAppShellActions]", host: { attributes: { "data-part": "actions" } }, exportAs: ["slAppShellActions"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellActions, isStandalone: true, selector: "[slAppShellActions]", host: { attributes: { "data-part": "actions", "data-part-actions": "" } }, exportAs: ["slAppShellActions"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellActions, decorators: [{
             type: Directive,
@@ -686,7 +725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellActions]',
                     standalone: true,
                     exportAs: 'slAppShellActions',
-                    host: { 'data-part': 'actions' },
+                    host: { 'data-part': 'actions', 'data-part-actions': '' },
                 }]
         }] });
 /**
@@ -706,7 +745,7 @@ class SlAppShellNav {
         inject(DestroyRef).onDestroy(remove);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNav, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNav, isStandalone: true, selector: "nav[slAppShellNav]", host: { attributes: { "data-part": "nav" }, properties: { "attr.id": "elementId", "attr.aria-label": "label()" } }, exportAs: ["slAppShellNav"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNav, isStandalone: true, selector: "nav[slAppShellNav]", host: { attributes: { "data-part": "nav", "data-part-nav": "" }, properties: { "attr.id": "elementId", "attr.aria-label": "label()" } }, exportAs: ["slAppShellNav"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNav, decorators: [{
             type: Directive,
@@ -716,6 +755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slAppShellNav',
                     host: {
                         'data-part': 'nav',
+                        'data-part-nav': '',
                         '[attr.id]': 'elementId',
                         '[attr.aria-label]': 'label()',
                     },
@@ -728,7 +768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 class SlAppShellNavRail {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavRail, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavRail, isStandalone: true, selector: "[slAppShellNavRail]", host: { attributes: { "data-part": "nav-rail" } }, exportAs: ["slAppShellNavRail"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavRail, isStandalone: true, selector: "[slAppShellNavRail]", host: { attributes: { "data-part": "nav-rail", "data-part-nav-rail": "" } }, exportAs: ["slAppShellNavRail"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavRail, decorators: [{
             type: Directive,
@@ -736,13 +776,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellNavRail]',
                     standalone: true,
                     exportAs: 'slAppShellNavRail',
-                    host: { 'data-part': 'nav-rail' },
+                    host: { 'data-part': 'nav-rail', 'data-part-nav-rail': '' },
                 }]
         }] });
 /** The pinned top of the navigation column. */
 class SlAppShellNavHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavHeader, isStandalone: true, selector: "[slAppShellNavHeader]", host: { attributes: { "data-part": "nav-header" } }, exportAs: ["slAppShellNavHeader"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavHeader, isStandalone: true, selector: "[slAppShellNavHeader]", host: { attributes: { "data-part": "nav-header", "data-part-nav-header": "" } }, exportAs: ["slAppShellNavHeader"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavHeader, decorators: [{
             type: Directive,
@@ -750,13 +790,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellNavHeader]',
                     standalone: true,
                     exportAs: 'slAppShellNavHeader',
-                    host: { 'data-part': 'nav-header' },
+                    host: { 'data-part': 'nav-header', 'data-part-nav-header': '' },
                 }]
         }] });
 /** The middle, and the only part of the column that scrolls. */
 class SlAppShellNavBody {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavBody, isStandalone: true, selector: "[slAppShellNavBody]", host: { attributes: { "data-part": "nav-body" } }, exportAs: ["slAppShellNavBody"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavBody, isStandalone: true, selector: "[slAppShellNavBody]", host: { attributes: { "data-part": "nav-body", "data-part-nav-body": "" } }, exportAs: ["slAppShellNavBody"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavBody, decorators: [{
             type: Directive,
@@ -764,13 +804,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellNavBody]',
                     standalone: true,
                     exportAs: 'slAppShellNavBody',
-                    host: { 'data-part': 'nav-body' },
+                    host: { 'data-part': 'nav-body', 'data-part-nav-body': '' },
                 }]
         }] });
 /** The pinned bottom: the account, the collapse control. */
 class SlAppShellNavFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavFooter, isStandalone: true, selector: "[slAppShellNavFooter]", host: { attributes: { "data-part": "nav-footer" } }, exportAs: ["slAppShellNavFooter"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavFooter, isStandalone: true, selector: "[slAppShellNavFooter]", host: { attributes: { "data-part": "nav-footer", "data-part-nav-footer": "" } }, exportAs: ["slAppShellNavFooter"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavFooter, decorators: [{
             type: Directive,
@@ -778,15 +818,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellNavFooter]',
                     standalone: true,
                     exportAs: 'slAppShellNavFooter',
-                    host: { 'data-part': 'nav-footer' },
+                    host: { 'data-part': 'nav-footer', 'data-part-nav-footer': '' },
                 }]
         }] });
 /**
  * The `main` landmark, and the skip link's destination.
  *
- * `tabindex="-1"` is not decoration: a `main` without it takes the scroll and
- * leaves the focus behind in Safari and in Firefox, so the link appears to work
- * and moves nothing a screen reader follows.
+ * It carries no `tabindex` of its own: the skip link and `focusMain()` write
+ * `tabindex="-1"` for the one focus they move (`focusTarget`), and the blur or
+ * the next pointer press inside removes it. A `main` focusable all the time
+ * takes the focus of every click on its text, and the next key draws the ring
+ * around the page. A `tabindex` the consumer writes stays.
  */
 class SlAppShellMain {
     shell = attach('main');
@@ -801,7 +843,7 @@ class SlAppShellMain {
         inject(DestroyRef).onDestroy(remove);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellMain, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellMain, isStandalone: true, selector: "main[slAppShellMain]", host: { attributes: { "data-part": "main", "tabindex": "-1" }, properties: { "attr.id": "elementId", "attr.aria-busy": "busy()" } }, exportAs: ["slAppShellMain"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellMain, isStandalone: true, selector: "main[slAppShellMain]", host: { attributes: { "data-part": "main", "data-part-main": "" }, properties: { "attr.id": "elementId", "attr.aria-busy": "busy()" } }, exportAs: ["slAppShellMain"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellMain, decorators: [{
             type: Directive,
@@ -811,7 +853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slAppShellMain',
                     host: {
                         'data-part': 'main',
-                        tabindex: '-1',
+                        'data-part-main': '',
                         '[attr.id]': 'elementId',
                         '[attr.aria-busy]': 'busy()',
                     },
@@ -863,7 +905,7 @@ class SlAppShellProgress {
         inject(DestroyRef).onDestroy(() => this.shell.busy.set(false));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlAppShellProgress, isStandalone: true, selector: "[slAppShellProgress]", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minDuration: { classPropertyName: "minDuration", publicName: "minDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withdraw: "withdraw" }, host: { attributes: { "data-part": "progress" } }, viewQueries: [{ propertyName: "bar", first: true, predicate: SlProgressBar, descendants: true, isSignal: true }], exportAs: ["slAppShellProgress"], ngImport: i0, template: `<div
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SlAppShellProgress, isStandalone: true, selector: "[slAppShellProgress]", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minDuration: { classPropertyName: "minDuration", publicName: "minDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withdraw: "withdraw" }, host: { attributes: { "data-part": "progress", "data-part-progress": "" } }, viewQueries: [{ propertyName: "bar", first: true, predicate: SlProgressBar, descendants: true, isSignal: true }], exportAs: ["slAppShellProgress"], ngImport: i0, template: `<div
     slProgressBar
     placement="edge-start"
     [buffer]="buffer()"
@@ -905,7 +947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   ></div>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'progress' },
+                    host: { 'data-part': 'progress', 'data-part-progress': '' },
                 }]
         }], ctorParameters: () => [], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], buffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "buffer", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDuration", required: false }] }], withdraw: [{ type: i0.Output, args: ["withdraw"] }], bar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SlProgressBar), { isSignal: true }] }] } });
 /**
@@ -933,7 +975,7 @@ class SlAppShellAside {
         inject(DestroyRef).onDestroy(remove);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAside, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAside, isStandalone: true, selector: "aside[slAppShellAside]", host: { attributes: { "data-part": "aside" }, properties: { "attr.id": "elementId", "attr.aria-label": "label()", "attr.data-open": "shell.asideOpen() ? '' : null", "style.--slotted-app-shell-aside-extent": "extentLength()" } }, exportAs: ["slAppShellAside"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAside, isStandalone: true, selector: "aside[slAppShellAside]", host: { attributes: { "data-part": "aside", "data-part-aside": "" }, properties: { "attr.id": "elementId", "attr.aria-label": "label()", "attr.data-open": "shell.asideOpen() ? '' : null", "style.--slotted-app-shell-aside-extent": "extentLength()" } }, exportAs: ["slAppShellAside"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAside, decorators: [{
             type: Directive,
@@ -943,6 +985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slAppShellAside',
                     host: {
                         'data-part': 'aside',
+                        'data-part-aside': '',
                         '[attr.id]': 'elementId',
                         '[attr.aria-label]': 'label()',
                         '[attr.data-open]': "shell.asideOpen() ? '' : null",
@@ -953,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** The pinned top of the pane: its title, and the control that closes it. */
 class SlAppShellAsideHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideHeader, isStandalone: true, selector: "[slAppShellAsideHeader]", host: { attributes: { "data-part": "aside-header" } }, exportAs: ["slAppShellAsideHeader"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideHeader, isStandalone: true, selector: "[slAppShellAsideHeader]", host: { attributes: { "data-part": "aside-header", "data-part-aside-header": "" } }, exportAs: ["slAppShellAsideHeader"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideHeader, decorators: [{
             type: Directive,
@@ -961,7 +1004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellAsideHeader]',
                     standalone: true,
                     exportAs: 'slAppShellAsideHeader',
-                    host: { 'data-part': 'aside-header' },
+                    host: { 'data-part': 'aside-header', 'data-part-aside-header': '' },
                 }]
         }] });
 /**
@@ -973,7 +1016,7 @@ class SlAppShellAsideBody {
     inset = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inset" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlAppShellAsideBody, isStandalone: true, selector: "[slAppShellAsideBody]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "aside-body" }, properties: { "attr.data-inset": "inset() ?? null" } }, exportAs: ["slAppShellAsideBody"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlAppShellAsideBody, isStandalone: true, selector: "[slAppShellAsideBody]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "aside-body", "data-part-aside-body": "" }, properties: { "attr.data-inset": "inset() ?? null" } }, exportAs: ["slAppShellAsideBody"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideBody, decorators: [{
             type: Directive,
@@ -981,7 +1024,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellAsideBody]',
                     standalone: true,
                     exportAs: 'slAppShellAsideBody',
-                    host: { 'data-part': 'aside-body', '[attr.data-inset]': 'inset() ?? null' },
+                    host: {
+                        'data-part': 'aside-body',
+                        'data-part-aside-body': '',
+                        '[attr.data-inset]': 'inset() ?? null',
+                    },
                 }]
         }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
 /**
@@ -1156,7 +1203,7 @@ class SlAppShellAsideResizer {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideResizer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideResizer, isStandalone: true, selector: "[slAppShellAsideResizer]", host: { attributes: { "data-part": "aside-resizer", "role": "separator", "tabindex": "0", "aria-orientation": "vertical" }, listeners: { "pointerdown": "pointerDown($event)", "pointermove": "pointerMove($event)", "pointerup": "endDrag($event)", "lostpointercapture": "endDrag($event)", "keydown": "keyDown($event)" }, properties: { "attr.aria-controls": "shell.asideId", "attr.aria-label": "label()", "attr.aria-valuemin": "percent(shell.asideBounds().min)", "attr.aria-valuemax": "percent(shell.asideBounds().max)", "attr.aria-valuenow": "percent(current())", "attr.hidden": "shown() ? null : ''" } }, exportAs: ["slAppShellAsideResizer"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideResizer, isStandalone: true, selector: "[slAppShellAsideResizer]", host: { attributes: { "data-part": "aside-resizer", "data-part-aside-resizer": "", "role": "separator", "tabindex": "0", "aria-orientation": "vertical" }, listeners: { "pointerdown": "pointerDown($event)", "pointermove": "pointerMove($event)", "pointerup": "endDrag($event)", "lostpointercapture": "endDrag($event)", "keydown": "keyDown($event)" }, properties: { "attr.aria-controls": "shell.asideId", "attr.aria-label": "label()", "attr.aria-valuemin": "percent(shell.asideBounds().min)", "attr.aria-valuemax": "percent(shell.asideBounds().max)", "attr.aria-valuenow": "percent(current())", "attr.hidden": "shown() ? null : ''" } }, exportAs: ["slAppShellAsideResizer"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideResizer, decorators: [{
             type: Directive,
@@ -1166,6 +1213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slAppShellAsideResizer',
                     host: {
                         'data-part': 'aside-resizer',
+                        'data-part-aside-resizer': '',
                         role: 'separator',
                         tabindex: '0',
                         'aria-orientation': 'vertical',
@@ -1186,7 +1234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** The pinned bottom: the actions that close the task the pane holds. */
 class SlAppShellAsideFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideFooter, isStandalone: true, selector: "[slAppShellAsideFooter]", host: { attributes: { "data-part": "aside-footer" } }, exportAs: ["slAppShellAsideFooter"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideFooter, isStandalone: true, selector: "[slAppShellAsideFooter]", host: { attributes: { "data-part": "aside-footer", "data-part-aside-footer": "" } }, exportAs: ["slAppShellAsideFooter"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideFooter, decorators: [{
             type: Directive,
@@ -1194,7 +1242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slAppShellAsideFooter]',
                     standalone: true,
                     exportAs: 'slAppShellAsideFooter',
-                    host: { 'data-part': 'aside-footer' },
+                    host: { 'data-part': 'aside-footer', 'data-part-aside-footer': '' },
                 }]
         }] });
 /**
@@ -1222,7 +1270,7 @@ class SlAppShellAsideToggle {
         this.shell.requestAside(!this.shell.asideOpen(), reason, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellAsideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideToggle, isStandalone: true, selector: "button[slAppShellAsideToggle]", host: { attributes: { "data-part": "aside-toggle", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.id": "elementId", "attr.aria-controls": "controls", "attr.aria-expanded": "shell.asideOpen()", "attr.aria-label": "label()" } }, exportAs: ["slAppShellAsideToggle"], ngImport: i0, template: `<ng-content
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellAsideToggle, isStandalone: true, selector: "button[slAppShellAsideToggle]", host: { attributes: { "data-part": "aside-toggle", "data-part-aside-toggle": "", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.id": "elementId", "attr.aria-controls": "controls", "attr.aria-expanded": "shell.asideOpen()", "attr.aria-label": "label()" } }, exportAs: ["slAppShellAsideToggle"], ngImport: i0, template: `<ng-content
     ><span slIcon
       ><svg slGlyph [name]="shell.asideOpen() ? 'panel-close' : 'panel-open'"></svg></span
   ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1242,6 +1290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         'data-part': 'aside-toggle',
+                        'data-part-aside-toggle': '',
                         type: 'button',
                         '[attr.id]': 'elementId',
                         '[attr.aria-controls]': 'controls',
@@ -1257,7 +1306,7 @@ class SlAppShellFooter {
         attach('footer');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellFooter, isStandalone: true, selector: "footer[slAppShellFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slAppShellFooter"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellFooter, isStandalone: true, selector: "footer[slAppShellFooter]", host: { attributes: { "data-part": "footer", "data-part-footer": "" } }, exportAs: ["slAppShellFooter"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellFooter, decorators: [{
             type: Directive,
@@ -1265,7 +1314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'footer[slAppShellFooter]',
                     standalone: true,
                     exportAs: 'slAppShellFooter',
-                    host: { 'data-part': 'footer' },
+                    host: { 'data-part': 'footer', 'data-part-footer': '' },
                 }]
         }], ctorParameters: () => [] });
 /**
@@ -1298,7 +1347,7 @@ class SlAppShellNavToggle {
         this.shell.request(!this.shell.navOpen(), reason, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlAppShellNavToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavToggle, isStandalone: true, selector: "button[slAppShellNavToggle]", host: { attributes: { "data-part": "nav-toggle", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.id": "elementId", "attr.aria-controls": "controls", "attr.aria-expanded": "shell.navOpen()", "attr.aria-label": "label()" } }, exportAs: ["slAppShellNavToggle"], ngImport: i0, template: `<ng-content
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlAppShellNavToggle, isStandalone: true, selector: "button[slAppShellNavToggle]", host: { attributes: { "data-part": "nav-toggle", "data-part-nav-toggle": "", "type": "button" }, listeners: { "click": "press($event)" }, properties: { "attr.id": "elementId", "attr.aria-controls": "controls", "attr.aria-expanded": "shell.navOpen()", "attr.aria-label": "label()" } }, exportAs: ["slAppShellNavToggle"], ngImport: i0, template: `<ng-content
     ><span slIcon><svg slGlyph [name]="shell.navOpen() ? 'panel-close' : 'panel-open'"></svg></span
   ></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1316,6 +1365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         'data-part': 'nav-toggle',
+                        'data-part-nav-toggle': '',
                         type: 'button',
                         '[attr.id]': 'elementId',
                         '[attr.aria-controls]': 'controls',