@servicetitan/navigation 14.3.0 → 14.4.0

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

@@ -8,23 +8,9 @@
  * 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.
-     */
+    // Four readable columns fit the desktop dialog; narrower dialogs wrap whole groups.
     @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;
 
     /*
@@ -93,6 +79,7 @@
 
         > * {
             height: 100%;
+            padding-bottom: @spacing-0;
         }
     }
 
@@ -104,6 +91,7 @@
      * in the left third of the dialog, reading as a fourth column.
      */
     .body {
+        container-type: inline-size;
         display: flex;
         flex: 1;
         min-width: 0;
@@ -119,6 +107,8 @@
      */
     .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.
@@ -160,14 +150,12 @@
     /*
      * 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;
+        // Overlay scrollbars ignore scrollbar-gutter; keep the last column's stars clear of them.
+        padding-right: @spacing-2;
         overflow-y: auto;
 
         /*
@@ -177,107 +165,81 @@
         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.
-     */
+    // 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;
 
-    /*
-     * `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);
+        > div {
+            width: 100cqw;
+        }
     }
 
     /*
-     * 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.
+     * 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;
+    }
 
     /*
-     * 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.
+     * 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 {
-        break-inside: avoid;
-        margin-bottom: 1.5rem;
+        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: '';
+        }
     }
 
-    /*
-     * 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.
-     */
+    // Keep eyebrow medium typography and use the catalog's specified subdued colour.
     .groupTitle {
+        --a2-text-foreground-color-subdued: @color-neutral-70;
+
         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;
     }
 
+    // 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 {
@@ -290,15 +252,8 @@
         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;
         }
     }
@@ -320,24 +275,15 @@
         white-space: nowrap;
         color: var(--a2-foreground-color-default, light-dark(#040404, #ffffff));
         font-weight: var(--a2-font-weight-semibold, 600);
+        line-height: 1rem;
     }
 
-    /* Indented to sit under the module's title rather than its icon. */
+    // As in the sidebar, page text sits 8px farther in than its group heading.
     .childLink {
-        padding-left: 2rem;
+        padding: @spacing-1 @spacing-1 @spacing-1 2.5rem;
     }
 
-    /*
-     * 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.
-     */
+    // Match the expanded sidebar's child-page typography.
     .childTitle {
         flex: 1;
         min-width: 0;
@@ -345,7 +291,9 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         color: var(--a2-foreground-color-default, light-dark(#040404, #ffffff));
-        font-size: 0.8125rem;
+        font-size: @typescale-2;
+        font-weight: @font-weight-semibold;
+        line-height: 20px;
     }
 
     /*
@@ -382,24 +330,19 @@
     .star {
         flex: none;
         opacity: 0;
-
-        &:focus-visible {
-            opacity: 1;
-        }
     }
 
-    .row:hover .star {
+    // 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 {
+        &:hover,
+        &:focus-visible {
             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.
      *
@@ -411,7 +354,7 @@
      */
     .starActive,
     .row:hover .starActive,
-    .row:focus-within .starActive {
+    .row:has(:focus-visible) .starActive {
         color: var(--a2-status-color-warning, light-dark(#ffbe00, #ffe278));
         opacity: 1;
     }

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

@@ -19,6 +19,8 @@ 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;