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

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

@@ -1,27 +1,366 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PaginationCompactProps } from '../pagination/PaginationCompact/PaginationCompact';
 import './table.css';
-/**
- * Prop types for Table
- */
-interface TableProps extends ComponentPropsWithoutRef<'table'> {
+export type SortOrder = 'asc' | 'desc';
+export type DetailPanelContext = {
     /**
-     * Additional class names
+     * 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 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, looping from the last back to the first. */
+    onNext: () => void;
+    /** 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. */
+    id: string;
+    /** When true, renders a sort button next to the header label. */
+    sortable?: boolean;
+    /**
+     * Key to use for sorting instead of `id`. Use when the cell renders a
+     * ReactNode but a separate plain-text field in rowData should drive the sort.
+     */
+    sortKey?: string;
+}
+export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    /** Additional class names */
     className?: string;
     /**
-     * Table headers
+     * Accessible label for the detail panel close button.
+     * Defaults to `'Close detail panel'`. Override for translation.
+     */
+    closeDetailPanelLabel?: string;
+    /** Column definitions. Each column requires a stable `id`. */
+    columns: TableColumn[];
+    /**
+     * Current page number (1-based). Providing this alongside `onPageChange`
+     * enables controlled pagination mode.
+     */
+    currentPage?: number;
+    /**
+     * Column id to sort by on initial render. Only applies in uncontrolled sort mode.
+     * Like `defaultValue` in HTML inputs, this is mount-only — changing it after mount
+     * has no effect. Use `sortKey` + `onSort` for controlled sort.
+     */
+    defaultSortKey?: string;
+    /**
+     * Initial sort direction when `defaultSortKey` is set. Defaults to `'asc'`.
+     * Only applies in uncontrolled sort mode.
+     */
+    defaultSortOrder?: SortOrder;
+    /**
+     * When `true` (default), renders built-in prev/next navigation buttons in
+     * the detail panel footer. Set to `false` to hide the footer entirely.
+     * Has no effect when `renderDetailPanelFooter` is provided — the custom
+     * footer always takes precedence.
+     */
+    detailPanelNav?: boolean;
+    /**
+     * Optional title displayed in the detail panel header, to the left of the
+     * 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;
+    /**
+     * Custom width for the detail panel. Accepts any valid CSS value (e.g. `'20rem'`, `'400px'`).
+     * Defaults to `'20rem'`.
+     */
+    detailPanelWidth?: string;
+    /**
+     * Custom empty state rendered when `rowData` is empty and `isLoading` is false.
+     * When provided, takes precedence over `emptyStateHeading` and `emptyStateMessage`.
+     */
+    emptyState?: ReactNode;
+    /**
+     * Heading text for the default empty state. Defaults to `"No results found."`
+     * Override for translation or context-specific messaging.
+     */
+    emptyStateHeading?: string;
+    /**
+     * Optional message displayed below the heading in the default empty state.
+     */
+    emptyStateMessage?: string;
+    /**
+     * Optional content rendered below the table, outside the scroll area.
+     * Use for status bars, custom controls, or other table-level UI. Renders
+     * 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\``.
+     * Override for translation.
+     */
+    getPageSizeLabel?: (size: number) => string;
+    /**
+     * Returns an additional CSS class name to apply to a row's `<tr>` element.
+     * Use for per-row status coloring or other conditional styling.
+     * Receives the row data object and its stable row ID (from `getRowId`).
+     */
+    getRowClassName?: (row: Record<string, ReactNode>, rowId: string) => string | null | undefined;
+    /**
+     * Derives a stable string ID from a row object for selection tracking.
+     * Defaults to the row's array index. Provide this when using pagination
+     * to preserve selection across page changes.
+     */
+    getRowId?: (row: Record<string, ReactNode>) => string;
+    /**
+     * Returns the reason a row's selection checkbox is disabled. Only called for
+     * rows where `isRowSelectable` returns `false`. The reason is appended to the
+     * checkbox's accessible label — so screen readers announce *why* it can't be
+     * selected — and set as a native `title` tooltip for pointer users. A disabled
+     * checkbox is not focusable, so a focus/hover-only tooltip would be missed by
+     * keyboard and screen reader users; embedding the reason in the accessible name
+     * ensures it is conveyed. Defaults to no reason.
+     */
+    getRowSelectDisabledReason?: (row: Record<string, ReactNode>, rowId: string) => string;
+    /**
+     * Returns the visually hidden accessible label for each row's checkbox.
+     * Receives the row object and its 1-based display index.
+     * Defaults to `(_row, index) => \`Select row ${index}\``.
+     * Override to include a meaningful identifier (e.g. the site name) for
+     * screen reader users who navigate through checkboxes.
+     */
+    getSelectRowLabel?: (row: Record<string, ReactNode>, index: number) => string;
+    /**
+     * Returns the accessible label for a column's sort button.
+     * Defaults to `(columnHeader) => \`Sort by ${columnHeader}\``.
+     * 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
+     * meaningful when `onRowInspect` or `renderDetailPanel` is also provided.
+     */
+    inspectedRowId?: string;
+    /**
+     * When true, renders skeleton rows instead of data. Use while data is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Predicate that returns `false` to disable selection for a specific row.
+     * When omitted, all rows are selectable. Non-selectable rows render a disabled
+     * checkbox and are excluded from the select-all checkbox's checked/indeterminate
+     * state and its toggle. Only meaningful when `onRowSelectionChange` is provided.
+     * Pair with `getRowSelectDisabledReason` to explain why a row is locked.
+     */
+    isRowSelectable?: (row: Record<string, ReactNode>, rowId: string) => boolean;
+    /**
+     * Number of items per page. Required to enable pagination.
+     * In uncontrolled pagination mode the Table slices `rowData` internally.
+     * In controlled mode the consumer passes the current page slice as `rowData`.
+     */
+    itemsPerPage?: number;
+    /**
+     * Number of skeleton rows to render when `isLoading` is true. Defaults to 5.
+     */
+    loadingRowCount?: number;
+    /**
+     * Sets a max-height on the scrollable table area. Accepts any valid CSS
+     * value (e.g. `'30rem'`, `'70vh'`). Enables vertical scrolling once content
+     * exceeds it. Undefined by default — the table grows to fit its content.
+     */
+    maxHeight?: string;
+    /**
+     * Sets a min-height on the scrollable table area. Accepts any valid CSS
+     * value. Use alongside `maxHeight` to keep a table with very few rows (or
+     * the empty state) from collapsing to an awkwardly small height. Undefined
+     * by default.
+     */
+    minHeight?: string;
+    /**
+     * Accessible label for the detail panel "next row" button.
+     * Defaults to `'Next row'`. Override for translation.
+     */
+    nextDetailPanelRowLabel?: string;
+    /**
+     * Called after the detail panel navigates to the next row. Use for side
+     * effects (fetching data, analytics) — the built-in navigation still runs.
+     */
+    onDetailPanelNext?: (row: Record<string, ReactNode>, rowId: string) => void;
+    /**
+     * Called after the detail panel navigates to the previous row. Use for side
+     * effects (fetching data, analytics) — the built-in navigation still runs.
+     */
+    onDetailPanelPrev?: (row: Record<string, ReactNode>, rowId: string) => void;
+    /**
+     * Callback fired when the user navigates to a new page. Receives the new
+     * 1-based page number. Providing this prop enables controlled pagination mode.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Callback fired when the user changes the rows-per-page value.
+     * When provided alongside `pageSizeOptions`, enables controlled page size mode.
+     * In uncontrolled mode the Table manages page size internally.
+     */
+    onPageSizeChange?: (size: number) => void;
+    /**
+     * Callback fired when a row is clicked for inspection. Providing this prop
+     * makes rows clickable and enables the row detail drawer pattern.
+     * Receives the row data object and its stable row ID (from `getRowId`).
+     */
+    onRowInspect?: (row: Record<string, ReactNode>, rowId: string) => void;
+    /**
+     * Callback fired when row selection changes. Providing this prop enables
+     * the checkbox column. Receives the full array of currently selected row IDs.
+     * Note: in uncontrolled selection mode, IDs of rows removed from `rowData`
+     * (e.g. after filtering) remain in the internal selection set. Clear selection
+     * explicitly when filtering if stale IDs are a concern.
+     */
+    onRowSelectionChange?: (ids: string[]) => void;
+    /**
+     * Callback fired when a sortable header is clicked. Providing this prop
+     * enables controlled sort mode — the component will not sort `rowData`
+     * 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.
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Accessible label for the rows-per-page selector. Defaults to
+     * `'Rows per page'`. Override for translation.
+     */
+    pageSizeSelectLabel?: string;
+    /**
+     * Translatable labels for the built-in pagination controls: the previous/next
+     * buttons, the page selector, and the page-count separator (`of`). When omitted,
+     * English defaults are used. Override for translation.
+     */
+    paginationLabels?: PaginationCompactProps['labelStrings'];
+    /**
+     * 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. Has no effect at the
+     * mobile breakpoint (see `hasMobileCards`) — cards sit flush against the
+     * page background instead of inside a Panel.
+     */
+    panel?: boolean;
+    /**
+     * Accessible label for the detail panel "previous row" button.
+     * Defaults to `'Previous row'`. Override for translation.
+     */
+    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.
+     * See the [Row detail panel](/docs/components-table--row-detail-panel) story.
+     */
+    renderDetailPanel?: (row: Record<string, ReactNode>, context: DetailPanelContext) => ReactNode;
+    /**
+     * Optional content rendered at the bottom of the detail panel, outside the
+     * scrollable content area. Use for navigation controls, action buttons, or
+     * other panel-level UI. The consumer is responsible for all styling including
+     * any separator between content and footer.
+     */
+    renderDetailPanelFooter?: (row: Record<string, ReactNode>, context: DetailPanelContext) => ReactNode;
+    /**
+     * Row data as an array of records keyed by column id.
+     * In controlled pagination mode, pass only the current page's rows.
+     */
+    rowData: Array<Record<string, ReactNode>>;
+    /**
+     * Visually hidden accessible label for the select-all header checkbox.
+     * Defaults to `'Select all rows'`. Override for translation.
+     */
+    selectAllLabel?: string;
+    /**
+     * Controlled selected row IDs. When provided alongside `onRowSelectionChange`,
+     * enables controlled selection mode.
+     */
+    selectedRows?: string[];
+    /**
+     * Controlled sort column id. Only used when `onSort` is provided.
+     */
+    sortKey?: string;
+    /**
+     * Controlled sort direction. Only used when `onSort` is provided.
      */
-    headers?: Array<{
-        sortable?: boolean;
-        title: ReactNode;
-    }>;
+    sortOrder?: SortOrder;
     /**
-     * Table row data - array of rows, where each row is an array of cell values
+     * Total number of items across all pages. Required in controlled pagination
+     * mode so the Pagination component can compute the page count.
      */
-    rowData?: Array<Array<string | ReactNode>>;
+    totalItemCount?: number;
 }
-/**
- * Table UI component
- */
-export declare const Table: ({ className, headers, rowData, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+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/TableOfContents/TableOfContents.d.ts

@@ -1,10 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { HeadingLevelCommon } from '../../libs/types/custom-types';
 import './table-of-contents.css';
-/**
- * Prop types for TableOfContents
- */
-interface TableOfContentsProps extends ComponentPropsWithoutRef<'nav'> {
+export interface TableOfContentsProps extends ComponentPropsWithoutRef<'nav'> {
     /**
      * Whether to append the id to the URL when a link is clicked.
      */
@@ -42,4 +39,3 @@ interface TableOfContentsProps extends ComponentPropsWithoutRef<'nav'> {
  * TableOfContents UI component
  */
 export declare const TableOfContents: ({ appendIds, ariaLabel, className, headingLevel, headingText, ignoreClass, showHeading, sourceID, ...props }: TableOfContentsProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Tag/Tag.d.ts

@@ -1,7 +1,15 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './tag.css';
-export declare const tagColors: string[];
-type TagColor = (typeof tagColors)[number];
+export declare const tagColors: readonly ["orange", "stone", "gold", "lime", "mint", "teal", "sky", "slate", "indigo", "purple", "magenta", "rose", "red"];
+type TagMutedColor = (typeof tagColors)[number];
+export declare const tagSolidHueColors: readonly ["orange-solid", "teal-solid", "indigo-solid", "magenta-solid", "rose-solid", "gold-solid", "lime-solid", "sky-solid", "slate-solid"];
+type TagSolidHueColor = (typeof tagSolidHueColors)[number];
+export declare const tagSolidStatusColors: readonly ["success-solid", "warning-solid", "critical-solid", "info-solid", "discovery-solid"];
+type TagSolidStatusColor = (typeof tagSolidStatusColors)[number];
+export declare const tagSolidColors: readonly ["orange-solid", "teal-solid", "indigo-solid", "magenta-solid", "rose-solid", "gold-solid", "lime-solid", "sky-solid", "slate-solid", "success-solid", "warning-solid", "critical-solid", "info-solid", "discovery-solid"];
+type TagSolidColor = TagSolidHueColor | TagSolidStatusColor;
+export type TagColor = TagMutedColor | TagSolidColor;
+export type TagSize = 'xs' | 's' | 'm';
 interface TagProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Additional class names
@@ -23,6 +31,10 @@ interface TagProps extends ComponentPropsWithoutRef<'div'> {
      * Label for the remove button. Tag text will be appended to this label.
      */
     removeLabel?: string;
+    /**
+     * Size of the tag.
+     */
+    size?: TagSize;
     /**
      * Tag color. Will use random color if not selected.
      */
@@ -31,9 +43,15 @@ interface TagProps extends ComponentPropsWithoutRef<'div'> {
      * Tag text
      */
     tagLabel: string;
+    /**
+     * Maximum number of characters before truncation. Set to 0 to disable
+     * truncation entirely. Defaults to 20. Most use cases should keep the
+     * default, especially in multi-tag contexts.
+     */
+    truncationLength?: number;
 }
 /**
  * Tag UI component
  */
-export declare const Tag: ({ className, isRemovable, linkContent, onRemove, removeLabel, tagColor, tagLabel, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ className, isRemovable, linkContent, onRemove, removeLabel, size, tagColor, tagLabel, truncationLength, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +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
  */
@@ -9,24 +12,42 @@ export interface ThemeSwitcherProps extends Omit<ComponentPropsWithoutRef<'div'>
      */
     className?: string;
     /**
-     * Callback triggered when the theme changes
-     */
-    onChange?: (theme: 'light' | 'dark' | 'system') => void;
-    /**
-     * The current theme
+     * ID for the menu button. Must be unique if multiple ThemeSwitchers are rendered.
      */
-    theme?: 'light' | 'dark' | 'system';
+    id?: string;
     /**
      * Translation strings for theme options
      */
-    translations?: {
+    labelStrings?: {
         dark: string;
         light: string;
         system: string;
         tooltip?: string;
     };
+    /**
+     * 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, onChange, theme, translations, ...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/Tooltip/Tooltip.d.ts

@@ -15,6 +15,10 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
      * String or HTML content to use as the trigger instead of an icon. Leave null to use the icon.
      */
     customTrigger?: ReactNode;
+    /**
+     * When true, the tooltip will not show on focus — only on hover.
+     */
+    disableFocusTrigger?: boolean;
     /**
      * The spacing between the trigger and the tooltip in pixels. Use the default value (in most cases) when using an icon trigger.
      */
@@ -30,7 +34,7 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Icon to trigger tooltip
      */
-    triggerIcon?: 'circleInfo' | 'circleQuestion' | 'circleExclamation';
+    triggerIcon?: 'circleExclamation' | 'circleExclamationSolid' | 'circleInfo' | 'circleInfoSolid' | 'circleQuestion' | 'circleQuestionSolid';
     /**
      * Color of the trigger icon. Uses PDS default text color options.
      */
@@ -47,5 +51,5 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tooltip UI component
  */
-export declare const Tooltip: ({ className, content, customTrigger, offsetValue, preferredPlacement, triggerAccessibleText, triggerIcon, triggerIconColor, triggerIconSize, zIndex, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ className, content, customTrigger, disableFocusTrigger, offsetValue, preferredPlacement, triggerAccessibleText, triggerIcon, triggerIconColor, triggerIconSize, zIndex, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UtilityBar/UtilityBar.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PaddingScale } from '../../libs/types/layout-types';
+import './utility-bar.css';
+type UtilityBarBackground = 'default' | 'default-secondary' | 'transparent';
+export interface UtilityBarProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Background color of the utility bar.
+     */
+    backgroundColor?: UtilityBarBackground;
+    /**
+     * Child elements assigned to named slots.
+     * - `items-left` — left-side content (e.g. search input)
+     * - `items-right` — right-side controls (e.g. icon buttons)
+     */
+    children: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Internal padding. Defaults to 'none'.
+     */
+    padding?: PaddingScale;
+}
+export declare const UtilityBar: ({ backgroundColor, children, className, padding, ...props }: UtilityBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,6 +1,8 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '../../icons/Icon/Icon';
 import './badge.css';
-export type BadgeColor = 'aether' | 'aether-secondary' | 'amber' | 'amber-secondary' | 'apollo' | 'apollo-secondary' | 'critical' | 'critical-secondary' | 'discovery' | 'discovery-secondary' | 'gaia' | 'gaia-secondary' | 'hypnos' | 'hypnos-secondary' | 'indigo' | 'indigo-secondary' | 'info' | 'info-secondary' | 'iris' | 'iris-secondary' | 'lime' | 'lime-secondary' | 'mint' | 'mint-secondary' | 'orange' | 'orange-secondary' | 'rose' | 'rose-secondary' | 'sand' | 'sand-secondary' | 'silver' | 'silver-secondary' | 'sky' | 'sky-secondary' | 'slate' | 'slate-secondary' | 'stone' | 'stone-secondary' | 'success' | 'success-secondary' | 'teal' | 'teal-secondary' | 'warning' | 'warning-secondary' | 'feature';
+export type BadgeColor = 'brand' | 'brand-muted' | 'critical' | 'critical-muted' | 'discovery' | 'discovery-muted' | 'gold' | 'gold-muted' | 'indigo' | 'indigo-muted' | 'info' | 'info-muted' | 'ink' | 'ink-muted' | 'lime' | 'lime-muted' | 'orange' | 'orange-muted' | 'rose' | 'rose-muted' | 'silver' | 'silver-muted' | 'sky' | 'sky-muted' | 'slate' | 'slate-muted' | 'stone' | 'stone-muted' | 'success' | 'success-muted' | 'warning' | 'warning-muted';
+export type BadgeSize = 'xs' | 's' | 'm';
 /**
  * Badge component props
  */
@@ -13,6 +15,11 @@ export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
      * Badge color
      */
     color: BadgeColor;
+    /**
+     * Optional leading icon. Sized to fit the badge's `size` and always
+     * colored to match the badge's foreground color.
+     */
+    iconName?: PDSIcon;
     /**
      * Badge text or content.
      */
@@ -20,9 +27,9 @@ export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
     /**
      * Badge size
      */
-    size?: 'xs' | 's' | 'm';
+    size?: BadgeSize;
 }
 /**
  * Badge UI component
  */
-export declare const Badge: ({ className, color, label, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ className, color, iconName, label, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -27,8 +27,9 @@ export interface StatusBadgeProps extends ComponentPropsWithoutRef<'div'> {
     statusIndicatorText?: string;
     /**
      * 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';
+    statusType?: StatusType | 'frozen' | 'disabled' | 'working';
 }
 /**
  * StatusBadge UI component

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

@@ -1,5 +1,7 @@
 import React, { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+import { StatusDotType } from '../../../libs/components/StatusDot/StatusDot';
 import { ButtonDisplayType, ButtonSize, ButtonType, ButtonVariant } from '../../../libs/types/custom-types';
+import { TallyProps } from '../../badges/Tally/Tally';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './button.css';
 interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
@@ -56,6 +58,19 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
      * @default 's'
      */
     size?: ButtonSize;
+    /**
+     * A status dot displayed in the left icon slot. Mutually exclusive with `iconName` when `displayType` is `icon-start`.
+     * Only valid on `primary`, `secondary`, and `subtle` variants.
+     */
+    statusDot?: StatusDotType;
+    /**
+     * A tally badge displayed in the right icon slot. Mutually exclusive with `iconName` when `displayType` is `icon-end`.
+     * Only valid on `primary`, `secondary`, `subtle`, and `highlight` variants.
+     */
+    tally?: {
+        label: TallyProps['label'];
+        type: TallyProps['type'];
+    };
     /**
      * Text for an optional tooltip to be displayed when the button is `disabled`, `isLoading`, or `isWorking`.
      */

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

@@ -3,7 +3,6 @@ import { ButtonDisplayType, ButtonSize, ButtonVariant } from '../../../libs/type
 import { PDSIcon } from '../../icons/Icon/Icon';
 import '../Button/button.css';
 import './button-link.css';
-type ButtonLinkVariant = Exclude<ButtonVariant, 'navbar' | 'inline'>;
 /**
  * Prop types for ButtonLink
  */
@@ -39,10 +38,9 @@ export interface ButtonLinkProps extends ComponentPropsWithoutRef<'span'> {
     /**
      * Variant of the button.
      */
-    variant?: ButtonLinkVariant;
+    variant?: ButtonVariant;
 }
 /**
  * ButtonLink UI component
  */
 export declare const ButtonLink: ({ className, disabled, displayType, iconName, linkContent, size, tooltipText, variant, ...props }: ButtonLinkProps) => import("react/jsx-runtime").JSX.Element;
-export {};