@pantheon-systems/pds-toolkit-react 2.0.0-alpha.34 → 2.0.0-alpha.35

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.input.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// String literals — should be updated
+const A = () => <Spinner size='sm' />;
+const B = () => <Spinner size='md' />;
+const C = () => <Spinner size='lg' />;
+const D = () => <Avatar size='sm' />;
+const E = () => <Avatar size='lg' />;
+// StatusIndicator has a different mapping: sm→xs, md→s
+const F = () => <StatusIndicator size='sm' />;
+const G = () => <StatusIndicator size='md' />;
+// Aliased import
+const H = () => <PdsIconButton size='sm' />;
+
+// JSX expression container — should also be updated
+const I = () => <Badge size={'sm'} />;
+
+// Already correct — should be left alone
+const J = () => <Spinner size='s' />;
+// Variable — cannot be transformed at compile time, leave as-is
+const mySize = 'sm';
+const K = () => <Spinner size={mySize} />;
+
+// Non-PDS component — should be left alone
+const L = () => <div size='sm' />;
+
+// Tooltip uses a different prop name: triggerIconSize
+const M = () => <Tooltip triggerIconSize='sm' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.output.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// String literals — should be updated
+const A = () => <Spinner size='s' />;
+const B = () => <Spinner size='m' />;
+const C = () => <Spinner size='l' />;
+const D = () => <Avatar size='s' />;
+const E = () => <Avatar size='m' />;
+// StatusIndicator has a different mapping: sm→xs, md→s
+const F = () => <StatusIndicator size='xs' />;
+const G = () => <StatusIndicator size='s' />;
+// Aliased import
+const H = () => <PdsIconButton size='s' />;
+
+// JSX expression container — should also be updated
+const I = () => <Badge size={'s'} />;
+
+// Already correct — should be left alone
+const J = () => <Spinner size='s' />;
+// Variable — cannot be transformed at compile time, leave as-is
+const mySize = 'sm';
+const K = () => <Spinner size={mySize} />;
+
+// Non-PDS component — should be left alone
+const L = () => <div size='sm' />;
+
+// Tooltip uses a different prop name: triggerIconSize
+const M = () => <Tooltip triggerIconSize='s' />;

package/codemods/v1-to-v2/transforms/__tests__/prop-value-standardization.test.js

@@ -0,0 +1,6 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'prop-value-standardization';
+const fixtures = `${__dirname}/../__testfixtures__/${transform}`;
+
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });

package/codemods/v1-to-v2/transforms/prop-value-standardization.js

@@ -0,0 +1,112 @@
+/**
+ * Codemod: prop-value-standardization
+ *
+ * Standardizes size-related prop values across PDS v1→v2.
+ * Driven entirely by props.typeChanges[].migration in mappings.json.
+ *
+ * Usage:
+ *   npx jscodeshift -t codemods/v1-to-v2/transforms/prop-value-standardization.js \
+ *     --extensions=tsx,ts,jsx,js \
+ *     src/
+ */
+
+const path = require('path');
+const mappings = require(path.join(__dirname, '../mappings.json'));
+
+// Build lookup: { 'ComponentName.propName': { oldValue: newValue } }
+// Skips entries that are notes or no-ops.
+function buildMigrationLookup() {
+	const lookup = {};
+
+	for (const entry of mappings.props.typeChanges) {
+		const { component, prop, migration } = entry;
+		if (!migration || typeof migration !== 'object' || Array.isArray(migration))
+			continue;
+
+		const map = {};
+		for (const [from, to] of Object.entries(migration)) {
+			if (from === 'note') continue;
+			// Strip parenthetical notes e.g. "s (removed, use 's' instead)" → "s"
+			const cleanTo = to.split(' ')[0];
+			// Skip no-op entries where value is unchanged
+			if (cleanTo === from) continue;
+			map[from] = cleanTo;
+		}
+
+		if (Object.keys(map).length > 0) {
+			lookup[`${component}.${prop}`] = map;
+		}
+	}
+
+	return lookup;
+}
+
+const MIGRATION_LOOKUP = buildMigrationLookup();
+
+module.exports = function transform(file, api) {
+	const j = api.jscodeshift;
+	const root = j(file.source);
+
+	// Map local import name → exported component name
+	// Handles aliased imports: import { Spinner as MySpinner } → { MySpinner: 'Spinner' }
+	const localToExported = new Map();
+
+	root.find(j.ImportDeclaration).forEach((nodePath) => {
+		if (nodePath.node.source.value !== '@pantheon-systems/pds-toolkit-react')
+			return;
+		nodePath.node.specifiers.forEach((spec) => {
+			if (spec.type === 'ImportSpecifier') {
+				localToExported.set(spec.local.name, spec.imported.name);
+			}
+		});
+	});
+
+	if (localToExported.size === 0) return;
+
+	let changed = false;
+
+	root.find(j.JSXOpeningElement).forEach((nodePath) => {
+		const nameNode = nodePath.node.name;
+		// Skip member expressions like <Foo.Bar />
+		if (nameNode.type !== 'JSXIdentifier') return;
+
+		const exportedName = localToExported.get(nameNode.name);
+		if (!exportedName) return;
+
+		nodePath.node.attributes.forEach((attr) => {
+			if (attr.type !== 'JSXAttribute' || !attr.value) return;
+
+			const propName = attr.name.name;
+			if (typeof propName !== 'string') return;
+
+			const map = MIGRATION_LOOKUP[`${exportedName}.${propName}`];
+			if (!map) return;
+
+			// size="sm"
+			if (attr.value.type === 'StringLiteral') {
+				const newValue = map[attr.value.value];
+				if (newValue) {
+					attr.value = j.stringLiteral(newValue);
+					changed = true;
+				}
+				return;
+			}
+
+			// size={"sm"}
+			if (
+				attr.value.type === 'JSXExpressionContainer' &&
+				attr.value.expression.type === 'StringLiteral'
+			) {
+				const newValue = map[attr.value.expression.value];
+				if (newValue) {
+					attr.value.expression = j.stringLiteral(newValue);
+					changed = true;
+				}
+			}
+		});
+	});
+
+	return changed ? root.toSource() : undefined;
+};
+
+module.exports.parser = 'tsx';

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

@@ -1,6 +1,20 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './table.css';
 export type SortOrder = 'asc' | 'desc';
+export type DetailPanelContext = {
+    /** Whether there is a next row to navigate to. */
+    hasNext: boolean;
+    /** Whether there is a previous row to navigate to. */
+    hasPrev: boolean;
+    /** Close the detail panel. */
+    onClose: () => void;
+    /** Navigate to the next row. */
+    onNext: () => void;
+    /** Navigate to the previous row. */
+    onPrev: () => void;
+    /** Stable ID of the currently inspected row. */
+    rowId: string;
+};
 export interface TableColumn {
     /** Content to display in the header cell. */
     header: ReactNode;
@@ -17,6 +31,11 @@ export interface TableColumn {
 export interface TableProps extends ComponentPropsWithoutRef<'table'> {
     /** Additional class names */
     className?: string;
+    /**
+     * 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[];
     /**
@@ -35,6 +54,23 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * 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.
+     */
+    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`.
@@ -49,12 +85,24 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * 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 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
@@ -75,6 +123,12 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Override for translation.
      */
     getSortLabel?: (columnHeader: string) => string;
+    /**
+     * 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.
      */
@@ -89,6 +143,21 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Number of skeleton rows to render when `isLoading` is true. Defaults to 5.
      */
     loadingRowCount?: number;
+    /**
+     * 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.
@@ -100,6 +169,12 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * 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.
@@ -114,11 +189,42 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * internally and expects the parent to pass pre-sorted data.
      */
     onSort?: (key: string, order: SortOrder) => void;
+    /**
+     * Render prop for the detail panel content. When provided, clicking a row
+     * slides in an inline detail panel alongside the table. Receives the row
+     * data and a context object with navigation callbacks and state.
+     * See the [Row detail panel](/docs/components-table--row-detail-panel) story.
+     */
     /**
      * Available page size options rendered in the rows-per-page selector.
      * When provided, the selector is shown to the left of the pagination controls.
      */
     pageSizeOptions?: number[];
+    /**
+     * 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.
+     */
+    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.
@@ -148,4 +254,4 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      */
     totalItemCount?: number;
 }
-export declare const Table: ({ className, columns, currentPage, defaultSortKey, defaultSortOrder, emptyState, emptyStateHeading, emptyStateMessage, getPageSizeLabel, getRowId, getSelectRowLabel, getSortLabel, isLoading, itemsPerPage, loadingRowCount, onPageChange, onPageSizeChange, onRowSelectionChange, onSort, pageSizeOptions, 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, getPageSizeLabel, getRowClassName, getRowId, getSelectRowLabel, getSortLabel, inspectedRowId, isLoading, itemsPerPage, loadingRowCount, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, panel, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -19,7 +19,7 @@ interface OptionType {
  */
 export interface SegmentedButtonProps {
     /**
-     * Additional class names
+     * Additional class names.
      */
     className?: string;
     /**
@@ -27,7 +27,7 @@ export interface SegmentedButtonProps {
      */
     defaultValue?: string;
     /**
-     * Is the SegmentedButton disabled?
+     * Disables all options in the SegmentedButton.
      */
     disabled?: boolean;
     /**
@@ -39,11 +39,12 @@ export interface SegmentedButtonProps {
      */
     label: string;
     /**
-     * Callback function that will return the updated value from the instance when it changes.
+     * Callback fired when the selected option changes.
      */
     onChange?: (value: string) => void;
     /**
-     * Array of button options — must be between 2 and 6 options.
+     * Array of button options — must be between 2 and 6 options. Each option
+     * may include an optional icon displayed before the label.
      */
     options: OptionType[];
     /**
@@ -51,7 +52,7 @@ export interface SegmentedButtonProps {
      */
     size?: 's' | 'm';
     /**
-     * Value of the Segmented Button. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     * Controlled value. Cannot be used together with `defaultValue`.
      */
     value?: string;
 }

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-05-28T21:43:58.268Z
+ * Generated: 2026-06-30T02:04:36.163Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };
@@ -29,6 +29,13 @@ export declare const iconData: {
         readonly svgPathData: "M241.5 239c9.4 9.4 9.4 24.6 0 33.9L81.5 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143-143-143c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l160 160z";
         readonly width: 256;
     };
+    readonly anglesDown: {
+        readonly aliases: readonly ["chevrons down", "double down", "scroll to bottom"];
+        readonly categories: readonly ["arrows"];
+        readonly height: 512;
+        readonly svgPathData: "M369.5 113l-160 160c-9.4 9.4-24.6 9.4-33.9 0L15.5 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zm0 192l-160 160c-9.4 9.4-24.6 9.4-33.9 0L15.5 305c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z";
+        readonly width: 384;
+    };
     readonly anglesLeft: {
         readonly aliases: readonly ["chevrons left", "double left"];
         readonly categories: readonly ["arrows"];
@@ -43,6 +50,13 @@ export declare const iconData: {
         readonly svgPathData: "M81.5 433l160-160c9.4-9.4 9.4-24.6 0-33.9L81.5 79c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l143 143-143 143c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0zm192 0l160-160c9.4-9.4 9.4-24.6 0-33.9L273.5 79c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l143 143-143 143c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0z";
         readonly width: 448;
     };
+    readonly anglesUp: {
+        readonly aliases: readonly ["chevrons up", "double up", "scroll to top"];
+        readonly categories: readonly ["arrows"];
+        readonly height: 512;
+        readonly svgPathData: "M209.5 47c-9.4-9.4-24.6-9.4-33.9 0L15.5 207c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l143-143 143 143c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L209.5 47zm160 352l-160-160c-9.4-9.4-24.6-9.4-33.9 0L15.5 399c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l143-143 143 143c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9z";
+        readonly width: 384;
+    };
     readonly angleUp: {
         readonly aliases: readonly ["chevron up"];
         readonly categories: readonly ["arrows"];
@@ -1493,7 +1507,7 @@ export declare const iconData: {
         readonly width: 576;
     };
 };
-export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesLeft", "anglesRight", "angleUp", "arrowDownLeftAndArrowUpRightToCenter", "arrowDownToLine", "arrowLeft", "arrowRight", "arrowsRetweet", "arrowsUpDownLeftRight", "asterisk", "banBug", "bars", "barsFilter", "barsStaggered", "bell", "billboard", "bitbucket", "bluesky", "bolt", "boltPantheon", "boltSolid", "book", "books", "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", "circleInfo", "circleInfoSolid", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleQuestionSolid", "circleUser", "circleXmark", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "command", "comment", "compress", "copy", "desktop", "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", "folder", "folderTree", "gear", "gem", "github", "gitlab", "globe", "graduationCap", "grid", "gripDots", "gripDotsVertical", "heart", "heartSolid", "house", "idCard", "image", "inputText", "instagram", "keySkeleton", "landmark", "laptop", "laptopCode", "leaf", "lifeRing", "linkedin", "linkSimple", "linkSimpleSlash", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "nextJs", "paperclip", "paperPlane", "pause", "pen", "penField", "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", "slidersSimple", "snowflake", "sparkles", "squareCheck", "squareCode", "squareMinus", "squarePen", "squareQuestion", "squareTerminal", "star", "starSolid", "sun", "sunBright", "table", "tableRows", "terminal", "text", "threads", "thumbsDown", "thumbsUp", "trash", "triangleExclamation", "twitter", "upload", "user", "userAstronaut", "userGear", "userPlus", "users", "video", "wavePulse", "windowRestore", "wordpress", "wreathLaurel", "wrench", "xmark", "xmarkLarge", "xTwitter", "youtube"];
+export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesDown", "anglesLeft", "anglesRight", "anglesUp", "angleUp", "arrowDownLeftAndArrowUpRightToCenter", "arrowDownToLine", "arrowLeft", "arrowRight", "arrowsRetweet", "arrowsUpDownLeftRight", "asterisk", "banBug", "bars", "barsFilter", "barsStaggered", "bell", "billboard", "bitbucket", "bluesky", "bolt", "boltPantheon", "boltSolid", "book", "books", "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", "circleInfo", "circleInfoSolid", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleQuestionSolid", "circleUser", "circleXmark", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "command", "comment", "compress", "copy", "desktop", "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", "folder", "folderTree", "gear", "gem", "github", "gitlab", "globe", "graduationCap", "grid", "gripDots", "gripDotsVertical", "heart", "heartSolid", "house", "idCard", "image", "inputText", "instagram", "keySkeleton", "landmark", "laptop", "laptopCode", "leaf", "lifeRing", "linkedin", "linkSimple", "linkSimpleSlash", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "nextJs", "paperclip", "paperPlane", "pause", "pen", "penField", "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", "slidersSimple", "snowflake", "sparkles", "squareCheck", "squareCode", "squareMinus", "squarePen", "squareQuestion", "squareTerminal", "star", "starSolid", "sun", "sunBright", "table", "tableRows", "terminal", "text", "threads", "thumbsDown", "thumbsUp", "trash", "triangleExclamation", "twitter", "upload", "user", "userAstronaut", "userGear", "userPlus", "users", "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/css/component-css/pds-button-nav.css

@@ -1 +1 @@
-.pds-button-nav{--button-nav-padding:var(--pds-spacing-4xs);--button-nav-gap-inline:var(--pds-spacing-3xs);--button-nav-total-height:var(--pds-spacing-button-height-s);--button-nav-inner-height:calc(var(--button-nav-total-height) - var(--button-nav-padding)*2);--button-nav-option-padding-inline:var(--pds-spacing-s);--button-nav-text-size:var(--pds-typography-size-s);display:inline-block}.pds-button-nav__menu{align-items:center;background-color:var(--pds-color-segmented-button-background-inactive);gap:var(--button-nav-gap-inline);height:var(--button-nav-total-height);list-style:none;margin:0;padding:var(--button-nav-padding)}.pds-button-nav__item,.pds-button-nav__menu{border-radius:var(--pds-border-radius-button);display:flex}.pds-button-nav__item{height:var(--button-nav-inner-height);transition:var(--pds-animation-transition-button)}.pds-button-nav__item a{align-items:center;color:var(--pds-color-segmented-button-foreground-inactive);column-gap:var(--pds-spacing-3xs);display:flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-nav-text-size);font-weight:var(--pds-typography-fw-medium);line-height:1;padding-inline:var(--button-nav-option-padding-inline);text-decoration:none;white-space:nowrap}.pds-button-nav__item:hover{background-color:var(--pds-color-segmented-button-background-active)}.pds-button-nav__item:hover a{color:var(--pds-color-segmented-button-foreground-active)}.pds-button-nav__item a:focus-visible{border-radius:var(--pds-border-radius-button);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-button-nav__item--active{background-color:var(--pds-color-segmented-button-background-active)}.pds-button-nav__item--active a{color:var(--pds-color-segmented-button-foreground-active)}.pds-button-nav__mobile{display:none}[data-pds-mobile] .pds-button-nav__mobile{display:block}[data-pds-mobile] .pds-button-nav__menu{display:none}.pds-button-nav--s{--button-nav-total-height:var(--pds-spacing-button-height-s);--button-nav-padding:var(--pds-spacing-4xs);--button-nav-gap-inline:var(--pds-spacing-3xs);--button-nav-option-padding-inline:var(--pds-spacing-s);--button-nav-text-size:var(--pds-typography-size-s)}.pds-button-nav--m{--button-nav-total-height:var(--pds-spacing-button-height-m);--button-nav-padding:var(--pds-spacing-4xs);--button-nav-gap-inline:var(--pds-spacing-2xs);--button-nav-option-padding-inline:var(--pds-spacing-m);--button-nav-text-size:var(--pds-typography-size-m)}
+.pds-button-nav{--bg:var(--pds-color-button-secondary-background-default);--border:var(--pds-color-button-secondary-border);--text:var(--pds-color-button-secondary-foreground-default);--separator:var(--pds-color-split-button-secondary-separator);--selected-bg:var(--pds-color-interactive-background-current);--selected-text:var(--pds-color-interactive-background-current-foreground);--hover-bg:var(--pds-color-button-secondary-background-hover);--hover-text:var(--pds-color-button-secondary-foreground-hover);--height:var(--pds-spacing-button-height-s);--padding-inline:var(--pds-spacing-button-padding-inline-s);--font-size:var(--pds-typography-size-s);display:inline-block}.pds-button-nav__menu{align-items:stretch;display:flex;height:var(--height);list-style:none;margin:0;padding:0}.pds-button-nav__item{background-color:var(--bg);border-block:1px solid var(--border);display:flex;flex-shrink:0;transition:var(--pds-animation-transition-button)}.pds-button-nav__item:first-child{border-end-start-radius:var(--pds-border-radius-button);border-inline-start:1px solid var(--border);border-start-start-radius:var(--pds-border-radius-button)}.pds-button-nav__item:first-child a{padding-inline-start:calc(var(--padding-inline) + 4px)}.pds-button-nav__item:first-child:has(.pds-icon) a{padding-inline-start:var(--padding-inline)}.pds-button-nav__item:last-child{border-end-end-radius:var(--pds-border-radius-button);border-inline-end:1px solid var(--border);border-start-end-radius:var(--pds-border-radius-button)}.pds-button-nav__item:last-child a{padding-inline-end:calc(var(--padding-inline) + 4px)}.pds-button-nav__item:not(:last-child){border-inline-end:1px solid var(--separator)}.pds-button-nav__item a{align-items:center;color:var(--text);display:flex;font-family:var(--pds-typography-ff-default);font-size:var(--font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--pds-spacing-button-gap-inline-s);line-height:0;padding-inline:var(--padding-inline);text-decoration:none;white-space:nowrap}.pds-button-nav__item:hover:not(.pds-button-nav__item--active){background-color:var(--hover-bg)}.pds-button-nav__item:hover:not(.pds-button-nav__item--active) a{color:var(--hover-text)}.pds-button-nav__item a:focus-visible{border-radius:var(--pds-border-radius-button);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-button-nav__item--active{background-color:var(--selected-bg);border-block-color:var(--selected-bg)}.pds-button-nav__item--active:first-child{border-inline-start-color:var(--selected-bg)}.pds-button-nav__item--active:last-child{border-inline-end-color:var(--selected-bg)}.pds-button-nav__item--active a{color:var(--selected-text)}.pds-button-nav__item--active .pds-tally{box-shadow:0 0 0 1px hsla(0,0%,100%,.75)}.pds-button-nav__mobile{display:none}[data-pds-mobile] .pds-button-nav__mobile{display:block}[data-pds-mobile] .pds-button-nav__menu{display:none}.pds-button-nav--s{--height:var(--pds-spacing-button-height-s);--padding-inline:var(--pds-spacing-button-padding-inline-s);--font-size:var(--pds-typography-size-s)}.pds-button-nav--m{--height:var(--pds-spacing-button-height-m);--padding-inline:var(--pds-spacing-button-padding-inline-m);--font-size:var(--pds-typography-size-m)}

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

@@ -1,3 +1,3 @@
 .pds-datepicker{color:var(--pds-color-foreground-default);font-family:var(--pds-typography-ff-default)}.pds-datepicker__input-wrapper{column-gap:var(--pds-spacing-s);row-gap:var(--pds-spacing-xs);width:100%}.pds-datepicker__input-wrapper,.pds-datepicker__presets{align-items:center;display:flex}.pds-datepicker__presets .pds-segmented-button__label-text{font-weight:var(--pds-typography-fw-regular)}.pds-datepicker__presets .pds-segmented-button.pds-is-disabled .pds-segmented-button__option label{border-color:var(--pds-color-border-input);opacity:1}.pds-datepicker__presets .pds-segmented-button.pds-is-disabled .pds-segmented-button__label-text{color:var(--pds-color-foreground-default);opacity:.5}.pds-datepicker__trigger{align-items:center;background:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-default);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;font-size:var(--pds-typography-size-m);gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-s);justify-content:space-between;min-width:10rem;padding:var(--pds-spacing-s);width:100%}.pds-datepicker__trigger:disabled{cursor:not-allowed}.pds-datepicker__trigger:focus{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-datepicker__trigger-text{align-items:center;display:flex;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.pds-datepicker__trigger-text--placeholder{color:var(--pds-color-foreground-default-secondary)}.pds-datepicker__trigger-icon{color:var(--pds-color-foreground-default);flex-shrink:0;margin-block-start:-1px}.pds-datepicker__separator{padding-inline:var(--pds-spacing-s)}.pds-datepicker__popover{background-color:var(--pds-color-surface-default);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);overflow:hidden;z-index:var(--pds-z-index-overlay)}.pds-datepicker__calendar{background-color:var(--pds-color-surface-default);padding:var(--pds-spacing-s)}.pds-datepicker__actions{display:flex;gap:var(--pds-spacing-s);justify-content:flex-end;padding:0 var(--pds-spacing-m) var(--pds-spacing-m) 0}.pds-datepicker__actions button.pds-button.pds-button--sm{font-size:calc(var(--pds-typography-size-s)*.9);font-weight:var(--pds-typography-fw-medium);padding:calc(var(--pds-spacing-button-padding-block-s)*.8) calc(var(--pds-spacing-button-padding-inline-s)*.9)}.pds-datepicker{--day-size:2rem}.pds-datepicker .rdp-root{--rdp-accent-color:var(--pds-color-datepicker-accent-foreground);--rdp-range_middle-background-color:var(
 			--pds-color-datepicker-range-background
-		);--rdp-today-color:var(--pds-color-foreground-default);--rdp-day-height:var(--day-size);--rdp-day-width:var(--day-size);--rdp-day_button-height:var(--day-size);--rdp-day_button-width:var(--day-size)}.pds-datepicker .rdp-month_caption{margin-block-end:var(--pds-spacing-xs)}.pds-datepicker .rdp-caption_label{font-size:var(--pds-typography-size-m)}.pds-datepicker .rdp-caption_label,.pds-datepicker .rdp-weekday{color:var(--pds-color-foreground-default-secondary);font-weight:var(--pds-typography-fw-regular)}.pds-datepicker .rdp-weekday{font-size:var(--pds-typography-size-s);opacity:1}.pds-datepicker .rdp-week{border:var(--pds-spacing-3xs) solid var(--pds-color-surface-default)}.pds-datepicker .rdp-day{padding-inline:var(--pds-spacing-4xs)}.pds-datepicker .rdp-day_button{font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular)}.pds-datepicker .rdp-day_button:focus{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker .rdp-selected:not(.rdp-range_middle) .rdp-day_button{background-color:var(--pds-color-datepicker-selected-background);border-radius:50%;color:var(--pds-color-datepicker-selected-foreground)}.pds-datepicker .rdp-today .rdp-day_button{border:var(--pds-border-width-default) solid var(--pds-color-foreground-default-secondary);border-radius:50%;height:calc(var(--day-size) - 1px);width:calc(var(--day-size) - 1px)}.pds-datepicker .rdp-button_next,.pds-datepicker .rdp-button_previous{color:var(--pds-color-foreground-default-secondary)}.pds-datepicker .rdp-button_next:hover,.pds-datepicker .rdp-button_previous:hover{color:var(--pds-color-segmented-button-foreground-hover)}.pds-datepicker .rdp-button_next:focus-visible,.pds-datepicker .rdp-button_previous:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}@media (max-width:767px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker__presets{width:100%}.pds-datepicker__presets .pds-segmented-button{display:block;margin-inline:-.0125rem;min-width:0;width:100%}.pds-datepicker__presets .pds-segmented-button__options{display:flex;width:100%}.pds-datepicker__presets .pds-segmented-button__option{flex:1;min-width:0}.pds-datepicker__presets .pds-segmented-button__option label{justify-content:center;overflow:hidden;text-overflow:ellipsis;width:100%}.pds-datepicker__presets .pds-segmented-button__option:not(:first-child) label{border-left:0}.pds-datepicker__presets .pds-segmented-button__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-datepicker .rdp-root .rdp-months{flex-direction:column}}
+		);--rdp-today-color:var(--pds-color-foreground-default);--rdp-day-height:var(--day-size);--rdp-day-width:var(--day-size);--rdp-day_button-height:var(--day-size);--rdp-day_button-width:var(--day-size)}.pds-datepicker .rdp-month_caption{margin-block-end:var(--pds-spacing-xs)}.pds-datepicker .rdp-caption_label{font-size:var(--pds-typography-size-m)}.pds-datepicker .rdp-caption_label,.pds-datepicker .rdp-weekday{color:var(--pds-color-foreground-default-secondary);font-weight:var(--pds-typography-fw-regular)}.pds-datepicker .rdp-weekday{font-size:var(--pds-typography-size-s);opacity:1}.pds-datepicker .rdp-week{border:var(--pds-spacing-3xs) solid var(--pds-color-surface-default)}.pds-datepicker .rdp-day{padding-inline:var(--pds-spacing-4xs)}.pds-datepicker .rdp-day_button{font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular)}.pds-datepicker .rdp-day_button:focus{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker .rdp-selected:not(.rdp-range_middle) .rdp-day_button{background-color:var(--pds-color-datepicker-selected-background);border-radius:50%;color:var(--pds-color-datepicker-selected-foreground)}.pds-datepicker .rdp-today .rdp-day_button{border:var(--pds-border-width-default) solid var(--pds-color-foreground-default-secondary);border-radius:50%;height:calc(var(--day-size) - 1px);width:calc(var(--day-size) - 1px)}.pds-datepicker .rdp-button_next,.pds-datepicker .rdp-button_previous{color:var(--pds-color-foreground-default-secondary)}.pds-datepicker .rdp-button_next:hover,.pds-datepicker .rdp-button_previous:hover{color:var(--pds-color-button-secondary-foreground-hover)}.pds-datepicker .rdp-button_next:focus-visible,.pds-datepicker .rdp-button_previous:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}@media (max-width:767px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker__presets{width:100%}.pds-datepicker__presets .pds-segmented-button{display:block;margin-inline:-.0125rem;min-width:0;width:100%}.pds-datepicker__presets .pds-segmented-button__options{display:flex;width:100%}.pds-datepicker__presets .pds-segmented-button__option{flex:1;min-width:0}.pds-datepicker__presets .pds-segmented-button__option label{justify-content:center;overflow:hidden;text-overflow:ellipsis;width:100%}.pds-datepicker__presets .pds-segmented-button__option:not(:first-child) label{border-left:0}.pds-datepicker__presets .pds-segmented-button__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-datepicker .rdp-root .rdp-months{flex-direction:column}}

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

@@ -1 +1 @@
-.pds-drawer__wrapper{inset:0;position:fixed;z-index:var(--pds-z-index-modal)}.pds-drawer__overlay{background-color:var(--pds-color-overlay-subtle);inset:0;opacity:0;position:fixed;transition:opacity .3s ease}.pds-drawer__overlay--visible{opacity:1}.pds-drawer{background-color:var(--pds-color-surface-default);display:flex;flex-direction:column;height:100vh;max-width:90vw;overflow:hidden;position:fixed;top:0;transition:transform .3s cubic-bezier(.2,0,0,1);width:25rem}.pds-drawer--right{box-shadow:var(--pds-elevation-drawer-right);right:0;transform:translateX(100%)}.pds-drawer--left{box-shadow:var(--pds-elevation-drawer-left);left:0;transform:translateX(-100%)}.pds-drawer--open{transform:translateX(0)}.pds-drawer--s{width:20rem}.pds-drawer--m{width:25rem}.pds-drawer--l{width:37.5rem}.pds-drawer__header{align-items:center;display:flex;justify-content:space-between;padding:var(--pds-spacing-l) var(--pds-spacing-xl)}.pds-drawer__header .pds-close-button{margin-inline-start:auto}.pds-drawer__title{font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xl);font-weight:var(--pds-typography-fw-semibold);line-height:var(--pds-typography-lh-s)}.pds-drawer__content{flex:1;overflow-y:auto;padding:0 var(--pds-spacing-xl) var(--pds-spacing-xl)}
+.pds-drawer__wrapper{inset:0;position:fixed;z-index:var(--pds-z-index-modal)}.pds-drawer__overlay{background-color:var(--pds-color-overlay-subtle);inset:0;opacity:0;position:fixed;transition:opacity .3s ease}.pds-drawer__overlay--visible{opacity:1}.pds-drawer{background-color:var(--pds-color-surface-default);display:flex;flex-direction:column;height:100vh;max-width:90vw;overflow:hidden;position:fixed;top:0;transition:transform .3s cubic-bezier(.2,0,0,1);width:25rem}.pds-drawer--right{box-shadow:var(--pds-elevation-drawer-right);right:0;transform:translateX(100%)}.pds-drawer--left{box-shadow:var(--pds-elevation-drawer-left);left:0;transform:translateX(-100%)}.pds-drawer--open{transform:translateX(0)}.pds-drawer--s{width:20rem}.pds-drawer--m{width:25rem}.pds-drawer--l{width:37.5rem}.pds-drawer__header{align-items:center;display:flex;justify-content:space-between;padding:var(--pds-spacing-l) var(--pds-spacing-xl)}.pds-drawer__header .pds-close-button{margin-inline-start:auto}.pds-drawer__title{font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xl);font-weight:var(--pds-typography-fw-semibold);line-height:var(--pds-typography-lh-s)}.pds-drawer__content{flex:1;overflow-y:auto;padding:0 var(--pds-spacing-xl) var(--pds-spacing-xl)}.pds-drawer__footer{display:flex;flex-shrink:0;gap:var(--pds-spacing-2xs);justify-content:flex-end;padding:var(--pds-spacing-m) var(--pds-spacing-xl)}

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

@@ -1,2 +1,2 @@
-.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);margin-block-end:var(--pds-spacing-s)}.pds-dropdown-menu__heading a{color:var(--pds-color-foreground-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-ui-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;height:var(--pds-spacing-input-height-m);justify-content:space-between;padding:0 var(--pds-spacing-s);text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown-menu__trigger[aria-expanded=true]
+.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);margin-block-end:var(--pds-spacing-s)}.pds-dropdown-menu__heading a{color:var(--pds-color-foreground-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-foreground-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;height:var(--pds-spacing-input-height-m);justify-content:space-between;padding:0 var(--pds-spacing-s);text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown-menu__trigger[aria-expanded=true]
 	.pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-dropdown-menu__dropdown{margin-block-start:var(--pds-spacing-xs);max-height:30rem;overflow-y:auto;width:100%}.pds-dropdown-menu__dropdown .pds-dropdown__item>a{color:inherit;flex:1;text-decoration:none}.pds-dropdown-menu__item--second-level>a{padding-inline-start:var(--pds-spacing-2xl)}.pds-dropdown-menu__item--third-level>a{padding-inline-start:calc(var(--pds-spacing-2xl) + var(--pds-spacing-xl))}.pds-dropdown-menu__item--fourth-level>a{padding-inline-start:calc(var(--pds-spacing-2xl) + var(--pds-spacing-xl) + var(--pds-spacing-xl))}.pds-dropdown-menu__active-label{display:flex}.pds-dropdown-menu__active-icon{margin-inline:var(--pds-spacing-m)}.pds-dropdown-menu__separator{background-color:var(--pds-color-border-default);block-size:1px;margin-block:token("spacing.XS" to rem);pointer-events:none}