From b89a6f1acb7939cfbf3680002993f1ede6ba6eef Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Wed, 12 Aug 2026 10:19:55 -0500
Subject: [PATCH 1/4] Migrate navigation roots to mergeProps

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 84a0d8ca-13d3-4cb2-ab24-18fa2d9a8a14
---
 ...underline-panels-controlled-panel-props.md |   5 +
 packages/react/src/ActionBar/ActionBar.tsx    | 104 +++++-----
 .../react/src/Breadcrumbs/Breadcrumbs.tsx     |  13 +-
 packages/react/src/NavList/NavList.tsx        |  81 +++++---
 packages/react/src/PageHeader/PageHeader.tsx  | 183 ++++++++++++------
 packages/react/src/Pagehead/Pagehead.tsx      |  13 +-
 packages/react/src/SideNav.tsx                |  11 +-
 .../src/SplitPageLayout/SplitPageLayout.tsx   | 114 ++++++++---
 packages/react/src/SubNav/SubNav.tsx          |  29 ++-
 packages/react/src/TabNav/TabNav.tsx          |  29 ++-
 .../deprecated/UnderlineNav/UnderlineNav.tsx  |  19 +-
 .../UnderlinePanels/UnderlinePanels.tsx       |  37 +++-
 .../UnderlinePanels.types.test.tsx            |  19 ++
 .../components/UnderlineTabbedInterface.tsx   |   8 +-
 14 files changed, 473 insertions(+), 192 deletions(-)
 create mode 100644 .changeset/underline-panels-controlled-panel-props.md
 create mode 100644 packages/react/src/experimental/UnderlinePanels/UnderlinePanels.types.test.tsx

diff --git a/.changeset/underline-panels-controlled-panel-props.md b/.changeset/underline-panels-controlled-panel-props.md
new file mode 100644
index 00000000000..c52f1dceee0
--- /dev/null
+++ b/.changeset/underline-panels-controlled-panel-props.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+UnderlinePanels: Remove unsupported panel attributes that are controlled by the component.
diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 4e5324b65fd..4ba42585c0b 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -13,6 +13,7 @@ import {useMergedRefs} from '../hooks'
 import {createDescendantRegistry} from '../utils/descendant-registry'
 import {OverflowObserverProvider} from '../internal/components/OverflowObserverProvider'
 import {useIsClipped} from '../internal/hooks/useOverflowObserver'
+import {mergeProps} from '../utils/mergeProps'
 
 type ChildProps =
   | {
@@ -332,12 +333,11 @@ function useActionBarItem(ref: React.RefObject<HTMLElement | null>, registryProp
 }
 
 export const ActionBarIconButton = forwardRef(
-  ({disabled, onClick, ...props}: ActionBarIconButtonProps, forwardedRef) => {
+  ({disabled, onClick, className, ...props}: ActionBarIconButtonProps, forwardedRef) => {
     const ref = useRef<HTMLButtonElement>(null)
     const mergedRef = useMergedRefs(forwardedRef, ref)
 
     const {size} = React.useContext(ActionBarContext)
-
     const {['aria-label']: ariaLabel, icon} = props
 
     const {dataOverflowingAttr} = useActionBarItem(
@@ -364,11 +364,16 @@ export const ActionBarIconButton = forwardRef(
 
     return (
       <IconButton
-        aria-disabled={disabled}
         ref={mergedRef}
-        size={size}
-        onClick={clickHandler}
-        {...props}
+        {...mergeProps(
+          {
+            'aria-disabled': disabled,
+            className: clsx(className),
+            size,
+            onClick: clickHandler,
+          },
+          props,
+        )}
         variant="invisible"
         data-overflowing={dataOverflowingAttr}
       />
@@ -376,50 +381,57 @@ export const ActionBarIconButton = forwardRef(
   },
 )
 
-export const ActionBarButton = forwardRef(({disabled, onClick, ...props}: ActionBarButtonProps, forwardedRef) => {
-  const ref = useRef<HTMLButtonElement>(null)
-  const mergedRef = useMergedRefs(forwardedRef, ref)
-
-  const {size} = React.useContext(ActionBarContext)
+export const ActionBarButton = forwardRef(
+  ({disabled, onClick, className, children, leadingVisual, ...props}: ActionBarButtonProps, forwardedRef) => {
+    const ref = useRef<HTMLButtonElement>(null)
+    const mergedRef = useMergedRefs(forwardedRef, ref)
 
-  const {children, leadingVisual} = props
+    const {size} = React.useContext(ActionBarContext)
 
-  const {dataOverflowingAttr} = useActionBarItem(
-    ref,
-    useMemo(
-      (): ChildProps => ({
-        type: 'action',
-        label: children,
-        // Only forward the leading visual to the overflow menu when it is a component
-        // that can be rendered as an icon (e.g. an octicon), matching ActionBar.IconButton.
-        icon: typeof leadingVisual === 'function' ? (leadingVisual as ActionBarIconButtonProps['icon']) : undefined,
-        disabled: !!disabled,
-        onClick: onClick as MouseEventHandler,
-      }),
-      [children, leadingVisual, disabled, onClick],
-    ),
-  )
+    const {dataOverflowingAttr} = useActionBarItem(
+      ref,
+      useMemo(
+        (): ChildProps => ({
+          type: 'action',
+          label: children,
+          // Only forward the leading visual to the overflow menu when it is a component
+          // that can be rendered as an icon (e.g. an octicon), matching ActionBar.IconButton.
+          icon: typeof leadingVisual === 'function' ? (leadingVisual as ActionBarIconButtonProps['icon']) : undefined,
+          disabled: !!disabled,
+          onClick: onClick as MouseEventHandler,
+        }),
+        [children, leadingVisual, disabled, onClick],
+      ),
+    )
 
-  const clickHandler = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (disabled) return
-      onClick?.(event)
-    },
-    [disabled, onClick],
-  )
+    const clickHandler = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (disabled) return
+        onClick?.(event)
+      },
+      [disabled, onClick],
+    )
 
-  return (
-    <Button
-      aria-disabled={disabled}
-      ref={mergedRef}
-      size={size}
-      onClick={clickHandler}
-      {...props}
-      variant="invisible"
-      data-overflowing={dataOverflowingAttr}
-    />
-  )
-})
+    return (
+      <Button
+        ref={mergedRef}
+        {...mergeProps(
+          {
+            'aria-disabled': disabled,
+            className: clsx(className),
+            children,
+            leadingVisual,
+            size,
+            onClick: clickHandler,
+          },
+          props,
+        )}
+        variant="invisible"
+        data-overflowing={dataOverflowingAttr}
+      />
+    )
+  },
+)
 
 const ActionBarGroupContext = React.createContext<{
   isOverflowing: boolean
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 00f3f266787..190e4218079 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -12,6 +12,7 @@ import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
 import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 import {type PolymorphicProps, fixedForwardRef} from '../utils/modern-polymorphic'
+import {mergeProps} from '../utils/mergeProps'
 
 export type BreadcrumbsProps = React.PropsWithChildren<{
   /**
@@ -389,11 +390,15 @@ const BreadcrumbsItem = fixedForwardRef(
     const {as: Component = 'a', selected, className, ...rest} = props
     return (
       <Component
-        className={clsx(className, classes.Item, selected && 'selected')}
-        aria-current={selected ? 'page' : undefined}
         ref={ref}
-        data-component="Breadcrumbs.Item"
-        {...rest}
+        {...mergeProps(
+          {
+            className: clsx(classes.Item, selected && 'selected', className),
+            'aria-current': selected ? 'page' : undefined,
+            'data-component': 'Breadcrumbs.Item',
+          },
+          rest,
+        )}
       />
     )
   },
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index db954644f45..30550e6a4d5 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -23,6 +23,7 @@ import HeadingComponent from '../Heading'
 import visuallyHiddenClasses from '../_VisuallyHidden.module.css'
 import type {FCWithSlotMarker} from '../utils/types/Slots'
 import {asSlot} from '../utils/as-slot'
+import {mergeProps} from '../utils/mergeProps'
 
 type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
@@ -54,7 +55,7 @@ export type NavListProps = {
 } & React.ComponentProps<'nav'>
 
 const Root = React.forwardRef<HTMLElement, NavListProps>(
-  ({children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props}, ref) => {
+  ({children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props}, ref) => {
     const [slots, childrenWithoutHeading] = useSlots(children, {
       heading: Heading,
     })
@@ -69,7 +70,18 @@ const Root = React.forwardRef<HTMLElement, NavListProps>(
     const navLabelledby = ariaLabelledby ?? (ariaLabel ? undefined : headingId)
 
     return (
-      <nav {...props} aria-label={ariaLabel} aria-labelledby={navLabelledby} ref={ref} data-component="NavList">
+      <nav
+        ref={ref}
+        {...mergeProps(
+          {
+            className: clsx(className),
+            'aria-label': ariaLabel,
+            'aria-labelledby': navLabelledby,
+          },
+          props,
+        )}
+        data-component="NavList"
+      >
         <NavListHeadingLevelContext.Provider value={headingLevel}>
           {heading ? React.cloneElement(heading, {id: headingId}) : null}
           <ActionListContainerContext.Provider
@@ -106,16 +118,20 @@ const Heading: FCWithSlotMarker<NavListHeadingProps> = ({
 }) => {
   return (
     <HeadingComponent
-      as={as}
-      variant="small"
-      className={clsx(
-        // Apply the visually-hidden styles directly to the heading rather than wrapping
-        // it in a span (a heading isn't valid phrasing content inside a span).
-        visuallyHidden ? visuallyHiddenClasses.InternalVisuallyHidden : navListClasses.Heading,
-        className,
+      {...mergeProps(
+        {
+          as,
+          variant: 'small' as const,
+          className: clsx(
+            // Apply the visually-hidden styles directly to the heading rather than wrapping
+            // it in a span (a heading isn't valid phrasing content inside a span).
+            visuallyHidden ? visuallyHiddenClasses.InternalVisuallyHidden : navListClasses.Heading,
+            className,
+          ),
+          'data-component': 'NavList.Heading',
+        },
+        props,
       )}
-      data-component="NavList.Heading"
-      {...props}
     >
       {children}
     </HeadingComponent>
@@ -143,7 +159,15 @@ export type NavListItemProps<As extends React.ElementType = React.ElementType> =
 
 const ItemComponent = fixedForwardRef(
   <As extends React.ElementType = 'a'>(
-    {'aria-current': ariaCurrent, children, defaultOpen, tooltipText, as: Component, ...props}: NavListItemProps<As>,
+    {
+      'aria-current': ariaCurrent,
+      children,
+      defaultOpen,
+      tooltipText,
+      as: Component,
+      className,
+      ...props
+    }: NavListItemProps<As>,
     ref: React.ForwardedRef<unknown>,
   ) => {
     const {depth} = React.useContext(SubNavContext)
@@ -182,13 +206,18 @@ const ItemComponent = fixedForwardRef(
     return (
       <InternalLinkItem
         ref={ref}
-        as={Component}
-        aria-current={ariaCurrent}
-        active={Boolean(ariaCurrent) && ariaCurrent !== 'false'}
-        style={{'--subitem-depth': depth} as React.CSSProperties}
-        data-component="NavList.Item"
-        _PrivateTooltipText={tooltipText}
-        {...props}
+        {...mergeProps(
+          {
+            as: Component,
+            className: clsx(className),
+            'aria-current': ariaCurrent,
+            active: Boolean(ariaCurrent) && ariaCurrent !== 'false',
+            style: {'--subitem-depth': depth} as React.CSSProperties,
+            'data-component': 'NavList.Item',
+            _PrivateTooltipText: tooltipText,
+          },
+          props,
+        )}
       >
         {children}
       </InternalLinkItem>
@@ -539,11 +568,15 @@ const GroupHeadingImpl: React.FC<NavListGroupHeadingProps> = ({as, className, ..
   const resolvedAs = as ?? (headingLevel ? levelToHeadingTag(headingLevel + 1) : 'h3')
   return (
     <ActionList.GroupHeading
-      as={resolvedAs}
-      className={clsx(navListClasses.GroupHeading, className)}
-      data-component="NavList.GroupHeading"
-      headingWrapElement="li"
-      {...rest}
+      {...mergeProps(
+        {
+          as: resolvedAs,
+          className: clsx(navListClasses.GroupHeading, className),
+          'data-component': 'NavList.GroupHeading',
+          headingWrapElement: 'li',
+        },
+        rest,
+      )}
     />
   )
 }
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index c334ec38440..942d1043f13 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -17,6 +17,7 @@ import {clsx} from 'clsx'
 
 import classes from './PageHeader.module.css'
 import {isSlot} from '../utils/is-slot'
+import {mergeProps} from '../utils/mergeProps'
 
 // Types that are shared between PageHeader children components
 export type ChildrenPropTypes = {
@@ -164,12 +165,18 @@ const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeader
     return (
       <BaseComponent
         ref={appliedRef}
-        className={clsx(classes.PageHeader, className)}
-        data-component="PageHeader"
-        data-has-border={hasBorder ? 'true' : undefined}
-        data-has-nav={hasNavigation ? '' : undefined}
-        {...getResponsiveAttributes('title-size-variant', titleVariant)}
-        {...getNavHiddenDataAttributes(navigationHidden)}
+        {...mergeProps(
+          {
+            className: clsx(classes.PageHeader, className),
+            'data-component': 'PageHeader',
+            'data-has-border': hasBorder ? 'true' : undefined,
+            'data-has-nav': hasNavigation ? '' : undefined,
+          },
+          {
+            ...getResponsiveAttributes('title-size-variant', titleVariant),
+            ...getNavHiddenDataAttributes(navigationHidden),
+          },
+        )}
         aria-label={ariaLabel}
         role={role}
       >
@@ -190,9 +197,13 @@ const ContextArea: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>>
 }) => {
   return (
     <div
-      className={clsx(classes.ContextArea, className)}
-      data-component="PageHeader.ContextArea"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.ContextArea, className),
+          'data-component': 'PageHeader.ContextArea',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -216,14 +227,18 @@ const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
       <>
         <Link
           ref={ref}
-          as={as}
-          aria-label={ariaLabel}
-          muted
-          className={clsx(classes.ParentLink, className)}
-          data-component="PageHeader.ParentLink"
-          {...getHiddenDataAttributes(hidden)}
-          href={href}
-          {...rest}
+          {...mergeProps(
+            {
+              as,
+              'aria-label': ariaLabel,
+              muted: true,
+              className: clsx(classes.ParentLink, className),
+              'data-component': 'PageHeader.ParentLink',
+              ...getHiddenDataAttributes(hidden),
+              href,
+            },
+            rest,
+          )}
         >
           <ArrowLeftIcon />
           <div>{children}</div>
@@ -245,9 +260,13 @@ const ContextBar: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }) => {
   return (
     <div
-      className={clsx(classes.ContextBar, className)}
-      data-component="PageHeader.ContextBar"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.ContextBar, className),
+          'data-component': 'PageHeader.ContextBar',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -263,9 +282,13 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<ChildrenPropTypes>> =
 }) => {
   return (
     <div
-      className={clsx(classes.ContextAreaActions, className)}
-      data-component="PageHeader.ContextAreaActions"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.ContextAreaActions, className),
+          'data-component': 'PageHeader.ContextAreaActions',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -288,12 +311,18 @@ const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Title
     const appliedRef = mergedRefEnabled ? forwardedRef : providedOrCreatedRef
     return (
       <div
-        className={clsx(classes.TitleArea, className)}
         // @ts-expect-error it needs a non nullable ref
         ref={appliedRef}
-        data-component="TitleArea"
-        {...getResponsiveAttributes('size-variant', variant)}
-        {...getHiddenDataAttributes(hidden)}
+        {...mergeProps(
+          {
+            className: clsx(classes.TitleArea, className),
+            'data-component': 'TitleArea',
+          },
+          {
+            ...getResponsiveAttributes('size-variant', variant),
+            ...getHiddenDataAttributes(hidden),
+          },
+        )}
       >
         {children}
       </div>
@@ -311,9 +340,13 @@ const LeadingAction: FCWithSlotMarker<React.PropsWithChildren<ChildrenPropTypes>
 }) => {
   return (
     <div
-      className={clsx(classes.LeadingAction, className)}
-      data-component="PH_LeadingAction"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.LeadingAction, className),
+          'data-component': 'PH_LeadingAction',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -326,9 +359,13 @@ LeadingAction.__SLOT__ = Symbol('PageHeader.LeadingAction')
 const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
     <div
-      className={clsx(classes.Breadcrumbs, className)}
-      data-component="PH_Breadcrumbs"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.Breadcrumbs, className),
+          'data-component': 'PH_Breadcrumbs',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -339,9 +376,13 @@ const Breadcrumbs: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({chil
 const LeadingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
     <div
-      className={clsx(classes.LeadingVisual, className)}
-      data-component="PH_LeadingVisual"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.LeadingVisual, className),
+          'data-component': 'PH_LeadingVisual',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -355,11 +396,15 @@ export type TitleProps = {
 const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, className, hidden = false, as = 'h2'}) => {
   return (
     <Heading
-      className={clsx(classes.Title, className)}
-      data-component="PH_Title"
-      data-hidden={hidden}
-      as={as}
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.Title, className),
+          'data-component': 'PH_Title',
+          'data-hidden': hidden,
+          as,
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </Heading>
@@ -374,9 +419,13 @@ const TrailingVisual: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }) => {
   return (
     <div
-      className={clsx(classes.TrailingVisual, className)}
-      data-component="PH_TrailingVisual"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.TrailingVisual, className),
+          'data-component': 'PH_TrailingVisual',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -390,9 +439,13 @@ const TrailingAction: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({
 }) => {
   return (
     <div
-      className={clsx(classes.TrailingAction, className)}
-      data-component="PH_TrailingAction"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.TrailingAction, className),
+          'data-component': 'PH_TrailingAction',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -403,7 +456,15 @@ export type ActionsProps = React.PropsWithChildren<ChildrenPropTypes>
 
 const Actions = ({children, className, hidden = false}: ActionsProps) => {
   return (
-    <div className={clsx(classes.Actions, className)} data-component="PH_Actions" {...getHiddenDataAttributes(hidden)}>
+    <div
+      {...mergeProps(
+        {
+          className: clsx(classes.Actions, className),
+          'data-component': 'PH_Actions',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
+    >
       {children}
     </div>
   )
@@ -413,9 +474,13 @@ const Actions = ({children, className, hidden = false}: ActionsProps) => {
 const Description: React.FC<React.PropsWithChildren<ChildrenPropTypes>> = ({children, className, hidden = false}) => {
   return (
     <div
-      className={clsx(classes.Description, className)}
-      data-component="PageHeader.Description"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          className: clsx(classes.Description, className),
+          'data-component': 'PageHeader.Description',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </div>
@@ -444,12 +509,16 @@ const Navigation: React.FC<React.PropsWithChildren<NavigationProps>> = ({
 
   return (
     <BaseComponent
-      // Render `aria-label` and `aria-labelledby` only on `nav` elements
-      aria-label={BaseComponent === 'nav' ? ariaLabel : undefined}
-      aria-labelledby={BaseComponent === 'nav' ? ariaLabelledBy : undefined}
-      className={clsx(classes.Navigation, className)}
-      data-component="PH_Navigation"
-      {...getHiddenDataAttributes(hidden)}
+      {...mergeProps(
+        {
+          // Render `aria-label` and `aria-labelledby` only on `nav` elements
+          'aria-label': BaseComponent === 'nav' ? ariaLabel : undefined,
+          'aria-labelledby': BaseComponent === 'nav' ? ariaLabelledBy : undefined,
+          className: clsx(classes.Navigation, className),
+          'data-component': 'PH_Navigation',
+        },
+        getHiddenDataAttributes(hidden),
+      )}
     >
       {children}
     </BaseComponent>
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index f393b5551fa..91b6f7cdf84 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -1,9 +1,20 @@
 import type React from 'react'
 import {clsx} from 'clsx'
 import classes from './Pagehead.module.css'
+import {mergeProps} from '../utils/mergeProps'
 
 const Pagehead = ({as: BaseComponent = 'div', className, ...rest}: PageheadProps) => {
-  return <BaseComponent className={clsx(classes.Pagehead, className)} data-component="Pagehead" {...rest} />
+  return (
+    <BaseComponent
+      {...mergeProps(
+        {
+          className: clsx(classes.Pagehead, className),
+          'data-component': 'Pagehead',
+        },
+        rest,
+      )}
+    />
+  )
 }
 
 /**
diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
index 54d67609262..8ee64f56a13 100644
--- a/packages/react/src/SideNav.tsx
+++ b/packages/react/src/SideNav.tsx
@@ -5,6 +5,7 @@ import type React from 'react'
 import {type PropsWithChildren} from 'react'
 import {clsx} from 'clsx'
 import classes from './SideNav.module.css'
+import {mergeProps} from './utils/mergeProps'
 
 type SideNavBaseProps = {
   as?: React.ElementType
@@ -56,9 +57,13 @@ const SideNavLink = ({selected, to, variant, className, children, ...rest}: Styl
   // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
   return (
     <Link
-      aria-current={isReactRouter || selected ? 'page' : undefined}
-      className={newClassName}
-      {...rest}
+      {...mergeProps(
+        {
+          'aria-current': isReactRouter || selected ? 'page' : undefined,
+          className: newClassName,
+        },
+        rest,
+      )}
       data-component="SideNav.Link"
     >
       {children}
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 982eb443fbd..7e559363dd3 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -8,26 +8,33 @@ import type {
 } from '../PageLayout'
 import {PageLayout} from '../PageLayout'
 import type {WithSlotMarker} from '../utils/types'
+import {mergeProps} from '../utils/mergeProps'
+import {clsx} from 'clsx'
 
 // ----------------------------------------------------------------------------
 // SplitPageLayout
 
 export type SplitPageLayoutProps = {className?: string}
 
-export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = props => {
+export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = ({className, ...props}) => {
   return (
     <PageLayout
-      data-component="SplitPageLayout"
-      containerWidth="full"
-      padding="none"
-      columnGap="none"
-      rowGap="none"
-      _slotsConfig={{
-        header: Header,
-        footer: Footer,
-        sidebar: Sidebar,
-      }}
-      {...props}
+      {...mergeProps(
+        {
+          className: clsx(className),
+          'data-component': 'SplitPageLayout',
+          containerWidth: 'full' as const,
+          padding: 'none' as const,
+          columnGap: 'none' as const,
+          rowGap: 'none' as const,
+          _slotsConfig: {
+            header: Header,
+            footer: Footer,
+            sidebar: Sidebar,
+          },
+        },
+        props,
+      )}
     />
   )
 }
@@ -42,10 +49,23 @@ export type SplitPageLayoutHeaderProps = PageLayoutHeaderProps
 export const Header: React.FC<React.PropsWithChildren<SplitPageLayoutHeaderProps>> = ({
   padding = 'normal',
   divider = 'line',
+  className,
   ...props
 }) => {
-  // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Header data-component="SplitPageLayout.Header" padding={padding} divider={divider} {...props} />
+  return (
+    // eslint-disable-next-line primer-react/direct-slot-children
+    <PageLayout.Header
+      {...mergeProps(
+        {
+          className: clsx(className),
+          'data-component': 'SplitPageLayout.Header',
+          padding,
+          divider,
+        },
+        props,
+      )}
+    />
+  )
 }
 
 Header.displayName = 'SplitPageLayout.Header'
@@ -58,9 +78,22 @@ export type SplitPageLayoutContentProps = PageLayoutContentProps
 export const Content: React.FC<React.PropsWithChildren<SplitPageLayoutContentProps>> = ({
   width = 'large',
   padding = 'normal',
+  className,
   ...props
 }) => {
-  return <PageLayout.Content data-component="SplitPageLayout.Content" width={width} padding={padding} {...props} />
+  return (
+    <PageLayout.Content
+      {...mergeProps(
+        {
+          className: clsx(className),
+          'data-component': 'SplitPageLayout.Content',
+          width,
+          padding,
+        },
+        props,
+      )}
+    />
+  )
 }
 
 Content.displayName = 'SplitPageLayout.Content'
@@ -75,16 +108,22 @@ export const Pane: React.FC<React.PropsWithChildren<SplitPageLayoutPaneProps>> =
   sticky = true,
   padding = 'normal',
   divider = 'line',
+  className,
   ...props
 }) => {
   return (
     <PageLayout.Pane
-      data-component="SplitPageLayout.Pane"
-      position={position}
-      sticky={sticky}
-      padding={padding}
-      divider={divider}
-      {...props}
+      {...mergeProps(
+        {
+          className: clsx(className),
+          'data-component': 'SplitPageLayout.Pane',
+          position,
+          sticky,
+          padding,
+          divider,
+        },
+        props,
+      )}
     ></PageLayout.Pane>
   )
 }
@@ -99,15 +138,21 @@ export const Sidebar: React.FC<React.PropsWithChildren<SplitPageLayoutSidebarPro
   position = 'start',
   padding = 'normal',
   divider = 'line',
+  className,
   ...props
 }) => {
   return (
     <PageLayout.Sidebar
-      data-component="SplitPageLayout.Sidebar"
-      position={position}
-      padding={padding}
-      divider={divider}
-      {...props}
+      {...mergeProps(
+        {
+          className: clsx(className),
+          'data-component': 'SplitPageLayout.Sidebar',
+          position,
+          padding,
+          divider,
+        },
+        props,
+      )}
     />
   )
 }
@@ -122,10 +167,23 @@ export type SplitPageLayoutFooterProps = PageLayoutFooterProps
 export const Footer: React.FC<React.PropsWithChildren<SplitPageLayoutFooterProps>> = ({
   padding = 'normal',
   divider = 'line',
+  className,
   ...props
 }) => {
-  // eslint-disable-next-line primer-react/direct-slot-children
-  return <PageLayout.Footer data-component="SplitPageLayout.Footer" padding={padding} divider={divider} {...props} />
+  return (
+    // eslint-disable-next-line primer-react/direct-slot-children
+    <PageLayout.Footer
+      {...mergeProps(
+        {
+          className: clsx(className),
+          'data-component': 'SplitPageLayout.Footer',
+          padding,
+          divider,
+        },
+        props,
+      )}
+    />
+  )
 }
 
 Footer.displayName = 'SplitPageLayout.Footer'
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index 5e18a782fd9..fe261e84ca0 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 
 import styles from './SubNav.module.css'
 import type {WithSlotMarker} from '../utils/types'
+import {mergeProps} from '../utils/mergeProps'
 
 export type SubNavProps = React.ComponentProps<'nav'> & {
   actions?: React.ReactNode
@@ -21,9 +22,13 @@ const SubNav = React.forwardRef<HTMLElement, SubNavProps>(function SubNav(
   return (
     <nav
       ref={forwardRef}
-      className={clsx(className, 'SubNav', styles.SubNav)}
-      aria-label={label}
-      {...rest}
+      {...mergeProps(
+        {
+          className: clsx('SubNav', styles.SubNav, className),
+          'aria-label': label,
+        },
+        rest,
+      )}
       data-component="SubNav"
     >
       <div className={clsx('SubNav-body', styles.Body)}>{children}</div>
@@ -37,7 +42,11 @@ SubNav.displayName = 'SubNav'
 
 const SubNavLinks = React.forwardRef<HTMLDivElement, SubNavLinksProps>(({children, className, ...rest}, forwardRef) => {
   return (
-    <div ref={forwardRef} className={clsx(className, styles.Links)} {...rest} data-component="SubNav.Links">
+    <div
+      ref={forwardRef}
+      {...mergeProps({className: clsx(styles.Links, className)}, rest)}
+      data-component="SubNav.Links"
+    >
       {children}
     </div>
   )
@@ -51,10 +60,14 @@ const SubNavLink = React.forwardRef<HTMLAnchorElement, SubNavLinkProps>(
     return (
       <a
         ref={forwardRef}
-        className={clsx(className, styles.Link)}
-        data-selected={rest.selected}
-        aria-current={rest.selected}
-        {...rest}
+        {...mergeProps(
+          {
+            className: clsx(styles.Link, className),
+            'data-selected': rest.selected,
+            'aria-current': rest.selected,
+          },
+          rest,
+        )}
         data-component="SubNav.Link"
       >
         {children}
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 673e61ea5de..970766b7bdb 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -5,6 +5,7 @@ import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
 import styles from './TabNav.module.css'
+import {mergeProps} from '../utils/mergeProps'
 
 /**
  * @deprecated
@@ -14,7 +15,7 @@ export type TabNavProps = React.HTMLProps<HTMLDivElement>
 /**
  * @deprecated
  */
-function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
+function TabNav({children, className, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   const customContainerRef = useRef<HTMLElement>(null)
 
   // Detect if the TabNav is inside an ActionMenu.
@@ -51,7 +52,11 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   )
 
   return (
-    <div {...rest} ref={navRef as React.RefObject<HTMLDivElement>} data-component="TabNav">
+    <div
+      ref={navRef as React.RefObject<HTMLDivElement>}
+      {...mergeProps({className: clsx(className)}, rest)}
+      data-component="TabNav"
+    >
       <nav aria-label={ariaLabel} className={styles.TabNavNav}>
         <div role="tablist" className={styles.TabNavTabList}>
           {children}
@@ -83,11 +88,21 @@ const TabNavLink = React.forwardRef(function TabNavLink(
   return (
     <Component
       ref={ref}
-      role="tab"
-      tabIndex={-1}
-      aria-selected={selected ? true : undefined}
-      className={clsx('TabNav-item', styles.TabNavLink, selected && 'selected', selected && styles.Selected, className)}
-      {...rest}
+      {...mergeProps(
+        {
+          role: 'tab',
+          tabIndex: -1,
+          'aria-selected': selected ? true : undefined,
+          className: clsx(
+            'TabNav-item',
+            styles.TabNavLink,
+            selected && 'selected',
+            selected && styles.Selected,
+            className,
+          ),
+        },
+        rest,
+      )}
       data-component="TabNav.Link"
     />
   )
diff --git a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
index 0134f462f39..4bf57aeecaa 100644
--- a/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/deprecated/UnderlineNav/UnderlineNav.tsx
@@ -2,6 +2,7 @@ import {clsx} from 'clsx'
 import type {To} from 'history'
 import React from 'react'
 import classes from './UnderlineNav.module.css'
+import {mergeProps} from '../../utils/mergeProps'
 
 export type UnderlineNavProps = {
   actions?: React.ReactNode
@@ -18,7 +19,7 @@ function UnderlineNav({actions, className, align, children, full, label, ...rest
     'PRC-UnderlineNav--right': align,
   })
   return (
-    <nav className={navClasses} aria-label={label} {...rest}>
+    <nav {...mergeProps({className: navClasses, 'aria-label': label}, rest)}>
       <div className={clsx(classes.UnderlineNavBody, 'PRC-UnderlineNav-body')}>{children}</div>
       {actions && <div className={clsx(classes.UnderlineNavActions, 'PRC-UnderlineNav-actions')}>{actions}</div>}
     </nav>
@@ -37,8 +38,20 @@ const UnderlineNavLink = React.forwardRef<HTMLAnchorElement, UnderlineNavLinkPro
   forwardRef,
 ) {
   const linkClasses = clsx(classes.UnderlineNavItem, className, classes.UnderlineNavLink)
-  // eslint-disable-next-line jsx-a11y/anchor-has-content
-  return <a ref={forwardRef} data-selected={selected ? '' : undefined} className={linkClasses} {...props} />
+
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    <a
+      ref={forwardRef}
+      {...mergeProps(
+        {
+          'data-selected': selected ? '' : undefined,
+          className: linkClasses,
+        },
+        props,
+      )}
+    />
+  )
 })
 
 UnderlineNavLink.displayName = 'UnderlineNav.Link'
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
index 1d0d3022a89..6db391f5c8d 100644
--- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx
@@ -22,6 +22,7 @@ import {isSlot} from '../../utils/is-slot'
 import type {FCWithSlotMarker} from '../../utils/types'
 import {Tabs, useTab, useTabList, useTabPanel} from '../Tabs'
 import type {TabListHookProps} from '../Tabs/types'
+import {mergeProps} from '../../utils/mergeProps'
 
 export type UnderlinePanelsProps = {
   /**
@@ -73,7 +74,13 @@ export type TabProps = PropsWithChildren<{
   icon?: FC<IconProps>
 }>
 
-export type PanelProps = React.HTMLAttributes<HTMLDivElement>
+export type PanelProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'aria-labelledby' | 'data-selected' | 'hidden' | 'id' | 'role'
+> & {
+  'aria-labelledby'?: never
+  'data-selected'?: never
+}
 
 // Internal-only positional value injected via cloneElement to pair the Nth tab
 // with the Nth panel. Not part of the public Tab/Panel API.
@@ -233,9 +240,13 @@ const UnderlinePanels: FCWithSlotMarker<UnderlinePanelsProps> = ({
       <Tabs id={parentId} value={selectedValue} onValueChange={({value}) => setSelectedValue(value)}>
         <UnderlineWrapper
           ref={wrapperRef}
-          data-icons-visible={iconsVisible}
-          className={clsx(className, classes.StyledUnderlineWrapper)}
-          {...props}
+          {...mergeProps(
+            {
+              'data-icons-visible': iconsVisible,
+              className: clsx(classes.StyledUnderlineWrapper, className),
+            },
+            props,
+          )}
         >
           <UnderlineItemList
             ref={listRef}
@@ -262,9 +273,14 @@ const TabImpl: FC<TabProps & WithValue> = ({onSelect, value, ...itemProps}) => {
   return (
     <UnderlineItem
       as="button"
-      {...itemProps}
-      {...restTabProps}
+      {...mergeProps(restTabProps, itemProps)}
       type="button"
+      aria-controls={restTabProps['aria-controls']}
+      aria-disabled={restTabProps['aria-disabled']}
+      aria-selected={restTabProps['aria-selected']}
+      id={restTabProps.id}
+      role={restTabProps.role}
+      tabIndex={restTabProps.tabIndex}
       onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
         if (!event.defaultPrevented && typeof onSelect === 'function') {
           onSelect(event)
@@ -295,7 +311,14 @@ const PanelImpl: FC<PanelProps & WithValue> = ({children, value, ...panelRest})
   const {tabPanelProps} = useTabPanel<HTMLDivElement>({value: value ?? ''})
 
   return (
-    <div {...panelRest} {...tabPanelProps}>
+    <div
+      {...mergeProps(tabPanelProps, panelRest)}
+      aria-labelledby={tabPanelProps['aria-labelledby']}
+      data-selected={tabPanelProps['data-selected']}
+      hidden={tabPanelProps.hidden}
+      id={tabPanelProps.id}
+      role={tabPanelProps.role}
+    >
       {children}
     </div>
   )
diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.types.test.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.types.test.tsx
new file mode 100644
index 00000000000..9e1f3d5e10a
--- /dev/null
+++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.types.test.tsx
@@ -0,0 +1,19 @@
+import UnderlinePanels from './UnderlinePanels'
+
+export function panelDoesNotAcceptControlledAttributes() {
+  return (
+    <UnderlinePanels aria-label="Example">
+      <UnderlinePanels.Tab>Tab</UnderlinePanels.Tab>
+      {/* @ts-expect-error UnderlinePanels controls the panel's accessible relationship */}
+      <UnderlinePanels.Panel aria-labelledby="custom-tab">Panel</UnderlinePanels.Panel>
+      {/* @ts-expect-error UnderlinePanels controls the panel's selected state */}
+      <UnderlinePanels.Panel data-selected="forced">Panel</UnderlinePanels.Panel>
+      {/* @ts-expect-error UnderlinePanels controls panel visibility */}
+      <UnderlinePanels.Panel hidden>Panel</UnderlinePanels.Panel>
+      {/* @ts-expect-error UnderlinePanels controls the panel ID */}
+      <UnderlinePanels.Panel id="custom-panel">Panel</UnderlinePanels.Panel>
+      {/* @ts-expect-error UnderlinePanels controls the panel role */}
+      <UnderlinePanels.Panel role="region">Panel</UnderlinePanels.Panel>
+    </UnderlinePanels>
+  )
+}
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 3e7de268225..06cdde29b4e 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -9,6 +9,7 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../
 
 import classes from './UnderlineTabbedInterface.module.css'
 import {clsx} from 'clsx'
+import {mergeProps} from '../../utils/mergeProps'
 
 // The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container.
 export const GAP = 8
@@ -39,9 +40,8 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
 
   return (
     <Component
-      className={clsx(classes.UnderlineWrapper, className)}
       ref={ref as ForwardedRef<HTMLDivElement>}
-      {...rest}
+      {...mergeProps({className: clsx(classes.UnderlineWrapper, className)}, rest)}
     >
       {children}
     </Component>
@@ -50,7 +50,7 @@ export const UnderlineWrapper = forwardRef((props, ref) => {
 
 export const UnderlineItemList = forwardRef(({children, className, ...rest}, forwardedRef) => {
   return (
-    <ul className={clsx(className, classes.UnderlineItemList)} ref={forwardedRef} {...rest}>
+    <ul ref={forwardedRef} {...mergeProps({className: clsx(classes.UnderlineItemList, className)}, rest)}>
       {children}
     </ul>
   )
@@ -75,7 +75,7 @@ export const UnderlineItem = React.forwardRef((props, ref) => {
   const {as: Component = 'a', children, counter, icon: Icon, loadingCounters, className, ...rest} = props
   const textContent = getTextContent(children)
   return (
-    <Component {...rest} ref={ref} className={clsx(classes.UnderlineItem, className)}>
+    <Component ref={ref} {...mergeProps({className: clsx(classes.UnderlineItem, className)}, rest)}>
       {Icon && <span data-component="icon">{isElement(Icon) ? Icon : <Icon />}</span>}
       {children && (
         <span data-component="text" data-content={textContent || undefined}>

From 30dc0a1b385113f025da7f1bd59a6b01d0222f8e Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Wed, 12 Aug 2026 11:19:36 -0500
Subject: [PATCH 2/4] Use patch changeset for UnderlinePanels types

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 84a0d8ca-13d3-4cb2-ab24-18fa2d9a8a14
---
 .changeset/underline-panels-controlled-panel-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/underline-panels-controlled-panel-props.md b/.changeset/underline-panels-controlled-panel-props.md
index c52f1dceee0..636667fb6df 100644
--- a/.changeset/underline-panels-controlled-panel-props.md
+++ b/.changeset/underline-panels-controlled-panel-props.md
@@ -1,5 +1,5 @@
 ---
-'@primer/react': major
+'@primer/react': patch
 ---
 
 UnderlinePanels: Remove unsupported panel attributes that are controlled by the component.

From b0586c08572e56d5cc3fa153fb860dcf28fe3474 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Wed, 12 Aug 2026 11:21:43 -0500
Subject: [PATCH 3/4] Avoid clsx for single class names

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 84a0d8ca-13d3-4cb2-ab24-18fa2d9a8a14
---
 packages/react/src/ActionBar/ActionBar.tsx          |  4 ++--
 packages/react/src/NavList/NavList.tsx              |  4 ++--
 .../react/src/SplitPageLayout/SplitPageLayout.tsx   | 13 ++++++-------
 packages/react/src/TabNav/TabNav.tsx                |  6 +-----
 4 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 4ba42585c0b..93b25b4c235 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -368,7 +368,7 @@ export const ActionBarIconButton = forwardRef(
         {...mergeProps(
           {
             'aria-disabled': disabled,
-            className: clsx(className),
+            className,
             size,
             onClick: clickHandler,
           },
@@ -418,7 +418,7 @@ export const ActionBarButton = forwardRef(
         {...mergeProps(
           {
             'aria-disabled': disabled,
-            className: clsx(className),
+            className,
             children,
             leadingVisual,
             size,
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index 30550e6a4d5..a756085efac 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -74,7 +74,7 @@ const Root = React.forwardRef<HTMLElement, NavListProps>(
         ref={ref}
         {...mergeProps(
           {
-            className: clsx(className),
+            className,
             'aria-label': ariaLabel,
             'aria-labelledby': navLabelledby,
           },
@@ -209,7 +209,7 @@ const ItemComponent = fixedForwardRef(
         {...mergeProps(
           {
             as: Component,
-            className: clsx(className),
+            className,
             'aria-current': ariaCurrent,
             active: Boolean(ariaCurrent) && ariaCurrent !== 'false',
             style: {'--subitem-depth': depth} as React.CSSProperties,
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
index 7e559363dd3..d5047d55795 100644
--- a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
+++ b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -9,7 +9,6 @@ import type {
 import {PageLayout} from '../PageLayout'
 import type {WithSlotMarker} from '../utils/types'
 import {mergeProps} from '../utils/mergeProps'
-import {clsx} from 'clsx'
 
 // ----------------------------------------------------------------------------
 // SplitPageLayout
@@ -21,7 +20,7 @@ export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = ({c
     <PageLayout
       {...mergeProps(
         {
-          className: clsx(className),
+          className,
           'data-component': 'SplitPageLayout',
           containerWidth: 'full' as const,
           padding: 'none' as const,
@@ -57,7 +56,7 @@ export const Header: React.FC<React.PropsWithChildren<SplitPageLayoutHeaderProps
     <PageLayout.Header
       {...mergeProps(
         {
-          className: clsx(className),
+          className,
           'data-component': 'SplitPageLayout.Header',
           padding,
           divider,
@@ -85,7 +84,7 @@ export const Content: React.FC<React.PropsWithChildren<SplitPageLayoutContentPro
     <PageLayout.Content
       {...mergeProps(
         {
-          className: clsx(className),
+          className,
           'data-component': 'SplitPageLayout.Content',
           width,
           padding,
@@ -115,7 +114,7 @@ export const Pane: React.FC<React.PropsWithChildren<SplitPageLayoutPaneProps>> =
     <PageLayout.Pane
       {...mergeProps(
         {
-          className: clsx(className),
+          className,
           'data-component': 'SplitPageLayout.Pane',
           position,
           sticky,
@@ -145,7 +144,7 @@ export const Sidebar: React.FC<React.PropsWithChildren<SplitPageLayoutSidebarPro
     <PageLayout.Sidebar
       {...mergeProps(
         {
-          className: clsx(className),
+          className,
           'data-component': 'SplitPageLayout.Sidebar',
           position,
           padding,
@@ -175,7 +174,7 @@ export const Footer: React.FC<React.PropsWithChildren<SplitPageLayoutFooterProps
     <PageLayout.Footer
       {...mergeProps(
         {
-          className: clsx(className),
+          className,
           'data-component': 'SplitPageLayout.Footer',
           padding,
           divider,
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 970766b7bdb..48d9eac7895 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -52,11 +52,7 @@ function TabNav({children, className, 'aria-label': ariaLabel, ...rest}: TabNavP
   )
 
   return (
-    <div
-      ref={navRef as React.RefObject<HTMLDivElement>}
-      {...mergeProps({className: clsx(className)}, rest)}
-      data-component="TabNav"
-    >
+    <div ref={navRef as React.RefObject<HTMLDivElement>} {...mergeProps({className}, rest)} data-component="TabNav">
       <nav aria-label={ariaLabel} className={styles.TabNavNav}>
         <div role="tablist" className={styles.TabNavTabList}>
           {children}

From 057b4de017df1fb8cbdc125593dc77ecaf43bdbd Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Wed, 12 Aug 2026 11:23:56 -0500
Subject: [PATCH 4/4] Clarify UnderlinePanels type correction

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 84a0d8ca-13d3-4cb2-ab24-18fa2d9a8a14
---
 .changeset/underline-panels-controlled-panel-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/underline-panels-controlled-panel-props.md b/.changeset/underline-panels-controlled-panel-props.md
index 636667fb6df..dd4eaf85abb 100644
--- a/.changeset/underline-panels-controlled-panel-props.md
+++ b/.changeset/underline-panels-controlled-panel-props.md
@@ -2,4 +2,4 @@
 '@primer/react': patch
 ---
 
-UnderlinePanels: Remove unsupported panel attributes that are controlled by the component.
+UnderlinePanels: Correct Panel types to exclude attributes controlled by the component.