@servicetitan/navigation 14.2.0 → 14.3.0

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

@@ -0,0 +1,436 @@
+@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) {
+    /*
+     * The catalog's column geometry.
+     *
+     * `@catalog-column` is the *minimum* a column may be, not its width — the columns share out the
+     * dialog evenly and end up wider than this. Its job is to set how many there are: at `xlarge`
+     * (70rem) four of these plus their gaps fit and a fifth does not. The columns land at 248px, which
+     * still clears the widest row the catalog renders (229px including its star), so nothing clips.
+     *
+     * Width rather than `column-count: 4`, so a dialog narrowed by a small viewport drops to three
+     * columns and then two instead of squeezing four ever thinner. A fixed count gave 208px per column
+     * at a 768px viewport, under that 229px, which turned the longest labels into ellipses —
+     * "Batch/Export Transactions" and "Recurring Service Events" among them.
+     */
+    @catalog-column: 15rem;
+    @catalog-gap: 1.5rem;
+
+    // The dialog's own horizontal inset, shared by the search field's row and the footer.
+    @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%;
+        }
+    }
+
+    /**
+     * 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 {
+        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;
+    }
+
+    // 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.
+     *
+     * `.columns` stays at `height: auto` regardless — a multi-column box given a fixed height becomes a
+     * fragmentainer and spills overflow sideways into further columns instead of growing downwards, which
+     * is a horizontal scrollbar rather than the vertical one wanted here.
+     */
+    .results {
+        flex: 1;
+        min-height: 0;
+        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;
+    }
+
+    /**
+     * Column width rather than column count, so a narrow dialog drops a column instead of squeezing all
+     * three.
+     *
+     * The dialog tracks the viewport below its cap, so `column-count: 3` had to divide whatever it was
+     * given by three. At a 768px viewport that was 208px per column, narrower than the 229px the widest
+     * category wants, and `max-width: 100%` on the category turned the overflow into ellipses — "Batch/
+     * Export Transactions" and "Recurring Service Events" among them.
+     *
+     * Giving the width instead lets the count fall out of it: three columns at the cap, then two, then
+     * one, and never a clipped label at any width. It cannot reach four, because a fourth column and its
+     * gap need more room than the cap ever offers, which is what keeps the reference's three-column
+     * layout at every desktop size.
+     *
+     * Multi-column rather than grid so categories pack against one another and flow into the next column,
+     * instead of leaving a ragged row of half-empty grid cells whenever one category is much taller than
+     * its neighbours.
+     */
+
+    /*
+     * `column-rule` rather than a border on the categories, because the line belongs to the boundary
+     * between columns and not to any category. Multi-column draws it once per gap, only where a gap
+     * exists, and at the full height of the column block — so it disappears on its own when the dialog
+     * narrows to a single column, and a short last column still gets the full-height line to its left
+     * rather than one that stops where its content does.
+     *
+     * A translucent white rather than the `subdued` border token, for the same reason as the row hover:
+     * the token is a flat neutral grey, and a grey line on a navy surface reads as a slightly dirty
+     * seam. At 12% it lands about where the token's grey would in lightness, but tinted by the navy
+     * underneath it, so it belongs to the surface it divides.
+     */
+    .columns {
+        columns: @catalog-column;
+        column-gap: @catalog-gap;
+        column-rule: 1px solid rgba(255, 255, 255, 0.12);
+    }
+
+    /*
+     * A category and its heading stay in the same column.
+     *
+     * Without this a tall category flowed across a column boundary and its remainder arrived at the top
+     * of the next column with no heading over it, reading as though those destinations belonged to
+     * whatever was above them. `break-after` on the heading only keeps the heading with its first row;
+     * it says nothing about the rest.
+     *
+     * This is a preference, not a guarantee: a category taller than the column still has to break
+     * somewhere, and the browser will split it rather than overflow. That degrades to today's behaviour
+     * for the one or two largest categories and fixes it for the rest.
+     */
+
+    /*
+     * Full column width, so every star in the catalog lands on the column's right edge just inside the
+     * divider. The rows are flex containers with `flex: 1` on the link, so the star is pushed to
+     * whatever the category's right edge is; letting that edge be the column's puts all of them on one
+     * line down the whole column rather than one line per category.
+     */
+    .group {
+        break-inside: avoid;
+        margin-bottom: 1.5rem;
+    }
+
+    /*
+     * Level 1 of three. It shares its size with the module rows below it and is told apart by case,
+     * tracking and colour rather than by being bigger or smaller — the standard eyebrow treatment, and
+     * the one place a plain grey belongs.
+     *
+     * `break-after` keeps a heading from being stranded at the foot of a column.
+     *
+     * The colour is spelled out rather than taken from `--a2-foreground-color-subdued`, which resolves
+     * to `#c4c4c4` in dark mode: close enough to white that the heading competed with the destinations
+     * under it. This is `--a2-color-neutral-400`, a genuine mid grey, and it is the same value the rail
+     * headings use.
+     *
+     * Note that anvil2's colour tokens are spelled `foreground`, not `text`; a `--a2-text-color-*` name
+     * resolves to nothing and drops silently to the fallback. That matters here because this
+     * repository's LESS `@color-neutral` ramp runs dark-to-light, opposite to anvil2's, so a wrong
+     * guess lands on near-black text against a near-black dialog.
+     */
+    .groupTitle {
+        display: block;
+        break-after: avoid;
+        padding: @spacing-0 0.5rem;
+        margin-bottom: 0.5rem;
+        color: light-dark(
+            var(--a2-color-neutral-500, #707070),
+            var(--a2-color-neutral-400, #8b8b8b)
+        );
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+    }
+
+    /* A module and its pages are one unit and stay in the same column. */
+    .module-group {
+        break-inside: avoid;
+        margin-bottom: 0.75rem;
+    }
+
+    .row {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+
+    .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;
+
+        /*
+         * The rail's hover, not anvil2's. The token resolves to a flat neutral grey in dark mode, which
+         * on this navy replaces the surface's hue instead of lifting it. A translucent white tints
+         * whatever it covers, so the hovered row stays the same colour, just brighter — and it is the
+         * same value the rail uses on its own rows, which is what the user is comparing it against.
+         */
+        &:hover,
+        &:focus-visible {
+            background-color: @rail-hover;
+            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);
+    }
+
+    /* Indented to sit under the module's title rather than its icon. */
+    .childLink {
+        padding-left: 2rem;
+    }
+
+    /*
+     * Level 3 of three: below the module row, above the category heading, at regular weight and at the
+     * same full-strength foreground. It is still a destination, so it is not dimmed — size and weight
+     * are what place it under its module. Only the category heading is greyed.
+     *
+     * 13px is deliberately off the token scale, which jumps 0.75rem → 0.875rem with nothing in between.
+     * At 0.75rem this tied with the category heading and read as another label rather than as somewhere
+     * to go. It has to clear the heading and stay under the module row, and the gap between those two is
+     * one token wide, so the size is spelled out. It matches the rail's pinned pages, which are sized
+     * the same way and for the same reason.
+     */
+    .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: 0.8125rem;
+    }
+
+    /*
+     * 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;
+
+        &:focus-visible {
+            opacity: 1;
+        }
+    }
+
+    .row:hover .star {
+        opacity: 0.5;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .row:focus-within .star {
+        opacity: 0.5;
+    }
+
+    /*
+     * 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:focus-within .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,24 @@
+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 star: string;
+export const starActive: 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":"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;AAGhG,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AASrD,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;;;OAGG;IACH,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;IAE1C,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;IAC5D;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE/C,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;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAEpC;;;;;OAKG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;;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,oBAAoB,EACpB,mBAAmB,EACnB,gBAAgB,EAChB,uBAAuB,EACvB,qBAAqB,EACrB,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,0BAAiC,GACpC,EAAE,gBAAgB,2CAwTlB;AAqFD,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}