@servicetitan/navigation 14.2.0 → 14.4.0

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

@@ -0,0 +1,379 @@
+@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) {
+    // Four readable columns fit the desktop dialog; narrower dialogs wrap whole groups.
+    @catalog-column: 15rem;
+    @catalog-gap: 1.5rem;
+    @catalog-padding: @spacing-2;
+
+    /*
+     * The rail's own background, from `@bg-color` in `@servicetitan/navigation`'s
+     * `layout-sidebar.module.less`, its hover on top of it, and the trigger chip this catalog opens
+     * from.
+     *
+     * Repeated as literals because they are LESS variables private to that package, not custom
+     * properties, so there is nothing to reference at runtime. The rail paints them unconditionally and
+     * has done since it was written, so the risk of drift is low and the failure is cosmetic.
+     *
+     * They are here because the catalog is the rail's menu and should read as part of it. anvil2's dark
+     * mode is a neutral grey (#1a1a1a) and the rail is a navy, so taking the mode alone would put two
+     * different darks side by side on screen.
+     *
+     * Translucent white rather than a mixed-down navy throughout: a translucent layer tints whatever it
+     * covers, so these keep the surface's hue and only lift it, which is what makes them read as part of
+     * the same surface rather than as patches on it.
+     */
+    @rail-surface: #0f1d26;
+    @rail-hover: rgba(255, 255, 255, 0.08);
+    @rail-field: rgba(255, 255, 255, 0.06);
+    @rail-field-border: rgba(255, 255, 255, 0.16);
+
+    /**
+     * Repaints the dialog in the rail's navy instead of anvil2's neutral dark, and lightens its
+     * backdrop instead of anvil2's default near-black scrim.
+     *
+     * `--a2-dialog-background-color`, `--a2-dialog-border-color` and `--a2-dialog-backdrop-color` are
+     * the hooks anvil2's Dialog reads inside its own `var()` chains, ahead of the tokens they otherwise
+     * fall back to. Setting those rather than `background-color`/`::backdrop` directly means no
+     * specificity contest — nothing else defines these properties, they are only read — and the
+     * background one reaches the header and content panels too, which paint from the same variable.
+     *
+     * The border goes with the background. Left alone it resolves to a flat `#404040`, which is the
+     * last neutral grey on the surface and outlines the whole dialog in it. The same translucent white
+     * the field's edge uses puts the outline back in the surface's own colour.
+     *
+     * `--a2-color-neutral-0` for the backdrop is the same override anvil2's own `fullScreen` variant
+     * uses in place of its default `neutral-900` — a supported swap, not a hack.
+     */
+    .dialog {
+        --a2-dialog-background-color: @rail-surface;
+        --a2-dialog-border-color: @rail-field-border;
+        --a2-dialog-backdrop-color: var(--a2-color-neutral-0, #ffffff);
+
+        /*
+         * Pins the dialog's size to the viewport instead of its content, so opening it, searching, and
+         * clearing the search all leave it exactly where it was.
+         *
+         * anvil2 centres the dialog by giving it `inset: 0` and `margin: auto`; overriding `top` and
+         * `height` here (with the matching margins zeroed so they cannot re-introduce the auto-centring
+         * they replace) fixes the vertical position and size, while `left`/`right` stay on the anvil2
+         * default and keep centring horizontally. `--nav-offset-top` is the rail's own top-nav height
+         * custom property, already threaded through this package for the same purpose.
+         *
+         * `> *` reaches anvil2's own content wrapper, which otherwise sizes to its content rather than
+         * to this now-fixed height — there is no class hook for it, but the dialog only ever has that
+         * one child.
+         */
+        top: calc(var(--nav-offset-top) + 10px);
+        bottom: auto;
+        height: calc(100vh - 112px);
+        margin-top: @spacing-0;
+        margin-bottom: @spacing-0;
+
+        > * {
+            height: 100%;
+            padding-bottom: @spacing-0;
+        }
+    }
+
+    /**
+     * Stacks the search above the columns.
+     *
+     * `Dialog.Content` is `display: flex` with the default row direction, so its children line up
+     * side by side. Without this the search field became a flex item next to the column block and sat
+     * in the left third of the dialog, reading as a fourth column.
+     */
+    .body {
+        container-type: inline-size;
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        flex-direction: column;
+    }
+
+    /**
+     * Lets the results area, rather than the dialog's own scroller, take the overflow.
+     *
+     * `Dialog.Content` is a flex item of that scroller, and a flex item will not shrink below its
+     * content by default. Without this the scroller is the thing that overflows, which scrolls the
+     * search field off the top along with the results.
+     */
+    .content {
+        min-height: 0;
+        padding-inline: @catalog-padding;
+        padding-bottom: @spacing-0;
+    }
+
+    // Results scroll above the full-width footer; allow its content to wrap on narrow screens.
+    .footer {
+        box-sizing: border-box;
+        min-height: 56px;
+        flex: none;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: @spacing-1 @spacing-3;
+        padding: 12px @catalog-padding;
+        background-color: var(--a2-background-color-secondary);
+        text-align: center;
+    }
+
+    .footerActions {
+        display: flex;
+        flex: none;
+        gap: @spacing-1;
+    }
+
+    /*
+     * Matched to the rail's own "Go to" field, which is what the user clicked to get here — the same
+     * control, so it should not change colour on the way.
+     *
+     * anvil2's field is an opaque neutral (#1a1a1a on a #545454 border) which, like the row hover, is
+     * the right lightness but the wrong hue against the navy. The rail's translucent white gives the
+     * same lift while keeping the surface's colour, and these are its exact values.
+     */
+    .search {
+        --a2-text-field-input-wrapper-background-color: @rail-field;
+        --a2-text-field-input-wrapper-border-color-default: @rail-field-border;
+
+        width: 100%;
+        margin-bottom: 1.5rem;
+    }
+
+    /*
+     * Fills whatever the now fixed-height dialog leaves under the search field, instead of sizing to
+     * its own content, so browse, a narrowed search, and the empty state all hold the same height.
+     */
+    .results {
+        flex: 1;
+        min-height: 0;
+        // Overlay scrollbars ignore scrollbar-gutter; keep the last column's stars clear of them.
+        padding-right: @spacing-2;
+        overflow-y: auto;
+
+        /*
+         * Reserve the scrollbar's width whether or not it is showing, so a query that stops the results
+         * overflowing does not shift the columns sideways as the scrollbar disappears.
+         */
+        scrollbar-gutter: stable;
+    }
+
+    // Match the input's width; let either scrollbar style occupy the dialog's right padding.
+    .searchResults {
+        padding-right: @spacing-0;
+        margin-right: -@catalog-padding;
+        scrollbar-gutter: auto;
+
+        > div {
+            width: 100cqw;
+        }
+    }
+
+    /*
+     * Each group owns a column, regardless of its length. In particular, Projects & Field starts
+     * beside Demand rather than flowing beneath it. The minimum shrinks to the available width
+     * on small screens. Search uses a plain single-column list instead of this grid.
+     */
+    .columns {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(min(100%, @catalog-column), 1fr));
+        gap: @catalog-gap;
+        overflow: hidden;
+    }
+
+    /*
+     * Grid items stretch to the tallest group so dividers span the row. Place each divider in the
+     * preceding gap; the grid clips the one before its first column, including after wrapping.
+     */
+    .group {
+        position: relative;
+        min-width: 0;
+
+        &::before {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -(@catalog-gap / 2);
+            width: 1px;
+            background: rgba(255, 255, 255, 0.12);
+            content: '';
+        }
+    }
+
+    // Keep eyebrow medium typography and use the catalog's specified subdued colour.
+    .groupTitle {
+        --a2-text-foreground-color-subdued: @color-neutral-70;
+
+        display: block;
+        padding: @spacing-0 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .module-group {
+        margin-bottom: 0.75rem;
+    }
+
+    // Match the sidebar's small, subdued headings and spacing above each page group.
+    .submenuTitle {
+        --a2-text-foreground-color-subdued: @color-neutral-70;
+
+        display: block;
+        padding: 12px @spacing-1 @spacing-half 2rem;
+        margin: @spacing-0;
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        border-radius: var(--a2-border-radius-medium, 4px);
+
+        // Share the highlight while keeping the link and favorite button independently focusable.
+        &:hover,
+        &:has(:focus-visible) {
+            background-color: @rail-hover;
+        }
+    }
+
+    .link {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.25rem 0.5rem;
+        border-radius: var(--a2-border-radius-medium, 4px);
+        text-decoration: none;
+
+        &:hover,
+        &:focus-visible {
+            text-decoration: none;
+        }
+    }
+
+    .moduleIcon {
+        flex: none;
+    }
+
+    /*
+     * Level 2 of three, and the anchor of the scale: full-strength foreground at the body size, which
+     * everything else is set against. The destination is the usable part of the row, so it carries the
+     * weight and the brighter colour; the category heading above it is deliberately quieter.
+     */
+    .moduleTitle {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--a2-foreground-color-default, light-dark(#040404, #ffffff));
+        font-weight: var(--a2-font-weight-semibold, 600);
+        line-height: 1rem;
+    }
+
+    // As in the sidebar, page text sits 8px farther in than its group heading.
+    .childLink {
+        padding: @spacing-1 @spacing-1 @spacing-1 2.5rem;
+    }
+
+    // Match the expanded sidebar's child-page typography.
+    .childTitle {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--a2-foreground-color-default, light-dark(#040404, #ffffff));
+        font-size: @typescale-2;
+        font-weight: @font-weight-semibold;
+        line-height: 20px;
+    }
+
+    /*
+     * anvil2 positions a Badge absolutely with a translate, because its usual job is to overlay the
+     * corner of an icon. Here it is a sibling in a row and has to sit in the flow, so the position
+     * and the transform are both undone — the same override the rail applies to its own submenu
+     * counters in `layout-sidebar.module.less`.
+     *
+     * No `!important` needed: anvil2 nests its rule as `.anvil2 ._badge_x`, and the enclosing
+     * `.anvil2.anvil2` scope already outranks that.
+     *
+     * `flex: none` because the title beside it takes the slack — without it a long name would
+     * squeeze the count instead of truncating itself, and a truncated count is worse than a
+     * truncated name.
+     */
+    .badge[data-anv][data-anv] {
+        position: relative;
+        transform: none;
+        flex: none;
+    }
+
+    // 2rem to match the star button's box, so both align down the column. Always visible, unlike
+    // the star, and #707070 to match the Pantheon frame.
+    .lock {
+        display: inline-flex;
+        width: 2rem;
+        height: 2rem;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        color: var(--a2-color-neutral-500, #707070);
+    }
+
+    .star {
+        flex: none;
+        opacity: 0;
+    }
+
+    // Mouse clicks retain focus after leaving the row; only keyboard focus should reveal a star.
+    .row:hover .star,
+    .row:has(:focus-visible) .star {
+        opacity: 0.5;
+
+        &:hover,
+        &:focus-visible {
+            opacity: 1;
+        }
+    }
+
+    /*
+     * After the hover rules, which match at the same specificity, so a pinned star stays lit.
+     *
+     * The token's dark value, `yellow-300`, is a pale gold that clears the surface below at 13.5:1.
+     * Note that the light value on the other side of this token is `yellow-500` (#ffbe00), which only
+     * manages 1.66:1 on white — under the 3:1 WCAG 1.4.11 asks of a graphical control. That branch is
+     * unreachable while the catalog follows the rail, but it is the thing to fix first if this surface
+     * is ever made light.
+     */
+    .starActive,
+    .row:hover .starActive,
+    .row:has(:focus-visible) .starActive {
+        color: var(--a2-status-color-warning, light-dark(#ffbe00, #ffe278));
+        opacity: 1;
+    }
+
+    /*
+     * Centred in the fixed-height results area rather than left stranded against its top edge.
+     *
+     * `border-box` so the padding is counted inside the `100%`. Under the default `content-box` the
+     * vertical padding is added to it, and the message ended up 64px taller than the area it sits in —
+     * enough to raise a scrollbar next to a single line of text.
+     */
+    .empty {
+        display: flex;
+        box-sizing: border-box;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem 0.5rem;
+        text-align: center;
+        color: var(--a2-foreground-color-subdued, light-dark(#707070, #c4c4c4));
+    }
+}

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

@@ -0,0 +1,26 @@
+export const __esModule: true;
+export const badge: string;
+export const body: string;
+export const childLink: string;
+export const childTitle: string;
+export const columns: string;
+export const content: string;
+export const dialog: string;
+export const empty: string;
+export const footer: string;
+export const footerActions: string;
+export const group: string;
+export const groupTitle: string;
+export const link: string;
+export const lock: string;
+export const moduleGroup: string;
+export const moduleIcon: string;
+export const moduleTitle: string;
+export const results: string;
+export const row: string;
+export const search: string;
+export const searchResults: string;
+export const star: string;
+export const starActive: string;
+export const submenuTitle: string;
+

package/dist/components/titan-layout/navigation-scroll-indicators.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+export declare function NavigationScrollIndicators({ expanded, above, below, hasContentAbove, hasContentBelow, aboveIndicatorRef, belowIndicatorRef, onReveal, }: {
+    expanded: boolean;
+    above: number;
+    below: number;
+    hasContentAbove: boolean;
+    hasContentBelow: boolean;
+    aboveIndicatorRef: RefObject<HTMLDivElement>;
+    belowIndicatorRef: RefObject<HTMLDivElement>;
+    onReveal(direction: 'above' | 'below'): void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=navigation-scroll-indicators.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-scroll-indicators.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/navigation-scroll-indicators.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,wBAAgB,0BAA0B,CAAC,EACvC,QAAQ,EACR,KAAK,EACL,KAAK,EACL,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,GACX,EAAE;IACC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,iBAAiB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC7C,QAAQ,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC;CAChD,2CAsDA"}

package/dist/components/titan-layout/navigation-scroll-indicators.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@servicetitan/anvil2';
+import SvgArrowDown from '@servicetitan/anvil2/assets/icons/material/round/arrow_downward.svg';
+import SvgArrowUp from '@servicetitan/anvil2/assets/icons/material/round/arrow_upward.svg';
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import * as Styles from './layout-sidebar.module.less';
+export function NavigationScrollIndicators({ expanded, above, below, hasContentAbove, hasContentBelow, aboveIndicatorRef, belowIndicatorRef, onReveal }) {
+    return /*#__PURE__*/ _jsx(Fragment, {
+        children: [
+            'above',
+            'below'
+        ].map((direction)=>{
+            const isAbove = direction === 'above';
+            const count = isAbove ? above : below;
+            const hasContent = isAbove ? hasContentAbove : hasContentBelow;
+            const label = `${count} ${count === 1 ? 'notification' : 'notifications'}`;
+            return /*#__PURE__*/ _jsxs(Fragment, {
+                children: [
+                    hasContent && /*#__PURE__*/ _jsx("div", {
+                        className: classNames(Styles.scrollShadow, isAbove ? Styles.scrollShadowAbove : Styles.scrollShadowBelow)
+                    }),
+                    count > 0 && /*#__PURE__*/ _jsx("div", {
+                        ref: isAbove ? aboveIndicatorRef : belowIndicatorRef,
+                        className: classNames(Styles.scrollIndicator, isAbove ? Styles.scrollIndicatorAbove : Styles.scrollIndicatorBelow),
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            appearance: "secondary",
+                            size: "xsmall",
+                            icon: {
+                                before: isAbove ? SvgArrowUp : SvgArrowDown
+                            },
+                            className: Styles.notificationButton,
+                            "data-cy": `navigation-notifications-${direction}`,
+                            "aria-label": `${label} ${direction}. Show nearest notification`,
+                            onClick: (event)=>{
+                                event.stopPropagation();
+                                onReveal(direction);
+                            },
+                            children: expanded ? label : count >= 100 ? '99+' : count
+                        })
+                    })
+                ]
+            }, direction);
+        })
+    });
+}
+
+//# sourceMappingURL=navigation-scroll-indicators.js.map

package/dist/components/titan-layout/navigation-scroll-indicators.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/titan-layout/navigation-scroll-indicators.tsx"],"sourcesContent":["import { Button } from '@servicetitan/anvil2';\nimport SvgArrowDown from '@servicetitan/anvil2/assets/icons/material/round/arrow_downward.svg';\nimport SvgArrowUp from '@servicetitan/anvil2/assets/icons/material/round/arrow_upward.svg';\nimport classNames from 'classnames';\nimport { Fragment, RefObject } from 'react';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport function NavigationScrollIndicators({\n    expanded,\n    above,\n    below,\n    hasContentAbove,\n    hasContentBelow,\n    aboveIndicatorRef,\n    belowIndicatorRef,\n    onReveal,\n}: {\n    expanded: boolean;\n    above: number;\n    below: number;\n    hasContentAbove: boolean;\n    hasContentBelow: boolean;\n    aboveIndicatorRef: RefObject<HTMLDivElement>;\n    belowIndicatorRef: RefObject<HTMLDivElement>;\n    onReveal(direction: 'above' | 'below'): void;\n}) {\n    return (\n        <Fragment>\n            {(['above', 'below'] as const).map(direction => {\n                const isAbove = direction === 'above';\n                const count = isAbove ? above : below;\n                const hasContent = isAbove ? hasContentAbove : hasContentBelow;\n                const label = `${count} ${count === 1 ? 'notification' : 'notifications'}`;\n                return (\n                    <Fragment key={direction}>\n                        {/*\n                         * Its own element rather than the pill's background: the pill's height\n                         * insets the rail's counted area, and this gradient hides nothing, so it\n                         * must not. See `useNavigationScroll`.\n                         */}\n                        {hasContent && (\n                            <div\n                                className={classNames(\n                                    Styles.scrollShadow,\n                                    isAbove ? Styles.scrollShadowAbove : Styles.scrollShadowBelow\n                                )}\n                            />\n                        )}\n                        {count > 0 && (\n                            <div\n                                ref={isAbove ? aboveIndicatorRef : belowIndicatorRef}\n                                className={classNames(\n                                    Styles.scrollIndicator,\n                                    isAbove\n                                        ? Styles.scrollIndicatorAbove\n                                        : Styles.scrollIndicatorBelow\n                                )}\n                            >\n                                <Button\n                                    appearance=\"secondary\"\n                                    size=\"xsmall\"\n                                    icon={{ before: isAbove ? SvgArrowUp : SvgArrowDown }}\n                                    className={Styles.notificationButton}\n                                    data-cy={`navigation-notifications-${direction}`}\n                                    aria-label={`${label} ${direction}. Show nearest notification`}\n                                    onClick={event => {\n                                        event.stopPropagation();\n                                        onReveal(direction);\n                                    }}\n                                >\n                                    {expanded ? label : count >= 100 ? '99+' : count}\n                                </Button>\n                            </div>\n                        )}\n                    </Fragment>\n                );\n            })}\n        </Fragment>\n    );\n}\n"],"names":["Button","SvgArrowDown","SvgArrowUp","classNames","Fragment","Styles","NavigationScrollIndicators","expanded","above","below","hasContentAbove","hasContentBelow","aboveIndicatorRef","belowIndicatorRef","onReveal","map","direction","isAbove","count","hasContent","label","div","className","scrollShadow","scrollShadowAbove","scrollShadowBelow","ref","scrollIndicator","scrollIndicatorAbove","scrollIndicatorBelow","appearance","size","icon","before","notificationButton","data-cy","aria-label","onClick","event","stopPropagation"],"mappings":";AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,OAAOC,kBAAkB,sEAAsE;AAC/F,OAAOC,gBAAgB,oEAAoE;AAC3F,OAAOC,gBAAgB,aAAa;AACpC,SAASC,QAAQ,QAAmB,QAAQ;AAC5C,YAAYC,YAAY,+BAA+B;AAEvD,OAAO,SAASC,2BAA2B,EACvCC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,eAAe,EACfC,eAAe,EACfC,iBAAiB,EACjBC,iBAAiB,EACjBC,QAAQ,EAUX;IACG,qBACI,KAACV;kBACI,AAAC;YAAC;YAAS;SAAQ,CAAWW,GAAG,CAACC,CAAAA;YAC/B,MAAMC,UAAUD,cAAc;YAC9B,MAAME,QAAQD,UAAUT,QAAQC;YAChC,MAAMU,aAAaF,UAAUP,kBAAkBC;YAC/C,MAAMS,QAAQ,GAAGF,MAAM,CAAC,EAAEA,UAAU,IAAI,iBAAiB,iBAAiB;YAC1E,qBACI,MAACd;;oBAMIe,4BACG,KAACE;wBACGC,WAAWnB,WACPE,OAAOkB,YAAY,EACnBN,UAAUZ,OAAOmB,iBAAiB,GAAGnB,OAAOoB,iBAAiB;;oBAIxEP,QAAQ,mBACL,KAACG;wBACGK,KAAKT,UAAUL,oBAAoBC;wBACnCS,WAAWnB,WACPE,OAAOsB,eAAe,EACtBV,UACMZ,OAAOuB,oBAAoB,GAC3BvB,OAAOwB,oBAAoB;kCAGrC,cAAA,KAAC7B;4BACG8B,YAAW;4BACXC,MAAK;4BACLC,MAAM;gCAAEC,QAAQhB,UAAUf,aAAaD;4BAAa;4BACpDqB,WAAWjB,OAAO6B,kBAAkB;4BACpCC,WAAS,CAAC,yBAAyB,EAAEnB,WAAW;4BAChDoB,cAAY,GAAGhB,MAAM,CAAC,EAAEJ,UAAU,2BAA2B,CAAC;4BAC9DqB,SAASC,CAAAA;gCACLA,MAAMC,eAAe;gCACrBzB,SAASE;4BACb;sCAECT,WAAWa,QAAQF,SAAS,MAAM,QAAQA;;;;eApC5CF;QA0CvB;;AAGZ"}

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

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
 import { NavigationItemData } from '../../utils/navigation';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
+import { PinnedNavigationConfig } from './interface';
 import { TitanLayoutLogoProps } from './layout-logo';
 export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
     /** layout appearance */
@@ -15,6 +16,11 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     navigationComponent?: FC<NavLinkComponentProps>;
     /** data for main navigation links */
     navigationMainItems?: NavigationItemData[];
+    /**
+     * Turns the navigation catalog on: renders a trigger in the sidebar and the dialog behind it.
+     * Omit it and the navigation is unchanged.
+     */
+    pinnedNavigation?: PinnedNavigationConfig;
     /** data for overflow navigation links (used only with top variant) */
     navigationOverflowItems?: NavigationItemData[];
     /** logo props */
@@ -27,6 +33,13 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     openSubmenus?: string[];
     /** submenu accordion open state change handler */
     onOpenSubmenuChange?: (id: string, opened: boolean) => void;
+    /**
+     * Receives the complete next set of open modules for individual and bulk actions.
+     * Preferred over onOpenSubmenuChange when provided, so bulk updates are atomic.
+     * Required for the rail's `Expand All` / `Collapse All` control, which is hidden
+     * for hosts that supply only the per-module `onOpenSubmenuChange`.
+     */
+    onOpenSubmenusChange?: (ids: string[]) => void;
     /** navigation link click handler */
     onNavigationLinkClick?: (itemId: string, submenuItemId?: string) => void;
     /** content header content */
@@ -35,6 +48,21 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     top?: ReactElement;
     /** top links for side navigation */
     sideTop?: ReactElement[];
+    /**
+     * Destinations pinned above the sidebar's divider, ahead of `sideTop`.
+     *
+     * Rendered with the same machinery as `navigationMainItems`, so one with pages beneath it is
+     * an expandable group rather than a bare link. `sideTop` is unchanged and still takes elements
+     * the host builds itself; the two can be used together.
+     */
+    sideTopItems?: NavigationItemData[];
+    /**
+     * Whether the sidebar shows the scroll and overflow-notification indicators.
+     *
+     * Defaults on, so a host that says nothing keeps them. Navigation versions that predate the
+     * indicators pass `false`.
+     */
+    navigationScrollIndicators?: boolean;
     /**
      * profile element for layout
      * @see ProfileDropdown
@@ -67,7 +95,7 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
     noResponsive?: boolean;
 };
 export declare const useViewportConfigs: (noResponsive?: boolean) => void;
-declare function TitanLayoutComponent({ appearance, navVariant, id, children, contentOnly, navigationComponent, header, top, profile, expanded, openSubmenus, logo, onExpandedChange, onOpenSubmenuChange, navigationMainItems, navigationOverflowItems, onNavigationLinkClick, extraLinks, extraLinksTop, extraText, minContentWidth, noResponsive, sideTop, }: TitanLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare function TitanLayoutComponent({ appearance, navVariant, id, children, contentOnly, navigationComponent, header, top, profile, expanded, openSubmenus, logo, onExpandedChange, onOpenSubmenuChange, onOpenSubmenusChange, navigationMainItems, pinnedNavigation, navigationOverflowItems, onNavigationLinkClick, extraLinks, extraLinksTop, extraText, minContentWidth, noResponsive, sideTop, sideTopItems, navigationScrollIndicators, }: TitanLayoutProps): import("react/jsx-runtime").JSX.Element;
 export declare const TitanLayout: typeof TitanLayoutComponent & {
     Link: FC<import("./interface").TitanLayoutLinkProps>;
     Trigger: FC<import("./interface").TitanLayoutTriggerProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAGF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAUhG,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5D,oCAAoC;IACpC,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzE,6BAA6B;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,qCAAqC;IACrC,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAyBF,eAAO,MAAM,kBAAkB,GAAI,eAAe,OAAO,SAUxD,CAAC;AAEF,iBAAS,oBAAoB,CAAC,EAC1B,UAAqB,EACrB,UAAmB,EACnB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,GAAG,EACH,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,IAAI,EACJ,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,GACV,EAAE,gBAAgB,2CAgRlB;AAqFD,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
+{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"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"}