@pantheon-systems/pds-toolkit-react 2.0.0-alpha.75 → 2.0.0-alpha.77

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,6 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { UseDropdownOptions } from '../../utilities/hooks/useDropdown';
+import { MenuButtonProps } from '../buttons/MenuButton/MenuButton';
 import './dropdown.css';
 export interface DropdownProps extends UseDropdownOptions {
     /**
@@ -19,12 +20,19 @@ export interface DropdownProps extends UseDropdownOptions {
 }
 /**
  * Root Dropdown component. Provides dropdown context to sub-components.
+ *
+ * Wraps the actual implementation in a Floating UI tree boundary: when
+ * nested inside another floating panel, it joins that panel's tree so
+ * outside-clicks and Escape inside this dropdown resolve to this (innermost)
+ * dropdown without wrongly dismissing the parent. When not nested, it
+ * provides its own single-node tree — no consumer opt-in needed.
  */
 export declare const Dropdown: {
-    ({ children, className, inline, ...options }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+    (props: DropdownProps): import("react/jsx-runtime").JSX.Element;
     Trigger: ({ children, className, showTriggerIcon, ...props }: DropdownTriggerProps) => import("react/jsx-runtime").JSX.Element;
     Panel: ({ children, className, ...props }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
     Item: ({ children, className, closeOnSelect, description, disabled, icon, index, isActive, isCritical, onClick, onKeyDown, trailingIcon, ...props }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    ActionItem: ({ children, className, closeOnSelect, description, disabled, icon, index, isActive, linkContent, menuAriaLabel, menuItems, onClick, onKeyDown, ...props }: DropdownActionItemProps) => import("react/jsx-runtime").JSX.Element;
     CheckboxItem: ({ checked, children, className, description, disabled, indeterminate, index, onCheckedChange, onClick, onKeyDown, ...props }: DropdownCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
     Heading: ({ children, className, ...props }: DropdownHeadingProps) => import("react/jsx-runtime").JSX.Element;
     Separator: ({ className, ...props }: DropdownSeparatorProps) => import("react/jsx-runtime").JSX.Element;
@@ -99,6 +107,63 @@ export interface DropdownItemProps extends ComponentPropsWithoutRef<'li'> {
      */
     trailingIcon?: ReactNode;
 }
+export interface DropdownActionItemProps extends Omit<ComponentPropsWithoutRef<'li'>, 'onClick'> {
+    /**
+     * Item content — label text. Rendered inside `linkContent` when provided.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Close the dropdown when the row is selected (default: true).
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Secondary text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Disabled state. Disables row selection only — the trailing kebab menu
+     * stays available.
+     */
+    disabled?: boolean;
+    /**
+     * Leading content — PDSIcon name, or custom ReactNode (Avatar, etc.).
+     */
+    icon?: ReactNode;
+    /**
+     * Index of this item in the list (required for keyboard navigation).
+     */
+    index: number;
+    /**
+     * Selected or current state.
+     */
+    isActive?: boolean;
+    /**
+     * Link element to navigate to on selection (e.g. `<a href='...'>` or a
+     * router `Link`). Takes precedence over `onClick` when both are given —
+     * pass whichever matches how selecting this row should behave.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Contextual label for the row's kebab menu, e.g. `Actions for ${item.title}`.
+     * Supplied per-row by the consumer — required, since a plain "Actions"
+     * label isn't distinguishable between rows for screen reader users.
+     */
+    menuAriaLabel: string;
+    /**
+     * Menu items for the kebab's menu — passed straight through to the
+     * underlying `MenuButton`.
+     */
+    menuItems: MenuButtonProps['menuItems'];
+    /**
+     * Callback fired when the row is selected. Ignored when `linkContent` is
+     * given — the link's own navigation is the selection behavior.
+     */
+    onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+}
 export interface DropdownCheckboxItemProps extends Omit<ComponentPropsWithoutRef<'li'>, 'onChange'> {
     /**
      * Checked state of the item.

package/dist/components/RowActionsMenu/RowActionsMenu.d.ts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { MenuButton } from '../buttons/MenuButton/MenuButton';
+import './row-actions-menu.css';
+/**
+ * Prop types for RowActionsMenu
+ */
+export interface RowActionsMenuProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Arbitrary leading row content.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Contextual label for the row's kebab menu, e.g. `Actions for ${item.title}`.
+     * Supplied per-row by the consumer — required, since a plain "Actions"
+     * label isn't distinguishable between rows for screen reader users.
+     */
+    menuAriaLabel: string;
+    /**
+     * Menu items for the kebab's menu — passed straight through to the
+     * underlying `MenuButton`. Use `isCritical`/`criticalLabel` on an item
+     * for a destructive action (e.g. "Remove").
+     */
+    menuItems: ComponentPropsWithoutRef<typeof MenuButton>['menuItems'];
+    /**
+     * Where this row is being used, for the hover/active fill style. `dropdown`
+     * (default) is an inset rounded pill, matching a floating menu's own items
+     * (e.g. nested inside `Dropdown`). `panel` fills edge-to-edge with square
+     * corners, matching a flush list inside a panel/widget (e.g. `WidgetPanel`).
+     */
+    variant?: 'dropdown' | 'panel';
+}
+/**
+ * RowActionsMenu UI component.
+ *
+ * A generic row primitive: arbitrary leading content plus a trailing kebab
+ * button that's visually revealed on hover and keyboard focus, opening a
+ * `MenuButton` actions menu. Not specific to any one consumer — meant to be
+ * reused anywhere a list needs a per-row actions menu (e.g. bookmarks,
+ * recent sites). Safe to nest inside another floating panel (e.g. a
+ * `Dropdown`) — see `MenuButton`/`Dropdown`'s Floating UI tree handling.
+ */
+export declare const RowActionsMenu: ({ children, className, menuAriaLabel, menuItems, variant, ...props }: RowActionsMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,20 +3,50 @@ import { PaginationCompactProps } from '../pagination/PaginationCompact/Paginati
 import './table.css';
 export type SortOrder = 'asc' | 'desc';
 export type DetailPanelContext = {
-    /** Whether there is a next row to navigate to. */
+    /**
+     * 1-based position of the inspected row among `totalCount`. Reflects the
+     * sorted (but not paginated) row order — the same set Prev/Next step
+     * through, which continues across page boundaries rather than stopping
+     * at the current page.
+     */
+    currentIndex: number;
+    /**
+     * Whether calling `onNext` would go anywhere. Prev/Next loop — Next from
+     * the last row wraps to the first — so this is only false when there's a
+     * single row (nowhere to navigate to at all).
+     */
     hasNext: boolean;
-    /** Whether there is a previous row to navigate to. */
+    /**
+     * Whether calling `onPrev` would go anywhere. Prev/Next loop — Prev from
+     * the first row wraps to the last — so this is only false when there's a
+     * single row (nowhere to navigate to at all).
+     */
     hasPrev: boolean;
     /** Close the detail panel. */
     onClose: () => void;
-    /** Navigate to the next row. */
+    /** Navigate to the next row, looping from the last back to the first. */
     onNext: () => void;
-    /** Navigate to the previous row. */
+    /** Navigate to the previous row, looping from the first back to the last. */
     onPrev: () => void;
     /** Stable ID of the currently inspected row. */
     rowId: string;
+    /**
+     * Total number of rows `currentIndex` counts among — the same sorted,
+     * unpaginated set Prev/Next step through.
+     */
+    totalCount: number;
 };
 export interface TableColumn {
+    /**
+     * When true, this column's cell content is shown on the compact card
+     * rendered at mobile widths, in addition to the full detail view. The
+     * first card-visible column reads as the card's title; any further ones
+     * render as a secondary line. Columns without this flag are omitted from
+     * the card front but still appear in the full detail view (the row's
+     * `renderDetailPanel` content, or the auto-generated one — see
+     * `hasMobileDetailSheet`). Has no effect above the mobile breakpoint.
+     */
+    cardVisible?: boolean;
     /** Content to display in the header cell. */
     header: ReactNode;
     /** Stable identifier used for rendering cell content from rowData. */
@@ -64,7 +94,9 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
     detailPanelNav?: boolean;
     /**
      * Optional title displayed in the detail panel header, to the left of the
-     * close button.
+     * close button. Also titles the mobile detail sheet — including when it's
+     * showing the auto-generated column list (no `renderDetailPanel`
+     * provided), a case with no desktop panel of its own to title.
      */
     detailPanelTitle?: ReactNode;
     /**
@@ -92,6 +124,14 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * independently of and below the pagination footer when both are present.
      */
     footer?: ReactNode;
+    /**
+     * Returns the position counter text shown between the Prev/Next buttons
+     * in the built-in detail panel/mobile sheet footer. Defaults to
+     * `(current, total) => \`${current} of ${total}\``. Override for
+     * translation. Has no effect when `renderDetailPanelFooter` is provided —
+     * use the context's `currentIndex`/`totalCount` there instead.
+     */
+    getDetailPanelPositionLabel?: (current: number, total: number) => string;
     /**
      * Returns the accessible label for each option in the rows-per-page selector.
      * Defaults to `(size) => \`Show ${size} rows per page\``.
@@ -134,6 +174,30 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Override for translation.
      */
     getSortLabel?: (columnHeader: string) => string;
+    /**
+     * When `true`, the table renders as a list of tappable cards at the
+     * mobile breakpoint instead of a `<table>`. Defaults to `false` — an
+     * existing table keeps its desktop `<table>` layout (horizontally
+     * scrollable) at every breakpoint until explicitly opted in, so
+     * upgrading the package never silently changes how a table already in
+     * 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.
+     */
+    hasMobileCards?: boolean;
+    /**
+     * When `true` (default), tapping a card at the mobile breakpoint opens a
+     * bottom sheet with that row's detail — `renderDetailPanel`'s content when
+     * provided, or an auto-generated label/value list of every column when
+     * not (so data omitted from the compact card, via `cardVisible`, is never
+     * completely inaccessible). Set to `false` to suppress the mobile sheet
+     * entirely — appropriate for a table with too few columns to make one
+     * useful. Has no effect when a row is inspectable only via `onRowInspect`
+     * with no `renderDetailPanel` — that case already has nothing to show in
+     * a sheet and keeps calling `onRowInspect` directly, matching desktop.
+     */
+    hasMobileDetailSheet?: boolean;
     /**
      * ID of the currently inspected row. When provided, that row receives a
      * highlighted background. Use the same ID space as `getRowId`. Only
@@ -246,7 +310,9 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
     /**
      * When true, renders the table inside a Panel with no padding. Automatically
      * applies first-column spacing and removes the last row's bottom border so
-     * it doesn't double up against the footer border.
+     * it doesn't double up against the footer border. Has no effect at the
+     * mobile breakpoint (see `hasMobileCards`) — cards sit flush against the
+     * page background instead of inside a Panel.
      */
     panel?: boolean;
     /**
@@ -297,4 +363,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, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, 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, 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/buttons/MenuButton/MenuButton.d.ts

@@ -57,6 +57,14 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * Optional callback function for when the button is clicked or activated by the keyboard.
      */
     onClick?: () => void;
+    /**
+     * Optional callback fired whenever the menu's open state changes. Use
+     * this to manage focus deliberately when this MenuButton is nested
+     * inside another floating panel — e.g. return focus to the row that
+     * owns this menu when it closes, rather than leaving it to Floating UI's
+     * default (which can otherwise leave focus on an ancestor panel).
+     */
+    onOpenChange?: (isOpen: boolean) => void;
     /**
      * Which size of button to render.
      */
@@ -84,12 +92,20 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * Which variant of button to render. Not available in `iconOnly` mode.
      * `navbar` is visually identical to `subtle` except it has no background
      * at rest — only on hover/expanded — for triggers that sit directly on a
-     * nav/toolbar surface rather than a plain page background.
+     * nav/toolbar surface rather than a plain page background. `reverse-secondary`
+     * is for triggers on a dark/reverse surface — passed straight through to
+     * the underlying `Button`, which already supports it.
      */
-    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle'> | 'navbar';
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle' | 'reverse-secondary'> | 'navbar';
 }
 /**
- * MenuButton UI component
+ * MenuButton UI component.
+ *
+ * Wraps the actual implementation in a Floating UI tree boundary: when
+ * nested inside another floating panel (e.g. a `Dropdown`'s panel), it joins
+ * that panel's tree so outside-clicks and Escape inside this menu resolve to
+ * this (innermost) menu without wrongly dismissing the parent. When not
+ * nested, it provides its own single-node tree — no consumer opt-in needed.
  */
-export declare const MenuButton: ({ className, disabled, iconName, iconOnly, id, isMobileAccordion, isSplitButton, label, menuItems, onClick, size, statusDot, tally, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuButton: (props: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,81 @@
+import './select-button.css';
+/**
+ * A single option the SelectButton can choose between.
+ */
+export interface SelectButtonOption {
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Visible label for the option.
+     */
+    label: string;
+    /**
+     * Unique value used for selection.
+     */
+    value: string;
+}
+/**
+ * Prop types for SelectButton
+ */
+export interface SelectButtonProps {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Disable the entire control.
+     */
+    disabled?: boolean;
+    /**
+     * id applied to the trigger button.
+     */
+    id?: string;
+    /**
+     * The dimension name shown in the trigger (e.g. "Sort").
+     */
+    keyLabel: string;
+    /**
+     * Show the in-menu search input once the number of options reaches this
+     * threshold. Defaults to `8`. Set to `0` to always show it.
+     */
+    minFilterItems?: number;
+    /**
+     * Text shown when the search finds no matching options.
+     */
+    noResultsText?: string;
+    /**
+     * Called with the next value whenever the selection changes.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Options the user can choose between.
+     */
+    options: SelectButtonOption[];
+    /**
+     * Accessible label for the search input.
+     */
+    searchLabel?: string;
+    /**
+     * Placeholder for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * The currently selected value (controlled). Exactly one option is always
+     * selected — there is no "cleared" state.
+     */
+    value: string;
+}
+/**
+ * SelectButton — a trigger + menu for choosing exactly one value out of a
+ * small fixed set, for controls where a value is always active (e.g. sort
+ * field, group-by, time range, page size). Composes the same `Dropdown` +
+ * radio-item-with-checkmark pattern as `FilterButton`, but without
+ * `FilterButton`'s optional/clearable semantics — there is no empty state and
+ * no clear affordance, because unlike a filter, this kind of control can
+ * never have "nothing" selected.
+ *
+ * Selection is controlled: pass `value` and handle `onChange`.
+ */
+export declare const SelectButton: ({ className, disabled, id, keyLabel, minFilterItems, noResultsText, onChange, options, searchLabel, searchPlaceholder, value, }: SelectButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/empty-states/VerticalEmptyState/VerticalEmptyState.d.ts

@@ -24,10 +24,11 @@ export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'>
     headingLevel?: HeadingLevel;
     /**
      * PDS illustration image to display above the heading.
-     * Should be a link to an SVG file, either from Brandfolder or local.
+     * Can be a string (a link to an SVG file, either from Brandfolder or
+     * local) or a React node (e.g. a Spinner, for in-progress empty states).
      * See full documentation for details.
      */
-    image?: string;
+    image?: string | ReactNode;
     /**
      * Height of the image (CSS value like '200px', '50%', etc.)
      */

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-08-25T01:31:01.546Z
+ * Generated: 2026-08-27T19:48:12.899Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };
@@ -71,6 +71,13 @@ export declare const iconData: {
         readonly svgPathData: "M360 512c13.3 0 24-10.7 24-24s-10.7-24-24-24L24 464c-13.3 0-24 10.7-24 24s10.7 24 24 24l336 0zM175 377c9.4 9.4 24.6 9.4 33.9 0L345 241c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95 0-278.1c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 278.1-95-95c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L175 377z";
         readonly width: 384;
     };
+    readonly arrowDownWideShort: {
+        readonly aliases: readonly ["sort descending", "sort z to a"];
+        readonly categories: readonly ["arrows", "data"];
+        readonly height: 512;
+        readonly svgPathData: "M249 369L145 473c-9.4 9.4-24.6 9.4-33.9 0L7 369c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l63 63 0-342.1c0-13.3 10.7-24 24-24s24 10.7 24 24l0 342.1 63-63c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zm63 111c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-48 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l112 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-112 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0zm0-128c-13.3 0-24-10.7-24-24s10.7-24 24-24l240 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L312 96z";
+        readonly width: 576;
+    };
     readonly arrowLeft: {
         readonly aliases: readonly ["back", "previous"];
         readonly categories: readonly ["arrows", "navigation"];
@@ -92,6 +99,13 @@ export declare const iconData: {
         readonly svgPathData: "M463 473c9.4 9.4 24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-31 31 0-270.1c0-53-43-96-96-96L280 32c-13.3 0-24 10.7-24 24s10.7 24 24 24l128 0c26.5 0 48 21.5 48 48l0 270.1-31-31c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72zM113 39c-9.4-9.4-24.6-9.4-33.9 0L7 111c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l31-31 0 270.1c0 53 43 96 96 96l128 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-128 0c-26.5 0-48-21.5-48-48l0-270.1 31 31c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L113 39z";
         readonly width: 576;
     };
+    readonly arrowUpShortWide: {
+        readonly aliases: readonly ["sort ascending", "sort a to z"];
+        readonly categories: readonly ["arrows", "data"];
+        readonly height: 512;
+        readonly svgPathData: "M145 39c-9.4-9.4-24.6-9.4-33.9 0L7 143c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l63-63 0 342.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-342.1 63 63c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L145 39zm167 9c-13.3 0-24 10.7-24 24s10.7 24 24 24l48 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-112 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l176 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-176 0zm0 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l240 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-240 0z";
+        readonly width: 576;
+    };
     readonly asterisk: {
         readonly aliases: readonly ["required", "star"];
         readonly categories: readonly ["objects"];
@@ -1619,7 +1633,7 @@ export declare const iconData: {
         readonly width: 576;
     };
 };
-export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesDown", "anglesLeft", "anglesRight", "anglesUp", "angleUp", "arrowDownToLine", "arrowLeft", "arrowRight", "arrowsRetweet", "asterisk", "banBug", "bars", "barsFilter", "barsStaggered", "bell", "billboard", "bitbucket", "bluesky", "bolt", "boltPantheon", "boltSolid", "book", "bookmark", "bookmarkSolid", "books", "box", "bracketRight", "bracketsSquare", "brainCircuit", "broomWide", "building", "buildings", "bullhorn", "calendarDays", "caretDown", "caretLeft", "caretRight", "caretUp", "ccAmex", "ccApplePay", "ccDiscover", "ccGeneric", "ccMC", "ccPaypal", "ccVisa", "chartLine", "chartNetwork", "chartSimple", "check", "circle", "circleCheck", "circleExclamation", "circleExclamationSolid", "circleHalfStroke", "circleInfo", "circleInfoSolid", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleQuestionSolid", "circleUser", "circleXmark", "claude", "clock", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "collapseToCenter", "command", "comment", "compress", "copy", "desktop", "diagramVenn", "diamondExclamation", "diamonds4", "discourse", "display", "dollarSign", "download", "drupal", "ellipsis", "ellipsisVertical", "emptySet", "envelope", "envelopeOpen", "exclamation", "expand", "expandFromCenter", "externalLink", "eye", "eyeSlash", "facebook", "file", "fileCheck", "fileContract", "fileCSV", "fileDiff", "fileExport", "fileImport", "fileLines", "filePDF", "fileZip", "floppyDisk", "folder", "folderTree", "gear", "gem", "github", "gitlab", "globe", "graduationCap", "grid", "grid2", "gripDots", "gripDotsVertical", "heart", "heartSolid", "house", "idCard", "image", "inputText", "instagram", "keySkeleton", "landmark", "laptop", "laptopCode", "leaf", "lifeRing", "link", "linkedin", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "move", "nextJs", "octagonExclamation", "openai", "paperclip", "paperPlane", "pause", "pen", "penField", "penPaintbrush", "phone", "play", "plus", "question", "quotesLeft", "quotesRight", "rectangleList", "reply", "robot", "rocketLaunch", "rotate", "rotateClock", "rotateLeft", "rotateRight", "rss", "save", "server", "shareNodes", "shield", "shieldQuartered", "shovel", "sidebar", "siren", "sirenOn", "sitemap", "slack", "slashForward", "slider", "slidersSimple", "snowflake", "sparkles", "squareCheck", "squareCode", "squareDashed", "squareMinus", "squarePen", "squareQuestion", "squareTerminal", "star", "starSolid", "sun", "sunBright", "table", "tableColumns", "tableRows", "terminal", "text", "threads", "thumbsDown", "thumbsUp", "trash", "triangleExclamation", "twitter", "unlink", "upload", "user", "userAstronaut", "userGear", "userPlus", "users", "userSolid", "video", "wavePulse", "windowRestore", "wordpress", "wreathLaurel", "wrench", "xmark", "xmarkLarge", "xTwitter", "youtube"];
+export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesDown", "anglesLeft", "anglesRight", "anglesUp", "angleUp", "arrowDownToLine", "arrowDownWideShort", "arrowLeft", "arrowRight", "arrowsRetweet", "arrowUpShortWide", "asterisk", "banBug", "bars", "barsFilter", "barsStaggered", "bell", "billboard", "bitbucket", "bluesky", "bolt", "boltPantheon", "boltSolid", "book", "bookmark", "bookmarkSolid", "books", "box", "bracketRight", "bracketsSquare", "brainCircuit", "broomWide", "building", "buildings", "bullhorn", "calendarDays", "caretDown", "caretLeft", "caretRight", "caretUp", "ccAmex", "ccApplePay", "ccDiscover", "ccGeneric", "ccMC", "ccPaypal", "ccVisa", "chartLine", "chartNetwork", "chartSimple", "check", "circle", "circleCheck", "circleExclamation", "circleExclamationSolid", "circleHalfStroke", "circleInfo", "circleInfoSolid", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleQuestionSolid", "circleUser", "circleXmark", "claude", "clock", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "collapseToCenter", "command", "comment", "compress", "copy", "desktop", "diagramVenn", "diamondExclamation", "diamonds4", "discourse", "display", "dollarSign", "download", "drupal", "ellipsis", "ellipsisVertical", "emptySet", "envelope", "envelopeOpen", "exclamation", "expand", "expandFromCenter", "externalLink", "eye", "eyeSlash", "facebook", "file", "fileCheck", "fileContract", "fileCSV", "fileDiff", "fileExport", "fileImport", "fileLines", "filePDF", "fileZip", "floppyDisk", "folder", "folderTree", "gear", "gem", "github", "gitlab", "globe", "graduationCap", "grid", "grid2", "gripDots", "gripDotsVertical", "heart", "heartSolid", "house", "idCard", "image", "inputText", "instagram", "keySkeleton", "landmark", "laptop", "laptopCode", "leaf", "lifeRing", "link", "linkedin", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "move", "nextJs", "octagonExclamation", "openai", "paperclip", "paperPlane", "pause", "pen", "penField", "penPaintbrush", "phone", "play", "plus", "question", "quotesLeft", "quotesRight", "rectangleList", "reply", "robot", "rocketLaunch", "rotate", "rotateClock", "rotateLeft", "rotateRight", "rss", "save", "server", "shareNodes", "shield", "shieldQuartered", "shovel", "sidebar", "siren", "sirenOn", "sitemap", "slack", "slashForward", "slider", "slidersSimple", "snowflake", "sparkles", "squareCheck", "squareCode", "squareDashed", "squareMinus", "squarePen", "squareQuestion", "squareTerminal", "star", "starSolid", "sun", "sunBright", "table", "tableColumns", "tableRows", "terminal", "text", "threads", "thumbsDown", "thumbsUp", "trash", "triangleExclamation", "twitter", "unlink", "upload", "user", "userAstronaut", "userGear", "userPlus", "users", "userSolid", "video", "wavePulse", "windowRestore", "wordpress", "wreathLaurel", "wrench", "xmark", "xmarkLarge", "xTwitter", "youtube"];
 export type PDSIconName = (typeof iconList)[number];
 export declare const categoryList: readonly ["actions", "arrows", "brands", "communication", "custom", "data", "development", "documents", "financial", "media", "navigation", "objects", "security", "status", "users"];
 export type IconCategory = (typeof categoryList)[number];

package/dist/components/notifications/SectionMessage/SectionMessage.d.ts

@@ -40,6 +40,12 @@ export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
      * Callback function when message is dismissed.
      */
     onDismiss?: (event: MouseEvent<HTMLButtonElement>, id: string) => void;
+    /**
+     * Props for an optional secondary action, rendered before `ctaButton` so the
+     * more prominent action sits on the outside. Can include any Button props
+     * except for size. Defaults to the `link` variant.
+     */
+    secondaryCta?: ComponentPropsWithoutRef<typeof Button>;
     /**
      * Message title.
      */
@@ -56,5 +62,5 @@ export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * SectionMessage UI component
  */
-export declare const SectionMessage: ({ className, ctaButton, ctaIcon, dismissLabel, id, isDismissible, message, onDismiss, title, type, typeLabels, ...props }: SectionMessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionMessage: ({ className, ctaButton, ctaIcon, dismissLabel, id, isDismissible, message, onDismiss, secondaryCta, title, type, typeLabels, ...props }: SectionMessageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,66 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './bottom-sheet.css';
+export interface BottomSheetProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * Aria label that describes the sheet. Falls back to `title` if not provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Main content for the sheet. Pass a `slot="footer"` child for footer content
+     * (e.g. Prev/Next navigation), same pattern as `Drawer`.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Text for the close button's aria-label attribute. Defaults to `'Close'`.
+     */
+    closeButtonLabel?: string;
+    /**
+     * If true, clicking the scrim will not close the sheet.
+     */
+    disableOutsideClick?: boolean;
+    /**
+     * Height while expanded (dragged past the expand threshold, or the grabber
+     * tapped/activated once). Accepts any valid CSS value. Defaults to `'96dvh'`.
+     * Pass `null` to disable expansion entirely — the sheet can then only be
+     * dragged smaller (toward dismissal), never past its default `height`.
+     */
+    expandedHeight?: string | null;
+    /**
+     * Indicates if the built-in close button will be shown.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Default (collapsed) height. Accepts any valid CSS value. Defaults to `'62dvh'`.
+     */
+    height?: string;
+    /**
+     * Is the sheet open?
+     */
+    isOpen?: boolean;
+    /**
+     * Accessible label for the drag handle. Dragging resizes the sheet, but
+     * that's a pointer-only enhancement — for keyboard/screen reader users,
+     * activating this handle (Enter/Space) closes the sheet outright, the
+     * same as dragging it down past the dismiss threshold. Defaults to
+     * `'Close sheet'`.
+     */
+    resizeLabel?: string;
+    /**
+     * Function to set the sheet's open state.
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Title for the sheet. Accepts a string or ReactNode. Leave empty for no title.
+     */
+    title?: ReactNode;
+}
+/**
+ * BottomSheet UI component. A mobile-oriented overlay that slides up from the
+ * bottom of the viewport, with a draggable handle to resize between a default
+ * and an expanded height, or drag down past a threshold to dismiss.
+ */
+export declare const BottomSheet: ({ ariaLabel, children, className, closeButtonLabel, disableOutsideClick, expandedHeight, hasCloseButton, height, isOpen: isOpenProp, resizeLabel, setIsOpen: setIsOpenProp, title, ...props }: BottomSheetProps) => any;

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

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './bulk-action-bar.css';
+/**
+ * Prop types for BulkActionBar
+ */
+export interface BulkActionBarProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Action content (e.g. `MenuButton`s) rendered between the count and the
+     * clear button. Not opinionated about what it contains — this component
+     * only owns the count, the clear button, and the surrounding chrome.
+     * Since the bar always renders on a reverse (dark) surface, content
+     * should use variants suited to that — e.g. `MenuButton`'s
+     * `reverse-secondary`, `IconButton`'s `reverse`.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Accessible label for the built-in clear button. Defaults to `'Clear
+     * selection'`. Override for translation.
+     */
+    clearLabel?: string;
+    /**
+     * Number of items currently selected.
+     */
+    count: number;
+    /**
+     * Returns the visible count label. Defaults to `(count) => \`${count} selected\``.
+     * Override for translation, or to describe what's selected (e.g. "3 sites selected").
+     */
+    getCountLabel?: (count: number) => string;
+    /**
+     * Called when the clear button is activated. Typically clears the
+     * selection; whether that also exits any "select mode" the consumer has
+     * is up to them — this component has no opinion on that state.
+     */
+    onClear: () => void;
+}
+/**
+ * BulkActionBar UI component — a floating bar that surfaces a selection
+ * count and bulk actions once at least one item is selected. Pinned to the
+ * bottom of the viewport, content scrolls behind it. Mounting/unmounting
+ * based on selection state is the consumer's responsibility; this component
+ * always renders what it's given.
+ */
+export declare const BulkActionBar: ({ children, className, clearLabel, count, getCountLabel, onClear, ...props }: BulkActionBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { HeadingLevelCommon } from '../../../libs/types/custom-types';
 import './pagination-compact.css';
-export type PaginationCompactPageControlType = 'dropdown' | 'input';
+export type PaginationCompactPageControlType = 'dropdown' | 'input' | 'static';
 /**
  * Prop types for PaginationCompact
  */
@@ -48,7 +48,12 @@ export interface PaginationCompactProps extends ComponentPropsWithoutRef<'nav'>
      */
     onPageChange?: (page: number) => void;
     /**
-     * Which control to use for jumping to a page: a dropdown select or a typed number input. Defaults to `'dropdown'`.
+     * Which control to use for jumping to a page: a dropdown select or a typed
+     * number input. `'static'` renders the current page as plain text instead
+     * — no direct jump-to-page at all, just Prev/Next — for contexts where
+     * that control isn't worth the space (e.g. a mobile card list, where
+     * search/filter is the more realistic way to narrow a large result set
+     * down, not paging through it one page at a time). Defaults to `'dropdown'`.
      */
     pageControlType?: PaginationCompactPageControlType;
     /**

package/dist/css/component-css/pds-bottom-sheet.css

@@ -0,0 +1 @@
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-bottom-sheet__wrapper{inset:0;position:fixed;z-index:var(--pds-z-index-modal)}.pds-bottom-sheet__scrim{background-color:var(--pds-color-overlay-subtle);inset:0;opacity:0;position:fixed;transition:opacity .3s ease}.pds-bottom-sheet__scrim--visible{opacity:1}.pds-bottom-sheet{background-color:var(--pds-color-surface-default);border-radius:var(--pds-border-radius-panel) var(--pds-border-radius-panel) 0 0;bottom:0;box-shadow:var(--pds-elevation-overlay);display:flex;flex-direction:column;height:var(--pds-bottom-sheet-height,62dvh);left:0;max-height:96dvh;overflow:hidden;position:fixed;right:0;transform:translateY(105%);transition:height .2s var(--pds-animation-timing-function-default),transform .3s var(--pds-animation-timing-function-default)}.pds-bottom-sheet--open{transform:translateY(0)}.pds-bottom-sheet--expanded{height:var(--pds-bottom-sheet-expanded-height,96dvh)}.pds-bottom-sheet--dragging{transition:none}.pds-bottom-sheet__header{border-block-end:1px solid var(--pds-color-border-default);flex-shrink:0;padding:var(--pds-spacing-s) var(--pds-spacing-l) var(--pds-spacing-m);position:relative}.pds-bottom-sheet__grabber{background:transparent;border:0;cursor:grab;inset:0;position:absolute;touch-action:none;-webkit-user-select:none;user-select:none}.pds-bottom-sheet__grabber:active{cursor:grabbing}.pds-bottom-sheet__grabber:focus{outline:none}.pds-bottom-sheet__grabber-bar{background-color:var(--pds-color-border-default);border-radius:var(--pds-border-radius-button);display:block;height:.3125rem;margin-block-end:var(--pds-spacing-2xs);margin-inline:auto;width:2.75rem}.pds-bottom-sheet__grabber:focus-visible~.pds-bottom-sheet__grabber-bar{outline:2px solid var(--pds-color-interactive-foreground-current);outline-offset:2px}.pds-bottom-sheet__title-row{align-items:center;display:flex;gap:var(--pds-spacing-s);justify-content:flex-end}.pds-bottom-sheet__title{flex:1;font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-semibold);line-height:var(--pds-typography-lh-s)}.pds-bottom-sheet__close-button{position:relative}.pds-bottom-sheet__content{flex:1;overflow-y:auto;padding:var(--pds-spacing-m) var(--pds-spacing-l) var(--pds-spacing-l)}.pds-bottom-sheet__footer{align-items:center;border-top:1px solid var(--pds-color-border-default);display:flex;flex-shrink:0;justify-content:space-between;padding:var(--pds-spacing-m) var(--pds-spacing-l)}.pds-bottom-sheet__footer>*{width:100%}}

package/dist/css/component-css/pds-bulk-action-bar.css

@@ -0,0 +1 @@
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-bulk-action-bar{align-items:center;background-color:var(--pds-color-surface-reverse);border:var(--pds-border-width-default) solid var(--pds-color-surface-reverse);border-radius:var(--pds-border-radius-card);bottom:var(--pds-spacing-m);box-shadow:var(--pds-elevation-overlay);display:flex;flex-wrap:wrap;gap:var(--pds-spacing-s);left:50%;padding:var(--pds-spacing-s) var(--pds-spacing-m);position:fixed;transform:translateX(-50%);width:calc(100% - var(--pds-spacing-xl));z-index:10}.pds-bulk-action-bar__count{color:var(--pds-color-foreground-reverse);flex-shrink:0;font-size:var(--pds-typography-size-s)}.pds-bulk-action-bar__actions{display:flex;flex-wrap:wrap;gap:var(--pds-spacing-s);margin-inline-start:auto}}