@codecademy/styleguide 79.2.0-alpha.f9ca97.0 → 79.2.1-alpha.27bc7c.0

package/.storybook/components/ImageWrapper.tsx

@@ -3,8 +3,9 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 
 interface ImageWrapperProps {
-  src: string;
   alt: string;
+  height: number | string;
+  src: string;
 }
 
 const StyledImage = styled.img`
@@ -15,12 +16,13 @@ const StyledImage = styled.img`
 export const ImageWrapper: React.FC<ImageWrapperProps & BoxProps> = ({
   src,
   alt,
+  height = '216px',
   ...props
 }) => {
   return (
     <Box
       width={'100%'}
-      height="216px"
+      height={height}
       display="flex"
       justifyContent={'center'}
       alignItems="center"

package/.storybook/preview.ts

@@ -175,20 +175,21 @@ export const globalTypes = {
     toolbar: {
       icon: 'transfer',
       items: [
-        { value: 'true', title: 'Logical' },
         { value: 'false', title: 'Physical' },
+        { value: 'true', title: 'Logical' },
       ],
       showName: true,
     },
   },
   direction: {
     name: 'Direction',
-    description: 'Text direction for the page',
+    description: 'Text direction (LTR or RTL)',
     defaultValue: 'ltr',
     toolbar: {
+      icon: 'arrowright',
       items: [
-        { value: 'ltr', icon: 'arrowright', title: 'Left-To-Right' },
-        { value: 'rtl', icon: 'arrowleft', title: 'Right-To-Left' },
+        { value: 'ltr', title: 'Left-to-Right (LTR)', icon: 'arrowright' },
+        { value: 'rtl', title: 'Right-to-Left (RTL)', icon: 'arrowleft' },
       ],
       showName: true,
     },

package/.storybook/theming/GamutThemeProvider.tsx

@@ -12,6 +12,8 @@ import {
 } from '@codecademy/gamut-styles/src';
 import { Theme } from '@emotion/react';
 
+const STORYBOOK_CSP_NONCE = 'storybook-csp-nonce';
+
 /**
  * Story functions must be called as a regular function to avoid full-remounts
  * See: https://github.com/storybookjs/storybook/issues/12255
@@ -68,9 +70,8 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
           alwaysSetVariables
           bg={themeBackground[colorMode]}
           ref={storyRef}
-          dir={direction}
         >
-          {Story()}
+          <div dir={direction}>{Story()}</div>
         </Background>
       </GamutProvider>
     );
@@ -86,9 +87,8 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
         alwaysSetVariables
         bg={themeBackground[colorMode]}
         ref={storyRef}
-        dir={direction}
       >
-        {Story()}
+        <div dir={direction}>{Story()}</div>
       </Background>
     </GamutProvider>
   );

package/CHANGELOG.md

@@ -3,12 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [79.2.0-alpha.f9ca97.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.2.0-alpha.f9ca97.0) (2026-02-13)
+### [79.2.1-alpha.27bc7c.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1-alpha.27bc7c.0) (2026-03-12)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
+## [79.2.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.4...@codecademy/styleguide@79.2.0) (2026-03-12)
 
 ### Features
 
-- Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution ([#3234](https://github.com/Codecademy/gamut/issues/3234)) ([7efbb9a](https://github.com/Codecademy/gamut/commit/7efbb9aabcd07dc6429432d007eaa5603ac1d70c))
-- Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution ([#3234](https://github.com/Codecademy/gamut/issues/3234)) ([567a6ae](https://github.com/Codecademy/gamut/commit/567a6aeffb3e8628db4b5c9a37dab965b716d969))
+- Logical properties ([4c340c3](https://github.com/Codecademy/gamut/commit/4c340c3949bad30fce4f9ffabb2018763df5c4ba))
+
+### [79.1.4](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.3...@codecademy/styleguide@79.1.4) (2026-03-09)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
+### [79.1.3](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3) (2026-03-02)
+
+### Bug Fixes
+
+- **GamutProvider:** CSP improvements ([1026353](https://github.com/Codecademy/gamut/commit/10263537c190aff0e5686872da2be2a30b1d9201)), closes [/github.com/adobe/react-spectrum/issues/8273#issuecomment-3897820426](https://github.com/Codecademy//github.com/adobe/react-spectrum/issues/8273/issues/issuecomment-3897820426)
+
+### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
+
+**Note:** Version bump only for package @codecademy/styleguide
 
 ### [79.1.1](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.0...@codecademy/styleguide@79.1.1) (2026-02-11)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.0-alpha.f9ca97.0",
+  "version": "79.2.1-alpha.27bc7c.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "d73668577cae898037fa05bed7b91cc4c7312a9d"
+  "gitHead": "9f247f1b69283a57fba7a376b0caa2ca335c6043"
 }

package/src/lib/Foundations/System/Props/Layout.mdx

@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { AboutHeader, TokenTable } from '~styleguide/blocks';
 
 import { defaultColumns, getPropRows } from '../../shared/elements';
+import * as LayoutStories from './Layout.stories';
 
 export const parameters = {
   title: 'Layout',
@@ -11,12 +12,22 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta title="Foundations/System/Props/Layout" />
+<Meta title="Foundations/System/Props/Layout" of={LayoutStories} />
 
 <AboutHeader {...parameters} />
 
 Layout props control the visual structure and dimensions of elements. These properties determine how components take up space, their display behavior, and how they align within their containers. Use these props to set widths, heights, overflow behavior, and container types for responsive layouts.
 
+## Examples
+
+### Overflow X
+
+<Canvas of={LayoutStories.OverflowXExample} />
+
+### Overflow Y
+
+<Canvas of={LayoutStories.OverflowYExample} />
+
 ```tsx
 import styled from '@emotion/styled';
 import { system } from '@codecademy/gamut-styles';
@@ -31,4 +42,14 @@ const LayoutExample = styled.div(system.layout);
 />;
 ```
 
+## Examples
+
+### Width
+
+<Canvas of={LayoutStories.WidthExample} />
+
+### Direction
+
+<Canvas of={LayoutStories.DirectionExample} />
+
 <TokenTable rows={getPropRows('layout')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Layout.stories.tsx

@@ -0,0 +1,85 @@
+import { Box, Markdown } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Box> = {
+  title: 'Foundations/System/Props/Layout',
+  component: Box,
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+export const OverflowXExample: Story = {
+  render: () => (
+    <Box
+      bg="background-selected"
+      overflowX="scroll"
+      p={16}
+      whiteSpace="nowrap"
+      width="200px"
+    >
+      <Box
+        bg="primary"
+        color="background-contrast"
+        display="inline-block"
+        p={8}
+      >
+        This content is wider than its container and has{' '}
+        <Markdown text="`overflowX='scroll'`." /> Inspect the example to see
+        what CSS properties are rendered.
+      </Box>
+    </Box>
+  ),
+};
+
+export const OverflowYExample: Story = {
+  render: () => (
+    <Box bg="background-selected" height="100px" overflowY="scroll" p={16}>
+      <Box bg="primary" color="background-contrast" p={8}>
+        This content is taller than its container and has{' '}
+        <Markdown text="`overflowY='scroll'`." /> Inspect the example to see
+        what CSS properties are rendered.
+        <Box mt={16}>Line 2</Box>
+        <Box mt={16}>Line 3</Box>
+        <Box mt={16}>Line 4</Box>
+        <Box mt={16}>Line 5</Box>
+      </Box>
+    </Box>
+  ),
+};
+
+export const WidthExample: Story = {
+  render: () => (
+    <Box bg="background-selected" p={16}>
+      <Box
+        bg="primary"
+        color="background-contrast"
+        height="300px"
+        p={16}
+        width="50%"
+      >
+        This box has <Markdown text="`width='50%' and height='300px'`." />{' '}
+        Inspect the box to see the rendered CSS property.
+      </Box>
+    </Box>
+  ),
+};
+
+export const DirectionExample: Story = {
+  render: () => (
+    <Box display="flex" flexDirection="row" gap={16}>
+      <Box bg="background-selected" p={16} width="50%">
+        <Box bg="primary" color="background-contrast" direction="ltr" p={16}>
+          <Markdown text="`direction='ltr'`." /> Left-to-right text direction
+          (default for English).
+        </Box>
+      </Box>
+      <Box bg="background-selected" p={16} width="50%">
+        <Box bg="primary" color="background-contrast" direction="rtl" p={16}>
+          <Markdown text="`direction='rtl'`." /> Right-to-left text direction
+          (used for Arabic, Hebrew, etc.).
+        </Box>
+      </Box>
+    </Box>
+  ),
+};

package/src/lib/Foundations/System/Props/Positioning.stories.tsx

@@ -11,7 +11,7 @@ type Story = StoryObj<typeof Box>;
 
 export const PositionExample: Story = {
   render: () => (
-    <Box bg="background-selected" height="150px" position="relative">
+    <Box bg="background-selected" height="250px" position="relative">
       <Box
         bg="primary"
         color="background-contrast"

package/src/lib/Meta/Installation.mdx

@@ -68,7 +68,7 @@ GamutProvider handles a few critical tasks that need to happen in order for comp
 - **Next** `_app.tsx`
 - **Gatsby** `gatsby-ssr.js` `gatsby-browser.js` and use `wrapRootElement` in each.
 
-4. Add required types for your theme, which will determine what props Gamut components allow.
+5. Add required types for your theme, which will determine what props Gamut components allow.
 
 ```tsx
 // theme.d.ts
@@ -84,7 +84,7 @@ declare module '@emotion/react' {
 
 For more information this declaration please checkout the [official emotion documentation](https://emotion.sh/docs/typescript#define-a-theme)!
 
-5. Start Building!
+6. Start Building!
 
 ```tsx
 import { Background } from '@codecademy/gamut-styles';
@@ -96,3 +96,15 @@ export const App = () => (
   </Background>
 );
 ```
+
+### Content Security Policy (CSP)
+
+If your app uses a strict Content-Security-Policy (e.g. `style-src` without `'unsafe-inline'`), pass a nonce to `GamutProvider` so Emotion and other Gamut-managed style tags are allowed:
+
+```tsx
+<GamutProvider nonce={yourCspNonce}>
+  <App />
+</GamutProvider>
+```
+
+Your nonce should be the same value you use in your CSP header (e.g. `style-src 'self' 'nonce-{value}'`).

package/src/lib/Molecules/Popover/Popover.stories.tsx

@@ -80,6 +80,7 @@ export const Above: Story = {
 export const Below: Story = {
   render: (args) => <PopoverExample {...args} beak="center" position="below" />,
 };
+
 export const CenterLeft: Story = {
   render: (args) => (
     <PopoverExample
@@ -113,6 +114,7 @@ export const PopoverCheckerDense: Story = {
     />
   ),
 };
+
 export const PopoverCheckerLoose: Story = {
   render: (args) => (
     <PopoverExample
@@ -122,6 +124,7 @@ export const PopoverCheckerLoose: Story = {
     />
   ),
 };
+
 export const PopoverCheckerRegular: Story = {
   render: (args) => (
     <PopoverExample
@@ -131,6 +134,7 @@ export const PopoverCheckerRegular: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalADense: Story = {
   render: (args) => (
     <PopoverExample
@@ -140,6 +144,7 @@ export const PopoverDiagonalADense: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalALoose: Story = {
   render: (args) => (
     <PopoverExample
@@ -149,6 +154,7 @@ export const PopoverDiagonalALoose: Story = {
     />
   ),
 };
+
 export const PopoverDiagonalARegular: Story = {
   render: (args) => (
     <PopoverExample

package/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx

@@ -11,7 +11,7 @@ export const parameters = {
     type: 'figma',
     url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/branch/ayKNSg6QvZUjsgw0FFysW4/%F0%9F%93%90-Gamut?type=design&node-id=41538-55277&mode=design&t=fGkWf5GSl5cj5fQo-0',
   },
-  status: 'updating',
+  status: 'current',
   source: {
     repo: 'gamut',
     githubLink:

package/src/lib/Organisms/BarChart/BarChart.mdx

@@ -0,0 +1,484 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+
+import {
+  Callout,
+  ComponentHeader,
+  ImageWrapper,
+  LinkTo,
+} from '~styleguide/blocks';
+
+import * as BarChartStories from './BarChart.stories';
+
+export const parameters = {
+  title: 'BarChart',
+  subtitle: `A horizontal bar chart for visualizing comparative data`,
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=55123-4176',
+  },
+  status: 'current',
+  source: {
+    repo: 'gamut',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/BarChart',
+  },
+};
+
+<Meta of={BarChartStories} />
+
+<ComponentHeader {...parameters} />
+
+## Usage
+
+Use `BarChart` to display comparative data across categories, such as skills progress, XP earned, or any quantitative metrics that benefit from visual comparison.
+
+### Best practices:
+
+- Use consistent units across all bars in a chart
+- Limit the number of bars to maintain readability (5-10 is optimal)
+- Consider using the stacked variant to show progress toward a goal
+- Sort bars by value (descending) when ranking is important
+- Ensure bar colors maintain at least a 3:1 contrast ratio with the background
+
+### When NOT to use:
+
+- **Progress tracking** – for displaying the completion status of a task, use the <LinkTo id="Atoms/ProgressBar">ProgressBar</LinkTo> component.
+
+## Anatomy
+
+<ImageWrapper
+  alt="The anatomy of the BarChart component, detailed below."
+  height="auto"
+  src="./organisms/barchart.png"
+/>
+
+1. **Bar row**
+
+- Represents a single category and its values.
+
+2. **Category icon** (optional)
+
+- Use to clarify or reinforce the category name.
+
+3. **Category label**
+
+- Displays the category name on the y-axis (e.g. skill or metric name).
+
+4. **Scale / value axis**
+
+- Displays gridlines and labels to indicate the scale of the data values.
+- The number of dividers, as well as the minimum and maximum values on the value axis, are adjustable.
+- The minimum value should always be 0.
+
+5. **Series one value**
+
+- Displays the numerical value of the series one bar for clarity and precise data representation.
+
+6. **Series two value** (optional)
+
+- Displays the numerical value of the series two bar for clarity and precise data representation.
+- Include a second series value by using the stacked property. Stacked bar charts compare parts of a whole and are best suited for displaying discrete data segmented into meaningful categories.
+
+7. **Series one bar**
+
+- A visual representation of the first value for the associated category.
+- By default, the first series bars use the text color, however, it can be overridden to any color.
+- Bars include a required border that uses white or navy, chosen automatically to ensure the highest contrast with the bar color.
+
+8. **Series two bar** _(bars with zero value)_
+
+- A visual representation of the second value for the associated category.
+- By default, the second series bars use the primary color, however, it can be overridden to any color.
+- Bars include a required border that uses white or navy, chosen automatically to ensure the highest contrast with the bar color.
+
+## Variants
+
+### Simple (Non-stacked)
+
+Use the simple variant when showing single values per category. Only `seriesOneValue` is provided.
+
+<Canvas of={BarChartStories.Default} />
+
+### Stacked
+
+Use the stacked variant when showing progress within a total. Provide both `seriesOneValue` (progress) and `seriesTwoValue` (total).
+
+<Canvas of={BarChartStories.Stacked} />
+
+### With Icons
+
+Add icons to labels for better visual identification of categories.
+
+<Canvas of={BarChartStories.WithIcons} />
+
+### Animated
+
+Enable entrance animations for a more engaging experience.
+
+<Canvas of={BarChartStories.Animated} />
+
+### Interactive
+
+Rows can be made interactive with `onClick` handlers or `href` links.
+
+<Canvas of={BarChartStories.Interactive} />
+
+### With Links
+
+When a bar has an `href` link, an `aria-label` is automatically generated from the bar's data and applied to the anchor. The label summarizes the bar's values (e.g., "100 XP in Python" for a simple bar, or "200 XP gained - now at 1500 XP in Python" for a stacked bar), so screen reader users get a clear, data-driven description without manual `aria-label` props.
+
+<Canvas of={BarChartStories.WithLinks} />
+
+## Title and description
+
+The BarChart component uses semantic HTML to provide context and accessibility. The chart is wrapped in a [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure) element, and the description is displayed in a [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption) element. This semantic structure helps screen readers and other assistive technologies understand the relationship between the chart and its description. **Visual title + description is the greatly preferred pattern** for accessibility and user experience.
+
+**Preferred pattern: Visual title + description**
+
+Provide both `title` and `description` props to make the chart's purpose and key takeaways clear to all users:
+
+- `title`: A heading that identifies the chart. Can be a string or an object with `{ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', title: string, variant?: Text['variant'] }` to specify the heading level and optionally override the default styling with a <LinkTo id="Typography/Text">Text variant</LinkTo>.
+- `description`: A summary of the information or the overall takeaway displayed in the `<figcaption>` element.
+
+<Canvas of={BarChartStories.WithVisualTitleAndDescription} />
+
+**Alternative patterns:**
+`hideTitle` and `hideDescription` will keep the screenreader text but hide the visual descriptions.
+
+<Canvas of={BarChartStories.WithHiddenTitleAndDescription} />
+
+**External title with visual description:** Use `aria-labelledby` for the title when the title exists elsewhere but you want to display the description.
+
+<Canvas of={BarChartStories.WithExternalTitle} />
+
+**Best practices:**
+
+- Always provide a `description` prop - it's required and should summarize the chart's key information
+- Use semantic heading levels for titles (h1-h6) to maintain proper document structure
+- When using `aria-labelledby`, ensure the referenced element exists and is properly labeled
+
+## Sorting
+
+BarChart includes an optional sorting dropdown in the title area. The dropdown only renders when the `sortFns` prop is provided. You can control which sort options appear by including string literals or custom sort functions in the array.
+
+**String Literals:**
+
+- `'alphabetically'` - Adds both "Label (A-Z)" and "Label (Z-A)" options
+- `'numerically'` - Adds both "Value (Low-High)" and "Value (High-Low)" options
+- `'none'` - Adds "None" option (preserves original order)
+
+**Custom Sort Functions:**
+You can also provide custom sort functions as objects with:
+
+- `label`: The text displayed in the dropdown
+- `value`: A unique identifier for the sort option
+- `sortFn`: A function that takes an array of bars and returns a sorted array
+
+**Type Definition:**
+
+```typescript
+type CustomSortOption<TBar extends BarProps = BarProps> = {
+  label: string;
+  value: string;
+  sortFn: (bars: TBar[]) => TBar[];
+};
+
+// sortFns prop accepts:
+sortFns?: ('alphabetically' | 'numerically' | 'none' | CustomSortOption<TBar>)[]
+```
+
+**Automatic Type Inference:**
+TypeScript automatically infers the bar type from your `barValues` prop. This means custom properties (like `dateAdded`, `category`, etc.) are automatically typed in your sort functions - no type assertions needed!
+
+```typescript
+const barsWithDates = [
+  {
+    categoryLabel: 'Python',
+    seriesOneValue: 1500,
+    dateAdded: new Date('2023-01-15'),
+  },
+  {
+    categoryLabel: 'JavaScript',
+    seriesOneValue: 2000,
+    dateAdded: new Date('2023-03-20'),
+  },
+  // ...
+];
+
+<BarChart
+  barValues={barsWithDates}
+  sortFns={[
+    {
+      label: 'Recently Added',
+      value: 'recent',
+      sortFn: (bars) => {
+        // TypeScript automatically knows bars have dateAdded property!
+        return [...bars].sort((a, b) => {
+          const aDate = a.dateAdded as Date | undefined;
+          const bDate = b.dateAdded as Date | undefined;
+          if (!aDate || !bDate) return 0;
+          return bDate.getTime() - aDate.getTime();
+        });
+      },
+    },
+  ]}
+/>;
+```
+
+**Note:** Since `BarProps` uses `Record<string, unknown>` for extensibility, custom properties are typed as `unknown` by default. You may need a simple type assertion (`as Date | undefined`) when accessing them, but the property names are fully type-checked.
+
+<Canvas of={BarChartStories.WithSorting} />
+
+**Example with Custom Sort Functions:**
+
+Custom sort functions can access additional properties on `BarProps` for domain-specific sorting, such as sorting by dates or categories.
+
+<Canvas of={BarChartStories.WithCustomSorting} />
+
+## Custom styling
+
+BarChart supports custom color styling through the `styleConfig` prop, allowing you to customize the appearance of chart elements to match your design needs.
+
+### Style configuration options
+
+The `styleConfig` prop accepts an object with the following optional properties:
+
+- **`textColor`**: Color for text labels (y-axis labels). Defaults to `'text'`
+- **`seriesOneBarColor`**: Color for the series one bar (seriesOneValue: overlay in stacked charts, only bar in simple charts). Defaults to `'text'`
+- **`seriesTwoBarColor`**: Color for the series two bar (seriesTwoValue: full bar in stacked charts; unused in simple charts). Defaults to `'primary'`
+- **`seriesOneLabel`**: Color for the series one value label (first right label when stacked, or displayValue when not stacked). Defaults to `'text-secondary'`
+- **`seriesTwoLabel`**: Color for the series two value label (displayValue when stacked). Defaults to `'primary'`
+
+All color values should be valid color tokens from the Gamut design system. When customizing colors, ensure they maintain at least a 3:1 contrast ratio with the background for accessibility.
+
+### Default values
+
+If `styleConfig` is not provided, BarChart uses these default colors:
+
+```typescript
+{
+  textColor: 'text',
+  seriesOneBarColor: 'text',
+  seriesTwoBarColor: 'primary',
+  seriesOneLabel: 'text-secondary',
+  seriesTwoLabel: 'primary',
+}
+```
+
+### Example
+
+<Canvas of={BarChartStories.CustomStyles} />
+
+## Custom scale
+
+BarChart allows you to customize the x-axis scale interval using the `scaleInterval` prop, which controls the spacing and granularity of scale markers along the horizontal axis.
+
+### Scale configuration
+
+The `scaleInterval` prop determines the interval between scale markers on the x-axis. By default, BarChart automatically calculates an appropriate scale interval based on the `maxScaleValue` value (the scale always starts at 0). However, you can override this with a custom interval to achieve more granular or specific scale markings.
+
+**When to use custom scale:**
+
+- When you need specific scale intervals (e.g., increments of 250, 500, or 1000)
+- When the automatic scale calculation doesn't provide the desired granularity
+- When you want to match scale intervals across multiple charts for consistency
+- When you need scale markers at specific values for better data interpretation
+
+**How it works:**
+
+The `scaleInterval` value represents the interval between consecutive scale markers. For example:
+
+- `scaleInterval: 250` creates markers at 0, 250, 500, 750, 1000, etc.
+- `scaleInterval: 500` creates markers at 0, 500, 1000, 1500, 2000, etc.
+
+The number of tick marks is automatically calculated as: `Math.ceil(maxScaleValue / scaleInterval) + 1`
+
+### Example
+
+<Canvas of={BarChartStories.CustomScale} />
+
+## Color modes
+
+BarChart automatically adapts to both light and dark color modes, ensuring proper contrast and readability in all themes. The component uses semantic color tokens that adjust based on the current color mode. The `styleConfig` prop should be provided by semantic color tokens to ensure the `BarChart` is accessible in all color modes.
+
+## Accessibility considerations
+
+### Chart and row labeling
+
+**Chart-level labeling:**
+
+- Always provide either `title` or `aria-labelledby` to describe the chart (see Title and description section below for details)
+- The chart is wrapped in a semantic `<figure>` element for proper structure
+
+**Row-level labeling:**
+
+- For non-interactive bars: A hidden text element (visible only to screen readers) is automatically added as the first child of each list item, summarizing the bar's values (e.g., "100 XP in Python")
+- For interactive bars (with `onClick` or `href`): An `aria-label` is automatically generated from the bar's data and applied to the button or link element, ensuring proper screen reader announcements
+- All accessibility labels are automatically generated from the bar's data - no manual `aria-label` props are required
+
+## UX writing
+
+- Keep y-axis labels concise (1-3 words)
+- Use consistent unit labels (e.g., "XP", "hours", "points")
+- Consider locale-aware number formatting for international audiences
+
+## Interactive states
+
+BarChart supports both interactive and static bar rows, each with distinct visual states.
+
+### Static bars
+
+When bars have neither `onClick` handlers nor `href` links, they are rendered as static, non-interactive elements.
+
+<Canvas of={BarChartStories.Default} />
+
+### Interactive bars
+
+When bars have `onClick` handlers or `href` links, they become interactive. Interactive bars are rendered as buttons or anchor elements, providing full keyboard accessibility and proper semantic HTML.
+
+<Canvas of={BarChartStories.Interactive} />
+
+## Internationalization
+
+<Callout text="We are currently updating global internationalization in Gamut, so the following features are subject to change." />
+
+BarChart supports internationalization through the `translations` prop. You can customize user-facing strings (including sort dropdown and accessibility summaries) and configure locale-aware number formatting. The prop accepts `PartialBarChartTranslations`: override only the keys you need; nested `accessibility` and `sortOptions` are merged with defaults at runtime.
+
+### Translation structure
+
+- **sortLabel**, **sortOptions**, and **locale** — Always strings. Control the sort dropdown label, option labels, and number-formatting locale.
+- **Accessibility** — Two optional summary functions; when omitted, default English summaries are used. Each function receives context and returns the full summary string.
+  - **stackedBarSummary** — Used for stacked (two-value) rows. Context includes `seriesOneValue`, `seriesTwoValue`, **gained** (seriesTwoValue - seriesOneValue), `unit`, `locale`, `categoryLabel`.
+  - **singleValueBarSummary** — Used for all single-value rows. Context includes `value`, `unit`, `locale`, `categoryLabel`.
+
+### Where accessibility summaries appear
+
+Each bar row gets one summary from either `stackedBarSummary` (stacked rows) or `singleValueBarSummary` (single-value rows). That string is then exposed as **`aria-label`** on the row's link or button when the row is interactive, or as **screenreader-only text** (visually hidden) when the row is not interactive.
+
+<table>
+  <thead>
+    <tr>
+      <th>Key</th>
+      <th>Used for</th>
+      <th>Context (props)</th>
+      <th>Default English interpolation</th>
+      <th>Summary exposed as</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>stackedBarSummary</code>
+      </td>
+      <td>Stacked rows (two values per row)</td>
+      <td>
+        <code>seriesOneValue</code>, <code>seriesTwoValue</code>,{' '}
+        <code>gained</code>, <code>unit</code>, <code>locale</code>,{' '}
+        <code>categoryLabel</code>
+      </td>
+      <td>
+        <code>
+          Starting value - &#123;seriesOneValue&#125;&#123;unit&#125;.
+          &#123;gained&#125;&#123;unit&#125; gained - now at
+          &#123;seriesTwoValue&#125;&#123;unit&#125; in
+          &#123;categoryLabel&#125;
+        </code>
+      </td>
+      <td>
+        <code>aria-label</code> (if link/button) or screenreader-only text
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>singleValueBarSummary</code>
+      </td>
+      <td>Single-value rows</td>
+      <td>
+        <code>value</code>, <code>unit</code>, <code>locale</code>,{' '}
+        <code>categoryLabel</code>
+      </td>
+      <td>
+        <code>
+          &#123;value&#125;&#123;unit&#125; in &#123;categoryLabel&#125;
+        </code>
+      </td>
+      <td>
+        <code>aria-label</code> (if link/button) or screenreader-only text
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+### Basic usage
+
+Provide only the translations you want to override; the rest fall back to default English.
+
+```tsx
+<BarChart
+  barValues={barData}
+  description="Progreso de habilidades"
+  maxScaleValue={200}
+  sortFns={['alphabetically', 'none']}
+  title="Habilidades"
+  translations={{
+    accessibility: {
+      stackedBarSummary: (ctx) =>
+        `Valor inicial - ${ctx.seriesOneValue} ${ctx.unit}. ${ctx.gained} ${ctx.unit} ganado - ahora en ${ctx.seriesTwoValue} ${ctx.unit} en ${ctx.categoryLabel}`,
+      singleValueBarSummary: (ctx) =>
+        `${ctx.value} ${ctx.unit} en ${ctx.categoryLabel}`,
+    },
+    locale: 'es',
+    sortLabel: 'Ordenar por:',
+    sortOptions: {
+      labelAsc: 'Etiqueta (A-Z)',
+      labelDesc: 'Etiqueta (Z-A)',
+      none: 'Ninguno',
+      valueAsc: 'Valor (Bajo-Alto)',
+      valueDesc: 'Valor (Alto-Bajo)',
+    },
+  }}
+/>
+```
+
+<Canvas of={BarChartStories.WithStringTranslations} />
+
+### Partial translations and locale
+
+You can override a single key; the rest keep their defaults. The **locale** property controls number formatting (scale labels, value labels) via `Intl.NumberFormat`:
+
+```tsx
+// Only change locale; sort and accessibility use defaults
+translations={{ locale: 'de-DE' }}
+
+// Override just sort label and locale
+translations={{
+  locale: 'en-GB',
+  sortLabel: 'Sort by:',
+}}
+```
+
+<Canvas of={BarChartStories.WithFunctionTranslations} />
+
+**Best practices:**
+
+- Provide summary functions for the locales your app uses; use default behavior when the default English is acceptable.
+- Use appropriate locale codes (e.g. `'en-US'`, `'es-ES'`, `'fr-FR'`) for number formatting.
+- Test accessibility summaries with screen readers in the target language.
+- Reuse translation objects across BarChart instances where possible.
+
+## Container query
+
+BarChart uses CSS container queries to determine responsive behavior based on the **chart container width** rather than viewport width. This ensures optimal display when the chart is placed in constrained layouts like sidebars or narrow columns.
+
+**Layout behavior:**
+
+- **Narrow container (below 480px)**: Label and value appear together above the bar in a single row.
+- **Wide container (480px and up, `c_xs` breakpoint)**: Label on the left, bar in the center, value on the right.
+
+The chart establishes a size container via `containerType="inline-size"` on the figure wrapper, so the layout responds to the width of the BarChart’s parent. For more on container queries in Gamut, see <LinkTo id="Foundations/System/Responsive Properties">Responsive properties</LinkTo>.
+
+## Playground
+
+<Canvas sourceState="shown" of={BarChartStories.Default} />
+
+<Controls />

package/src/lib/Organisms/BarChart/BarChart.stories.tsx

@@ -0,0 +1,352 @@
+import {
+  BarChart,
+  BarProps,
+  Box,
+  PartialBarChartTranslations,
+} from '@codecademy/gamut';
+import {
+  BookFlipPageIcon,
+  DataScienceIcon,
+  TerminalIcon,
+} from '@codecademy/gamut-icons';
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof BarChart> = {
+  component: BarChart,
+  args: {
+    description: 'Chart showing programming language experience levels',
+    maxScaleValue: 2000,
+    title: 'Skills experience chart',
+    unit: 'XP',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BarChart>;
+
+const simpleBarData: BarProps[] = [
+  { categoryLabel: 'Python', seriesOneValue: 1500 },
+  { categoryLabel: 'JavaScript', seriesOneValue: 2000 },
+  { categoryLabel: 'HTML/CSS', seriesOneValue: 800 },
+  { categoryLabel: 'SQL', seriesOneValue: 600 },
+  { categoryLabel: 'React', seriesOneValue: 450 },
+];
+
+const stackedBarData: BarProps[] = [
+  { categoryLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
+  {
+    categoryLabel: 'JavaScript',
+    icon: TerminalIcon,
+    seriesOneValue: 1800,
+    seriesTwoValue: 2000,
+  },
+  { categoryLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
+  { categoryLabel: 'SQL', seriesOneValue: 550, seriesTwoValue: 600 },
+  { categoryLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
+];
+
+const accessibilityBarData: BarProps[] = [
+  { categoryLabel: 'Python', seriesOneValue: 200, seriesTwoValue: 1500 },
+  {
+    categoryLabel: 'JavaScript',
+    seriesOneValue: 1800,
+    seriesTwoValue: 2000,
+    href: '/javascript',
+  },
+  { categoryLabel: 'HTML/CSS', seriesOneValue: 600, seriesTwoValue: 800 },
+  { categoryLabel: 'SQL', seriesOneValue: 550, href: '/sql' },
+  { categoryLabel: 'Rust', seriesOneValue: 400 },
+  { categoryLabel: 'React', seriesOneValue: 300, seriesTwoValue: 450 },
+];
+
+const accessibilityTranslations: PartialBarChartTranslations = {
+  accessibility: {
+    stackedBarSummary: (ctx) =>
+      `${ctx.seriesOneValue} ${ctx.unit} gained — now at ${ctx.seriesTwoValue} ${ctx.unit} in ${ctx.categoryLabel}`,
+    singleValueBarSummary: (ctx) =>
+      `${ctx.value} ${ctx.unit} in ${ctx.categoryLabel}`,
+  },
+  locale: 'en',
+};
+
+const barDataWithIcons: BarProps[] = [
+  {
+    categoryLabel: 'Python',
+    seriesOneValue: 200,
+    seriesTwoValue: 1500,
+    icon: TerminalIcon,
+  },
+  {
+    categoryLabel: 'JavaScript',
+    seriesOneValue: 150,
+    seriesTwoValue: 2000,
+    icon: TerminalIcon,
+  },
+  {
+    categoryLabel: 'Data Science',
+    seriesOneValue: 100,
+    seriesTwoValue: 800,
+    icon: DataScienceIcon,
+  },
+  {
+    categoryLabel: 'Backend',
+    seriesOneValue: 50,
+    seriesTwoValue: 600,
+    icon: TerminalIcon,
+  },
+  {
+    categoryLabel: 'Reading',
+    seriesOneValue: 75,
+    seriesTwoValue: 450,
+    icon: BookFlipPageIcon,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    barValues: simpleBarData,
+    title: 'Skills experience chart',
+    description: 'Chart showing programming language experience levels',
+  },
+};
+
+export const Stacked: Story = {
+  args: {
+    barValues: stackedBarData,
+    title: 'Skills progress chart',
+    description: 'Progress toward total goals for each programming language',
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    barValues: barDataWithIcons,
+    title: 'Skills progress with icons',
+    description: 'Skills progress with visual icons for each category',
+  },
+};
+
+export const Animated: Story = {
+  args: {
+    barValues: stackedBarData,
+    animate: true,
+    title: 'Animated skills chart',
+    description: 'Animated chart showing progress with entrance animations',
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    barValues: simpleBarData.map((bar) => ({
+      ...bar,
+      onClick: action(`Clicked ${bar.categoryLabel}`),
+    })),
+    title: 'Interactive skills chart',
+    description: 'Click on any row to view detailed course information',
+  },
+};
+
+export const WithLinks: Story = {
+  args: {
+    barValues: simpleBarData.map((bar) => ({
+      ...bar,
+      href: `#${bar.categoryLabel.toLowerCase().replace(/\s+/g, '-')}`,
+    })),
+    title: 'Skills chart with links',
+    description: 'Each row links to its corresponding course page',
+  },
+};
+
+export const WithVisualTitleAndDescription: Story = {
+  args: {
+    barValues: simpleBarData,
+    title: 'Programming Skills Overview',
+    description:
+      'Experience points earned across different programming languages',
+  },
+};
+
+export const WithHiddenTitleAndDescription: Story = {
+  render: () => {
+    return (
+      <BarChart
+        barValues={simpleBarData}
+        description="Experience points earned across different programming languages"
+        hideDescription
+        hideTitle
+        maxScaleValue={2000}
+        title="Programming Skills Overview"
+        unit="XP"
+      />
+    );
+  },
+};
+
+export const WithExternalTitle: Story = {
+  render: () => {
+    return (
+      <>
+        <Box
+          as="h2"
+          bg="background-selected"
+          border={1}
+          borderRadius="lg"
+          id="external-chart-title"
+          p={16}
+          textAlign="right"
+        >
+          Programming Skills Overview
+        </Box>
+        <BarChart
+          aria-labelledby="external-chart-title"
+          barValues={simpleBarData}
+          description="Experience points earned across different programming languages"
+          hideDescription={false}
+          maxScaleValue={2000}
+          unit="XP"
+        />
+      </>
+    );
+  },
+};
+
+export const WithSorting: Story = {
+  args: {
+    barValues: simpleBarData,
+    sortFns: ['alphabetically', 'numerically', 'none'],
+    title: 'Skills experience chart',
+    description: 'Use the dropdown to sort bars by different criteria',
+  },
+};
+
+const customSortingBarValues = [
+  {
+    categoryLabel: 'Python',
+    seriesOneValue: 1500,
+    dateAdded: new Date('2023-01-15'),
+  },
+  {
+    categoryLabel: 'JavaScript',
+    seriesOneValue: 2000,
+    dateAdded: new Date('2023-03-20'),
+  },
+  {
+    categoryLabel: 'React',
+    seriesOneValue: 450,
+    dateAdded: new Date('2023-06-10'),
+  },
+  {
+    categoryLabel: 'TypeScript',
+    seriesOneValue: 300,
+    dateAdded: new Date('2023-08-05'),
+  },
+  {
+    categoryLabel: 'SQL',
+    seriesOneValue: 600,
+    dateAdded: new Date('2023-02-28'),
+  },
+];
+
+export const WithCustomSorting: Story = {
+  args: {
+    barValues: customSortingBarValues,
+    sortFns: [
+      'none',
+      {
+        label: 'Recently Added',
+        value: 'recent',
+        sortFn: (bars) => {
+          return [...bars].sort((a, b) => {
+            const aDate = a.dateAdded as Date | undefined;
+            const bDate = b.dateAdded as Date | undefined;
+            if (!aDate && !bDate) return 0;
+            if (!aDate) return 1;
+            if (!bDate) return -1;
+            return bDate.getTime() - aDate.getTime();
+          });
+        },
+      },
+      {
+        label: 'Oldest First',
+        value: 'oldest',
+        sortFn: (bars) => {
+          return [...bars].sort((a, b) => {
+            const aDate = a.dateAdded as Date | undefined;
+            const bDate = b.dateAdded as Date | undefined;
+            if (!aDate && !bDate) return 0;
+            if (!aDate) return 1;
+            if (!bDate) return -1;
+            return aDate.getTime() - bDate.getTime();
+          });
+        },
+      },
+    ],
+    title: 'Skills chart with date sorting',
+    description:
+      'Custom sort functions can access additional properties on BarProps, such as dates',
+  },
+};
+
+export const CustomStyles: Story = {
+  args: {
+    barValues: stackedBarData,
+    styleConfig: {
+      seriesTwoBarColor: 'text',
+      seriesOneBarColor: 'primary',
+      textColor: 'primary',
+      seriesOneLabel: 'feedback-error',
+      seriesTwoLabel: 'feedback-success',
+    },
+    title: 'Custom styled skills chart',
+    description: 'Custom color scheme applied to chart elements',
+  },
+};
+
+export const CustomScale: Story = {
+  args: {
+    barValues: simpleBarData,
+    maxScaleValue: 2000,
+    scaleInterval: 250,
+    title: 'Skills chart with custom scale',
+    description: 'Custom scale intervals for more granular value display',
+  },
+};
+
+export const WithStringTranslations: Story = {
+  args: {
+    barValues: stackedBarData,
+    sortFns: ['alphabetically', 'numerically', 'none'],
+    title: 'Gráfico de habilidades',
+    description: 'Progreso hacia los objetivos totales por lenguaje',
+    unit: 'XP',
+    translations: {
+      locale: 'es',
+      sortLabel: 'Ordenar por:',
+      sortOptions: {
+        none: 'Ninguno',
+        labelAsc: 'Etiqueta (A-Z)',
+        labelDesc: 'Etiqueta (Z-A)',
+        valueAsc: 'Valor (Bajo-Alto)',
+        valueDesc: 'Valor (Alto-Bajo)',
+      },
+      accessibility: {
+        stackedBarSummary: (ctx) =>
+          `Valor inicial - ${ctx.seriesOneValue} ${ctx.unit}. ${ctx.gained} ${ctx.unit} ganado - ahora en ${ctx.seriesTwoValue} ${ctx.unit} en ${ctx.categoryLabel}`,
+        singleValueBarSummary: (ctx) =>
+          `${ctx.value} ${ctx.unit} en ${ctx.categoryLabel}`,
+      },
+    },
+  },
+};
+
+export const WithFunctionTranslations: Story = {
+  args: {
+    barValues: accessibilityBarData,
+    description:
+      'Custom aria-label summaries via translation functions (stacked, link, and non-interactive bars)',
+    title: 'Skills experience (accessibility functions)',
+    translations: accessibilityTranslations,
+    unit: 'XP',
+  },
+};

package/src/lib/UX Writing/Component guidelines/Confirmation dialogs.mdx

@@ -1,11 +1,11 @@
 import { Meta } from '@storybook/blocks';
 
-import { AboutHeader, LinkTo } from '~styleguide/blocks';
+import { AboutHeader, ImageWrapper, LinkTo } from '~styleguide/blocks';
 
 export const parameters = {
   title: 'Confirmation dialogs',
   subtitle:
-    'Simplify the language, prioritize the message, and make sure the implication of what learners are saying "Yes" (or "No") to is crystal clear.',
+    'Use the same verb from the triggering button, heading, to action confirmation button; clearly communicate the consequences; and keep the copy decision-focused.',
   status: 'static',
   design: {
     type: 'figma',
@@ -17,39 +17,57 @@ export const parameters = {
 
 <AboutHeader {...parameters} />
 
-Confirmation dialog boxes are used to verify that a learner wants to take a specific action. They are generally used for actions that are irreversible, may result in critical consequences or loss of data, have other severe consequences, or happen infrequently.
+Confirmation dialogs use the <LinkTo id="Molecules/Modals/Dialog">Dialog component in Gamut</LinkTo> to create intentional friction to verify that a learner wants to take a high-impact action, such as:
 
-They use the <LinkTo id="Molecules/Modals/Dialog">Dialog component in Gamut</LinkTo> and, for actions with serious or irreversible consequences, the `Danger` variant should be used.
+- Irreversible actions (e.g., submitting payment)
+- Loss of data, time, or work (e.g., deleting a course)
+- Unexpected consequences (e.g., losing learning history on an existing prototype when when generating a new prototype)
+
+Adding friction for these purposes helps improve trust and avoid unintentional actions by making sure learners clearly understand the consequences before continuing. It also lets us offer alternatives or undo options when needed.
 
 ## Best practices
 
-### Headline
+### Heading
+
+- **Ask or inform about one main action**, mirroring the button that triggered the confirmation dialog.
+- **Frame your headline as a binary question**, when possible, with 2 unambiguous answers.
+- **Avoid generic “Are you sure?” headings and body text.** This phrasing takes up space, increases cognitive load, and may undermine users' confidence or be interpreted as patronizing.
+
+### Body (optional)
+
+- **Add essential information about the contextual consequences.** State what will happen, what will be lost/changed, and any critical conditions.
+- **Avoid redundancy.** If the heading is already self-explanatory, the body is not needed.
+- **Keep to 1–2 lines, unless more is required to get all the information across.**
+
+### Buttons (CTA1 and CTA2)
 
-- **Ask or inform about one main action**, clearly and simply.
-- **Frame your headline as a binary question**, when possible, with 2 unambiguous answers (i.e. Yes/No, Stay/Leave).
-- **Be specific.** Instead of "Are you sure?" focus on what you want to ensure they're sure about (i.e. "Reset your progress?" or "Delete the file?").
+- **Avoid using “Yes” or “No,”** as they can be misinterpreted in global English and internationalization contexts.
+- **CTA1 matches the verb from the heading** to confirm the action.
+- **CTA2 clarifies the alternative or undo** path.
+  - Whenever possible, be specific about the alternative. However, when space is limited, 'Cancel' can be used.
 
-### Explanation
+### Examples — putting it all together
 
-- **Share only relevant information** that may help the learner make their decision.
-- **Avoid redundancy.** If you've already set the stage in your headline, there's no need to re-ask the same question in your explanation. If the explanation doesn't add anything new, leave it out (i.e. "Permanently delete this item? Yes/No").
-- **Avoid filler.** Questions like "Are you sure you want to \_\_\_?" take up space, increase cognitive load, and may undermine users' confidence or be interpreted as patronizing.
-- **Keep to 1-2 lines**, unless more is required to get all the information across.
+<ImageWrapper
+  src="./ux writing/delete_this_course.png"
+  alt="Delete this course confirmation dialog"
+/>
 
-### Button copy
+<ImageWrapper
+  src="./ux writing/delete_study_plan.png"
+  alt="Delete study plan confirmation dialog"
+/>
 
-- **Options should be clear and distinct.** Each option should be distinctly different and there should be no opportunity for learners to mix them up (i.e. "Delete" and "Cancel" are ambiguous choices whereas "Yes, remove" and "Cancel" clear up the confusion.
-- **Add context to reaffirm the action.** Instead of "Yes," use "Yes, reset progress."
-- **Match the verb in your headline.** If you use "Save" in your headline, use "Save" in your button copy, rather than keep. Consistency helps keep the message clear. All of this should also match whatever the learner clicked on that triggered the confirmation dialog.
+<ImageWrapper
+  src="./ux writing/clear_chat.png"
+  alt="Clear chat confirmation dialog"
+/>
 
 ## Checklist
 
-- Is the language consistent from the wording on the button that opened the confirmation box, to the headline,
-- Does the headline make the action clear?
-- Is the headline framed as a question, if possible?
-- Does the explanation provide relevant details and consequences of the action?
-- Is the explanation 1-2 lines long?
-- Are the words on the buttons clear and distinct?
-- Do the buttons include context to reaffirm the action?
-- Is your copy at a reading level of grade 7 or below? Test with [Hemingway App](https://hemingwayapp.com).
-- Have you asked someone unrelated to the project to read the message and did they understand it?
+- Is the action irreversible, destructive, or has unexpected consequences? If not, consider using a different pattern.
+- Is the same verb used from the action triggering the confirmation dialog, to the heading, to CTA1?
+- Did you avoid filler language such as “Are you sure you want to...?”
+- Does the body front-load the critical consequence in 1–3 lines?
+- Are the buttons mutually exclusive (and avoid using “Yes/No”)?
+- Is there a safer alternative or undo to mention? (If available, offer the option as CTA2.)