@pantheon-systems/pds-toolkit-react 2.0.0-alpha.40 → 2.0.0-alpha.42

package/codemods/v1-to-v2/mappings.json

@@ -352,8 +352,44 @@
 			{
 				"component": "SegmentedButton",
 				"prop": "size",
-				"description": "New size prop adds two height/font-size variants. Defaults to 's' (32px, matching the small button height). 'xs' gives 24px segments for compact layouts.",
-				"usage": "Use size='s' (default) for standard usage, size='xs' for dense or space-constrained layouts."
+				"description": "New size prop adds three self-contained height/font-size variants, independent of the button size scale: 's' (20px), 'm' (24px, default), and 'l' (32px). The icon scales with the size (s → 12px, m → 14px, l → 16px).",
+				"usage": "Use size='m' (default) for standard usage, size='s' for dense or space-constrained layouts, size='l' for a more prominent control."
+			},
+			{
+				"component": "SegmentedButton",
+				"prop": "border",
+				"description": "New boolean prop that draws a border around the track. Defaults to false — the track has no border.",
+				"usage": "Set border to add a visible border around the control."
+			},
+			{
+				"component": "SegmentedButton",
+				"prop": "iconOnly",
+				"description": "New boolean prop that renders each option as a square, icon-only segment with a circular selected pill. Defaults to false. Each option must include an iconName; its label is used as the visually hidden accessible name and shown in a tooltip on hover. Works at any size; the icon and pill scale with the size prop.",
+				"usage": "Set iconOnly for compact, icon-only controls (for example, a theme toggle)."
+			},
+			{
+				"component": "ButtonNav",
+				"prop": "border",
+				"description": "New boolean prop that draws a border around the track, matching the SegmentedButton component. Defaults to false — the track has no border.",
+				"usage": "Set border to add a visible border around the navigation track."
+			},
+			{
+				"component": "UserMenu",
+				"prop": "theme",
+				"description": "New prop for the currently active theme ('light' | 'dark' | 'system'). When provided together with onThemeChange, a theme switcher row (ThemeSwitcher 'toggle' variant) renders at the top of the menu.",
+				"usage": "Provide theme and onThemeChange to surface theme switching directly in the user menu."
+			},
+			{
+				"component": "UserMenu",
+				"prop": "onThemeChange",
+				"description": "New callback fired with the newly selected theme. Provide together with theme to render the theme switcher row. Optional themeLabel and themeLabelStrings props localize the row.",
+				"usage": "Use to update and persist your application's theme state when the user changes it from the menu."
+			},
+			{
+				"component": "StatusIndicator",
+				"prop": "linkContent",
+				"description": "New optional prop that makes the status indicator a link. Pass a fully-formed, router-agnostic link element (for example, an anchor or your router's link component); the indicator's dot and label render as its children, so the whole indicator becomes clickable.",
+				"usage": "Provide linkContent to link the status indicator, following the same router-agnostic link pattern used across the toolkit."
 			},
 			{
 				"component": "ComboboxMultiselect",
@@ -509,6 +545,12 @@
 				"replacement": "Remove the prop. CodeBlock now renders in a single unified style.",
 				"reason": "The colorType prop ('dark' | 'light') has been removed in v2. CodeBlock now renders in one consistent style that works across both page themes."
 			},
+			{
+				"component": "SiteMenu",
+				"prop": "colorType",
+				"replacement": "No direct replacement — consult design for a different approach. The reverse color scheme is not being carried forward in v2; remove any colorType='reverse' usage (the default light-background rendering is unchanged).",
+				"reason": "The colorType prop ('default' | 'reverse') has been removed in v2. The reverse color scheme has been dropped and there is no replacement — reach out to design if you need a dark-background treatment."
+			},
 			{
 				"component": "Tabs",
 				"prop": "size",
@@ -527,6 +569,12 @@
 				"replacement": "Remove the prop. ButtonNav now renders at a single size equivalent to the former size='s'.",
 				"reason": "The size prop and the medium size have been removed in v2. The component now renders at one size only. Remove any size='s' or size='m' usage. A smaller size may be reintroduced later if a need arises."
 			},
+			{
+				"component": "StatusIndicator",
+				"prop": "size",
+				"replacement": "Remove the prop. StatusIndicator now renders at a single size (equivalent to the former size='s' / v1 'md').",
+				"reason": "The size prop has been removed in v2. StatusIndicator renders at one size only; the small ('xs') size is no longer available. Remove any size prop usage."
+			},
 			{
 				"component": "SiteSearch",
 				"prop": "horizontalOffset",
@@ -664,12 +712,6 @@
 				"reason": "Removed in V2. Mobile accordion behavior is now driven by DOM context ([data-pds-mobile] .pds-navbar__mobile) rather than this prop.",
 				"migration": "Remove the withinNavbar prop. No replacement needed."
 			},
-			{
-				"component": "NotificationsPopover",
-				"prop": "withinNavbar",
-				"reason": "Removed in V2. Mobile accordion behavior is now driven by DOM context ([data-pds-mobile] .pds-navbar__mobile) rather than this prop.",
-				"migration": "Remove the withinNavbar prop. No replacement needed."
-			},
 			{
 				"component": "SiteMenu",
 				"prop": "mobileMenuMaxWidth",
@@ -1044,18 +1086,6 @@
 				},
 				"reason": "Standardized size naming to match other v2 components. New 'xs' size added for compact contexts."
 			},
-			{
-				"component": "StatusIndicator",
-				"prop": "size",
-				"description": "Size naming convention updated",
-				"v1Type": "'sm' | 'md'",
-				"v2Type": "'xs' | 's'",
-				"migration": {
-					"sm": "xs",
-					"md": "s"
-				},
-				"reason": "Standardized size naming to match other v2 components."
-			},
 			{
 				"component": "StatusIndicator",
 				"prop": "type",

package/dist/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { StatusType } from '../../libs/types/custom-types';
 import './status-indicator.css';
 export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
@@ -11,9 +11,12 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
      */
     label: string;
     /**
-     * Sets the size
+     * Optionally makes the status indicator a link. Pass a fully-formed,
+     * router-agnostic link element (e.g. an anchor or your router's link
+     * component); the indicator's dot and label render as its children, so the
+     * whole indicator becomes clickable.
      */
-    size?: 'xs' | 's';
+    linkContent?: ReactNode;
     /**
      * Sets status type
      */
@@ -22,4 +25,4 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * StatusIndicator UI component
  */
-export declare const StatusIndicator: ({ className, label, size, type, ...props }: StatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StatusIndicator: ({ className, label, linkContent, type, ...props }: StatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -1,6 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { SegmentedButtonSize } from '../buttons/SegmentedButton/SegmentedButton';
 import './theme-switcher.css';
 type Theme = 'light' | 'dark' | 'system';
+type ThemeSwitcherVariant = 'dropdown' | 'toggle';
 /**
  * Prop types for ThemeSwitcher
  */
@@ -26,13 +28,26 @@ export interface ThemeSwitcherProps extends Omit<ComponentPropsWithoutRef<'div'>
      * Callback triggered when the theme changes
      */
     onChange?: (theme: Theme) => void;
+    /**
+     * Size of the control. Only applies to the `'toggle'` variant, where it is
+     * passed through to the underlying SegmentedButton. Defaults to `'m'`.
+     */
+    size?: SegmentedButtonSize;
     /**
      * The current theme
      */
     theme?: Theme;
+    /**
+     * Presentation of the switcher. `'toggle'` (default) renders an icon-only
+     * segmented control — best for authenticated apps where the choice persists
+     * (for example, nested in the user menu). `'dropdown'` renders an icon-only
+     * menu button with a tooltip — best for global navigation and anonymous
+     * users who can't persist a preference.
+     */
+    variant?: ThemeSwitcherVariant;
 }
 /**
  * ThemeSwitcher UI component
  */
-export declare const ThemeSwitcher: ({ className, id, labelStrings, onChange, theme, ...props }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeSwitcher: ({ className, id, labelStrings, onChange, size, theme, variant, ...props }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts

@@ -1,6 +1,6 @@
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './segmented-button.css';
-export type SegmentedButtonSize = 's' | 'xs';
+export type SegmentedButtonSize = 's' | 'm' | 'l';
 /**
  * Structure for each option in the SegmentedButton component.
  */
@@ -41,6 +41,10 @@ interface OptionType {
  * Prop types for SegmentedButton
  */
 export interface SegmentedButtonProps {
+    /**
+     * Renders a border around the track. Off by default.
+     */
+    border?: boolean;
     /**
      * Additional class names.
      */
@@ -53,6 +57,13 @@ export interface SegmentedButtonProps {
      * Disables all options in the SegmentedButton.
      */
     disabled?: boolean;
+    /**
+     * Renders each option as an icon-only, square segment with a circular
+     * selected pill. Each option's `iconName` is required and its `label` is
+     * used as the accessible name (visually hidden) and shown in a tooltip on
+     * hover. Works at any size; the icon and pill scale with the size.
+     */
+    iconOnly?: boolean;
     /**
      * Unique ID for the SegmentedButton.
      */
@@ -71,8 +82,8 @@ export interface SegmentedButtonProps {
      */
     options: OptionType[];
     /**
-     * Size of the segmented button. `'s'` matches the small button height (32px);
-     * `'xs'` matches the extra-small button height (24px).
+     * Size of the segmented button: `'s'` (20px), `'m'` (24px, default), or
+     * `'l'` (32px). The icon scales with the size.
      */
     size?: SegmentedButtonSize;
     /**
@@ -83,5 +94,5 @@ export interface SegmentedButtonProps {
 /**
  * SegmentedButton UI component
  */
-export declare const SegmentedButton: ({ className, defaultValue, disabled, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedButton: ({ border, className, defaultValue, disabled, iconOnly, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/icons/Icon/generated-icon-data.d.ts

@@ -3,7 +3,7 @@
  *
  * Generated by: npm run generate:icon-data
  * Source: icon-registry.ts + Font Awesome packages + custom-icons.tsx
- * Generated: 2026-07-14T22:06:12.750Z
+ * Generated: 2026-07-16T17:05:24.429Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };

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

@@ -10,6 +10,10 @@ 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
      */
@@ -22,4 +26,4 @@ export interface ButtonNavProps extends ComponentPropsWithRef<'nav'> {
 /**
  * ButtonNav UI component
  */
-export declare const ButtonNav: ({ ariaLabel, className, menuItems, ...props }: ButtonNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonNav: ({ ariaLabel, border, className, menuItems, ...props }: ButtonNavProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -14,10 +14,6 @@ interface SiteMenuProps extends ComponentPropsWithoutRef<'nav'> {
      * Additional class names
      */
     className?: string;
-    /**
-     * Color scheme.
-     */
-    colorType?: 'default' | 'reverse';
     /**
      * Menu Items.
      */
@@ -26,5 +22,5 @@ interface SiteMenuProps extends ComponentPropsWithoutRef<'nav'> {
 /**
  * SiteMenu UI component
  */
-export declare const SiteMenu: ({ ariaLabel, className, colorType, menuItems, ...props }: SiteMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SiteMenu: ({ ariaLabel, className, menuItems, ...props }: SiteMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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
@@ -46,6 +47,24 @@ export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
      * 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.
      */
@@ -62,4 +81,4 @@ export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
 /**
  * UserMenu UI component
  */
-export declare const UserMenu: ({ ariaLabel, className, menuItems, userEmail, userImageSrc, userName, ...props }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UserMenu: ({ ariaLabel, className, menuItems, onThemeChange, theme, themeLabel, themeLabelStrings, userEmail, userImageSrc, userName, ...props }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/css/component-css/pds-button-nav.css

@@ -1 +1 @@
-.pds-button-nav{display:inline-block}.pds-button-nav__menu{align-items:center;background-color:var(--pds-color-segmented-control-track-background);border:1px solid var(--pds-color-border-default-secondary);border-radius:var(--pds-border-radius-button);display:inline-flex;gap:var(--pds-spacing-5xs);list-style:none;margin:0;padding:3px}.pds-button-nav__item{display:flex;flex-shrink:0}.pds-button-nav__item a{align-items:center;block-size:var(--pds-spacing-button-height-s);border-radius:var(--pds-border-radius-button);color:var(--pds-color-foreground-default);display:flex;font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-medium);gap:var(--pds-spacing-2xs);justify-content:center;line-height:0;padding-inline:var(--pds-spacing-m);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button-nav__item:not(.pds-button-nav__item--active):hover a{color:var(--pds-color-interactive-foreground-hover)}.pds-button-nav__item a:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-button-nav__item--active a{background-color:var(--pds-color-segmented-control-selected-background)}.pds-button-nav__mobile{display:none}[data-pds-mobile] .pds-button-nav__mobile{display:block}[data-pds-mobile] .pds-button-nav__menu{display:none}
+.pds-button-nav{display:inline-block}.pds-button-nav__menu{align-items:center;background-color:var(--pds-color-segmented-control-track-background);border-radius:var(--pds-border-radius-button);display:inline-flex;gap:var(--pds-spacing-5xs);list-style:none;margin:0;padding:3px}.pds-button-nav--bordered .pds-button-nav__menu{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-border-default-secondary)}.pds-button-nav__item{display:flex;flex-shrink:0}.pds-button-nav__item a{align-items:center;block-size:var(--pds-spacing-button-height-s);border-radius:var(--pds-border-radius-button);color:var(--pds-color-foreground-default);display:flex;font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-medium);gap:var(--pds-spacing-2xs);justify-content:center;line-height:0;padding-inline:var(--pds-spacing-m);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button-nav__item:not(.pds-button-nav__item--active):hover a{color:var(--pds-color-interactive-foreground-hover)}.pds-button-nav__item a:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-button-nav__item--active a{background-color:var(--pds-color-segmented-control-selected-background)}.pds-button-nav__mobile{display:none}[data-pds-mobile] .pds-button-nav__mobile{display:block}[data-pds-mobile] .pds-button-nav__menu{display:none}

package/dist/css/component-css/pds-compact-empty-state.css

@@ -1 +1 @@
-.pds-compact-empty-state{align-items:center;display:flex;flex-direction:column;font-family:var(--pds-typography-ff-default);padding-block:var(--pds-spacing-5xl);row-gap:var(--pds-spacing-xl);text-align:center;width:100%}.pds-compact-empty-state__icon{color:var(--pds-color-foreground-default-secondary)}.pds-compact-empty-state__heading{display:block;font-size:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-3xs)}.pds-compact-empty-state__message{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-m);margin-block-end:0;margin-inline:auto;max-width:600px;text-wrap:pretty}
+.pds-compact-empty-state{align-items:center;display:flex;flex-direction:column;font-family:var(--pds-typography-ff-default);padding-block:var(--pds-spacing-5xl);row-gap:var(--pds-spacing-xl);text-align:center;width:100%}.pds-compact-empty-state__icon{color:var(--pds-color-foreground-default-secondary)}.pds-compact-empty-state__heading{display:block;font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-3xs)}.pds-compact-empty-state__message{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-m);margin-block-end:0;margin-inline:auto;max-width:600px;text-wrap:pretty}