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

package/fesm2022/slotted-angular-side-navigation.mjs

@@ -6,6 +6,7 @@ import { injectMessages } from '@slotted/angular/i18n';
 import { sideNavigationMessages } from '@slotted/core/i18n';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, model, input, booleanAttribute, numberAttribute, output, HostAttributeToken, ElementRef, computed, signal, DestroyRef, afterNextRender, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { writeSelectorKey } from '@slotted/core/selector-key';
 import { createDismissableLayer } from '@slotted/core/dismissable-layer';
 import { createPortalRoot } from '@slotted/core/portal';
 import { createPositioner } from '@slotted/core/positioner';
@@ -326,13 +327,15 @@ class SlSideNavigation {
         all[next]?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlSideNavigation, isStandalone: true, selector: "[slSideNavigation]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, flyout: { classPropertyName: "flyout", publicName: "flyout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, autoExpand: { classPropertyName: "autoExpand", publicName: "autoExpand", isSignal: true, isRequired: false, transformFunction: null }, guides: { classPropertyName: "guides", publicName: "guides", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, compactAt: { classPropertyName: "compactAt", publicName: "compactAt", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", expanded: "expandedChange", flyout: "flyoutChange", valueChangeRequest: "valueChangeRequest", expandedChangeRequest: "expandedChangeRequest", flyoutChangeRequest: "flyoutChangeRequest" }, host: { attributes: { "data-ui": "side-navigation", "data-part": "root" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-mode": "resolvedMode()", "attr.data-size": "resolvedSize()", "attr.data-truncate": "resolvedTruncate()", "attr.data-guides": "resolvedGuides() ? '' : null", "attr.data-compact": "compact() ? '' : null" } }, exportAs: ["slSideNavigation"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui=side-navigation]{--_row-height: var(--slotted-app-shell-row-height, var(--slotted-control-height-md, 34px));--_mark: var(--slotted-app-shell-row-mark, var(--_row-height));--_inset: var(--slotted-app-shell-row-inset, var(--slotted-space-4, .5rem));--_standoff: min(var(--slotted-space-2, .25rem), var(--_inset));--_gap: var(--slotted-app-shell-row-gap, var(--slotted-control-gap-md, 8px));--_font-size: var(--slotted-app-shell-row-font-size, var(--slotted-font-size-sm, .8125rem));--_line-height: var(--slotted-app-shell-row-line-height, var(--slotted-line-height-sm, 1.45));--_icon-size: var(--slotted-control-icon-size-md, 16px);--_description-font-size: var(--slotted-font-size-xs, .75rem);--_section-font-size: var(--slotted-font-size-xs, .75rem);--_indent: var(--slotted-side-navigation-indent, calc(var(--_mark) + var(--_gap)));--_indent-step: var(--slotted-side-navigation-indent-step, var(--slotted-space-7, 1.25rem));--_radius: var(--slotted-side-navigation-radius, var(--slotted-radius-md, 6px));--_row-gap: var(--slotted-side-navigation-row-gap, var(--slotted-space-1, .125rem));--_section-gap: var(--slotted-side-navigation-section-gap, var(--slotted-space-5, .75rem));--_guide-width: var(--slotted-border-width-thin, 1px);--_dot-size: var(--slotted-side-navigation-dot-size, var(--slotted-space-3, .375rem));--_color: var(--slotted-side-navigation-color, var(--slotted-text-muted, GrayText));--_hover-color: var(--slotted-side-navigation-hover-color, var(--slotted-text, CanvasText));--_hover-background: var( --slotted-side-navigation-hover-background, var(--slotted-tone-secondary-subtle-hover) );--_active-background: var( --slotted-side-navigation-active-background, var(--slotted-tone-secondary-subtle-active) );--_current-color: var(--slotted-side-navigation-current-color, var(--slotted-tone-accent-text));--_current-background: var( --slotted-side-navigation-current-background, var(--slotted-tone-accent-surface) );--_current-edge: var( --slotted-side-navigation-current-edge, var(--slotted-current-edge, transparent) );--_dot-color: var(--slotted-side-navigation-dot-color, var(--slotted-tone-accent-solid));--_section-color: var( --slotted-side-navigation-section-color, var(--slotted-text-muted, GrayText) );--_description-color: var( --slotted-side-navigation-description-color, var(--slotted-text-muted, GrayText) );--_current-description-color: var( --slotted-side-navigation-current-description-color, var(--slotted-text, CanvasText) );--_description-gap: var( --slotted-side-navigation-description-gap, var(--slotted-space-1, .125rem) );--_guide-color: var( --slotted-side-navigation-guide-color, var(--slotted-border-subtle, ButtonBorder) );--_disabled-color: var(--slotted-disabled-foreground, GrayText);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));box-sizing:border-box;color:var(--_color);font-family:var(--slotted-control-font-family, inherit);font-size:var(--_font-size);line-height:var(--_line-height);min-inline-size:0}[data-ui=side-navigation][data-size=sm]{--_row-height: var(--slotted-control-height-sm, 30px);--_mark: var(--_row-height);--_gap: var(--slotted-control-gap-sm, 6px);--_font-size: var(--slotted-font-size-xs, .75rem);--_line-height: var(--slotted-line-height-xs, 1.4);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=side-navigation][data-size=lg]{--_row-height: var(--slotted-control-height-lg, 38px);--_mark: var(--_row-height);--_gap: var(--slotted-control-gap-lg, 8px);--_font-size: var(--slotted-font-size-md, .875rem);--_line-height: var(--slotted-line-height-md, 1.5);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_description-font-size: var(--slotted-font-size-sm, .8125rem)}[data-ui=side-navigation][data-part=root]{container-name:slotted-side-navigation;container-type:inline-size;display:flex;flex-direction:column;gap:var(--_section-gap);inline-size:100%}[data-ui=side-navigation] [data-part=section]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=side-navigation] [data-part=section-label]{color:var(--_section-color);font-size:var(--_section-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-xs, 1.4);margin-block-end:var( --slotted-side-navigation-section-label-gap, var(--slotted-space-2, .25rem) );min-inline-size:0;padding-block:var(--slotted-space-2, .25rem);overflow-wrap:anywhere;padding-inline:calc(var(--_inset) + (var(--_mark) - var(--_icon-size)) / 2)}[data-ui=side-navigation] [data-part=list],[data-ui=side-navigation] [data-part=group]{display:flex;flex-direction:column;gap:var(--_row-gap);list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui=side-navigation] [data-part=item]{align-content:start;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto 0fr;min-inline-size:0;position:relative;transition:grid-template-rows var(--slotted-duration-medium) var(--_easing)}[data-ui=side-navigation] [data-part=item][data-expanded]{grid-template-rows:auto 1fr}[data-ui=side-navigation] [data-part=item]>[data-part=group]{grid-column:1 / -1;grid-row:2;min-block-size:0;overflow:hidden;opacity:0;padding-block-start:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),padding-block-start var(--slotted-duration-medium) var(--_easing),visibility var(--slotted-duration-medium) step-end;visibility:hidden}[data-ui=side-navigation] [data-part=item][data-expanded]>[data-part=group]{opacity:1;padding-block-start:var(--_row-gap);transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter) var(--slotted-duration-short),padding-block-start var(--slotted-duration-medium) var(--_easing),visibility var(--slotted-duration-medium) step-start;visibility:visible}[data-ui=side-navigation] [data-part=item]>[data-part=group]{padding-inline-start:var(--_indent-step);position:relative}[data-ui=side-navigation] [data-part=item]:has(>:is([data-part=link],[data-part=trigger])>[data-part=icon])>[data-part=group]{padding-inline-start:var(--_indent)}[data-ui=side-navigation][data-guides] [data-part=item]>[data-part=group]:before{background-color:var(--_guide-color);content:\"\";inline-size:var(--_guide-width);inset-block:var(--_row-gap) 0;inset-inline-start:var(--_inset);position:absolute}[data-ui=side-navigation][data-guides] [data-part=item]:has(>:is([data-part=link],[data-part=trigger])>[data-part=icon])>[data-part=group]:before{inset-inline-start:calc(var(--_inset) + var(--_mark) / 2 - var(--_guide-width) / 2)}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]){align-content:center;align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1;grid-row:1;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;margin-block:0;margin-inline:var(--_standoff);min-block-size:var(--_row-height);min-inline-size:0;padding-block:0;padding-inline:calc(var(--_inset) - var(--_standoff));position:relative;text-align:start;text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=side-navigation] [data-part=item]:not([data-disabled])>:is([data-part=link],[data-part=trigger]):active{transition-duration:var(--slotted-duration-instant)}[data-ui=side-navigation] [data-part=item]>[data-part=trigger]{grid-column:1 / -1}[data-ui=side-navigation] [data-part=item]:has(>[data-part=link])>[data-part=trigger]{grid-column:2;grid-template-columns:auto;inline-size:var(--_mark);padding-inline:0;place-items:center}[data-ui=side-navigation] [data-part=actions]{align-items:center;align-self:center;column-gap:var(--slotted-space-2, .25rem);display:flex;grid-column:3;grid-row:1;margin-inline-start:var(--slotted-space-2, .25rem);padding-inline-end:var(--slotted-space-2, .25rem)}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):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=side-navigation] [data-part=icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_mark);color:inherit;display:grid;font-size:var(--_icon-size);grid-column:1;grid-row:1;inline-size:var(--_mark);margin-inline-end:var(--_gap);place-items:center;position:relative}[data-ui=side-navigation] [data-part=icon]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=side-navigation] [data-part=label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:isolate}[data-ui=side-navigation]:not([data-truncate=none]) [data-part=label]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui=side-navigation][data-truncate=middle] [data-part=label]{text-overflow:clip}[data-ui=side-navigation] [data-part=description]{color:var(--_description-color);font-size:var(--_description-font-size);font-weight:var(--slotted-font-weight-regular, 400);grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin-block-start:var(--_description-gap);min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:isolate}[data-ui=side-navigation]:not([data-truncate=none]) [data-part=description]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):has(>[data-part=description]){padding-block:var(--slotted-space-2, .25rem)}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):has(>[data-part=description])>:is([data-part=icon],[data-part=end],[data-part=count],[data-part=indicator]){grid-row:1 / -1}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):has(>[data-part=description])>[data-part=label]{align-self:end;line-height:var(--slotted-line-height-xs, 1.4)}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):has(>[data-part=description])>[data-part=description]{align-self:start}[data-ui=side-navigation] [data-part=end]{align-items:center;display:flex;grid-column:3;grid-row:1;margin-inline-start:var(--_gap)}[data-ui=side-navigation] [data-part=count]{color:var(--_description-color);font-size:var(--_description-font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);grid-column:3;grid-row:1;line-height:1;margin-inline-start:var(--_gap);min-inline-size:2ch;text-align:end}[data-ui=side-navigation] [data-part=link][data-current]>[data-part=description]{color:var(--_current-description-color)}[data-ui=side-navigation] [data-part=link][data-current]>[data-part=count],[data-ui=side-navigation] [data-part=item][data-current]>[data-part=trigger]>[data-part=count]{color:inherit}[data-ui=side-navigation] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);display:flex;grid-column:4;grid-row:1;margin-inline-start:var(--_gap)}[data-ui=side-navigation] [data-part=indicator]>[data-ui=icon]{transition:rotate var(--slotted-duration-medium) var(--_easing)}[data-ui=side-navigation] [data-part=item]:has(>[data-part=link])>[data-part=trigger]>[data-part=indicator]{grid-column:1;margin-inline-start:0}[data-ui=side-navigation] [data-part=item][data-expanded]>[data-part=trigger]>[data-part=indicator]>[data-ui=icon]{rotate:90deg}[data-ui=side-navigation] [data-part=item][data-expanded]>[data-part=trigger]>[data-part=indicator]>[data-ui=icon]:dir(rtl){rotate:-90deg}@supports (text-box: trim-both cap alphabetic){[data-ui=side-navigation] [data-part=label]{padding-block:calc((var(--_line-height) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}[data-ui=side-navigation] [data-part=description],[data-ui=side-navigation] [data-part=section-label]{padding-block:calc((var(--slotted-line-height-xs, 1.4) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}[data-ui=side-navigation] [data-part=count]{line-height:var(--slotted-line-height-xs, 1.4);padding-block:calc((var(--slotted-line-height-xs, 1.4) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=side-navigation] [data-part=item]:not([data-disabled])>[data-part=link]:not([data-current]):hover,[data-ui=side-navigation] [data-part=item]:not([data-disabled]):not([data-current])>[data-part=trigger]:enabled:hover{background-color:var(--_hover-background);color:var(--_hover-color)}[data-ui=side-navigation] [data-part=item][data-open]:not([data-current])>[data-part=trigger],[data-ui=side-navigation] [data-part=item]:not([data-disabled])>[data-part=link]:not([data-current]):active,[data-ui=side-navigation] [data-part=item]:not([data-disabled]):not([data-current])>[data-part=trigger]:enabled:active{background-color:var(--_active-background)}[data-ui=side-navigation] [data-part=link][data-current],[data-ui=side-navigation] [data-part=item][data-current]>[data-part=trigger]{background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_guide-width) var(--_current-edge);color:var(--_current-color);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=side-navigation] [data-part=item][data-disabled]>:is([data-part=link],[data-part=trigger]),[data-ui=side-navigation] [data-part=trigger]:disabled{color:var(--_disabled-color);cursor:not-allowed}[data-ui=side-navigation] [data-part=item][data-disabled]>[data-part=link]>[data-part=description]{color:var(--_disabled-color)}[data-ui=side-navigation] [data-part=divider]{border:0;border-block-start:var(--_guide-width) solid var(--_guide-color);margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset)}[data-ui=side-navigation] [data-part=skeleton]{align-items:center;display:grid;gap:var(--_gap);grid-template-columns:var(--_mark) minmax(0,1fr);min-block-size:var(--_row-height);padding-inline:var(--_inset)}[data-ui=side-navigation] [data-part=skeleton]>[data-part=icon]{margin-inline:0}[data-ui=side-navigation] [data-part=skeleton]>[data-part=icon]>[data-ui=skeleton]{--slotted-skeleton-block-size: var(--_icon-size);--slotted-skeleton-inline-size: var(--_icon-size)}[data-ui=side-navigation] [data-part=skeleton]>[data-part=label]{display:block;min-inline-size:0;overflow:visible}@container slotted-side-navigation (inline-size < 96px){[data-ui=side-navigation][data-mode=auto] [data-part=label],[data-ui=side-navigation][data-mode=auto] [data-part=description],[data-ui=side-navigation][data-mode=auto] [data-part=end],[data-ui=side-navigation][data-mode=auto] [data-part=count]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=side-navigation][data-mode=auto] [data-part=indicator],[data-ui=side-navigation][data-mode=auto] [data-part=actions],[data-ui=side-navigation][data-mode=auto] [data-part=item]:has(>[data-part=link])>[data-part=trigger]{display:none}[data-ui=side-navigation][data-mode=auto] :is([data-part=link],[data-part=trigger]){grid-template-columns:auto;inline-size:var(--_mark);justify-content:center;justify-self:center;padding:0}[data-ui=side-navigation][data-mode=auto] [data-part=icon]{margin:0}[data-ui=side-navigation][data-mode=auto] [data-part=item]{grid-template-rows:auto 0fr}[data-ui=side-navigation][data-mode=auto] [data-part=item]>[data-part=group]{visibility:hidden}[data-ui=side-navigation][data-mode=auto] [data-part=section-label]{block-size:0;border-block-start:var(--_guide-width) solid var(--_guide-color);color:transparent;margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset);overflow:hidden;padding:0}[data-ui=side-navigation][data-mode=auto] [data-part=skeleton]{grid-template-columns:var(--_mark);justify-content:center;padding-inline:0}[data-ui=side-navigation][data-mode=auto] [data-part=skeleton]>:not([data-part=icon]){display:none}[data-ui=side-navigation][data-mode=auto] :is([data-part=link],[data-part=trigger]):has(>:is([data-part=end],[data-part=count]))>[data-part=icon]:after{background-color:var(--_dot-color);block-size:var(--_dot-size);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_dot-size);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute}}[data-ui=side-navigation][data-mode=compact] [data-part=label],[data-ui=side-navigation][data-mode=compact] [data-part=description],[data-ui=side-navigation][data-mode=compact] [data-part=end],[data-ui=side-navigation][data-mode=compact] [data-part=count]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=side-navigation][data-mode=compact] [data-part=indicator],[data-ui=side-navigation][data-mode=compact] [data-part=actions],[data-ui=side-navigation][data-mode=compact] [data-part=item]:has(>[data-part=link])>[data-part=trigger]{display:none}[data-ui=side-navigation][data-mode=compact] :is([data-part=link],[data-part=trigger]){grid-template-columns:auto;inline-size:var(--_mark);justify-content:center;justify-self:center;padding:0}[data-ui=side-navigation][data-mode=compact] [data-part=icon]{margin:0}[data-ui=side-navigation][data-mode=compact] [data-part=item]{grid-template-rows:auto 0fr}[data-ui=side-navigation][data-mode=compact] [data-part=item]>[data-part=group]{visibility:hidden}[data-ui=side-navigation][data-mode=compact] [data-part=section-label]{block-size:0;border-block-start:var(--_guide-width) solid var(--_guide-color);color:transparent;margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset);overflow:hidden;padding:0}[data-ui=side-navigation][data-mode=compact] [data-part=skeleton]{grid-template-columns:var(--_mark);justify-content:center;padding-inline:0}[data-ui=side-navigation][data-mode=compact] [data-part=skeleton]>:not([data-part=icon]){display:none}[data-ui=side-navigation][data-mode=compact] :is([data-part=link],[data-part=trigger]):has(>:is([data-part=end],[data-part=count]))>[data-part=icon]:after{background-color:var(--_dot-color);block-size:var(--_dot-size);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_dot-size);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute}[data-ui=side-navigation][data-part=flyout]{--_surface: var( --slotted-side-navigation-flyout-surface, var(--slotted-surface-raised, Canvas) );--_border-color: var( --slotted-side-navigation-flyout-border-color, var(--slotted-border-subtle, ButtonBorder) );--_shadow: var(--slotted-side-navigation-flyout-shadow, var(--slotted-shadow-md));--_flyout-radius: var(--slotted-side-navigation-flyout-radius, var(--slotted-radius-lg, 8px));--_measure: var(--slotted-side-navigation-flyout-measure, 16rem);box-sizing:border-box;inline-size:max-content;inset-block-start:0;isolation:isolate;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--slotted-side-navigation-flyout-min-measure, 12rem);padding-block:0;padding-inline:var(--slotted-space-2, .25rem);pointer-events:none;position:absolute;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=side-navigation][data-part=flyout][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=side-navigation][data-part=flyout][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui=side-navigation][data-part=flyout][data-side=left]{translate:var(--_enter-distance) 0}[data-ui=side-navigation][data-part=flyout][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned]{animation:slotted-side-navigation-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=top]{animation-name:slotted-side-navigation-enter-up}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=right]{animation-name:slotted-side-navigation-enter-from-start}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=left]{animation-name:slotted-side-navigation-enter-from-end}@keyframes slotted-side-navigation-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-side-navigation-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-side-navigation-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-side-navigation-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-side-navigation-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=side-navigation][data-part=flyout],[data-ui=side-navigation][data-part=flyout][data-side=top],[data-ui=side-navigation][data-part=flyout][data-side=left],[data-ui=side-navigation][data-part=flyout][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned],[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=top],[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=left],[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=right]{animation-name:slotted-side-navigation-fade}}[data-ui=side-navigation][data-part=flyout][data-detached]{visibility:hidden}[data-ui=side-navigation][data-part=flyout]>[data-part=group]{background-color:var(--_surface);border:var(--_guide-width) solid var(--_border-color);border-radius:var(--_flyout-radius);box-shadow:var(--_shadow);color:var(--_color);padding:var(--slotted-space-2, .25rem);pointer-events:auto}[data-ui=side-navigation][data-part=flyout]>[data-part=group]>[data-part=item]>[data-part=group]{padding-inline-start:var(--_indent)}@media(forced-colors:active){[data-ui=side-navigation] [data-part=link][data-current],[data-ui=side-navigation] [data-part=item][data-current]>[data-part=trigger]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=side-navigation] [data-part=item][data-disabled]>:is([data-part=link],[data-part=trigger]),[data-ui=side-navigation] [data-part=trigger]:disabled{color:GrayText}[data-ui=side-navigation][data-part=flyout]>[data-part=group]{border-color:CanvasText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlSideNavigation, isStandalone: true, selector: "[slSideNavigation]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, flyout: { classPropertyName: "flyout", publicName: "flyout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, autoExpand: { classPropertyName: "autoExpand", publicName: "autoExpand", isSignal: true, isRequired: false, transformFunction: null }, guides: { classPropertyName: "guides", publicName: "guides", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, compactAt: { classPropertyName: "compactAt", publicName: "compactAt", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", expanded: "expandedChange", flyout: "flyoutChange", valueChangeRequest: "valueChangeRequest", expandedChangeRequest: "expandedChangeRequest", flyoutChangeRequest: "flyoutChangeRequest" }, host: { attributes: { "data-ui": "side-navigation", "data-ui-side-navigation": "", "data-part": "root", "data-part-root": "" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.data-mode": "resolvedMode()", "attr.data-size": "resolvedSize()", "attr.data-truncate": "resolvedTruncate()", "attr.data-guides": "resolvedGuides() ? '' : null", "attr.data-compact": "compact() ? '' : null" } }, exportAs: ["slSideNavigation"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer slotted.components{[data-ui-side-navigation]{--_row-height: var(--slotted-app-shell-row-height, var(--slotted-control-height-md, 34px));--_mark: var(--slotted-app-shell-row-mark, var(--_row-height));--_inset: var(--slotted-app-shell-row-inset, var(--slotted-space-4, .5rem));--_standoff: min(var(--slotted-space-2, .25rem), var(--_inset));--_ring-inset: var(--slotted-app-shell-row-ring-inset, 0px);--_gap: var(--slotted-app-shell-row-gap, var(--slotted-control-gap-md, 8px));--_font-size: var(--slotted-app-shell-row-font-size, var(--slotted-font-size-sm, .8125rem));--_line-height: var(--slotted-app-shell-row-line-height, var(--slotted-line-height-sm, 1.45));--_icon-size: var(--slotted-control-icon-size-md, 16px);--_description-font-size: var(--slotted-font-size-xs, .75rem);--_section-font-size: var(--slotted-font-size-xs, .75rem);--_indent: var(--slotted-side-navigation-indent, calc(var(--_mark) + var(--_gap)));--_indent-step: var(--slotted-side-navigation-indent-step, var(--slotted-space-7, 1.25rem));--_radius: var(--slotted-side-navigation-radius, var(--slotted-radius-md, 6px));--_row-gap: var(--slotted-side-navigation-row-gap, var(--slotted-space-1, .125rem));--_section-gap: var(--slotted-side-navigation-section-gap, var(--slotted-space-5, .75rem));--_guide-width: var(--slotted-border-width-thin, 1px);--_dot-size: var(--slotted-side-navigation-dot-size, var(--slotted-space-3, .375rem));--_color: var(--slotted-side-navigation-color, var(--slotted-text-muted, GrayText));--_hover-color: var(--slotted-side-navigation-hover-color, var(--slotted-text, CanvasText));--_hover-background: var( --slotted-side-navigation-hover-background, var(--slotted-tone-secondary-subtle-hover) );--_active-background: var( --slotted-side-navigation-active-background, var(--slotted-tone-secondary-subtle-active) );--_current-color: var(--slotted-side-navigation-current-color, var(--slotted-tone-accent-text));--_current-background: var( --slotted-side-navigation-current-background, var(--slotted-tone-accent-surface) );--_current-edge: var( --slotted-side-navigation-current-edge, var(--slotted-current-edge, transparent) );--_dot-color: var(--slotted-side-navigation-dot-color, var(--slotted-tone-accent-solid));--_section-color: var( --slotted-side-navigation-section-color, var(--slotted-text-muted, GrayText) );--_description-color: var( --slotted-side-navigation-description-color, var(--slotted-text-muted, GrayText) );--_current-description-color: var( --slotted-side-navigation-current-description-color, var(--slotted-text, CanvasText) );--_description-gap: var( --slotted-side-navigation-description-gap, var(--slotted-space-1, .125rem) );--_guide-color: var( --slotted-side-navigation-guide-color, var(--slotted-border-subtle, ButtonBorder) );--_disabled-color: var(--slotted-disabled-foreground, GrayText);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));box-sizing:border-box;color:var(--_color);font-family:var(--slotted-control-font-family, inherit);font-size:var(--_font-size);line-height:var(--_line-height);min-inline-size:0}[data-ui-side-navigation][data-size=sm]{--_row-height: var(--slotted-control-height-sm, 30px);--_mark: var(--_row-height);--_gap: var(--slotted-control-gap-sm, 6px);--_font-size: var(--slotted-font-size-xs, .75rem);--_line-height: var(--slotted-line-height-xs, 1.4);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui-side-navigation][data-size=lg]{--_row-height: var(--slotted-control-height-lg, 38px);--_mark: var(--_row-height);--_gap: var(--slotted-control-gap-lg, 8px);--_font-size: var(--slotted-font-size-md, .875rem);--_line-height: var(--slotted-line-height-md, 1.5);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_description-font-size: var(--slotted-font-size-sm, .8125rem)}[data-ui-side-navigation][data-part-root]{container-name:slotted-side-navigation;container-type:inline-size;display:flex;flex-direction:column;gap:var(--_section-gap);inline-size:100%}[data-ui-side-navigation] [data-part-section]{display:flex;flex-direction:column;min-inline-size:0}[data-ui-side-navigation] [data-part-section-label]{color:var(--_section-color);font-size:var(--_section-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-xs, 1.4);margin-block-end:var( --slotted-side-navigation-section-label-gap, var(--slotted-space-2, .25rem) );min-inline-size:0;padding-block:var(--slotted-space-2, .25rem);overflow-wrap:anywhere;padding-inline:calc(var(--_inset) + (var(--_mark) - var(--_icon-size)) / 2)}[data-ui-side-navigation] [data-part-list],[data-ui-side-navigation] [data-part-group]{display:flex;flex-direction:column;gap:var(--_row-gap);list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui-side-navigation] [data-part-item]{align-content:start;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto 0fr;min-inline-size:0;position:relative;transition:grid-template-rows var(--slotted-duration-medium) var(--_easing)}[data-ui-side-navigation] [data-part-item][data-expanded]{grid-template-rows:auto 1fr}[data-ui-side-navigation] [data-part-item]>[data-part-group]{grid-column:1 / -1;grid-row:2;min-block-size:0;overflow:hidden;opacity:0;padding-block-start:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),padding-block-start var(--slotted-duration-medium) var(--_easing),visibility var(--slotted-duration-medium) step-end;visibility:hidden}[data-ui-side-navigation] [data-part-item][data-expanded]>[data-part-group]{opacity:1;padding-block-start:var(--_row-gap);transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter) var(--slotted-duration-short),padding-block-start var(--slotted-duration-medium) var(--_easing),visibility var(--slotted-duration-medium) step-start;visibility:visible}[data-ui-side-navigation] [data-part-item]>[data-part-group]{padding-inline-start:var(--_indent-step);position:relative}[data-ui-side-navigation] [data-part-item]:has(>:is([data-part-link],[data-part-trigger])>[data-part-icon])>[data-part-group]{padding-inline-start:var(--_indent)}[data-ui-side-navigation][data-guides] [data-part-item]>[data-part-group]:before{background-color:var(--_guide-color);content:\"\";inline-size:var(--_guide-width);inset-block:var(--_row-gap) 0;inset-inline-start:var(--_inset);position:absolute}[data-ui-side-navigation][data-guides] [data-part-item]:has(>:is([data-part-link],[data-part-trigger])>[data-part-icon])>[data-part-group]:before{inset-inline-start:calc(var(--_inset) + var(--_mark) / 2 - var(--_guide-width) / 2)}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]){align-content:center;align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1;grid-row:1;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;margin-block:0;margin-inline:calc(var(--_standoff) - var(--_ring-inset));min-block-size:var(--_row-height);min-inline-size:0;padding-block:0;padding-inline:calc(var(--_inset) - var(--_standoff) + var(--_ring-inset));position:relative;text-align:start;text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui-side-navigation] [data-part-item]:not([data-disabled])>:is([data-part-link],[data-part-trigger]):active{transition-duration:var(--slotted-duration-instant)}[data-ui-side-navigation] [data-part-item]>[data-part-trigger]{grid-column:1 / -1}[data-ui-side-navigation] [data-part-item]:has(>[data-part-link])>[data-part-trigger]{grid-column:2;grid-template-columns:auto;inline-size:var(--_mark);padding-inline:0;place-items:center}[data-ui-side-navigation] [data-part-actions]{align-items:center;align-self:center;column-gap:var(--slotted-space-2, .25rem);display:flex;grid-column:3;grid-row:1;margin-inline-start:var(--slotted-space-2, .25rem);padding-inline-end:var(--slotted-space-2, .25rem)}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):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-side-navigation] [data-part-icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_mark);color:inherit;display:grid;font-size:var(--_icon-size);grid-column:1;grid-row:1;inline-size:var(--_mark);margin-inline-end:var(--_gap);place-items:center;position:relative}[data-ui-side-navigation] [data-part-icon]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-side-navigation] [data-part-label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:isolate}[data-ui-side-navigation]:not([data-truncate=none]) [data-part-label]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui-side-navigation][data-truncate=middle] [data-part-label]{text-overflow:clip}[data-ui-side-navigation] [data-part-description]{color:var(--_description-color);font-size:var(--_description-font-size);font-weight:var(--slotted-font-weight-regular, 400);grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin-block-start:var(--_description-gap);min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:isolate}[data-ui-side-navigation]:not([data-truncate=none]) [data-part-description]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):has(>[data-part-description]){padding-block:var(--slotted-space-2, .25rem)}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):has(>[data-part-description])>:is([data-part-icon],[data-part-end],[data-part-count],[data-part-indicator]){grid-row:1 / -1}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):has(>[data-part-description])>[data-part-label]{align-self:end;line-height:var(--slotted-line-height-xs, 1.4)}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):has(>[data-part-description])>[data-part-description]{align-self:start}[data-ui-side-navigation] [data-part-end]{align-items:center;display:flex;grid-column:3;grid-row:1;margin-inline-start:var(--_gap)}[data-ui-side-navigation] [data-part-count]{color:var(--_description-color);font-size:var(--_description-font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);grid-column:3;grid-row:1;line-height:1;margin-inline-start:var(--_gap);min-inline-size:2ch;text-align:end}[data-ui-side-navigation] [data-part-link][data-current]>[data-part-description]{color:var(--_current-description-color)}[data-ui-side-navigation] [data-part-link][data-current]>[data-part-count],[data-ui-side-navigation] [data-part-item][data-current]>[data-part-trigger]>[data-part-count]{color:inherit}[data-ui-side-navigation] [data-part-indicator]{--slotted-icon-size: var(--_icon-size);display:flex;grid-column:4;grid-row:1;margin-inline-start:var(--_gap)}[data-ui-side-navigation] [data-part-indicator]>[data-ui-icon]{transition:rotate var(--slotted-duration-medium) var(--_easing)}[data-ui-side-navigation] [data-part-item]:has(>[data-part-link])>[data-part-trigger]>[data-part-indicator]{grid-column:1;margin-inline-start:0}[data-ui-side-navigation] [data-part-item][data-expanded]>[data-part-trigger]>[data-part-indicator]>[data-ui-icon]{rotate:90deg}[data-ui-side-navigation] [data-part-item][data-expanded]>[data-part-trigger]>[data-part-indicator]>[data-ui-icon]:dir(rtl){rotate:-90deg}@supports (text-box: trim-both cap alphabetic){[data-ui-side-navigation] [data-part-label]{padding-block:calc((var(--_line-height) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}[data-ui-side-navigation] [data-part-description],[data-ui-side-navigation] [data-part-section-label]{padding-block:calc((var(--slotted-line-height-xs, 1.4) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}[data-ui-side-navigation] [data-part-count]{line-height:var(--slotted-line-height-xs, 1.4);padding-block:calc((var(--slotted-line-height-xs, 1.4) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui-side-navigation] [data-part-item]:not([data-disabled])>[data-part-link]:not([data-current]):hover,[data-ui-side-navigation] [data-part-item]:not([data-disabled]):not([data-current])>[data-part-trigger]:enabled:hover{background-color:var(--_hover-background);color:var(--_hover-color)}[data-ui-side-navigation] [data-part-item][data-open]:not([data-current])>[data-part-trigger],[data-ui-side-navigation] [data-part-item]:not([data-disabled])>[data-part-link]:not([data-current]):active,[data-ui-side-navigation] [data-part-item]:not([data-disabled]):not([data-current])>[data-part-trigger]:enabled:active{background-color:var(--_active-background)}[data-ui-side-navigation] [data-part-link][data-current],[data-ui-side-navigation] [data-part-item][data-current]>[data-part-trigger]{background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_guide-width) var(--_current-edge);color:var(--_current-color);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-side-navigation] [data-part-item][data-disabled]>:is([data-part-link],[data-part-trigger]),[data-ui-side-navigation] [data-part-trigger]:disabled{color:var(--_disabled-color);cursor:not-allowed}[data-ui-side-navigation] [data-part-item][data-disabled]>[data-part-link]>[data-part-description]{color:var(--_disabled-color)}[data-ui-side-navigation] [data-part-divider]{border:0;border-block-start:var(--_guide-width) solid var(--_guide-color);margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset)}[data-ui-side-navigation] [data-part-skeleton]{align-items:center;display:grid;gap:var(--_gap);grid-template-columns:var(--_mark) minmax(0,1fr);min-block-size:var(--_row-height);padding-inline:var(--_inset)}[data-ui-side-navigation] [data-part-skeleton]>[data-part-icon]{margin-inline:0}[data-ui-side-navigation] [data-part-skeleton]>[data-part-icon]>[data-ui-skeleton]{--slotted-skeleton-block-size: var(--_icon-size);--slotted-skeleton-inline-size: var(--_icon-size)}[data-ui-side-navigation] [data-part-skeleton]>[data-part-label]{display:block;min-inline-size:0;overflow:visible}@container slotted-side-navigation (inline-size < 96px){[data-ui-side-navigation][data-mode=auto] [data-part-label],[data-ui-side-navigation][data-mode=auto] [data-part-description],[data-ui-side-navigation][data-mode=auto] [data-part-end],[data-ui-side-navigation][data-mode=auto] [data-part-count]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui-side-navigation][data-mode=auto] [data-part-indicator],[data-ui-side-navigation][data-mode=auto] [data-part-actions],[data-ui-side-navigation][data-mode=auto] [data-part-item]:has(>[data-part-link])>[data-part-trigger]{display:none}[data-ui-side-navigation][data-mode=auto] :is([data-part-link],[data-part-trigger]){grid-template-columns:auto;inline-size:var(--_mark);justify-content:center;justify-self:center;padding:0}[data-ui-side-navigation][data-mode=auto] [data-part-icon]{margin:0}[data-ui-side-navigation][data-mode=auto] [data-part-item]{grid-template-rows:auto 0fr}[data-ui-side-navigation][data-mode=auto] [data-part-item]>[data-part-group]{visibility:hidden}[data-ui-side-navigation][data-mode=auto] [data-part-section-label]{block-size:0;border-block-start:var(--_guide-width) solid var(--_guide-color);color:transparent;margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset);overflow:hidden;padding:0}[data-ui-side-navigation][data-mode=auto] [data-part-skeleton]{grid-template-columns:var(--_mark);justify-content:center;padding-inline:0}[data-ui-side-navigation][data-mode=auto] [data-part-skeleton]>:not([data-part-icon]){display:none}[data-ui-side-navigation][data-mode=auto] :is([data-part-link],[data-part-trigger]):has(>:is([data-part-end],[data-part-count]))>[data-part-icon]:after{background-color:var(--_dot-color);block-size:var(--_dot-size);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_dot-size);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute}}[data-ui-side-navigation][data-mode=compact] [data-part-label],[data-ui-side-navigation][data-mode=compact] [data-part-description],[data-ui-side-navigation][data-mode=compact] [data-part-end],[data-ui-side-navigation][data-mode=compact] [data-part-count]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui-side-navigation][data-mode=compact] [data-part-indicator],[data-ui-side-navigation][data-mode=compact] [data-part-actions],[data-ui-side-navigation][data-mode=compact] [data-part-item]:has(>[data-part-link])>[data-part-trigger]{display:none}[data-ui-side-navigation][data-mode=compact] :is([data-part-link],[data-part-trigger]){grid-template-columns:auto;inline-size:var(--_mark);justify-content:center;justify-self:center;padding:0}[data-ui-side-navigation][data-mode=compact] [data-part-icon]{margin:0}[data-ui-side-navigation][data-mode=compact] [data-part-item]{grid-template-rows:auto 0fr}[data-ui-side-navigation][data-mode=compact] [data-part-item]>[data-part-group]{visibility:hidden}[data-ui-side-navigation][data-mode=compact] [data-part-section-label]{block-size:0;border-block-start:var(--_guide-width) solid var(--_guide-color);color:transparent;margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset);overflow:hidden;padding:0}[data-ui-side-navigation][data-mode=compact] [data-part-skeleton]{grid-template-columns:var(--_mark);justify-content:center;padding-inline:0}[data-ui-side-navigation][data-mode=compact] [data-part-skeleton]>:not([data-part-icon]){display:none}[data-ui-side-navigation][data-mode=compact] :is([data-part-link],[data-part-trigger]):has(>:is([data-part-end],[data-part-count]))>[data-part-icon]:after{background-color:var(--_dot-color);block-size:var(--_dot-size);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_dot-size);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute}[data-ui-side-navigation][data-part-flyout]{--_surface: var( --slotted-side-navigation-flyout-surface, var(--slotted-surface-raised, Canvas) );--_border-color: var( --slotted-side-navigation-flyout-border-color, var(--slotted-border-subtle, ButtonBorder) );--_shadow: var(--slotted-side-navigation-flyout-shadow, var(--slotted-shadow-md));--_flyout-radius: var(--slotted-side-navigation-flyout-radius, var(--slotted-radius-lg, 8px));--_measure: var(--slotted-side-navigation-flyout-measure, 16rem);box-sizing:border-box;inline-size:max-content;inset-block-start:0;isolation:isolate;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--slotted-side-navigation-flyout-min-measure, 12rem);padding-block:0;padding-inline:var(--slotted-space-2, .25rem);pointer-events:none;position:absolute;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-side-navigation][data-part-flyout][data-side=top]{translate:0 var(--_enter-distance)}[data-ui-side-navigation][data-part-flyout][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui-side-navigation][data-part-flyout][data-side=left]{translate:var(--_enter-distance) 0}[data-ui-side-navigation][data-part-flyout][data-open]{opacity:1;translate:0 0;transition:none}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned]{animation:slotted-side-navigation-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=top]{animation-name:slotted-side-navigation-enter-up}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=right]{animation-name:slotted-side-navigation-enter-from-start}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=left]{animation-name:slotted-side-navigation-enter-from-end}@keyframes slotted-side-navigation-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-side-navigation-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-side-navigation-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-side-navigation-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-side-navigation-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui-side-navigation][data-part-flyout],[data-ui-side-navigation][data-part-flyout][data-side=top],[data-ui-side-navigation][data-part-flyout][data-side=left],[data-ui-side-navigation][data-part-flyout][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned],[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=top],[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=left],[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=right]{animation-name:slotted-side-navigation-fade}}[data-ui-side-navigation][data-part-flyout][data-detached]{visibility:hidden}[data-ui-side-navigation][data-part-flyout]>[data-part-group]{background-color:var(--_surface);border:var(--_guide-width) solid var(--_border-color);border-radius:var(--_flyout-radius);box-shadow:var(--_shadow);color:var(--_color);padding:var(--slotted-space-2, .25rem);pointer-events:auto}[data-ui-side-navigation][data-part-flyout]>[data-part-group]>[data-part-item]>[data-part-group]{padding-inline-start:var(--_indent)}@media(forced-colors:active){[data-ui-side-navigation] [data-part-link][data-current],[data-ui-side-navigation] [data-part-item][data-current]>[data-part-trigger]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui-side-navigation] [data-part-item][data-disabled]>:is([data-part-link],[data-part-trigger]),[data-ui-side-navigation] [data-part-trigger]:disabled{color:GrayText}[data-ui-side-navigation][data-part-flyout]>[data-part-group]{border-color:CanvasText}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigation, decorators: [{
             type: Component,
             args: [{ selector: '[slSideNavigation]', standalone: true, exportAs: 'slSideNavigation', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'side-navigation',
+                        'data-ui-side-navigation': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.data-mode]': 'resolvedMode()',
                         '[attr.data-size]': 'resolvedSize()',
@@ -340,7 +343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-guides]': "resolvedGuides() ? '' : null",
                         '[attr.data-compact]': "compact() ? '' : null",
                         '(keydown)': 'onKeyDown($event)',
-                    }, styles: ["@layer slotted.components{[data-ui=side-navigation]{--_row-height: var(--slotted-app-shell-row-height, var(--slotted-control-height-md, 34px));--_mark: var(--slotted-app-shell-row-mark, var(--_row-height));--_inset: var(--slotted-app-shell-row-inset, var(--slotted-space-4, .5rem));--_standoff: min(var(--slotted-space-2, .25rem), var(--_inset));--_gap: var(--slotted-app-shell-row-gap, var(--slotted-control-gap-md, 8px));--_font-size: var(--slotted-app-shell-row-font-size, var(--slotted-font-size-sm, .8125rem));--_line-height: var(--slotted-app-shell-row-line-height, var(--slotted-line-height-sm, 1.45));--_icon-size: var(--slotted-control-icon-size-md, 16px);--_description-font-size: var(--slotted-font-size-xs, .75rem);--_section-font-size: var(--slotted-font-size-xs, .75rem);--_indent: var(--slotted-side-navigation-indent, calc(var(--_mark) + var(--_gap)));--_indent-step: var(--slotted-side-navigation-indent-step, var(--slotted-space-7, 1.25rem));--_radius: var(--slotted-side-navigation-radius, var(--slotted-radius-md, 6px));--_row-gap: var(--slotted-side-navigation-row-gap, var(--slotted-space-1, .125rem));--_section-gap: var(--slotted-side-navigation-section-gap, var(--slotted-space-5, .75rem));--_guide-width: var(--slotted-border-width-thin, 1px);--_dot-size: var(--slotted-side-navigation-dot-size, var(--slotted-space-3, .375rem));--_color: var(--slotted-side-navigation-color, var(--slotted-text-muted, GrayText));--_hover-color: var(--slotted-side-navigation-hover-color, var(--slotted-text, CanvasText));--_hover-background: var( --slotted-side-navigation-hover-background, var(--slotted-tone-secondary-subtle-hover) );--_active-background: var( --slotted-side-navigation-active-background, var(--slotted-tone-secondary-subtle-active) );--_current-color: var(--slotted-side-navigation-current-color, var(--slotted-tone-accent-text));--_current-background: var( --slotted-side-navigation-current-background, var(--slotted-tone-accent-surface) );--_current-edge: var( --slotted-side-navigation-current-edge, var(--slotted-current-edge, transparent) );--_dot-color: var(--slotted-side-navigation-dot-color, var(--slotted-tone-accent-solid));--_section-color: var( --slotted-side-navigation-section-color, var(--slotted-text-muted, GrayText) );--_description-color: var( --slotted-side-navigation-description-color, var(--slotted-text-muted, GrayText) );--_current-description-color: var( --slotted-side-navigation-current-description-color, var(--slotted-text, CanvasText) );--_description-gap: var( --slotted-side-navigation-description-gap, var(--slotted-space-1, .125rem) );--_guide-color: var( --slotted-side-navigation-guide-color, var(--slotted-border-subtle, ButtonBorder) );--_disabled-color: var(--slotted-disabled-foreground, GrayText);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));box-sizing:border-box;color:var(--_color);font-family:var(--slotted-control-font-family, inherit);font-size:var(--_font-size);line-height:var(--_line-height);min-inline-size:0}[data-ui=side-navigation][data-size=sm]{--_row-height: var(--slotted-control-height-sm, 30px);--_mark: var(--_row-height);--_gap: var(--slotted-control-gap-sm, 6px);--_font-size: var(--slotted-font-size-xs, .75rem);--_line-height: var(--slotted-line-height-xs, 1.4);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=side-navigation][data-size=lg]{--_row-height: var(--slotted-control-height-lg, 38px);--_mark: var(--_row-height);--_gap: var(--slotted-control-gap-lg, 8px);--_font-size: var(--slotted-font-size-md, .875rem);--_line-height: var(--slotted-line-height-md, 1.5);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_description-font-size: var(--slotted-font-size-sm, .8125rem)}[data-ui=side-navigation][data-part=root]{container-name:slotted-side-navigation;container-type:inline-size;display:flex;flex-direction:column;gap:var(--_section-gap);inline-size:100%}[data-ui=side-navigation] [data-part=section]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=side-navigation] [data-part=section-label]{color:var(--_section-color);font-size:var(--_section-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-xs, 1.4);margin-block-end:var( --slotted-side-navigation-section-label-gap, var(--slotted-space-2, .25rem) );min-inline-size:0;padding-block:var(--slotted-space-2, .25rem);overflow-wrap:anywhere;padding-inline:calc(var(--_inset) + (var(--_mark) - var(--_icon-size)) / 2)}[data-ui=side-navigation] [data-part=list],[data-ui=side-navigation] [data-part=group]{display:flex;flex-direction:column;gap:var(--_row-gap);list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui=side-navigation] [data-part=item]{align-content:start;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto 0fr;min-inline-size:0;position:relative;transition:grid-template-rows var(--slotted-duration-medium) var(--_easing)}[data-ui=side-navigation] [data-part=item][data-expanded]{grid-template-rows:auto 1fr}[data-ui=side-navigation] [data-part=item]>[data-part=group]{grid-column:1 / -1;grid-row:2;min-block-size:0;overflow:hidden;opacity:0;padding-block-start:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),padding-block-start var(--slotted-duration-medium) var(--_easing),visibility var(--slotted-duration-medium) step-end;visibility:hidden}[data-ui=side-navigation] [data-part=item][data-expanded]>[data-part=group]{opacity:1;padding-block-start:var(--_row-gap);transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter) var(--slotted-duration-short),padding-block-start var(--slotted-duration-medium) var(--_easing),visibility var(--slotted-duration-medium) step-start;visibility:visible}[data-ui=side-navigation] [data-part=item]>[data-part=group]{padding-inline-start:var(--_indent-step);position:relative}[data-ui=side-navigation] [data-part=item]:has(>:is([data-part=link],[data-part=trigger])>[data-part=icon])>[data-part=group]{padding-inline-start:var(--_indent)}[data-ui=side-navigation][data-guides] [data-part=item]>[data-part=group]:before{background-color:var(--_guide-color);content:\"\";inline-size:var(--_guide-width);inset-block:var(--_row-gap) 0;inset-inline-start:var(--_inset);position:absolute}[data-ui=side-navigation][data-guides] [data-part=item]:has(>:is([data-part=link],[data-part=trigger])>[data-part=icon])>[data-part=group]:before{inset-inline-start:calc(var(--_inset) + var(--_mark) / 2 - var(--_guide-width) / 2)}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]){align-content:center;align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1;grid-row:1;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;margin-block:0;margin-inline:var(--_standoff);min-block-size:var(--_row-height);min-inline-size:0;padding-block:0;padding-inline:calc(var(--_inset) - var(--_standoff));position:relative;text-align:start;text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=side-navigation] [data-part=item]:not([data-disabled])>:is([data-part=link],[data-part=trigger]):active{transition-duration:var(--slotted-duration-instant)}[data-ui=side-navigation] [data-part=item]>[data-part=trigger]{grid-column:1 / -1}[data-ui=side-navigation] [data-part=item]:has(>[data-part=link])>[data-part=trigger]{grid-column:2;grid-template-columns:auto;inline-size:var(--_mark);padding-inline:0;place-items:center}[data-ui=side-navigation] [data-part=actions]{align-items:center;align-self:center;column-gap:var(--slotted-space-2, .25rem);display:flex;grid-column:3;grid-row:1;margin-inline-start:var(--slotted-space-2, .25rem);padding-inline-end:var(--slotted-space-2, .25rem)}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):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=side-navigation] [data-part=icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_mark);color:inherit;display:grid;font-size:var(--_icon-size);grid-column:1;grid-row:1;inline-size:var(--_mark);margin-inline-end:var(--_gap);place-items:center;position:relative}[data-ui=side-navigation] [data-part=icon]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=side-navigation] [data-part=label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:isolate}[data-ui=side-navigation]:not([data-truncate=none]) [data-part=label]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui=side-navigation][data-truncate=middle] [data-part=label]{text-overflow:clip}[data-ui=side-navigation] [data-part=description]{color:var(--_description-color);font-size:var(--_description-font-size);font-weight:var(--slotted-font-weight-regular, 400);grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin-block-start:var(--_description-gap);min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:isolate}[data-ui=side-navigation]:not([data-truncate=none]) [data-part=description]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):has(>[data-part=description]){padding-block:var(--slotted-space-2, .25rem)}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):has(>[data-part=description])>:is([data-part=icon],[data-part=end],[data-part=count],[data-part=indicator]){grid-row:1 / -1}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):has(>[data-part=description])>[data-part=label]{align-self:end;line-height:var(--slotted-line-height-xs, 1.4)}[data-ui=side-navigation] :is([data-part=link],[data-part=trigger]):has(>[data-part=description])>[data-part=description]{align-self:start}[data-ui=side-navigation] [data-part=end]{align-items:center;display:flex;grid-column:3;grid-row:1;margin-inline-start:var(--_gap)}[data-ui=side-navigation] [data-part=count]{color:var(--_description-color);font-size:var(--_description-font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);grid-column:3;grid-row:1;line-height:1;margin-inline-start:var(--_gap);min-inline-size:2ch;text-align:end}[data-ui=side-navigation] [data-part=link][data-current]>[data-part=description]{color:var(--_current-description-color)}[data-ui=side-navigation] [data-part=link][data-current]>[data-part=count],[data-ui=side-navigation] [data-part=item][data-current]>[data-part=trigger]>[data-part=count]{color:inherit}[data-ui=side-navigation] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);display:flex;grid-column:4;grid-row:1;margin-inline-start:var(--_gap)}[data-ui=side-navigation] [data-part=indicator]>[data-ui=icon]{transition:rotate var(--slotted-duration-medium) var(--_easing)}[data-ui=side-navigation] [data-part=item]:has(>[data-part=link])>[data-part=trigger]>[data-part=indicator]{grid-column:1;margin-inline-start:0}[data-ui=side-navigation] [data-part=item][data-expanded]>[data-part=trigger]>[data-part=indicator]>[data-ui=icon]{rotate:90deg}[data-ui=side-navigation] [data-part=item][data-expanded]>[data-part=trigger]>[data-part=indicator]>[data-ui=icon]:dir(rtl){rotate:-90deg}@supports (text-box: trim-both cap alphabetic){[data-ui=side-navigation] [data-part=label]{padding-block:calc((var(--_line-height) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}[data-ui=side-navigation] [data-part=description],[data-ui=side-navigation] [data-part=section-label]{padding-block:calc((var(--slotted-line-height-xs, 1.4) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}[data-ui=side-navigation] [data-part=count]{line-height:var(--slotted-line-height-xs, 1.4);padding-block:calc((var(--slotted-line-height-xs, 1.4) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui=side-navigation] [data-part=item]:not([data-disabled])>[data-part=link]:not([data-current]):hover,[data-ui=side-navigation] [data-part=item]:not([data-disabled]):not([data-current])>[data-part=trigger]:enabled:hover{background-color:var(--_hover-background);color:var(--_hover-color)}[data-ui=side-navigation] [data-part=item][data-open]:not([data-current])>[data-part=trigger],[data-ui=side-navigation] [data-part=item]:not([data-disabled])>[data-part=link]:not([data-current]):active,[data-ui=side-navigation] [data-part=item]:not([data-disabled]):not([data-current])>[data-part=trigger]:enabled:active{background-color:var(--_active-background)}[data-ui=side-navigation] [data-part=link][data-current],[data-ui=side-navigation] [data-part=item][data-current]>[data-part=trigger]{background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_guide-width) var(--_current-edge);color:var(--_current-color);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=side-navigation] [data-part=item][data-disabled]>:is([data-part=link],[data-part=trigger]),[data-ui=side-navigation] [data-part=trigger]:disabled{color:var(--_disabled-color);cursor:not-allowed}[data-ui=side-navigation] [data-part=item][data-disabled]>[data-part=link]>[data-part=description]{color:var(--_disabled-color)}[data-ui=side-navigation] [data-part=divider]{border:0;border-block-start:var(--_guide-width) solid var(--_guide-color);margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset)}[data-ui=side-navigation] [data-part=skeleton]{align-items:center;display:grid;gap:var(--_gap);grid-template-columns:var(--_mark) minmax(0,1fr);min-block-size:var(--_row-height);padding-inline:var(--_inset)}[data-ui=side-navigation] [data-part=skeleton]>[data-part=icon]{margin-inline:0}[data-ui=side-navigation] [data-part=skeleton]>[data-part=icon]>[data-ui=skeleton]{--slotted-skeleton-block-size: var(--_icon-size);--slotted-skeleton-inline-size: var(--_icon-size)}[data-ui=side-navigation] [data-part=skeleton]>[data-part=label]{display:block;min-inline-size:0;overflow:visible}@container slotted-side-navigation (inline-size < 96px){[data-ui=side-navigation][data-mode=auto] [data-part=label],[data-ui=side-navigation][data-mode=auto] [data-part=description],[data-ui=side-navigation][data-mode=auto] [data-part=end],[data-ui=side-navigation][data-mode=auto] [data-part=count]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=side-navigation][data-mode=auto] [data-part=indicator],[data-ui=side-navigation][data-mode=auto] [data-part=actions],[data-ui=side-navigation][data-mode=auto] [data-part=item]:has(>[data-part=link])>[data-part=trigger]{display:none}[data-ui=side-navigation][data-mode=auto] :is([data-part=link],[data-part=trigger]){grid-template-columns:auto;inline-size:var(--_mark);justify-content:center;justify-self:center;padding:0}[data-ui=side-navigation][data-mode=auto] [data-part=icon]{margin:0}[data-ui=side-navigation][data-mode=auto] [data-part=item]{grid-template-rows:auto 0fr}[data-ui=side-navigation][data-mode=auto] [data-part=item]>[data-part=group]{visibility:hidden}[data-ui=side-navigation][data-mode=auto] [data-part=section-label]{block-size:0;border-block-start:var(--_guide-width) solid var(--_guide-color);color:transparent;margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset);overflow:hidden;padding:0}[data-ui=side-navigation][data-mode=auto] [data-part=skeleton]{grid-template-columns:var(--_mark);justify-content:center;padding-inline:0}[data-ui=side-navigation][data-mode=auto] [data-part=skeleton]>:not([data-part=icon]){display:none}[data-ui=side-navigation][data-mode=auto] :is([data-part=link],[data-part=trigger]):has(>:is([data-part=end],[data-part=count]))>[data-part=icon]:after{background-color:var(--_dot-color);block-size:var(--_dot-size);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_dot-size);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute}}[data-ui=side-navigation][data-mode=compact] [data-part=label],[data-ui=side-navigation][data-mode=compact] [data-part=description],[data-ui=side-navigation][data-mode=compact] [data-part=end],[data-ui=side-navigation][data-mode=compact] [data-part=count]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=side-navigation][data-mode=compact] [data-part=indicator],[data-ui=side-navigation][data-mode=compact] [data-part=actions],[data-ui=side-navigation][data-mode=compact] [data-part=item]:has(>[data-part=link])>[data-part=trigger]{display:none}[data-ui=side-navigation][data-mode=compact] :is([data-part=link],[data-part=trigger]){grid-template-columns:auto;inline-size:var(--_mark);justify-content:center;justify-self:center;padding:0}[data-ui=side-navigation][data-mode=compact] [data-part=icon]{margin:0}[data-ui=side-navigation][data-mode=compact] [data-part=item]{grid-template-rows:auto 0fr}[data-ui=side-navigation][data-mode=compact] [data-part=item]>[data-part=group]{visibility:hidden}[data-ui=side-navigation][data-mode=compact] [data-part=section-label]{block-size:0;border-block-start:var(--_guide-width) solid var(--_guide-color);color:transparent;margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset);overflow:hidden;padding:0}[data-ui=side-navigation][data-mode=compact] [data-part=skeleton]{grid-template-columns:var(--_mark);justify-content:center;padding-inline:0}[data-ui=side-navigation][data-mode=compact] [data-part=skeleton]>:not([data-part=icon]){display:none}[data-ui=side-navigation][data-mode=compact] :is([data-part=link],[data-part=trigger]):has(>:is([data-part=end],[data-part=count]))>[data-part=icon]:after{background-color:var(--_dot-color);block-size:var(--_dot-size);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_dot-size);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute}[data-ui=side-navigation][data-part=flyout]{--_surface: var( --slotted-side-navigation-flyout-surface, var(--slotted-surface-raised, Canvas) );--_border-color: var( --slotted-side-navigation-flyout-border-color, var(--slotted-border-subtle, ButtonBorder) );--_shadow: var(--slotted-side-navigation-flyout-shadow, var(--slotted-shadow-md));--_flyout-radius: var(--slotted-side-navigation-flyout-radius, var(--slotted-radius-lg, 8px));--_measure: var(--slotted-side-navigation-flyout-measure, 16rem);box-sizing:border-box;inline-size:max-content;inset-block-start:0;isolation:isolate;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--slotted-side-navigation-flyout-min-measure, 12rem);padding-block:0;padding-inline:var(--slotted-space-2, .25rem);pointer-events:none;position:absolute;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=side-navigation][data-part=flyout][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=side-navigation][data-part=flyout][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui=side-navigation][data-part=flyout][data-side=left]{translate:var(--_enter-distance) 0}[data-ui=side-navigation][data-part=flyout][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned]{animation:slotted-side-navigation-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=top]{animation-name:slotted-side-navigation-enter-up}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=right]{animation-name:slotted-side-navigation-enter-from-start}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=left]{animation-name:slotted-side-navigation-enter-from-end}@keyframes slotted-side-navigation-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-side-navigation-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-side-navigation-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-side-navigation-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-side-navigation-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=side-navigation][data-part=flyout],[data-ui=side-navigation][data-part=flyout][data-side=top],[data-ui=side-navigation][data-part=flyout][data-side=left],[data-ui=side-navigation][data-part=flyout][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=side-navigation][data-part=flyout][data-open][data-positioned],[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=top],[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=left],[data-ui=side-navigation][data-part=flyout][data-open][data-positioned][data-side=right]{animation-name:slotted-side-navigation-fade}}[data-ui=side-navigation][data-part=flyout][data-detached]{visibility:hidden}[data-ui=side-navigation][data-part=flyout]>[data-part=group]{background-color:var(--_surface);border:var(--_guide-width) solid var(--_border-color);border-radius:var(--_flyout-radius);box-shadow:var(--_shadow);color:var(--_color);padding:var(--slotted-space-2, .25rem);pointer-events:auto}[data-ui=side-navigation][data-part=flyout]>[data-part=group]>[data-part=item]>[data-part=group]{padding-inline-start:var(--_indent)}@media(forced-colors:active){[data-ui=side-navigation] [data-part=link][data-current],[data-ui=side-navigation] [data-part=item][data-current]>[data-part=trigger]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=side-navigation] [data-part=item][data-disabled]>:is([data-part=link],[data-part=trigger]),[data-ui=side-navigation] [data-part=trigger]:disabled{color:GrayText}[data-ui=side-navigation][data-part=flyout]>[data-part=group]{border-color:CanvasText}}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-side-navigation]{--_row-height: var(--slotted-app-shell-row-height, var(--slotted-control-height-md, 34px));--_mark: var(--slotted-app-shell-row-mark, var(--_row-height));--_inset: var(--slotted-app-shell-row-inset, var(--slotted-space-4, .5rem));--_standoff: min(var(--slotted-space-2, .25rem), var(--_inset));--_ring-inset: var(--slotted-app-shell-row-ring-inset, 0px);--_gap: var(--slotted-app-shell-row-gap, var(--slotted-control-gap-md, 8px));--_font-size: var(--slotted-app-shell-row-font-size, var(--slotted-font-size-sm, .8125rem));--_line-height: var(--slotted-app-shell-row-line-height, var(--slotted-line-height-sm, 1.45));--_icon-size: var(--slotted-control-icon-size-md, 16px);--_description-font-size: var(--slotted-font-size-xs, .75rem);--_section-font-size: var(--slotted-font-size-xs, .75rem);--_indent: var(--slotted-side-navigation-indent, calc(var(--_mark) + var(--_gap)));--_indent-step: var(--slotted-side-navigation-indent-step, var(--slotted-space-7, 1.25rem));--_radius: var(--slotted-side-navigation-radius, var(--slotted-radius-md, 6px));--_row-gap: var(--slotted-side-navigation-row-gap, var(--slotted-space-1, .125rem));--_section-gap: var(--slotted-side-navigation-section-gap, var(--slotted-space-5, .75rem));--_guide-width: var(--slotted-border-width-thin, 1px);--_dot-size: var(--slotted-side-navigation-dot-size, var(--slotted-space-3, .375rem));--_color: var(--slotted-side-navigation-color, var(--slotted-text-muted, GrayText));--_hover-color: var(--slotted-side-navigation-hover-color, var(--slotted-text, CanvasText));--_hover-background: var( --slotted-side-navigation-hover-background, var(--slotted-tone-secondary-subtle-hover) );--_active-background: var( --slotted-side-navigation-active-background, var(--slotted-tone-secondary-subtle-active) );--_current-color: var(--slotted-side-navigation-current-color, var(--slotted-tone-accent-text));--_current-background: var( --slotted-side-navigation-current-background, var(--slotted-tone-accent-surface) );--_current-edge: var( --slotted-side-navigation-current-edge, var(--slotted-current-edge, transparent) );--_dot-color: var(--slotted-side-navigation-dot-color, var(--slotted-tone-accent-solid));--_section-color: var( --slotted-side-navigation-section-color, var(--slotted-text-muted, GrayText) );--_description-color: var( --slotted-side-navigation-description-color, var(--slotted-text-muted, GrayText) );--_current-description-color: var( --slotted-side-navigation-current-description-color, var(--slotted-text, CanvasText) );--_description-gap: var( --slotted-side-navigation-description-gap, var(--slotted-space-1, .125rem) );--_guide-color: var( --slotted-side-navigation-guide-color, var(--slotted-border-subtle, ButtonBorder) );--_disabled-color: var(--slotted-disabled-foreground, GrayText);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));box-sizing:border-box;color:var(--_color);font-family:var(--slotted-control-font-family, inherit);font-size:var(--_font-size);line-height:var(--_line-height);min-inline-size:0}[data-ui-side-navigation][data-size=sm]{--_row-height: var(--slotted-control-height-sm, 30px);--_mark: var(--_row-height);--_gap: var(--slotted-control-gap-sm, 6px);--_font-size: var(--slotted-font-size-xs, .75rem);--_line-height: var(--slotted-line-height-xs, 1.4);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui-side-navigation][data-size=lg]{--_row-height: var(--slotted-control-height-lg, 38px);--_mark: var(--_row-height);--_gap: var(--slotted-control-gap-lg, 8px);--_font-size: var(--slotted-font-size-md, .875rem);--_line-height: var(--slotted-line-height-md, 1.5);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_description-font-size: var(--slotted-font-size-sm, .8125rem)}[data-ui-side-navigation][data-part-root]{container-name:slotted-side-navigation;container-type:inline-size;display:flex;flex-direction:column;gap:var(--_section-gap);inline-size:100%}[data-ui-side-navigation] [data-part-section]{display:flex;flex-direction:column;min-inline-size:0}[data-ui-side-navigation] [data-part-section-label]{color:var(--_section-color);font-size:var(--_section-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-xs, 1.4);margin-block-end:var( --slotted-side-navigation-section-label-gap, var(--slotted-space-2, .25rem) );min-inline-size:0;padding-block:var(--slotted-space-2, .25rem);overflow-wrap:anywhere;padding-inline:calc(var(--_inset) + (var(--_mark) - var(--_icon-size)) / 2)}[data-ui-side-navigation] [data-part-list],[data-ui-side-navigation] [data-part-group]{display:flex;flex-direction:column;gap:var(--_row-gap);list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui-side-navigation] [data-part-item]{align-content:start;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto 0fr;min-inline-size:0;position:relative;transition:grid-template-rows var(--slotted-duration-medium) var(--_easing)}[data-ui-side-navigation] [data-part-item][data-expanded]{grid-template-rows:auto 1fr}[data-ui-side-navigation] [data-part-item]>[data-part-group]{grid-column:1 / -1;grid-row:2;min-block-size:0;overflow:hidden;opacity:0;padding-block-start:0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),padding-block-start var(--slotted-duration-medium) var(--_easing),visibility var(--slotted-duration-medium) step-end;visibility:hidden}[data-ui-side-navigation] [data-part-item][data-expanded]>[data-part-group]{opacity:1;padding-block-start:var(--_row-gap);transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter) var(--slotted-duration-short),padding-block-start var(--slotted-duration-medium) var(--_easing),visibility var(--slotted-duration-medium) step-start;visibility:visible}[data-ui-side-navigation] [data-part-item]>[data-part-group]{padding-inline-start:var(--_indent-step);position:relative}[data-ui-side-navigation] [data-part-item]:has(>:is([data-part-link],[data-part-trigger])>[data-part-icon])>[data-part-group]{padding-inline-start:var(--_indent)}[data-ui-side-navigation][data-guides] [data-part-item]>[data-part-group]:before{background-color:var(--_guide-color);content:\"\";inline-size:var(--_guide-width);inset-block:var(--_row-gap) 0;inset-inline-start:var(--_inset);position:absolute}[data-ui-side-navigation][data-guides] [data-part-item]:has(>:is([data-part-link],[data-part-trigger])>[data-part-icon])>[data-part-group]:before{inset-inline-start:calc(var(--_inset) + var(--_mark) / 2 - var(--_guide-width) / 2)}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]){align-content:center;align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:inherit;cursor:pointer;display:grid;font:inherit;grid-column:1;grid-row:1;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;margin-block:0;margin-inline:calc(var(--_standoff) - var(--_ring-inset));min-block-size:var(--_row-height);min-inline-size:0;padding-block:0;padding-inline:calc(var(--_inset) - var(--_standoff) + var(--_ring-inset));position:relative;text-align:start;text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui-side-navigation] [data-part-item]:not([data-disabled])>:is([data-part-link],[data-part-trigger]):active{transition-duration:var(--slotted-duration-instant)}[data-ui-side-navigation] [data-part-item]>[data-part-trigger]{grid-column:1 / -1}[data-ui-side-navigation] [data-part-item]:has(>[data-part-link])>[data-part-trigger]{grid-column:2;grid-template-columns:auto;inline-size:var(--_mark);padding-inline:0;place-items:center}[data-ui-side-navigation] [data-part-actions]{align-items:center;align-self:center;column-gap:var(--slotted-space-2, .25rem);display:flex;grid-column:3;grid-row:1;margin-inline-start:var(--slotted-space-2, .25rem);padding-inline-end:var(--slotted-space-2, .25rem)}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):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-side-navigation] [data-part-icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_mark);color:inherit;display:grid;font-size:var(--_icon-size);grid-column:1;grid-row:1;inline-size:var(--_mark);margin-inline-end:var(--_gap);place-items:center;position:relative}[data-ui-side-navigation] [data-part-icon]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-side-navigation] [data-part-label]{grid-column:2;grid-row:1;min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:isolate}[data-ui-side-navigation]:not([data-truncate=none]) [data-part-label]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui-side-navigation][data-truncate=middle] [data-part-label]{text-overflow:clip}[data-ui-side-navigation] [data-part-description]{color:var(--_description-color);font-size:var(--_description-font-size);font-weight:var(--slotted-font-weight-regular, 400);grid-column:2;grid-row:2;line-height:var(--slotted-line-height-xs, 1.4);margin-block-start:var(--_description-gap);min-inline-size:0;overflow-wrap:anywhere;unicode-bidi:isolate}[data-ui-side-navigation]:not([data-truncate=none]) [data-part-description]{overflow:hidden;overflow-wrap:normal;text-overflow:ellipsis;white-space:nowrap}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):has(>[data-part-description]){padding-block:var(--slotted-space-2, .25rem)}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):has(>[data-part-description])>:is([data-part-icon],[data-part-end],[data-part-count],[data-part-indicator]){grid-row:1 / -1}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):has(>[data-part-description])>[data-part-label]{align-self:end;line-height:var(--slotted-line-height-xs, 1.4)}[data-ui-side-navigation] :is([data-part-link],[data-part-trigger]):has(>[data-part-description])>[data-part-description]{align-self:start}[data-ui-side-navigation] [data-part-end]{align-items:center;display:flex;grid-column:3;grid-row:1;margin-inline-start:var(--_gap)}[data-ui-side-navigation] [data-part-count]{color:var(--_description-color);font-size:var(--_description-font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);grid-column:3;grid-row:1;line-height:1;margin-inline-start:var(--_gap);min-inline-size:2ch;text-align:end}[data-ui-side-navigation] [data-part-link][data-current]>[data-part-description]{color:var(--_current-description-color)}[data-ui-side-navigation] [data-part-link][data-current]>[data-part-count],[data-ui-side-navigation] [data-part-item][data-current]>[data-part-trigger]>[data-part-count]{color:inherit}[data-ui-side-navigation] [data-part-indicator]{--slotted-icon-size: var(--_icon-size);display:flex;grid-column:4;grid-row:1;margin-inline-start:var(--_gap)}[data-ui-side-navigation] [data-part-indicator]>[data-ui-icon]{transition:rotate var(--slotted-duration-medium) var(--_easing)}[data-ui-side-navigation] [data-part-item]:has(>[data-part-link])>[data-part-trigger]>[data-part-indicator]{grid-column:1;margin-inline-start:0}[data-ui-side-navigation] [data-part-item][data-expanded]>[data-part-trigger]>[data-part-indicator]>[data-ui-icon]{rotate:90deg}[data-ui-side-navigation] [data-part-item][data-expanded]>[data-part-trigger]>[data-part-indicator]>[data-ui-icon]:dir(rtl){rotate:-90deg}@supports (text-box: trim-both cap alphabetic){[data-ui-side-navigation] [data-part-label]{padding-block:calc((var(--_line-height) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}[data-ui-side-navigation] [data-part-description],[data-ui-side-navigation] [data-part-section-label]{padding-block:calc((var(--slotted-line-height-xs, 1.4) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}[data-ui-side-navigation] [data-part-count]{line-height:var(--slotted-line-height-xs, 1.4);padding-block:calc((var(--slotted-line-height-xs, 1.4) * 1em - .75em) / 2);text-box:trim-both cap alphabetic}}[data-ui-side-navigation] [data-part-item]:not([data-disabled])>[data-part-link]:not([data-current]):hover,[data-ui-side-navigation] [data-part-item]:not([data-disabled]):not([data-current])>[data-part-trigger]:enabled:hover{background-color:var(--_hover-background);color:var(--_hover-color)}[data-ui-side-navigation] [data-part-item][data-open]:not([data-current])>[data-part-trigger],[data-ui-side-navigation] [data-part-item]:not([data-disabled])>[data-part-link]:not([data-current]):active,[data-ui-side-navigation] [data-part-item]:not([data-disabled]):not([data-current])>[data-part-trigger]:enabled:active{background-color:var(--_active-background)}[data-ui-side-navigation] [data-part-link][data-current],[data-ui-side-navigation] [data-part-item][data-current]>[data-part-trigger]{background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_guide-width) var(--_current-edge);color:var(--_current-color);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-side-navigation] [data-part-item][data-disabled]>:is([data-part-link],[data-part-trigger]),[data-ui-side-navigation] [data-part-trigger]:disabled{color:var(--_disabled-color);cursor:not-allowed}[data-ui-side-navigation] [data-part-item][data-disabled]>[data-part-link]>[data-part-description]{color:var(--_disabled-color)}[data-ui-side-navigation] [data-part-divider]{border:0;border-block-start:var(--_guide-width) solid var(--_guide-color);margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset)}[data-ui-side-navigation] [data-part-skeleton]{align-items:center;display:grid;gap:var(--_gap);grid-template-columns:var(--_mark) minmax(0,1fr);min-block-size:var(--_row-height);padding-inline:var(--_inset)}[data-ui-side-navigation] [data-part-skeleton]>[data-part-icon]{margin-inline:0}[data-ui-side-navigation] [data-part-skeleton]>[data-part-icon]>[data-ui-skeleton]{--slotted-skeleton-block-size: var(--_icon-size);--slotted-skeleton-inline-size: var(--_icon-size)}[data-ui-side-navigation] [data-part-skeleton]>[data-part-label]{display:block;min-inline-size:0;overflow:visible}@container slotted-side-navigation (inline-size < 96px){[data-ui-side-navigation][data-mode=auto] [data-part-label],[data-ui-side-navigation][data-mode=auto] [data-part-description],[data-ui-side-navigation][data-mode=auto] [data-part-end],[data-ui-side-navigation][data-mode=auto] [data-part-count]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui-side-navigation][data-mode=auto] [data-part-indicator],[data-ui-side-navigation][data-mode=auto] [data-part-actions],[data-ui-side-navigation][data-mode=auto] [data-part-item]:has(>[data-part-link])>[data-part-trigger]{display:none}[data-ui-side-navigation][data-mode=auto] :is([data-part-link],[data-part-trigger]){grid-template-columns:auto;inline-size:var(--_mark);justify-content:center;justify-self:center;padding:0}[data-ui-side-navigation][data-mode=auto] [data-part-icon]{margin:0}[data-ui-side-navigation][data-mode=auto] [data-part-item]{grid-template-rows:auto 0fr}[data-ui-side-navigation][data-mode=auto] [data-part-item]>[data-part-group]{visibility:hidden}[data-ui-side-navigation][data-mode=auto] [data-part-section-label]{block-size:0;border-block-start:var(--_guide-width) solid var(--_guide-color);color:transparent;margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset);overflow:hidden;padding:0}[data-ui-side-navigation][data-mode=auto] [data-part-skeleton]{grid-template-columns:var(--_mark);justify-content:center;padding-inline:0}[data-ui-side-navigation][data-mode=auto] [data-part-skeleton]>:not([data-part-icon]){display:none}[data-ui-side-navigation][data-mode=auto] :is([data-part-link],[data-part-trigger]):has(>:is([data-part-end],[data-part-count]))>[data-part-icon]:after{background-color:var(--_dot-color);block-size:var(--_dot-size);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_dot-size);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute}}[data-ui-side-navigation][data-mode=compact] [data-part-label],[data-ui-side-navigation][data-mode=compact] [data-part-description],[data-ui-side-navigation][data-mode=compact] [data-part-end],[data-ui-side-navigation][data-mode=compact] [data-part-count]{block-size:1px;clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui-side-navigation][data-mode=compact] [data-part-indicator],[data-ui-side-navigation][data-mode=compact] [data-part-actions],[data-ui-side-navigation][data-mode=compact] [data-part-item]:has(>[data-part-link])>[data-part-trigger]{display:none}[data-ui-side-navigation][data-mode=compact] :is([data-part-link],[data-part-trigger]){grid-template-columns:auto;inline-size:var(--_mark);justify-content:center;justify-self:center;padding:0}[data-ui-side-navigation][data-mode=compact] [data-part-icon]{margin:0}[data-ui-side-navigation][data-mode=compact] [data-part-item]{grid-template-rows:auto 0fr}[data-ui-side-navigation][data-mode=compact] [data-part-item]>[data-part-group]{visibility:hidden}[data-ui-side-navigation][data-mode=compact] [data-part-section-label]{block-size:0;border-block-start:var(--_guide-width) solid var(--_guide-color);color:transparent;margin-block:var(--slotted-space-2, .25rem);margin-inline:var(--_inset);overflow:hidden;padding:0}[data-ui-side-navigation][data-mode=compact] [data-part-skeleton]{grid-template-columns:var(--_mark);justify-content:center;padding-inline:0}[data-ui-side-navigation][data-mode=compact] [data-part-skeleton]>:not([data-part-icon]){display:none}[data-ui-side-navigation][data-mode=compact] :is([data-part-link],[data-part-trigger]):has(>:is([data-part-end],[data-part-count]))>[data-part-icon]:after{background-color:var(--_dot-color);block-size:var(--_dot-size);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inline-size:var(--_dot-size);inset-block-start:var(--slotted-space-2, .25rem);inset-inline-end:var(--slotted-space-2, .25rem);position:absolute}[data-ui-side-navigation][data-part-flyout]{--_surface: var( --slotted-side-navigation-flyout-surface, var(--slotted-surface-raised, Canvas) );--_border-color: var( --slotted-side-navigation-flyout-border-color, var(--slotted-border-subtle, ButtonBorder) );--_shadow: var(--slotted-side-navigation-flyout-shadow, var(--slotted-shadow-md));--_flyout-radius: var(--slotted-side-navigation-flyout-radius, var(--slotted-radius-lg, 8px));--_measure: var(--slotted-side-navigation-flyout-measure, 16rem);box-sizing:border-box;inline-size:max-content;inset-block-start:0;isolation:isolate;max-inline-size:min(var(--_measure),var(--slotted-positioner-available-width, 100vw));min-inline-size:var(--slotted-side-navigation-flyout-min-measure, 12rem);padding-block:0;padding-inline:var(--slotted-space-2, .25rem);pointer-events:none;position:absolute;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));opacity:0;--_enter-distance: var(--slotted-space-2, .25rem);translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-side-navigation][data-part-flyout][data-side=top]{translate:0 var(--_enter-distance)}[data-ui-side-navigation][data-part-flyout][data-side=right]{translate:calc(-1 * var(--_enter-distance)) 0}[data-ui-side-navigation][data-part-flyout][data-side=left]{translate:var(--_enter-distance) 0}[data-ui-side-navigation][data-part-flyout][data-open]{opacity:1;translate:0 0;transition:none}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned]{animation:slotted-side-navigation-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=top]{animation-name:slotted-side-navigation-enter-up}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=right]{animation-name:slotted-side-navigation-enter-from-start}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=left]{animation-name:slotted-side-navigation-enter-from-end}@keyframes slotted-side-navigation-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-side-navigation-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-side-navigation-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_enter-distance)) 0}}@keyframes slotted-side-navigation-enter-from-end{0%{opacity:0;translate:var(--_enter-distance) 0}}@keyframes slotted-side-navigation-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui-side-navigation][data-part-flyout],[data-ui-side-navigation][data-part-flyout][data-side=top],[data-ui-side-navigation][data-part-flyout][data-side=left],[data-ui-side-navigation][data-part-flyout][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui-side-navigation][data-part-flyout][data-open][data-positioned],[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=top],[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=left],[data-ui-side-navigation][data-part-flyout][data-open][data-positioned][data-side=right]{animation-name:slotted-side-navigation-fade}}[data-ui-side-navigation][data-part-flyout][data-detached]{visibility:hidden}[data-ui-side-navigation][data-part-flyout]>[data-part-group]{background-color:var(--_surface);border:var(--_guide-width) solid var(--_border-color);border-radius:var(--_flyout-radius);box-shadow:var(--_shadow);color:var(--_color);padding:var(--slotted-space-2, .25rem);pointer-events:auto}[data-ui-side-navigation][data-part-flyout]>[data-part-group]>[data-part-item]>[data-part-group]{padding-inline-start:var(--_indent)}@media(forced-colors:active){[data-ui-side-navigation] [data-part-link][data-current],[data-ui-side-navigation] [data-part-item][data-current]>[data-part-trigger]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui-side-navigation] [data-part-item][data-disabled]>:is([data-part-link],[data-part-trigger]),[data-ui-side-navigation] [data-part-trigger]:disabled{color:GrayText}[data-ui-side-navigation][data-part-flyout]>[data-part-group]{border-color:CanvasText}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], flyout: [{ type: i0.Input, args: [{ isSignal: true, alias: "flyout", required: false }] }, { type: i0.Output, args: ["flyoutChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], autoExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExpand", required: false }] }], guides: [{ type: i0.Input, args: [{ isSignal: true, alias: "guides", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], compactAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactAt", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], expandedChangeRequest: [{ type: i0.Output, args: ["expandedChangeRequest"] }], flyoutChangeRequest: [{ type: i0.Output, args: ["flyoutChangeRequest"] }] } });
 
 /** A click synthesised by the keyboard reports no detail; a real one reports the count. */
@@ -351,40 +354,40 @@ function activationReason(event) {
 /** A titled run of destinations. Several may stand under one root. */
 class SlSideNavigationSection {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationSection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationSection, isStandalone: true, selector: "[slSideNavigationSection]", host: { attributes: { "data-part": "section" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationSection, isStandalone: true, selector: "[slSideNavigationSection]", host: { attributes: { "data-part": "section", "data-part-section": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationSection, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slSideNavigationSection]',
                     standalone: true,
-                    host: { 'data-part': 'section' },
+                    host: { 'data-part': 'section', 'data-part-section': '' },
                 }]
         }] });
 /** The section's title. In compact mode it becomes a rule. */
 class SlSideNavigationSectionLabel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationSectionLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationSectionLabel, isStandalone: true, selector: "[slSideNavigationSectionLabel]", host: { attributes: { "data-part": "section-label" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationSectionLabel, isStandalone: true, selector: "[slSideNavigationSectionLabel]", host: { attributes: { "data-part": "section-label", "data-part-section-label": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationSectionLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slSideNavigationSectionLabel]',
                     standalone: true,
-                    host: { 'data-part': 'section-label' },
+                    host: { 'data-part': 'section-label', 'data-part-section-label': '' },
                 }]
         }] });
 /** The items of one level: the top level, or a section's. */
 class SlSideNavigationList {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationList, isStandalone: true, selector: "ul[slSideNavigationList]", host: { attributes: { "data-part": "list" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationList, isStandalone: true, selector: "ul[slSideNavigationList]", host: { attributes: { "data-part": "list", "data-part-list": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationList, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ul[slSideNavigationList]',
                     standalone: true,
-                    host: { 'data-part': 'list' },
+                    host: { 'data-part': 'list', 'data-part-list': '' },
                 }]
         }] });
 /* ── The item ───────────────────────────────────────────────────────────── */
@@ -466,7 +469,7 @@ class SlSideNavigationItem {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlSideNavigationItem, isStandalone: true, selector: "li[slSideNavigationItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item" }, properties: { "attr.data-value": "value()", "attr.data-current": "marked() ? '' : null", "attr.data-expanded": "expanded() ? '' : null", "attr.data-open": "flyoutOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null" } }, exportAs: ["slSideNavigationItem"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlSideNavigationItem, isStandalone: true, selector: "li[slSideNavigationItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item", "data-part-item": "" }, properties: { "attr.data-value": "value()", "attr.data-current": "marked() ? '' : null", "attr.data-expanded": "expanded() ? '' : null", "attr.data-open": "flyoutOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null" } }, exportAs: ["slSideNavigationItem"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationItem, decorators: [{
             type: Directive,
@@ -476,6 +479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slSideNavigationItem',
                     host: {
                         'data-part': 'item',
+                        'data-part-item': '',
                         '[attr.data-value]': 'value()',
                         '[attr.data-current]': "marked() ? '' : null",
                         '[attr.data-expanded]': "expanded() ? '' : null",
@@ -615,7 +619,7 @@ class SlSideNavigationLink extends SideNavigationRow {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlSideNavigationLink, isStandalone: true, selector: "a[slSideNavigationLink], button[slSideNavigationLink]", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "link" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" }, properties: { "attr.aria-describedby": "describedBy()", "attr.aria-current": "resolvedCurrent() ? 'page' : null", "attr.aria-disabled": "item.resolvedDisabled() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.data-current": "resolvedCurrent() ? '' : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlSideNavigationLink, isStandalone: true, selector: "a[slSideNavigationLink], button[slSideNavigationLink]", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "link", "data-part-link": "" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" }, properties: { "attr.aria-describedby": "describedBy()", "attr.aria-current": "resolvedCurrent() ? 'page' : null", "attr.aria-disabled": "item.resolvedDisabled() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.data-current": "resolvedCurrent() ? '' : null" } }, providers: [
             provideTooltipDefaults({ describes: 'description', openOn: 'hover', side: 'inline-end' }),
         ], exportAs: ["slSideNavigationLink"], usesInheritance: true, hostDirectives: [{ directive: i1.SlTooltip }], ngImport: i0, template: "<ng-content />\n@if (hint()) {\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>\n      {{ item.labelText() }}\n      @if (item.descriptionText()) {\n        <br />\n        {{ item.descriptionText() }}\n      }\n    </div>\n  </ng-template>\n}", isInline: true, dependencies: [{ kind: "directive", type: SlTooltipLayer, selector: "ng-template[slTooltipLayer]", exportAs: ["slTooltipLayer"] }, { kind: "component", type: SlTooltipContent, selector: "[slTooltipContent]", exportAs: ["slTooltipContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -636,6 +640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     host: {
                         ...HINT_HOST,
                         'data-part': 'link',
+                        'data-part-link': '',
                         '[attr.aria-current]': "resolvedCurrent() ? 'page' : null",
                         '[attr.aria-disabled]': "item.resolvedDisabled() ? 'true' : null",
                         '[attr.aria-label]': 'ariaLabel()',
@@ -670,10 +675,10 @@ class SlSideNavigationTrigger extends SideNavigationRow {
         this.navigation.toggleExpanded(this.item.value(), !this.item.expanded(), reason, event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlSideNavigationTrigger, isStandalone: true, selector: "button[slSideNavigationTrigger]", host: { attributes: { "data-part": "trigger", "type": "button" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" }, properties: { "attr.aria-describedby": "describedBy()", "attr.id": "item.ids.triggerId", "attr.aria-controls": "item.ids.groupId", "attr.aria-expanded": "item.flyoutOpen() || item.expanded()", "attr.aria-labelledby": "item.hasLink() ? item.ids.labelId : null", "disabled": "item.resolvedDisabled()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlSideNavigationTrigger, isStandalone: true, selector: "button[slSideNavigationTrigger]", host: { attributes: { "data-part": "trigger", "data-part-trigger": "", "type": "button" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)", "click": "onClick($event)" }, properties: { "attr.aria-describedby": "describedBy()", "attr.id": "item.ids.triggerId", "attr.aria-controls": "item.ids.groupId", "attr.aria-expanded": "item.flyoutOpen() || item.expanded()", "attr.aria-labelledby": "item.hasLink() ? item.ids.labelId : null", "disabled": "item.resolvedDisabled()" } }, providers: [
             provideTooltipDefaults({ describes: 'description', openOn: 'hover', side: 'inline-end' }),
         ], exportAs: ["slSideNavigationTrigger"], usesInheritance: true, hostDirectives: [{ directive: i1.SlTooltip }], ngImport: i0, template: `<ng-content />
-    <span data-part="indicator" aria-hidden="true"
+    <span data-part="indicator" data-part-indicator="" aria-hidden="true"
       ><span slIcon directional><svg slGlyph name="chevron-right"></svg></span
     ></span>
     @if (hint()) {
@@ -690,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slSideNavigationTrigger',
                     imports: [SlGlyph, SlIcon, SlTooltipLayer, SlTooltipContent],
                     template: `<ng-content />
-    <span data-part="indicator" aria-hidden="true"
+    <span data-part="indicator" data-part-indicator="" aria-hidden="true"
       ><span slIcon directional><svg slGlyph name="chevron-right"></svg></span
     ></span>
     @if (hint()) {
@@ -707,6 +712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     host: {
                         ...HINT_HOST,
                         'data-part': 'trigger',
+                        'data-part-trigger': '',
                         type: 'button',
                         '[attr.id]': 'item.ids.triggerId',
                         '[attr.aria-controls]': 'item.ids.groupId',
@@ -721,14 +727,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** The box the mark stands in. What is left of a row in the rail. */
 class SlSideNavigationIcon {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationIcon, isStandalone: true, selector: "[slSideNavigationIcon]", host: { attributes: { "data-part": "icon", "aria-hidden": "true" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationIcon, isStandalone: true, selector: "[slSideNavigationIcon]", host: { attributes: { "data-part": "icon", "data-part-icon": "", "aria-hidden": "true" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slSideNavigationIcon]',
                     standalone: true,
-                    host: { 'data-part': 'icon', 'aria-hidden': 'true' },
+                    host: { 'data-part': 'icon', 'data-part-icon': '', 'aria-hidden': 'true' },
                 }]
         }] });
 /**
@@ -785,14 +791,14 @@ class SlSideNavigationLabel {
         this.item.clipped.set(this.native.scrollWidth > this.native.clientWidth + 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationLabel, isStandalone: true, selector: "[slSideNavigationLabel]", host: { attributes: { "data-part": "label" }, properties: { "attr.id": "item.ids.labelId" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationLabel, isStandalone: true, selector: "[slSideNavigationLabel]", host: { attributes: { "data-part": "label", "data-part-label": "" }, properties: { "attr.id": "item.ids.labelId" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slSideNavigationLabel]',
                     standalone: true,
-                    host: { 'data-part': 'label', '[attr.id]': 'item.ids.labelId' },
+                    host: { 'data-part': 'label', 'data-part-label': '', '[attr.id]': 'item.ids.labelId' },
                 }]
         }], ctorParameters: () => [] });
 /** The second line under the title. */
@@ -803,66 +809,66 @@ class SlSideNavigationDescription {
         afterNextRender(() => this.item.descriptionText.set(this.native.textContent ?? ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationDescription, isStandalone: true, selector: "[slSideNavigationDescription]", host: { attributes: { "data-part": "description" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationDescription, isStandalone: true, selector: "[slSideNavigationDescription]", host: { attributes: { "data-part": "description", "data-part-description": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slSideNavigationDescription]',
                     standalone: true,
-                    host: { 'data-part': 'description' },
+                    host: { 'data-part': 'description', 'data-part-description': '' },
                 }]
         }], ctorParameters: () => [] });
 /** A quantity beside a destination, drawn as tabular figures. Never cut. */
 class SlSideNavigationCount {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationCount, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationCount, isStandalone: true, selector: "[slSideNavigationCount]", host: { attributes: { "data-part": "count" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationCount, isStandalone: true, selector: "[slSideNavigationCount]", host: { attributes: { "data-part": "count", "data-part-count": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationCount, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slSideNavigationCount]',
                     standalone: true,
-                    host: { 'data-part': 'count' },
+                    host: { 'data-part': 'count', 'data-part-count': '' },
                 }]
         }] });
 /** The suffix with a tone: a badge, a key. */
 class SlSideNavigationEnd {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationEnd, isStandalone: true, selector: "[slSideNavigationEnd]", host: { attributes: { "data-part": "end" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationEnd, isStandalone: true, selector: "[slSideNavigationEnd]", host: { attributes: { "data-part": "end", "data-part-end": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationEnd, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slSideNavigationEnd]',
                     standalone: true,
-                    host: { 'data-part': 'end' },
+                    host: { 'data-part': 'end', 'data-part-end': '' },
                 }]
         }] });
 /** Controls beside the row, outside its `a` or `button`. */
 class SlSideNavigationActions {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationActions, isStandalone: true, selector: "[slSideNavigationActions]", host: { attributes: { "data-part": "actions" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationActions, isStandalone: true, selector: "[slSideNavigationActions]", host: { attributes: { "data-part": "actions", "data-part-actions": "" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationActions, decorators: [{
             type: Directive,
             args: [{
                     selector: '[slSideNavigationActions]',
                     standalone: true,
-                    host: { 'data-part': 'actions' },
+                    host: { 'data-part': 'actions', 'data-part-actions': '' },
                 }]
         }] });
 /** A rule between items that keeps the list a list. */
 class SlSideNavigationDivider {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationDivider, isStandalone: true, selector: "li[slSideNavigationDivider]", host: { attributes: { "data-part": "divider", "role": "separator" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationDivider, isStandalone: true, selector: "li[slSideNavigationDivider]", host: { attributes: { "data-part": "divider", "data-part-divider": "", "role": "separator" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationDivider, decorators: [{
             type: Directive,
             args: [{
                     selector: 'li[slSideNavigationDivider]',
                     standalone: true,
-                    host: { 'data-part': 'divider', role: 'separator' },
+                    host: { 'data-part': 'divider', 'data-part-divider': '', role: 'separator' },
                 }]
         }] });
 /** A row still arriving: an item's geometry with `skeleton` boxes in it. */
@@ -871,8 +877,10 @@ class SlSideNavigationSkeleton {
     labelSize = input('60%', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlSideNavigationSkeleton, isStandalone: true, selector: "li[slSideNavigationSkeleton]", inputs: { labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "skeleton", "aria-hidden": "true" } }, ngImport: i0, template: `<span data-part="icon"><span slSkeleton shape="square" size="xs"></span></span>
-    <span data-part="label"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlSideNavigationSkeleton, isStandalone: true, selector: "li[slSideNavigationSkeleton]", inputs: { labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "skeleton", "data-part-skeleton": "", "aria-hidden": "true" } }, ngImport: i0, template: `<span data-part="icon" data-part-icon=""
+      ><span slSkeleton shape="square" size="xs"></span
+    ></span>
+    <span data-part="label" data-part-label=""
       ><span slSkeleton shape="text" [inlineSize]="labelSize()"></span
     ></span>`, isInline: true, dependencies: [{ kind: "component", type: SlSkeleton, selector: "[slSkeleton]", inputs: ["shape", "size", "animation", "loading", "inlineSize", "blockSize"], exportAs: ["slSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
@@ -882,13 +890,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'li[slSideNavigationSkeleton]',
                     standalone: true,
                     imports: [SlSkeleton],
-                    template: `<span data-part="icon"><span slSkeleton shape="square" size="xs"></span></span>
-    <span data-part="label"
+                    template: `<span data-part="icon" data-part-icon=""
+      ><span slSkeleton shape="square" size="xs"></span
+    ></span>
+    <span data-part="label" data-part-label=""
       ><span slSkeleton shape="text" [inlineSize]="labelSize()"></span
     ></span>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    host: { 'data-part': 'skeleton', 'aria-hidden': 'true' },
+                    host: { 'data-part': 'skeleton', 'data-part-skeleton': '', 'aria-hidden': 'true' },
                 }]
         }], propDecorators: { labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }] } });
 /* ── The group, inline or in the flyout ─────────────────────────────────── */
@@ -932,8 +942,8 @@ class SlSideNavigationGroup {
         const anchor = this.item.triggerNode();
         const document = this.native.ownerDocument;
         const layer = document.createElement('div');
-        layer.setAttribute('data-ui', 'side-navigation');
-        layer.setAttribute('data-part', 'flyout');
+        writeSelectorKey(layer, 'ui', 'side-navigation');
+        writeSelectorKey(layer, 'part', 'flyout');
         layer.setAttribute('data-size', this.navigation.resolvedSize());
         layer.setAttribute('data-truncate', this.navigation.resolvedTruncate());
         if (this.navigation.resolvedGuides())
@@ -1018,7 +1028,7 @@ class SlSideNavigationGroup {
             this.navigation.flyoutNode.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationGroup, isStandalone: true, selector: "ul[slSideNavigationGroup]", host: { attributes: { "data-part": "group" }, properties: { "attr.id": "item.ids.groupId", "attr.aria-labelledby": "item.ids.labelId" } }, exportAs: ["slSideNavigationGroup"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlSideNavigationGroup, isStandalone: true, selector: "ul[slSideNavigationGroup]", host: { attributes: { "data-part": "group", "data-part-group": "" }, properties: { "attr.id": "item.ids.groupId", "attr.aria-labelledby": "item.ids.labelId" } }, exportAs: ["slSideNavigationGroup"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationGroup, decorators: [{
             type: Directive,
@@ -1028,6 +1038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     exportAs: 'slSideNavigationGroup',
                     host: {
                         'data-part': 'group',
+                        'data-part-group': '',
                         '[attr.id]': 'item.ids.groupId',
                         '[attr.aria-labelledby]': 'item.ids.labelId',
                     },