@vectara/vectara-ui 20.1.0 → 20.2.1

package/lib/components/app/appLayout.scss

@@ -20,5 +20,4 @@
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
-  scrollbar-gutter: stable;
 }

package/lib/components/index.d.ts

@@ -93,8 +93,9 @@ import { SPINNER_COLOR, SPINNER_SIZE } from "./spinner/types";
 import { Stat, VuiStatList } from "./statList/StatList";
 import { VuiStat } from "./stat/Stat";
 import { VuiStatus } from "./status/Status";
+import { VuiStepNavigator, StepNavigatorStep, StepNavigatorSteps } from "./stepNavigator/StepNavigator";
 import { VuiSteps, StepStatus, StepSize, Steps } from "./steps/Steps";
-import { VuiStepsVertical, StepsVertical, StepVerticalStatus } from "./stepsVertical/StepsVertical";
+import { VuiStepsVertical, StepVertical, StepsVertical, StepVerticalStatus } from "./stepsVertical/StepsVertical";
 import { SKELETON_COLOR, VuiSkeleton } from "./skeleton/Skeleton";
 import { VuiSummary, VuiSummaryCitation } from "./summary";
 import { VuiTable } from "./table/Table";
@@ -116,5 +117,5 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem, AccountButtonHandle };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepNavigatorStep, StepNavigatorSteps, StepStatus, StepSize, Steps, StepVertical, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem, AccountButtonHandle };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiStepNavigator, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -85,6 +85,7 @@ import { SPINNER_COLOR, SPINNER_SIZE } from "./spinner/types";
 import { VuiStatList } from "./statList/StatList";
 import { VuiStat } from "./stat/Stat";
 import { VuiStatus } from "./status/Status";
+import { VuiStepNavigator } from "./stepNavigator/StepNavigator";
 import { VuiSteps } from "./steps/Steps";
 import { VuiStepsVertical } from "./stepsVertical/StepsVertical";
 import { SKELETON_COLOR, VuiSkeleton } from "./skeleton/Skeleton";
@@ -107,4 +108,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiStepNavigator, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Props as VuiTooltipProps } from "../tooltip/Tooltip";
-export type AnchorSide = "left" | "right" | "rightUp" | "rightDown" | "leftUp" | "leftDown" | "upLeft" | "upRight";
+export type AnchorSide = "left" | "right" | "center" | "rightUp" | "rightDown" | "leftUp" | "leftDown" | "upLeft" | "upRight";
 export type Props = {
     button: React.ReactElement;
     children?: React.ReactNode;

package/lib/components/popover/Popover.js

@@ -57,6 +57,11 @@ const calculatePopoverPosition = (button, anchorOptions) => {
         return { bottom: `${adjustedBottom}px`, right: `${adjustedRight}px` };
     }
     const adjustedTop = bottom + offsetY + document.documentElement.scrollTop;
+    if (anchorSide === "center") {
+        // Anchor below the button, horizontally centered on it. Pairs with a
+        // translateX(-50%) in CSS to offset by half the popover's own width.
+        return { top: `${adjustedTop}px`, left: `${left + width / 2}px` };
+    }
     if (anchorSide === "left") {
         return { top: `${adjustedTop}px`, left: `${left}px` };
     }
@@ -160,6 +165,7 @@ export const VuiPopover = (_a) => {
     });
     const classes = classNames("vuiPopover", className, {
         "vuiPopover-isLoaded": showTransition,
+        "vuiPopover--center": anchorSide === "center",
         "vuiPopover--rightUp": anchorSide === "rightUp",
         "vuiPopover--leftUp": anchorSide === "leftUp",
         "vuiPopover--upLeft": anchorSide === "upLeft",

package/lib/components/popover/_index.scss

@@ -27,6 +27,16 @@
   transform: translateY(-100%) !important;
 }
 
+// Centered below the button: shift left by half the popover's width while
+// preserving the vertical enter transition.
+.vuiPopover--center {
+  transform: translate(-50%, -$sizeXs);
+}
+
+.vuiPopover--center.vuiPopover-isLoaded {
+  transform: translate(-50%, 0);
+}
+
 .vuiPopover--upLeft,
 .vuiPopover--upRight {
   transform: translateY(0);

package/lib/components/stepNavigator/StepNavigator.d.ts

@@ -0,0 +1,16 @@
+import { StepVertical } from "../stepsVertical/StepsVertical";
+export type StepNavigatorStep = Omit<StepVertical, "isActive" | "onSelect">;
+export type StepNavigatorSteps = StepNavigatorStep[];
+type Props = {
+    steps: StepNavigatorSteps;
+    activeStep: number;
+    showStepCount?: boolean;
+    onStepChange?: (index: number, step: StepNavigatorStep) => void;
+    onNext?: (index: number, step: StepNavigatorStep) => void;
+    onPrevious?: (index: number, step: StepNavigatorStep) => void;
+    onSelect?: (index: number, step: StepNavigatorStep) => void;
+    className?: string;
+    "data-testid"?: string;
+};
+export declare const VuiStepNavigator: ({ steps, activeStep, showStepCount, onStepChange, onNext, onPrevious, onSelect, className, "data-testid": dataTestId }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/stepNavigator/StepNavigator.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import classNames from "classnames";
+import { BiChevronDown, BiChevronLeft, BiChevronRight } from "react-icons/bi";
+import { VuiIcon } from "../icon/Icon";
+import { VuiPopover } from "../popover/Popover";
+import { VuiStepsVertical } from "../stepsVertical/StepsVertical";
+// Center pill that displays the current step and toggles the dropdown. Receives
+// `isSelected` and `onClick` from VuiPopover, which clones it as its trigger.
+const StepNavigatorTrigger = forwardRef(({ icon, title, stepLabel, showStepCount, isSelected, onClick, "data-testid": dataTestId }, ref) => (_jsxs("button", Object.assign({ type: "button", ref: ref, onClick: onClick, "aria-haspopup": "listbox", "aria-expanded": Boolean(isSelected), "data-testid": dataTestId, className: classNames("vuiStepNavigator__trigger", {
+        "vuiStepNavigator__trigger--open": isSelected
+    }) }, { children: [_jsx(VuiIcon, Object.assign({ size: "s", color: "primary" }, { children: icon })), _jsx("span", Object.assign({ className: "vuiStepNavigator__triggerTitle" }, { children: title })), showStepCount && _jsxs("span", Object.assign({ className: "vuiStepNavigator__triggerCount" }, { children: [" \u00B7 ", stepLabel] })), _jsx("span", Object.assign({ className: classNames("vuiStepNavigator__caret", {
+                "vuiStepNavigator__caret--open": isSelected
+            }) }, { children: _jsx(VuiIcon, Object.assign({ size: "s", color: "subdued" }, { children: _jsx(BiChevronDown, {}) })) }))] }))));
+export const VuiStepNavigator = ({ steps, activeStep, showStepCount = true, onStepChange, onNext, onPrevious, onSelect, className, "data-testid": dataTestId }) => {
+    const clamp = (index) => Math.max(0, Math.min(steps.length - 1, index));
+    const [isOpen, setIsOpen] = useState(false);
+    const active = clamp(activeStep);
+    const current = steps[active];
+    const commit = (index) => {
+        const nextIndex = clamp(index);
+        setIsOpen(false);
+        onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(nextIndex, steps[nextIndex]);
+    };
+    const goPrevious = () => {
+        if (active <= 0)
+            return;
+        onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious(active - 1, steps[active - 1]);
+        commit(active - 1);
+    };
+    const goNext = () => {
+        if (active >= steps.length - 1)
+            return;
+        onNext === null || onNext === void 0 ? void 0 : onNext(active + 1, steps[active + 1]);
+        commit(active + 1);
+    };
+    const select = (index) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, steps[index]);
+        commit(index);
+    };
+    const prevDisabled = active <= 0;
+    const nextDisabled = active >= steps.length - 1;
+    const stepLabel = `Step ${active + 1} of ${steps.length}`;
+    const verticalSteps = steps.map((step, index) => (Object.assign(Object.assign({}, step), { isActive: index === active, onSelect: () => select(index) })));
+    const menu = (_jsx(VuiStepsVertical, { className: "vuiStepNavigator__menu", steps: verticalSteps, "data-testid": dataTestId ? `${dataTestId}-menu` : undefined }));
+    return (_jsxs("div", Object.assign({ className: classNames("vuiStepNavigator", className), "data-testid": dataTestId }, { children: [_jsx("button", Object.assign({ type: "button", className: "vuiStepNavigator__sideButton", onClick: goPrevious, disabled: prevDisabled, "aria-label": "Previous step", "data-testid": dataTestId ? `${dataTestId}-previous` : undefined }, { children: _jsx(VuiIcon, Object.assign({ size: "m" }, { children: _jsx(BiChevronLeft, {}) })) })), _jsx("div", Object.assign({ className: "vuiStepNavigator__center" }, { children: _jsx(VuiPopover, Object.assign({ className: "vuiStepNavigator__popover", anchorSide: "center", anchorOffsetY: 8, padding: "none", isOpen: isOpen, setIsOpen: setIsOpen, button: _jsx(StepNavigatorTrigger, { icon: current.icon, title: current.title, stepLabel: stepLabel, showStepCount: showStepCount, "data-testid": dataTestId ? `${dataTestId}-trigger` : undefined }) }, { children: menu })) })), _jsx("button", Object.assign({ type: "button", className: "vuiStepNavigator__sideButton", onClick: goNext, disabled: nextDisabled, "aria-label": "Next step", "data-testid": dataTestId ? `${dataTestId}-next` : undefined }, { children: _jsx(VuiIcon, Object.assign({ size: "m" }, { children: _jsx(BiChevronRight, {}) })) }))] })));
+};

package/lib/components/stepNavigator/_index.scss

@@ -0,0 +1,105 @@
+@import "../../sassUtils/index";
+
+$stepNavigatorBarHeight: 44px;
+$stepNavigatorRadius: $sizeXs; // 8px buttons & pill & rows.
+
+.vuiStepNavigator {
+  display: flex;
+  align-items: stretch;
+  gap: $sizeXs;
+  width: 100%;
+}
+
+// Square previous / next chevron buttons.
+.vuiStepNavigator__sideButton {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $stepNavigatorBarHeight;
+  padding: 0;
+  background-color: var(--vui-color-empty-shade);
+  border: 1px solid var(--vui-color-border-medium);
+  border-radius: $stepNavigatorRadius;
+  color: var(--vui-color-darker-shade);
+  cursor: pointer;
+  transition: box-shadow $transitionSpeed;
+
+  &:not(:disabled):hover {
+    box-shadow: $shadowSmallEnd;
+  }
+
+  &:disabled {
+    color: var(--vui-color-subdued-shade);
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+
+.vuiStepNavigator__center {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+// Center pill: current-step display and dropdown trigger.
+.vuiStepNavigator__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: $sizeXs;
+  width: 100%;
+  min-height: $stepNavigatorBarHeight;
+  padding: $sizeS $sizeM;
+  background-color: var(--vui-color-empty-shade);
+  border: 1px solid var(--vui-color-medium-shade);
+  border-radius: $stepNavigatorRadius;
+  cursor: pointer;
+  transition: border-color $transitionSpeed, box-shadow $transitionSpeed, background-color $transitionSpeed;
+
+  &:hover {
+    box-shadow: $shadowSmallEnd;
+  }
+
+  &--open {
+    background-color: var(--vui-color-primary-lighter-shade);
+    border-color: var(--vui-color-primary-shade);
+    box-shadow: 0 0 0 3px rgba(var(--vui-color-primary-shade-rgb), 0.14);
+  }
+}
+
+.vuiStepNavigator__triggerTitle {
+  font-size: $fontSizeLarge - 3px; // 15px
+  font-weight: $fontWeightBold;
+  color: var(--vui-color-darker-shade);
+  white-space: nowrap;
+}
+
+.vuiStepNavigator__triggerCount {
+  font-size: $fontSizeStandard;
+  font-weight: $fontWeightNormal;
+  color: var(--vui-color-subdued-shade);
+  white-space: nowrap;
+}
+
+.vuiStepNavigator__caret {
+  display: flex;
+  transition: transform $transitionSpeed;
+
+  &--open {
+    transform: rotate(180deg);
+  }
+}
+
+// Dropdown panel: applied to the VuiPopover surface to round and lighten it.
+.vuiStepNavigator__popover {
+  border-radius: $sizeS;
+  border-color: var(--vui-color-border-light);
+}
+
+// Dropdown body: VuiStepsVertical, constrained to the trigger's footprint.
+.vuiStepNavigator__menu {
+  width: 340px;
+  max-width: 94vw;
+  padding: $sizeXs;
+}

package/lib/components/stepsVertical/StepsVertical.d.ts

@@ -1,13 +1,15 @@
 export type { StepVerticalStatus } from "./types";
-export type StepsVertical = {
+export type StepVertical = {
     id: string;
     title: string;
     isActive?: boolean;
     hasErrors?: boolean;
+    isComplete?: boolean;
     icon: React.ReactNode;
     onSelect: () => void;
     "data-testid"?: string;
-}[];
+};
+export type StepsVertical = StepVertical[];
 type Props = {
     steps: StepsVertical;
     className?: string;

package/lib/components/stepsVertical/StepsVertical.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BiError } from "react-icons/bi";
+import { BiCheckCircle, BiError } from "react-icons/bi";
 import { VuiIcon } from "../icon/Icon";
 import { VuiMenuList } from "../menuList/VuiMenuList";
 import { VuiMenuListButton } from "../menuList/VuiMenuListButton";
@@ -18,8 +18,8 @@ export const VuiStepsVertical = (_a) => {
     var { steps, className, "data-testid": dataTestId } = _a, rest = __rest(_a, ["steps", "className", "data-testid"]);
     return (_jsx(VuiMenuList, Object.assign({ className: className, "data-testid": dataTestId }, rest, { children: steps.map((step) => {
             var _a;
-            const { id, title, isActive, hasErrors, icon, onSelect } = step;
+            const { id, title, isActive, hasErrors, isComplete, icon, onSelect } = step;
             const stepTestId = (_a = step["data-testid"]) !== null && _a !== void 0 ? _a : `${dataTestId}-step-${id}`;
-            return (_jsx(VuiMenuListButton, Object.assign({ isActive: isActive, onClick: () => onSelect(), "data-testid": stepTestId, icon: icon, append: hasErrors && (_jsx(VuiIcon, Object.assign({ size: "s", color: "danger", "data-testid": `${stepTestId}-error` }, { children: _jsx(BiError, {}) }))) }, { children: title }), id));
+            return (_jsx(VuiMenuListButton, Object.assign({ isActive: isActive, onClick: () => onSelect(), "data-testid": stepTestId, icon: icon, append: hasErrors ? (_jsx(VuiIcon, Object.assign({ size: "s", color: "danger", "data-testid": `${stepTestId}-error` }, { children: _jsx(BiError, {}) }))) : (isComplete && (_jsx(VuiIcon, Object.assign({ size: "s", color: "success", "data-testid": `${stepTestId}-complete` }, { children: _jsx(BiCheckCircle, {}) })))) }, { children: title }), id));
         }) })));
 };

package/lib/styles/index.css

@@ -403,7 +403,6 @@ fieldset {
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
-  scrollbar-gutter: stable;
 }
 
 .vuiAppSideNav {
@@ -4787,6 +4786,14 @@ h2.react-datepicker__current-month {
   transform: translateY(-100%) !important;
 }
 
+.vuiPopover--center {
+  transform: translate(-50%, -8px);
+}
+
+.vuiPopover--center.vuiPopover-isLoaded {
+  transform: translate(-50%, 0);
+}
+
 .vuiPopover--upLeft,
 .vuiPopover--upRight {
   transform: translateY(0);
@@ -5525,6 +5532,98 @@ h2.react-datepicker__current-month {
   font-size: 12px !important;
 }
 
+.vuiStepNavigator {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  width: 100%;
+}
+
+.vuiStepNavigator__sideButton {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  padding: 0;
+  background-color: var(--vui-color-empty-shade);
+  border: 1px solid var(--vui-color-border-medium);
+  border-radius: 8px;
+  color: var(--vui-color-darker-shade);
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+.vuiStepNavigator__sideButton:not(:disabled):hover {
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+}
+.vuiStepNavigator__sideButton:disabled {
+  color: var(--vui-color-subdued-shade);
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.vuiStepNavigator__center {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vuiStepNavigator__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+  min-height: 44px;
+  padding: 12px 16px;
+  background-color: var(--vui-color-empty-shade);
+  border: 1px solid var(--vui-color-medium-shade);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+}
+.vuiStepNavigator__trigger:hover {
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+}
+.vuiStepNavigator__trigger--open {
+  background-color: var(--vui-color-primary-lighter-shade);
+  border-color: var(--vui-color-primary-shade);
+  box-shadow: 0 0 0 3px rgba(var(--vui-color-primary-shade-rgb), 0.14);
+}
+
+.vuiStepNavigator__triggerTitle {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--vui-color-darker-shade);
+  white-space: nowrap;
+}
+
+.vuiStepNavigator__triggerCount {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--vui-color-subdued-shade);
+  white-space: nowrap;
+}
+
+.vuiStepNavigator__caret {
+  display: flex;
+  transition: transform 0.2s;
+}
+.vuiStepNavigator__caret--open {
+  transform: rotate(180deg);
+}
+
+.vuiStepNavigator__popover {
+  border-radius: 12px;
+  border-color: var(--vui-color-border-light);
+}
+
+.vuiStepNavigator__menu {
+  width: 340px;
+  max-width: 94vw;
+  padding: 8px;
+}
+
 .vuiSteps {
   width: 100%;
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "20.1.0",
+  "version": "20.2.1",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/stepNavigator/BasicStepNavigator.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { BiLink, BiLock, BiMessageRounded, BiPencil, BiShow, BiSolidMagicWand } from "react-icons/bi";
+import { VuiStepNavigator, StepNavigatorSteps } from "../../../lib";
+
+const steps: StepNavigatorSteps = [
+  { id: "branding", title: "Branding", icon: <BiPencil />, isComplete: true },
+  { id: "welcome", title: "Welcome", icon: <BiMessageRounded />, isComplete: true },
+  { id: "prompts", title: "Suggested prompts", icon: <BiSolidMagicWand />, hasErrors: true },
+  { id: "events", title: "Event visibility", icon: <BiShow /> },
+  { id: "access", title: "Access & SSO", icon: <BiLock /> },
+  { id: "url", title: "Public URL", icon: <BiLink /> }
+];
+
+export const BasicStepNavigator = () => {
+  const [activeStep, setActiveStep] = useState(1);
+
+  return <VuiStepNavigator steps={steps} activeStep={activeStep} onStepChange={(index) => setActiveStep(index)} />;
+};

package/src/docs/pages/stepNavigator/index.tsx

@@ -0,0 +1,12 @@
+import { BasicStepNavigator } from "./BasicStepNavigator";
+
+const BasicStepNavigatorSource = require("!!raw-loader!./BasicStepNavigator");
+
+export const stepNavigator = {
+  name: "Step navigator",
+  path: "/step-navigator",
+  example: {
+    component: <BasicStepNavigator />,
+    source: BasicStepNavigatorSource.default.toString()
+  }
+};

package/src/docs/pages.tsx

@@ -65,6 +65,7 @@ import { spinner } from "./pages/spinner";
 import { stat } from "./pages/stat";
 import { status } from "./pages/status";
 import { statList } from "./pages/statList";
+import { stepNavigator } from "./pages/stepNavigator";
 import { steps } from "./pages/steps";
 import { stepsVertical } from "./pages/stepsVertical";
 import { summary } from "./pages/summary";
@@ -111,7 +112,7 @@ export const categories: Category[] = [
   },
   {
     name: "Navigation",
-    pages: [tabs, stepsVertical, steps, chip]
+    pages: [tabs, stepsVertical, steps, stepNavigator, chip]
   },
   {
     name: "Content",