@graphprotocol/gds-react 0.1.2 → 0.2.1

package/src/components/Breadcrumbs.parts.tsx

@@ -1,13 +1,7 @@
 'use client'
 
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ComponentProps,
-  type CSSProperties,
-} from 'react'
+import { useCallback, useRef, useState, type ComponentProps, type CSSProperties } from 'react'
+import { useRenderCount, useThrottledEffect } from '@react-hookz/web'
 import { isEqual } from '@ver0/deep-equal'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
@@ -84,24 +78,16 @@ export function BreadcrumbsRoot({
     )
   }, [])
 
-  // Call `updateWrappedCount` after every render and on resize
-  const firstRender = useRef(true)
-  useEffect(() => {
-    /**
-     * The timeout prevents a "Maximum update depth exceeded" error in the unlikely event of an
-     * infinite loop due to `hiddenItems` causing a layout change that makes items wrap differently.
-     * But we don't want it on the first render because it can cause a flash of incorrect state.
-     */
-    if (firstRender.current) {
-      firstRender.current = false
-      updateWrappedCount()
-      return
-    }
-    const timeout = window.setTimeout(() => {
-      updateWrappedCount()
-    }, 0)
-    return () => window.clearTimeout(timeout)
-  })
+  /**
+   * Call `updateWrappedCount` after every render, with `useThrottledEffect` to prevent a "Maximum
+   * update depth exceeded" error in the unlikely event of an infinite loop due to `hiddenItems`
+   * causing a layout change that makes items wrap differently (change `-ms-10` below to `-ms-20` to
+   * see how that can happen).
+   */
+  const renderCount = useRenderCount()
+  useThrottledEffect(updateWrappedCount, [renderCount], 1)
+
+  // Call `updateWrappedCount` on resize
   const resizeObserverRef = useRef<ResizeObserver | null>(null)
   const hiddenContainerRefCallback = useCallback(
     (element: HTMLDivElement | null) => {
@@ -123,7 +109,7 @@ export function BreadcrumbsRoot({
       ref={cssPropsPolyfillPassedRef}
       aria-label={ariaLabel}
       className={cn(
-        'gds-breadcrumbs isolate root-grid *:col-span-full *:row-span-full u:max-w-full u:text-14',
+        'gds-breadcrumbs root-grid *:col-span-full *:row-span-full u:max-w-full u:text-14 i:h-max',
         className,
       )}
       {...getCSSPropsAttributes(BreadcrumbsMeta, { align }, style)}
@@ -184,7 +170,8 @@ export function BreadcrumbsRoot({
                     <DotsThreeIcon alt="Show hidden items" className="top-1.25" />
                   </Button>
                 }
-                position={{ align: 'center', gap: 4 }}
+                align="center"
+                gap={4}
               >
                 {hiddenItems.map((item, index) => (
                   <Menu.Item
@@ -234,6 +221,7 @@ BreadcrumbsRoot.displayName = 'Breadcrumbs'
 export declare namespace BreadcrumbsItemProps {
   interface BaseProps extends GDSComponentProps<typeof BreadcrumbsItemMeta> {
     addonBefore?: AddonValue | undefined
+    // TODO: Add `addonAfter` prop, e.g. for `CaretDownInteractiveIcon` when `Breadcrumbs.Item` is a menu trigger?
     /**
      * Whether this breadcrumb item represents the current page. Defaults to `true` if no `href` is
      * passed, or `false` otherwise.

package/src/components/Button.tsx

@@ -10,7 +10,7 @@ import { cn, getCSSPropsAttributes, isReactNode } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
 import { ButtonMeta } from './Button.meta.ts'
-import { Tooltip, useCollectedTooltip, type TooltipProps } from './Tooltip.tsx'
+import { Tooltip, type TooltipProps } from './Tooltip.tsx'
 
 export declare namespace ButtonProps {
   interface BaseProps extends GDSComponentProps<typeof ButtonMeta> {
@@ -86,114 +86,124 @@ export function Button({
   const addonAfter = getAddon(passedAddonAfter, loading)
   const replaceChildrenWithLoading = loading && !addonBefore && !addonAfter
 
-  const { onCollect, collectedContent } = useCollectedTooltip()
-  let tooltipProps: Omit<TooltipProps, 'children'> = { content: collectedContent }
-  if (tooltip !== undefined) {
-    tooltipProps = isReactNode(tooltip) ? { content: tooltip } : { ...tooltipProps, ...tooltip }
-  }
-
   return (
-    <Tooltip {...tooltipProps}>
-      <ButtonOrLink
-        ref={cssPropsPolyfillStatePassedRef}
-        disabled={disabled || (loading ? 'focusable' : false)}
-        aria-busy={loading || undefined}
-        data-variant={cssProps.variant}
-        data-hide-label={cssProps.hideLabel || undefined}
-        className={cn(
-          `gds-button root-flex flex-col u:size-max u:max-w-full u:font-regular u:outline-0
-          u:checked:state-checked
-          u:hover:state-hover
-          u:focus-visible:state-focus
-          u:active:state-active
-          u:disabled:state-disabled
-          u:disabled:state-idle
-          ${/* Determine whether the button is "addon-only" (`0` means no and `auto` means yes; we can improve this when `if()` is supported, e.g. `min-w-[if(style(--gds-state-addon-only):auto;else:0)]`) */ ''}
-          state-[addon-only=0]
-          data-hide-label:state-[addon-only=auto]
-          not-has-nested/button-children:state-[addon-only=auto]
-          has-nested-has-addon-compatible-only/button-children:state-[addon-only=auto]
-          ${/* Ensure an addon-only button does not get squished in a flex container (like a button group) */ ''}
-          u:min-w-(--gds-state-addon-only)
-          ${/* Ensure a button in a horizontal button group grows by default, except if it is addon-only */ ''}
-          u:@prop-orientation-horizontal/button-group:has-nested-not-has-addon-compatible-only/button-children:grow
-          ${/* But if the button group is `fullWidth`, then all the buttons it contains should be equal width, regardless of their content */ ''}
-          u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:grow
-          u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:basis-0
-          ${/* Extend the tap area of a naked button */ ''}
-          data-[variant=naked]:before:absolute
-          data-[variant=naked]:before:-inset-2`,
-          className,
-        )}
-        {...state.polyfillAttributes}
-        {...getCSSPropsAttributes(ButtonMeta, { variant, size, hideLabel }, style)}
-        {...cssPropsPolyfillAttributes}
-        {...props}
-      >
-        <span
-          className={`
-            nested/button-paint pointer-events-none flex h-(--height) max-w-full min-w-full grow items-center justify-center
-            rounded-(--gds-button-radius) border-(length:--border-width) border-(--gds-button-border)
-            bg-(--gds-button-bg) text-(--gds-button-fg) transition [--border-width:1px]
-            @state-[addon-only=auto]/button:w-(--height)
-            @prop-variant-naked/button:transition-[color]
-            @prop-variant-naked/button:[--border-width:0px]
-            @prop-size-xsmall/button:px-1.25
-            @prop-size-xsmall/button:text-12
-            @prop-size-xsmall/button:[--height:--spacing(7)]
-            @prop-size-small/button:px-1.75
-            @prop-size-small/button:text-12
-            @prop-size-small/button:[--height:--spacing(8)]
-            @prop-size-medium/button:px-1.75
-            @prop-size-medium/button:text-14
-            @prop-size-medium/button:[--height:--spacing(10)]
-            @prop-size-large/button:px-2.75
-            @prop-size-large/button:text-16
-            @prop-size-large/button:[--height:--spacing(12)]
-            u:*:transition-opacity
-            u:*:@state-disabled/button:opacity-disabled
-            u:*:@state-disabled/button:grayscale
-            u:@prop-size-xsmall/button:addon-small
-            u:@prop-size-small/button:addon-small
-            u:@prop-size-medium/button:addon-medium
-            u:@prop-size-large/button:addon-large
-            i:@state-active/button:transition-none
-            i:@prop-variant-naked/button:px-0
-            i:@prop-variant-naked/button:[--height:1lh]
-          `}
+    <ButtonOrLink
+      ref={cssPropsPolyfillStatePassedRef}
+      disabled={disabled || (loading ? 'focusable' : false)}
+      aria-busy={loading || undefined}
+      data-variant={cssProps.variant}
+      data-hide-label={cssProps.hideLabel || undefined}
+      className={cn(
+        `gds-button root-flex flex-col u:size-max u:max-w-full u:outline-0
+        u:checked:state-checked
+        u:hover:state-hover
+        u:focus-visible:state-focus
+        u:active:state-active
+        u:disabled:state-disabled
+        u:disabled:state-idle
+        ${/* Determine whether the button is "addon-only" (`0` means no and `auto` means yes; we can improve this when `if()` is supported, e.g. `min-w-[if(style(--gds-state-addon-only):auto;else:0)]`) */ ''}
+        state-[addon-only=0]
+        data-hide-label:state-[addon-only=auto]
+        not-has-nested/button-children:state-[addon-only=auto]
+        has-nested-has-addon-compatible-only/button-children:state-[addon-only=auto]
+        ${/* Ensure an addon-only button does not get squished in a flex container (like a button group) */ ''}
+        u:min-w-(--gds-state-addon-only)
+        ${/* Ensure a button in a horizontal button group grows by default, except if it is addon-only */ ''}
+        u:@prop-orientation-horizontal/button-group:has-nested-not-has-addon-compatible-only/button-children:grow
+        ${/* But if the button group is `fullWidth`, then all the buttons it contains should be equal width, regardless of their content */ ''}
+        u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:grow
+        u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:basis-0
+        ${/* In a button group, the group itself should be the stacking context */ ''}
+        u:in-button-group:isolation-auto
+        ${/* Extend the tap area of a naked button */ ''}
+        data-[variant=naked]:before:absolute
+        data-[variant=naked]:before:-inset-2`,
+        className,
+      )}
+      {...state.polyfillAttributes}
+      {...getCSSPropsAttributes(ButtonMeta, { variant, size, hideLabel }, style)}
+      {...cssPropsPolyfillAttributes}
+      {...props}
+      render={(renderProps, { Element, elementProps }) => (
+        <Tooltip
+          {...(isReactNode(tooltip) ? { content: tooltip } : tooltip)}
+          triggerProps={renderProps}
         >
-          {/* Focus ring (rendered separately for better spacing in naked buttons) */}
-          <span
-            className={`
-              absolute -inset-px rounded-inherit opacity-100 filter-none
-              @state-focus/button:outline
-              @prop-variant-naked/button:-inset-0.5
-            `}
-          />
-          {addonBefore ? <ButtonAddon side="before">{addonBefore}</ButtonAddon> : null}
-          {children ? (
+          <Element {...elementProps}>
+            {/* Prevent the extended tap area of a naked button from overlapping the tap area of another naked button in the same group */}
             <span
-              data-loading={replaceChildrenWithLoading || undefined}
-              className={cn(
-                `nested/button-children
-                truncate
-                data-loading:invisible
-                @prop-hide-label-true/button:not-has-addon-compatible:sr-only
-                u:@prop-size-xsmall/button:px-0.5
-                u:@prop-size-small/button:px-0.5
-                u:@prop-size-medium/button:px-1
-                u:@prop-size-large/button:px-1
-                u:i:@state-[addon-only=auto]/button:px-0`,
-              )}
+              className={`
+                absolute inset-[calc(-1*var(--gds-button-group-gap)/2)] z-10
+                not-in-button-group:hidden
+                @prop-not-variant-naked/button:hidden
+              `}
+            />
+            <span
+              className={`
+                nested/button-paint pointer-events-none flex h-(--height) max-w-full min-w-full grow items-center justify-center
+                rounded-(--gds-button-radius) border-(length:--border-width) border-(--gds-button-border)
+                bg-(--gds-button-bg) text-(--gds-button-fg) transition [--border-width:1px]
+                @state-[addon-only=auto]/button:w-(--height)
+                @prop-variant-naked/button:transition-[color]
+                @prop-variant-naked/button:[--border-width:0px]
+                @prop-size-xsmall/button:px-1.25
+                @prop-size-xsmall/button:text-12
+                @prop-size-xsmall/button:[--height:--spacing(7)]
+                @prop-size-small/button:px-1.75
+                @prop-size-small/button:text-12
+                @prop-size-small/button:[--height:--spacing(8)]
+                @prop-size-medium/button:px-1.75
+                @prop-size-medium/button:text-14
+                @prop-size-medium/button:[--height:--spacing(10)]
+                @prop-size-large/button:px-2.75
+                @prop-size-large/button:text-16
+                @prop-size-large/button:[--height:--spacing(12)]
+                u:*:transition-opacity
+                u:*:@state-disabled/button:opacity-disabled
+                u:*:@state-disabled/button:grayscale
+                u:@prop-size-xsmall/button:addon-small
+                u:@prop-size-small/button:addon-small
+                u:@prop-size-medium/button:addon-medium
+                u:@prop-size-large/button:addon-large
+                i:@state-active/button:transition-none
+                i:@prop-variant-naked/button:px-0
+                i:@prop-variant-naked/button:[--height:1lh]
+              `}
             >
-              <Tooltip.Collector onCollect={onCollect}>{children}</Tooltip.Collector>
+              {/* Focus ring (rendered separately for better spacing in naked buttons) */}
+              <span
+                className={`
+                  absolute -inset-px rounded-inherit opacity-100 filter-none
+                  @state-focus/button:outline
+                  @prop-variant-naked/button:-inset-0.5
+                `}
+              />
+              {addonBefore ? <ButtonAddon side="before">{addonBefore}</ButtonAddon> : null}
+              {children ? (
+                <span
+                  data-loading={replaceChildrenWithLoading || undefined}
+                  className={cn(
+                    `nested/button-children
+                    truncate
+                    data-loading:invisible
+                    @prop-hide-label-true/button:not-has-addon-compatible:sr-only
+                    u:@prop-size-xsmall/button:px-0.5
+                    u:@prop-size-small/button:px-0.5
+                    u:@prop-size-medium/button:px-1
+                    u:@prop-size-large/button:px-1
+                    u:i:@state-[addon-only=auto]/button:px-0`,
+                  )}
+                >
+                  <Tooltip.Collector>{children}</Tooltip.Collector>
+                </span>
+              ) : null}
+              {replaceChildrenWithLoading ? loadingIcon : null}
+              {addonAfter ? <ButtonAddon side="after">{addonAfter}</ButtonAddon> : null}
             </span>
-          ) : null}
-          {replaceChildrenWithLoading ? loadingIcon : null}
-          {addonAfter ? <ButtonAddon side="after">{addonAfter}</ButtonAddon> : null}
-        </span>
-      </ButtonOrLink>
-    </Tooltip>
+          </Element>
+        </Tooltip>
+      )}
+    />
   )
 }
 

package/src/components/ButtonGroup.meta.ts

@@ -29,4 +29,12 @@ export const ButtonGroupMeta = createComponent('ButtonGroup', {
       defaultValue: false,
     },
   },
+  vars: {
+    gap: {
+      '@variant @prop-size-xsmall/button-group': '--spacing(1)',
+      '@variant @prop-size-small/button-group': '--spacing(1.5)',
+      '@variant @prop-size-medium/button-group': '--spacing(2)',
+      '@variant @prop-size-large/button-group': '--spacing(2)',
+    },
+  },
 })

package/src/components/ButtonGroup.tsx

@@ -77,11 +77,7 @@ export function ButtonGroup({
          * mentioned, vertical in horizontal doesn't make sense.
          */
         className={`
-          flex items-center
-          @prop-size-xsmall/button-group:gap-1
-          @prop-size-small/button-group:gap-1.5
-          @prop-size-medium/button-group:gap-2
-          @prop-size-large/button-group:gap-2
+          flex items-center gap-(--gds-button-group-gap)
           @prop-orientation-vertical/button-group:not-in-button-group-[[data-gds-prop-polyfill-orientation=gds-horizontal]]:flex-col
           i:*:@prop-orientation-vertical/button-group:not-in-button-group-[[data-gds-prop-polyfill-orientation=gds-horizontal]]:w-full
         `}

package/src/components/Card.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const CardMeta = createComponent('Card', {
+  isolate: 'allow-inheritance',
   cssProps: {
     /** @default 'secondary' */
     variant: {

package/src/components/Card.tsx

@@ -122,7 +122,7 @@ export function Card({
         {...state.polyfillAttributes}
         {...nestedProps}
         {...(as !== undefined && ({ as: 'span' } as Record<string, unknown>))}
-        render={(renderProps, { Element, category, target }) => {
+        render={(renderProps, { Element, elementProps, category, target }) => {
           const renderChildrenOutside = interactiveContent === true && category !== 'other'
           const contentId =
             renderChildrenOutside && !('aria-label' in props || 'aria-labelledby' in props)
@@ -130,7 +130,7 @@ export function Card({
               : undefined
           return (
             <>
-              <Element aria-labelledby={contentId} {...renderProps}>
+              <Element aria-labelledby={contentId} {...renderProps} {...elementProps}>
                 {/**
                  * This `span` ensures that the rounded corners are always hoverable/clickable, instead of only when
                  * `children` includes an absolutely-positioned element that fills the card, and not even

package/src/components/Checkbox.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { CheckableMeta } from './base/Checkable.meta.ts'
 
 export const CheckboxMeta = createComponent('Checkbox', {
-  containerName: 'gds-checkable',
-  cssProps: {
-    /** @default 'medium' */
-    size: CheckableMeta.cssProps.size,
-  },
+  extends: CheckableMeta,
 })

package/src/components/Chip.parts.tsx

@@ -170,17 +170,7 @@ export function ChipRoot({
               {/* Ensure rounded corners are clickable */}
               <span className="absolute inset-0 not-in-clickable:hidden" />
               {addonBefore ? <ChipAddon side="before">{renderAddon(addonBefore)}</ChipAddon> : null}
-              <span
-                className={`
-                  flex items-baseline
-                  @prop-size-small/chip:gap-0.5
-                  @prop-size-small/chip:px-0.5
-                  @prop-size-medium/chip:gap-1
-                  @prop-size-medium/chip:px-1
-                  @prop-size-large/chip:gap-1
-                  @prop-size-large/chip:px-1
-                `}
-              >
+              <span className="flex items-baseline gap-1 px-1">
                 <span className="truncate">{children}</span>
                 {count ? (
                   <span

package/src/components/CodeBlock.parts.tsx

@@ -39,7 +39,9 @@ import {
 
 import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes, type Stringifiable } from '../utils/index.ts'
+import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { Button } from './Button.tsx'
+import { ButtonGroup } from './ButtonGroup.tsx'
 import { CodeBlockMeta } from './CodeBlock.meta.ts'
 import { CopyButton } from './CopyButton.tsx'
 import { TabSet, TabSetContext, type TabSetTabProps } from './TabSet.tsx'
@@ -150,8 +152,21 @@ function CodeBlockHeader({ buttons, className, children, ...props }: CodeBlockHe
         )}
         {...props}
       >
-        <div className="grow">{children}</div>
-        {buttons ? <div className="flex shrink-0 items-center gap-3 pe-2.5">{buttons}</div> : null}
+        <div className="min-w-em grow">{children}</div>
+        {buttons ? (
+          <ButtonGroup
+            variant="naked"
+            size="medium"
+            /**
+             * The `not-has-button:hidden` class prevents an empty `ButtonGroup` from taking space
+             * in the layout, which can happen when the stuff that `CodeBlockTabs` passes as
+             * `buttons` ends up rendering nothing (which we can't know in advance).
+             */
+            className="me-2 shrink-0 self-center not-has-button:hidden"
+          >
+            {buttons}
+          </ButtonGroup>
+        ) : null}
         <div className="absolute inset-x-0 bottom-0 border-b border-subtle" />
       </figcaption>
     </CodeBlockHeaderContext.Provider>
@@ -162,8 +177,8 @@ export interface CodeBlockProps extends Omit<ComponentProps<'div'>, 'onCopy'>, S
   /** @default 'text' */
   language?: Language | undefined
   /** Defaults to an icon that matches the `language`. */
-  icon?: ReactNode | undefined
-  label?: string | undefined
+  icon?: AddonValue | undefined
+  label?: ReactNode | undefined
   children: Stringifiable
 }
 
@@ -314,64 +329,74 @@ export function CodeBlockRoot({
     })
   }, [highlighter, childrenString, activeTheme, language, highlights, secrets, diff])
 
-  const buttons = (
-    <>
-      {secrets.length > 0 ? (
-        <Button variant="naked" size="medium" onClick={() => setMasked(!masked)}>
-          {masked ? (
-            <EyeIcon alt={`Reveal secret${secrets.length > 1 ? 's' : ''}`} />
-          ) : (
-            <EyeClosedIcon alt={`Hide secret${secrets.length > 1 ? 's' : ''}`} />
-          )}
-        </Button>
-      ) : null}
-      {copy ? (
-        <CopyButton
-          variant="naked"
-          size="medium"
-          value={typeof copy === 'string' ? copy : codeToCopy}
-          onCopy={onCopy}
-        />
-      ) : null}
-    </>
-  )
+  const buttonElements = [
+    secrets.length > 0 && (
+      <Button key="reveal" onClick={() => setMasked(!masked)}>
+        {masked ? (
+          <EyeIcon alt={`Reveal secret${secrets.length > 1 ? 's' : ''}`} />
+        ) : (
+          <EyeClosedIcon alt={`Hide secret${secrets.length > 1 ? 's' : ''}`} />
+        )}
+      </Button>
+    ),
+    copy && (
+      <CopyButton key="copy" value={typeof copy === 'string' ? copy : codeToCopy} onCopy={onCopy} />
+    ),
+  ].filter(Boolean)
+
+  const buttons = buttonElements.length > 0 ? <>{buttonElements}</> : null
 
   if (hasAncestorHeader) {
     return buttons
   }
 
   const Wrapper = hasAncestorTabs ? 'div' : CodeBlockWrapper
-  const headerContent = (
-    <div className="flex h-full items-center gap-2 ps-2">
-      {icon ? (
-        <span className="flex size-4 shrink-0 items-center justify-center **:icon:default-size-3.5">
-          {icon}
-        </span>
-      ) : null}
-      {label ? <span className="truncate text-14 text-muted">{label}</span> : null}
-    </div>
-  )
+  const headerContent =
+    label || passedIcon ? (
+      <div className="flex h-full items-center gap-2 ps-2">
+        {icon ? (
+          <span className="flex size-4 shrink-0 items-center justify-center **:icon:default-size-3.5">
+            {renderAddon(icon)}
+          </span>
+        ) : null}
+        {label ? <span className="truncate text-14 text-muted">{label}</span> : null}
+      </div>
+    ) : null
 
   return (
     <Wrapper
       ref={cssPropsPolyfillPassedRef}
+      data-has-header={Boolean(headerContent) || undefined}
       className={cn(
-        `gds-code-block isolate root-flex flex-col
-        u:not-in-code-block-tabs:min-h-24
-        u:not-in-code-block-tabs:rounded-8`,
+        `gds-code-block group/code-block root-flex flex-col
+        u:not-in-code-block-tabs:rounded-8
+        u:not-in-code-block-tabs:not-data-has-header:min-h-13
+        u:not-in-code-block-tabs:data-has-header:min-h-24`,
         className,
       )}
       {...getCSSPropsAttributes(CodeBlockMeta, { wrap, lineNumbers, rows }, style)}
       {...cssPropsPolyfillAttributes}
       {...props}
     >
-      {!hasAncestorTabs ? (
-        <CodeBlockHeader buttons={buttons}>{headerContent}</CodeBlockHeader>
-      ) : null}
-      {hasAncestorTabs && label ? (
-        <div className="flex h-10 shrink-0 px-2">
-          <div className="absolute inset-0 border-b border-subtle" />
-          {headerContent}
+      {headerContent ? (
+        hasAncestorTabs ? (
+          <div className="flex h-10 shrink-0 px-2">
+            <div className="absolute inset-0 border-b border-subtle" />
+            {headerContent}
+          </div>
+        ) : (
+          <CodeBlockHeader buttons={buttons}>{headerContent}</CodeBlockHeader>
+        )
+      ) : !hasAncestorTabs && buttons ? (
+        <div
+          className={`
+            absolute end-3 top-3 z-10 opacity-0 transition
+            group-not-hover/code-block:pointer-events-none
+            group-hover/code-block:opacity-100
+            has-focus-visible:opacity-100
+          `}
+        >
+          <ButtonGroup size="xsmall">{buttons}</ButtonGroup>
         </div>
       ) : null}
       <pre
@@ -384,7 +409,7 @@ export function CodeBlockRoot({
          * that case, so it should be fine.
          */
         className={`
-          h-(--max-height) max-h-max grow overflow-auto font-mono text-14
+          isolate scrollbar-thin h-(--max-height) max-h-max grow overflow-auto font-mono text-14
           [--max-height:calc(9999px-min(9999px,var(--gds-code-block-rows)*9999px)+var(--gds-code-block-rows)*1lh+2*var(--padding))]
           [--padding:--spacing(4)]
           firefox:h-auto
@@ -427,8 +452,8 @@ export function CodeBlockRoot({
               <span
                 aria-hidden
                 className={`
-                  hidden min-w-4 text-center text-12 text-subtle select-none
-                  @prop-line-numbers-true/code-block:block
+                  min-w-4 text-center text-12 text-subtle select-none
+                  @prop-line-numbers-false/code-block:hidden
                 `}
               >
                 {lineIndex + 1}
@@ -544,7 +569,7 @@ export function CodeBlockTabs<const Tabs extends readonly Tab[], T extends TabVa
   className,
   children,
   ...props
-}: CodeBlockTabsProps<Tabs, T> & { ref?: React.Ref<HTMLDivElement> }) {
+}: CodeBlockTabsProps<Tabs, T>) {
   if (passedTabs.length === 0) {
     throw new Error('[CodeBlock.Tabs] At least 1 tab is required')
   }
@@ -583,7 +608,7 @@ export function CodeBlockTabs<const Tabs extends readonly Tab[], T extends TabVa
       defaultValue={defaultValue ?? (tabs[0]!.value as T)}
       onChange={onChange}
       className={cn(
-        `gds-code-block-tabs isolate root-flex flex-col u:min-h-24 u:rounded-8
+        `gds-code-block-tabs root-flex flex-col u:min-h-24 u:rounded-8
         u:[--saved-default-line-numbers:var(--gds-default-line-numbers)]
         u:[--saved-default-rows:var(--gds-default-rows)]
         u:[--saved-default-wrap:var(--gds-default-wrap)]

package/src/components/CodeInline.tsx

@@ -15,8 +15,8 @@ export function CodeInline({ className, children, ...props }: CodeInlineProps) {
   return (
     <span
       className={cn(
-        `gds-code-inline root-inline
-        u:font-mono u:font-regular u:wrap-anywhere u:whitespace-pre-wrap u:text-code u:in-link:text-link-idle
+        `gds-code-inline root-inline u:font-mono u:text-size-inherit u:wrap-anywhere u:whitespace-pre-wrap u:text-code
+        u:in-link:text-link-idle
         ${/* If inside a link, ensure the underline of the link appears over the background and border by default */ ''}
         u:in-link:-z-10
         ${/* Prevent messing with the line height (this needs to be set on the root _and_ on the inner element) */ ''}
@@ -44,7 +44,7 @@ export function CodeInline({ className, children, ...props }: CodeInlineProps) {
           in-link:transition-[border-radius]
           in-link-hover:rounded-b-none
           ${/* Prevent incorrect alignment when empty */ ''}
-          empty:after:content-(--content-nbsp)
+          empty:after:content-nbsp
         `}
         {...props}
       >

package/src/components/CopyButton.meta.ts

@@ -5,17 +5,12 @@ import { ButtonMeta } from './Button.meta.ts'
 type ButtonVariant = (typeof ButtonMeta.cssProps.variant.values)[number]
 
 export const CopyButtonMeta = createComponent('CopyButton', {
-  containerName: 'gds-button',
+  extends: ButtonMeta,
   cssProps: {
-    /** @default 'secondary' */
     variant: {
       type: 'values',
       values: ['secondary', 'tertiary', 'inverse', 'naked'] as const satisfies ButtonVariant[],
       defaultValue: 'secondary',
     },
-    /** @default 'medium' */
-    size: ButtonMeta.cssProps.size,
-    /** @default false */
-    hideLabel: ButtonMeta.cssProps.hideLabel,
   },
 })