@pantheon-systems/pds-toolkit-react 2.0.0-alpha.8 → 2.0.0-alpha.80

package/dist/components/inputs/Timepicker/Timepicker.d.ts

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+import { CalendarDate } from '@internationalized/date';
+import { ValidationStatus } from '../../../libs/types/input-types';
+import './timepicker.css';
+export type TimepickerSize = 's' | 'm';
+/**
+ * Prop types for Timepicker
+ */
+export interface TimepickerProps {
+    /**
+     * Anchor calendar date used for DST-safe conversion math when `timeZone` changes. Defaults to today (in the previous timezone) if omitted — correct for the vast majority of scheduling UIs. Pass a real date (e.g. from Datepicker's selection) for full precision on/near DST transition dates.
+     */
+    anchorDate?: CalendarDate;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Optional default value for the field, as a 24-hour "HH:MM" string (e.g. "14:30"). Setting this prop automatically makes the input uncontrolled. Cannot be used in conjunction with the `value` prop.
+     */
+    defaultValue?: string;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Hour format. `12` displays hour + AM/PM (e.g. "12:30 PM"); `24` displays a 24-hour hour segment with no AM/PM (e.g. "13:30").
+     */
+    hourCycle?: 12 | 24;
+    /**
+     * Input ID.
+     */
+    id: string;
+    /**
+     * Width of the input field in pixels. When omitted, the input fills its container.
+     */
+    inputWidth?: number;
+    /**
+     * Input label.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the input field.
+     */
+    message?: string | ReactNode;
+    /**
+     * onBlur event handler. Fires when focus leaves the field entirely (not when it moves between segments).
+     */
+    onBlur?: () => void;
+    /**
+     * onChange event handler, called with a 24-hour "HH:MM" string whenever a complete time is entered. Controlled inputs should use this to manage the input value.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * onFocus event handler. Fires when focus enters the field.
+     */
+    onFocus?: () => void;
+    /**
+     * Is this field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Input size.
+     */
+    size?: TimepickerSize;
+    /**
+     * IANA timezone identifier (e.g. "America/Los_Angeles", "UTC"). Drives the auto-derived display label (e.g. "PDT") and, when this prop changes, converts the current value into the new zone using `@internationalized/date` — a real, DST-safe conversion, not just a relabel.
+     */
+    timeZone?: string;
+    /**
+     * Optional tooltip text to display additional information.
+     */
+    tooltipText?: string | null;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value of the input field, as a 24-hour "HH:MM" string (e.g. "14:30"). Used to set the value of the input field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     */
+    value?: string;
+}
+/**
+ * Timepicker UI component
+ */
+export declare const Timepicker: ({ anchorDate, className, defaultValue, disabled, hourCycle, id, inputWidth, label, message, onBlur, onChange, onFocus, required, showLabel, size, timeZone, tooltipText, validationMessage, validationStatus, value, }: TimepickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-utilities.d.ts

@@ -1,5 +1,6 @@
 import React, { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';
 import { SelectOptionGroupType, SelectOptionType } from './Select/Select';
+import '@components/Dropdown/dropdown.css';
 import './input-utilities.css';
 export declare const inputCommonClasses: {
     base: string;
@@ -10,7 +11,7 @@ export declare const inputCommonClasses: {
     readonly: string;
 };
 export declare const getInputWidthStyle: (inputWidth: number) => {
-    maxWidth: string;
+    width: string;
 };
 export declare const stripUrlProtocol: (value: string) => string;
 export declare const RequiredIcon: () => import("react/jsx-runtime").JSX.Element;
@@ -40,6 +41,15 @@ interface InputLabelProps {
      * Label text.
      */
     label: string;
+    /**
+     * Visual treatment of the label/legend text. `'default'` matches other
+     * form field labels (medium weight, tight spacing to the field) — use it
+     * when the fieldset is one of several inputs on a form. `'heading'` is
+     * semibold with more room below it, for cases where the group reads as
+     * its own section label rather than a form field among others (e.g. a
+     * filter panel's category groups).
+     */
+    labelVariant?: 'default' | 'heading';
     /**
      * Is the field required?
      */
@@ -53,7 +63,7 @@ interface InputLabelProps {
      */
     tooltipText?: string;
 }
-export declare const InputLabel: ({ className, disabled, id, isLegend, isPseudoLabel, label, required, showLabel, tooltipText, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputLabel: ({ className, disabled, id, isLegend, isPseudoLabel, label, labelVariant, required, showLabel, tooltipText, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;
 export declare const InputMessage: ({ className, forInputGroup, hasValidationMessage, id, message, validationMessageHasDecorators, validationStatus, }: {
     className?: string;
     forInputGroup?: boolean;

package/dist/components/{CTALink → links/CTALink}/CTALink.d.ts

@@ -10,9 +10,9 @@ export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
      */
     linkContent?: ReactNode;
     /**
-     * Size of link
+     * Size of link. `s` (default) is 14px text; `m` is 16px text.
      */
-    size?: 'sm' | 'md';
+    size?: 's' | 'm';
 }
 /**
  * CTA Link UI component

package/dist/components/{LinkNewWindow → links/LinkNewWindow}/LinkNewWindow.d.ts

@@ -15,7 +15,7 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
     /**
      * Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
      */
-    fontSize?: 'sm' | 'md' | 'lg';
+    fontSize?: 's' | 'm';
     /**
      * Is the link in the process of loading?
      */

package/dist/components/loading-indicators/Spinner/Spinner.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
 export type SpinnerSize = 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-export type SpinnerColorType = 'full-color' | 'monochromatic' | 'monochromatic-reverse';
 import './spinner.css';
 export interface SpinnerProps extends ComponentPropsWithoutRef<'span'> {
     /**
@@ -8,9 +7,11 @@ export interface SpinnerProps extends ComponentPropsWithoutRef<'span'> {
      */
     className?: string;
     /**
-     * Spinner color
+     * Arc color. Accepts any CSS color value or `var(--token)` reference.
+     * The track ring renders at the same color with reduced opacity.
+     * Defaults to the interactive blue token.
      */
-    colorType?: SpinnerColorType;
+    color?: string;
     /**
      * Should the spinner be an inline element? If true, it will be displayed inline-block without a visible label.
      */
@@ -31,4 +32,4 @@ export interface SpinnerProps extends ComponentPropsWithoutRef<'span'> {
 /**
  * Spinner UI component
  */
-export declare const Spinner: ({ className, colorType, isInline, label, showLabel, size, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Spinner: ({ className, color, isInline, label, showLabel, size, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/ButtonNav/ButtonNav.d.ts

@@ -10,20 +10,26 @@ export interface ButtonNavProps extends ComponentPropsWithRef<'nav'> {
      * Aria label for the navigation.
      */
     ariaLabel: string;
+    /**
+     * Renders a border around the track. Off by default.
+     */
+    border?: boolean;
     /**
      * Additional class names
      */
     className?: string;
     /**
-     * Menu items to render.
+     * When true, renders a dropdown menu in place of the button group at mobile viewports.
+     * The mobile breakpoint is controlled by the `mobileBreakpoint` prop on `GlobalWrapper`.
+     * Defaults to `false` — the button group is shown at all breakpoints.
      */
-    menuItems?: ButtonNavItem[];
+    hasMobileDropdown?: boolean;
     /**
-     * Size of the Buttons.
+     * Menu items to render.
      */
-    size?: 's' | 'm';
+    menuItems?: ButtonNavItem[];
 }
 /**
  * ButtonNav UI component
  */
-export declare const ButtonNav: ({ ariaLabel, className, menuItems, size, ...props }: ButtonNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonNav: ({ ariaLabel, border, className, hasMobileDropdown, menuItems, ...props }: ButtonNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { NavigationItem } from '../../../libs/types/navigation-types';
+import '@components/Dropdown/dropdown.css';
 import './dropdown-menu.css';
 /**
  * Prop types for DropdownMenu

package/dist/components/navigation/Navbar/Navbar.d.ts

@@ -1,13 +1,12 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ContainerWidth } from '../../../libs/types/custom-types';
-import { PantheonLogoDisplayType } from '../../PantheonLogo/PantheonLogo';
 import './navbar.css';
 /**
  * Prop types for Navbar
  */
 export interface NavbarProps extends ComponentPropsWithoutRef<'header'> {
     /**
-     * Navbar content.
+     * Navbar content. Use the `logo`, `items-left`, `items-center`, and `items-right` slots.
      */
     children?: ReactNode;
     /**
@@ -27,25 +26,14 @@ export interface NavbarProps extends ComponentPropsWithoutRef<'header'> {
      */
     hideBorder?: boolean;
     /**
-     * Hide the logo if it will be provided elsewhere in the layout. The logo will still be rendered in the mobile view.
+     * Overrides the horizontal (inline) padding of the desktop navbar bar.
+     * Accepts any CSS length (e.g. '1rem', '26px', or a token such as
+     * 'var(--pds-spacing-m)'). Applied symmetrically. Defaults to the
+     * Container's standard gutter. Useful for aligning navbar content with an
+     * adjacent app shell (e.g. the AppLayout sidebar) when placed in a `header`
+     * slot.
      */
-    hideLogo?: boolean;
-    /**
-     * How should the Pantheon logo be displayed.
-     */
-    logoDisplayType?: PantheonLogoDisplayType;
-    /**
-     * Where should the logo link to? A fully-formed link element.
-     */
-    logoLinkContent?: ReactNode;
-    /**
-     * Logo image source. If provided, the Pantheon logo will not be rendered.
-     */
-    logoSrc?: string;
-    /**
-     * Accepts a fully-formed link or a string (if a static site name is desired). Only necessary if logoDisplayType is `sub-brand`.
-     */
-    logoSubBrand?: ReactNode | string;
+    inlinePadding?: string;
     /**
      * Translation strings for accessibility.
      */
@@ -57,4 +45,4 @@ export interface NavbarProps extends ComponentPropsWithoutRef<'header'> {
 /**
  * Navbar UI component
  */
-export declare const Navbar: ({ children, className, colorType, containerWidth, hideBorder, hideLogo, logoDisplayType, logoLinkContent, logoSrc, logoSubBrand, translationStrings, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navbar: ({ children, className, colorType, containerWidth, hideBorder, inlinePadding, translationStrings, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/SideNav/SideNav.d.ts

@@ -13,6 +13,12 @@ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
      * Additional class names
      */
     className?: string;
+    /**
+     * When true, renders a dropdown menu in place of the standard navigation at mobile viewports.
+     * The mobile breakpoint is controlled by the `mobileBreakpoint` prop on `GlobalWrapper`.
+     * Defaults to `false` — the standard navigation is shown at all breakpoints.
+     */
+    hasMobileDropdown?: boolean;
     /**
      * Heading text. If a link is passed, it will be rendered as a link.
      */
@@ -36,4 +42,4 @@ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
 /**
  * SideNav UI component
  */
-export declare const SideNav: ({ ariaLabel, className, headingText, labels, menuItems, mobileMenuSelectTextFallback, ...props }: SideNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNav: ({ ariaLabel, className, hasMobileDropdown, headingText, labels, menuItems, mobileMenuSelectTextFallback, ...props }: SideNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/SideNavGlobal/SideNavGlobal.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { SideNavGlobalItemProps } from './SideNavGlobalItem';
 import './side-nav-global.css';
 /**
@@ -13,11 +13,6 @@ export interface SideNavGlobalProps extends ComponentPropsWithoutRef<'div'> {
      * Additional class names
      */
     className?: string;
-    /**
-     * Should the Pantheon logo be displayed above the menu items?
-     * It will not be displayed in the mobile view regardless of this value.
-     */
-    hasLogo?: boolean;
     /**
      * Is the sidebar collapsed?
      */
@@ -29,22 +24,17 @@ export interface SideNavGlobalProps extends ComponentPropsWithoutRef<'div'> {
         submenu: string;
         toggle: string;
     };
-    /**
-     * Where should the logo link to? A fully-formed link element.
-     * Only necessary if `hasLogo` is true.
-     * If the logo should not be a link, leave blank.
-     */
-    logoLinkContent?: ReactNode;
     /**
      * Menu items to render.
      */
     menuItems?: SideNavGlobalItemProps[];
     /**
-     * Text to display in the mobile menu trigger button when no active link is found.
+     * Callback to expand the sidebar. When provided and the sidebar is collapsed,
+     * tapping a nav item with children will expand the sidebar instead of showing a flyout.
      */
-    mobileMenuSelectTextFallback?: string;
+    onExpandSidebar?: () => void;
 }
 /**
  * SideNavGlobal UI component
  */
-export declare const SideNavGlobal: ({ ariaLabel, className, hasLogo, isSidebarCollapsed, labels, logoLinkContent, menuItems, mobileMenuSelectTextFallback, ...props }: SideNavGlobalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavGlobal: ({ ariaLabel, className, isSidebarCollapsed, labels, menuItems, onExpandSidebar, ...props }: SideNavGlobalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/SideNavGlobal/SideNavGlobalItem.d.ts

@@ -6,6 +6,12 @@ export interface SideNavGlobalItemProps extends NavigationItem {
      * Icon to display next to the link content.
      */
     icon?: PDSIcon;
+    /**
+     * Whether the item's submenu is expanded. Controlled by the parent
+     * `SideNavGlobal` so expansion state stays in React rather than being
+     * mutated on the DOM.
+     */
+    isExpanded?: boolean;
     /**
      * Flag indicating whether the sidebar is collapsed.
      */
@@ -17,8 +23,16 @@ export interface SideNavGlobalItemProps extends NavigationItem {
         submenu: string;
         toggle: string;
     };
+    /**
+     * Callback to expand the sidebar on touch devices when collapsed.
+     */
+    onExpandSidebar?: () => void;
+    /**
+     * Callback to toggle the item's submenu expansion.
+     */
+    onToggleExpand?: () => void;
 }
 /**
  * SideNavGlobalItem UI component
  */
-export declare const SideNavGlobalItem: ({ icon, isActive, isSidebarCollapsed, labels, linkContent, links, }: SideNavGlobalItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavGlobalItem: ({ icon, isActive, isExpanded, isSidebarCollapsed, labels, linkContent, links, onExpandSidebar, onToggleExpand, }: SideNavGlobalItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/SiteMenu/SiteMenu.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { NavMenuItem } from '../../../libs/types/navigation-types';
+import '@components/Dropdown/dropdown.css';
+import './nav-menu.css';
+/**
+ * Prop types for SiteMenu
+ */
+interface SiteMenuProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for `nav` element.
+     */
+    ariaLabel: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Menu Items.
+     */
+    menuItems?: NavMenuItem[];
+}
+/**
+ * SiteMenu UI component
+ */
+export declare const SiteMenu: ({ ariaLabel, className, menuItems, ...props }: SiteMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navigation/SiteMenu/SiteMenuDropdown.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { NavMenuItem } from '../../../libs/types/navigation-types';
+/**
+ * Prop types for SiteMenuDropdown
+ */
+interface SiteMenuDropdownProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Menu items. If omitted or empty, renders as a plain top-level link.
+     */
+    items?: NavMenuItem[];
+    /**
+     * Menu label shown on the trigger button.
+     */
+    label?: string;
+}
+/**
+ * SiteMenuDropdown — a sub-menu for SiteMenu items that have child links.
+ * Desktop: Floating UI dropdown (opens on hover or click).
+ * Mobile: NavAccordion inline expansion.
+ * Both are always in the DOM; CSS driven by [data-pds-mobile] shows the right one.
+ */
+export declare const SiteMenuDropdown: ({ items, label }: SiteMenuDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navigation/TreeNav/TreeNav.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { NavigationItem } from '../../../libs/types/navigation-types';
+import './tree-nav.css';
+export type TreeNavItem = NavigationItem & {
+    /**
+     * A unique identifier for this item — typically its route or URL path (e.g. `/guides/overview`).
+     *
+     * Required on any item that has children (`links` array). The component uses this to
+     * re-find the item's DOM node after a re-render and restore its expanded/collapsed state.
+     * Without it, a user-opened nested submenu will collapse whenever the component re-renders.
+     *
+     * Leaf items (no `links`) do not need `path`.
+     */
+    path?: string;
+};
+/**
+ * Prop types for TreeNav
+ */
+export interface TreeNavProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Heading text. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | ReactElement;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: TreeNavItem[];
+}
+/**
+ * TreeNav UI component — a multi-level collapsible tree navigation for dense
+ * hierarchical content such as documentation sites.
+ */
+export declare const TreeNav: ({ ariaLabel, className, headingText, labels, menuItems, ...props }: TreeNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/UserMenu/UserMenu.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { PDSIcon } from '../../icons/Icon/Icon';
+import { ThemeSwitcherProps } from '../../ThemeSwitcher/ThemeSwitcher';
 import './user-menu.css';
 /**
  * Prop types for UserMenuItem
@@ -42,10 +43,39 @@ export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
      * Additional class names.
      */
     className?: string;
+    /**
+     * Opt in to swapping the trigger + floating dropdown panel for an inline
+     * accordion at the mobile breakpoint. Defaults to `false` — UserMenu
+     * always renders its normal trigger + dropdown otherwise, regardless of
+     * viewport. Set this explicitly when placing UserMenu inside a mobile nav
+     * menu that provides the accordion's expected layout (e.g. `Navbar`'s own
+     * mobile menu) — typically `isMobileAccordion={useIsMobile()}`, using the
+     * `useIsMobile` hook, so the swap only takes effect at the mobile
+     * breakpoint.
+     */
+    isMobileAccordion?: boolean;
     /**
      * Array of menu items.
      */
     menuItems?: UserMenuItem[];
+    /**
+     * Callback fired when the theme changes. Provide together with `theme` to
+     * render the theme switcher row at the top of the menu.
+     */
+    onThemeChange?: ThemeSwitcherProps['onChange'];
+    /**
+     * The currently active theme. Provide together with `onThemeChange` to
+     * render the theme switcher row at the top of the menu.
+     */
+    theme?: ThemeSwitcherProps['theme'];
+    /**
+     * Label for the theme switcher row. Defaults to `'Theme'`.
+     */
+    themeLabel?: string;
+    /**
+     * Translation strings for the theme switcher options.
+     */
+    themeLabelStrings?: ThemeSwitcherProps['labelStrings'];
     /**
      * User email address.
      */
@@ -58,12 +88,8 @@ export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
      * User display name.
      */
     userName?: string;
-    /**
-     * If true, the workspace selector will be styled and rendered to work with the mobile version of the navbar menu. Defaults to true.
-     */
-    withinNavbar?: boolean;
 }
 /**
  * UserMenu UI component
  */
-export declare const UserMenu: ({ ariaLabel, className, menuItems, userEmail, userImageSrc, userName, withinNavbar, ...props }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UserMenu: ({ ariaLabel, className, isMobileAccordion, menuItems, onThemeChange, theme, themeLabel, themeLabelStrings, userEmail, userImageSrc, userName, ...props }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -1,11 +1,6 @@
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
-import { BadgeColor } from '../../badges/Badge/Badge';
+import '@components/Dropdown/dropdown.css';
 import './workspace-selector.css';
-declare const tierConfig: Record<string, {
-    color: BadgeColor;
-    label: string;
-}>;
-export type PlanTiers = keyof typeof tierConfig;
 export type WorkspaceSelectorItem = {
     /**
      * Name of the workspace.
@@ -32,10 +27,6 @@ export type WorkspaceSelectorItem = {
      * Only used when isRestricted is true.
      */
     onRestrictedSelection?: () => void;
-    /**
-     * Account plan tier.
-     */
-    planTier?: PlanTiers;
     /**
      * Visually-hidden label to indicate restricted access.
      * @default 'Restricted'
@@ -74,6 +65,17 @@ export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'>
      * Placeholder text for the filter input.
      */
     filterPlaceholder?: string;
+    /**
+     * Opt in to swapping the trigger + floating dropdown panel for an inline
+     * accordion at the mobile breakpoint. Defaults to `false` — WorkspaceSelector
+     * always renders its normal trigger + dropdown otherwise, regardless of
+     * viewport. Set this explicitly when placing WorkspaceSelector inside a
+     * mobile nav menu that provides the accordion's expected layout (e.g.
+     * `Navbar`'s own mobile menu) — typically `isMobileAccordion={useIsMobile()}`,
+     * using the `useIsMobile` hook, so the swap only takes effect at the
+     * mobile breakpoint.
+     */
+    isMobileAccordion?: boolean;
     /**
      * Heading for the workspace dropdown menu.
      */
@@ -86,10 +88,6 @@ export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'>
      * Text to display when no results are found.
      */
     noResultsText?: string;
-    /**
-     * Is this component located in the top nav? Only applies when using the Navbar component from this toolkit. Defaults to true per design.
-     */
-    withinNavbar?: boolean;
     /**
      * List of all workspaces for a user.
      */
@@ -98,5 +96,4 @@ export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'>
 /**
  * WorkspaceSelector UI component
  */
-export declare const WorkspaceSelector: ({ ariaLabel, className, createWorkspaceLink, filterLabel, filterPlaceholder, menuHeading, minFilterItems, noResultsText, withinNavbar, workspaceList, ...props }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const WorkspaceSelector: ({ ariaLabel, className, createWorkspaceLink, filterLabel, filterPlaceholder, isMobileAccordion, menuHeading, minFilterItems, noResultsText, workspaceList, ...props }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/navigation-utilities.d.ts

@@ -39,15 +39,28 @@ export declare const isActiveItem: (item: NavigationItem) => boolean;
  * const inActiveTrail = isActiveTrail(parentItem); // True if parent or any child is active
  */
 export declare const isActiveTrail: (item: NavigationItem) => boolean;
+/**
+ * Serializes the active state of an entire menu tree into a string signature.
+ * The signature changes on any route change — including navigation between two
+ * routes under the same top-level item — not just when a different top-level
+ * item enters the active trail. Used to reset user-driven expansion overrides
+ * so submenu expansion follows the active trail again after navigation.
+ * @param items - Array of navigation items to serialize
+ * @returns A string signature representing the tree's active state
+ * @example
+ * const signature = buildActiveSignature(menuItems);
+ */
+export declare const buildActiveSignature: (items: NavigationItem[]) => string;
 /**
  * Checks if the provided content is an interactive element (link, button, etc.)
  * @param content - The React content to examine
  * @returns True if the content is an interactive element, false otherwise
- * @description Currently detects:
+ * @description Detects:
  * - Native anchor elements (`<a>`)
- * - React Router Link components (by displayName)
+ * - React Router Link/NavLink components (by displayName or by `to`/`href` props)
  * @example
  * const isInteractive = isInteractiveElement(<Link to="/home">Home</Link>); // true
+ * const isInteractive = isInteractiveElement(<NavLink to="/home">Home</NavLink>); // true
  * const isInteractive = isInteractiveElement(<span>Label</span>); // false
  * const isInteractive = isInteractiveElement("Plain text"); // false
  */