@servicetitan/navigation 14.2.0 → 14.3.0

package/dist/components/titan-layout/layout-sidebar.module.less

@@ -3,6 +3,9 @@
 
 @text-color: var(--colorsTextInverted, @color-white);
 @text-color-active: var(--foreground-color-primary, @color-blue-300);
+
+// Matches the supplied subdued text/icon swatch (#bcbcbd) on the dark rail.
+@text-color-subdued: @color-neutral-70;
 @border-color: var(--colorsTextOnGrey, @color-neutral-200);
 @bg-color: #0f1d26;
 @bg-color-hover: rgba(255, 255, 255, 0.08);
@@ -30,6 +33,7 @@
     -o-transition: width 200ms ease-in-out;
     transition: width 200ms ease-in-out;
 
+    .nav-header,
     .nav-main {
         padding-left: @spacing-2;
         padding-right: @spacing-2;
@@ -115,24 +119,27 @@
 // desktop version collapsed
 .nav-slim {
     width: 60px;
+    min-width: 60px;
+    max-width: 60px;
+    flex-shrink: 0;
+    box-sizing: border-box;
 
-    .toggle {
-        width: fit-content;
+    .nav-items,
+    .nav-top-items {
         display: flex;
-        justify-content: center;
-
-        .toggle-content {
-            margin: @spacing-1 @spacing-1;
-            padding: @spacing-1;
-        }
+        flex-direction: column;
+        gap: 12px;
     }
 
     .nav-item {
         flex-direction: column;
         width: 60px;
-        overflow-x: hidden;
-        padding-top: @spacing-1;
-        margin-top: @spacing-half;
+        min-height: 36px;
+        box-sizing: border-box;
+        // Notification badges may extend above the 24px icon box into the item gap.
+        overflow: visible;
+        padding: @spacing-0;
+        margin-top: @spacing-0;
 
         .nav-item-counter[data-anv][data-anv] {
             position: absolute;
@@ -146,8 +153,23 @@
         }
 
         .nav-item-icon-wrapper {
-            flex: 1;
-            padding: @spacing-half;
+            flex: 0 0 24px;
+            width: 24px;
+            height: 24px;
+            box-sizing: border-box;
+            justify-content: center;
+            padding: 2px;
+        }
+
+        .nav-icon[data-anv][data-anv] {
+            width: 20px;
+            height: 20px;
+            flex-shrink: 0;
+
+            & > svg {
+                width: 20px;
+                height: 20px;
+            }
         }
 
         .nav-item-text-expanded {
@@ -156,22 +178,19 @@
         .nav-item-text-collapsed {
             font-family: @base-font-family;
             font-size: @typescale-0;
+            font-weight: @font-weight-regular;
             line-height: 10px;
-            margin: 2px @spacing-half @spacing-0;
+            margin: 2px 2px @spacing-0;
+            max-width: 56px;
+            overflow-wrap: anywhere;
             text-align: center;
         }
-        .nav-item-text-small {
-            font-size: 9.5px;
-        }
     }
 
-    .nav-main {
-        padding-top: @spacing-half;
-    }
-    .nav-top {
-        .divider {
-            margin-top: 12px;
-        }
+    .nav-top .top-divider[data-anv][data-anv] {
+        // Divider spacing={3} already supplies 12px padding on each side of its line.
+        margin-block: @spacing-0;
+        margin-inline: @spacing-1;
     }
 }
 
@@ -184,28 +203,6 @@
         margin-right: @spacing-1;
     }
 
-    .toggle {
-        .toggle-content {
-            margin: @spacing-1 @spacing-1;
-            padding: @spacing-1 @spacing-half;
-
-            .toggle-text {
-                padding-left: @spacing-1 !important;
-            }
-        }
-    }
-
-    .nav-top {
-        .divider {
-            margin-top: 10px;
-            margin-bottom: 6px;
-        }
-    }
-
-    .nav-main {
-        padding-top: 12px;
-    }
-
     .nav-group-item {
         .nav-item {
             .nav-item-icon-wrapper {
@@ -230,15 +227,31 @@
         margin-top: @spacing-0;
         font-weight: normal;
 
-        // 44px row height to meet WCAG 2.1 (Level AAA) accessibility standard
+        // A 28px xsmall toggle plus 4px above and below determines the minimum row height.
         .nav-item-icon-wrapper {
             flex: 1;
-            padding: 10px @spacing-half;
+            min-height: 36px;
+            box-sizing: border-box;
+            padding: @spacing-half;
+        }
+
+        // Expanded navigation icons are 16px; compact icons are 20px inside a 24px box.
+        .nav-icon[data-anv][data-anv] {
+            height: @spacing-2;
+            width: @spacing-2;
+            flex-shrink: 0;
+
+            & > svg {
+                height: @spacing-2;
+                width: @spacing-2;
+            }
         }
 
         .nav-item-text-expanded {
             font-family: @base-font-family;
-            font-size: @typescale-3;
+            font-size: @typescale-2;
+            font-weight: @font-weight-bold;
+            line-height: @spacing-2;
             padding-left: @spacing-1;
             flex: 1;
         }
@@ -258,9 +271,31 @@
     border-top: 1px solid @border-color;
 }
 
+.nav-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+}
+
+.nav-header {
+    flex-shrink: 0;
+    padding-top: @spacing-1;
+}
+
+.nav-scroll-region {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+}
+
 .nav-main {
     position: relative;
     overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
     padding-bottom: @spacing-1;
     flex-grow: 1;
     flex-basis: 0;
@@ -271,12 +306,89 @@
     }
 }
 
+.scroll-indicator {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    pointer-events: none;
+    padding: @spacing-1 @spacing-half;
+}
+
+.scroll-indicator-above {
+    top: 0;
+}
+
+.scroll-indicator-below {
+    bottom: 0;
+}
+
+/*
+ * Purely decorative, and a separate element from the pill above on purpose: the pill's measured
+ * height insets the rail's counted area, so a row it covers counts as hidden. This gradient
+ * covers nothing, so it must never contribute to that inset.
+ */
+.scroll-shadow {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 12px;
+    pointer-events: none;
+}
+
+.scroll-shadow-above {
+    top: 0;
+    background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08), transparent 70%);
+}
+
+.scroll-shadow-below {
+    bottom: 0;
+    background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.08), transparent 70%);
+}
+
+.notification-button[data-anv][data-anv] {
+    pointer-events: auto;
+    background-color: @color-red-300;
+    color: @color-black;
+    border-radius: 999px;
+    min-height: 24px;
+    padding: 1px @spacing-1;
+    gap: @spacing-half;
+    font-size: @typescale-2;
+    line-height: 20px;
+    white-space: nowrap;
+
+    &:hover {
+        background-color: @color-red-200;
+    }
+
+    [data-anv='icon'],
+    svg {
+        height: @spacing-2;
+        width: @spacing-2;
+    }
+}
+
+.nav-slim .notification-button[data-anv][data-anv] {
+    padding-inline: @spacing-half;
+    gap: 2px;
+    font-size: @typescale-0;
+}
+
 .nav-top {
     display: flex;
     flex-direction: column;
     align-items: stretch;
 }
 
+.nav-tools {
+    display: flex;
+    justify-content: flex-end;
+    padding: @spacing-1 @spacing-1 @spacing-2;
+}
+
 .nav-bottom {
     display: flex;
     flex-direction: column;
@@ -289,53 +401,20 @@
     background-color: @bg-color;
 
     .toggle-wrapper {
-        display: block;
-
-        .toggle {
-            font-family: @base-font-family;
-            color: @text-color;
-            position: relative;
-            cursor: pointer;
-            outline: none;
-
-            &:focus-visible .toggle-content {
-                outline: -webkit-focus-ring-color auto 1px;
-            }
-
-            &:hover {
-                .toggle-content {
-                    background-color: @bg-color-hover;
-                }
-            }
-
-            .toggle-content {
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
-                flex-wrap: nowrap;
-                text-wrap: nowrap;
-
-                border-radius: @border-radius-2;
-            }
+        display: flex;
+        padding: @spacing-1 @spacing-1 @spacing-1 14px;
+    }
 
-            .toggle-icon-wrapper {
-                height: 24px;
-                width: 24px;
+    .toggle[data-anv][data-anv] {
+        color: @text-color;
+    }
+}
 
-                .toggle-icon[data-anv][data-anv] > svg {
-                    height: 24px;
-                    width: 24px;
-                    color: @text-color;
-                }
-            }
+// The separator is inset 4px within the same 8px gutter as the navigation rows.
+.nav-top .top-divider[data-anv][data-anv] {
+    --a2-divider-border-color: @border-color;
 
-            .toggle-text {
-                font-family: @base-font-family;
-                font-size: @typescale-3;
-                flex: 1;
-            }
-        }
-    }
+    margin-inline: 12px;
 }
 
 .nav-item {
@@ -426,11 +505,13 @@
                 margin-right: @spacing-0;
             }
         }
+    }
 
-        &:has(.nav-item-active) {
-            .nav-item-group-toggle-wrapper {
-                color: @text-color-active;
-            }
+    &.nav-group-opened .nav-group-item .nav-item {
+        color: @text-color-subdued;
+
+        &.nav-item-active .nav-item-icon-wrapper {
+            background-color: transparent;
         }
     }
 
@@ -439,7 +520,7 @@
         top: 0;
         bottom: 0;
         right: @spacing-0;
-        color: @text-color;
+        color: @text-color-subdued;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -470,24 +551,21 @@
     transition: max-height unset;
 }
 
+// Indent headings and row backgrounds 28px from the navigation's 8px outer gutter.
 .submenu {
-    margin-left: @spacing-3;
-
-    padding-top: @spacing-1;
-    padding-left: @spacing-1;
+    margin-left: @spacing-1;
+    // Every child list touches its module row, with or without a section heading.
+    padding-top: @spacing-0;
+    padding-left: 28px;
     padding-right: @spacing-1;
-    margin-bottom: @spacing-1;
+    margin-bottom: 12px;
     position: relative;
     font-family: @base-font-family;
 
-    &:has(> .submenu-group-header:first-child) {
-        padding-top: @spacing-0;
-    }
-
-    .submenu-group-header {
-        padding-top: @spacing-2;
+    .submenu-group-header[data-anv][data-anv] {
+        padding-top: 12px;
         padding-bottom: @spacing-half;
-        padding-left: 10px;
+        padding-left: @spacing-0;
     }
     .submenu-group-header.submenu-group-header-empty {
         padding-top: @spacing-1;
@@ -498,21 +576,7 @@
     }
 
     .submenu-link-active {
-        position: relative;
-    }
-
-    .submenu-link-active:before {
-        content: '';
-        position: absolute;
-        background-color: @text-color-active;
-        width: 3px;
-        top: @spacing-1;
-        bottom: @spacing-1;
-        left: -12px;
-    }
-
-    .submenu-item:before:not(.submenu-link-active) {
-        background-color: @bg-color-hover;
+        background-color: @bg-color-active;
     }
 
     .divider + .divider {
@@ -522,21 +586,33 @@
     .divider:last-child {
         display: none;
     }
+}
 
-    .submenu-item-wrapper > *,
-    .submenu-item-wrapper > *[data-anv][data-anv] {
-        border-left: 3px solid transparent;
-        padding-left: @spacing-1;
-    }
+.submenu-item-wrapper {
+    min-width: 0;
 }
 
-// Hide the Anvil Popover caret on the collapsed nav submenu popover
-.submenu-popover-content > :global(span[class*='_arrow_']) {
-    display: none;
+.submenu-popover-content[data-anv][data-anv] {
+    --a2-popover-content-background-color: @bg-color;
+
+    // Fix the outer width, including Anvil's border and the content's padding.
+    box-sizing: border-box;
+    width: 240px;
+
+    // Anvil currently fixes the positioning offset at 8px. Bring either side 4px closer.
+    &[data-position='right'] {
+        translate: -4px 0;
+    }
+
+    &[data-position='left'] {
+        translate: 4px 0;
+    }
 }
 
 .submenu-popover {
-    min-width: 240px;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
     max-height: calc(100vh - 16px);
     overflow: hidden;
     padding: @spacing-0 @spacing-1;
@@ -554,20 +630,30 @@
         margin-bottom: @spacing-0;
     }
 
-    .submenu-item:has(+ .submenu-group-header) {
-        margin-bottom: calc(@spacing-1 + @spacing-half);
+    .submenu-group + .submenu-group {
+        margin-top: 12px;
     }
 
-    .submenu-group-header {
+    .submenu-group-header[data-anv][data-anv] {
         padding-bottom: @spacing-half;
         padding-left: @spacing-1;
         padding-right: @spacing-1;
     }
 
     .submenu-item {
+        box-sizing: border-box;
         min-height: 44px;
-        padding-left: @spacing-1;
-        padding-right: @spacing-1;
+        padding: 12px @spacing-1;
+
+        // Long page titles can wrap without widening the fixed 240px popover.
+        > span:first-child {
+            min-width: 0;
+            overflow-wrap: anywhere;
+        }
+    }
+
+    .submenu-item-wrapper .submenu-item {
+        font-weight: @font-weight-regular;
     }
 
     .submenu-link-active {
@@ -590,17 +676,17 @@
     display: flex;
     flex-direction: column;
 
-    .submenu-group-header {
+    .submenu-group-header[data-anv][data-anv] {
+        display: block;
+        margin: @spacing-0;
         color: @color-neutral-70;
-
-        font-size: @typescale-1;
-        font-weight: @font-weight-semibold;
-        text-transform: uppercase;
     }
 
     .submenu-item {
         color: @text-color;
         font-size: @typescale-2;
+        font-weight: @font-weight-semibold;
+        line-height: 20px;
         border-radius: @border-radius-2;
         display: flex;
         flex-direction: row;

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

@@ -4,12 +4,15 @@ export const nav: string;
 export const navBottom: string;
 export const navClose: string;
 export const navCloseWrapper: string;
+export const navContent: string;
 export const navDrawer: string;
 export const navDrawerBackdrop: string;
 export const navDrawerOpened: string;
 export const navFooter: string;
 export const navGroupItem: string;
+export const navGroupOpened: string;
 export const navGroupWrapper: string;
+export const navHeader: string;
 export const navIcon: string;
 export const navIconActive: string;
 export const navIconInactive: string;
@@ -24,14 +27,25 @@ export const navItemIconSwitch: string;
 export const navItemIconWrapper: string;
 export const navItemTextCollapsed: string;
 export const navItemTextExpanded: string;
-export const navItemTextSmall: string;
+export const navItems: string;
 export const navLink: string;
 export const navMain: string;
+export const navScrollRegion: string;
 export const navSlim: string;
+export const navTools: string;
 export const navTop: string;
+export const navTopItems: string;
 export const navWide: string;
+export const notificationButton: string;
 export const pointerEventsNone: string;
+export const scrollIndicator: string;
+export const scrollIndicatorAbove: string;
+export const scrollIndicatorBelow: string;
+export const scrollShadow: string;
+export const scrollShadowAbove: string;
+export const scrollShadowBelow: string;
 export const submenu: string;
+export const submenuGroup: string;
 export const submenuGroupHeader: string;
 export const submenuGroupHeaderEmpty: string;
 export const submenuItem: string;
@@ -47,9 +61,6 @@ export const submenuPopoverTitle: string;
 export const submenuWrapper: string;
 export const submenuWrapperCollapsed: string;
 export const toggle: string;
-export const toggleContent: string;
-export const toggleIcon: string;
-export const toggleIconWrapper: string;
-export const toggleText: string;
 export const toggleWrapper: string;
+export const topDivider: string;
 

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

@@ -0,0 +1,3 @@
+export * from './navigation-catalog';
+export * from './navigation-catalog-trigger';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/titan-layout/navigation-catalog/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from './navigation-catalog';
+export * from './navigation-catalog-trigger';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/titan-layout/navigation-catalog/index.ts"],"sourcesContent":["export * from './navigation-catalog';\nexport * from './navigation-catalog-trigger';\n"],"names":[],"mappings":"AAAA,cAAc,uBAAuB;AACrC,cAAc,+BAA+B"}

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface NavigationCatalogFooterProps {
+    /** Present only when the current favorites differ from the host's defaults. */
+    onRestore?: () => void;
+}
+export declare const NavigationCatalogFooter: FC<NavigationCatalogFooterProps>;
+export {};
+//# sourceMappingURL=navigation-catalog-footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-catalog-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/titan-layout/navigation-catalog/navigation-catalog-footer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAgD,MAAM,OAAO,CAAC;AAGzE,UAAU,4BAA4B;IAClC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA6EpE,CAAC"}