@slotted/angular 0.0.0-stage → 0.1.0-beta.1

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

@@ -0,0 +1,1042 @@
+import { sameOpenValues, nextOpenValues } from '@slotted/core/disclosure';
+import { createWidthGate } from '@slotted/core/measure';
+import { createControllable } from '@slotted/core/state';
+import { SlAppShellNav } from '@slotted/angular/app-shell';
+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 { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { createPortalRoot } from '@slotted/core/portal';
+import { createPositioner } from '@slotted/core/positioner';
+import { createPresence } from '@slotted/core/presence';
+import { truncateMiddle } from '@slotted/core/text';
+import { SlSkeleton } from '@slotted/angular/skeleton';
+import * as i1 from '@slotted/angular/tooltip';
+import { SlTooltip, SlTooltipLayer, SlTooltipContent, provideTooltipDefaults } from '@slotted/angular/tooltip';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+
+/** The contract's defaults, and the width the rail is read at. */
+const SIDE_NAVIGATION_FALLBACK = {
+    autoExpand: true,
+    compactAt: 96,
+    guides: true,
+    landmark: true,
+    mode: 'auto',
+    multiple: true,
+    size: 'md',
+    truncate: 'end',
+};
+const SIDE_NAVIGATION_DEFAULTS = new InjectionToken('slotted side-navigation defaults', { providedIn: 'root', factory: () => SIDE_NAVIGATION_FALLBACK });
+/**
+ * An application decides once how its columns read — the rail's width, the
+ * cut, whether groups open one at a time — rather than repeating it on every
+ * navigation in a product. A column that states any of them itself still wins.
+ * Its words come from the language in force (`provideSlotted`).
+ */
+function provideSideNavigationDefaults(defaults) {
+    return {
+        provide: SIDE_NAVIGATION_DEFAULTS,
+        useFactory: () => ({ ...SIDE_NAVIGATION_FALLBACK, ...defaults }),
+    };
+}
+/** What a column renders as here, before it states anything of its own. */
+function injectSideNavigationDefaults() {
+    return inject(SIDE_NAVIGATION_DEFAULTS);
+}
+/**
+ * Application-scoped rather than module-scoped, for the reason `field` records:
+ * a module-level counter produces colliding sequences when two applications
+ * render in one server process, and the server and the client sequences must
+ * match for hydration.
+ */
+class SlSideNavigationIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-side-navigation-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Every row a reader can land on, in the order the DOM holds them. */
+const SIDE_NAVIGATION_ROW_SELECTOR = '[data-part="link"], [data-part="trigger"]';
+/**
+ * A row the keyboard may land on: not inside a closed group. Read from the
+ * structure rather than from the layout, so the answer is the same before the
+ * stylesheet has loaded and in an environment with no layout at all.
+ */
+function visible(element, root) {
+    for (let group = element.closest('[data-part="group"]'); group !== null && root.contains(group); group = group.parentElement?.closest('[data-part="group"]') ?? null) {
+        if (!group.parentElement?.hasAttribute('data-expanded'))
+            return false;
+    }
+    return true;
+}
+/**
+ * A column of destinations: nested groups, a current destination, and a rail
+ * when the room it has is under `compactAt` pixels.
+ *
+ * The directive goes on the consumer's own element — `<nav slSideNavigation>`
+ * standing alone, `<div slSideNavigation>` inside `app-shell`'s nav region,
+ * which is already the navigation landmark. `landmark` decides whether the
+ * name is written; the element is the consumer's, as it is everywhere in this
+ * ecosystem.
+ *
+ * **Three values, three models.** `value` is the current destination and
+ * `expanded` the set of open groups; `flyout` is the one group shown beside the
+ * rail, transient by design, and it never writes into `expanded`.
+ *
+ * **The rail is a width.** The stylesheet decides the picture from the root's
+ * own inline size, before any script; the width gate here writes
+ * `data-compact` afterwards, and that is what turns on the tooltip and the
+ * flyout.
+ */
+class SlSideNavigation {
+    /** The current destination's value. Two-way, so a template may bind it directly. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The set of open groups. */
+    expanded = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** The one group presented beside the rail, or null. */
+    flyout = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyout" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    mode = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    truncate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "truncate" }] : /* istanbul ignore next */ []));
+    multiple = input(undefined, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    autoExpand = input(undefined, { ...(ngDevMode ? { debugName: "autoExpand" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    guides = input(undefined, { ...(ngDevMode ? { debugName: "guides" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * Whether the root is the navigation landmark. Unstated, it is one on its
+     * own and not inside `app-shell`'s nav region, which already is.
+     */
+    landmark = input(undefined, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /** The width, in CSS pixels, under which `mode="auto"` is compact. */
+    compactAt = input(undefined, { ...(ngDevMode ? { debugName: "compactAt" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : numberAttribute(state)) });
+    /**
+     * Words laid over the catalog of the language in force: the landmark's name
+     * (`navigation`). A static `aria-label` still wins.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** One output for one transition, carrying the reason and the event. */
+    valueChangeRequest = output();
+    expandedChangeRequest = output();
+    flyoutChangeRequest = output();
+    defaults = injectSideNavigationDefaults();
+    shell = inject(SlAppShellNav, { optional: true });
+    /** The name the consumer wrote, kept over the family's own. */
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    host = inject(ElementRef).nativeElement;
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedMode = computed(() => this.mode() ?? this.defaults.mode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    resolvedTruncate = computed(() => this.truncate() ?? this.defaults.truncate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTruncate" }] : /* istanbul ignore next */ []));
+    resolvedMultiple = computed(() => this.multiple() ?? this.defaults.multiple, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMultiple" }] : /* istanbul ignore next */ []));
+    resolvedAutoExpand = computed(() => this.autoExpand() ?? this.defaults.autoExpand, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAutoExpand" }] : /* istanbul ignore next */ []));
+    resolvedGuides = computed(() => this.guides() ?? this.defaults.guides, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedGuides" }] : /* istanbul ignore next */ []));
+    resolvedCompactAt = computed(() => this.compactAt() ?? this.defaults.compactAt, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCompactAt" }] : /* istanbul ignore next */ []));
+    resolvedLandmark = computed(() => this.landmark() ?? (this.shell === null ? this.defaults.landmark : false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLandmark" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this column's `messages` laid over them. */
+    t = injectMessages(sideNavigationMessages, this.messages);
+    ariaLabel = computed(() => this.resolvedLandmark() ? (this.writtenLabel ?? this.t('navigation')) : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Whether the root is under `compactAt`, measured. */
+    narrow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+    compact = computed(() => this.resolvedMode() === 'compact' || (this.resolvedMode() === 'auto' && this.narrow()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    /** Moves when the root was resized or the fonts arrived, so a label measures again. */
+    measureTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measureTick" }] : /* istanbul ignore next */ []));
+    /** The layer the flyout is drawn in, so the keyboard can walk into it. */
+    flyoutNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutNode" }] : /* istanbul ignore next */ []));
+    /** Every item's parent, so the ancestors of a destination can be opened. */
+    parents = new Map();
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        /* After the first render and not in the constructor: a measure there
+           forced a style pass before any binding existed — `compactAt` was still
+           its default, and inside app-shell the column resolved at rail width and
+           then animated open. */
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const gate = createWidthGate(this.host, {
+                at: this.resolvedCompactAt(),
+                onChange: (narrow) => this.narrow.set(narrow),
+            });
+            this.narrow.set(gate.narrow());
+            destroyRef.onDestroy(() => gate.destroy());
+            const observer = new ResizeObserver(() => this.measureTick.update((tick) => tick + 1));
+            observer.observe(this.host);
+            destroyRef.onDestroy(() => observer.disconnect());
+            void this.host.ownerDocument.fonts?.ready.then(() => this.measureTick.update((tick) => tick + 1));
+        });
+        /* Compact mode ending takes the flyout with it: there is no rail to stand beside. */
+        effect(() => {
+            if (!this.compact() && this.flyout() !== null)
+                this.setFlyout(null, 'resize');
+        });
+        /* The ancestors of the current destination open, with the reason select. */
+        effect(() => {
+            const current = this.value();
+            if (!this.resolvedAutoExpand() || current === null)
+                return;
+            const open = this.expanded();
+            const missing = [];
+            for (let parent = this.parents.get(current) ?? null; parent !== null; parent = this.parents.get(parent) ?? null) {
+                if (!open.includes(parent))
+                    missing.push(parent);
+            }
+            if (missing.length === 0)
+                return;
+            const next = this.resolvedMultiple()
+                ? [...open, ...missing]
+                : [missing[missing.length - 1]];
+            this.requestExpanded(next, 'select');
+        });
+    }
+    isExpanded(value) {
+        return this.expanded().includes(value);
+    }
+    /** An item says where it stands. */
+    registerItem(value, parent) {
+        this.parents.set(value, parent);
+        return () => {
+            this.parents.delete(value);
+        };
+    }
+    requestExpanded(next, reason, source) {
+        const state = createControllable({
+            equals: sameOpenValues,
+            initial: this.expanded(),
+            onRequest: (request) => this.expandedChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.expanded.set(next);
+    }
+    /** Asks the set of open groups to include or drop one value. */
+    toggleExpanded(value, next, reason, source) {
+        const current = this.expanded();
+        if (current.includes(value) === next)
+            return;
+        this.requestExpanded(nextOpenValues(current, value, { multiple: this.resolvedMultiple() }), reason, source);
+    }
+    /** Asks the flyout to show one group, or none. */
+    setFlyout(next, reason, source) {
+        const state = createControllable({
+            initial: this.flyout(),
+            onRequest: (request) => this.flyoutChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.flyout.set(next);
+    }
+    /** Asks the current destination to move. */
+    select(next, reason, source) {
+        const state = createControllable({
+            initial: this.value(),
+            onRequest: (request) => this.valueChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.value.set(next);
+    }
+    /** Opens one group, with the reason `programmatic`. */
+    expand(value) {
+        this.toggleExpanded(value, true, 'programmatic');
+    }
+    /** Closes one group, with the reason `programmatic`. */
+    collapse(value) {
+        this.toggleExpanded(value, false, 'programmatic');
+    }
+    /** Focuses the first link or trigger in the column. */
+    focus() {
+        this.rows()[0]?.focus();
+    }
+    /** The rows the arrow keys walk, with the flyout's spliced in after its trigger. */
+    rows() {
+        const inColumn = [
+            ...this.host.querySelectorAll(SIDE_NAVIGATION_ROW_SELECTOR),
+        ].filter((row) => visible(row, this.host));
+        const layer = this.flyoutNode();
+        const open = this.flyout();
+        if (layer === null || open === null)
+            return inColumn;
+        const inLayer = [...layer.querySelectorAll(SIDE_NAVIGATION_ROW_SELECTOR)];
+        const at = inColumn.findIndex((row) => row.closest('[data-part="item"]')?.getAttribute('data-value') === open);
+        if (at === -1)
+            return [...inColumn, ...inLayer];
+        return [...inColumn.slice(0, at + 1), ...inLayer, ...inColumn.slice(at + 1)];
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const target = event.target;
+        if (!target.matches(SIDE_NAVIGATION_ROW_SELECTOR))
+            return;
+        if (event.key === 'Escape') {
+            /* Inside the layer, the dismissable layer has already answered. */
+            if (this.flyoutNode()?.contains(target))
+                return;
+            const group = target.closest('[data-part="group"]');
+            const item = group?.parentElement;
+            const value = item?.getAttribute('data-value');
+            if (!group || !item || !value || !item.hasAttribute('data-expanded'))
+                return;
+            event.preventDefault();
+            this.toggleExpanded(value, false, 'escape', event);
+            item.querySelector(':scope > [data-part="trigger"]')?.focus();
+            return;
+        }
+        const step = event.key === 'ArrowDown' || event.key === 'ArrowRight'
+            ? 1
+            : event.key === 'ArrowUp' || event.key === 'ArrowLeft'
+                ? -1
+                : 0;
+        if (step === 0 && event.key !== 'Home' && event.key !== 'End')
+            return;
+        const all = this.rows();
+        if (all.length === 0)
+            return;
+        event.preventDefault();
+        const index = all.indexOf(target);
+        const next = event.key === 'Home'
+            ? 0
+            : event.key === 'End'
+                ? all.length - 1
+                : Math.min(all.length - 1, Math.max(0, index + step));
+        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 });
+}
+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-part': 'root',
+                        '[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",
+                        '(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"] }]
+        }], 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. */
+function activationReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/* ── Section, its title, and a list ─────────────────────────────────────── */
+/** 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 });
+}
+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' },
+                }]
+        }] });
+/** 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 });
+}
+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' },
+                }]
+        }] });
+/** 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 });
+}
+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' },
+                }]
+        }] });
+/* ── The item ───────────────────────────────────────────────────────────── */
+/**
+ * A row: a link, a trigger, or both, with optional actions and a group.
+ *
+ * It carries the states the stylesheet reads. `data-current` is on it while
+ * its own link is the destination, and while a descendant is and the group is
+ * closed or the column is a rail — the reader sees where they are when the
+ * destination itself is out of sight.
+ */
+class SlSideNavigationItem {
+    /** The item's identity: what `value`, `expanded` and `flyout` name it by. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The row and everything in it refuse interaction. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    navigation = inject(SlSideNavigation);
+    /** The item above, or nothing at the top level. */
+    parent = inject(SlSideNavigationItem, { optional: true, skipSelf: true });
+    generated = inject(SlSideNavigationIdFactory).next();
+    ids = {
+        groupId: `${this.generated}-group`,
+        labelId: `${this.generated}-label`,
+        triggerId: `${this.generated}-trigger`,
+    };
+    hasLink = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLink" }] : /* istanbul ignore next */ []));
+    hasGroup = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasGroup" }] : /* istanbul ignore next */ []));
+    /** Whether the label was measured as clipped, which is what opens the tooltip. */
+    clipped = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clipped" }] : /* istanbul ignore next */ []));
+    /** The label's whole text, for the tooltip and for `aria-label` under a middle cut. */
+    labelText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
+    descriptionText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionText" }] : /* istanbul ignore next */ []));
+    triggerNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerNode" }] : /* istanbul ignore next */ []));
+    descendants = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descendants" }] : /* istanbul ignore next */ []));
+    expanded = computed(() => this.navigation.isExpanded(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    flyoutOpen = computed(() => this.navigation.compact() && this.navigation.flyout() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutOpen" }] : /* istanbul ignore next */ []));
+    /** Whether the current destination is this item's own link. */
+    current = computed(() => this.hasLink() && this.navigation.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Whether the current destination is somewhere under this item. */
+    holdsCurrent = computed(() => this.descendants().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "holdsCurrent" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() || (this.parent?.resolvedDisabled() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    marked = computed(() => this.current() || (this.holdsCurrent() && (!this.expanded() || this.navigation.compact())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marked" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        let release = null;
+        effect(() => {
+            release?.();
+            release = this.navigation.registerItem(this.value(), this.parent?.value() ?? null);
+        });
+        destroyRef.onDestroy(() => release?.());
+        /* Where the reader is, said upward: own link, or anything under it. */
+        const parent = this.parent;
+        if (parent !== null) {
+            effect(() => parent.reportCurrent(this.value(), this.current() || this.holdsCurrent()));
+            destroyRef.onDestroy(() => parent.reportCurrent(this.value(), false));
+        }
+    }
+    /** A descendant says whether it holds the current destination. */
+    reportCurrent(descendant, isCurrent) {
+        this.descendants.update((known) => {
+            const has = known.includes(descendant);
+            if (isCurrent === has)
+                return known;
+            return isCurrent ? [...known, descendant] : known.filter((item) => item !== descendant);
+        });
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'li[slSideNavigationItem]',
+                    standalone: true,
+                    exportAs: 'slSideNavigationItem',
+                    host: {
+                        'data-part': 'item',
+                        '[attr.data-value]': 'value()',
+                        '[attr.data-current]': "marked() ? '' : null",
+                        '[attr.data-expanded]': "expanded() ? '' : null",
+                        '[attr.data-open]': "flyoutOpen() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() ? '' : null",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+/* ── The row's hint ─────────────────────────────────────────────────────── */
+/**
+ * What a link and a trigger share: the tooltip a row opens when it cannot
+ * show its own words. `SlTooltip` is a host directive holding the state and
+ * the delays; the row dispatches the pointer and the focus to it only while a
+ * hint is due, because the family — not the consumer's template — decides
+ * when a row is a trigger. The layer is stamped under `@if`, so an idle row
+ * mounts nothing.
+ */
+class SideNavigationRow {
+    item = inject(SlSideNavigationItem);
+    navigation = inject(SlSideNavigation);
+    tooltip = inject(SlTooltip);
+    native = inject(ElementRef).nativeElement;
+    constructor() {
+        this.tooltip.triggerNode.set(this.native);
+        inject(DestroyRef).onDestroy(() => this.tooltip.triggerNode.set(null));
+    }
+    describedBy = computed(() => this.hint() && this.tooltip.isOpen() ? this.tooltip.contentId : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    onPointerEnter(event) {
+        if (!this.hint() || event.pointerType === 'touch')
+            return;
+        this.tooltip.openAfterDelay(event);
+    }
+    onPointerLeave(event) {
+        if (!this.hint())
+            return;
+        this.tooltip.closeAfterDelay(event);
+    }
+    onPointerDown(event) {
+        if (!this.hint())
+            return;
+        if (event.pointerType === 'touch')
+            this.tooltip.pressAndHold(event);
+        else if (this.tooltip.isOpen())
+            this.tooltip.toggle(false, 'pointer', event);
+    }
+    onPointerUp() {
+        this.tooltip.cancelPending();
+    }
+    onFocus(event) {
+        if (!this.hint() || !this.native.matches(':focus-visible'))
+            return;
+        this.tooltip.toggle(true, 'keyboard', event);
+    }
+    onBlur(event) {
+        if (this.tooltip.isOpen())
+            this.tooltip.toggle(false, 'blur', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SideNavigationRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SideNavigationRow, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SideNavigationRow, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+const HINT_TEMPLATE = `<ng-content />
+@if (hint()) {
+  <ng-template slTooltipLayer>
+    <div slTooltipContent>
+      {{ item.labelText() }}
+      @if (item.descriptionText()) {
+        <br />
+        {{ item.descriptionText() }}
+      }
+    </div>
+  </ng-template>
+}`;
+const HINT_HOST = {
+    '[attr.aria-describedby]': 'describedBy()',
+    '(pointerenter)': 'onPointerEnter($event)',
+    '(pointerleave)': 'onPointerLeave($event)',
+    '(pointerdown)': 'onPointerDown($event)',
+    '(pointerup)': 'onPointerUp()',
+    '(pointercancel)': 'onPointerUp()',
+    '(focus)': 'onFocus($event)',
+    '(blur)': 'onBlur($event)',
+};
+/* ── The link ───────────────────────────────────────────────────────────── */
+/**
+ * The destination, or a command. On an `a` with an `href` it is a destination
+ * and takes `aria-current`; on a `button` it is a command in the column with
+ * the same row. `routerLink` and `routerLinkActive` live on the same element,
+ * and an `aria-current` the router wrote is read and kept.
+ */
+class SlSideNavigationLink extends SideNavigationRow {
+    /**
+     * Whether this is the current destination, stated on the row itself. It
+     * wins over the root's `value`; unstated, an `aria-current` the router wrote
+     * on the element is read instead.
+     */
+    current = input(undefined, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    isDestination = this.native.tagName === 'A';
+    writtenCurrent = inject(new HostAttributeToken('aria-current'), {
+        optional: true,
+    });
+    resolvedCurrent = computed(() => {
+        const stated = this.current();
+        if (stated !== undefined)
+            return stated;
+        if (this.writtenCurrent !== null)
+            return this.writtenCurrent !== 'false';
+        return this.isDestination && this.navigation.value() === this.item.value();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCurrent" }] : /* istanbul ignore next */ []));
+    hint = computed(() => this.navigation.compact() || this.item.clipped(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.navigation.resolvedTruncate() === 'middle' && this.item.clipped()
+        ? this.item.labelText()
+        : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.item.hasLink.set(true);
+        inject(DestroyRef).onDestroy(() => this.item.hasLink.set(false));
+    }
+    onClick(event) {
+        if (this.item.resolvedDisabled()) {
+            event.preventDefault();
+            return;
+        }
+        if (event.defaultPrevented)
+            return;
+        const reason = activationReason(event);
+        if (this.isDestination)
+            this.navigation.select(this.item.value(), reason, event);
+        if (this.navigation.compact() && this.navigation.flyout() !== null) {
+            this.navigation.setFlyout(null, 'select', event);
+        }
+    }
+    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: [
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationLink, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[slSideNavigationLink], button[slSideNavigationLink]',
+                    standalone: true,
+                    exportAs: 'slSideNavigationLink',
+                    imports: [SlTooltipLayer, SlTooltipContent],
+                    template: HINT_TEMPLATE,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: [
+                        provideTooltipDefaults({ describes: 'description', openOn: 'hover', side: 'inline-end' }),
+                    ],
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'link',
+                        '[attr.aria-current]': "resolvedCurrent() ? 'page' : null",
+                        '[attr.aria-disabled]': "item.resolvedDisabled() ? 'true' : null",
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.data-current]': "resolvedCurrent() ? '' : null",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }] } });
+/* ── The trigger ────────────────────────────────────────────────────────── */
+/**
+ * The disclosure button of the group. Alone, it is the whole row and carries
+ * the label; beside a link it is a mark-only button named by the row's label
+ * through `aria-labelledby`. In the rail, a trigger without a link opens the
+ * flyout instead of the inline group.
+ */
+class SlSideNavigationTrigger extends SideNavigationRow {
+    hint = computed(() => !this.item.hasLink() && (this.navigation.compact() || this.item.clipped()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.item.triggerNode.set(this.native);
+        inject(DestroyRef).onDestroy(() => this.item.triggerNode.set(null));
+    }
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        const reason = activationReason(event);
+        if (this.navigation.compact() && !this.item.hasLink()) {
+            this.navigation.setFlyout(this.item.flyoutOpen() ? null : this.item.value(), reason, event);
+            return;
+        }
+        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: [
+            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 slIcon directional><svg slGlyph name="chevron-right"></svg></span
+    ></span>
+    @if (hint()) {
+      <ng-template slTooltipLayer>
+        <div slTooltipContent>{{ item.labelText() }}</div>
+      </ng-template>
+    }`, isInline: true, dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationTrigger, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slSideNavigationTrigger]',
+                    standalone: true,
+                    exportAs: 'slSideNavigationTrigger',
+                    imports: [SlGlyph, SlIcon, SlTooltipLayer, SlTooltipContent],
+                    template: `<ng-content />
+    <span data-part="indicator" aria-hidden="true"
+      ><span slIcon directional><svg slGlyph name="chevron-right"></svg></span
+    ></span>
+    @if (hint()) {
+      <ng-template slTooltipLayer>
+        <div slTooltipContent>{{ item.labelText() }}</div>
+      </ng-template>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: [
+                        provideTooltipDefaults({ describes: 'description', openOn: 'hover', side: 'inline-end' }),
+                    ],
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'trigger',
+                        type: 'button',
+                        '[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()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/* ── The parts of a row ─────────────────────────────────────────────────── */
+/** 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 });
+}
+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' },
+                }]
+        }] });
+/**
+ * The row's text. It registers its words with the item, for the tooltip and
+ * for the accessible name under a middle cut, and measures itself whenever
+ * the column was resized: a label that overflows its box marks the row
+ * clipped, which is what opens the tooltip on a row that fits nothing.
+ */
+class SlSideNavigationLabel {
+    item = inject(SlSideNavigationItem);
+    navigation = inject(SlSideNavigation);
+    native = inject(ElementRef).nativeElement;
+    /** The words as the consumer wrote them, kept while a middle cut is shown. */
+    whole = null;
+    constructor() {
+        afterNextRender(() => {
+            this.whole = this.native.textContent ?? '';
+            this.item.labelText.set(this.whole);
+            this.measure();
+        });
+        effect(() => {
+            this.navigation.measureTick();
+            this.navigation.compact();
+            this.navigation.resolvedTruncate();
+            if (this.whole !== null)
+                this.measure();
+        });
+    }
+    measure() {
+        const whole = this.whole ?? '';
+        const truncate = this.navigation.resolvedTruncate();
+        if (truncate === 'none' || this.navigation.compact()) {
+            if (this.native.textContent !== whole)
+                this.native.textContent = whole;
+            this.item.clipped.set(this.navigation.compact());
+            return;
+        }
+        if (truncate === 'middle') {
+            const style = getComputedStyle(this.native);
+            const canvas = this.native.ownerDocument.createElement('canvas').getContext('2d');
+            const room = this.native.clientWidth;
+            if (canvas === null || room === 0)
+                return;
+            /* The parts rather than the shorthand: Firefox reports the shorthand empty. */
+            canvas.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+            const cut = truncateMiddle(whole, (candidate) => canvas.measureText(candidate).width <= room);
+            if (this.native.textContent !== cut)
+                this.native.textContent = cut;
+            this.item.clipped.set(cut !== whole);
+            return;
+        }
+        if (this.native.textContent !== whole)
+            this.native.textContent = whole;
+        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 });
+}
+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' },
+                }]
+        }], ctorParameters: () => [] });
+/** The second line under the title. */
+class SlSideNavigationDescription {
+    item = inject(SlSideNavigationItem);
+    native = inject(ElementRef).nativeElement;
+    constructor() {
+        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 });
+}
+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' },
+                }]
+        }], 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 });
+}
+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' },
+                }]
+        }] });
+/** 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 });
+}
+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' },
+                }]
+        }] });
+/** 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 });
+}
+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' },
+                }]
+        }] });
+/** 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 });
+}
+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' },
+                }]
+        }] });
+/** A row still arriving: an item's geometry with `skeleton` boxes in it. */
+class SlSideNavigationSkeleton {
+    /** How wide the label's bar is drawn, as any CSS length. */
+    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"
+      ><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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationSkeleton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'li[slSideNavigationSkeleton]',
+                    standalone: true,
+                    imports: [SlSkeleton],
+                    template: `<span data-part="icon"><span slSkeleton shape="square" size="xs"></span></span>
+    <span data-part="label"
+      ><span slSkeleton shape="text" [inlineSize]="labelSize()"></span
+    ></span>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { '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 ─────────────────────────────────── */
+/**
+ * An item's children. Inline, it is the second track of the item's grid and
+ * opens with it. In the rail the same `ul` is moved into a layer beside the
+ * trigger — composed from `portal`, `positioner`, `presence` and
+ * `dismissable-layer`, the four modules every overlay in the library takes —
+ * and moved back when the layer has left, which is what the CDK's
+ * `DomPortalOutlet` does with a template's nodes.
+ */
+class SlSideNavigationGroup {
+    item = inject(SlSideNavigationItem);
+    navigation = inject(SlSideNavigation);
+    native = inject(ElementRef).nativeElement;
+    layer = null;
+    home = null;
+    portal = null;
+    positioner = null;
+    dismissable = null;
+    status = signal('unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    presence = createPresence({
+        present: false,
+        onStatusChange: (next) => this.status.set(next),
+    });
+    constructor() {
+        this.item.hasGroup.set(true);
+        effect(() => this.presence.sync(this.item.flyoutOpen()));
+        effect(() => (this.status() === 'unmounted' ? this.teardown() : this.build()));
+        effect(() => this.stack());
+        inject(DestroyRef).onDestroy(() => {
+            this.item.hasGroup.set(false);
+            this.presence.destroy();
+            this.teardown();
+        });
+    }
+    build() {
+        if (this.layer !== null)
+            return;
+        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');
+        layer.setAttribute('data-size', this.navigation.resolvedSize());
+        layer.setAttribute('data-truncate', this.navigation.resolvedTruncate());
+        if (this.navigation.resolvedGuides())
+            layer.setAttribute('data-guides', '');
+        layer.addEventListener('focusout', this.onFocusOut);
+        this.home = { parent: this.native.parentNode, next: this.native.nextSibling };
+        layer.appendChild(this.native);
+        const portal = createPortalRoot({ origin: anchor });
+        (portal.container ?? this.home.parent).appendChild(layer);
+        this.portal = portal;
+        this.layer = layer;
+        this.presence.setNode(layer);
+        this.navigation.flyoutNode.set(layer);
+        if (anchor !== null) {
+            this.positioner = createPositioner(anchor, layer, {
+                align: 'start',
+                flip: true,
+                shift: true,
+                side: 'inline-end',
+                sideOffset: 0,
+                strategy: 'fixed',
+            });
+            void this.positioner.update().then(() => {
+                if (this.layer === layer && this.item.flyoutOpen())
+                    layer.setAttribute('data-open', '');
+            });
+        }
+    }
+    /** The layer joins the single stack only while it is open; the trigger is a branch. */
+    stack() {
+        const open = this.item.flyoutOpen();
+        const layer = this.layer;
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        if (layer === null || !open) {
+            layer?.removeAttribute('data-open');
+            return;
+        }
+        const anchor = this.item.triggerNode();
+        this.dismissable = createDismissableLayer(layer, {
+            escape: true,
+            focusOutside: false,
+            modal: false,
+            outsidePress: true,
+            scrollLock: false,
+            ...(anchor ? { branches: [anchor] } : {}),
+            onDismiss: (request) => {
+                const reason = request.reason === 'escape' ? 'escape' : 'outsidePress';
+                this.navigation.setFlyout(null, reason, request.source);
+                if (reason === 'escape')
+                    anchor?.focus();
+            },
+        });
+    }
+    onFocusOut = (event) => {
+        const next = event.relatedTarget;
+        const layer = this.layer;
+        if (next === null || layer === null || !this.item.flyoutOpen())
+            return;
+        if (layer.contains(next) || this.item.triggerNode()?.contains(next))
+            return;
+        this.navigation.setFlyout(null, 'blur', event);
+    };
+    teardown() {
+        const layer = this.layer;
+        if (layer === null)
+            return;
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        this.positioner?.destroy();
+        this.positioner = null;
+        layer.removeEventListener('focusout', this.onFocusOut);
+        if (this.home !== null)
+            this.home.parent.insertBefore(this.native, this.home.next);
+        this.home = null;
+        this.presence.setNode(null);
+        layer.remove();
+        this.portal?.release();
+        this.portal = null;
+        this.layer = null;
+        if (this.navigation.flyoutNode() === layer)
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSideNavigationGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[slSideNavigationGroup]',
+                    standalone: true,
+                    exportAs: 'slSideNavigationGroup',
+                    host: {
+                        'data-part': 'group',
+                        '[attr.id]': 'item.ids.groupId',
+                        '[attr.aria-labelledby]': 'item.ids.labelId',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SIDE_NAVIGATION_DEFAULTS, SIDE_NAVIGATION_FALLBACK, SIDE_NAVIGATION_ROW_SELECTOR, SlSideNavigation, SlSideNavigationActions, SlSideNavigationCount, SlSideNavigationDescription, SlSideNavigationDivider, SlSideNavigationEnd, SlSideNavigationGroup, SlSideNavigationIcon, SlSideNavigationIdFactory, SlSideNavigationItem, SlSideNavigationLabel, SlSideNavigationLink, SlSideNavigationList, SlSideNavigationSection, SlSideNavigationSectionLabel, SlSideNavigationSkeleton, SlSideNavigationTrigger, injectSideNavigationDefaults, provideSideNavigationDefaults };
+//# sourceMappingURL=slotted-angular-side-navigation.mjs.map