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

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

@@ -84,9 +84,11 @@ 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

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/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-26T17:15:13.189Z
  */
 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}}

package/dist/css/component-css/pds-dropdown.css

@@ -1,2 +1,2 @@
 @layer pds-v1, pds-v2;@layer pds-v2{.pds-dropdown{position:relative}.pds-dropdown--inline{display:inline-block}.pds-dropdown__trigger{align-items:center;background:transparent;border:none;border-radius:var(--pds-border-radius-container);color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;gap:var(--pds-spacing-3xs);padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs);transition:background-color .15s ease}.pds-dropdown__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-dropdown__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-dropdown__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown__trigger[aria-expanded=true] .pds-dropdown__trigger-icon{transform:rotate(180deg)}.pds-dropdown__panel{background-color:var(--pds-color-dropdown-background);box-shadow:var(--pds-elevation-overlay);flex-direction:column;gap:var(--pds-spacing-4xs);margin:0;min-width:10rem;overflow-y:auto;padding-inline:var(--pds-spacing-2xs);z-index:var(--pds-z-index-dropdown)}.pds-dropdown__item,.pds-dropdown__panel{border-radius:var(--pds-border-radius-container);display:flex;list-style:none;outline:none;padding-block:var(--pds-spacing-2xs)}.pds-dropdown__item{align-items:center;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-inline:var(--pds-spacing-xs)}.pds-dropdown__item:focus-visible:not(:hover){outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-dropdown__item--focused,.pds-dropdown__item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-dropdown__item:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown__selected-icon{align-self:center;color:var(--pds-color-foreground-default);display:flex;flex-shrink:0;height:.875em;width:.875em}.pds-dropdown__item--critical{color:var(--pds-color-status-critical-foreground)}.pds-dropdown__item--critical.pds-dropdown__item--focused,.pds-dropdown__item--critical:hover{background-color:var(--pds-color-status-critical-background)}.pds-dropdown__item--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.pds-dropdown__item-content{align-items:center;display:flex;gap:var(--pds-spacing-2xs)}.pds-dropdown__item-icon{display:flex;flex-shrink:0}.pds-dropdown__item-label{display:flex;flex-direction:column}.pds-dropdown__item-description{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-4xs)}.pds-dropdown__item-trailing{display:flex;flex-shrink:0}.pds-dropdown__checkbox-box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-default);color:var(--pds-color-input-selected-foreground);display:flex;flex-shrink:0;height:1rem;justify-content:center;padding:.0625rem;transition:var(--pds-animation-transition-default);width:1rem}.pds-dropdown__checkbox-box--checked,.pds-dropdown__checkbox-box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background)}.pds-dropdown__checkbox-icon{height:100%;width:100%}.pds-dropdown__heading{color:var(--pds-color-dropdown-heading);font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xs);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-s);list-style:none;padding:var(--pds-spacing-xs) var(--pds-spacing-xs) var(--pds-spacing-3xs)}.pds-dropdown__separator{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);list-style:none;margin-block-end:2px;margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block:2px}.pds-dropdown__filter{list-style:none;margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:0}.pds-dropdown__filter-wrapper{align-items:center;display:flex;position:relative}.pds-dropdown__filter-icon{block-size:.875rem;color:var(--pds-color-foreground-default-secondary);inline-size:.875rem;left:var(--pds-spacing-s);pointer-events:none;position:absolute}.pds-dropdown__filter-wrapper:has(.pds-dropdown__filter-icon)
-	.pds-dropdown__filter-input{padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-xl))}.pds-dropdown__filter-input{background-color:transparent;border:none;border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:0;box-sizing:border-box;color:var(--pds-color-foreground-default);font-family:inherit;font-size:var(--pds-typography-size-s);padding:var(--pds-spacing-s);width:100%}.pds-dropdown__filter-input::placeholder{color:var(--pds-color-input-placeholder);font-size:var(--pds-typography-size-s)}.pds-dropdown__filter-input:focus-visible{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0;outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-3px}.pds-dropdown__no-results{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);padding-block-end:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-xs);padding-inline:var(--pds-spacing-s)}.pds-dropdown__footer{background-color:var(--pds-color-dropdown-background);border-block-start:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);bottom:calc(var(--pds-spacing-2xs)*-1);list-style:none;margin-block-end:calc(var(--pds-spacing-2xs)*-1);margin-block-start:var(--pds-spacing-3xs);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:var(--pds-spacing-s);position:sticky}.pds-dropdown__footer a,.pds-dropdown__footer button{align-items:center;background:none;border:none;color:var(--pds-color-interactive-link-default);cursor:pointer;display:flex;font:inherit;gap:var(--pds-spacing-3xs);padding:0;text-decoration:none;width:100%}.pds-dropdown__footer a:hover,.pds-dropdown__footer button:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-dropdown__footer a:focus-visible,.pds-dropdown__footer button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}}
+	.pds-dropdown__filter-input{padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-xl))}.pds-dropdown__filter-input{background-color:transparent;border:none;border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);border-radius:0;box-sizing:border-box;color:var(--pds-color-foreground-default);font-family:inherit;font-size:var(--pds-typography-size-s);padding:var(--pds-spacing-s);width:100%}.pds-dropdown__filter-input::placeholder{color:var(--pds-color-input-placeholder);font-size:var(--pds-typography-size-s)}.pds-dropdown__filter-input:focus-visible{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0;outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-3px}.pds-dropdown__no-results{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);padding-block-end:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-xs);padding-inline:var(--pds-spacing-s)}.pds-dropdown__footer{background-color:var(--pds-color-dropdown-background);border-block-start:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);bottom:calc(var(--pds-spacing-2xs)*-1);list-style:none;margin-block-end:calc(var(--pds-spacing-2xs)*-1);margin-block-start:var(--pds-spacing-3xs);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:var(--pds-spacing-s);position:sticky}.pds-dropdown__footer a,.pds-dropdown__footer button{align-items:center;background:none;border:none;color:var(--pds-color-interactive-link-default);cursor:pointer;display:flex;font:inherit;gap:var(--pds-spacing-3xs);padding:0;text-decoration:none;width:100%}.pds-dropdown__footer a:hover,.pds-dropdown__footer button:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-dropdown__footer a:focus-visible,.pds-dropdown__footer button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}}

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

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-filter-button{--fb-bg:var(--pds-color-button-secondary-background-default);--fb-bg-hover:var(--pds-color-button-secondary-background-hover);--fb-border:var(--pds-color-button-secondary-border);--fb-clear-size:1.5rem;--fb-fg:var(--pds-color-button-secondary-foreground-default)}.pds-filter-button__panel{min-width:12rem;width:max-content}.pds-filter-button--has-search .pds-filter-button__panel{min-width:14rem}.pds-filter-button__trigger{background:var(--fb-bg);block-size:var(--pds-spacing-button-height-s);border:var(--pds-border-width-default) solid var(--fb-border);border-radius:var(--pds-border-radius-button);color:var(--fb-fg);font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-3xs);padding-block:0;padding-inline-end:var(--pds-spacing-s);padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-5xs));white-space:nowrap}.pds-filter-button__trigger:hover{background-color:var(--fb-bg-hover)}.pds-filter-button--multiple .pds-filter-button__trigger,.pds-filter-button--single .pds-filter-button__trigger{padding-inline-start:calc(var(--pds-spacing-s) + var(--fb-clear-size) + var(--pds-spacing-4xs))}.pds-filter-button__label{align-items:center;display:inline-flex;gap:var(--pds-spacing-3xs)}.pds-filter-button__divider{background-color:var(--pds-color-border-separator);block-size:.75rem;inline-size:var(--pds-border-width-default)}.pds-filter-button__clear{align-items:center;background:transparent;block-size:var(--fb-clear-size);border:none;border-radius:50%;color:var(--fb-fg);cursor:pointer;display:inline-flex;inline-size:var(--fb-clear-size);inset-block-start:50%;inset-inline-start:var(--pds-spacing-s);justify-content:center;padding:var(--pds-spacing-5xs);position:absolute;transform:translateY(-50%)}.pds-filter-button__clear:hover{background-color:var(--fb-bg-hover)}.pds-filter-button__clear:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0}.pds-filter-button__clear:disabled{cursor:not-allowed;opacity:.5}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-filter-button{--fb-bg:var(--pds-color-button-secondary-background-default);--fb-bg-hover:var(--pds-color-button-secondary-background-hover);--fb-border:var(--pds-color-button-secondary-border);--fb-clear-size:1.5rem;--fb-fg:var(--pds-color-button-secondary-foreground-default)}.pds-filter-button__panel{min-width:12rem;width:max-content}.pds-filter-button--has-search .pds-filter-button__panel{min-width:14rem}.pds-filter-button__trigger{background:var(--fb-bg);block-size:var(--pds-spacing-button-height-s);border:var(--pds-border-width-default) solid var(--fb-border);border-radius:var(--pds-border-radius-button);color:var(--fb-fg);font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-3xs);padding-block:0;padding-inline-end:var(--pds-spacing-s);padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-5xs));white-space:nowrap}.pds-filter-button__trigger:hover{background-color:var(--fb-bg-hover)}.pds-filter-button__trigger:disabled{cursor:not-allowed;opacity:40%}.pds-filter-button--multiple .pds-filter-button__trigger,.pds-filter-button--single .pds-filter-button__trigger{padding-inline-start:calc(var(--pds-spacing-s) + var(--fb-clear-size) + var(--pds-spacing-4xs))}.pds-filter-button__label{align-items:center;display:inline-flex;gap:var(--pds-spacing-3xs)}.pds-filter-button__divider{background-color:var(--pds-color-border-separator);block-size:.75rem;inline-size:var(--pds-border-width-default)}.pds-filter-button__clear{align-items:center;background:transparent;block-size:var(--fb-clear-size);border:none;border-radius:50%;color:var(--fb-fg);cursor:pointer;display:inline-flex;inline-size:var(--fb-clear-size);inset-block-start:50%;inset-inline-start:var(--pds-spacing-s);justify-content:center;padding:var(--pds-spacing-5xs);position:absolute;transform:translateY(-50%)}.pds-filter-button__clear:hover{background-color:var(--fb-bg-hover)}.pds-filter-button__clear:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0}.pds-filter-button__clear:disabled{cursor:not-allowed;opacity:.5}}

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

@@ -1,19 +1,25 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-icon-button{--icon-button-size:var(--pds-spacing-button-height-s);--icon-button-padding:var(--pds-spacing-button-padding-inline-s);--icon-button-background:var(
-		--pds-color-icon-button-standard-background-default
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-icon-button{--icon-button-size:var(--pds-spacing-button-height-s);--icon-button-background:var(
+		--pds-color-button-secondary-background-default
 	);--icon-button-background-hover:var(
-		--pds-color-icon-button-standard-background-hover
-	);--icon-button-border:var(--pds-color-icon-button-standard-border-default);--icon-button-border-hover:var(
-		--pds-color-icon-button-standard-border-hover
-	);--icon-button-foreground:var(--pds-color-icon-button-standard-foreground);background-color:var(--icon-button-background);border:var(--pds-border-width-default) solid transparent;border-radius:var(--pds-border-radius-input);box-sizing:border-box;color:var(--icon-button-foreground);cursor:pointer;height:var(--icon-button-size);padding:var(--icon-button-padding);text-decoration:none;transition:var(--pds-animation-transition-button);width:var(--icon-button-size)}.pds-icon-button,.pds-icon-button__content{align-items:center;display:flex;justify-content:center}.pds-icon-button__content{align-content:stretch;height:100%}.pds-icon-button:disabled{cursor:not-allowed;opacity:70%}.pds-icon-button:disabled .pds-icon-button__content{opacity:30%}.pds-icon-button:hover:enabled,a.pds-icon-button:hover{background-color:var(--icon-button-background-hover);color:var(--icon-button-foreground);text-decoration:none}.pds-icon-button--has-border{border-color:var(--icon-button-border)}.pds-icon-button--has-border:hover:enabled,a.pds-icon-button--has-border:hover{border-color:var(--icon-button-border-hover)}.pds-icon-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-icon-button--reverse{--icon-button-background:var(
-		--pds-color-icon-button-reverse-background-default
+		--pds-color-button-secondary-background-hover
+	);--icon-button-border:var(--pds-color-button-secondary-border);--icon-button-border-hover:var(--pds-color-button-secondary-border);--icon-button-foreground:var(
+		--pds-color-button-secondary-foreground-default
+	);background-color:var(--icon-button-background);border:var(--pds-border-width-default) solid transparent;border-radius:var(--pds-border-radius-input);box-sizing:border-box;color:var(--icon-button-foreground);cursor:pointer;height:var(--icon-button-size);text-decoration:none;transition:var(--pds-animation-transition-button);width:var(--icon-button-size)}.pds-icon-button,.pds-icon-button__content{align-items:center;display:flex;justify-content:center}.pds-icon-button__content{align-content:stretch;height:100%}.pds-icon-button:disabled{cursor:not-allowed;opacity:70%}.pds-icon-button:disabled .pds-icon-button__content{opacity:30%}.pds-icon-button:hover:enabled,a.pds-icon-button:hover{background-color:var(--icon-button-background-hover);color:var(--icon-button-foreground);text-decoration:none}.pds-icon-button--has-border{border-color:var(--icon-button-border)}.pds-icon-button--has-border:hover:enabled,a.pds-icon-button--has-border:hover{border-color:var(--icon-button-border-hover)}.pds-icon-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-icon-button--reverse{--icon-button-background:var(
+		--pds-color-button-reverse-secondary-background-default
 	);--icon-button-background-hover:var(
-		--pds-color-icon-button-reverse-background-hover
-	);--icon-button-border:var(--pds-color-icon-button-reverse-border-default);--icon-button-border-hover:var(--pds-color-icon-button-reverse-border-hover);--icon-button-foreground:var(--pds-color-icon-button-reverse-foreground)}.pds-icon-button--reverse:focus-visible{outline-color:var(--pds-color-interactive-reverse-focus)}.pds-icon-button--critical{--icon-button-background:var(
-		--pds-color-icon-button-critical-background-default
+		--pds-color-button-reverse-secondary-background-hover
+	);--icon-button-border:var(--pds-color-button-reverse-secondary-border);--icon-button-border-hover:var(--pds-color-button-reverse-secondary-border);--icon-button-foreground:var(
+		--pds-color-button-reverse-secondary-foreground
+	)}.pds-icon-button--reverse:focus-visible{outline-color:var(--pds-color-interactive-reverse-focus)}.pds-icon-button--critical{--icon-button-background:var(
+		--pds-color-button-critical-secondary-background-default
 	);--icon-button-background-hover:var(
-		--pds-color-icon-button-critical-background-hover
-	);--icon-button-border:var(--pds-color-icon-button-critical-border-default);--icon-button-border-hover:var(
-		--pds-color-icon-button-critical-border-hover
-	);--icon-button-foreground:var(--pds-color-icon-button-critical-foreground)}.pds-icon-button--pressed:not(.pds-icon-button--critical),.pds-icon-button--pressed:not(.pds-icon-button--critical):hover:enabled{background-color:var(--icon-button-border);border-color:var(--icon-button-border);box-shadow:var(--pds-elevation-icon-button-pressed)}.pds-icon-button:active:enabled,a.pds-icon-button:active{background-color:var(--pds-color-button-secondary-background-active);box-shadow:var(--pds-elevation-button-secondary-active)}.pds-icon-button--critical:active:enabled,a.pds-icon-button--critical:active{background-color:var(
+		--pds-color-button-critical-secondary-background-hover
+	);--icon-button-border:var(
+		--pds-color-button-critical-secondary-border-default
+	);--icon-button-border-hover:var(
+		--pds-color-button-critical-secondary-border-hover
+	);--icon-button-foreground:var(
+		--pds-color-button-critical-secondary-foreground
+	)}.pds-icon-button--pressed:not(.pds-icon-button--critical),.pds-icon-button--pressed:not(.pds-icon-button--critical):hover:enabled{background-color:var(--icon-button-border);border-color:var(--icon-button-border);box-shadow:var(--pds-elevation-icon-button-pressed)}.pds-icon-button:active:enabled,a.pds-icon-button:active{background-color:var(--pds-color-button-secondary-background-active);box-shadow:var(--pds-elevation-button-secondary-active)}.pds-icon-button--critical:active:enabled,a.pds-icon-button--critical:active{background-color:var(
 		--pds-color-button-critical-secondary-background-active
-	);box-shadow:var(--pds-elevation-button-critical-secondary-active)}.pds-icon-button--m{--icon-button-size:var(--pds-spacing-button-height-m);--icon-button-padding:var(--pds-spacing-button-padding-inline-m)}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}.pds-icon--copy.pds-icon--copy.pds-icon-button__icon{transform:translateX(8%) translateY(-2%)}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}}
+	);box-shadow:var(--pds-elevation-button-critical-secondary-active)}.pds-icon-button--reverse:active:enabled,a.pds-icon-button--reverse:active{background-color:var(--pds-color-button-reverse-secondary-background-active);box-shadow:var(--pds-elevation-button-reverse-secondary-active)}.pds-icon-button--m{--icon-button-size:var(--pds-spacing-button-height-m)}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}.pds-icon--copy.pds-icon--copy.pds-icon-button__icon{transform:translateX(8%) translateY(-2%)}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}}