From bddd57c10071fb3884dfc6454a2362bfb3fd3263 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Fri, 20 Feb 2026 15:08:27 +0100
Subject: [PATCH 01/10] UI: Fix code/copy buttons overlap with content

---
 .../src/blocks/components/Preview.stories.tsx | 13 +++++
 .../docs/src/blocks/components/Preview.tsx    | 15 ++++--
 .../ActionBar/ActionBar.stories.tsx           |  3 ++
 .../components/ActionBar/ActionBar.tsx        | 54 ++++++++++++-------
 .../syntaxhighlighter/syntaxhighlighter.tsx   |  9 +++-
 5 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/code/addons/docs/src/blocks/components/Preview.stories.tsx b/code/addons/docs/src/blocks/components/Preview.stories.tsx
index 223efabeee51..a1c5108d234d 100644
--- a/code/addons/docs/src/blocks/components/Preview.stories.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.stories.tsx
@@ -51,6 +51,19 @@ export const CodeError = () => (
   </Preview>
 );
 
+export const ActionBarWrapping = {
+  render: () => (
+    <Preview inline isExpanded withSource={sourceStories.JSX.args}>
+      <Button ariaLabel={false} variant="outline">
+        Button with long text
+      </Button>
+    </Preview>
+  ),
+  globals: {
+    viewport: 'mobile1',
+  },
+};
+
 export const Single = () => (
   <Preview inline>
     <Button ariaLabel={false} variant="outline">
diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index edaeb88a9876..a81bfd0f90e9 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -35,6 +35,10 @@ const ChildrenContainer = styled.div<PreviewProps & { layout: Layout }>(
   ({ isColumn, columns, layout }) => ({
     display: isColumn || !columns ? 'block' : 'flex',
     position: 'relative',
+    flex: 1,
+    flexShrink: 0,
+    flexBasis: 'fit-content',
+    maxWidth: '100%',
     flexWrap: 'wrap',
     overflow: 'auto',
     flexDirection: isColumn ? 'column' : 'row',
@@ -172,9 +176,10 @@ const PositionedToolbar = styled(Toolbar)({
   height: 40,
 });
 
-const Relative = styled.div({
+const ActionBarContainer = styled.div({
   overflow: 'hidden',
-  position: 'relative',
+  display: 'flex',
+  flexWrap: 'wrap',
 });
 
 /**
@@ -263,7 +268,7 @@ export const Preview: FC<PreviewProps> = ({
         />
       )}
       <ZoomContext.Provider value={{ scale }}>
-        <Relative className="docs-story" onCopyCapture={withSource && onCopyCapture}>
+        <ActionBarContainer className="docs-story" onCopyCapture={withSource && onCopyCapture}>
           <ChildrenContainer
             isColumn={isColumn || !Array.isArray(children)}
             columns={columns}
@@ -278,8 +283,8 @@ export const Preview: FC<PreviewProps> = ({
               )}
             </Zoom.Element>
           </ChildrenContainer>
-          <ActionBar actionItems={actionItems} />
-        </Relative>
+          <ActionBar actionItems={actionItems} flexLayout />
+        </ActionBarContainer>
       </ZoomContext.Provider>
       {withSource && expanded && source}
     </PreviewContainer>
diff --git a/code/core/src/components/components/ActionBar/ActionBar.stories.tsx b/code/core/src/components/components/ActionBar/ActionBar.stories.tsx
index 8c3a04983b1d..5935b7bb7b81 100644
--- a/code/core/src/components/components/ActionBar/ActionBar.stories.tsx
+++ b/code/core/src/components/components/ActionBar/ActionBar.stories.tsx
@@ -27,6 +27,9 @@ export default {
       </div>
     ),
   ],
+  args: {
+    sb11FlexLayout: true,
+  },
 };
 
 export const SingleItem = () => <ActionBar actionItems={[{ title: 'Clear', onClick: action1 }]} />;
diff --git a/code/core/src/components/components/ActionBar/ActionBar.tsx b/code/core/src/components/components/ActionBar/ActionBar.tsx
index 25dd5c668fef..59f6694501f5 100644
--- a/code/core/src/components/components/ActionBar/ActionBar.tsx
+++ b/code/core/src/components/components/ActionBar/ActionBar.tsx
@@ -3,15 +3,25 @@ import React from 'react';
 
 import { styled } from 'storybook/theming';
 
-const Container = styled.div(({ theme }) => ({
-  position: 'absolute',
-  bottom: 0,
-  right: 0,
-  maxWidth: '100%',
-  display: 'flex',
-  background: theme.background.content,
-  zIndex: 1,
-}));
+const Container = styled.div<{ $flexLayout?: boolean }>(({ theme, $flexLayout = false }) => [
+  {
+    background: theme.background.content,
+  },
+  $flexLayout
+    ? {
+        display: 'inline-flex',
+        marginInlineStart: 'auto',
+        alignSelf: 'flex-end',
+      }
+    : {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        maxWidth: '100%',
+        display: 'flex',
+        zIndex: 1,
+      },
+]);
 
 export const ActionButton = styled.button<{ disabled: boolean }>(
   ({ theme }) => ({
@@ -67,15 +77,23 @@ export interface ActionItem {
 }
 
 export interface ActionBarProps {
+  /** Items to render in this ActionBar. */
   actionItems: ActionItem[];
+  /**
+   * When true, ActionBar aligns to the flex end and inline end of a wrapping row flex container.
+   * When false, ActionBar is positioned absolutely at the bottom right of its relative parent.
+   */
+  flexLayout?: boolean;
 }
 
-export const ActionBar = ({ actionItems, ...props }: ActionBarProps) => (
-  <Container {...props}>
-    {actionItems.map(({ title, className, onClick, disabled }, index: number) => (
-      <ActionButton key={index} className={className} onClick={onClick} disabled={!!disabled}>
-        {title}
-      </ActionButton>
-    ))}
-  </Container>
-);
+export const ActionBar = ({ actionItems, flexLayout = false, ...props }: ActionBarProps) => {
+  return (
+    <Container {...props} $flexLayout={flexLayout}>
+      {actionItems.map(({ title, className, onClick, disabled }, index: number) => (
+        <ActionButton key={index} className={className} onClick={onClick} disabled={!!disabled}>
+          {title}
+        </ActionButton>
+      ))}
+    </Container>
+  );
+};
diff --git a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
index 58286cec773e..0f662ccc936c 100644
--- a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
@@ -68,6 +68,8 @@ export interface WrapperProps {
 const Wrapper = styled.div<WrapperProps>(
   ({ theme }) => ({
     position: 'relative',
+    display: 'flex',
+    flexWrap: 'wrap',
     overflow: 'hidden',
     color: theme.color.defaultText,
   }),
@@ -97,7 +99,10 @@ const UnstyledScroller = ({ children, className }: ScrollAreaProps) => (
 );
 const Scroller = styled(UnstyledScroller)(
   {
-    position: 'relative',
+    flex: 1,
+    flexShrink: 0,
+    flexBasis: 'fit-content',
+    maxWidth: '100%',
   },
   ({ theme }) => themedSyntax(theme)
 );
@@ -247,7 +252,7 @@ export const SyntaxHighlighter = ({
       </Scroller>
 
       {copyable ? (
-        <ActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick }]} />
+        <ActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick }]} flexLayout />
       ) : null}
     </Wrapper>
   );

From 41567a26e2ddea272bb66678ba9b7223da076f9c Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 26 Feb 2026 15:14:08 +0100
Subject: [PATCH 02/10] UI: Work towards new preview actions UI

---
 .../docs/src/blocks/components/Preview.tsx    | 209 ++++++++----------
 .../docs/src/blocks/components/Source.tsx     |   7 +-
 2 files changed, 97 insertions(+), 119 deletions(-)

diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index a81bfd0f90e9..331184b9f62d 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -1,9 +1,12 @@
-import type { ClipboardEvent, FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
 import React, { Children, useCallback, useContext, useState } from 'react';
 
-import { ActionBar, Zoom } from 'storybook/internal/components';
+import { Bar, Button, ToggleButton, Zoom } from 'storybook/internal/components';
 import type { ActionItem } from 'storybook/internal/components';
 
+import { CopyIcon, MarkupIcon } from '@storybook/icons';
+
+import { useId } from '@react-aria/utils';
 import { darken } from 'polished';
 import { styled } from 'storybook/theming';
 
@@ -35,10 +38,6 @@ const ChildrenContainer = styled.div<PreviewProps & { layout: Layout }>(
   ({ isColumn, columns, layout }) => ({
     display: isColumn || !columns ? 'block' : 'flex',
     position: 'relative',
-    flex: 1,
-    flexShrink: 0,
-    flexBasis: 'fit-content',
-    maxWidth: '100%',
     flexWrap: 'wrap',
     overflow: 'auto',
     flexDirection: isColumn ? 'column' : 'row',
@@ -79,6 +78,10 @@ const ChildrenContainer = styled.div<PreviewProps & { layout: Layout }>(
       : {}
 );
 
+const ActionBar = styled(Bar)({
+  marginTop: -40,
+});
+
 const StyledSource = styled(Source)(({ theme }) => ({
   margin: 0,
   borderTopLeftRadius: 0,
@@ -102,9 +105,9 @@ const PreviewContainer = styled.div<PreviewProps>(
     overflow: 'hidden',
     margin: '25px 0 40px',
     ...getBlockBackgroundStyle(theme),
-    borderBottomLeftRadius: (withSource && isExpanded && 0) as any,
-    borderBottomRightRadius: (withSource && isExpanded && 0) as any,
-    borderBottomWidth: (isExpanded && 0) as any,
+    borderBottomLeftRadius: withSource && isExpanded ? 0 : undefined,
+    borderBottomRightRadius: withSource && isExpanded ? 0 : undefined,
+    borderBottomWidth: isExpanded ? 0 : undefined,
 
     'h3 + &': {
       marginTop: '16px',
@@ -113,51 +116,6 @@ const PreviewContainer = styled.div<PreviewProps>(
   ({ withToolbar }) => withToolbar && { paddingTop: 40 }
 );
 
-interface SourceItem {
-  source?: ReactElement | null;
-  actionItem: ActionItem;
-}
-
-const getSource = (
-  withSource: SourceProps | undefined,
-  expanded: boolean,
-  setExpanded: Function
-): SourceItem => {
-  switch (true) {
-    case !!(withSource && withSource.error): {
-      return {
-        source: null,
-        actionItem: {
-          title: 'No code available',
-          className: 'docblock-code-toggle docblock-code-toggle--disabled',
-          disabled: true,
-          onClick: () => setExpanded(false),
-        },
-      };
-    }
-    case expanded: {
-      return {
-        source: <StyledSource {...withSource} dark />,
-        actionItem: {
-          title: 'Hide code',
-          className: 'docblock-code-toggle docblock-code-toggle--expanded',
-          onClick: () => setExpanded(false),
-        },
-      };
-    }
-    default: {
-      return {
-        source: <StyledSource {...withSource} dark />,
-        actionItem: {
-          title: 'Show code',
-          className: 'docblock-code-toggle',
-          onClick: () => setExpanded(true),
-        },
-      };
-    }
-  }
-};
-
 function getChildProps(children: ReactNode) {
   if (Children.count(children) === 1) {
     const elt = children as ReactElement;
@@ -176,11 +134,7 @@ const PositionedToolbar = styled(Toolbar)({
   height: 40,
 });
 
-const ActionBarContainer = styled.div({
-  overflow: 'hidden',
-  display: 'flex',
-  flexWrap: 'wrap',
-});
+const COPIED_LABEL_ANIMATION_DURATION = 2000;
 
 /**
  * A preview component for showing one or more component `Story` items. The preview also shows the
@@ -201,74 +155,53 @@ export const Preview: FC<PreviewProps> = ({
   ...props
 }) => {
   const [expanded, setExpanded] = useState(isExpanded);
-  const { source, actionItem } = getSource(withSource, expanded, setExpanded);
+  const [copied, setCopied] = useState(false);
   const [scale, setScale] = useState(1);
-  const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview', 'sb-unstyled']);
-
-  const defaultActionItems = withSource ? [actionItem] : [];
-  const [additionalActionItems, setAdditionalActionItems] = useState(
+  const [additionalActionItems] = useState<ActionItem[]>(
     additionalActions ? [...additionalActions] : []
   );
-  const actionItems = [...defaultActionItems, ...additionalActionItems];
-
-  const { window: globalWindow } = globalThis;
+  const sourceId = useId();
+  const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview', 'sb-unstyled']);
 
   const context = useContext(DocsContext);
 
   const copyToClipboard = useCallback(async (text: string) => {
     const { createCopyToClipboardFunction } = await import('storybook/internal/components');
-    createCopyToClipboardFunction();
+    await createCopyToClipboardFunction()(text);
   }, []);
 
-  const onCopyCapture = (e: ClipboardEvent<HTMLInputElement>) => {
-    // When the selection range is neither empty nor collapsed, we can assume
-    // user's intention is to copy the selected text, instead of the story's
-    // code snippet.
-    const selection: Selection | null = globalWindow.getSelection();
-    if (selection && selection.type === 'Range') {
+  const handleCopyCode = useCallback(() => {
+    if (copied) {
       return;
     }
-
-    e.preventDefault();
-    if (additionalActionItems.filter((item) => item.title === 'Copied').length === 0) {
-      copyToClipboard(source?.props.code ?? '').then(() => {
-        setAdditionalActionItems([
-          ...additionalActionItems,
-          {
-            title: 'Copied',
-            onClick: () => {},
-          },
-        ]);
-        globalWindow.setTimeout(
-          () =>
-            setAdditionalActionItems(
-              additionalActionItems.filter((item) => item.title !== 'Copied')
-            ),
-          1500
-        );
-      });
-    }
-  };
+    copyToClipboard(withSource?.code ?? '').then(() => {
+      setCopied(true);
+      globalThis.window.setTimeout(() => setCopied(false), COPIED_LABEL_ANIMATION_DURATION);
+    });
+  }, [copied, copyToClipboard, withSource?.code]);
 
   const childProps = getChildProps(children);
 
+  const hasSourceError = !!(withSource && withSource.error);
+  const hasValidSource = !!(withSource && !withSource.error);
+
   return (
-    <PreviewContainer
-      {...{ withSource, withToolbar }}
-      {...props}
-      className={previewClasses.join(' ')}
-    >
-      {withToolbar && (
-        <PositionedToolbar
-          isLoading={isLoading}
-          border
-          zoom={(z: number) => setScale(scale * z)}
-          resetZoom={() => setScale(1)}
-          storyId={!isLoading && childProps ? getStoryId(childProps, context) : undefined}
-        />
-      )}
-      <ZoomContext.Provider value={{ scale }}>
-        <ActionBarContainer className="docs-story" onCopyCapture={withSource && onCopyCapture}>
+    <>
+      <PreviewContainer
+        {...{ withSource, withToolbar }}
+        {...props}
+        className={previewClasses.join(' ')}
+      >
+        {withToolbar && (
+          <PositionedToolbar
+            isLoading={isLoading}
+            border
+            zoom={(z: number) => setScale(scale * z)}
+            resetZoom={() => setScale(1)}
+            storyId={!isLoading && childProps ? getStoryId(childProps, context) : undefined}
+          />
+        )}
+        <ZoomContext.Provider value={{ scale }}>
           <ChildrenContainer
             isColumn={isColumn || !Array.isArray(children)}
             columns={columns}
@@ -283,11 +216,55 @@ export const Preview: FC<PreviewProps> = ({
               )}
             </Zoom.Element>
           </ChildrenContainer>
-          <ActionBar actionItems={actionItems} flexLayout />
-        </ActionBarContainer>
-      </ZoomContext.Provider>
-      {withSource && expanded && source}
-    </PreviewContainer>
+        </ZoomContext.Provider>
+        {hasValidSource && expanded && (
+          <div id={sourceId}>
+            <StyledSource {...withSource} dark copyable={false} />
+          </div>
+        )}
+      </PreviewContainer>
+      {(withSource || additionalActionItems.length > 0) && (
+        <ActionBar className="sbdocs sbdocs-preview-actions">
+          {hasSourceError && (
+            <Button
+              disabled
+              variant="ghost"
+              className="docblock-code-toggle docblock-code-toggle--disabled"
+            >
+              <MarkupIcon /> No code available
+            </Button>
+          )}
+          {hasValidSource && (
+            <>
+              <ToggleButton
+                pressed={expanded}
+                aria-expanded={expanded}
+                aria-controls={sourceId}
+                onClick={() => setExpanded(!expanded)}
+                variant="ghost"
+                className={`docblock-code-toggle${expanded ? ' docblock-code-toggle--expanded' : ''}`}
+              >
+                <MarkupIcon /> {expanded ? 'Hide code' : 'Show code'}
+              </ToggleButton>
+              <Button variant="ghost" onClick={handleCopyCode}>
+                <CopyIcon /> {copied ? 'Copied!' : 'Copy code'}
+              </Button>
+            </>
+          )}
+          {additionalActionItems.map(({ title, className, onClick, disabled }, index: number) => (
+            <Button
+              key={index}
+              className={className}
+              onClick={onClick}
+              disabled={!!disabled}
+              variant="ghost"
+            >
+              {title}
+            </Button>
+          ))}
+        </ActionBar>
+      )}
+    </>
   );
 };
 
diff --git a/code/addons/docs/src/blocks/components/Source.tsx b/code/addons/docs/src/blocks/components/Source.tsx
index 5b0e7b36037b..92f9a9c6360b 100644
--- a/code/addons/docs/src/blocks/components/Source.tsx
+++ b/code/addons/docs/src/blocks/components/Source.tsx
@@ -44,8 +44,8 @@ export interface SourceCodeProps {
   /** The formatter the syntax highlighter uses for your story’s code. */
   format?: ComponentProps<typeof SyntaxHighlighter>['format'];
   /** Display the source snippet in a dark mode. */
-  dark?: boolean;
-}
+  dark?: boolean;  /** Whether to show the copy button. Defaults to true. */
+  copyable?: boolean;}
 
 export interface SourceProps extends SourceCodeProps {
   isLoading?: boolean;
@@ -91,6 +91,7 @@ const Source: FunctionComponent<SourceProps> = ({
   code,
   dark,
   format = true,
+  copyable = true,
   ...rest
 }) => {
   const { typography } = useTheme();
@@ -104,7 +105,7 @@ const Source: FunctionComponent<SourceProps> = ({
   const syntaxHighlighter = (
     <StyledSyntaxHighlighter
       bordered
-      copyable
+      copyable={copyable}
       format={format}
       language={language ?? 'jsx'}
       className="docblock-source sb-unstyled"

From 5db414c16fb6a1071874d67d28d7bd172a7f9df5 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 26 Feb 2026 17:06:15 +0100
Subject: [PATCH 03/10] UI: Remove toolbar padding for preview despite outline
 crop

---
 code/addons/docs/src/blocks/components/Preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index 331184b9f62d..303d1c81c7d4 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -224,7 +224,7 @@ export const Preview: FC<PreviewProps> = ({
         )}
       </PreviewContainer>
       {(withSource || additionalActionItems.length > 0) && (
-        <ActionBar className="sbdocs sbdocs-preview-actions">
+        <ActionBar className="sbdocs sbdocs-preview-actions" innerStyle={{ paddingInline: 0 }}>
           {hasSourceError && (
             <Button
               disabled

From 553aae3c9850a220e7a8a6bec83d73104a5eff0d Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 26 Feb 2026 17:24:28 +0100
Subject: [PATCH 04/10] Address PR review

---
 .../docs/src/blocks/components/Preview.tsx    | 34 +++++++++++--------
 .../docs/src/blocks/components/Source.tsx     |  6 ++--
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index 303d1c81c7d4..c8341101df6a 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -1,6 +1,7 @@
 import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
-import React, { Children, useCallback, useContext, useState } from 'react';
+import React, { Children, useCallback, useContext, useMemo, useState } from 'react';
 
+import { logger } from 'storybook/internal/client-logger';
 import { Bar, Button, ToggleButton, Zoom } from 'storybook/internal/components';
 import type { ActionItem } from 'storybook/internal/components';
 
@@ -155,10 +156,11 @@ export const Preview: FC<PreviewProps> = ({
   ...props
 }) => {
   const [expanded, setExpanded] = useState(isExpanded);
-  const [copied, setCopied] = useState(false);
+  const [copied, setCopied] = useState<string | null>(null);
   const [scale, setScale] = useState(1);
-  const [additionalActionItems] = useState<ActionItem[]>(
-    additionalActions ? [...additionalActions] : []
+  const additionalActionItems = useMemo(
+    () => (additionalActions ? [...additionalActions] : []),
+    [additionalActions]
   );
   const sourceId = useId();
   const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview', 'sb-unstyled']);
@@ -170,15 +172,17 @@ export const Preview: FC<PreviewProps> = ({
     await createCopyToClipboardFunction()(text);
   }, []);
 
-  const handleCopyCode = useCallback(() => {
-    if (copied) {
-      return;
+  const handleCopyCode = useCallback(async () => {
+    try {
+      await copyToClipboard(withSource?.code ?? '');
+      setCopied('Copied!');
+    } catch (err) {
+      logger.error(err);
+      setCopied('Copy error!');
     }
-    copyToClipboard(withSource?.code ?? '').then(() => {
-      setCopied(true);
-      globalThis.window.setTimeout(() => setCopied(false), COPIED_LABEL_ANIMATION_DURATION);
-    });
-  }, [copied, copyToClipboard, withSource?.code]);
+
+    globalThis.window.setTimeout(() => setCopied(null), COPIED_LABEL_ANIMATION_DURATION);
+  }, [copyToClipboard, withSource?.code]);
 
   const childProps = getChildProps(children);
 
@@ -227,6 +231,7 @@ export const Preview: FC<PreviewProps> = ({
         <ActionBar className="sbdocs sbdocs-preview-actions" innerStyle={{ paddingInline: 0 }}>
           {hasSourceError && (
             <Button
+              ariaLabel={false}
               disabled
               variant="ghost"
               className="docblock-code-toggle docblock-code-toggle--disabled"
@@ -237,6 +242,7 @@ export const Preview: FC<PreviewProps> = ({
           {hasValidSource && (
             <>
               <ToggleButton
+                ariaLabel={false}
                 pressed={expanded}
                 aria-expanded={expanded}
                 aria-controls={sourceId}
@@ -246,8 +252,8 @@ export const Preview: FC<PreviewProps> = ({
               >
                 <MarkupIcon /> {expanded ? 'Hide code' : 'Show code'}
               </ToggleButton>
-              <Button variant="ghost" onClick={handleCopyCode}>
-                <CopyIcon /> {copied ? 'Copied!' : 'Copy code'}
+              <Button ariaLabel={false} variant="ghost" onClick={handleCopyCode}>
+                <CopyIcon /> {copied ?? 'Copy code'}
               </Button>
             </>
           )}
diff --git a/code/addons/docs/src/blocks/components/Source.tsx b/code/addons/docs/src/blocks/components/Source.tsx
index 92f9a9c6360b..164aadaf38cf 100644
--- a/code/addons/docs/src/blocks/components/Source.tsx
+++ b/code/addons/docs/src/blocks/components/Source.tsx
@@ -44,8 +44,10 @@ export interface SourceCodeProps {
   /** The formatter the syntax highlighter uses for your story’s code. */
   format?: ComponentProps<typeof SyntaxHighlighter>['format'];
   /** Display the source snippet in a dark mode. */
-  dark?: boolean;  /** Whether to show the copy button. Defaults to true. */
-  copyable?: boolean;}
+  dark?: boolean;
+  /** Whether to show the copy button. Defaults to true. */
+  copyable?: boolean;
+}
 
 export interface SourceProps extends SourceCodeProps {
   isLoading?: boolean;

From b0f94e71f164cfe7e0f03ab8841b2315475e6757 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 26 Feb 2026 17:25:15 +0100
Subject: [PATCH 05/10] Address PR review

---
 .../src/components/components/ActionBar/ActionBar.stories.tsx  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/code/core/src/components/components/ActionBar/ActionBar.stories.tsx b/code/core/src/components/components/ActionBar/ActionBar.stories.tsx
index 5935b7bb7b81..8c3a04983b1d 100644
--- a/code/core/src/components/components/ActionBar/ActionBar.stories.tsx
+++ b/code/core/src/components/components/ActionBar/ActionBar.stories.tsx
@@ -27,9 +27,6 @@ export default {
       </div>
     ),
   ],
-  args: {
-    sb11FlexLayout: true,
-  },
 };
 
 export const SingleItem = () => <ActionBar actionItems={[{ title: 'Clear', onClick: action1 }]} />;

From 11ed0453ff77321da34432d6e00faca9c92e38bc Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 26 Feb 2026 17:31:33 +0100
Subject: [PATCH 06/10] Remove dead code

---
 code/addons/docs/src/blocks/components/Preview.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index c8341101df6a..609646f549e9 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -101,15 +101,11 @@ const StyledSource = styled(Source)(({ theme }) => ({
 }));
 
 const PreviewContainer = styled.div<PreviewProps>(
-  ({ theme, withSource, isExpanded }) => ({
+  ({ theme }) => ({
     position: 'relative',
     overflow: 'hidden',
     margin: '25px 0 40px',
     ...getBlockBackgroundStyle(theme),
-    borderBottomLeftRadius: withSource && isExpanded ? 0 : undefined,
-    borderBottomRightRadius: withSource && isExpanded ? 0 : undefined,
-    borderBottomWidth: isExpanded ? 0 : undefined,
-
     'h3 + &': {
       marginTop: '16px',
     },

From f8dabbf2ea8d00665dcc49ebff89eb45b3f77c04 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 26 Feb 2026 17:44:17 +0100
Subject: [PATCH 07/10] Fix between-story spacing in Preview!

---
 code/addons/docs/src/blocks/components/Preview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index 609646f549e9..bce5168efecf 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -81,6 +81,7 @@ const ChildrenContainer = styled.div<PreviewProps & { layout: Layout }>(
 
 const ActionBar = styled(Bar)({
   marginTop: -40,
+  marginBottom: 40,
 });
 
 const StyledSource = styled(Source)(({ theme }) => ({

From 3bc11e10e8895169a34db3f49a79f7e9caa07412 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Thu, 26 Feb 2026 18:01:22 +0100
Subject: [PATCH 08/10] Try explicit value syntax for viewport global

---
 code/addons/docs/src/blocks/components/Preview.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/src/blocks/components/Preview.stories.tsx b/code/addons/docs/src/blocks/components/Preview.stories.tsx
index a1c5108d234d..d75bac0b374d 100644
--- a/code/addons/docs/src/blocks/components/Preview.stories.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.stories.tsx
@@ -60,7 +60,7 @@ export const ActionBarWrapping = {
     </Preview>
   ),
   globals: {
-    viewport: 'mobile1',
+    viewport: { value: 'mobile1' },
   },
 };
 

From 38b12c9575ffef6800e6426ceccf1decddc34f46 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Fri, 27 Feb 2026 09:44:58 +0100
Subject: [PATCH 09/10] UI: Repair docs-story class selector

---
 code/addons/docs/src/blocks/components/Preview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index bce5168efecf..ceb904044056 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -208,6 +208,7 @@ export const Preview: FC<PreviewProps> = ({
             columns={columns}
             layout={layout}
             inline={inline}
+            className="docs-story"
           >
             <Zoom.Element centered={layout === 'centered'} scale={inline ? scale : 1}>
               {Array.isArray(children) ? (

From 2f69d12d64e33b26083cd430c0c59bbad1c13d66 Mon Sep 17 00:00:00 2001
From: Steve Dodier-Lazaro <sidnioulz@gmail.com>
Date: Fri, 27 Feb 2026 12:47:36 +0100
Subject: [PATCH 10/10] UI: Repair docs-story decorators for primary stories

---
 .../src/blocks/examples/ButtonSomeAutodocs.stories.tsx |  5 +++++
 code/core/src/backgrounds/decorator.ts                 | 10 ++++++++--
 docs/_snippets/storybook-addon-use-global.md           |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/code/addons/docs/src/blocks/examples/ButtonSomeAutodocs.stories.tsx b/code/addons/docs/src/blocks/examples/ButtonSomeAutodocs.stories.tsx
index d691e2b8f91b..0a477e1d64c0 100644
--- a/code/addons/docs/src/blocks/examples/ButtonSomeAutodocs.stories.tsx
+++ b/code/addons/docs/src/blocks/examples/ButtonSomeAutodocs.stories.tsx
@@ -28,6 +28,11 @@ export const Secondary: Story = {
   args: {
     label: 'Button',
   },
+  globals: {
+    backgrounds: {
+      grid: true,
+    },
+  },
 };
 
 export const ForcedBgLight: Story = {
diff --git a/code/core/src/backgrounds/decorator.ts b/code/core/src/backgrounds/decorator.ts
index bb0d35de9cfc..a58e7e14cfb0 100644
--- a/code/core/src/backgrounds/decorator.ts
+++ b/code/core/src/backgrounds/decorator.ts
@@ -34,8 +34,14 @@ export const withBackgroundAndGrid: DecoratorFunction = (StoryFn, context) => {
   const showGrid = typeof data === 'string' ? false : data.grid || false;
   const shownBackground = !!item && !disable;
 
-  const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
-  const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
+  const backgroundSelector =
+    viewMode === 'docs'
+      ? `#anchor--${id} .docs-story, #anchor--primary--${id} .docs-story`
+      : '.sb-show-main';
+  const gridSelector =
+    viewMode === 'docs'
+      ? `#anchor--${id} .docs-story, #anchor--primary--${id} .docs-story`
+      : '.sb-show-main';
 
   const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded';
   const defaultOffset = viewMode === 'docs' ? 20 : isLayoutPadded ? 16 : 0;
diff --git a/docs/_snippets/storybook-addon-use-global.md b/docs/_snippets/storybook-addon-use-global.md
index dd12a1767c72..d1913cef1424 100644
--- a/docs/_snippets/storybook-addon-use-global.md
+++ b/docs/_snippets/storybook-addon-use-global.md
@@ -21,7 +21,7 @@ export const withGlobals = (StoryFn: StoryFunction<Renderer>, context: StoryCont
   const isInDocs = context.viewMode === 'docs';
 
   const outlineStyles = useMemo(() => {
-    const selector = isInDocs ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+    const selector = isInDocs ? `#anchor--${context.id} .docs-story, #anchor--primary--${context.id} .docs-story` : '.sb-show-main';
 
     return outlineCSS(selector);
   }, [context.id]);