@pantheon-systems/pds-toolkit-react 2.0.0-alpha.36 → 2.0.0-alpha.37

package/codemods/v1-to-v2/mappings.json

@@ -6,7 +6,7 @@
 			{
 				"from": "IndicatorBadge",
 				"to": "Badge",
-				"reason": "IndicatorBadge has been renamed to Badge in v2. The component API has also changed \u2014 see props.typeChanges for color and size migration details."
+				"reason": "IndicatorBadge has been renamed to Badge in v2. The component API has also changed — see props.typeChanges for color and size migration details."
 			},
 			{
 				"from": "NavMenu",
@@ -75,6 +75,54 @@
 			{
 				"component": "SiteDashboardHeading",
 				"reason": "Component removed. Compose locally using Icon, Badge, Button, and optionally Popover with SiteTypeIcon from custom-types. See Patterns/Site Dashboard Heading in Storybook for the recipe."
+			},
+			{
+				"component": "Navbar",
+				"prop": "hideLogo",
+				"reason": "Removed in V2. The logo is now passed via the logo slot. Omit the slot to show no logo.",
+				"replacement": "Remove this prop. To hide the logo, simply omit the logo slot."
+			},
+			{
+				"component": "Navbar",
+				"prop": "logoDisplayType",
+				"reason": "Removed in V2. Logo display type is now controlled by the PantheonLogo component's displayType prop, passed directly into the logo slot.",
+				"replacement": "Pass <PantheonLogo displayType='...' slot='logo' /> into the Navbar children."
+			},
+			{
+				"component": "Navbar",
+				"prop": "logoLinkContent",
+				"reason": "Removed in V2. Logo link is now passed via the PantheonLogo component in the logo slot.",
+				"replacement": "Pass <PantheonLogo linkContent={<a href='...'>...</a>} slot='logo' /> into the Navbar children."
+			},
+			{
+				"component": "Navbar",
+				"prop": "logoSrc",
+				"reason": "Removed in V2. Custom logo images should be placed directly in the logo slot.",
+				"replacement": "Place your logo image element directly in the logo slot: <img src='...' slot='logo' />."
+			},
+			{
+				"component": "Navbar",
+				"prop": "logoSubBrand",
+				"reason": "Removed in V2 along with sub-brand logo support.",
+				"replacement": "Remove this prop. Sub-brand display is no longer supported in Navbar."
+			},
+			{
+				"component": "PantheonLogo",
+				"prop": "subBrand",
+				"reason": "Removed in V2. Sub-brand display has been removed from the PantheonLogo component.",
+				"replacement": "Remove this prop. Compose your own sub-brand treatment using a separator and text element alongside PantheonLogo."
+			},
+			{
+				"component": "PantheonLogo",
+				"prop": "displayType",
+				"reason": "The sub-brand and sub-brand-small values have been removed in V2.",
+				"replacement": "Use 'full', 'icon', or 'wordmark' instead. Remove any usage of displayType='sub-brand' or displayType='sub-brand-small'."
+			},
+			{
+				"component": "WorkspaceSelector",
+				"prop": "planTier (on WorkspaceSelectorItem)",
+				"reason": "Removed in V2. Plan tier badges are no longer displayed in the workspace selector trigger button.",
+				"replacement": "Remove the planTier field from WorkspaceSelectorItem objects."
 			}
 		],
 		"additions": [
@@ -87,6 +135,24 @@
 				"component": "PaginationCompact",
 				"description": "New for V2. A space-efficient pagination control combining a page selector dropdown with previous/next buttons. Suited for dense layouts such as table toolbars or sidebars.",
 				"usage": "Use when horizontal space is limited or the total page count is high and users need direct access to any page."
+			},
+			{
+				"component": "Navbar",
+				"prop": "logo slot",
+				"description": "New logo named slot renders the logo in both the desktop bar and the mobile top bar. Replaces the logoLinkContent, logoSrc, logoDisplayType, logoSubBrand, and hideLogo props.",
+				"usage": "Pass <PantheonLogo linkContent={<a href='...'>...</a>} slot='logo' /> as a child of Navbar."
+			},
+			{
+				"component": "Navbar",
+				"prop": "items-center slot",
+				"description": "New items-center named slot renders content in the center of the desktop navbar, truly centered using CSS grid. On mobile, the slot content collapses into the slide-out panel alongside items-left and items-right.",
+				"usage": "Pass content with slot='items-center' to place it in the center of the navbar (e.g. a search input)."
+			},
+			{
+				"component": "PantheonLogo",
+				"prop": "size",
+				"description": "New size prop controls logo scale. The wordmark height is the sizing basis and maps to PDS typography size tokens: s = --pds-typography-size-s, m = --pds-typography-size-m, l = --pds-typography-size-l. The full and icon variants scale proportionally so the fist matches the wordmark height.",
+				"usage": "Use size='s' for compact contexts (e.g. navbar), size='m' for default, size='l' for hero or marketing use."
 			}
 		],
 		"deprecations": [
@@ -153,13 +219,13 @@
 				"component": "GlobalWrapper",
 				"from": "mobileMenuMaxWidth",
 				"to": "mobileMaxWidth",
-				"reason": "Renamed for clarity \u2014 the value is the maximum viewport width at which mobile styles are active. The prop now drives the data-pds-mobile attribute on :root used by component CSS to apply mobile styles, replacing the ResponsiveContext isMobile pattern. The default value has changed from 640 to 767 to align exactly with --pds-bp-s-only (max-width: 767px)."
+				"reason": "Renamed for clarity — the value is the maximum viewport width at which mobile styles are active. The prop now drives the data-pds-mobile attribute on :root used by component CSS to apply mobile styles, replacing the ResponsiveContext isMobile pattern. The default value has changed from 640 to 767 to align exactly with --pds-bp-s-only (max-width: 767px)."
 			},
 			{
 				"component": "ComboboxMultiselect",
 				"from": "auxiliaryPanel",
 				"to": "aiSuggestions",
-				"reason": "Renamed for clarity \u2014 the auxiliary panel is specifically for AI suggestions. General-purpose floating panels can now be built with the Dropdown compound component."
+				"reason": "Renamed for clarity — the auxiliary panel is specifically for AI suggestions. General-purpose floating panels can now be built with the Dropdown compound component."
 			},
 			{
 				"component": "Button",
@@ -183,7 +249,7 @@
 				"component": "PlatformIcon",
 				"from": "iconSize",
 				"to": "size",
-				"reason": "The iconSize prop has been renamed to size for consistency with V2 component conventions. Size values have also changed to align with the Icon component scale \u2014 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl' \u2014 replacing the previous 1.2\u00d7 ratio scale. The pixel sizes for 'l', 'xl', and '2xl' are different: l is now 1.25rem (was 1.2rem), xl is 1.5rem (was 1.44rem), 2xl is 2rem (was 1.728rem)."
+				"reason": "The iconSize prop has been renamed to size for consistency with V2 component conventions. Size values have also changed to align with the Icon component scale — 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl' — replacing the previous 1.2× ratio scale. The pixel sizes for 'l', 'xl', and '2xl' are different: l is now 1.25rem (was 1.2rem), xl is 1.5rem (was 1.44rem), 2xl is 2rem (was 1.728rem)."
 			},
 			{
 				"component": "FileDiff",
@@ -396,11 +462,47 @@
 			{
 				"component": "SideNav",
 				"prop": "hasMobileDropdown",
-				"description": "New hasMobileDropdown prop opts in to rendering a dropdown menu in place of the standard navigation at mobile viewports. Defaults to false \u2014 the standard navigation is shown at all breakpoints.",
+				"description": "New hasMobileDropdown prop opts in to rendering a dropdown menu in place of the standard navigation at mobile viewports. Defaults to false — the standard navigation is shown at all breakpoints.",
 				"usage": "Use hasMobileDropdown={true} if your layout requires a dropdown menu at mobile. The mobile breakpoint is controlled by the mobileBreakpoint prop on GlobalWrapper."
 			}
 		],
 		"removals": [
+			{
+				"component": "Spinner",
+				"prop": "colorType",
+				"replacement": "Replace with the `color` prop — pass any CSS color string or `var(--token)` reference. Use `'var(--pds-color-foreground-reverse)'` in place of `'monochromatic-reverse'`, and omit the prop entirely in place of `'monochromatic'` or `'full-color'` (the default is now foreground default).",
+				"reason": "The colorType prop ('full-color' | 'monochromatic' | 'monochromatic-reverse') has been removed in v2. The spinner now accepts a single `color` prop; the track ring renders at 30% opacity of the same color automatically. The default color is now the foreground default token."
+			},
+			{
+				"component": "CodeBlock",
+				"prop": "colorType",
+				"replacement": "Remove the prop. CodeBlock now renders in a single unified style.",
+				"reason": "The colorType prop ('dark' | 'light') has been removed in v2. CodeBlock now renders in one consistent style that works across both page themes."
+			},
+			{
+				"component": "Tabs",
+				"prop": "size",
+				"replacement": "Remove the prop. Tabs now render at a single size equivalent to the former size='m'.",
+				"reason": "The size prop has been removed in v2. The component now renders at one size only. Remove any size='s' or size='m' usage."
+			},
+			{
+				"component": "TabMenu",
+				"prop": "size",
+				"replacement": "Remove the prop. TabMenu now renders at a single size equivalent to the former size='m'.",
+				"reason": "The size prop has been removed in v2. The component now renders at one size only. Remove any size='s' or size='m' usage."
+			},
+			{
+				"component": "SegmentedButton",
+				"prop": "size",
+				"replacement": "Remove the prop. SegmentedButton now renders at a single size equivalent to the former size='s'.",
+				"reason": "The size prop and the medium size have been removed in v2. The component now renders at one size only. Remove any size='s' or size='m' usage. A smaller size may be reintroduced later if a need arises."
+			},
+			{
+				"component": "ButtonNav",
+				"prop": "size",
+				"replacement": "Remove the prop. ButtonNav now renders at a single size equivalent to the former size='s'.",
+				"reason": "The size prop and the medium size have been removed in v2. The component now renders at one size only. Remove any size='s' or size='m' usage. A smaller size may be reintroduced later if a need arises."
+			},
 			{
 				"component": "SiteSearch",
 				"prop": "horizontalOffset",
@@ -430,7 +532,7 @@
 				"prop": "variant",
 				"oldValue": "navbar",
 				"replacement": "Use variant=\"subtle\"",
-				"reason": "The navbar variant has been removed in v2. It was visually identical to subtle \u2014 replace with subtle."
+				"reason": "The navbar variant has been removed in v2. It was visually identical to subtle — replace with subtle."
 			},
 			{
 				"component": "MenuButton",
@@ -498,7 +600,7 @@
 			{
 				"component": "Switch",
 				"prop": "statusLabelPlacement",
-				"replacement": "Remove the prop. No replacement \u2014 the status label is no longer rendered visually.",
+				"replacement": "Remove the prop. No replacement — the status label is no longer rendered visually.",
 				"reason": "The visual status label has been removed in V2, making its placement prop obsolete."
 			},
 			{
@@ -516,7 +618,7 @@
 			{
 				"component": "MenuButton",
 				"prop": "withinNavbar",
-				"reason": "Removed in V2. The dropdown no longer adjusts its border radius based on navbar context \u2014 it floats normally regardless of placement.",
+				"reason": "Removed in V2. The dropdown no longer adjusts its border radius based on navbar context — it floats normally regardless of placement.",
 				"migration": "Remove the withinNavbar prop. No replacement needed."
 			},
 			{
@@ -634,9 +736,9 @@
 				"v1Type": "FlowStep[]",
 				"v2Type": "StepListItem[]",
 				"migration": {
-					"note": "Update any FlowStep type imports to StepListItem. The shape of the type is unchanged \u2014 { header: string | ReactNode, content?: string | ReactNode }."
+					"note": "Update any FlowStep type imports to StepListItem. The shape of the type is unchanged — { header: string | ReactNode, content?: string | ReactNode }."
 				},
-				"reason": "Renamed alongside the FlowSteps \u2192 StepList component rename for naming consistency."
+				"reason": "Renamed alongside the FlowSteps → StepList component rename for naming consistency."
 			},
 			{
 				"component": "CloseButton",
@@ -645,7 +747,7 @@
 				"v1Type": "() => void",
 				"v2Type": "(e: React.MouseEvent<HTMLButtonElement>) => void",
 				"migration": {
-					"note": "Backwards compatible \u2014 existing handlers that ignore the event parameter continue to work. Update handlers if you need access to the event."
+					"note": "Backwards compatible — existing handlers that ignore the event parameter continue to work. Update handlers if you need access to the event."
 				},
 				"reason": "Updated to allow consumers to call e.stopPropagation() or access other event properties when needed."
 			},
@@ -851,7 +953,7 @@
 					"md": "m",
 					"lg": "l"
 				},
-				"reason": "Standardized size naming. The '4xs' and '3xs' sizes have been removed \u2014 use '2xs' instead. Default changed from 'md' to 'm'."
+				"reason": "Standardized size naming. The '4xs' and '3xs' sizes have been removed — use '2xs' instead. Default changed from 'md' to 'm'."
 			},
 			{
 				"component": "StatusChecker",
@@ -872,7 +974,7 @@
 				"oldType": "'color-1' | 'color-2' | ... | 'color-20'",
 				"newType": "'apollo' | 'iris' | 'hypnos' | 'gaia' | 'aether' | 'success' | 'warning' | 'critical' | 'info' | 'discovery' | 'amber' | 'orange' | 'lime' | 'teal' | 'sky' | 'indigo' | 'rose' | 'slate' | 'sand' | 'mint' | 'silver' | 'stone'",
 				"description": "Tag color values are now named instead of numbered. Two new colors added: silver and stone.",
-				"migration": "Replace numbered color values with their named equivalents: color-1\u2192apollo, color-2\u2192iris, color-3\u2192hypnos, color-4\u2192gaia, color-5\u2192aether, color-6\u2192success, color-7\u2192warning, color-8\u2192critical, color-9\u2192info, color-10\u2192discovery, color-11\u2192amber, color-12\u2192orange, color-13\u2192lime, color-14\u2192teal, color-15\u2192sky, color-16\u2192indigo, color-17\u2192rose, color-18\u2192slate, color-19\u2192sand, color-20\u2192mint. Two new values (silver, stone) have no v1 equivalent."
+				"migration": "Replace numbered color values with their named equivalents: color-1→apollo, color-2→iris, color-3→hypnos, color-4→gaia, color-5→aether, color-6→success, color-7→warning, color-8→critical, color-9→info, color-10→discovery, color-11→amber, color-12→orange, color-13→lime, color-14→teal, color-15→sky, color-16→indigo, color-17→rose, color-18→slate, color-19→sand, color-20→mint. Two new values (silver, stone) have no v1 equivalent."
 			},
 			{
 				"component": "SidebarLayout",
@@ -880,7 +982,7 @@
 				"v1Type": "'narrow' | 'standard' | 'wide'",
 				"v2Type": "string",
 				"description": "sidebarWidth is now a percentage string instead of a preset option.",
-				"migration": "Replace preset values with percentage equivalents: 'narrow' \u2192 '25%', 'standard' \u2192 '33%', 'wide' \u2192 '42%'. Adjust as needed for your layout."
+				"migration": "Replace preset values with percentage equivalents: 'narrow' → '25%', 'standard' → '33%', 'wide' → '42%'. Adjust as needed for your layout."
 			},
 			{
 				"component": "Table",
@@ -917,7 +1019,7 @@
 				"v1Type": "'s' | 'm'",
 				"v2Type": "'xs' | 's' | 'm'",
 				"migration": {
-					"note": "Backwards compatible \u2014 existing size values are unchanged. Use size=\"xs\" when a smaller CTA link is needed."
+					"note": "Backwards compatible — existing size values are unchanged. Use size=\"xs\" when a smaller CTA link is needed."
 				},
 				"reason": "Added to support compact contexts such as the Payment Card pattern footer."
 			},
@@ -1102,7 +1204,7 @@
 		},
 		{
 			"component": "Panel",
-			"description": "Panel simplified \u2014 status indicators removed",
+			"description": "Panel simplified — status indicators removed",
 			"v1Behavior": "Panel supported hasStatusIndicator, statusType, and typeLabels props which rendered a colored bar on the left side of the panel.",
 			"v2Behavior": "Panel is now a general-purpose container with five variants: default, sunken, raised, overlay, and critical. Status indicators have been removed.",
 			"migration": "Remove hasStatusIndicator, statusType, and typeLabels props. Remove any custom CSS targeting .pds-panel__status elements.",
@@ -1125,7 +1227,7 @@
 			"description": "Previous and next arrow buttons now hidden when at boundaries instead of disabled",
 			"v1Behavior": "Previous button rendered with aria-disabled and reduced opacity when on the first page. Next button rendered with aria-disabled and reduced opacity when on the last page.",
 			"v2Behavior": "Previous button is not rendered when on the first page. Next button is not rendered when on the last page.",
-			"migration": "No prop changes required. Remove any custom CSS targeting .pds-pagination__item--disabled \u2014 that class no longer exists.",
+			"migration": "No prop changes required. Remove any custom CSS targeting .pds-pagination__item--disabled — that class no longer exists.",
 			"affectedAreas": [
 				"Pagination component",
 				"Visual design",
@@ -1149,7 +1251,7 @@
 			"description": "Dropdown positioning may shift slightly from V1. The menu is no longer in the DOM when closed.",
 			"v1Behavior": "MenuButton used manual keyboard handling, aria-activedescendant focus management, and a custom click-outside handler. The menu element was always present in the DOM with visibility toggled via inline styles.",
 			"v2Behavior": "MenuButton now uses the shared useDropdown hook with roving tabIndex focus management (useListNavigation), built-in typeahead (useTypeahead), and automatic dismiss handling (useDismiss). The menu unmounts from the DOM when closed.",
-			"migration": "No prop changes required. If you relied on aria-activedescendant for screen readers, test with the updated component \u2014 it now uses a roving tabIndex pattern.",
+			"migration": "No prop changes required. If you relied on aria-activedescendant for screen readers, test with the updated component — it now uses a roving tabIndex pattern.",
 			"affectedAreas": [
 				"MenuButton component",
 				"Keyboard navigation",
@@ -1208,7 +1310,7 @@
 		},
 		{
 			"component": "CompactEmptyState",
-			"description": "V2 style update \u2014 typography tokens and color token correction",
+			"description": "V2 style update — typography tokens and color token correction",
 			"v1Behavior": "Heading font size and weight applied via pds-ts-l and pds-fw-bold utility classes on the element. Message color used the deprecated pds-color-text-default-secondary token.",
 			"v2Behavior": "Heading font size and weight defined in component CSS using pds-typography-size-l and pds-typography-fw-bold tokens. Message color uses the correct pds-color-fg-default-secondary token.",
 			"migration": "No prop changes. Visual appearance is the same. Remove any overrides targeting pds-color-text-default-secondary on this component.",
@@ -1220,7 +1322,7 @@
 		},
 		{
 			"component": "VerticalEmptyState",
-			"description": "V2 style update \u2014 typography tokens and color token correction",
+			"description": "V2 style update — typography tokens and color token correction",
 			"v1Behavior": "Heading font size and weight applied via pds-ts-2xl and pds-fw-bold utility classes on the element. Root color used the deprecated pds-color-text-default token.",
 			"v2Behavior": "Heading font size and weight defined in component CSS using pds-typography-size-2xl and pds-typography-fw-bold tokens. Root color uses the correct pds-color-fg-default token.",
 			"migration": "No prop changes. Visual appearance is the same. Remove any overrides targeting pds-color-text-default on this component.",

package/dist/components/Callout/Callout.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { StatusType } from '../../libs/types/custom-types';
+import { HeadingLevelCommon, StatusType } from '../../libs/types/custom-types';
 import './callout.css';
 type CalloutType = StatusType | 'code' | 'earlyAccess';
 type TypeLabels = Record<CalloutType, string>;
@@ -12,6 +12,10 @@ export interface CalloutProps extends ComponentPropsWithoutRef<'div'> {
      * Additional class names
      */
     className?: string;
+    /**
+     * Semantic element for the title. Styles are identical regardless of element chosen.
+     */
+    headingLevel?: HeadingLevelCommon;
     /**
      * Callout title.
      */
@@ -28,5 +32,5 @@ export interface CalloutProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Callout UI component
  */
-export declare const Callout: ({ children, className, title, type, typeLabels, ...props }: CalloutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Callout: ({ children, className, headingLevel, title, type, typeLabels, ...props }: CalloutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,13 @@
 import { ComponentPropsWithoutRef } from 'react';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-yaml';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-diff';
 import './code-block.css';
@@ -16,10 +25,6 @@ export interface CodeBlockProps extends ComponentPropsWithoutRef<'div'> {
      * Code to display.
      */
     code: string;
-    /**
-     * Color type. Default is dark.
-     */
-    colorType?: 'dark' | 'light';
     /**
      * Copy button label. Aria-label and tooltip text for the copy button.
      */
@@ -81,5 +86,5 @@ export interface CodeBlockProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * CodeBlock UI component
  */
-export declare const CodeBlock: ({ className, code, colorType, copyButtonLabel, hasCopyButton, hasLineNumbers, hasPrompt, height, isLoading, language, loadingLineCount, maxHeight, promptSymbol, renderAsLegacy, shouldWrap, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: ({ className, code, copyButtonLabel, hasCopyButton, hasLineNumbers, hasPrompt, height, isLoading, language, loadingLineCount, maxHeight, promptSymbol, renderAsLegacy, shouldWrap, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CodeBlock/code-examples.d.ts

@@ -3,4 +3,5 @@ export declare const reactExample = "export const ControlledExample = () => {\n
 export declare const cssExample = ".pds-file-diff {\n  align-items: center;\n  display: flex;\n  gap: 0.25rem;\n  height: 1.0625rem;\n  max-width: 100%;\n  width: 100%;\n\n  .pds-file-diff__total-changes {\n    color: var(--pds-color-foreground-default-secondary);\n    font-size: var(--pds-typography-size-xs);\n  }\n\n  .pds-file-diff__bars {\n    align-items: center;\n    display: flex;\n    gap: 0.125rem;\n    width: 100%;\n  }\n\n  .pds-file-diff__behind {\n    position: relative;\n\n    .pds-file-diff__behind-bar {\n      background-color: var(--pds-color-status-critical-utility);\n      border-bottom-left-radius: 6.25rem;\n      border-top-left-radius: 6.25rem;\n      height: 8px;\n      min-width: 1px;\n      right: 0px;\n      transition: width 0.3s ease;\n      width: 100%;\n    }\n  }\n\n  .pds-file-diff__ahead {\n    position: relative;\n\n    .pds-file-diff__ahead-bar {\n      background-color: var(--pds-color-status-success-utility);\n      border-bottom-right-radius: 6.25rem;\n      border-top-right-radius: 6.25rem;\n      height: 8px;\n      left: 0px;\n      min-width: 1px;\n      transition: width 0.3s ease;\n      width: 100%;\n    }\n  }\n\n  .pds-file-diff__tooltip {\n    display: block;\n    padding-inline: 0;\n  }\n}\n";
 export declare const diffExample = "diff --git a/influitive/index.css b/influitive/index.css\nindex 2069af6..b347ca3 100644\n--- a/influitive/index.css\n+++ b/influitive/index.css\n@@ -1,4 +1,4 @@\n #nav-container ul li.c-nav-list-item a.c-nav-item {\n   font-weight: 500 !important;\n-  font-family: 'Poppins', san-serif !important;\n+  font-family: 'Poppins', sans-serif !important;\n }";
 export declare const twigExample = "<div class=\"pds-status-badge pds-status-badge--{{ color|default('transparent')}}{% if extra_classes %} {{ extra_classes }}{% endif %}\">\n\n  {% if has_status_indicator %}\n    <span class=\"pds-status-badge__status pds-status-badge__status--{{ status_type }}\">\n      {% if status_type %}\n        <span class=\"visually-hidden\">Status: {{ status_type }}</span>\n      {% endif %}\n    </span>\n  {% endif %}\n\n  <span class=\"pds-status-badge__label\">{{ label }}</span>\n</div>";
+export declare const jsonExample = "{\n  \"site\": {\n    \"id\": \"26d20ebf-b2fb-466e-9db3-4c001db441d6\",\n    \"name\": \"my-awesome-site\",\n    \"framework\": \"wordpress\",\n    \"region\": \"United States\",\n    \"created_at\": \"2024-01-15T08:30:00+00:00\",\n    \"php_version\": \"8.3\",\n    \"upstream\": {\n      \"id\": \"e8fe8550-1ab9-4964-8838-2b9abdccf4bf\",\n      \"label\": \"WordPress\",\n      \"type\": \"core\"\n    },\n    \"environments\": [\"dev\", \"test\", \"live\"],\n    \"frozen\": false,\n    \"max_num_cdes\": 10\n  }\n}";
 export declare const legacyExample = "Composer version 2.8.6 2025-02-25 13:03:50<br>PHP version 8.3.21 (&#47;opt&#47;pantheon&#47;php8.3&#47;php)<br>Run the &quot;diagnose&quot; command to get more detailed diagnostics output.<br>Cache directory does not exist (cache-vcs-dir):<br>Cache directory does not exist (cache-repo-dir):<br>Cache directory does not exist (cache-files-dir):<br>Clearing cache (cache-dir): &#47;home&#47;pantheon-app&#47;.composer&#47;cache<br>All caches cleared.<br>Running composer install...<br>composer --no-interaction --no-progress --prefer-dist --ansi install<br><span class=\"term-fg32\">No patches supplied.</span><br><span class=\"term-fg32\">Installing dependencies from lock file (including require-dev)</span><br><span class=\"term-fg32\">Verifying lock file contents can be installed on current platform.</span><br>Nothing to install, update or remove<br><span class=\"term-fg32\">Generating autoload files</span><br><span class=\"term-fg32\">89 packages you are using are looking for funding.</span><br><span class=\"term-fg32\">Use the `composer fund` command to find out more!</span><br><span class=\"term-fg32\">phpstan&#47;extension-installer:</span> Extensions installed";

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

@@ -1,2 +1 @@
-export * from './pdsDark';
-export * from './pdsLight';
+export * from './pds';

package/dist/components/CodeBlock/themes/{pdsDark.d.ts → pds.d.ts}

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

package/dist/components/PantheonLogo/PantheonLogo.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './pantheon-logo.css';
-export type PantheonLogoDisplayType = 'full' | 'icon' | 'wordmark' | 'sub-brand' | 'sub-brand-small';
+export type PantheonLogoDisplayType = 'full' | 'icon' | 'wordmark';
+export type PantheonLogoSize = 's' | 'm' | 'l';
 /**
  * Prop types for PantheonLogo
  */
@@ -22,11 +23,11 @@ export interface PantheonLogoProps extends ComponentPropsWithoutRef<'div'> {
      */
     linkContent?: ReactNode;
     /**
-     * Accepts a fully-formed link or a string (if a static site name is desired). Will only render if the `display-type` is set to 'sub-brand'.
+     * Size of the logo. The wordmark height is the basis — `s`, `m`, and `l` map to the corresponding typography size tokens.
      */
-    subBrand?: ReactNode | string;
+    size?: PantheonLogoSize;
 }
 /**
  * PantheonLogo UI component
  */
-export declare const PantheonLogo: ({ className, colorType, displayType, linkContent, subBrand, ...props }: PantheonLogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PantheonLogo: ({ className, colorType, displayType, linkContent, size, ...props }: PantheonLogoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/Tabs.d.ts

@@ -30,7 +30,6 @@ interface Tabs {
         type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
     };
 }
-export type TabsSize = 's' | 'm';
 interface TabsProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Sets tabset aria label
@@ -52,10 +51,6 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
      * Sets currently selected tab using a zero-based index
      */
     selectedTab?: number;
-    /**
-     * Size of the tabs.
-     */
-    size?: TabsSize;
     /**
      * Array of objects for tab data
      */
@@ -64,5 +59,5 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tabs UI component
  */
-export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, size, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -27,8 +27,9 @@ export interface StatusBadgeProps extends ComponentPropsWithoutRef<'div'> {
     statusIndicatorText?: string;
     /**
      * Status type for badge. Only renders if `hasStatusIndicator` is true.
+     * Use `'working'` to show a spinner in place of the status dot.
      */
-    statusType?: StatusType | 'frozen' | 'disabled';
+    statusType?: StatusType | 'frozen' | 'disabled' | 'working';
 }
 /**
  * StatusBadge UI component

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

@@ -76,7 +76,7 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
     /**
      * Which variant of button to render. Not available in `iconOnly` mode.
      */
-    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle' | 'highlight'>;
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle'>;
 }
 /**
  * MenuButton UI component

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

@@ -4,14 +4,36 @@ import './segmented-button.css';
  * Structure for each option in the SegmentedButton component.
  */
 interface OptionType {
+    /**
+     * Disables this individual option.
+     */
     disabled?: boolean;
+    /**
+     * Optional icon rendered before the label.
+     */
     iconName?: PDSIcon;
+    /**
+     * Optional unique ID for the option. Falls back to a generated ID.
+     */
     id?: string;
+    /**
+     * Shows a spinner before the label to indicate the option is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Visible text for the option.
+     */
     label: string;
+    /**
+     * Optional tally badge rendered after the label.
+     */
     tally?: {
         label: string | number;
         type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
     };
+    /**
+     * Value submitted when this option is selected.
+     */
     value: string;
 }
 /**
@@ -43,14 +65,10 @@ export interface SegmentedButtonProps {
      */
     onChange?: (value: string) => void;
     /**
-     * Array of button options — must be between 2 and 6 options. Each option
-     * may include an optional icon displayed before the label.
+     * Array of button options — must be between 2 and 6 options. Each option may
+     * include an optional icon or spinner before the label and a tally after it.
      */
     options: OptionType[];
-    /**
-     * Size of the SegmentedButton.
-     */
-    size?: 's' | 'm';
     /**
      * Controlled value. Cannot be used together with `defaultValue`.
      */
@@ -59,5 +77,5 @@ export interface SegmentedButtonProps {
 /**
  * SegmentedButton UI component
  */
-export declare const SegmentedButton: ({ className, defaultValue, disabled, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedButton: ({ className, defaultValue, disabled, id, label, onChange, options, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -33,7 +33,7 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
     /**
      * Which variant of button to render
      */
-    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'highlight'>;
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary'>;
 }
 /**
  * A component used to render a button with a primary action and a menu of additional options

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-07-02T02:04:49.319Z
+ * Generated: 2026-07-07T18:05:00.112Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };
@@ -1436,6 +1436,13 @@ export declare const iconData: {
         readonly svgPathData: "M320 192a64 64 0 1 0 0-128 64 64 0 1 0 0 128zm0-176a112 112 0 1 1 0 224 112 112 0 1 1 0-224zM296 336c-57.4 0-104 46.6-104 104l0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16c0-83.9 68.1-152 152-152l48 0c83.9 0 152 68.1 152 152l0 16c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-16c0-57.4-46.6-104-104-104l-48 0zm135.4-93.2c11.7-11.3 21.6-24.4 29.4-38.8 5.9 2.6 12.4 4 19.2 4 26.5 0 48-21.5 48-48s-21.5-48-48-48l-.8 0c-1.6-16.6-5.8-32.4-12.1-47.1 4.2-.6 8.6-.9 12.9-.9 53 0 96 43 96 96s-43 96-96 96c-17.7 0-34.3-4.8-48.6-13.2zM160 64c4.4 0 8.7 .3 12.9 .9-6.3 14.7-10.5 30.6-12.1 47.1l-.8 0c-26.5 0-48 21.5-48 48s21.5 48 48 48c6.8 0 13.3-1.4 19.2-4 7.8 14.4 17.7 27.5 29.4 38.8-14.2 8.4-30.8 13.2-48.6 13.2-53 0-96-43-96-96s43-96 96-96zM149.3 304c-15.1 16.3-27.5 35-36.5 55.6-38 15.5-64.8 52.8-64.8 96.4 0 13.3-10.7 24-24 24S0 469.3 0 456c0-83.1 66.6-150.6 149.3-152zm377.9 55.6c-9-20.6-21.5-39.4-36.5-55.6 82.7 1.4 149.3 68.9 149.3 152 0 13.3-10.7 24-24 24s-24-10.7-24-24c0-43.6-26.8-80.9-64.8-96.4z";
         readonly width: 640;
     };
+    readonly userSolid: {
+        readonly aliases: readonly [];
+        readonly categories: readonly ["users"];
+        readonly height: 512;
+        readonly svgPathData: "M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l356.6 0c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3l-59.4 0z";
+        readonly width: 448;
+    };
     readonly video: {
         readonly aliases: readonly ["camera", "recording", "webcam"];
         readonly categories: readonly ["media"];
@@ -1507,7 +1514,7 @@ export declare const iconData: {
         readonly width: 576;
     };
 };
-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 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", "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/inputs/Combobox/Combobox.d.ts

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ValidationStatus } from '../../../libs/types/input-types';
 import './combobox.css';
-export type ComboboxSize = 's' | 'm' | 'l';
+export type ComboboxSize = 's' | 'm';
 type LabelStrings = {
     clearButton?: string;
     inputInstructions?: string;

package/dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './combobox-multiselect.css';
-export type ComboboxMultiselectSize = 's' | 'm' | 'l';
+export type ComboboxMultiselectSize = 's' | 'm';
 type LabelStrings = {
     aiBadgeLabel?: string;
     aiPanelButton?: string;

package/dist/components/inputs/Select/Select.d.ts

@@ -3,7 +3,7 @@ import { ValidationStatus } from '../../../libs/types/input-types';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './select.css';
 export type SelectIconType = PDSIcon | 'google' | 'microsoft';
-export type SelectSize = 's' | 'm' | 'l';
+export type SelectSize = 's' | 'm';
 type LabelStrings = {
     selectOptionText: string;
     triggerButton: string;

package/dist/components/inputs/TagsInput/TagsInput.d.ts

@@ -15,7 +15,7 @@ export type TagType = {
     id: string;
     value: string;
 };
-export type TagsInputSize = 's' | 'm' | 'l';
+export type TagsInputSize = 's' | 'm';
 type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
 /**
  * Prop types for TagsInput

package/dist/components/inputs/TextInput/TextInput.d.ts

@@ -110,7 +110,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Input size.
      */
-    size?: 's' | 'm' | 'l';
+    size?: 's' | 'm';
     /**
      * Optional tooltip text to display additional information.
      */