@servicetitan/navigation 14.2.0 → 14.3.0

package/dist/components/titan-layout/navigation-catalog/navigation-catalog-footer.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, Text } from '@servicetitan/anvil2';
+import IconUndo from '@servicetitan/anvil2/assets/icons/material/round/undo.svg';
+import { Fragment, useEffect, useId, useRef, useState } from 'react';
+import * as styles from './navigation-catalog.module.less';
+export const NavigationCatalogFooter = ({ onRestore })=>{
+    const [confirming, setConfirming] = useState(false);
+    const cancelRef = useRef(null);
+    const restoreRef = useRef(null);
+    const returnFocus = useRef(false);
+    const confirmationId = useId();
+    useEffect(()=>{
+        if (confirming) {
+            var _cancelRef_current;
+            (_cancelRef_current = cancelRef.current) === null || _cancelRef_current === void 0 ? void 0 : _cancelRef_current.focus();
+        } else if (returnFocus.current) {
+            var _restoreRef_current;
+            (_restoreRef_current = restoreRef.current) === null || _restoreRef_current === void 0 ? void 0 : _restoreRef_current.focus();
+            returnFocus.current = false;
+        }
+    }, [
+        confirming
+    ]);
+    useEffect(()=>{
+        if (!onRestore) {
+            setConfirming(false);
+        }
+    }, [
+        onRestore
+    ]);
+    return /*#__PURE__*/ _jsx(Dialog.Footer, {
+        className: styles.footer,
+        "data-cy": "navigation-catalog-footer",
+        children: confirming && onRestore ? /*#__PURE__*/ _jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    size: "small",
+                    id: confirmationId,
+                    children: "This action replaces your current favorites. You can favorite items again anytime."
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.footerActions,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            ref: cancelRef,
+                            appearance: "secondary",
+                            size: "xsmall",
+                            "aria-describedby": confirmationId,
+                            onClick: ()=>{
+                                returnFocus.current = true;
+                                setConfirming(false);
+                            },
+                            children: "Cancel"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            appearance: "primary",
+                            size: "xsmall",
+                            "aria-describedby": confirmationId,
+                            onClick: ()=>{
+                                setConfirming(false);
+                                onRestore();
+                            },
+                            children: "Restore"
+                        })
+                    ]
+                })
+            ]
+        }) : /*#__PURE__*/ _jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    size: "small",
+                    subdued: true,
+                    children: "Add or remove items to your navigation by clicking the star icon to the right"
+                }),
+                onRestore && /*#__PURE__*/ _jsx(Button, {
+                    ref: restoreRef,
+                    appearance: "secondary",
+                    size: "xsmall",
+                    icon: IconUndo,
+                    onClick: ()=>setConfirming(true),
+                    children: "Restore Default Favorites"
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=navigation-catalog-footer.js.map

package/dist/components/titan-layout/navigation-catalog/navigation-catalog-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/titan-layout/navigation-catalog/navigation-catalog-footer.tsx"],"sourcesContent":["import { Button, Dialog, Text } from '@servicetitan/anvil2';\nimport IconUndo from '@servicetitan/anvil2/assets/icons/material/round/undo.svg';\nimport { FC, Fragment, useEffect, useId, useRef, useState } from 'react';\nimport * as styles from './navigation-catalog.module.less';\n\ninterface NavigationCatalogFooterProps {\n    /** Present only when the current favorites differ from the host's defaults. */\n    onRestore?: () => void;\n}\n\nexport const NavigationCatalogFooter: FC<NavigationCatalogFooterProps> = ({ onRestore }) => {\n    const [confirming, setConfirming] = useState(false);\n    const cancelRef = useRef<HTMLButtonElement>(null);\n    const restoreRef = useRef<HTMLButtonElement>(null);\n    const returnFocus = useRef(false);\n    const confirmationId = useId();\n\n    useEffect(() => {\n        if (confirming) {\n            cancelRef.current?.focus();\n        } else if (returnFocus.current) {\n            restoreRef.current?.focus();\n            returnFocus.current = false;\n        }\n    }, [confirming]);\n\n    useEffect(() => {\n        if (!onRestore) {\n            setConfirming(false);\n        }\n    }, [onRestore]);\n\n    return (\n        <Dialog.Footer className={styles.footer} data-cy=\"navigation-catalog-footer\">\n            {confirming && onRestore ? (\n                <Fragment>\n                    <Text size=\"small\" id={confirmationId}>\n                        This action replaces your current favorites. You can favorite items again\n                        anytime.\n                    </Text>\n                    <div className={styles.footerActions}>\n                        <Button\n                            ref={cancelRef}\n                            appearance=\"secondary\"\n                            size=\"xsmall\"\n                            aria-describedby={confirmationId}\n                            onClick={() => {\n                                returnFocus.current = true;\n                                setConfirming(false);\n                            }}\n                        >\n                            Cancel\n                        </Button>\n                        <Button\n                            appearance=\"primary\"\n                            size=\"xsmall\"\n                            aria-describedby={confirmationId}\n                            onClick={() => {\n                                setConfirming(false);\n                                onRestore();\n                            }}\n                        >\n                            Restore\n                        </Button>\n                    </div>\n                </Fragment>\n            ) : (\n                <Fragment>\n                    <Text size=\"small\" subdued>\n                        Add or remove items to your navigation by clicking the star icon to the\n                        right\n                    </Text>\n                    {onRestore && (\n                        <Button\n                            ref={restoreRef}\n                            appearance=\"secondary\"\n                            size=\"xsmall\"\n                            icon={IconUndo}\n                            onClick={() => setConfirming(true)}\n                        >\n                            Restore Default Favorites\n                        </Button>\n                    )}\n                </Fragment>\n            )}\n        </Dialog.Footer>\n    );\n};\n"],"names":["Button","Dialog","Text","IconUndo","Fragment","useEffect","useId","useRef","useState","styles","NavigationCatalogFooter","onRestore","confirming","setConfirming","cancelRef","restoreRef","returnFocus","confirmationId","current","focus","Footer","className","footer","data-cy","size","id","div","footerActions","ref","appearance","aria-describedby","onClick","subdued","icon"],"mappings":";AAAA,SAASA,MAAM,EAAEC,MAAM,EAAEC,IAAI,QAAQ,uBAAuB;AAC5D,OAAOC,cAAc,4DAA4D;AACjF,SAAaC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACzE,YAAYC,YAAY,mCAAmC;AAO3D,OAAO,MAAMC,0BAA4D,CAAC,EAAEC,SAAS,EAAE;IACnF,MAAM,CAACC,YAAYC,cAAc,GAAGL,SAAS;IAC7C,MAAMM,YAAYP,OAA0B;IAC5C,MAAMQ,aAAaR,OAA0B;IAC7C,MAAMS,cAAcT,OAAO;IAC3B,MAAMU,iBAAiBX;IAEvBD,UAAU;QACN,IAAIO,YAAY;gBACZE;aAAAA,qBAAAA,UAAUI,OAAO,cAAjBJ,yCAAAA,mBAAmBK,KAAK;QAC5B,OAAO,IAAIH,YAAYE,OAAO,EAAE;gBAC5BH;aAAAA,sBAAAA,WAAWG,OAAO,cAAlBH,0CAAAA,oBAAoBI,KAAK;YACzBH,YAAYE,OAAO,GAAG;QAC1B;IACJ,GAAG;QAACN;KAAW;IAEfP,UAAU;QACN,IAAI,CAACM,WAAW;YACZE,cAAc;QAClB;IACJ,GAAG;QAACF;KAAU;IAEd,qBACI,KAACV,OAAOmB,MAAM;QAACC,WAAWZ,OAAOa,MAAM;QAAEC,WAAQ;kBAC5CX,cAAcD,0BACX,MAACP;;8BACG,KAACF;oBAAKsB,MAAK;oBAAQC,IAAIR;8BAAgB;;8BAIvC,MAACS;oBAAIL,WAAWZ,OAAOkB,aAAa;;sCAChC,KAAC3B;4BACG4B,KAAKd;4BACLe,YAAW;4BACXL,MAAK;4BACLM,oBAAkBb;4BAClBc,SAAS;gCACLf,YAAYE,OAAO,GAAG;gCACtBL,cAAc;4BAClB;sCACH;;sCAGD,KAACb;4BACG6B,YAAW;4BACXL,MAAK;4BACLM,oBAAkBb;4BAClBc,SAAS;gCACLlB,cAAc;gCACdF;4BACJ;sCACH;;;;;2BAMT,MAACP;;8BACG,KAACF;oBAAKsB,MAAK;oBAAQQ,OAAO;8BAAC;;gBAI1BrB,2BACG,KAACX;oBACG4B,KAAKb;oBACLc,YAAW;oBACXL,MAAK;oBACLS,MAAM9B;oBACN4B,SAAS,IAAMlB,cAAc;8BAChC;;;;;AAQzB,EAAE"}

package/dist/components/titan-layout/navigation-catalog/navigation-catalog-trigger.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import { PinnedNavigationConfig } from '../interface';
+export interface NavigationCatalogTriggerProps extends PinnedNavigationConfig {
+    /** Whether the rail is expanded; the compact trigger keeps its label below the icon. */
+    expanded: boolean;
+    /** Optional sidebar action beside the expanded search trigger. */
+    trailingAction?: ReactNode;
+}
+/**
+ * Sidebar entry point for the navigation catalog.
+ *
+ * Presented as a labelled control rather than a bare icon: the catalog is the only route to an
+ * unpinned destination, so the affordance has to read as "search everything" at a glance. It is a
+ * button and not an input — the real field lives in the dialog and takes focus on open, and two
+ * inputs would mean typing in one and getting results in the other.
+ *
+ * The catalog is never opened automatically; an unpinned navigation is a deliberate state, and this
+ * trigger plus its shortcut are what keep the user from being stranded there.
+ */
+export declare const NavigationCatalogTrigger: FC<NavigationCatalogTriggerProps>;
+//# sourceMappingURL=navigation-catalog-trigger.d.ts.map

package/dist/components/titan-layout/navigation-catalog/navigation-catalog-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-catalog-trigger.d.ts","sourceRoot":"","sources":["../../../../src/components/titan-layout/navigation-catalog/navigation-catalog-trigger.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAY,SAAS,EAA4C,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AA8BtD,MAAM,WAAW,6BAA8B,SAAQ,sBAAsB;IACzE,wFAAwF;IACxF,QAAQ,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,cAAc,CAAC,EAAE,SAAS,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CAqHtE,CAAC"}

package/dist/components/titan-layout/navigation-catalog/navigation-catalog-trigger.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Chip, Flex, Text, ThemeProvider } from '@servicetitan/anvil2';
+import IconSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
+import classNames from 'classnames';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { NavigationCatalog } from './navigation-catalog';
+import * as styles from './navigation-catalog-trigger.module.less';
+/**
+ * True when the keystroke should open the catalog rather than reach the focused control.
+ *
+ * The shortcut is deliberately a modifier chord: a bare key would be swallowed by, or would steal
+ * from, every text field on the page.
+ */ const isCatalogShortcut = (event)=>(event.metaKey || event.ctrlKey) && !event.altKey && event.key.toLowerCase() === 'k';
+/**
+ * The chord as the user's own keyboard prints it.
+ *
+ * The listener accepts either modifier on every platform, so this only decides which one to
+ * advertise. `platform` is deprecated but is still the only reliable signal here; the user agent is
+ * the fallback and a wrong guess costs nothing but a mislabelled badge.
+ */ const shortcutLabel = ()=>{
+    const platform = typeof window.navigator === 'undefined' ? '' : window.navigator.platform || window.navigator.userAgent;
+    return /Mac|iPod|iPhone|iPad/.test(platform) ? '⌘ K' : 'Ctrl K';
+};
+/**
+ * Sidebar entry point for the navigation catalog.
+ *
+ * Presented as a labelled control rather than a bare icon: the catalog is the only route to an
+ * unpinned destination, so the affordance has to read as "search everything" at a glance. It is a
+ * button and not an input — the real field lives in the dialog and takes focus on open, and two
+ * inputs would mean typing in one and getting results in the other.
+ *
+ * The catalog is never opened automatically; an unpinned navigation is a deliberate state, and this
+ * trigger plus its shortcut are what keep the user from being stranded there.
+ */ export const NavigationCatalogTrigger = ({ expanded, trailingAction, ...catalog })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const wasOpen = useRef(false);
+    const close = useCallback(()=>setIsOpen(false), []);
+    const toggle = useCallback(()=>setIsOpen((open)=>!open), []);
+    useEffect(()=>{
+        // The dialog unmounts on close, so restore focus after its modal content is removed.
+        if (wasOpen.current && !isOpen) {
+            var _triggerRef_current;
+            (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+        }
+        wasOpen.current = isOpen;
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        const handler = (event)=>{
+            if (!isCatalogShortcut(event)) {
+                return;
+            }
+            event.preventDefault();
+            toggle();
+        };
+        window.addEventListener('keydown', handler);
+        return ()=>window.removeEventListener('keydown', handler);
+    }, [
+        toggle
+    ]);
+    /*
+     * Labelled explicitly so the name stays "Go to" whether or not the text is rendered, and so the
+     * shortcut badge never reads out as part of it.
+     */ const buttonProps = {
+        /*
+         * Not `navigation-item-*`: that prefix belongs to the rail's links, and this is a control
+         * that opens a dialog rather than a destination, so sharing the namespace invites a
+         * selector written for a link to match it.
+         */ 'data-cy': 'navigation-catalog-trigger',
+        'data-pendo': 'navigation-catalog-trigger',
+        'appearance': 'secondary',
+        'size': 'small',
+        'aria-label': 'Go to',
+        'aria-haspopup': 'dialog',
+        'aria-expanded': isOpen,
+        'aria-keyshortcuts': 'Meta+K Control+K',
+        'onClick': toggle
+    };
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: classNames(styles.container, !expanded && styles.containerCollapsed),
+                children: [
+                    expanded ? /*#__PURE__*/ _jsx(Button, {
+                        ...buttonProps,
+                        ref: triggerRef,
+                        icon: {
+                            before: IconSearch
+                        },
+                        className: styles.trigger,
+                        children: /*#__PURE__*/ _jsxs(Flex, {
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            gap: 1,
+                            grow: 1,
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    inline: true,
+                                    size: "small",
+                                    className: styles.triggerLabel,
+                                    children: "Go to..."
+                                }),
+                                /*#__PURE__*/ _jsx(Chip, {
+                                    label: shortcutLabel(),
+                                    size: "small",
+                                    className: styles.shortcut
+                                })
+                            ]
+                        })
+                    }) : /*#__PURE__*/ _jsx(Button, {
+                        ...buttonProps,
+                        ref: triggerRef,
+                        appearance: "ghost",
+                        icon: IconSearch,
+                        className: styles.triggerCollapsed,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            className: styles.collapsedLabel,
+                            children: "Go to..."
+                        })
+                    }),
+                    expanded && trailingAction
+                ]
+            }),
+            isOpen && /*#__PURE__*/ _jsx(ThemeProvider, {
+                mode: "dark",
+                children: /*#__PURE__*/ _jsx(NavigationCatalog, {
+                    open: true,
+                    onClose: close,
+                    ...catalog
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=navigation-catalog-trigger.js.map

package/dist/components/titan-layout/navigation-catalog/navigation-catalog-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/titan-layout/navigation-catalog/navigation-catalog-trigger.tsx"],"sourcesContent":["import { Button, Chip, Flex, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport IconSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';\nimport classNames from 'classnames';\nimport { FC, Fragment, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { PinnedNavigationConfig } from '../interface';\nimport { NavigationCatalog } from './navigation-catalog';\n\nimport * as styles from './navigation-catalog-trigger.module.less';\n\n/**\n * True when the keystroke should open the catalog rather than reach the focused control.\n *\n * The shortcut is deliberately a modifier chord: a bare key would be swallowed by, or would steal\n * from, every text field on the page.\n */\nconst isCatalogShortcut = (event: KeyboardEvent): boolean =>\n    (event.metaKey || event.ctrlKey) && !event.altKey && event.key.toLowerCase() === 'k';\n\n/**\n * The chord as the user's own keyboard prints it.\n *\n * The listener accepts either modifier on every platform, so this only decides which one to\n * advertise. `platform` is deprecated but is still the only reliable signal here; the user agent is\n * the fallback and a wrong guess costs nothing but a mislabelled badge.\n */\nconst shortcutLabel = (): string => {\n    const platform =\n        typeof window.navigator === 'undefined'\n            ? ''\n            : window.navigator.platform || window.navigator.userAgent;\n\n    return /Mac|iPod|iPhone|iPad/.test(platform) ? '⌘ K' : 'Ctrl K';\n};\n\nexport interface NavigationCatalogTriggerProps extends PinnedNavigationConfig {\n    /** Whether the rail is expanded; the compact trigger keeps its label below the icon. */\n    expanded: boolean;\n    /** Optional sidebar action beside the expanded search trigger. */\n    trailingAction?: ReactNode;\n}\n\n/**\n * Sidebar entry point for the navigation catalog.\n *\n * Presented as a labelled control rather than a bare icon: the catalog is the only route to an\n * unpinned destination, so the affordance has to read as \"search everything\" at a glance. It is a\n * button and not an input — the real field lives in the dialog and takes focus on open, and two\n * inputs would mean typing in one and getting results in the other.\n *\n * The catalog is never opened automatically; an unpinned navigation is a deliberate state, and this\n * trigger plus its shortcut are what keep the user from being stranded there.\n */\nexport const NavigationCatalogTrigger: FC<NavigationCatalogTriggerProps> = ({\n    expanded,\n    trailingAction,\n    ...catalog\n}) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const wasOpen = useRef(false);\n\n    const close = useCallback(() => setIsOpen(false), []);\n    const toggle = useCallback(() => setIsOpen(open => !open), []);\n\n    useEffect(() => {\n        // The dialog unmounts on close, so restore focus after its modal content is removed.\n        if (wasOpen.current && !isOpen) {\n            triggerRef.current?.focus();\n        }\n        wasOpen.current = isOpen;\n    }, [isOpen]);\n\n    useEffect(() => {\n        const handler = (event: KeyboardEvent) => {\n            if (!isCatalogShortcut(event)) {\n                return;\n            }\n\n            event.preventDefault();\n            toggle();\n        };\n\n        window.addEventListener('keydown', handler);\n        return () => window.removeEventListener('keydown', handler);\n    }, [toggle]);\n\n    /*\n     * Labelled explicitly so the name stays \"Go to\" whether or not the text is rendered, and so the\n     * shortcut badge never reads out as part of it.\n     */\n    const buttonProps = {\n        /*\n         * Not `navigation-item-*`: that prefix belongs to the rail's links, and this is a control\n         * that opens a dialog rather than a destination, so sharing the namespace invites a\n         * selector written for a link to match it.\n         */\n        'data-cy': 'navigation-catalog-trigger',\n        'data-pendo': 'navigation-catalog-trigger',\n        'appearance': 'secondary',\n        'size': 'small',\n        'aria-label': 'Go to',\n        'aria-haspopup': 'dialog',\n        'aria-expanded': isOpen,\n        'aria-keyshortcuts': 'Meta+K Control+K',\n        'onClick': toggle,\n    } as const;\n\n    return (\n        <Fragment>\n            <div className={classNames(styles.container, !expanded && styles.containerCollapsed)}>\n                {expanded ? (\n                    <Button\n                        {...buttonProps}\n                        ref={triggerRef}\n                        icon={{ before: IconSearch }}\n                        className={styles.trigger}\n                    >\n                        <Flex alignItems=\"center\" justifyContent=\"space-between\" gap={1} grow={1}>\n                            {/* The ellipsis is part of the label, matching the field in the dialog. */}\n                            <Text inline size=\"small\" className={styles.triggerLabel}>\n                                Go to...\n                            </Text>\n                            {/* Decorative: the chord is already on the button as aria-keyshortcuts. */}\n                            <Chip\n                                label={shortcutLabel()}\n                                size=\"small\"\n                                className={styles.shortcut}\n                            />\n                        </Flex>\n                    </Button>\n                ) : (\n                    <Button\n                        {...buttonProps}\n                        ref={triggerRef}\n                        appearance=\"ghost\"\n                        icon={IconSearch}\n                        className={styles.triggerCollapsed}\n                    >\n                        <span className={styles.collapsedLabel}>Go to...</span>\n                    </Button>\n                )}\n                {expanded && trailingAction}\n            </div>\n            {/*\n             * Mounted only while open, so a host that resolves its catalog lazily is not asked for\n             * it on every page load, and a second navigation tree is not held inside the sidebar's\n             * subtree for a dialog nobody opened.\n             *\n             * Dark, because the catalog belongs to the rail rather than to the page. The rail paints\n             * itself dark whatever the application's mode is, and this is the rail's own menu — the\n             * same `ThemeProvider` the rail uses on its own sections.\n             *\n             * A `ThemeProvider` rather than a second `AnvilProvider`: the latter is the\n             * application-level provider, and mounting a nested one alongside the host's meant its\n             * unmount tore down state the outer one was still relying on, so closing the catalog\n             * left the rail unstyled.\n             *\n             * This only sets the mode, which is what makes the *text* tokens light. The surface is\n             * matched to the rail separately, in `navigation-catalog.module.less` — anvil2's dark is\n             * a neutral grey and the rail's is a navy, so the mode alone would leave two visibly\n             * different darks.\n             */}\n            {isOpen && (\n                <ThemeProvider mode=\"dark\">\n                    <NavigationCatalog open onClose={close} {...catalog} />\n                </ThemeProvider>\n            )}\n        </Fragment>\n    );\n};\n"],"names":["Button","Chip","Flex","Text","ThemeProvider","IconSearch","classNames","Fragment","useCallback","useEffect","useRef","useState","NavigationCatalog","styles","isCatalogShortcut","event","metaKey","ctrlKey","altKey","key","toLowerCase","shortcutLabel","platform","window","navigator","userAgent","test","NavigationCatalogTrigger","expanded","trailingAction","catalog","isOpen","setIsOpen","triggerRef","wasOpen","close","toggle","open","current","focus","handler","preventDefault","addEventListener","removeEventListener","buttonProps","div","className","container","containerCollapsed","ref","icon","before","trigger","alignItems","justifyContent","gap","grow","inline","size","triggerLabel","label","shortcut","appearance","triggerCollapsed","span","collapsedLabel","mode","onClose"],"mappings":"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"}

package/dist/components/titan-layout/navigation-catalog/navigation-catalog-trigger.module.less

@@ -0,0 +1,89 @@
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
+/*
+ * Scoped to `.anvil2.anvil2` so these rules outrank anvil2's own.
+ *
+ * anvil2 nests every component rule under `.anvil2`, giving it two classes of specificity,
+ * which a bare class here loses to. Doubling the scope wins outright and leaves the selectors
+ * inside it plain, rather than each one having to defend itself with `!important`.
+ */
+:global(.anvil2.anvil2) {
+    .container {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: @spacing-1 @spacing-1 @spacing-2;
+
+        > :last-child:not(:first-child) {
+            flex-shrink: 0;
+        }
+    }
+
+    /*
+     * The rail stretches its children to its own width, so the button follows rather than sizing to
+     * its label. Everything else about the control — surface, border, radius, focus ring, hover — is
+     * the anvil2 secondary button's own.
+     */
+    .trigger {
+        width: 100%;
+        min-width: 0;
+        flex: 1;
+    }
+
+    // The reference uses the core subdued swatch (#bcbcbd).
+    .triggerLabel {
+        color: @color-neutral-70;
+        line-height: @spacing-2;
+        white-space: nowrap;
+    }
+
+    /*
+     * Held back from the label so the chord reads as an aside rather than as part of the name, and
+     * kept from wrapping when the rail is at its narrowest expanded width.
+     */
+    .shortcut {
+        --a2-mod-chip-min-height: @spacing-2;
+        --a2-mod-chip-inner-padding-block: 1px;
+
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+
+    .containerCollapsed {
+        // Together with the button's 6px bottom inset, keep 12px before Dashboard's icon box.
+        padding: @spacing-0 @spacing-0 6px;
+    }
+
+    .triggerCollapsed {
+        width: 60px;
+        min-width: 0;
+        min-height: 48px;
+        box-sizing: border-box;
+        padding: 5px @spacing-half;
+        flex-direction: column;
+        gap: 2px;
+        color: @color-white;
+
+        [data-anv='icon'] {
+            width: 24px;
+            height: 24px;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        svg {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .collapsedLabel {
+        font-family: @base-font-family;
+        font-size: @typescale-0;
+        font-weight: @font-weight-regular;
+        line-height: 10px;
+        white-space: nowrap;
+    }
+}

package/dist/components/titan-layout/navigation-catalog/navigation-catalog-trigger.module.less.d.ts

@@ -0,0 +1,9 @@
+export const __esModule: true;
+export const collapsedLabel: string;
+export const container: string;
+export const containerCollapsed: string;
+export const shortcut: string;
+export const trigger: string;
+export const triggerCollapsed: string;
+export const triggerLabel: string;
+

package/dist/components/titan-layout/navigation-catalog/navigation-catalog.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { PinnedNavigationConfig } from '../interface';
+export interface NavigationCatalogProps extends PinnedNavigationConfig {
+    open: boolean;
+    onClose: () => void;
+}
+/**
+ * Every destination the host offers, grouped into sections, with a star on every row.
+ *
+ * The catalog shows what it is given and nothing more — the host has already resolved what this
+ * user may reach, so the catalog cannot offer a destination they do not have.
+ */
+export declare const NavigationCatalog: FC<NavigationCatalogProps>;
+//# sourceMappingURL=navigation-catalog.d.ts.map

package/dist/components/titan-layout/navigation-catalog/navigation-catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-catalog.d.ts","sourceRoot":"","sources":["../../../../src/components/titan-layout/navigation-catalog/navigation-catalog.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,EAAE,EAAmD,MAAM,OAAO,CAAC;AAI5E,OAAO,EAA0B,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAyO9E,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IAClE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA4MxD,CAAC"}