@pantheon-systems/pds-toolkit-react 2.0.0-alpha.81 → 2.0.0-alpha.83

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

@@ -398,9 +398,9 @@
 			},
 			{
 				"component": "SegmentedButton",
-				"prop": "border",
+				"prop": "hasBorder",
 				"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."
+				"usage": "Set hasBorder to add a visible border around the control."
 			},
 			{
 				"component": "SegmentedButton",
@@ -410,9 +410,9 @@
 			},
 			{
 				"component": "ButtonNav",
-				"prop": "border",
+				"prop": "hasBorder",
 				"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."
+				"usage": "Set hasBorder to add a visible border around the navigation track."
 			},
 			{
 				"component": "UserMenu",
@@ -877,6 +877,14 @@
 				"v2Default": "'100%'",
 				"reason": "The component now fills its container by default rather than imposing its own width cap. It's always used inside the dashboard's AppLayout, which already constrains page content width — the old 1200px default was a leftover from the V1 standalone-page convention and fought the outer layout's own max-width.",
 				"migration": "If you relied on the 1200px cap (e.g. a true standalone full-page usage with no other width constraint), pass maxWidth='1200px' explicitly."
+			},
+			{
+				"component": "FlexContainer",
+				"prop": "mobileFlexDirection",
+				"v1Default": "'column'",
+				"v2Default": "undefined (falls back to flexDirection)",
+				"reason": "mobileFlexDirection was hardcoded to 'column' regardless of flexDirection, unlike every other mobile* prop, which falls back to its desktop counterpart when unset. In both v1 and v2 alpha releases through 2.0.0-alpha.81, this silently stacked any row-oriented FlexContainer vertically on mobile even when no mobile-specific direction was requested.",
+				"migration": "If you were relying on the old behavior to stack a row on mobile, pass mobileFlexDirection='column' explicitly. If you have a row-oriented FlexContainer with no mobileFlexDirection set, it will now stay a row on mobile instead of silently stacking — review those usages, as this may change their mobile appearance."
 			}
 		],
 		"typeChanges": [

package/dist/components/Table/Table.d.ts

@@ -174,6 +174,18 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Override for translation.
      */
     getSortLabel?: (columnHeader: string) => string;
+    /**
+     * When `true`, providing `renderDetailPanel` also makes desktop rows
+     * clickable, sliding in an inline side panel with that content — the
+     * "Row detail panel" pattern. Defaults to `false`: on its own,
+     * `renderDetailPanel` only drives the mobile sheet (see `hasMobileCards`)
+     * — the desktop panel is an explicit opt-in, matching how the mobile
+     * behaviors already work, rather than an implicit side effect of
+     * providing sheet content. Has no effect on `onRowInspect`, which makes
+     * rows clickable/keyboard-focusable regardless of this flag — it's a
+     * consumer-owned callback with nothing built-in to show.
+     */
+    hasDesktopDetailPanel?: boolean;
     /**
      * When `true`, the table renders as a list of tappable cards at the
      * mobile breakpoint instead of a `<table>`. Defaults to `false` — an
@@ -183,7 +195,8 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * use looks or behaves. Opt in per table, tuning `cardVisible` on its
      * columns as you go. When `false` (or unset), none of the
      * mobile-specific behavior applies: `cardVisible` has no effect, and row
-     * detail (if any) still uses the desktop side panel, not a sheet.
+     * detail (if any) uses the desktop side panel instead of a sheet — but
+     * only when `hasDesktopDetailPanel` is also set.
      */
     hasMobileCards?: boolean;
     /**
@@ -285,12 +298,6 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * internally and expects the parent to pass pre-sorted data.
      */
     onSort?: (key: string, order: SortOrder) => void;
-    /**
-     * Render prop for the detail panel content. When provided, clicking a row
-     * slides in an inline detail panel alongside the table. Receives the row
-     * data and a context object with navigation callbacks and state.
-     * See the [Row detail panel](/docs/components-table--row-detail-panel) story.
-     */
     /**
      * Available page size options rendered in the rows-per-page selector.
      * When provided, the selector is shown to the left of the pagination controls.
@@ -321,9 +328,11 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      */
     prevDetailPanelRowLabel?: string;
     /**
-     * Render prop for the detail panel content. When provided, clicking a row
-     * slides in an inline detail panel alongside the table. Receives the row
-     * data and a context object with navigation callbacks and state.
+     * Render prop for the detail panel content — the mobile sheet (see
+     * `hasMobileCards`), and, when `hasDesktopDetailPanel` is also set,
+     * clicking a row sliding in an inline desktop panel alongside the
+     * table. Receives the row data and a context object with navigation
+     * callbacks and state.
      * See the [Row detail panel](/docs/components-table--row-detail-panel) story.
      */
     renderDetailPanel?: (row: Record<string, ReactNode>, context: DetailPanelContext) => ReactNode;
@@ -363,4 +372,4 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      */
     totalItemCount?: number;
 }
-export declare const Table: ({ className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateHeading, emptyStateMessage, footer, getDetailPanelPositionLabel, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, hasMobileCards, hasMobileDetailSheet, inspectedRowId, isLoading, isRowSelectable, itemsPerPage, loadingRowCount, maxHeight, minHeight, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, pageSizeSelectLabel, paginationLabels, panel, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateHeading, emptyStateMessage, footer, getDetailPanelPositionLabel, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, hasDesktopDetailPanel, hasMobileCards, hasMobileDetailSheet, inspectedRowId, isLoading, isRowSelectable, itemsPerPage, loadingRowCount, maxHeight, minHeight, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, pageSizeSelectLabel, paginationLabels, panel, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/badges/StatusBadge/StatusBadge.d.ts

@@ -29,7 +29,7 @@ export interface StatusBadgeProps extends ComponentPropsWithoutRef<'div'> {
      * Status type for badge. Only renders if `hasStatusIndicator` is true.
      * Use `'working'` to show a spinner in place of the status dot.
      */
-    statusType?: StatusType | 'frozen' | 'disabled' | 'working';
+    statusType?: StatusType | 'frozen' | 'disabled' | 'neutral' | 'working';
 }
 /**
  * StatusBadge UI component

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

@@ -41,10 +41,6 @@ interface OptionType {
  * Prop types for SegmentedButton
  */
 export interface SegmentedButtonProps {
-    /**
-     * Renders a border around the track. Off by default.
-     */
-    border?: boolean;
     /**
      * Additional class names.
      */
@@ -57,6 +53,10 @@ export interface SegmentedButtonProps {
      * Disables all options in the SegmentedButton.
      */
     disabled?: boolean;
+    /**
+     * Renders a border around the track. Off by default.
+     */
+    hasBorder?: 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
@@ -94,5 +94,5 @@ export interface SegmentedButtonProps {
 /**
  * SegmentedButton UI component
  */
-export declare const SegmentedButton: ({ border, className, defaultValue, disabled, iconOnly, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedButton: ({ className, defaultValue, disabled, hasBorder, 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-09-02T23:17:42.365Z
+ * Generated: 2026-09-08T20:24:20.025Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };

package/dist/components/{Avatar → identity/Avatar}/Avatar.d.ts

@@ -26,9 +26,10 @@ export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
      */
     shape?: 'circle' | 'square';
     /**
-     * Avatar size.
+     * Avatar size. `xs` = 16px, `s` = 20px (default), `m` = 24px, `l` = 32px,
+     * `xl` = 40px.
      */
-    size?: 'xs' | 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
     /**
      * Unique ID associated with the avatar. Can be workspace ID, user ID, email, etc.
      */

package/dist/components/identity/AvatarLabel/AvatarLabel.d.ts

@@ -0,0 +1,42 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { AvatarProps } from '../../identity/Avatar/Avatar';
+import './avatar-label.css';
+/**
+ * Prop types for AvatarLabel
+ */
+export interface AvatarLabelProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aria label for the whole component when used as a link via
+     * `linkContent`. Only needed if the visible `label` text isn't already a
+     * sufficient accessible name.
+     */
+    ariaLabel?: string;
+    /**
+     * Props to pass to the Avatar component. `size` is set automatically
+     * based on AvatarLabel's own `size` prop and cannot be overridden here.
+     */
+    avatarProps?: Omit<AvatarProps, 'ariaLabel' | 'linkContent' | 'size'>;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Text label displayed next to the avatar.
+     */
+    label: React.ReactNode;
+    /**
+     * Optionally makes the whole component a link. Pass a fully-formed,
+     * router-agnostic link element (e.g. an anchor or your router's link
+     * component); the avatar and label render as its children, so clicking
+     * anywhere on either navigates.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Controls both the avatar size and the label's text size.
+     */
+    size?: 'xs' | 's' | 'm';
+}
+/**
+ * AvatarLabel UI component
+ */
+export declare const AvatarLabel: ({ ariaLabel, avatarProps, className, label, linkContent, size, ...props }: AvatarLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/{IdentityBlock → identity/IdentityBlock}/IdentityBlock.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { AvatarProps } from '../Avatar/Avatar';
+import { AvatarProps } from '../../identity/Avatar/Avatar';
 import './identity-block.css';
 /**
  * Prop types for IdentityBlock

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

@@ -34,9 +34,19 @@ export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
      */
     inputProps?: ComponentPropsWithoutRef<'input'>;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Input label.
      */

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

@@ -26,9 +26,19 @@ export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div
      */
     id: string;
     /**
-     * Max-width of the field. Accepts a number in pixels. Leave blank for width: 100%.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Field label. Will be rendered as the fieldset legend.
      */
@@ -69,4 +79,4 @@ export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div
 /**
  * CheckboxFieldset UI component
  */
-export declare const CheckboxFieldset: ({ children, className, disabled, fieldsetProps, id, inputWidth, label, labelVariant, message, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxFieldset: ({ children, className, disabled, fieldsetProps, id, inputWidth, inputWidthMin, label, labelVariant, message, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupWrapperProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -30,9 +30,19 @@ export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
      */
     id: string;
     /**
-     * Max-width of the field. Accepts a number in pixels. Leave blank for width: 100%.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Field label. Will be rendered as the fieldset legend.
      */
@@ -85,4 +95,4 @@ export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * CheckboxGroup UI component
  */
-export declare const CheckboxGroup: ({ className, disabled, fieldsetProps, id, inputWidth, label, labelVariant, message, onGroupBlur, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: ({ className, disabled, fieldsetProps, id, inputWidth, inputWidthMin, label, labelVariant, message, onGroupBlur, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -57,9 +57,19 @@ export interface ComboboxProps extends Omit<ComponentPropsWithoutRef<'div'>, 'on
      */
     id: string;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Are the options in the process of being loaded?
      */

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

@@ -51,9 +51,19 @@ export interface ComboboxMultiselectProps extends DivProps {
      */
     initialSelectedItems?: OptionProps[];
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Are the options in the process of being loaded?
      */
@@ -106,5 +116,5 @@ export interface ComboboxMultiselectProps extends DivProps {
 /**
  * ComboboxMultiselect UI component
  */
-export declare const ComboboxMultiselect: ({ aiSuggestions, className, disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showAllTags, showLabel, size, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxMultiselect: ({ aiSuggestions, className, disabled, id, initialSelectedItems, inputWidth, inputWidthMin, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showAllTags, showLabel, size, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -127,11 +127,19 @@ interface DatepickerSharedProps extends DatepickerHTMLProps {
      */
     id: string;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
-     * Numbers below 160 will display at 160px.
-     * Leave blank for width: 100%.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Input label.
      */
@@ -295,5 +303,5 @@ export type DatepickerProps = SingleDatepickerProps | RangeDatepickerProps;
 /**
  * Datepicker UI component.
  */
-export declare const Datepicker: ({ allowCustomRange, allowDateRangeSelection, className, disabled, footerNote, id, inputWidth, label, locale, maxDate, message, minDate, mode, onChange, placeholder, presets, required, showLabel, showPresetCalendar, showTime, showTimeZoneSwitcher, timeZone, tooltipText, translationStrings: translationStringsProp, validationMessage, validationStatus, value, visibleMonths, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: ({ allowCustomRange, allowDateRangeSelection, className, disabled, footerNote, id, inputWidth, inputWidthMin, label, locale, maxDate, message, minDate, mode, onChange, placeholder, presets, required, showLabel, showPresetCalendar, showTime, showTimeZoneSwitcher, timeZone, tooltipText, translationStrings: translationStringsProp, validationMessage, validationStatus, value, visibleMonths, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -39,9 +39,19 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
      */
     inputProps?: ComponentPropsWithoutRef<'input'>;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Translation strings for various labels or other visually-hidden text.
      */

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

@@ -44,9 +44,19 @@ export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
      */
     id: string;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Label for the radio group
      */
@@ -109,4 +119,4 @@ export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * RadioGroup UI component
  */
-export declare const RadioGroup: ({ className, defaultValue, disabled, fieldsetProps, id, inputWidth, label, labelVariant, message, onBlur, onChange, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ className, defaultValue, disabled, fieldsetProps, id, inputWidth, inputWidthMin, label, labelVariant, message, onBlur, onChange, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -46,7 +46,13 @@ interface SelectOptionGroupProps {
  */
 export interface SelectProps {
     /**
-     * Automatically resize the select to fit the longest option label. Defaults to false (width: 100%).
+     * Automatically resize the select to fit the longest option label. Defaults
+     * to false (width: 100%). Has no effect when `inputWidth` is set — the two
+     * are mutually exclusive: `autoWidth` sizes to the options' own content,
+     * `inputWidth` sizes to a cap you choose. Use `autoWidth` for a compact
+     * select whose size should track its options (e.g. a short list of terse
+     * values); use `inputWidth` (with `inputWidthMin` if the row wraps) when
+     * the select needs to fit a specific layout regardless of option length.
      */
     autoWidth?: boolean;
     /**
@@ -70,9 +76,20 @@ export interface SelectProps {
      */
     id: string;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap. Takes precedence over `autoWidth`
+     * when both are set — see `autoWidth` for when to use each.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Field label.
      */
@@ -141,5 +158,5 @@ export declare const SelectOptionGroup: ({ children, label, }: SelectOptionGroup
 /**
  * Select UI component
  */
-export declare const Select: ({ autoWidth, className, defaultValue, disabled, icon, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, showSelectedIcon, size, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ autoWidth, className, defaultValue, disabled, icon, id, inputWidth, inputWidthMin, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, showSelectedIcon, size, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -29,9 +29,19 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
      */
     inputProps?: ComponentPropsWithoutRef<'input'>;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Label of the switch field.
      */

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

@@ -42,9 +42,19 @@ export interface TagsInputProps extends DivProps {
      */
     inputMinHeight?: number;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Should tags be sortable via drag-and-drop and keyboard shortcuts? Defaults to false.
      */

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

@@ -56,9 +56,19 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
      */
     inputProps?: ComponentPropsWithoutRef<'input'>;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Input label.
      */

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

@@ -31,9 +31,19 @@ export interface TextareaProps {
      */
     id: string;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Should the textarea be resizable by the user?
      */

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

@@ -32,9 +32,19 @@ export interface TimepickerProps {
      */
     id: string;
     /**
-     * Width of the input field in pixels. When omitted, the input fills its container.
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
      */
     inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Gives the row a real point to wrap at
+     * instead of shrinking the input indefinitely. Has no effect without
+     * inputWidth, and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
     /**
      * Input label.
      */
@@ -91,4 +101,4 @@ export interface TimepickerProps {
 /**
  * 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;
+export declare const Timepicker: ({ anchorDate, className, defaultValue, disabled, hourCycle, id, inputWidth, inputWidthMin, 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

@@ -13,6 +13,11 @@ export declare const inputCommonClasses: {
 export declare const getInputWidthStyle: (inputWidth: number) => {
     width: string;
 };
+export declare const getMaxInputWidthStyle: (inputWidth: number, inputWidthMin?: number) => {
+    minWidth: string;
+    width: string;
+    maxWidth: string;
+};
 export declare const stripUrlProtocol: (value: string) => string;
 export declare const RequiredIcon: () => import("react/jsx-runtime").JSX.Element;
 interface InputLabelProps {

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

@@ -10,14 +10,14 @@ 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;
+    /**
+     * Renders a border around the track. Off by default.
+     */
+    hasBorder?: boolean;
     /**
      * 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`.
@@ -32,4 +32,4 @@ export interface ButtonNavProps extends ComponentPropsWithRef<'nav'> {
 /**
  * ButtonNav UI component
  */
-export declare const ButtonNav: ({ ariaLabel, border, className, hasMobileDropdown, menuItems, ...props }: ButtonNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonNav: ({ ariaLabel, className, hasBorder, hasMobileDropdown, menuItems, ...props }: ButtonNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Modal/Modal.d.ts

@@ -40,7 +40,9 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
      */
     setModalIsOpen?: (isOpen: boolean) => void;
     /**
-     * The width of the modal.
+     * The width of the modal at the medium breakpoint and above. Below that
+     * (`--pds-bp-s-only`), every size renders at the same width regardless
+     * of this prop.
      */
     size?: 's' | 'm' | 'l' | 'xl';
     /**