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

package/dist/utilities/grid/GridItem.d.ts

@@ -0,0 +1,57 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './grid.css';
+type GridSpanSm = 1 | 2 | 3 | 4;
+type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridRowSpan = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Prop types for GridItem
+ */
+export interface GridItemProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Item content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Rows to span at large viewports (1–6). Falls back to the medium value.
+     */
+    rowSpanLg?: GridRowSpan;
+    /**
+     * Rows to span at medium viewports (1–6). Falls back to a single row.
+     */
+    rowSpanMd?: GridRowSpan;
+    /**
+     * Rows to span at small viewports (1–6). Falls back to a single row.
+     */
+    rowSpanSm?: GridRowSpan;
+    /**
+     * Rows to span at extra-large viewports (1–6). Falls back to the large value.
+     */
+    rowSpanXl?: GridRowSpan;
+    /**
+     * Columns to span at large viewports (1–12). Falls back to the medium value.
+     */
+    spanLg?: GridSpan;
+    /**
+     * Columns to span at medium viewports (1–12). Falls back to full width.
+     */
+    spanMd?: GridSpan;
+    /**
+     * Columns to span at small viewports (1–4). Falls back to full width.
+     */
+    spanSm?: GridSpanSm;
+    /**
+     * Columns to span at extra-large viewports (1–12). Falls back to the large value.
+     */
+    spanXl?: GridSpan;
+}
+/**
+ * GridItem — a child of `Grid`. Sets the column span per breakpoint via the
+ * `pds-grid-item--{breakpoint}-{span}` utility classes. Missing breakpoints
+ * fall back to the full column width for that viewport.
+ */
+export declare const GridItem: ({ children, className, rowSpanLg, rowSpanMd, rowSpanSm, rowSpanXl, spanLg, spanMd, spanSm, spanXl, ...props }: GridItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/utilities/hooks/useDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './useDropdown';

package/dist/utilities/hooks/useDropdown/useDropdown.d.ts

@@ -0,0 +1,148 @@
+import type { Placement } from '@floating-ui/react';
+import { useFloating, useFloatingNodeId, useInteractions } from '@floating-ui/react';
+export type DropdownRole = 'menu' | 'listbox' | 'dialog';
+export type DropdownVariant = 'default' | 'input';
+export interface UseDropdownOptions {
+    /**
+     * Allow keyboard navigation to escape the list (move past first/last item).
+     * Useful for combobox inputs where focus should return to the input.
+     */
+    allowEscape?: boolean;
+    /**
+     * Enable click-to-toggle interaction via useClick.
+     * Set to false for combobox-type inputs where open/close is managed
+     * by input events (typing, focus) rather than a click toggle.
+     */
+    enableClick?: boolean;
+    /**
+     * Enable keyboard list navigation via useListNavigation.
+     * Set to false if keyboard nav is managed externally.
+     */
+    enableListNavigation?: boolean;
+    /**
+     * Enable shift middleware to keep the dropdown within viewport bounds.
+     * Set to false for inputs where the dropdown should align flush with the trigger.
+     */
+    enableShift?: boolean;
+    /**
+     * Enable transition animations on the dropdown panel.
+     */
+    enableTransition?: boolean;
+    /**
+     * Enable typeahead character search via useTypeahead.
+     */
+    enableTypeahead?: boolean;
+    /**
+     * Set the floating panel's width to exactly match the reference
+     * (trigger) element's width, applied via inline style. Needed any time
+     * the panel is rendered through a `FloatingPortal` — once portaled, a
+     * CSS `width: 100%` on the panel resolves against the viewport instead
+     * of the trigger, since the panel is no longer nested inside it. Implied
+     * (and overridden to `minWidth` instead of `width`) by `variant: 'input'`.
+     */
+    matchReferenceWidth?: boolean;
+    /**
+     * Offset distance in pixels between the trigger and the dropdown panel.
+     * Ignored when variant is 'input' (uses dynamic offset based on placement).
+     */
+    offsetValue?: number;
+    /**
+     * Open the dropdown on hover (desktop navigation menus).
+     * Enables useHover with safePolygon.
+     */
+    openOnHover?: boolean;
+    /**
+     * Preferred placement of the dropdown panel relative to the trigger.
+     */
+    placement?: Placement;
+    /**
+     * ARIA role for the dropdown container.
+     */
+    role?: DropdownRole;
+    /**
+     * Index of the currently selected item. Used by typeahead to maintain
+     * selection context. Only needed for selection-style dropdowns (Select).
+     */
+    selectedIndex?: number | null;
+    /**
+     * Minimum clearance (px) shift maintains from the viewport edge — the
+     * "safe zone" a trigger closer than this is still nudged away from, even
+     * if the panel itself wouldn't actually overflow. Defaults to 24. Lower
+     * to 0 so shift only intervenes on genuine overflow, when a trigger
+     * sitting close to the edge (but not overflowing) needs to stay flush.
+     */
+    shiftPadding?: number;
+    /**
+     * Dropdown variant. 'input' applies input-specific positioning: dynamic
+     * offset based on placement direction and size constraints with min/max height.
+     * Use for Select, Combobox, and other input-attached dropdowns.
+     */
+    variant?: DropdownVariant;
+    /**
+     * Use virtual focus (aria-activedescendant) instead of roving tabindex.
+     * Appropriate for combobox-type inputs where focus must stay on the input.
+     */
+    virtual?: boolean;
+}
+export interface UseDropdownReturn {
+    /**
+     * Index of the currently active/focused item in the list.
+     */
+    activeIndex: number | null;
+    /**
+     * Styles to apply to the floating panel element.
+     */
+    floatingStyles: ReturnType<typeof useFloating>['floatingStyles'];
+    /**
+     * Props to spread on the floating panel element.
+     */
+    getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];
+    /**
+     * Props to spread on each item element.
+     */
+    getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
+    /**
+     * Props to spread on the trigger/reference element.
+     */
+    getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];
+    /**
+     * Whether the floating panel should be mounted in the DOM
+     * (accounts for transition animations).
+     */
+    isMounted: boolean;
+    /**
+     * Whether the dropdown is currently open.
+     */
+    isOpen: boolean;
+    /**
+     * Ref array for list item DOM nodes (used by useListNavigation).
+     */
+    listRef: React.MutableRefObject<any[]>;
+    /**
+     * This instance's Floating UI tree node ID (`null` when not part of a
+     * `<FloatingTree>`). Consumers that can be nested inside another floating
+     * panel (e.g. MenuButton, Dropdown) wrap their rendered floating panel in
+     * a `<FloatingNode id={nodeId}>` so outside-click/Escape resolve to the
+     * correct (innermost) panel when nested. See each consumer's own
+     * `useFloatingParentNodeId()` check for whether it also needs to provide
+     * its own `<FloatingTree>` (root case) or can join an ancestor's.
+     */
+    nodeId: ReturnType<typeof useFloatingNodeId>;
+    /**
+     * Floating UI refs for the reference and floating elements.
+     */
+    refs: ReturnType<typeof useFloating>['refs'];
+    /**
+     * Set the active/focused item index.
+     */
+    setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
+    /**
+     * Set the open state of the dropdown.
+     */
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Transition styles to apply to the floating panel element.
+     */
+    transitionStyles: React.CSSProperties;
+}
+export declare const useDropdown: ({ allowEscape, enableClick, enableListNavigation, enableShift, enableTransition, enableTypeahead, matchReferenceWidth, offsetValue, openOnHover, placement, role, selectedIndex, shiftPadding, variant, virtual, }?: UseDropdownOptions) => UseDropdownReturn;

package/dist/utilities/hooks/useIsMobile/useIsMobile.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns whether the layout is currently in its mobile presentation, tracking
+ * the `data-pds-mobile` attribute that `GlobalWrapper` sets on the document
+ * root. Reactive: updates when the breakpoint is crossed.
+ *
+ * Use this to render only the active responsive variant of a component, rather
+ * than mounting both a mobile and a desktop tree and toggling them with CSS —
+ * mounting both duplicates any ids in the slotted content (invalid HTML) and
+ * makes `getElementById`/`htmlFor`/`aria-controls` resolve to the hidden copy.
+ *
+ * SSR-safe: resolves to `false` (desktop) on the server and on the first client
+ * render, then updates after `GlobalWrapper` applies the attribute.
+ *
+ * @returns {boolean} `true` when the mobile presentation is active.
+ */
+export declare const useIsMobile: () => boolean;

package/dist/utilities/hooks/useKeyPress/useKeyPress.d.ts

@@ -20,4 +20,10 @@ export interface UseKeyPressOptions {
      */
     shiftKey?: boolean;
 }
+/**
+ * @deprecated Use `useKeyboardShortcut` instead. `useKeyPress` fires even while
+ * the user is typing in a form field and requires callers to manually disable
+ * shortcuts when an overlay is open; `useKeyboardShortcut` handles both by
+ * default. This hook will be removed before the v2 stable release.
+ */
 export declare const useKeyPress: (targetKey: string, callback?: (event: KeyboardEvent) => void, options?: UseKeyPressOptions) => boolean;

package/dist/utilities/hooks/useKeyboardShortcut/useKeyboardShortcut.d.ts

@@ -0,0 +1,29 @@
+import { HotkeyCallback, Keys, Options } from 'react-hotkeys-hook';
+export type UseKeyboardShortcutOptions = Options;
+/**
+ * Registers a keyboard shortcut, applying the PDS defaults on top of
+ * `react-hotkeys-hook`:
+ *
+ * - **Ignores form fields by default.** Shortcuts do not fire while focus is in
+ *   an `input`, `textarea`, `select`, or `contentEditable` element, so typing a
+ *   shortcut character (e.g. `/`) into a field never hijacks it. Opt in per
+ *   shortcut with `enableOnFormTags` / `enableOnContentEditable` when a shortcut
+ *   genuinely needs to fire inside a field.
+ * - **Overlay-aware.** Shortcuts auto-suppress while any PDS overlay (modal,
+ *   drawer, mobile menu, etc.) is open, so callers never have to thread
+ *   `hasOpenOverlay` through their own `enabled` flag.
+ *
+ * The full `react-hotkeys-hook` option surface (scopes, key sequences,
+ * `description`, cross-platform `mod`, etc.) is available via `options`.
+ *
+ * @param keys - The key or combination to listen for, e.g. `'/'`, `'mod+k'`,
+ *   `'shift+['`. Uses `react-hotkeys-hook` key syntax.
+ * @param callback - Invoked when the shortcut fires. Receives the
+ *   `KeyboardEvent` and the parsed hotkey event.
+ * @param options - `react-hotkeys-hook` options. `enabled` is combined with the
+ *   overlay state so a shortcut is active only when enabled *and* no overlay is
+ *   open.
+ * @param dependencies - Optional dependency array for the callback, forwarded to
+ *   `react-hotkeys-hook`.
+ */
+export declare const useKeyboardShortcut: (keys: Keys, callback: HotkeyCallback, options?: UseKeyboardShortcutOptions, dependencies?: unknown[]) => (instance: HTMLElement) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.8",
+	"version": "2.0.0-alpha.80",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -20,6 +20,9 @@
 		"url": "https://github.com/pantheon-systems/pds-toolkit-react/issues"
 	},
 	"homepage": "https://github.com/pantheon-systems/pds-toolkit-react#readme",
+	"bin": {
+		"pds-codemod": "./bin/pds-codemod.cjs"
+	},
 	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"exports": {
@@ -32,6 +35,10 @@
 		"./*": "./dist/*"
 	},
 	"files": [
+		"bin",
+		"codemods/v1-to-v2/transforms",
+		"codemods/v1-to-v2/mappings.json",
+		"codemods/v1-to-v2/css-token-renames.js",
 		"dist",
 		"tailwind"
 	],
@@ -44,17 +51,17 @@
 		"build:lib": "vite build && npm run build:types",
 		"build:types": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
 		"postbuild:lib": "npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run build:css:packageExtraCss && npm run generate:svg-icons",
-		"build:css": "postcss src/core.css -o dist/css/pds-core.css",
-		"build:css:components": "postcss src/components/index.css -o dist/css/pds-components.css",
-		"build:css:layouts": "postcss src/layouts/index.css -o dist/css/pds-layouts.css",
-		"build:css:packageExtraCss": "node scripts/package-extra-css.js",
+		"build:css": "PDS_CSS_LAYER=pds-v2 postcss src/core.css -o dist/css/pds-core.css",
+		"build:css:components": "PDS_CSS_LAYER=pds-v2 postcss src/components/index.css -o dist/css/pds-components.css",
+		"build:css:layouts": "PDS_CSS_LAYER=pds-v2 postcss src/layouts/index.css -o dist/css/pds-layouts.css",
+		"build:css:packageExtraCss": "PDS_CSS_LAYER=pds-v2 node scripts/package-extra-css.js",
 		"build:css:watch": "npm run build:css -- -w",
 		"prestorybook": "node scripts/filter-exports-by-tags.js && npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run generate:ux-writing-search-index && npm run generate:ux-writing-guide",
-		"storybook": "storybook dev -p 6006",
+		"storybook": "PDS_CSS_LAYER=pds-v2 storybook dev -p 6006",
 		"prebuild": "npm run build:css && npm run build:css:components && npm run build:css:layouts && npm run build:css:packageExtraCss && npm run generate:ux-writing-search-index && npm run generate:ux-writing-guide",
-		"build": "NODE_ENV=production storybook build",
+		"build": "NODE_OPTIONS=--max-old-space-size=4096 NODE_ENV=production storybook build",
 		"build-storybook": "NODE_ENV=production storybook build",
-		"postbuild": "node scripts/copy-mcp-assets.js && node scripts/build-starter-template.js && node scripts/generate-html-docs.js && node scripts/verify-mcp-build.js",
+		"postbuild": "node scripts/generate-html-docs.js && node scripts/build-starter-template.js && node scripts/copy-mcp-assets.js && node scripts/verify-mcp-build.js",
 		"verify:mcp": "node scripts/verify-mcp-build.js",
 		"start": "node index.js",
 		"develop": "npm run storybook",
@@ -88,84 +95,99 @@
 		"generate:ux-writing-search-index": "node scripts/generate-search-index.js",
 		"generate:ux-writing-guide": "node scripts/generate-ux-writing-guide.js",
 		"generate:html-docs": "node scripts/generate-html-docs.js",
+		"test:codemods": "jest --testPathPatterns=codemods/",
 		"test:version-switcher": "bash scripts/test-version-switcher.sh",
 		"pack:local": "bash scripts/pack-local.sh",
 		"prepare": "husky install",
 		"chromatic": "npx chromatic --project-token=chpt_8f57e9785118676"
 	},
+	"jest": {
+		"testMatch": [
+			"**/codemods/**/__tests__/**/*.test.js"
+		],
+		"testEnvironment": "node"
+	},
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.15.3",
-		"@axe-core/playwright": "^4.11.0",
-		"@babel/preset-env": "^7.21.5",
+		"@axe-core/playwright": "^4.11.3",
+		"@babel/preset-env": "^7.29.5",
 		"@babel/preset-react": "^7.18.6",
 		"@babel/preset-typescript": "^7.28.5",
 		"@csstools/postcss-design-tokens": "^2.0.4",
 		"@csstools/postcss-global-data": "^1.0.3",
-		"@playwright/test": "^1.36.2",
-		"@storybook/addon-a11y": "^10.3.0",
-		"@storybook/addon-docs": "^10.3.0",
-		"@storybook/addon-links": "^10.3.0",
-		"@storybook/addon-mcp": "^0.5.0",
-		"@storybook/addon-webpack5-compiler-swc": "^4.0.2",
-		"@storybook/react-vite": "^10.3.0",
-		"@storybook/react-webpack5": "^10.3.0",
-		"@types/prismjs": "^1.26.5",
-		"@types/react": "^19.2.2",
-		"@typescript-eslint/eslint-plugin": "^8.47.0",
-		"@typescript-eslint/parser": "^8.47.0",
-		"@vitejs/plugin-react": "^4.3.0",
+		"@fortawesome/free-brands-svg-icons": "7.2.0",
+		"@fortawesome/pro-regular-svg-icons": "7.2.0",
+		"@fortawesome/pro-solid-svg-icons": "7.2.0",
+		"@playwright/test": "^1.60.0",
+		"@storybook/addon-a11y": "^10.4.0",
+		"@storybook/addon-docs": "^10.4.0",
+		"@storybook/addon-links": "^10.4.0",
+		"@storybook/addon-mcp": "^0.6.0",
+		"@storybook/addon-webpack5-compiler-swc": "^4.0.3",
+		"@storybook/react-vite": "^10.4.0",
+		"@storybook/react-webpack5": "^10.4.0",
+		"@types/prismjs": "^1.26.6",
+		"@types/react": "^19.2.14",
+		"@typescript-eslint/eslint-plugin": "^8.59.3",
+		"@typescript-eslint/parser": "^8.59.3",
+		"@vitejs/plugin-react": "^6.0.2",
 		"@vueless/storybook-dark-mode": "^9.0.9",
 		"axe-html-reporter": "^2.2.3",
 		"chromatic": "^13.3.4",
 		"concurrently": "^8.0.1",
 		"cssnano": "^6.0.1",
-		"eslint": "^9.26.0",
+		"eslint": "^9.39.4",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-import-resolver-typescript": "^4.4.4",
 		"eslint-plugin-import": "^2.32.0",
-		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-prettier": "^5.5.5",
 		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-simple-import-sort": "^12.1.1",
 		"eslint-plugin-sort-destructure-keys": "^2.0.0",
-		"eslint-plugin-storybook": "^10.3.0",
+		"eslint-plugin-storybook": "^10.4.0",
 		"eslint-plugin-typescript-sort-keys": "^3.3.0",
 		"fast-glob": "^3.3.2",
 		"husky": "^8.0.3",
+		"jest": "^30.4.2",
+		"jscodeshift": "^17.3.0",
 		"lint-staged": "^13.2.3",
 		"pino-pretty": "^13.1.3",
 		"plop": "^3.1.2",
-		"postcss": "^8.4.38",
+		"postcss": "^8.5.14",
 		"postcss-cli": "^10.1.0",
 		"postcss-custom-media": "^9.1.3",
 		"postcss-import": "^15.1.0",
 		"postcss-insert": "^1.0.0",
-		"postcss-loader": "^8.1.1",
+		"postcss-loader": "^8.2.1",
 		"postcss-nested": "^6.0.1",
-		"prettier": "3.2.5",
-		"prettier-plugin-css-order": "^2.1.2",
+		"prettier": "^3.8.3",
+		"prettier-plugin-css-order": "^2.2.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.13.0",
-		"storybook": "^10.3.0",
-		"tsc-alias": "^1.8.16",
+		"storybook": "^10.4.0",
+		"tsc-alias": "^1.8.17",
 		"typescript": "^5.4.5",
-		"vite": "^7.2.2",
+		"vite": "^8.0.16",
 		"vite-plugin-lib-inject-css": "^2.1.1",
 		"vite-tsconfig-paths": "^4.3.2"
 	},
 	"peerDependencies": {
-		"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-		"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"dependencies": {
+		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/sortable": "^10.0.0",
+		"@dnd-kit/utilities": "^3.2.2",
 		"@floating-ui/react": "^0.24.3",
 		"@floating-ui/react-dom": "~1.3.0",
-		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.33",
+		"@internationalized/date": "^3.12.2",
+		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.70",
 		"@reactuses/core": "^5.0.15",
 		"date-fns": "^4.1.0",
-		"downshift": "^9.0.8",
-		"express": "^4.22.1",
-		"express-rate-limit": "^8.2.1",
+		"downshift": "^9.3.2",
+		"express": "^5.0.0",
+		"express-rate-limit": "^8.5.2",
 		"focus-trap-react": "^10.2.1",
 		"hash-sum": "^2.0.0",
 		"modern-normalize": "^3.0.1",
@@ -173,16 +195,26 @@
 		"pino-http": "^11.0.0",
 		"prism-react-renderer": "^2.4.1",
 		"prismjs": "^1.29.0",
+		"react-aria": "^3.50.0",
 		"react-code-block": "^1.1.1",
-		"react-day-picker": "^9.11.1",
 		"react-device-detect": "^2.2.3",
 		"react-hotkeys-hook": "^4.5.1",
-		"react-toastify": "^9.0.3"
+		"react-stately": "^3.48.0",
+		"react-toastify": "^11.1.0",
+		"recharts": "^3.8.1"
 	},
-	"optionalDependencies": {
-		"@fortawesome/free-brands-svg-icons": "^7.2.0",
-		"@fortawesome/pro-regular-svg-icons": "^7.2.0",
-		"@fortawesome/pro-solid-svg-icons": "^7.2.0"
+	"overrides": {
+		"@babel/plugin-transform-modules-systemjs": "^7.29.4",
+		"fast-uri": "^3.1.5",
+		"hono": "^4.12.18",
+		"ip-address": "^10.1.1",
+		"micromatch": "^4.0.8",
+		"minimatch": "^10.0.0",
+		"postcss-insert": {
+			"postcss": "^8.4.31"
+		},
+		"valibot": "^1.4.2",
+		"yaml": "^2.8.3"
 	},
 	"lint-staged": {
 		"*": "prettier --write --ignore-unknown",

package/tailwind/README.md

@@ -178,6 +178,15 @@ Keys: `narrow` (1024px), `standard` (1200px), `wide` (1440px), `x-wide` (1600px)
 
 ## Important caveats
 
+### Borders require an explicit border-style
+
+The PDS preset resets `border-style` to `none` on all elements so that borders are fully opt-in. This prevents phantom borders on elements that pick up a non-zero `border-width` from PDS components, inheritance, or browser defaults. When adding borders with Tailwind, always include a border-style class (`border-solid`, `border-dashed`, or `border-dotted`):
+
+```html
+<div class="border border-solid border-border-default">...</div>
+<div class="border-b border-solid border-border-separator">Divider</div>
+```
+
 ### Opacity modifiers are not supported
 
 Tailwind's opacity modifier syntax (`bg-bg-default/50`) does not work with CSS variable color references. This is a known Tailwind limitation — the compiler cannot decompose a CSS variable into RGB channels. Avoid using opacity modifiers with PDS colors.

package/tailwind/v3/preset.cjs

@@ -17,6 +17,8 @@
  *   };
  */
 
+const plugin = require('tailwindcss/plugin');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	corePlugins: {
@@ -24,6 +26,22 @@ module.exports = {
 		// Enabling preflight alongside PDS will cause style conflicts.
 		preflight: false,
 	},
+	plugins: [
+		// Reset border-style to none so borders are fully opt-in.
+		// Without this, any element that picks up a non-zero border-width
+		// (from PDS components, inheritance, or browser defaults) gets a
+		// visible border even without explicit border classes.
+		// Always include border-solid (or border-dashed, etc.) when adding borders.
+		plugin(function ({ addBase }) {
+			addBase({
+				'*, ::before, ::after': {
+					borderWidth: '0',
+					borderStyle: 'none',
+					borderColor: 'var(--pds-color-border-default)',
+				},
+			});
+		}),
+	],
 	theme: {
 		// ─── Colors ──────────────────────────────────────────────────────────────
 		// All values reference PDS CSS custom properties so dark mode and token
@@ -199,11 +217,13 @@ module.exports = {
 
 		// ─── Border ──────────────────────────────────────────────────────────────
 		borderRadius: {
+			none: '0px',
 			DEFAULT: 'var(--pds-border-radius-default)',
 			button: 'var(--pds-border-radius-button)',
 			input: 'var(--pds-border-radius-input)',
 			container: 'var(--pds-border-radius-container)',
 			bar: 'var(--pds-border-radius-bar)',
+			full: '9999px',
 		},
 		borderWidth: {
 			0: '0px',

package/tailwind/v4/theme.css

@@ -18,6 +18,23 @@
  *   import '@pantheon-systems/pds-toolkit-react/css/pds-core.css';
  */
 
+/*
+ * Reset border-style to none so borders are fully opt-in.
+ * Without this, any element that picks up a non-zero border-width
+ * (from PDS components, inheritance, or browser defaults) gets a
+ * visible border even without explicit border classes.
+ * Always include border-solid (or border-dashed, etc.) when adding borders.
+ */
+@layer base {
+	*,
+	::before,
+	::after {
+		border-color: var(--pds-color-border-default);
+		border-style: none;
+		border-width: 0;
+	}
+}
+
 @theme {
 	/* ── Reset Tailwind defaults we are replacing ──────────────────────────── */
 	--color-*: initial;
@@ -186,11 +203,13 @@
 	--tracking-xl: var(--pds-typography-ls-xl);
 
 	/* ── Border ────────────────────────────────────────────────────────────── */
+	--radius-none: 0px;
 	--radius-DEFAULT: var(--pds-border-radius-default);
 	--radius-button: var(--pds-border-radius-button);
 	--radius-input: var(--pds-border-radius-input);
 	--radius-container: var(--pds-border-radius-container);
 	--radius-bar: var(--pds-border-radius-bar);
+	--radius-full: 9999px;
 
 	--border-DEFAULT: var(--pds-border-width-default);
 	--border-thicker: var(--pds-border-width-thicker);

package/dist/components/CTASlice/CTASlice.d.ts

@@ -1,43 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ContainerWidth, HeadingLevel } from '../../libs/types/custom-types';
-import './../buttons/Button/button.css';
-import './cta-slice.css';
-interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Background color of slice
-     */
-    backgroundColor?: 'default' | 'secondary';
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * PDS container width.
-     */
-    containerWidth?: ContainerWidth;
-    /**
-     *  Heading level
-     */
-    headingLevel?: HeadingLevel;
-    /**
-     * Heading text
-     */
-    headingText: string;
-    /**
-     * Further explain block
-     */
-    leadText?: string;
-    /**
-     * Primary link content
-     */
-    primaryLinkContent: ReactNode;
-    /**
-     * Optional secondary link content
-     */
-    secondaryLinkContent?: ReactNode;
-}
-/**
- * CTA Slice UI component
- */
-export declare const CTASlice: ({ backgroundColor, className, containerWidth, headingLevel, headingText, leadText, primaryLinkContent, secondaryLinkContent, ...props }: CTASliceProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/CodeBlock/themes/pdsLight.d.ts

@@ -1,2 +0,0 @@
-import type { PrismTheme } from 'prism-react-renderer';
-export declare const pdsLight: PrismTheme;