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

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

@@ -0,0 +1,1308 @@
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { COMPACT_BELOW, createWidthGate } from '@slotted/core/measure';
+import { createPresence } from '@slotted/core/presence';
+import { createControllable } from '@slotted/core/state';
+import { SlAppShellBanner } from '@slotted/angular/app-shell';
+import { injectMessages } from '@slotted/angular/i18n';
+import { topNavigationMessages } from '@slotted/core/i18n';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, model, input, booleanAttribute, output, ElementRef, computed, signal, DestroyRef, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, HostAttributeToken, Directive, afterNextRender, untracked, forwardRef } from '@angular/core';
+import * as i2 from '@slotted/angular/tooltip';
+import { SlTooltip, provideTooltipDefaults, SlTooltipLayer, SlTooltipContent } from '@slotted/angular/tooltip';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import * as i1 from '@slotted/angular/navigation-menu';
+import { SlNavigationMenu, SlNavigationMenuIdFactory, NAVIGATION_MENU_SECTION, SlNavigationMenuTriggerWiring } from '@slotted/angular/navigation-menu';
+
+/** The contract's defaults. */
+const TOP_NAVIGATION_FALLBACK = {
+    frame: true,
+    landmark: true,
+    size: 'md',
+};
+/**
+ * The three steps of the bar's width, in CSS pixels, under which each
+ * priority folds. The stylesheet reads the same three literals in its
+ * container conditions; this is the copy the script reads. `medium` is the
+ * compact size class's limit, where app-shell overlays its regions.
+ */
+const TOP_NAVIGATION_COLLAPSE_AT = {
+    high: 480,
+    low: 1024,
+    medium: COMPACT_BELOW,
+};
+const TOP_NAVIGATION_DEFAULTS = new InjectionToken('slotted top-navigation defaults', { providedIn: 'root', factory: () => TOP_NAVIGATION_FALLBACK });
+/**
+ * An application decides once how its bars read — the size, the frame —
+ * rather than repeating it on every bar in a product. A bar that states any of
+ * them itself still wins. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideTopNavigationDefaults(defaults) {
+    return {
+        provide: TOP_NAVIGATION_DEFAULTS,
+        useFactory: () => ({ ...TOP_NAVIGATION_FALLBACK, ...defaults }),
+    };
+}
+/** What a bar renders as here, before it states anything of its own. */
+function injectTopNavigationDefaults() {
+    return inject(TOP_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 SlTopNavigationIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-top-navigation-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Every control a reader can land on in the bar, in DOM order. */
+const TOP_NAVIGATION_CONTROL_SELECTOR = '[data-part="skip"], [data-part="home"][href], [data-part="link"], [data-part="trigger"], [data-part="more"], [data-part="search"] input, [data-part="search-toggle"], [data-part="help"], [data-part="notifications"], [data-part="account"]';
+/**
+ * The bar across the top of an application: the mark, the context, the
+ * destinations, the search and the global actions, folding by priority as
+ * its own width goes.
+ *
+ * The directive goes on the consumer's own element — `<header slTopNavigation>`
+ * standing alone, `<div slTopNavigation>` inside `app-shell`'s banner, which
+ * is already the banner landmark and already paints the bar's ground.
+ *
+ * **Three values, three models.** `value` is the current destination,
+ * `moreOpen` the panel and `searchOpen` the search. Which items fold is not a
+ * fourth: it is read from the width and reported as a fact — `data-collapsed`
+ * on the item, the count on `more`, `collapseChange` when the set moves.
+ *
+ * **The panel is the same DOM.** A folded item, the context and the help are
+ * moved into the panel while it is present and moved back when it has left,
+ * which is what the CDK's `DomPortalOutlet` does with a template's nodes.
+ */
+class SlTopNavigation {
+    /** 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 */ []));
+    /** Whether the panel is shown. */
+    moreOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreOpen" }] : /* istanbul ignore next */ []));
+    /** Whether the search takes the bar, below the medium step. */
+    searchOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchOpen" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the root paints its own ground, rule and inset. Unstated, it does
+     * on its own and does not inside `app-shell`'s banner.
+     */
+    frame = input(undefined, { ...(ngDevMode ? { debugName: "frame" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * Whether the root is the banner landmark. Unstated, it is one on its own and
+     * not inside `app-shell`'s banner, which already is. The element is the
+     * consumer's — `header` or `div` — and `landmark` decides nothing about it
+     * here; it is read by the reference page and the tests as the intent.
+     */
+    landmark = input(undefined, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /** The id of the element the skip link jumps to. Absent, no skip link is rendered. */
+    skipTo = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * landmark's name, the names of the controls with no visible text, and the
+     * skip link. A static `aria-label` on a part 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();
+    moreOpenChangeRequest = output();
+    searchOpenChangeRequest = output();
+    /** The folded set moved: the values, in DOM order. */
+    collapseChange = output();
+    defaults = injectTopNavigationDefaults();
+    shell = inject(SlAppShellBanner, { optional: true });
+    host = inject(ElementRef).nativeElement;
+    ids = (() => {
+        const id = inject(SlTopNavigationIdFactory).next();
+        return { moreId: `${id}-more`, panelId: `${id}-panel` };
+    })();
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedFrame = computed(() => this.frame() ?? (this.shell === null ? this.defaults.frame : false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFrame" }] : /* 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 bar's `messages` laid over them. */
+    t = injectMessages(topNavigationMessages, this.messages);
+    /** The three steps, measured: each gate reports once per crossing. */
+    underLow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "underLow" }] : /* istanbul ignore next */ []));
+    underMedium = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "underMedium" }] : /* istanbul ignore next */ []));
+    underHigh = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "underHigh" }] : /* istanbul ignore next */ []));
+    /** Whether the width is under the medium step, where the search is its toggle and the context moves to the panel. */
+    narrow = this.underMedium.asReadonly();
+    /** Whether the width is under the high step, where help moves to the panel. */
+    narrowest = this.underHigh.asReadonly();
+    /** The priorities the width has folded. */
+    folded = computed(() => {
+        const set = new Set();
+        if (this.underLow())
+            set.add('low');
+        if (this.underMedium())
+            set.add('medium');
+        if (this.underHigh())
+            set.add('high');
+        return set;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "folded" }] : /* istanbul ignore next */ []));
+    items = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    order = 0;
+    /** The values of the folded items, in DOM order. */
+    collapsed = computed(() => [...this.items().entries()]
+        .filter(([, record]) => this.folded().has(record.priority))
+        .sort(([, a], [, b]) => a.order - b.order)
+        .map(([value]) => value), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Whether a folded item holds the current destination. */
+    currentFolded = computed(() => {
+        const current = this.value();
+        return [...this.items().entries()].some(([value, record]) => this.folded().has(record.priority) && (record.current || value === current));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentFolded" }] : /* istanbul ignore next */ []));
+    hasSearch = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSearch" }] : /* istanbul ignore next */ []));
+    hasContext = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasContext" }] : /* istanbul ignore next */ []));
+    hasHelp = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHelp" }] : /* istanbul ignore next */ []));
+    /** Whether the panel has anything to show. */
+    panelHolds = computed(() => this.collapsed().length > 0 ||
+        (this.narrow() && this.hasContext()) ||
+        (this.narrowest() && this.hasHelp()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelHolds" }] : /* istanbul ignore next */ []));
+    searchTakesBar = computed(() => this.narrow() && this.hasSearch() && this.searchOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTakesBar" }] : /* istanbul ignore next */ []));
+    /** The panel, its list and the button that opens it, once they are in the document. */
+    panelNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelNode" }] : /* istanbul ignore next */ []));
+    panelListNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelListNode" }] : /* istanbul ignore next */ []));
+    moreNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "moreNode" }] : /* istanbul ignore next */ []));
+    searchNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchNode" }] : /* istanbul ignore next */ []));
+    searchToggleNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchToggleNode" }] : /* istanbul ignore next */ []));
+    panelStatus = signal('unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelStatus" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is present: open, or on its way out. */
+    panelPresent = computed(() => this.panelStatus() !== 'unmounted', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelPresent" }] : /* istanbul ignore next */ []));
+    presence = createPresence({
+        present: false,
+        onStatusChange: (next) => this.panelStatus.set(next),
+    });
+    dismissable = null;
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        /* The gate measures once on creation and again on every resize where a ResizeObserver exists. */
+        const gates = [
+            createWidthGate(this.host, {
+                at: TOP_NAVIGATION_COLLAPSE_AT.low,
+                onChange: (narrow) => this.underLow.set(narrow),
+            }),
+            createWidthGate(this.host, {
+                at: TOP_NAVIGATION_COLLAPSE_AT.medium,
+                onChange: (narrow) => this.underMedium.set(narrow),
+            }),
+            createWidthGate(this.host, {
+                at: TOP_NAVIGATION_COLLAPSE_AT.high,
+                onChange: (narrow) => this.underHigh.set(narrow),
+            }),
+        ];
+        this.underLow.set(gates[0].narrow());
+        this.underMedium.set(gates[1].narrow());
+        this.underHigh.set(gates[2].narrow());
+        destroyRef.onDestroy(() => {
+            for (const gate of gates)
+                gate.destroy();
+        });
+        /* The folded set is a fact the consumer is told about when it moves. */
+        let reported = null;
+        effect(() => {
+            const collapsed = this.collapsed();
+            const key = collapsed.join('');
+            if (reported === key)
+                return;
+            const first = reported === null;
+            reported = key;
+            if (!first || collapsed.length > 0)
+                this.collapseChange.emit(collapsed);
+        });
+        /* Nothing folded takes the panel with it: a transition, not a state. */
+        let held = this.panelHolds();
+        effect(() => {
+            const holds = this.panelHolds();
+            const before = held;
+            held = holds;
+            if (before && !holds && this.moreOpen())
+                this.setMoreOpen(false, 'resize');
+        });
+        /* The width passing the medium step takes the open search back to its place. */
+        let wasNarrow = this.narrow();
+        effect(() => {
+            const narrow = this.narrow();
+            const before = wasNarrow;
+            wasNarrow = narrow;
+            if (before && !narrow && this.searchOpen())
+                this.setSearchOpen(false, 'resize');
+        });
+        effect(() => this.presence.sync(this.moreOpen()));
+        effect(() => this.presence.setNode(this.panelNode()));
+        effect(() => this.stack());
+        destroyRef.onDestroy(() => {
+            this.presence.destroy();
+            this.dismissable?.destroy();
+            this.dismissable = null;
+        });
+    }
+    /** An item says what it is. */
+    registerItem(value, priority, current) {
+        this.items.update((previous) => {
+            const next = new Map(previous);
+            next.set(value, {
+                current,
+                order: previous.get(value)?.order ?? (this.order += 1),
+                priority,
+            });
+            return next;
+        });
+        return () => {
+            this.items.update((previous) => {
+                if (!previous.has(value))
+                    return previous;
+                const next = new Map(previous);
+                next.delete(value);
+                return next;
+            });
+        };
+    }
+    /** The order an item registered in, so the panel keeps the list's order. */
+    orderOf(value) {
+        return this.items().get(value)?.order ?? Number.MAX_SAFE_INTEGER;
+    }
+    /** Escape and a press outside close the panel; `more` is a branch, so a press on it toggles. */
+    stack() {
+        const open = this.moreOpen();
+        const panel = this.panelNode();
+        const more = this.moreNode();
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        if (panel === null || !open)
+            return;
+        this.dismissable = createDismissableLayer(panel, {
+            escape: true,
+            focusOutside: false,
+            modal: false,
+            outsidePress: true,
+            scrollLock: false,
+            ...(more ? { branches: [more] } : {}),
+            onDismiss: (request) => {
+                const reason = request.reason === 'escape' ? 'escape' : 'outsidePress';
+                this.setMoreOpen(false, reason, request.source);
+                if (reason === 'escape')
+                    more?.focus();
+            },
+        });
+    }
+    /** Asks the panel to open or close. */
+    setMoreOpen(next, reason, source) {
+        const state = createControllable({
+            initial: this.moreOpen(),
+            onRequest: (request) => this.moreOpenChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.moreOpen.set(next);
+    }
+    /** Asks the search to open or close. */
+    setSearchOpen(next, reason, source) {
+        const state = createControllable({
+            initial: this.searchOpen(),
+            onRequest: (request) => this.searchOpenChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.searchOpen.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 the panel, with the reason `programmatic`. */
+    openMore() {
+        this.setMoreOpen(true, 'programmatic');
+    }
+    /** Closes the panel, with the reason `programmatic`. */
+    closeMore() {
+        this.setMoreOpen(false, 'programmatic');
+    }
+    /** Focuses the first control in the bar. */
+    focus() {
+        this.host.querySelector(TOP_NAVIGATION_CONTROL_SELECTOR)?.focus();
+    }
+    /** Opens the search where it is a toggle, and focuses the field either way. */
+    focusSearch() {
+        if (this.narrow() && this.hasSearch() && !this.searchOpen()) {
+            this.setSearchOpen(true, 'programmatic');
+            return;
+        }
+        this.searchNode()?.querySelector('input, [contenteditable]')?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigation, isStandalone: true, selector: "[slTopNavigation]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, moreOpen: { classPropertyName: "moreOpen", publicName: "moreOpen", isSignal: true, isRequired: false, transformFunction: null }, searchOpen: { classPropertyName: "searchOpen", publicName: "searchOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, skipTo: { classPropertyName: "skipTo", publicName: "skipTo", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", moreOpen: "moreOpenChange", searchOpen: "searchOpenChange", valueChangeRequest: "valueChangeRequest", moreOpenChangeRequest: "moreOpenChangeRequest", searchOpenChangeRequest: "searchOpenChangeRequest", collapseChange: "collapseChange" }, host: { attributes: { "data-ui": "top-navigation", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-frame": "resolvedFrame() ? '' : null", "attr.data-search-open": "searchTakesBar() ? '' : null" } }, exportAs: ["slTopNavigation"], ngImport: i0, template: `@if (skipTo()) {
+      <a data-part="skip" [attr.href]="'#' + skipTo()">{{ t('skip') }}</a>
+    }
+    <ng-content />`, isInline: true, styles: ["@layer slotted.components{[data-ui=top-navigation]{--_control-height: var(--slotted-control-height-md, 34px);--_control-padding: var(--slotted-control-padding-inline-md, 13px);--_control-font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_action-gap: var(--slotted-control-gap-sm, 6px);--_row-inset: var(--slotted-app-shell-row-inset, 0px);--_row-height: var(--slotted-app-shell-row-height, var(--slotted-control-height-md, 34px));--_row-font-size: var( --slotted-app-shell-row-font-size, var(--slotted-font-size-sm, .8125rem) );--_row-line-height: var( --slotted-app-shell-row-line-height, var(--slotted-line-height-sm, 1.45) );--_inset: var(--slotted-top-navigation-inset, var(--slotted-space-5, .75rem));--_block-size: var( --slotted-top-navigation-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-5, .75rem) * 2) );--_radius: var(--slotted-top-navigation-radius, var(--slotted-control-radius, 4px));--_name-font-size: var( --slotted-top-navigation-name-font-size, var(--slotted-font-size-md, .875rem) );--_name-max: var(--slotted-top-navigation-name-max, 16rem);--_search-size: var(--slotted-top-navigation-search-size, 28rem);--_search-min: var(--slotted-top-navigation-search-min, 10rem);--_edge: 0px;--_panel-size: var(--slotted-top-navigation-panel-size, 20rem);--_mark-size: calc(var(--_control-height) - var(--slotted-space-2, .25rem) * 2);--_surface: var(--slotted-top-navigation-surface, var(--slotted-surface, Canvas));--_color: var(--slotted-top-navigation-color, var(--slotted-text, CanvasText));--_muted-color: var(--slotted-top-navigation-muted-color, var(--slotted-text-muted, GrayText));--_border-color: var( --slotted-top-navigation-border-color, var(--slotted-border-subtle, ButtonBorder) );--_hover-background: var( --slotted-top-navigation-hover-background, var(--slotted-tone-secondary-subtle-hover) );--_active-background: var( --slotted-top-navigation-active-background, var(--slotted-tone-secondary-subtle-active) );--_current-color: var(--slotted-top-navigation-current-color, var(--slotted-tone-accent-text));--_current-background: var( --slotted-top-navigation-current-background, var(--slotted-tone-accent-surface) );--_current-edge: var( --slotted-top-navigation-current-edge, var(--slotted-current-edge, transparent) );--_count-background: var( --slotted-top-navigation-count-background, var(--slotted-tone-accent-solid) );--_count-color: var(--slotted-top-navigation-count-color, var(--slotted-tone-accent-on-solid));--_panel-surface: var( --slotted-top-navigation-panel-surface, var(--slotted-surface-raised, Canvas) );--_panel-shadow: var(--slotted-top-navigation-panel-shadow, var(--slotted-shadow-md));--_panel-radius: var(--slotted-top-navigation-panel-radius, var(--slotted-radius-lg, 8px));--_disabled-color: var(--slotted-disabled-foreground, GrayText);--_rule-width: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));align-items:center;box-sizing:border-box;color:var(--_color);container-name:slotted-top-navigation;container-type:inline-size;display:flex;font-family:var(--slotted-control-font-family, inherit);font-size:var(--_control-font-size);gap:var(--_gap);line-height:var(--slotted-control-line-height, 1);min-block-size:var(--_control-height);min-inline-size:0;flex:1 1 auto;position:relative}[data-ui=top-navigation][data-frame]{--_edge: var(--_inset);background-color:var(--_surface);border-block-end:var(--_rule-width) solid var(--_border-color);min-block-size:var(--_block-size)}[data-ui=top-navigation][data-size=sm]{--_control-height: var(--slotted-control-height-sm, 30px);--_control-padding: var(--slotted-control-padding-inline-sm, 10px);--_control-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px);--_action-gap: var(--slotted-control-gap-sm, 6px);--_row-height: var(--slotted-control-height-sm, 30px);--_row-font-size: var(--slotted-font-size-xs, .75rem);--_row-line-height: var(--slotted-line-height-xs, 1.4);--_name-font-size: var( --slotted-top-navigation-name-font-size, var(--slotted-font-size-sm, .8125rem) );--_block-size: var( --slotted-top-navigation-block-size, calc(var(--slotted-control-height-md, 34px) + var(--slotted-space-4, .5rem) * 2) )}[data-ui=top-navigation][data-size=lg]{--_control-height: var(--slotted-control-height-lg, 38px);--_control-padding: var(--slotted-control-padding-inline-lg, 16px);--_control-font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px);--_action-gap: var(--slotted-control-gap-md, 8px);--_row-height: var(--slotted-control-height-lg, 38px);--_row-font-size: var(--slotted-font-size-md, .875rem);--_row-line-height: var(--slotted-line-height-md, 1.5);--_name-font-size: var( --slotted-top-navigation-name-font-size, var(--slotted-font-size-lg, 1rem) );--_block-size: var( --slotted-top-navigation-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-6, 1rem) * 2) )}[data-ui=top-navigation]>[data-part=skip]{background-color:var(--_surface);block-size:var(--_control-height);border-radius:var(--_radius);box-sizing:border-box;clip-path:inset(50%);color:var(--_color);display:inline-flex;align-items:center;font-weight:var(--slotted-font-weight-semibold, 600);inset-block-start:50%;inset-inline-start:var(--_edge);padding-inline:var(--_control-padding);position:absolute;text-decoration:none;translate:0 -50%;white-space:nowrap;z-index:1}[data-ui=top-navigation]>[data-part=skip]:focus-visible{clip-path:none;outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=top-navigation][data-part=root]>[data-part=brand]{align-items:center;display:flex;flex:0 1 auto;font-weight:inherit;gap:var(--_gap);padding-inline-start:calc(var(--_edge) + var(--_row-inset))}[data-ui=top-navigation][data-part=root]>[data-part=brand]>[data-part=home]{min-inline-size:var(--_control-height);overflow:visible;white-space:normal}[data-ui=top-navigation] [data-part=home]{align-items:center;border-radius:var(--_radius);color:var(--_color);display:inline-grid;flex:0 1 auto;gap:var(--_gap);grid-template-columns:auto minmax(0,1fr);min-block-size:var(--_control-height);min-inline-size:var(--_control-height);text-decoration:none}[data-ui=top-navigation] [data-part=home]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=top-navigation] [data-part=mark]{align-items:center;block-size:var(--_control-height);display:inline-flex;flex:0 0 auto;inline-size:var(--_control-height);justify-content:center}[data-ui=top-navigation] [data-part=mark]>:is(svg,img){block-size:var(--_mark-size);inline-size:var(--_mark-size)}[data-ui=top-navigation] [data-part=name]{font-size:var(--_name-font-size);font-weight:var(--slotted-font-weight-semibold, 600);max-inline-size:var(--_name-max);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=top-navigation] [data-part=context]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_action-gap)}[data-ui=top-navigation] [data-part=nav]{--_control-height: inherit;--_control-padding: inherit;--_control-font-size: inherit;--_icon-size: inherit;--_gap: inherit;--_radius: inherit;--_color: inherit;--_muted-color: inherit;--_hover-background: inherit;--_active-background: inherit;--_current-color: inherit;--_current-background: inherit;--_current-edge: inherit;--_disabled-color: inherit;--_duration: inherit;--_easing: inherit;display:flex;flex:0 0 auto}[data-ui=top-navigation] [data-part=list]{align-items:center;display:flex;gap:var(--slotted-space-1, .125rem);list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui=top-navigation] [data-part=item]{display:flex;flex:0 0 auto;min-inline-size:0}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>:is([data-part=link],[data-part=trigger]){align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_action-gap);margin:0;min-block-size:var(--_control-height);padding-block:0;padding-inline:var(--_control-padding);text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing);white-space:nowrap}[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=link]:not([data-current],[aria-current=page]):hover,[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=trigger]:enabled:hover{background-color:var(--_hover-background);color:var(--_color)}[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=link]:not([data-current],[aria-current=page]):active,[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=trigger]:enabled:active{background-color:var(--_active-background);color:var(--_color);transition-duration:var(--slotted-duration-instant)}[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=trigger][data-open]:enabled{background-color:var(--_hover-background);color:var(--_color)}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=link]:is([data-current],[aria-current=page]){background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_rule-width) var(--_current-edge);color:var(--_current-color);font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item][data-disabled]>[data-part=link],[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=trigger]:disabled{color:var(--_disabled-color);cursor:not-allowed}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>: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:var(--slotted-focus-ring-offset, 2px)}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=trigger]>[data-part=indicator]{--slotted-icon-size: var(--_icon-size);display:flex;flex:0 0 auto;margin-inline-end:calc(-1 * var(--slotted-space-2, .25rem))}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=trigger]>[data-part=indicator]>[data-ui=icon]{transition:rotate var(--slotted-duration-medium) var(--_easing)}[data-ui=top-navigation] [data-part=trigger][data-open]>[data-part=indicator]>[data-ui=icon]{rotate:.5turn}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=help],[data-part=notifications],[data-part=account],[data-part=action]){align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:var(--_muted-color);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_action-gap);justify-content:center;margin:0;min-block-size:var(--_control-height);min-inline-size:var(--_control-height);padding:0;position:relative;text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing);white-space:nowrap}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=help],[data-part=notifications]){--slotted-icon-size: var(--_icon-size)}[data-ui=top-navigation] [data-part=action]{--slotted-icon-size: var(--_icon-size)}[data-ui=top-navigation] [data-part=action]>:not([data-part=count]){block-size:var(--_icon-size);flex:0 0 auto;font-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=notifications],[data-part=account]):enabled:hover,[data-ui=top-navigation] a:is([data-part=help],[data-part=action]):not([data-disabled]):hover,[data-ui=top-navigation] button:is([data-part=help],[data-part=action]):enabled:hover{background-color:var(--_hover-background);color:var(--_color)}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=notifications],[data-part=account]):enabled:active,[data-ui=top-navigation] a:is([data-part=help],[data-part=action]):not([data-disabled]):active,[data-ui=top-navigation] button:is([data-part=help],[data-part=action]):enabled:active{background-color:var(--_active-background);color:var(--_color);transition-duration:var(--slotted-duration-instant)}[data-ui=top-navigation] :is([data-part=more],[data-part=notifications],[data-part=account],[data-part=help],[data-part=action])[data-open]{background-color:var(--_hover-background);color:var(--_color)}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=help],[data-part=notifications],[data-part=account],[data-part=action]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=notifications],[data-part=account]):disabled,[data-ui=top-navigation] button:is([data-part=help],[data-part=action]):disabled{color:var(--_disabled-color);cursor:not-allowed}[data-ui=top-navigation] [data-part=more][data-current]{color:var(--_current-color)}[data-ui=top-navigation] [data-part=account]{border-radius:var(--slotted-radius-full, 9999px);gap:var(--slotted-space-3, .375rem);padding:var(--slotted-space-2, .25rem)}[data-ui=top-navigation] [data-part=account]>:not([data-ui=avatar]){padding-inline-end:var(--slotted-space-3, .375rem)}[data-ui=top-navigation] [data-part=count]{--_count-font: var(--slotted-control-font-size-sm, 12px);--_count-size: calc(var(--_count-font) * var(--slotted-line-height-xs, 1.4));--_count-inset: calc((var(--_control-height) - var(--_icon-size)) / 2);align-content:center;background-color:var(--_count-background);block-size:var(--_count-size);border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thick, 2px) var(--_surface);box-sizing:border-box;color:var(--_count-color);display:block;font-size:var(--_count-font);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);inset-block-start:calc(var(--_count-inset) - var(--_count-size) / 2);inset-inline-start:calc(100% - var(--_count-inset) - var(--_count-size) / 2);line-height:1;min-inline-size:var(--_count-size);padding-inline:var(--slotted-space-2, .25rem);pointer-events:none;position:absolute;text-align:center;white-space:nowrap;z-index:1}@supports (text-box: trim-both cap alphabetic){[data-ui=top-navigation] [data-part=count]{text-box:trim-both cap alphabetic}}[data-ui=top-navigation] [data-part=search]{align-items:center;display:flex;flex:1 10000 var(--_search-size);gap:var(--_action-gap);margin-inline:0 auto;max-inline-size:var(--_search-size);min-inline-size:var(--_search-min)}[data-ui=top-navigation] [data-part=search]>:not([data-part=search-close]){flex:1 1 auto;min-inline-size:0}[data-ui=top-navigation] [data-part=search-toggle],[data-ui=top-navigation] [data-part=search-close]{display:none}[data-ui=top-navigation] [data-part=actions]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_action-gap);margin-inline-start:auto;padding-inline-end:calc(var(--_edge) + var(--_row-inset))}[data-ui=top-navigation] [data-part=item]:has(>[data-part=more]){display:none}[data-ui=top-navigation] [data-part=item]:has(>[data-part=more][data-overflow]){display:flex}[data-ui=top-navigation] [data-part=panel]{--_enter-distance: var(--slotted-space-2, .25rem);background-color:var(--_panel-surface);border:var(--_rule-width) solid var(--_border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow);box-sizing:border-box;color:var(--_color);display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);inline-size:var(--_panel-size);inset-block-start:calc(100% + var(--slotted-space-2, .25rem));inset-inline-end:var(--_edge);max-inline-size:100%;opacity:0;padding:var(--slotted-space-2, .25rem);position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit),visibility var(--slotted-duration-short) step-end;translate:0 calc(-1 * var(--_enter-distance));visibility:hidden;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0))}[data-ui=top-navigation] [data-part=panel][data-open]{opacity:1;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter),visibility var(--slotted-duration-medium) step-start;translate:0 0;visibility:visible}[data-ui=top-navigation] [data-part=panel-list]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);list-style:none;margin:0;padding:0}[data-ui=top-navigation] [data-part=panel-list]:empty{display:none}[data-ui=top-navigation] [data-part=panel] [data-part=item]{display:flex;flex:0 0 auto}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]>:is([data-part=link],[data-part=trigger]),[data-ui=top-navigation] [data-part=panel]>[data-part=help]{flex:1 1 auto;font-size:var(--_row-font-size);justify-content:flex-start;line-height:var(--_row-line-height);min-block-size:var(--_row-height);padding-inline:var(--_control-padding);white-space:normal}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]>[data-part=trigger]>[data-part=indicator]{margin-inline-end:0;margin-inline-start:auto}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]:has(>[data-part=content]){align-items:stretch;flex-direction:column}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]>[data-part=content]{display:grid;gap:var(--slotted-space-1, .125rem);padding-block-end:var(--slotted-space-2, .25rem);padding-inline-start:var(--_control-padding)}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]>[data-part=content][hidden]{display:none}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=links]{display:grid;gap:var(--slotted-space-1, .125rem);list-style:none;margin:0;padding:0}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]{align-content:center;border-radius:var(--_radius);color:var(--_color);column-gap:var(--_action-gap);display:grid;font-size:var(--_row-font-size);grid-template-columns:auto minmax(0,1fr);line-height:var(--_row-line-height);min-block-size:var(--_row-height);padding-inline:var(--_control-padding);text-decoration:none;transition:background-color var(--_duration) var(--_easing)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):hover{background-color:var(--_hover-background)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):active{background-color:var(--_active-background);transition-duration:var(--slotted-duration-instant)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:is([data-current],[aria-current=page]){background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_rule-width) var(--_current-edge);color:var(--_current-color)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link][data-disabled]{color:var(--_disabled-color);cursor:not-allowed}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:not(:has(>[data-part=icon]))>*{grid-column:1 / -1}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=icon]{--slotted-icon-size: var(--_icon-size);color:var(--_muted-color);display:flex;grid-row:1 / span 2}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=description]{color:var(--_muted-color);font-size:var(--slotted-font-size-xs, .75rem);grid-column:2}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=group-label]{color:var(--_muted-color);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_control-padding)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=footer]{align-items:center;border-block-start:var(--_rule-width) solid var(--_border-color);display:flex;gap:var(--_action-gap);justify-content:space-between;padding-block-start:var(--slotted-space-2, .25rem);padding-inline:var(--_control-padding)}[data-ui=top-navigation] [data-part=actions]>[data-part=help]{gap:var(--_control-height);inline-size:var(--_control-height);justify-content:flex-start;overflow:hidden;padding-inline-start:calc((var(--_control-height) - var(--_icon-size)) / 2)}[data-ui=top-navigation] [data-part=panel]>[data-part=help]{gap:var(--_gap)}[data-ui=top-navigation] [data-part=panel]>[data-part=context]{padding:var(--slotted-space-2, .25rem) var(--slotted-space-3, .375rem)}[data-ui=top-navigation] [data-part=panel]>[data-part=context]{order:-1}[data-ui=top-navigation] [data-part=panel]>[data-part=help]{order:1}[data-ui=top-navigation] [data-part=panel]:has(>[data-part=context])>[data-part=panel-list]:not(:empty),[data-ui=top-navigation] [data-part=panel]:has(>[data-part=panel-list]:not(:empty),>[data-part=context])>[data-part=help]{border-block-start:var(--_rule-width) solid var(--_border-color);padding-block-start:var(--slotted-space-2, .25rem)}@container slotted-top-navigation (inline-size < 1024px){[data-ui=top-navigation] [data-part=list]>[data-part=item][data-priority=low]{display:none}[data-ui=top-navigation] [data-part=list]:has(>[data-part=item][data-priority=low])>[data-part=item]:has(>[data-part=more]){display:flex}}@container slotted-top-navigation (inline-size < 600px){[data-ui=top-navigation] [data-part=list]>[data-part=item]:not([data-priority=low]):not([data-priority=high]):not(:has(>[data-part=more])){display:none}[data-ui=top-navigation] [data-part=list]:has(>[data-part=item]:not([data-priority=low]):not([data-priority=high]):not(:has(>[data-part=more])))>[data-part=item]:has(>[data-part=more]){display:flex}[data-ui=top-navigation]:not([data-search-open]) [data-part=search]{display:none}[data-ui=top-navigation]:not([data-search-open]) [data-part=search-toggle]{display:inline-flex}[data-ui=top-navigation][data-search-open] [data-part=search]{max-inline-size:none;padding-inline:var(--_edge)}[data-ui=top-navigation][data-search-open] [data-part=search-close]{display:inline-flex}[data-ui=top-navigation][data-search-open]>:is([data-part=brand],[data-part=context],[data-part=nav],[data-part=actions]){display:none}[data-ui=top-navigation] [data-part=account]>:not([data-ui=avatar]){display:none}[data-ui=top-navigation]>[data-part=context]{display:none}[data-ui=top-navigation]:has(>[data-part=context]) [data-part=list]>[data-part=item]:has(>[data-part=more]){display:flex}}@container slotted-top-navigation (inline-size < 480px){[data-ui=top-navigation]{--_gap: var(--slotted-space-2, .25rem);--_action-gap: var(--slotted-space-2, .25rem)}[data-ui=top-navigation] [data-part=list]>[data-part=item][data-priority=high]{display:none}[data-ui=top-navigation] [data-part=list]:has(>[data-part=item][data-priority=high])>[data-part=item]:has(>[data-part=more]){display:flex}[data-ui=top-navigation] [data-part=count]{inset-inline-end:calc(var(--slotted-border-width-thick, 2px) - var(--_action-gap));inset-inline-start:auto}[data-ui=top-navigation] [data-part=name]{clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=top-navigation] [data-part=home]{grid-template-columns:auto}[data-ui=top-navigation] [data-part=actions]>[data-part=help]{display:none}[data-ui=top-navigation]:has([data-part=actions]>[data-part=help]) [data-part=list]>[data-part=item]:has(>[data-part=more]){display:flex}[data-ui=top-navigation] [data-part=panel]{inline-size:auto;inset-inline:var(--_edge)}}@media(prefers-reduced-motion:reduce){[data-ui=top-navigation] [data-part=panel],[data-ui=top-navigation] [data-part=panel][data-open]{translate:0 0}}@media(forced-colors:active){[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=link]:is([data-current],[aria-current=page]){background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=top-navigation] [data-part=count]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item][data-disabled]>[data-part=link],[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=trigger]:disabled{color:GrayText}[data-ui=top-navigation][data-frame],[data-ui=top-navigation] [data-part=panel]{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: SlTopNavigation, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTopNavigation]', standalone: true, exportAs: 'slTopNavigation', template: `@if (skipTo()) {
+      <a data-part="skip" [attr.href]="'#' + skipTo()">{{ t('skip') }}</a>
+    }
+    <ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'top-navigation',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-frame]': "resolvedFrame() ? '' : null",
+                        '[attr.data-search-open]': "searchTakesBar() ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=top-navigation]{--_control-height: var(--slotted-control-height-md, 34px);--_control-padding: var(--slotted-control-padding-inline-md, 13px);--_control-font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_action-gap: var(--slotted-control-gap-sm, 6px);--_row-inset: var(--slotted-app-shell-row-inset, 0px);--_row-height: var(--slotted-app-shell-row-height, var(--slotted-control-height-md, 34px));--_row-font-size: var( --slotted-app-shell-row-font-size, var(--slotted-font-size-sm, .8125rem) );--_row-line-height: var( --slotted-app-shell-row-line-height, var(--slotted-line-height-sm, 1.45) );--_inset: var(--slotted-top-navigation-inset, var(--slotted-space-5, .75rem));--_block-size: var( --slotted-top-navigation-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-5, .75rem) * 2) );--_radius: var(--slotted-top-navigation-radius, var(--slotted-control-radius, 4px));--_name-font-size: var( --slotted-top-navigation-name-font-size, var(--slotted-font-size-md, .875rem) );--_name-max: var(--slotted-top-navigation-name-max, 16rem);--_search-size: var(--slotted-top-navigation-search-size, 28rem);--_search-min: var(--slotted-top-navigation-search-min, 10rem);--_edge: 0px;--_panel-size: var(--slotted-top-navigation-panel-size, 20rem);--_mark-size: calc(var(--_control-height) - var(--slotted-space-2, .25rem) * 2);--_surface: var(--slotted-top-navigation-surface, var(--slotted-surface, Canvas));--_color: var(--slotted-top-navigation-color, var(--slotted-text, CanvasText));--_muted-color: var(--slotted-top-navigation-muted-color, var(--slotted-text-muted, GrayText));--_border-color: var( --slotted-top-navigation-border-color, var(--slotted-border-subtle, ButtonBorder) );--_hover-background: var( --slotted-top-navigation-hover-background, var(--slotted-tone-secondary-subtle-hover) );--_active-background: var( --slotted-top-navigation-active-background, var(--slotted-tone-secondary-subtle-active) );--_current-color: var(--slotted-top-navigation-current-color, var(--slotted-tone-accent-text));--_current-background: var( --slotted-top-navigation-current-background, var(--slotted-tone-accent-surface) );--_current-edge: var( --slotted-top-navigation-current-edge, var(--slotted-current-edge, transparent) );--_count-background: var( --slotted-top-navigation-count-background, var(--slotted-tone-accent-solid) );--_count-color: var(--slotted-top-navigation-count-color, var(--slotted-tone-accent-on-solid));--_panel-surface: var( --slotted-top-navigation-panel-surface, var(--slotted-surface-raised, Canvas) );--_panel-shadow: var(--slotted-top-navigation-panel-shadow, var(--slotted-shadow-md));--_panel-radius: var(--slotted-top-navigation-panel-radius, var(--slotted-radius-lg, 8px));--_disabled-color: var(--slotted-disabled-foreground, GrayText);--_rule-width: var(--slotted-border-width-thin, 1px);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));align-items:center;box-sizing:border-box;color:var(--_color);container-name:slotted-top-navigation;container-type:inline-size;display:flex;font-family:var(--slotted-control-font-family, inherit);font-size:var(--_control-font-size);gap:var(--_gap);line-height:var(--slotted-control-line-height, 1);min-block-size:var(--_control-height);min-inline-size:0;flex:1 1 auto;position:relative}[data-ui=top-navigation][data-frame]{--_edge: var(--_inset);background-color:var(--_surface);border-block-end:var(--_rule-width) solid var(--_border-color);min-block-size:var(--_block-size)}[data-ui=top-navigation][data-size=sm]{--_control-height: var(--slotted-control-height-sm, 30px);--_control-padding: var(--slotted-control-padding-inline-sm, 10px);--_control-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px);--_action-gap: var(--slotted-control-gap-sm, 6px);--_row-height: var(--slotted-control-height-sm, 30px);--_row-font-size: var(--slotted-font-size-xs, .75rem);--_row-line-height: var(--slotted-line-height-xs, 1.4);--_name-font-size: var( --slotted-top-navigation-name-font-size, var(--slotted-font-size-sm, .8125rem) );--_block-size: var( --slotted-top-navigation-block-size, calc(var(--slotted-control-height-md, 34px) + var(--slotted-space-4, .5rem) * 2) )}[data-ui=top-navigation][data-size=lg]{--_control-height: var(--slotted-control-height-lg, 38px);--_control-padding: var(--slotted-control-padding-inline-lg, 16px);--_control-font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px);--_action-gap: var(--slotted-control-gap-md, 8px);--_row-height: var(--slotted-control-height-lg, 38px);--_row-font-size: var(--slotted-font-size-md, .875rem);--_row-line-height: var(--slotted-line-height-md, 1.5);--_name-font-size: var( --slotted-top-navigation-name-font-size, var(--slotted-font-size-lg, 1rem) );--_block-size: var( --slotted-top-navigation-block-size, calc(var(--slotted-control-height-lg, 38px) + var(--slotted-space-6, 1rem) * 2) )}[data-ui=top-navigation]>[data-part=skip]{background-color:var(--_surface);block-size:var(--_control-height);border-radius:var(--_radius);box-sizing:border-box;clip-path:inset(50%);color:var(--_color);display:inline-flex;align-items:center;font-weight:var(--slotted-font-weight-semibold, 600);inset-block-start:50%;inset-inline-start:var(--_edge);padding-inline:var(--_control-padding);position:absolute;text-decoration:none;translate:0 -50%;white-space:nowrap;z-index:1}[data-ui=top-navigation]>[data-part=skip]:focus-visible{clip-path:none;outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=top-navigation][data-part=root]>[data-part=brand]{align-items:center;display:flex;flex:0 1 auto;font-weight:inherit;gap:var(--_gap);padding-inline-start:calc(var(--_edge) + var(--_row-inset))}[data-ui=top-navigation][data-part=root]>[data-part=brand]>[data-part=home]{min-inline-size:var(--_control-height);overflow:visible;white-space:normal}[data-ui=top-navigation] [data-part=home]{align-items:center;border-radius:var(--_radius);color:var(--_color);display:inline-grid;flex:0 1 auto;gap:var(--_gap);grid-template-columns:auto minmax(0,1fr);min-block-size:var(--_control-height);min-inline-size:var(--_control-height);text-decoration:none}[data-ui=top-navigation] [data-part=home]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=top-navigation] [data-part=mark]{align-items:center;block-size:var(--_control-height);display:inline-flex;flex:0 0 auto;inline-size:var(--_control-height);justify-content:center}[data-ui=top-navigation] [data-part=mark]>:is(svg,img){block-size:var(--_mark-size);inline-size:var(--_mark-size)}[data-ui=top-navigation] [data-part=name]{font-size:var(--_name-font-size);font-weight:var(--slotted-font-weight-semibold, 600);max-inline-size:var(--_name-max);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=top-navigation] [data-part=context]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_action-gap)}[data-ui=top-navigation] [data-part=nav]{--_control-height: inherit;--_control-padding: inherit;--_control-font-size: inherit;--_icon-size: inherit;--_gap: inherit;--_radius: inherit;--_color: inherit;--_muted-color: inherit;--_hover-background: inherit;--_active-background: inherit;--_current-color: inherit;--_current-background: inherit;--_current-edge: inherit;--_disabled-color: inherit;--_duration: inherit;--_easing: inherit;display:flex;flex:0 0 auto}[data-ui=top-navigation] [data-part=list]{align-items:center;display:flex;gap:var(--slotted-space-1, .125rem);list-style:none;margin:0;min-inline-size:0;padding:0}[data-ui=top-navigation] [data-part=item]{display:flex;flex:0 0 auto;min-inline-size:0}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>:is([data-part=link],[data-part=trigger]){align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_action-gap);margin:0;min-block-size:var(--_control-height);padding-block:0;padding-inline:var(--_control-padding);text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing);white-space:nowrap}[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=link]:not([data-current],[aria-current=page]):hover,[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=trigger]:enabled:hover{background-color:var(--_hover-background);color:var(--_color)}[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=link]:not([data-current],[aria-current=page]):active,[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=trigger]:enabled:active{background-color:var(--_active-background);color:var(--_color);transition-duration:var(--slotted-duration-instant)}[data-ui=top-navigation] [data-part=item]:not([data-disabled])>[data-part=trigger][data-open]:enabled{background-color:var(--_hover-background);color:var(--_color)}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=link]:is([data-current],[aria-current=page]){background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_rule-width) var(--_current-edge);color:var(--_current-color);font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item][data-disabled]>[data-part=link],[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=trigger]:disabled{color:var(--_disabled-color);cursor:not-allowed}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>: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:var(--slotted-focus-ring-offset, 2px)}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=trigger]>[data-part=indicator]{--slotted-icon-size: var(--_icon-size);display:flex;flex:0 0 auto;margin-inline-end:calc(-1 * var(--slotted-space-2, .25rem))}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=trigger]>[data-part=indicator]>[data-ui=icon]{transition:rotate var(--slotted-duration-medium) var(--_easing)}[data-ui=top-navigation] [data-part=trigger][data-open]>[data-part=indicator]>[data-ui=icon]{rotate:.5turn}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=help],[data-part=notifications],[data-part=account],[data-part=action]){align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:var(--_muted-color);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_action-gap);justify-content:center;margin:0;min-block-size:var(--_control-height);min-inline-size:var(--_control-height);padding:0;position:relative;text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing);white-space:nowrap}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=help],[data-part=notifications]){--slotted-icon-size: var(--_icon-size)}[data-ui=top-navigation] [data-part=action]{--slotted-icon-size: var(--_icon-size)}[data-ui=top-navigation] [data-part=action]>:not([data-part=count]){block-size:var(--_icon-size);flex:0 0 auto;font-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=notifications],[data-part=account]):enabled:hover,[data-ui=top-navigation] a:is([data-part=help],[data-part=action]):not([data-disabled]):hover,[data-ui=top-navigation] button:is([data-part=help],[data-part=action]):enabled:hover{background-color:var(--_hover-background);color:var(--_color)}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=notifications],[data-part=account]):enabled:active,[data-ui=top-navigation] a:is([data-part=help],[data-part=action]):not([data-disabled]):active,[data-ui=top-navigation] button:is([data-part=help],[data-part=action]):enabled:active{background-color:var(--_active-background);color:var(--_color);transition-duration:var(--slotted-duration-instant)}[data-ui=top-navigation] :is([data-part=more],[data-part=notifications],[data-part=account],[data-part=help],[data-part=action])[data-open]{background-color:var(--_hover-background);color:var(--_color)}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=help],[data-part=notifications],[data-part=account],[data-part=action]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=top-navigation] :is([data-part=more],[data-part=search-toggle],[data-part=search-close],[data-part=notifications],[data-part=account]):disabled,[data-ui=top-navigation] button:is([data-part=help],[data-part=action]):disabled{color:var(--_disabled-color);cursor:not-allowed}[data-ui=top-navigation] [data-part=more][data-current]{color:var(--_current-color)}[data-ui=top-navigation] [data-part=account]{border-radius:var(--slotted-radius-full, 9999px);gap:var(--slotted-space-3, .375rem);padding:var(--slotted-space-2, .25rem)}[data-ui=top-navigation] [data-part=account]>:not([data-ui=avatar]){padding-inline-end:var(--slotted-space-3, .375rem)}[data-ui=top-navigation] [data-part=count]{--_count-font: var(--slotted-control-font-size-sm, 12px);--_count-size: calc(var(--_count-font) * var(--slotted-line-height-xs, 1.4));--_count-inset: calc((var(--_control-height) - var(--_icon-size)) / 2);align-content:center;background-color:var(--_count-background);block-size:var(--_count-size);border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thick, 2px) var(--_surface);box-sizing:border-box;color:var(--_count-color);display:block;font-size:var(--_count-font);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);inset-block-start:calc(var(--_count-inset) - var(--_count-size) / 2);inset-inline-start:calc(100% - var(--_count-inset) - var(--_count-size) / 2);line-height:1;min-inline-size:var(--_count-size);padding-inline:var(--slotted-space-2, .25rem);pointer-events:none;position:absolute;text-align:center;white-space:nowrap;z-index:1}@supports (text-box: trim-both cap alphabetic){[data-ui=top-navigation] [data-part=count]{text-box:trim-both cap alphabetic}}[data-ui=top-navigation] [data-part=search]{align-items:center;display:flex;flex:1 10000 var(--_search-size);gap:var(--_action-gap);margin-inline:0 auto;max-inline-size:var(--_search-size);min-inline-size:var(--_search-min)}[data-ui=top-navigation] [data-part=search]>:not([data-part=search-close]){flex:1 1 auto;min-inline-size:0}[data-ui=top-navigation] [data-part=search-toggle],[data-ui=top-navigation] [data-part=search-close]{display:none}[data-ui=top-navigation] [data-part=actions]{align-items:center;display:flex;flex:0 0 auto;gap:var(--_action-gap);margin-inline-start:auto;padding-inline-end:calc(var(--_edge) + var(--_row-inset))}[data-ui=top-navigation] [data-part=item]:has(>[data-part=more]){display:none}[data-ui=top-navigation] [data-part=item]:has(>[data-part=more][data-overflow]){display:flex}[data-ui=top-navigation] [data-part=panel]{--_enter-distance: var(--slotted-space-2, .25rem);background-color:var(--_panel-surface);border:var(--_rule-width) solid var(--_border-color);border-radius:var(--_panel-radius);box-shadow:var(--_panel-shadow);box-sizing:border-box;color:var(--_color);display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);inline-size:var(--_panel-size);inset-block-start:calc(100% + var(--slotted-space-2, .25rem));inset-inline-end:var(--_edge);max-inline-size:100%;opacity:0;padding:var(--slotted-space-2, .25rem);position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit),visibility var(--slotted-duration-short) step-end;translate:0 calc(-1 * var(--_enter-distance));visibility:hidden;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0))}[data-ui=top-navigation] [data-part=panel][data-open]{opacity:1;transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter),visibility var(--slotted-duration-medium) step-start;translate:0 0;visibility:visible}[data-ui=top-navigation] [data-part=panel-list]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);list-style:none;margin:0;padding:0}[data-ui=top-navigation] [data-part=panel-list]:empty{display:none}[data-ui=top-navigation] [data-part=panel] [data-part=item]{display:flex;flex:0 0 auto}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]>:is([data-part=link],[data-part=trigger]),[data-ui=top-navigation] [data-part=panel]>[data-part=help]{flex:1 1 auto;font-size:var(--_row-font-size);justify-content:flex-start;line-height:var(--_row-line-height);min-block-size:var(--_row-height);padding-inline:var(--_control-padding);white-space:normal}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]>[data-part=trigger]>[data-part=indicator]{margin-inline-end:0;margin-inline-start:auto}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]:has(>[data-part=content]){align-items:stretch;flex-direction:column}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]>[data-part=content]{display:grid;gap:var(--slotted-space-1, .125rem);padding-block-end:var(--slotted-space-2, .25rem);padding-inline-start:var(--_control-padding)}[data-ui=top-navigation] [data-part=panel-list]>[data-part=item]>[data-part=content][hidden]{display:none}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=links]{display:grid;gap:var(--slotted-space-1, .125rem);list-style:none;margin:0;padding:0}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]{align-content:center;border-radius:var(--_radius);color:var(--_color);column-gap:var(--_action-gap);display:grid;font-size:var(--_row-font-size);grid-template-columns:auto minmax(0,1fr);line-height:var(--_row-line-height);min-block-size:var(--_row-height);padding-inline:var(--_control-padding);text-decoration:none;transition:background-color var(--_duration) var(--_easing)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):hover{background-color:var(--_hover-background)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):active{background-color:var(--_active-background);transition-duration:var(--slotted-duration-instant)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:is([data-current],[aria-current=page]){background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_rule-width) var(--_current-edge);color:var(--_current-color)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link][data-disabled]{color:var(--_disabled-color);cursor:not-allowed}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=link]:not(:has(>[data-part=icon]))>*{grid-column:1 / -1}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=icon]{--slotted-icon-size: var(--_icon-size);color:var(--_muted-color);display:flex;grid-row:1 / span 2}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=description]{color:var(--_muted-color);font-size:var(--slotted-font-size-xs, .75rem);grid-column:2}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=group-label]{color:var(--_muted-color);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-semibold, 600);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--_control-padding)}[data-ui=top-navigation] [data-part=panel-list] [data-part=content] [data-part=footer]{align-items:center;border-block-start:var(--_rule-width) solid var(--_border-color);display:flex;gap:var(--_action-gap);justify-content:space-between;padding-block-start:var(--slotted-space-2, .25rem);padding-inline:var(--_control-padding)}[data-ui=top-navigation] [data-part=actions]>[data-part=help]{gap:var(--_control-height);inline-size:var(--_control-height);justify-content:flex-start;overflow:hidden;padding-inline-start:calc((var(--_control-height) - var(--_icon-size)) / 2)}[data-ui=top-navigation] [data-part=panel]>[data-part=help]{gap:var(--_gap)}[data-ui=top-navigation] [data-part=panel]>[data-part=context]{padding:var(--slotted-space-2, .25rem) var(--slotted-space-3, .375rem)}[data-ui=top-navigation] [data-part=panel]>[data-part=context]{order:-1}[data-ui=top-navigation] [data-part=panel]>[data-part=help]{order:1}[data-ui=top-navigation] [data-part=panel]:has(>[data-part=context])>[data-part=panel-list]:not(:empty),[data-ui=top-navigation] [data-part=panel]:has(>[data-part=panel-list]:not(:empty),>[data-part=context])>[data-part=help]{border-block-start:var(--_rule-width) solid var(--_border-color);padding-block-start:var(--slotted-space-2, .25rem)}@container slotted-top-navigation (inline-size < 1024px){[data-ui=top-navigation] [data-part=list]>[data-part=item][data-priority=low]{display:none}[data-ui=top-navigation] [data-part=list]:has(>[data-part=item][data-priority=low])>[data-part=item]:has(>[data-part=more]){display:flex}}@container slotted-top-navigation (inline-size < 600px){[data-ui=top-navigation] [data-part=list]>[data-part=item]:not([data-priority=low]):not([data-priority=high]):not(:has(>[data-part=more])){display:none}[data-ui=top-navigation] [data-part=list]:has(>[data-part=item]:not([data-priority=low]):not([data-priority=high]):not(:has(>[data-part=more])))>[data-part=item]:has(>[data-part=more]){display:flex}[data-ui=top-navigation]:not([data-search-open]) [data-part=search]{display:none}[data-ui=top-navigation]:not([data-search-open]) [data-part=search-toggle]{display:inline-flex}[data-ui=top-navigation][data-search-open] [data-part=search]{max-inline-size:none;padding-inline:var(--_edge)}[data-ui=top-navigation][data-search-open] [data-part=search-close]{display:inline-flex}[data-ui=top-navigation][data-search-open]>:is([data-part=brand],[data-part=context],[data-part=nav],[data-part=actions]){display:none}[data-ui=top-navigation] [data-part=account]>:not([data-ui=avatar]){display:none}[data-ui=top-navigation]>[data-part=context]{display:none}[data-ui=top-navigation]:has(>[data-part=context]) [data-part=list]>[data-part=item]:has(>[data-part=more]){display:flex}}@container slotted-top-navigation (inline-size < 480px){[data-ui=top-navigation]{--_gap: var(--slotted-space-2, .25rem);--_action-gap: var(--slotted-space-2, .25rem)}[data-ui=top-navigation] [data-part=list]>[data-part=item][data-priority=high]{display:none}[data-ui=top-navigation] [data-part=list]:has(>[data-part=item][data-priority=high])>[data-part=item]:has(>[data-part=more]){display:flex}[data-ui=top-navigation] [data-part=count]{inset-inline-end:calc(var(--slotted-border-width-thick, 2px) - var(--_action-gap));inset-inline-start:auto}[data-ui=top-navigation] [data-part=name]{clip-path:inset(50%);inline-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}[data-ui=top-navigation] [data-part=home]{grid-template-columns:auto}[data-ui=top-navigation] [data-part=actions]>[data-part=help]{display:none}[data-ui=top-navigation]:has([data-part=actions]>[data-part=help]) [data-part=list]>[data-part=item]:has(>[data-part=more]){display:flex}[data-ui=top-navigation] [data-part=panel]{inline-size:auto;inset-inline:var(--_edge)}}@media(prefers-reduced-motion:reduce){[data-ui=top-navigation] [data-part=panel],[data-ui=top-navigation] [data-part=panel][data-open]{translate:0 0}}@media(forced-colors:active){[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=link]:is([data-current],[aria-current=page]){background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=top-navigation] [data-part=count]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item][data-disabled]>[data-part=link],[data-ui=top-navigation] :is([data-part=nav]>[data-part=list],[data-part=panel-list])>[data-part=item]>[data-part=trigger]:disabled{color:GrayText}[data-ui=top-navigation][data-frame],[data-ui=top-navigation] [data-part=panel]{border-color:CanvasText}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], moreOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreOpen", required: false }] }, { type: i0.Output, args: ["moreOpenChange"] }], searchOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchOpen", required: false }] }, { type: i0.Output, args: ["searchOpenChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], frame: [{ type: i0.Input, args: [{ isSignal: true, alias: "frame", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], skipTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipTo", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], moreOpenChangeRequest: [{ type: i0.Output, args: ["moreOpenChangeRequest"] }], searchOpenChangeRequest: [{ type: i0.Output, args: ["searchOpenChangeRequest"] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }] } });
+
+/** A click synthesised by the keyboard reports no detail; a real one reports the count. */
+function activationReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * What a part that moves into the panel needs: where it came from, so it can
+ * go back when the panel has left. The move is the DOM's own `insertBefore`,
+ * the way the CDK's `DomPortalOutlet` moves a template's nodes; the element
+ * stays the same instance and every directive on it stays alive.
+ */
+class Home {
+    native;
+    home = null;
+    constructor(native) {
+        this.native = native;
+    }
+    moveTo(parent, before) {
+        if (this.home === null) {
+            this.home = { parent: this.native.parentNode, next: this.native.nextSibling };
+        }
+        if (this.native.parentNode === parent && this.native.nextSibling === before)
+            return;
+        parent.insertBefore(this.native, before);
+    }
+    moveBack() {
+        if (this.home === null)
+            return;
+        const { parent, next } = this.home;
+        this.home = null;
+        /* On teardown the sibling may already be gone from the parent; the end of it is then the place. */
+        parent.insertBefore(this.native, next !== null && next.parentNode === parent ? next : null);
+    }
+}
+/* ── The hint on a control with no words ────────────────────────────────── */
+/**
+ * What every icon-only control shares: the tooltip that repeats its name.
+ * `SlTooltip` is a host directive holding the state and the delays; the
+ * control dispatches the pointer and the focus to it while a hint is due.
+ */
+class TopNavigationControl {
+    navigation = inject(SlTopNavigation);
+    tooltip = inject(SlTooltip);
+    native = inject(ElementRef).nativeElement;
+    /** The name the consumer wrote, kept over the family's own. */
+    writtenLabel = inject(new HostAttributeToken('aria-label'), {
+        optional: true,
+    });
+    /** Whether the hint is due at all: not while the words are visible. */
+    hint = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    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: TopNavigationControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: TopNavigationControl, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TopNavigationControl, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+const HINT_TEMPLATE = `<ng-content />
+@if (hint()) {
+  <ng-template slTooltipLayer>
+    <div slTooltipContent>{{ text() }}</div>
+  </ng-template>
+}`;
+/**
+ * The same, with the family's own mark before the content: a Glyph element in
+ * an icon box, which the control sizes. None of these marks points along the
+ * reading direction, so none of them is `directional`.
+ */
+function markedHintTemplate(glyph) {
+    return `<span slIcon><svg slGlyph name="${glyph}"></svg></span>${HINT_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)',
+};
+const HINT_PROVIDERS = [provideTooltipDefaults({ openOn: 'hover', side: 'bottom' })];
+/* ── Brand ──────────────────────────────────────────────────────────────── */
+/** The start cluster: the shell's toggle when there is one, then the mark and the name. */
+class SlTopNavigationBrand {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationBrand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationBrand, isStandalone: true, selector: "[slTopNavigationBrand]", host: { attributes: { "data-part": "brand" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationBrand, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTopNavigationBrand]',
+                    standalone: true,
+                    host: { 'data-part': 'brand' },
+                }]
+        }] });
+/**
+ * The mark and the name, linked to the start of the application on an `a`,
+ * or only the mark on a `span`. Below the high step the name leaves the eye
+ * and the element keeps its accessible name, because the name is still in it.
+ */
+class SlTopNavigationHome {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationHome, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationHome, isStandalone: true, selector: "[slTopNavigationHome]", host: { attributes: { "data-part": "home" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationHome, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTopNavigationHome]',
+                    standalone: true,
+                    host: { 'data-part': 'home' },
+                }]
+        }] });
+/** The box the logo stands in: square, the height of the bar's controls. */
+class SlTopNavigationMark {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationMark, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationMark, isStandalone: true, selector: "[slTopNavigationMark]", host: { attributes: { "data-part": "mark", "aria-hidden": "true" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationMark, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTopNavigationMark]',
+                    standalone: true,
+                    host: { 'data-part': 'mark', 'aria-hidden': 'true' },
+                }]
+        }] });
+/** The product's name, one line. */
+class SlTopNavigationName {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationName, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationName, isStandalone: true, selector: "[slTopNavigationName]", host: { attributes: { "data-part": "name" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationName, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTopNavigationName]',
+                    standalone: true,
+                    host: { 'data-part': 'name' },
+                }]
+        }] });
+/* ── Context ────────────────────────────────────────────────────────────── */
+/**
+ * What the application is at this moment, as the consumer's own content.
+ * Below the medium step it is moved to the top of the panel while the panel
+ * is present, and back to its place when the panel has left.
+ */
+class SlTopNavigationContext {
+    navigation = inject(SlTopNavigation);
+    home = new Home(inject(ElementRef).nativeElement);
+    constructor() {
+        this.navigation.hasContext.set(true);
+        effect(() => {
+            const panel = this.navigation.panelNode();
+            if (this.navigation.narrow() && this.navigation.panelPresent() && panel !== null) {
+                this.home.moveTo(panel, panel.firstChild);
+            }
+            else {
+                this.home.moveBack();
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.navigation.hasContext.set(false);
+            this.home.moveBack();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationContext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationContext, isStandalone: true, selector: "[slTopNavigationContext]", host: { attributes: { "data-part": "context" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationContext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTopNavigationContext]',
+                    standalone: true,
+                    host: { 'data-part': 'context' },
+                }]
+        }], ctorParameters: () => [] });
+/* ── Navigation ─────────────────────────────────────────────────────────── */
+/**
+ * The navigation landmark. It builds the panel right after itself in DOM
+ * order — so Tab from `more`, the last control in the list, lands in the
+ * panel, the way the disclosure pattern assumes — and hands the panel and
+ * its list to the root, which the folded parts move into. The panel stays in
+ * the DOM closed, out of sight and out of the tab order by the stylesheet's
+ * `visibility`.
+ */
+class SlTopNavigationNav {
+    navigation = inject(SlTopNavigation);
+    menu = inject(SlNavigationMenu);
+    native = inject(ElementRef).nativeElement;
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    ariaLabel = computed(() => this.writtenLabel ?? this.navigation.t('navigation'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const document = this.native.ownerDocument;
+        const panel = document.createElement('div');
+        panel.setAttribute('data-part', 'panel');
+        panel.id = this.navigation.ids.panelId;
+        const list = document.createElement('ul');
+        list.setAttribute('data-part', 'panel-list');
+        panel.appendChild(list);
+        afterNextRender(() => {
+            this.native.insertAdjacentElement('afterend', panel);
+            this.navigation.panelNode.set(panel);
+            this.navigation.panelListNode.set(list);
+        });
+        effect(() => {
+            if (this.navigation.moreOpen())
+                panel.setAttribute('data-open', '');
+            else
+                panel.removeAttribute('data-open');
+        });
+        /* A destination followed inside the overflow panel closes the panel too. */
+        const followed = this.menu.valueChangeRequest.subscribe((request) => {
+            if (request.reason === 'select' && !request.cancelled && this.navigation.moreOpen()) {
+                this.navigation.setMoreOpen(false, 'select', request.source);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => followed.unsubscribe());
+        inject(DestroyRef).onDestroy(() => {
+            if (this.navigation.panelNode() === panel) {
+                this.navigation.panelNode.set(null);
+                this.navigation.panelListNode.set(null);
+            }
+            panel.remove();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationNav, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationNav, isStandalone: true, selector: "nav[slTopNavigationNav]", host: { attributes: { "data-part": "nav" }, properties: { "attr.aria-label": "ariaLabel()" } }, exportAs: ["slTopNavigationNav"], hostDirectives: [{ directive: i1.SlNavigationMenu, inputs: ["value", "value", "arrow", "arrow", "openDelay", "openDelay", "closeDelay", "closeDelay", "closeOnSelect", "closeOnSelect"], outputs: ["valueChange", "valueChange", "valueChangeRequest", "valueChangeRequest"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationNav, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nav[slTopNavigationNav]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationNav',
+                    /**
+                     * The nav is also a `navigation-menu` root: the open section, its request
+                     * and the menu's own delays are bound here, on the element that holds the
+                     * sections. Its `data-part` and its name are the bar's, written after the
+                     * menu's by the host's own bindings.
+                     */
+                    hostDirectives: [
+                        {
+                            directive: SlNavigationMenu,
+                            inputs: ['value', 'arrow', 'openDelay', 'closeDelay', 'closeOnSelect'],
+                            outputs: ['valueChange', 'valueChangeRequest'],
+                        },
+                    ],
+                    host: {
+                        'data-part': 'nav',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The disclosure button of the panel: `data-overflow` holds the count of
+ * what folded, and the stylesheet shows the button by it — and by the
+ * container queries before the count exists. It carries `data-current` while
+ * the current destination is folded, the way a closed parent does.
+ */
+class SlTopNavigationMore extends TopNavigationControl {
+    text = computed(() => {
+        const folded = this.navigation.collapsed().length;
+        return folded > 0
+            ? this.navigation.t('moreCount', { count: folded })
+            : this.navigation.t('more');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.navigation.moreNode.set(this.native);
+        inject(DestroyRef).onDestroy(() => this.navigation.moreNode.set(null));
+    }
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.navigation.setMoreOpen(!this.navigation.moreOpen(), activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationMore, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigationMore, isStandalone: true, selector: "button[slTopNavigationMore]", host: { attributes: { "data-part": "more", "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": "navigation.ids.moreId", "attr.aria-controls": "navigation.ids.panelId", "attr.aria-expanded": "navigation.moreOpen()", "attr.aria-label": "text()", "attr.data-overflow": "navigation.panelHolds() ? navigation.collapsed().length : null", "attr.data-current": "navigation.currentFolded() ? '' : null", "attr.data-open": "navigation.moreOpen() ? '' : null" } }, providers: HINT_PROVIDERS, exportAs: ["slTopNavigationMore"], usesInheritance: true, hostDirectives: [{ directive: i2.SlTooltip }], ngImport: i0, template: "<span slIcon><svg slGlyph name=\"ellipsis\"></svg></span><ng-content />\n@if (hint()) {\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>{{ text() }}</div>\n  </ng-template>\n}", 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: SlTopNavigationMore, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTopNavigationMore]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationMore',
+                    imports: [SlGlyph, SlIcon, SlTooltipLayer, SlTooltipContent],
+                    template: markedHintTemplate('ellipsis'),
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: HINT_PROVIDERS,
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'more',
+                        type: 'button',
+                        '[attr.id]': 'navigation.ids.moreId',
+                        '[attr.aria-controls]': 'navigation.ids.panelId',
+                        '[attr.aria-expanded]': 'navigation.moreOpen()',
+                        '[attr.aria-label]': 'text()',
+                        '[attr.data-overflow]': 'navigation.panelHolds() ? navigation.collapsed().length : null',
+                        '[attr.data-current]': "navigation.currentFolded() ? '' : null",
+                        '[attr.data-open]': "navigation.moreOpen() ? '' : null",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/** The destinations, and `more` at their end. */
+class SlTopNavigationList {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationList, isStandalone: true, selector: "ul[slTopNavigationList]", host: { attributes: { "data-part": "list" } }, exportAs: ["slTopNavigationList"], ngImport: i0, template: `<ng-content />
+    <li data-part="item"><button slTopNavigationMore type="button"></button></li>`, isInline: true, dependencies: [{ kind: "component", type: SlTopNavigationMore, selector: "button[slTopNavigationMore]", exportAs: ["slTopNavigationMore"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ul[slTopNavigationList]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationList',
+                    imports: [SlTopNavigationMore],
+                    template: `<ng-content />
+    <li data-part="item"><button slTopNavigationMore type="button"></button></li>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'list' },
+                }]
+        }] });
+/* ── The item ───────────────────────────────────────────────────────────── */
+/**
+ * One destination or one section. It says what it is to the root — its
+ * value, its priority, whether it is current — and, while the width has
+ * folded it and the panel is present, moves itself into the panel's list in
+ * the list's own order: the same `li`, with whatever the consumer put in it.
+ */
+class SlTopNavigationItem {
+    /** The item's identity: what `value` names it by. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Which step of the width folds this item. Unstated, `medium`. */
+    priority = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "priority" }] : /* istanbul ignore next */ []));
+    /** The row and everything in it refuse interaction. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    navigation = inject(SlTopNavigation);
+    native = inject(ElementRef).nativeElement;
+    home = new Home(this.native);
+    /** Whether the link stated it is current, which wins over the root's value. */
+    explicitCurrent = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "explicitCurrent" }] : /* istanbul ignore next */ []));
+    resolvedPriority = computed(() => this.priority() ?? 'medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPriority" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    collapsed = computed(() => this.navigation.folded().has(this.resolvedPriority()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    current = computed(() => this.explicitCurrent() || this.navigation.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /* ── As a section of the navigation menu ─────────────────────────────── */
+    menu = inject(SlNavigationMenu);
+    contentId = `${inject(SlNavigationMenuIdFactory).next()}-content`;
+    open = computed(() => this.menu.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    currents = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currents" }] : /* istanbul ignore next */ []));
+    hasCurrent = computed(() => this.currents().size > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasCurrent" }] : /* istanbul ignore next */ []));
+    reportCurrent(link, current) {
+        this.currents.update((set) => {
+            if (set.has(link) === current)
+                return set;
+            const next = new Set(set);
+            if (current)
+                next.add(link);
+            else
+                next.delete(link);
+            return next;
+        });
+    }
+    constructor() {
+        let section = null;
+        effect(() => {
+            section?.();
+            section = this.menu.register(this.value(), this.contentId);
+        });
+        inject(DestroyRef).onDestroy(() => section?.());
+        let release = null;
+        effect(() => {
+            release?.();
+            release = this.navigation.registerItem(this.value(), this.resolvedPriority(), this.explicitCurrent());
+        });
+        effect(() => {
+            const list = this.navigation.panelListNode();
+            if (this.collapsed() && this.navigation.panelPresent() && list !== null) {
+                const mine = untracked(() => this.navigation.orderOf(this.value()));
+                const after = [...list.children].find((sibling) => untracked(() => this.navigation.orderOf(sibling.getAttribute('data-value') ?? '')) >
+                    mine);
+                this.home.moveTo(list, after ?? null);
+            }
+            else {
+                this.home.moveBack();
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            release?.();
+            this.home.moveBack();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTopNavigationItem, isStandalone: true, selector: "li[slTopNavigationItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "item" }, properties: { "attr.data-open": "open() ? '' : null", "attr.data-value": "value()", "attr.data-priority": "resolvedPriority()", "attr.data-collapsed": "collapsed() ? '' : null", "attr.data-current": "current() ? '' : null", "attr.data-disabled": "resolvedDisabled() ? '' : null" } }, providers: [
+            { provide: NAVIGATION_MENU_SECTION, useExisting: forwardRef(() => SlTopNavigationItem) },
+        ], exportAs: ["slTopNavigationItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'li[slTopNavigationItem]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationItem',
+                    /** A section of the bar is a section of the navigation menu the nav is. */
+                    providers: [
+                        { provide: NAVIGATION_MENU_SECTION, useExisting: forwardRef(() => SlTopNavigationItem) },
+                    ],
+                    host: {
+                        'data-part': 'item',
+                        '[attr.data-open]': "open() ? '' : null",
+                        '[attr.data-value]': 'value()',
+                        '[attr.data-priority]': 'resolvedPriority()',
+                        '[attr.data-collapsed]': "collapsed() ? '' : null",
+                        '[attr.data-current]': "current() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() ? '' : null",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+/**
+ * The destination. `current` stated on the row wins over the root's `value`;
+ * unstated, an `aria-current` the router wrote on the element is read
+ * instead. Pressed inside the panel, it asks the panel to close with `select`.
+ */
+class SlTopNavigationLink {
+    /** Whether this is the current destination, stated on the row itself. */
+    current = input(undefined, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    item = inject(SlTopNavigationItem);
+    navigation = inject(SlTopNavigation);
+    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.item.current();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCurrent" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const stated = this.current();
+            const written = this.writtenCurrent !== null && this.writtenCurrent !== 'false';
+            this.item.explicitCurrent.set(stated ?? written);
+        });
+        inject(DestroyRef).onDestroy(() => this.item.explicitCurrent.set(false));
+    }
+    onClick(event) {
+        if (this.item.resolvedDisabled()) {
+            event.preventDefault();
+            return;
+        }
+        if (event.defaultPrevented)
+            return;
+        const reason = activationReason(event);
+        this.navigation.select(this.item.value(), reason, event);
+        if (this.navigation.moreOpen() && this.item.collapsed()) {
+            this.navigation.setMoreOpen(false, 'select', event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTopNavigationLink, isStandalone: true, selector: "a[slTopNavigationLink]", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "link" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-current": "resolvedCurrent() ? 'page' : null", "attr.aria-disabled": "item.resolvedDisabled() ? 'true' : null", "attr.data-current": "resolvedCurrent() ? '' : null" } }, exportAs: ["slTopNavigationLink"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[slTopNavigationLink]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationLink',
+                    host: {
+                        'data-part': 'link',
+                        '[attr.aria-current]': "resolvedCurrent() ? 'page' : null",
+                        '[attr.aria-disabled]': "item.resolvedDisabled() ? 'true' : null",
+                        '[attr.data-current]': "resolvedCurrent() ? '' : null",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }] } });
+/**
+ * A section that opens: the `navigation-menu` trigger of the panel that
+ * follows it in the same item — `aria-expanded`, `aria-controls`, the
+ * chevron, a press and a resting pointer — in the bar's row.
+ */
+class SlTopNavigationTrigger {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationTrigger, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationTrigger, isStandalone: true, selector: "button[slTopNavigationTrigger]", exportAs: ["slTopNavigationTrigger"], hostDirectives: [{ directive: i1.SlNavigationMenuTriggerWiring }], ngImport: i0, template: `<ng-content /><span data-part="indicator" aria-hidden="true"
+      ><span slIcon><svg slGlyph name="chevron-down"></svg></span
+    ></span>`, isInline: true, styles: ["@property --slotted-navigation-menu-viewport-inline-size{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --slotted-navigation-menu-viewport-block-size{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --slotted-navigation-menu-viewport-inline-start{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --slotted-navigation-menu-viewport-block-start{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --slotted-navigation-menu-arrow-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@layer slotted.components{[data-ui=navigation-menu]{--_control-height: var(--slotted-control-height-md, 34px);--_control-padding: var(--slotted-control-padding-inline-md, 13px);--_control-font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-sm, 6px);--_list-gap: var(--slotted-space-1, .125rem);--_radius: var(--slotted-navigation-menu-radius, var(--slotted-control-radius, 4px));--_surface: var(--slotted-navigation-menu-surface, var(--slotted-surface-raised, Canvas));--_border-color: var( --slotted-navigation-menu-border-color, var(--slotted-border-subtle, ButtonBorder) );--_border-width: var(--slotted-border-width-thin, 1px);--_shadow: var(--slotted-navigation-menu-shadow, var(--slotted-shadow-md));--_viewport-radius: var( --slotted-navigation-menu-viewport-radius, var(--slotted-radius-lg, 8px) );--_offset: var(--slotted-navigation-menu-offset, var(--slotted-space-2, .25rem));--_inset: var(--slotted-space-2, .25rem);--_column-size: var(--slotted-navigation-menu-column-size, 15rem);--_column-gap: var(--slotted-space-2, .25rem);--_group-min: 10rem;--_gutter: var(--slotted-space-4, .5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_leading: round(up, calc(var(--_font-size) * var(--slotted-line-height-md, 1.5)), 1px);--_secondary-leading: round( up, calc(var(--_secondary-font-size) * var(--slotted-line-height-sm, 1.45)), 1px );--_link-inset-inline: calc(var(--_control-padding) - var(--_border-width) - var(--_inset));--_link-inset-block: var(--slotted-space-4, .5rem);--_color: var(--slotted-navigation-menu-color, var(--slotted-text, CanvasText));--_muted-color: var(--slotted-navigation-menu-muted-color, var(--slotted-text-muted, GrayText));--_hover-background: var( --slotted-navigation-menu-hover-background, var(--slotted-tone-secondary-subtle-hover) );--_active-background: var( --slotted-navigation-menu-active-background, var(--slotted-tone-secondary-subtle-active) );--_current-color: var(--slotted-navigation-menu-current-color, var(--slotted-tone-accent-text));--_current-background: var( --slotted-navigation-menu-current-background, var(--slotted-tone-accent-surface) );--_current-edge: var( --slotted-navigation-menu-current-edge, var(--slotted-current-edge, transparent) );--_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));--_enter-distance: var(--slotted-space-2, .25rem);--_slide-distance: var(--slotted-space-6, 1rem);--_inline-sign: 1;--_arrow-size: var(--slotted-space-4, .5rem);box-sizing:border-box;color:var(--_color);display:flex;font-family:var(--slotted-control-font-family, inherit);font-size:var(--_control-font-size);position:relative}[data-ui=navigation-menu]:dir(rtl){--_inline-sign: -1}[data-ui=navigation-menu]:has(>[data-part=list]>[data-part=item]>[data-part=content][data-open]){z-index:var(--slotted-z-index-popover, 1100)}[data-ui=navigation-menu]:has(>[data-part=viewport][data-open]){transition:--slotted-navigation-menu-viewport-inline-size var(--slotted-duration-medium) var(--slotted-easing-standard),--slotted-navigation-menu-viewport-block-size var(--slotted-duration-medium) var(--slotted-easing-standard),--slotted-navigation-menu-viewport-inline-start var(--slotted-duration-medium) var(--slotted-easing-standard),--slotted-navigation-menu-viewport-block-start var(--slotted-duration-medium) var(--slotted-easing-standard),--slotted-navigation-menu-arrow-offset var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=navigation-menu][data-size=sm]{--_control-height: var(--slotted-control-height-sm, 30px);--_control-padding: var(--slotted-control-padding-inline-sm, 10px);--_control-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=navigation-menu][data-size=lg]{--_control-height: var(--slotted-control-height-lg, 38px);--_control-padding: var(--slotted-control-padding-inline-lg, 16px);--_control-font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-md, 8px)}[data-ui=navigation-menu]>[data-part=list]{align-items:center;display:flex;gap:var(--_list-gap);list-style:none;margin:0;padding:0}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]{display:flex}:where([data-ui=navigation-menu]>[data-part=list]>[data-part=item])>:is([data-part=trigger],[data-part=link]){align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_gap);line-height:var(--slotted-control-line-height, 1);margin:0;min-block-size:var(--_control-height);padding-block:0;padding-inline:var(--_control-padding);text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing);white-space:nowrap}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]:not([data-disabled])>[data-part=trigger]:enabled:hover,[data-ui=navigation-menu]>[data-part=list]>[data-part=item]:not([data-disabled])>[data-part=link]:not([data-disabled],[data-current],[aria-current=page]):hover{background-color:var(--_hover-background)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]:not([data-disabled])>[data-part=trigger]:enabled:active,[data-ui=navigation-menu]>[data-part=list]>[data-part=item]:not([data-disabled])>[data-part=link]:not([data-disabled],[data-current],[aria-current=page]):active{background-color:var(--_active-background);transition-duration:var(--slotted-duration-instant)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=trigger][data-open]:enabled{background-color:var(--_hover-background)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=trigger][data-current]:enabled{color:var(--_current-color)}[data-ui=navigation-menu] [data-part=link]:is([data-current],[aria-current=page]){background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_border-width) var(--_current-edge);color:var(--_current-color)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=link]:is([data-current],[aria-current=page]){font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=navigation-menu] [data-part=trigger]:disabled,[data-ui=navigation-menu] [data-part=link][data-disabled],[data-ui=navigation-menu] [data-part=content] [data-part=link][data-disabled]{color:var(--_disabled-color);cursor:not-allowed}[data-ui=navigation-menu] :is([data-part=trigger],[data-part=link]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=navigation-menu] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);display:flex;flex:0 0 auto;margin-inline-end:calc(-1 * var(--slotted-space-2, .25rem))}[data-ui=navigation-menu] [data-part=indicator]>[data-ui=icon]{transition:rotate var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=navigation-menu]:not([data-orientation=vertical])>[data-part=list]>[data-part=item]>[data-part=trigger][data-open]>[data-part=indicator]>[data-ui=icon]{rotate:.5turn}[data-ui=navigation-menu]>[data-part=viewport]{background-color:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_viewport-radius);box-shadow:var(--_shadow);box-sizing:border-box;display:none;block-size:var(--slotted-navigation-menu-viewport-block-size, 0px);inline-size:var(--slotted-navigation-menu-viewport-inline-size, 0px);inset-block-start:calc(100% + var(--_offset));inset-inline-start:var(--slotted-navigation-menu-viewport-inline-start, 0px);opacity:0;pointer-events:none;position:absolute;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=navigation-menu]>[data-part=viewport][data-positioned]{display:block}[data-ui=navigation-menu]>[data-part=viewport][data-open]{opacity:1;pointer-events:auto;translate:0 0;transition:none}[data-ui=navigation-menu]>[data-part=viewport][data-open][data-positioned]{animation:slotted-navigation-menu-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=navigation-menu]>[data-part=viewport]:before{content:\"\";inset-block-end:100%;inset-inline:0;block-size:calc(var(--_offset) + var(--_border-width));position:absolute}@keyframes slotted-navigation-menu-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-navigation-menu-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_inline-sign) * var(--_enter-distance)) 0}}@keyframes slotted-navigation-menu-fade{0%{opacity:0}}[data-ui=navigation-menu]>[data-part=viewport]>[data-part=arrow]{background-color:var(--_surface);border-block-start:var(--_border-width) solid var(--_border-color);border-inline-start:var(--_border-width) solid var(--_border-color);border-start-start-radius:var(--slotted-radius-xs, 2px);box-sizing:border-box;block-size:var(--_arrow-size);inline-size:var(--_arrow-size);inset-block-start:calc(var(--_arrow-size) / -2 - var(--_border-width) / 2);inset-inline-start:calc(var(--slotted-navigation-menu-arrow-offset, 50%) - var(--_arrow-size) / 2);position:absolute;rotate:calc(var(--_inline-sign) * 45deg)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content]{--_columns: 1;--_content-size: calc( var(--_columns) * var(--_column-size) + (var(--_columns) - 1) * var(--_column-gap) + 2 * (var(--_inset) + var(--_border-width)) );border:var(--_border-width) solid transparent;border-radius:var(--_viewport-radius);box-sizing:border-box;color:var(--_color);column-gap:var(--_column-gap);container-name:slotted-navigation-menu-content;container-type:inline-size;display:grid;font-size:var(--_font-size);grid-template-columns:repeat(auto-fit,minmax(max(var(--_group-min),calc((100% - (var(--_columns) - 1) * var(--_column-gap)) / var(--_columns))),1fr));inline-size:min(var(--_content-size),var(--slotted-navigation-menu-available-inline-size, calc(100vw - 2 * var(--_gutter))));inset-block-start:calc(100% + var(--_offset));inset-inline-start:var(--slotted-navigation-menu-viewport-inline-start, 0px);line-height:var(--_leading);opacity:0;padding:var(--_inset);position:absolute;row-gap:var(--_inset);clip-path:inset(0 max(0px,calc(100% - var(--slotted-navigation-menu-viewport-inline-size))) max(0px,calc(100% - var(--slotted-navigation-menu-viewport-block-size))) 0 round var(--_viewport-radius));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit);z-index:1}[data-ui=navigation-menu]:dir(rtl)>[data-part=list]>[data-part=item]>[data-part=content]{clip-path:inset(0 0 max(0px,calc(100% - var(--slotted-navigation-menu-viewport-block-size))) max(0px,calc(100% - var(--slotted-navigation-menu-viewport-inline-size))) round var(--_viewport-radius))}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content][data-columns=\"2\"]{--_columns: 2}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content][data-columns=\"3\"]{--_columns: 3}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content][hidden]{display:none}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content][data-open]{opacity:1;transition:none}[data-ui=navigation-menu]:not([data-nested]):not(:has(>[data-part=viewport][data-positioned]))>[data-part=list]>[data-part=item]>[data-part=content]{background-color:var(--_surface);border-color:var(--_border-color);box-shadow:var(--_shadow);clip-path:none}[data-ui=navigation-menu] [data-part=content][data-motion=from-end]{animation:slotted-navigation-menu-from-end var(--slotted-duration-medium) var(--slotted-easing-enter) both}[data-ui=navigation-menu] [data-part=content][data-motion=from-start]{animation:slotted-navigation-menu-from-start var(--slotted-duration-medium) var(--slotted-easing-enter) both}[data-ui=navigation-menu] [data-part=content][data-motion=to-end]{animation:slotted-navigation-menu-to-end var(--slotted-duration-short) var(--slotted-easing-exit) both}[data-ui=navigation-menu] [data-part=content][data-motion=to-start]{animation:slotted-navigation-menu-to-start var(--slotted-duration-short) var(--slotted-easing-exit) both}@keyframes slotted-navigation-menu-from-end{0%{opacity:0;translate:calc(var(--_inline-sign) * var(--_slide-distance)) 0}}@keyframes slotted-navigation-menu-from-start{0%{opacity:0;translate:calc(-1 * var(--_inline-sign) * var(--_slide-distance)) 0}}@keyframes slotted-navigation-menu-to-end{to{opacity:0;translate:calc(var(--_inline-sign) * var(--_slide-distance)) 0}}@keyframes slotted-navigation-menu-to-start{to{opacity:0;translate:calc(-1 * var(--_inline-sign) * var(--_slide-distance)) 0}}[data-ui=navigation-menu] [data-part=content]>:is([data-part=links],[data-part=footer]){grid-column:1 / -1}[data-ui=navigation-menu] [data-part=links]{display:grid;gap:var(--_column-gap);grid-template-columns:repeat(var(--_columns, 1),minmax(0,1fr));list-style:none;margin:0;padding:0}[data-ui=navigation-menu] [data-part=group]>[data-part=links]{grid-template-columns:minmax(0,1fr)}@container slotted-navigation-menu-content (inline-size < 480px){[data-ui=navigation-menu] [data-part=links]{grid-template-columns:minmax(0,1fr)}}[data-ui=navigation-menu] [data-part=group]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0}[data-ui=navigation-menu] [data-part=group-label]{color:var(--_muted-color);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_secondary-leading);padding-block:var(--slotted-space-3, .375rem) var(--slotted-space-2, .25rem);padding-inline:var(--_link-inset-inline)}[data-ui=navigation-menu] [data-part=content] [data-part=link]{border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:grid;font-weight:var(--slotted-font-weight-regular, 400);grid-template-areas:\"icon label\" \"icon description\";grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;line-height:var(--_leading);min-block-size:var(--_control-height);outline-offset:0;padding-block:var(--_link-inset-block);padding-inline:var(--_link-inset-inline);row-gap:var(--slotted-space-1, .125rem);text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=navigation-menu] [data-part=content] [data-part=link]:not(:has([data-part=label])){align-content:center;display:grid;grid-template-areas:none;grid-template-columns:minmax(0,1fr);padding-block:0}[data-ui=navigation-menu] [data-part=content] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):hover{background-color:var(--_hover-background)}[data-ui=navigation-menu] [data-part=content] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):active{background-color:var(--_active-background);transition-duration:var(--slotted-duration-instant)}[data-ui=navigation-menu] [data-part=content] [data-part=link]:is([data-current],[aria-current=page]){color:var(--_current-color)}[data-ui=navigation-menu] [data-part=content] [data-part=link]:is([data-current],[aria-current=page])>[data-part=description]{color:inherit}[data-ui=navigation-menu] [data-part=content] [data-part=link]:focus-visible{outline-offset:0}[data-ui=navigation-menu] [data-part=link]>[data-part=icon]{--slotted-icon-size: var(--_icon-size);color:var(--_muted-color);grid-area:icon;line-height:var(--_leading);margin-inline-end:var(--slotted-control-gap-md, 8px);transition:color var(--_duration) var(--_easing)}[data-ui=navigation-menu] [data-part=link]>[data-part=icon]>[data-ui=icon]{display:inline-block;vertical-align:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2)}[data-ui=navigation-menu] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):hover>[data-part=icon]{color:var(--_color)}[data-ui=navigation-menu] [data-part=link]:is([data-current],[aria-current=page],[data-disabled])>[data-part=icon]{color:inherit}[data-ui=navigation-menu] [data-part=link]>[data-part=label]{font-weight:var(--slotted-font-weight-medium, 500);grid-area:label;min-inline-size:0}[data-ui=navigation-menu] [data-part=link]>[data-part=description]{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--_muted-color);display:-webkit-box;font-size:var(--_secondary-font-size);grid-area:description;line-clamp:2;line-height:var(--_secondary-leading);min-inline-size:0;overflow:hidden}[data-ui=navigation-menu] [data-part=link][data-disabled]>[data-part=description]{color:inherit}[data-ui=navigation-menu] [data-part=footer]{align-items:center;border-block-start:var(--_border-width) solid var(--_border-color);display:flex;gap:var(--slotted-control-gap-md, 8px);justify-content:space-between;margin-inline:calc(-1 * var(--_inset));padding-block:var(--_inset) 0;padding-inline:calc(var(--_inset) + var(--_link-inset-inline)) var(--_inset)}[data-ui=navigation-menu][data-orientation=vertical]>[data-part=list]{align-items:stretch;flex-direction:column;inline-size:100%}[data-ui=navigation-menu][data-orientation=vertical]>[data-part=list]>[data-part=item]>:is([data-part=trigger],[data-part=link]){flex:1 1 auto;justify-content:space-between}[data-ui=navigation-menu][data-orientation=vertical]>[data-part=viewport],[data-ui=navigation-menu][data-orientation=vertical]>[data-part=list]>[data-part=item]>[data-part=content]{inset-block-start:var(--slotted-navigation-menu-viewport-block-start, 0px);inset-inline-start:calc(var(--slotted-navigation-menu-viewport-inline-start, 100%) + var(--_offset))}[data-ui=navigation-menu][data-orientation=vertical]:not([data-nested]):not(:has(>[data-part=viewport][data-positioned]))>[data-part=list]>[data-part=item]>[data-part=content]{inset-inline-start:calc(100% + var(--_offset))}[data-ui=navigation-menu][data-orientation=vertical][data-placement=below]:not([data-nested])>[data-part=viewport],[data-ui=navigation-menu][data-orientation=vertical][data-placement=below]:not([data-nested])>[data-part=list]>[data-part=item]>[data-part=content]{inset-block-start:calc(var(--slotted-navigation-menu-viewport-block-start, 100%) + var(--_offset));inset-inline-start:var(--slotted-navigation-menu-viewport-inline-start, 0px)}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport]{translate:calc(-1 * var(--_inline-sign) * var(--_enter-distance)) 0}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport][data-open]{translate:0 0}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport][data-open][data-positioned]{animation-name:slotted-navigation-menu-enter-from-start}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport]:before{block-size:auto;inline-size:calc(var(--_offset) + var(--_border-width));inset-block:0;inset-inline:auto 100%}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport]>[data-part=arrow]{inset-block-start:calc(var(--slotted-navigation-menu-arrow-offset, 50%) - var(--_arrow-size) / 2);inset-inline-start:calc(var(--_arrow-size) / -2 - var(--_border-width) / 2);rotate:calc(var(--_inline-sign) * -45deg)}[data-ui=navigation-menu][data-orientation=vertical][data-placement=below]:not([data-nested])>[data-part=list]>[data-part=item]>[data-part=trigger][data-open]>[data-part=indicator]>[data-ui=icon]{rotate:calc(var(--_inline-sign) * .25turn)}[data-ui=navigation-menu][data-nested]{--_nested-list-size: var(--slotted-navigation-menu-nested-list-size, 11rem);grid-column:1 / -1;min-block-size:var(--slotted-navigation-menu-viewport-block-size, auto)}[data-ui=navigation-menu][data-nested]:before{background-color:var(--_border-color);content:\"\";inline-size:var(--_border-width);inset-block:0;inset-inline-start:calc(var(--_nested-list-size) + var(--_inset) / 2);position:absolute}[data-ui=navigation-menu][data-nested]>[data-part=list]{align-self:flex-start;inline-size:var(--_nested-list-size)}[data-ui=navigation-menu][data-nested]>[data-part=viewport]{display:none}[data-ui=navigation-menu][data-nested]>[data-part=list]>[data-part=item]>[data-part=content]{border:0;border-radius:0;clip-path:none;inline-size:calc(100% - var(--_nested-list-size) - var(--_inset));inset-block-start:0;inset-inline-start:calc(var(--_nested-list-size) + var(--_inset));padding-block:0;padding-inline:var(--_inset) 0}@media(prefers-reduced-motion:reduce){[data-ui=navigation-menu]>[data-part=viewport],[data-ui=navigation-menu][data-orientation=vertical]>[data-part=viewport]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=navigation-menu]>[data-part=viewport][data-open][data-positioned],[data-ui=navigation-menu][data-orientation=vertical]>[data-part=viewport][data-open][data-positioned]{animation-name:slotted-navigation-menu-fade}[data-ui=navigation-menu] [data-part=content]:is([data-motion=from-end],[data-motion=from-start]){animation-name:slotted-navigation-menu-fade}[data-ui=navigation-menu] [data-part=content]:is([data-motion=to-end],[data-motion=to-start]){animation:none;opacity:0}}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationTrigger, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[slTopNavigationTrigger]', standalone: true, exportAs: 'slTopNavigationTrigger', imports: [SlGlyph, SlIcon], template: `<ng-content /><span data-part="indicator" aria-hidden="true"
+      ><span slIcon><svg slGlyph name="chevron-down"></svg></span
+    ></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [SlNavigationMenuTriggerWiring], styles: ["@property --slotted-navigation-menu-viewport-inline-size{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --slotted-navigation-menu-viewport-block-size{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --slotted-navigation-menu-viewport-inline-start{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --slotted-navigation-menu-viewport-block-start{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --slotted-navigation-menu-arrow-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@layer slotted.components{[data-ui=navigation-menu]{--_control-height: var(--slotted-control-height-md, 34px);--_control-padding: var(--slotted-control-padding-inline-md, 13px);--_control-font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-sm, 6px);--_list-gap: var(--slotted-space-1, .125rem);--_radius: var(--slotted-navigation-menu-radius, var(--slotted-control-radius, 4px));--_surface: var(--slotted-navigation-menu-surface, var(--slotted-surface-raised, Canvas));--_border-color: var( --slotted-navigation-menu-border-color, var(--slotted-border-subtle, ButtonBorder) );--_border-width: var(--slotted-border-width-thin, 1px);--_shadow: var(--slotted-navigation-menu-shadow, var(--slotted-shadow-md));--_viewport-radius: var( --slotted-navigation-menu-viewport-radius, var(--slotted-radius-lg, 8px) );--_offset: var(--slotted-navigation-menu-offset, var(--slotted-space-2, .25rem));--_inset: var(--slotted-space-2, .25rem);--_column-size: var(--slotted-navigation-menu-column-size, 15rem);--_column-gap: var(--slotted-space-2, .25rem);--_group-min: 10rem;--_gutter: var(--slotted-space-4, .5rem);--_font-size: var(--slotted-control-font-size-md, 13px);--_secondary-font-size: var(--slotted-control-font-size-sm, 12px);--_leading: round(up, calc(var(--_font-size) * var(--slotted-line-height-md, 1.5)), 1px);--_secondary-leading: round( up, calc(var(--_secondary-font-size) * var(--slotted-line-height-sm, 1.45)), 1px );--_link-inset-inline: calc(var(--_control-padding) - var(--_border-width) - var(--_inset));--_link-inset-block: var(--slotted-space-4, .5rem);--_color: var(--slotted-navigation-menu-color, var(--slotted-text, CanvasText));--_muted-color: var(--slotted-navigation-menu-muted-color, var(--slotted-text-muted, GrayText));--_hover-background: var( --slotted-navigation-menu-hover-background, var(--slotted-tone-secondary-subtle-hover) );--_active-background: var( --slotted-navigation-menu-active-background, var(--slotted-tone-secondary-subtle-active) );--_current-color: var(--slotted-navigation-menu-current-color, var(--slotted-tone-accent-text));--_current-background: var( --slotted-navigation-menu-current-background, var(--slotted-tone-accent-surface) );--_current-edge: var( --slotted-navigation-menu-current-edge, var(--slotted-current-edge, transparent) );--_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));--_enter-distance: var(--slotted-space-2, .25rem);--_slide-distance: var(--slotted-space-6, 1rem);--_inline-sign: 1;--_arrow-size: var(--slotted-space-4, .5rem);box-sizing:border-box;color:var(--_color);display:flex;font-family:var(--slotted-control-font-family, inherit);font-size:var(--_control-font-size);position:relative}[data-ui=navigation-menu]:dir(rtl){--_inline-sign: -1}[data-ui=navigation-menu]:has(>[data-part=list]>[data-part=item]>[data-part=content][data-open]){z-index:var(--slotted-z-index-popover, 1100)}[data-ui=navigation-menu]:has(>[data-part=viewport][data-open]){transition:--slotted-navigation-menu-viewport-inline-size var(--slotted-duration-medium) var(--slotted-easing-standard),--slotted-navigation-menu-viewport-block-size var(--slotted-duration-medium) var(--slotted-easing-standard),--slotted-navigation-menu-viewport-inline-start var(--slotted-duration-medium) var(--slotted-easing-standard),--slotted-navigation-menu-viewport-block-start var(--slotted-duration-medium) var(--slotted-easing-standard),--slotted-navigation-menu-arrow-offset var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=navigation-menu][data-size=sm]{--_control-height: var(--slotted-control-height-sm, 30px);--_control-padding: var(--slotted-control-padding-inline-sm, 10px);--_control-font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=navigation-menu][data-size=lg]{--_control-height: var(--slotted-control-height-lg, 38px);--_control-padding: var(--slotted-control-padding-inline-lg, 16px);--_control-font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-md, 8px)}[data-ui=navigation-menu]>[data-part=list]{align-items:center;display:flex;gap:var(--_list-gap);list-style:none;margin:0;padding:0}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]{display:flex}:where([data-ui=navigation-menu]>[data-part=list]>[data-part=item])>:is([data-part=trigger],[data-part=link]){align-items:center;appearance:none;background-color:transparent;border:0;border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_gap);line-height:var(--slotted-control-line-height, 1);margin:0;min-block-size:var(--_control-height);padding-block:0;padding-inline:var(--_control-padding);text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing);white-space:nowrap}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]:not([data-disabled])>[data-part=trigger]:enabled:hover,[data-ui=navigation-menu]>[data-part=list]>[data-part=item]:not([data-disabled])>[data-part=link]:not([data-disabled],[data-current],[aria-current=page]):hover{background-color:var(--_hover-background)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]:not([data-disabled])>[data-part=trigger]:enabled:active,[data-ui=navigation-menu]>[data-part=list]>[data-part=item]:not([data-disabled])>[data-part=link]:not([data-disabled],[data-current],[aria-current=page]):active{background-color:var(--_active-background);transition-duration:var(--slotted-duration-instant)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=trigger][data-open]:enabled{background-color:var(--_hover-background)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=trigger][data-current]:enabled{color:var(--_current-color)}[data-ui=navigation-menu] [data-part=link]:is([data-current],[aria-current=page]){background-color:var(--_current-background);box-shadow:inset 0 0 0 var(--_border-width) var(--_current-edge);color:var(--_current-color)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=link]:is([data-current],[aria-current=page]){font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=navigation-menu] [data-part=trigger]:disabled,[data-ui=navigation-menu] [data-part=link][data-disabled],[data-ui=navigation-menu] [data-part=content] [data-part=link][data-disabled]{color:var(--_disabled-color);cursor:not-allowed}[data-ui=navigation-menu] :is([data-part=trigger],[data-part=link]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=navigation-menu] [data-part=indicator]{--slotted-icon-size: var(--_icon-size);display:flex;flex:0 0 auto;margin-inline-end:calc(-1 * var(--slotted-space-2, .25rem))}[data-ui=navigation-menu] [data-part=indicator]>[data-ui=icon]{transition:rotate var(--slotted-duration-medium) var(--slotted-easing-standard)}[data-ui=navigation-menu]:not([data-orientation=vertical])>[data-part=list]>[data-part=item]>[data-part=trigger][data-open]>[data-part=indicator]>[data-ui=icon]{rotate:.5turn}[data-ui=navigation-menu]>[data-part=viewport]{background-color:var(--_surface);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_viewport-radius);box-shadow:var(--_shadow);box-sizing:border-box;display:none;block-size:var(--slotted-navigation-menu-viewport-block-size, 0px);inline-size:var(--slotted-navigation-menu-viewport-inline-size, 0px);inset-block-start:calc(100% + var(--_offset));inset-inline-start:var(--slotted-navigation-menu-viewport-inline-start, 0px);opacity:0;pointer-events:none;position:absolute;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=navigation-menu]>[data-part=viewport][data-positioned]{display:block}[data-ui=navigation-menu]>[data-part=viewport][data-open]{opacity:1;pointer-events:auto;translate:0 0;transition:none}[data-ui=navigation-menu]>[data-part=viewport][data-open][data-positioned]{animation:slotted-navigation-menu-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=navigation-menu]>[data-part=viewport]:before{content:\"\";inset-block-end:100%;inset-inline:0;block-size:calc(var(--_offset) + var(--_border-width));position:absolute}@keyframes slotted-navigation-menu-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-navigation-menu-enter-from-start{0%{opacity:0;translate:calc(-1 * var(--_inline-sign) * var(--_enter-distance)) 0}}@keyframes slotted-navigation-menu-fade{0%{opacity:0}}[data-ui=navigation-menu]>[data-part=viewport]>[data-part=arrow]{background-color:var(--_surface);border-block-start:var(--_border-width) solid var(--_border-color);border-inline-start:var(--_border-width) solid var(--_border-color);border-start-start-radius:var(--slotted-radius-xs, 2px);box-sizing:border-box;block-size:var(--_arrow-size);inline-size:var(--_arrow-size);inset-block-start:calc(var(--_arrow-size) / -2 - var(--_border-width) / 2);inset-inline-start:calc(var(--slotted-navigation-menu-arrow-offset, 50%) - var(--_arrow-size) / 2);position:absolute;rotate:calc(var(--_inline-sign) * 45deg)}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content]{--_columns: 1;--_content-size: calc( var(--_columns) * var(--_column-size) + (var(--_columns) - 1) * var(--_column-gap) + 2 * (var(--_inset) + var(--_border-width)) );border:var(--_border-width) solid transparent;border-radius:var(--_viewport-radius);box-sizing:border-box;color:var(--_color);column-gap:var(--_column-gap);container-name:slotted-navigation-menu-content;container-type:inline-size;display:grid;font-size:var(--_font-size);grid-template-columns:repeat(auto-fit,minmax(max(var(--_group-min),calc((100% - (var(--_columns) - 1) * var(--_column-gap)) / var(--_columns))),1fr));inline-size:min(var(--_content-size),var(--slotted-navigation-menu-available-inline-size, calc(100vw - 2 * var(--_gutter))));inset-block-start:calc(100% + var(--_offset));inset-inline-start:var(--slotted-navigation-menu-viewport-inline-start, 0px);line-height:var(--_leading);opacity:0;padding:var(--_inset);position:absolute;row-gap:var(--_inset);clip-path:inset(0 max(0px,calc(100% - var(--slotted-navigation-menu-viewport-inline-size))) max(0px,calc(100% - var(--slotted-navigation-menu-viewport-block-size))) 0 round var(--_viewport-radius));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit);z-index:1}[data-ui=navigation-menu]:dir(rtl)>[data-part=list]>[data-part=item]>[data-part=content]{clip-path:inset(0 0 max(0px,calc(100% - var(--slotted-navigation-menu-viewport-block-size))) max(0px,calc(100% - var(--slotted-navigation-menu-viewport-inline-size))) round var(--_viewport-radius))}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content][data-columns=\"2\"]{--_columns: 2}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content][data-columns=\"3\"]{--_columns: 3}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content][hidden]{display:none}[data-ui=navigation-menu]>[data-part=list]>[data-part=item]>[data-part=content][data-open]{opacity:1;transition:none}[data-ui=navigation-menu]:not([data-nested]):not(:has(>[data-part=viewport][data-positioned]))>[data-part=list]>[data-part=item]>[data-part=content]{background-color:var(--_surface);border-color:var(--_border-color);box-shadow:var(--_shadow);clip-path:none}[data-ui=navigation-menu] [data-part=content][data-motion=from-end]{animation:slotted-navigation-menu-from-end var(--slotted-duration-medium) var(--slotted-easing-enter) both}[data-ui=navigation-menu] [data-part=content][data-motion=from-start]{animation:slotted-navigation-menu-from-start var(--slotted-duration-medium) var(--slotted-easing-enter) both}[data-ui=navigation-menu] [data-part=content][data-motion=to-end]{animation:slotted-navigation-menu-to-end var(--slotted-duration-short) var(--slotted-easing-exit) both}[data-ui=navigation-menu] [data-part=content][data-motion=to-start]{animation:slotted-navigation-menu-to-start var(--slotted-duration-short) var(--slotted-easing-exit) both}@keyframes slotted-navigation-menu-from-end{0%{opacity:0;translate:calc(var(--_inline-sign) * var(--_slide-distance)) 0}}@keyframes slotted-navigation-menu-from-start{0%{opacity:0;translate:calc(-1 * var(--_inline-sign) * var(--_slide-distance)) 0}}@keyframes slotted-navigation-menu-to-end{to{opacity:0;translate:calc(var(--_inline-sign) * var(--_slide-distance)) 0}}@keyframes slotted-navigation-menu-to-start{to{opacity:0;translate:calc(-1 * var(--_inline-sign) * var(--_slide-distance)) 0}}[data-ui=navigation-menu] [data-part=content]>:is([data-part=links],[data-part=footer]){grid-column:1 / -1}[data-ui=navigation-menu] [data-part=links]{display:grid;gap:var(--_column-gap);grid-template-columns:repeat(var(--_columns, 1),minmax(0,1fr));list-style:none;margin:0;padding:0}[data-ui=navigation-menu] [data-part=group]>[data-part=links]{grid-template-columns:minmax(0,1fr)}@container slotted-navigation-menu-content (inline-size < 480px){[data-ui=navigation-menu] [data-part=links]{grid-template-columns:minmax(0,1fr)}}[data-ui=navigation-menu] [data-part=group]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);min-inline-size:0}[data-ui=navigation-menu] [data-part=group-label]{color:var(--_muted-color);font-size:var(--_secondary-font-size);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--_secondary-leading);padding-block:var(--slotted-space-3, .375rem) var(--slotted-space-2, .25rem);padding-inline:var(--_link-inset-inline)}[data-ui=navigation-menu] [data-part=content] [data-part=link]{border-radius:var(--_radius);box-sizing:border-box;color:var(--_color);display:grid;font-weight:var(--slotted-font-weight-regular, 400);grid-template-areas:\"icon label\" \"icon description\";grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;line-height:var(--_leading);min-block-size:var(--_control-height);outline-offset:0;padding-block:var(--_link-inset-block);padding-inline:var(--_link-inset-inline);row-gap:var(--slotted-space-1, .125rem);text-decoration:none;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=navigation-menu] [data-part=content] [data-part=link]:not(:has([data-part=label])){align-content:center;display:grid;grid-template-areas:none;grid-template-columns:minmax(0,1fr);padding-block:0}[data-ui=navigation-menu] [data-part=content] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):hover{background-color:var(--_hover-background)}[data-ui=navigation-menu] [data-part=content] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):active{background-color:var(--_active-background);transition-duration:var(--slotted-duration-instant)}[data-ui=navigation-menu] [data-part=content] [data-part=link]:is([data-current],[aria-current=page]){color:var(--_current-color)}[data-ui=navigation-menu] [data-part=content] [data-part=link]:is([data-current],[aria-current=page])>[data-part=description]{color:inherit}[data-ui=navigation-menu] [data-part=content] [data-part=link]:focus-visible{outline-offset:0}[data-ui=navigation-menu] [data-part=link]>[data-part=icon]{--slotted-icon-size: var(--_icon-size);color:var(--_muted-color);grid-area:icon;line-height:var(--_leading);margin-inline-end:var(--slotted-control-gap-md, 8px);transition:color var(--_duration) var(--_easing)}[data-ui=navigation-menu] [data-part=link]>[data-part=icon]>[data-ui=icon]{display:inline-block;vertical-align:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2)}[data-ui=navigation-menu] [data-part=link]:not([data-disabled],[data-current],[aria-current=page]):hover>[data-part=icon]{color:var(--_color)}[data-ui=navigation-menu] [data-part=link]:is([data-current],[aria-current=page],[data-disabled])>[data-part=icon]{color:inherit}[data-ui=navigation-menu] [data-part=link]>[data-part=label]{font-weight:var(--slotted-font-weight-medium, 500);grid-area:label;min-inline-size:0}[data-ui=navigation-menu] [data-part=link]>[data-part=description]{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--_muted-color);display:-webkit-box;font-size:var(--_secondary-font-size);grid-area:description;line-clamp:2;line-height:var(--_secondary-leading);min-inline-size:0;overflow:hidden}[data-ui=navigation-menu] [data-part=link][data-disabled]>[data-part=description]{color:inherit}[data-ui=navigation-menu] [data-part=footer]{align-items:center;border-block-start:var(--_border-width) solid var(--_border-color);display:flex;gap:var(--slotted-control-gap-md, 8px);justify-content:space-between;margin-inline:calc(-1 * var(--_inset));padding-block:var(--_inset) 0;padding-inline:calc(var(--_inset) + var(--_link-inset-inline)) var(--_inset)}[data-ui=navigation-menu][data-orientation=vertical]>[data-part=list]{align-items:stretch;flex-direction:column;inline-size:100%}[data-ui=navigation-menu][data-orientation=vertical]>[data-part=list]>[data-part=item]>:is([data-part=trigger],[data-part=link]){flex:1 1 auto;justify-content:space-between}[data-ui=navigation-menu][data-orientation=vertical]>[data-part=viewport],[data-ui=navigation-menu][data-orientation=vertical]>[data-part=list]>[data-part=item]>[data-part=content]{inset-block-start:var(--slotted-navigation-menu-viewport-block-start, 0px);inset-inline-start:calc(var(--slotted-navigation-menu-viewport-inline-start, 100%) + var(--_offset))}[data-ui=navigation-menu][data-orientation=vertical]:not([data-nested]):not(:has(>[data-part=viewport][data-positioned]))>[data-part=list]>[data-part=item]>[data-part=content]{inset-inline-start:calc(100% + var(--_offset))}[data-ui=navigation-menu][data-orientation=vertical][data-placement=below]:not([data-nested])>[data-part=viewport],[data-ui=navigation-menu][data-orientation=vertical][data-placement=below]:not([data-nested])>[data-part=list]>[data-part=item]>[data-part=content]{inset-block-start:calc(var(--slotted-navigation-menu-viewport-block-start, 100%) + var(--_offset));inset-inline-start:var(--slotted-navigation-menu-viewport-inline-start, 0px)}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport]{translate:calc(-1 * var(--_inline-sign) * var(--_enter-distance)) 0}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport][data-open]{translate:0 0}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport][data-open][data-positioned]{animation-name:slotted-navigation-menu-enter-from-start}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport]:before{block-size:auto;inline-size:calc(var(--_offset) + var(--_border-width));inset-block:0;inset-inline:auto 100%}[data-ui=navigation-menu][data-orientation=vertical]:not([data-placement=below])>[data-part=viewport]>[data-part=arrow]{inset-block-start:calc(var(--slotted-navigation-menu-arrow-offset, 50%) - var(--_arrow-size) / 2);inset-inline-start:calc(var(--_arrow-size) / -2 - var(--_border-width) / 2);rotate:calc(var(--_inline-sign) * -45deg)}[data-ui=navigation-menu][data-orientation=vertical][data-placement=below]:not([data-nested])>[data-part=list]>[data-part=item]>[data-part=trigger][data-open]>[data-part=indicator]>[data-ui=icon]{rotate:calc(var(--_inline-sign) * .25turn)}[data-ui=navigation-menu][data-nested]{--_nested-list-size: var(--slotted-navigation-menu-nested-list-size, 11rem);grid-column:1 / -1;min-block-size:var(--slotted-navigation-menu-viewport-block-size, auto)}[data-ui=navigation-menu][data-nested]:before{background-color:var(--_border-color);content:\"\";inline-size:var(--_border-width);inset-block:0;inset-inline-start:calc(var(--_nested-list-size) + var(--_inset) / 2);position:absolute}[data-ui=navigation-menu][data-nested]>[data-part=list]{align-self:flex-start;inline-size:var(--_nested-list-size)}[data-ui=navigation-menu][data-nested]>[data-part=viewport]{display:none}[data-ui=navigation-menu][data-nested]>[data-part=list]>[data-part=item]>[data-part=content]{border:0;border-radius:0;clip-path:none;inline-size:calc(100% - var(--_nested-list-size) - var(--_inset));inset-block-start:0;inset-inline-start:calc(var(--_nested-list-size) + var(--_inset));padding-block:0;padding-inline:var(--_inset) 0}@media(prefers-reduced-motion:reduce){[data-ui=navigation-menu]>[data-part=viewport],[data-ui=navigation-menu][data-orientation=vertical]>[data-part=viewport]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=navigation-menu]>[data-part=viewport][data-open][data-positioned],[data-ui=navigation-menu][data-orientation=vertical]>[data-part=viewport][data-open][data-positioned]{animation-name:slotted-navigation-menu-fade}[data-ui=navigation-menu] [data-part=content]:is([data-motion=from-end],[data-motion=from-start]){animation-name:slotted-navigation-menu-fade}[data-ui=navigation-menu] [data-part=content]:is([data-motion=to-end],[data-motion=to-start]){animation:none;opacity:0}}}\n"] }]
+        }] });
+/* ── Search ─────────────────────────────────────────────────────────────── */
+/** The button that closes the search where it has taken the bar. */
+class SlTopNavigationSearchClose extends TopNavigationControl {
+    text = computed(() => this.navigation.t('closeSearch'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.navigation.setSearchOpen(false, activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationSearchClose, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigationSearchClose, isStandalone: true, selector: "button[slTopNavigationSearchClose]", host: { attributes: { "data-part": "search-close", "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.aria-label": "text()" } }, providers: HINT_PROVIDERS, usesInheritance: true, hostDirectives: [{ directive: i2.SlTooltip }], ngImport: i0, template: "<span slIcon><svg slGlyph name=\"x\"></svg></span><ng-content />\n@if (hint()) {\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>{{ text() }}</div>\n  </ng-template>\n}", 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: SlTopNavigationSearchClose, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTopNavigationSearchClose]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon, SlTooltipLayer, SlTooltipContent],
+                    template: markedHintTemplate('x'),
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: HINT_PROVIDERS,
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'search-close',
+                        type: 'button',
+                        '[attr.aria-label]': 'text()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+/** The button that opens the search where the width has folded the field. */
+class SlTopNavigationSearchToggle extends TopNavigationControl {
+    text = computed(() => this.navigation.t('search'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.navigation.searchToggleNode.set(this.native);
+        inject(DestroyRef).onDestroy(() => this.navigation.searchToggleNode.set(null));
+    }
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.navigation.setSearchOpen(true, activationReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationSearchToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigationSearchToggle, isStandalone: true, selector: "button[slTopNavigationSearchToggle]", host: { attributes: { "data-part": "search-toggle", "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.aria-label": "text()" } }, providers: HINT_PROVIDERS, usesInheritance: true, hostDirectives: [{ directive: i2.SlTooltip }], ngImport: i0, template: "<span slIcon><svg slGlyph name=\"search\"></svg></span><ng-content />\n@if (hint()) {\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>{{ text() }}</div>\n  </ng-template>\n}", 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: SlTopNavigationSearchToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTopNavigationSearchToggle]',
+                    standalone: true,
+                    imports: [SlGlyph, SlIcon, SlTooltipLayer, SlTooltipContent],
+                    template: markedHintTemplate('search'),
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: HINT_PROVIDERS,
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'search-toggle',
+                        type: 'button',
+                        '[attr.aria-label]': 'text()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * The search region, with the consumer's field inside and the close at its
+ * end. Below the medium step the region exists only while `searchOpen`, and
+ * takes the whole bar: opening moves focus into the field, and Escape, focus
+ * leaving the region, or the close hand the bar back and return focus to the
+ * toggle.
+ */
+class SlTopNavigationSearch {
+    navigation = inject(SlTopNavigation);
+    native = inject(ElementRef).nativeElement;
+    /** Whether the region has taken the bar. */
+    active = computed(() => this.navigation.searchTakesBar(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.navigation.hasSearch.set(true);
+        this.navigation.searchNode.set(this.native);
+        /* The field takes focus the moment it takes the bar; the toggle takes it back when the bar returns. */
+        let wasActive = this.active();
+        effect(() => {
+            const active = this.active();
+            const before = wasActive;
+            wasActive = active;
+            if (active) {
+                this.native.querySelector('input, [contenteditable]')?.focus();
+                return;
+            }
+            if (!before)
+                return;
+            const focused = this.native.ownerDocument.activeElement;
+            if (focused === null ||
+                focused === this.native.ownerDocument.body ||
+                this.native.contains(focused)) {
+                untracked(() => this.navigation.searchToggleNode())?.focus();
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.navigation.hasSearch.set(false);
+            if (this.navigation.searchNode() === this.native)
+                this.navigation.searchNode.set(null);
+        });
+    }
+    onKeyDown(event) {
+        if (event.defaultPrevented || !this.active() || event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        this.navigation.setSearchOpen(false, 'escape', event);
+    }
+    onFocusOut(event) {
+        if (event.defaultPrevented || !this.active())
+            return;
+        const next = event.relatedTarget;
+        if (next === null || this.native.contains(next))
+            return;
+        this.navigation.setSearchOpen(false, 'blur', event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationSearch, isStandalone: true, selector: "[slTopNavigationSearch]", host: { attributes: { "data-part": "search" }, listeners: { "keydown": "onKeyDown($event)", "focusout": "onFocusOut($event)" } }, exportAs: ["slTopNavigationSearch"], ngImport: i0, template: `<ng-content /><button slTopNavigationSearchClose type="button"></button>`, isInline: true, dependencies: [{ kind: "component", type: SlTopNavigationSearchClose, selector: "button[slTopNavigationSearchClose]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationSearch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTopNavigationSearch]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationSearch',
+                    imports: [SlTopNavigationSearchClose],
+                    template: `<ng-content /><button slTopNavigationSearchClose type="button"></button>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'search',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focusout)': 'onFocusOut($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/* ── Actions ────────────────────────────────────────────────────────────── */
+/** The end cluster. The search toggle stands first in it whenever the bar has a search. */
+class SlTopNavigationActions {
+    navigation = inject(SlTopNavigation);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigationActions, isStandalone: true, selector: "[slTopNavigationActions]", host: { attributes: { "data-part": "actions" } }, exportAs: ["slTopNavigationActions"], ngImport: i0, template: `@if (navigation.hasSearch()) {
+      <button slTopNavigationSearchToggle type="button"></button>
+    }
+    <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: SlTopNavigationSearchToggle, selector: "button[slTopNavigationSearchToggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationActions, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slTopNavigationActions]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationActions',
+                    imports: [SlTopNavigationSearchToggle],
+                    template: `@if (navigation.hasSearch()) {
+      <button slTopNavigationSearchToggle type="button"></button>
+    }
+    <ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { 'data-part': 'actions' },
+                }]
+        }] });
+/**
+ * Help: a destination on an `a`, a trigger on a `button` the consumer puts
+ * `slMenuTriggerFor` or a popover trigger on. Its projected content is its
+ * label — the family's message when there is none — clipped from the eye in
+ * the bar and shown as a row's words in the panel below the high step, where
+ * it is moved while the panel is present.
+ */
+class SlTopNavigationHelp extends TopNavigationControl {
+    home = new Home(this.native);
+    text = computed(() => this.writtenLabel ?? this.navigation.t('help'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** The words shown when the consumer projected none. */
+    fallback = computed(() => this.writtenLabel === null ? this.navigation.t('help') : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    inPanel = computed(() => this.navigation.narrowest() &&
+        this.navigation.panelPresent() &&
+        this.navigation.panelNode() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inPanel" }] : /* istanbul ignore next */ []));
+    hint = computed(() => !this.inPanel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.navigation.hasHelp.set(true);
+        afterNextRender(() => this.native.setAttribute('data-part', 'help'));
+        effect(() => {
+            const panel = this.navigation.panelNode();
+            if (this.inPanel() && panel !== null)
+                this.home.moveTo(panel, null);
+            else
+                this.home.moveBack();
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.navigation.hasHelp.set(false);
+            this.home.moveBack();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationHelp, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigationHelp, isStandalone: true, selector: "a[slTopNavigationHelp], button[slTopNavigationHelp]", host: { attributes: { "data-part": "help" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.aria-describedby": "describedBy()" } }, providers: HINT_PROVIDERS, exportAs: ["slTopNavigationHelp"], usesInheritance: true, hostDirectives: [{ directive: i2.SlTooltip }], ngImport: i0, template: `<span slIcon><svg slGlyph name="circle-question"></svg></span
+    ><ng-content>{{ fallback() }}</ng-content>
+    @if (hint()) {
+      <ng-template slTooltipLayer>
+        <div slTooltipContent>{{ text() }}</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: SlTopNavigationHelp, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[slTopNavigationHelp], button[slTopNavigationHelp]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationHelp',
+                    imports: [SlGlyph, SlIcon, SlTooltipLayer, SlTooltipContent],
+                    template: `<span slIcon><svg slGlyph name="circle-question"></svg></span
+    ><ng-content>{{ fallback() }}</ng-content>
+    @if (hint()) {
+      <ng-template slTooltipLayer>
+        <div slTooltipContent>{{ text() }}</div>
+      </ng-template>
+    }`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: HINT_PROVIDERS,
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'help',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/** Notifications: the bell, with the count in its corner. It never folds. */
+class SlTopNavigationNotifications extends TopNavigationControl {
+    text = computed(() => this.writtenLabel ?? this.navigation.t('notifications'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterNextRender(() => this.native.setAttribute('data-part', 'notifications'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationNotifications, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigationNotifications, isStandalone: true, selector: "button[slTopNavigationNotifications]", host: { attributes: { "data-part": "notifications", "type": "button" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.aria-describedby": "describedBy()", "attr.aria-label": "text()" } }, providers: HINT_PROVIDERS, exportAs: ["slTopNavigationNotifications"], usesInheritance: true, hostDirectives: [{ directive: i2.SlTooltip }], ngImport: i0, template: "<span slIcon><svg slGlyph name=\"bell\"></svg></span><ng-content />\n@if (hint()) {\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>{{ text() }}</div>\n  </ng-template>\n}", 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: SlTopNavigationNotifications, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTopNavigationNotifications]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationNotifications',
+                    imports: [SlGlyph, SlIcon, SlTooltipLayer, SlTooltipContent],
+                    template: markedHintTemplate('bell'),
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: HINT_PROVIDERS,
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'notifications',
+                        type: 'button',
+                        '[attr.aria-label]': 'text()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * A global control of the product's own — approvals, tasks — in the family's
+ * square, with the family's ink, ground and hint. A destination on an `a`, a
+ * trigger on a `button`. The consumer projects its own glyph and names the
+ * control: `label` when the words change with a count, `aria-label` when
+ * they do not. `slTopNavigationCount` inside it stands over its corner the
+ * way it stands over the bell.
+ */
+class SlTopNavigationAction extends TopNavigationControl {
+    /** The words the control is named by; over `aria-label`, which is read once. */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    type = this.native.tagName === 'BUTTON' ? 'button' : null;
+    text = computed(() => this.label() ?? this.writtenLabel ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** No words, no hint: a control with no name has nothing to repeat. */
+    hint = computed(() => this.text() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterNextRender(() => this.native.setAttribute('data-part', 'action'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationAction, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigationAction, isStandalone: true, selector: "a[slTopNavigationAction], button[slTopNavigationAction]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "action" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.aria-describedby": "describedBy()", "attr.type": "type", "attr.aria-label": "text() || null" } }, providers: HINT_PROVIDERS, exportAs: ["slTopNavigationAction"], usesInheritance: true, hostDirectives: [{ directive: i2.SlTooltip }], ngImport: i0, template: "<ng-content />\n@if (hint()) {\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>{{ text() }}</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: SlTopNavigationAction, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[slTopNavigationAction], button[slTopNavigationAction]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationAction',
+                    imports: [SlTooltipLayer, SlTooltipContent],
+                    template: HINT_TEMPLATE,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: HINT_PROVIDERS,
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'action',
+                        '[attr.type]': 'type',
+                        '[attr.aria-label]': 'text() || null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+/** The number of what is waiting, inside the bell's button and so inside its name. */
+class SlTopNavigationCount {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationCount, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTopNavigationCount, isStandalone: true, selector: "[slTopNavigationCount]", host: { attributes: { "data-part": "count" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationCount, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTopNavigationCount]',
+                    standalone: true,
+                    host: { 'data-part': 'count' },
+                }]
+        }] });
+/** The account: the consumer's avatar and, when there is room, the name. It never folds. */
+class SlTopNavigationAccount extends TopNavigationControl {
+    text = computed(() => this.writtenLabel ?? this.navigation.t('account'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        afterNextRender(() => this.native.setAttribute('data-part', 'account'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTopNavigationAccount, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTopNavigationAccount, isStandalone: true, selector: "button[slTopNavigationAccount]", host: { attributes: { "data-part": "account", "type": "button" }, listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "pointercancel": "onPointerUp()", "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.aria-describedby": "describedBy()", "attr.aria-label": "text()" } }, providers: HINT_PROVIDERS, exportAs: ["slTopNavigationAccount"], usesInheritance: true, hostDirectives: [{ directive: i2.SlTooltip }], ngImport: i0, template: "<ng-content />\n@if (hint()) {\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>{{ text() }}</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: SlTopNavigationAccount, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[slTopNavigationAccount]',
+                    standalone: true,
+                    exportAs: 'slTopNavigationAccount',
+                    imports: [SlTooltipLayer, SlTooltipContent],
+                    template: HINT_TEMPLATE,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [SlTooltip],
+                    providers: HINT_PROVIDERS,
+                    host: {
+                        ...HINT_HOST,
+                        'data-part': 'account',
+                        type: 'button',
+                        '[attr.aria-label]': 'text()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTopNavigation, SlTopNavigationAccount, SlTopNavigationAction, SlTopNavigationActions, SlTopNavigationBrand, SlTopNavigationContext, SlTopNavigationCount, SlTopNavigationHelp, SlTopNavigationHome, SlTopNavigationIdFactory, SlTopNavigationItem, SlTopNavigationLink, SlTopNavigationList, SlTopNavigationMark, SlTopNavigationMore, SlTopNavigationName, SlTopNavigationNav, SlTopNavigationNotifications, SlTopNavigationSearch, SlTopNavigationSearchClose, SlTopNavigationSearchToggle, SlTopNavigationTrigger, TOP_NAVIGATION_COLLAPSE_AT, TOP_NAVIGATION_CONTROL_SELECTOR, TOP_NAVIGATION_DEFAULTS, TOP_NAVIGATION_FALLBACK, injectTopNavigationDefaults, provideTopNavigationDefaults };
+//# sourceMappingURL=slotted-angular-top-navigation.mjs.map