@boostdev/design-system-components 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -26,6 +26,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "react-native": "./dist/native/index.js",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
@@ -35,6 +36,10 @@
       "import": "./dist/client.js",
       "require": "./dist/client.cjs"
     },
+    "./web-components": {
+      "types": "./dist/web-components.d.ts",
+      "import": "./dist/web-components.js"
+    },
     "./css": "./dist/index.css",
     "./css/bdc": "./src/css/bdc.css",
     "./css/accordion": "./src/components/ui/Accordion/Accordion.module.css",
@@ -89,6 +94,7 @@
     "./css/section-header": "./src/components/layout/SectionHeader/SectionHeader.module.css"
   },
   "main": "./dist/index.js",
+  "react-native": "./dist/native/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
@@ -110,7 +116,7 @@
     "changelog:unreleased": "pnpm exec git-cliff --unreleased"
   },
   "devDependencies": {
-    "@boostdev/design-system-foundation": "^1.0.3",
+    "@boostdev/design-system-foundation": "^1.0.4",
     "@modelcontextprotocol/sdk": "^1.27.0",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
@@ -121,15 +127,19 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^25.5.0",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/react-native": "^0.73.0",
     "@vitejs/plugin-react": "^5.1.4",
     "eslint": "^9",
     "git-cliff": "^2.12.0",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^28.1.0",
+    "lit": "^3.3.2",
+    "react-native-web": "^0.21.2",
     "remark-gfm": "^4.0.1",
     "storybook": "^8.6.18",
+    "storybook-addon-tag-badges": "^1.4.0",
     "stylelint": "^16",
     "stylelint-config-standard": "^37",
     "tsup": "^8",
@@ -140,9 +150,18 @@
     "vitest": "^3"
   },
   "peerDependencies": {
-    "@boostdev/design-system-foundation": ">=1.0.3",
+    "@boostdev/design-system-foundation": ">=1.0.4",
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "react-native": ">=0.70"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public",
@@ -150,5 +169,8 @@
   },
   "sideEffects": [
     "src/css/**/*.css"
-  ]
+  ],
+  "dependencies": {
+    "@oddbird/css-anchor-positioning": "^0.9.0"
+  }
 }

package/src/components/interaction/Button/Button.module.css

@@ -13,17 +13,17 @@
 @keyframes pulse {
   0% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 50%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 50%);
   }
 
   70% {
     transform: scale(1.01);
-    box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 0%);
+    box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
   }
 
   100% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 0%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
   }
 }
 
@@ -47,8 +47,11 @@
     line-height: 1;
 
     /* Colour model: override --button_color + --button_on-color to re-theme */
-    --button_color:    var(--bds-cta);
-    --button_on-color: var(--bds-on-cta);
+    --button_color:        var(--bds-color_green);
+    --button_on-color:     var(--bds-color_on-green);
+
+    /* Text-safe variant of --button_color for use on page background (ghost text/border) */
+    --button_color--on-bg: var(--bds-color_green--strong);
 
     background-color: var(--button_bg, var(--button_color));
     color: var(--button_text, var(--button_on-color));
@@ -63,11 +66,11 @@
   /* Default: filled with --button_color, no visible border */
   .button.--default { /* inherits base — no overrides needed */ }
 
-  /* Ghost: transparent background, border and text use --button_color */
+  /* Ghost: transparent background, border and text use text-safe --button_color--on-bg */
   .button.--ghost {
     --button_bg:   transparent;
-    --button_text: var(--button_color);
-    --bdc_color:   var(--button_color);
+    --button_text: var(--button_color--on-bg);
+    --bdc_color:   var(--button_color--on-bg);
   }
 
   .button.--size_small {
@@ -140,9 +143,9 @@
   /* Default hover: outline appears, bg becomes page surface */
   @media (hover: hover) and (pointer: fine) {
     .button.--default:hover {
-      --button_bg:          var(--bds-bg);
-      --button_text:        var(--bds-interactive);
-      --button_pulse-color: var(--bds-interactive);
+      --button_bg:          var(--bds-color_bg);
+      --button_text:        var(--bds-color_interactive_on-bg);
+      --button_pulse-color: var(--bds-color_interactive_on-bg);
       --bdc_color:          currentcolor;
     }
   }

package/src/components/interaction/Button/Button.native.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Button } from './Button.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Button (native)', () => {
+  it('has button role', () => {
+    renderWithTheme(<Button>Save</Button>);
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+  });
+
+  it('exposes disabled state', () => {
+    renderWithTheme(<Button disabled>Save</Button>);
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('renders with icon-start without throwing', () => {
+    // Icon wrappers have importantForAccessibility="no-hide-descendants" (Android)
+    // and accessibilityElementsHidden={true} (iOS) so decorative icons are hidden on device.
+    const icon = <span data-testid="icon">★</span>;
+    renderWithTheme(<Button iconStart={icon}>Save</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders with icon-end without throwing', () => {
+    const icon = <span data-testid="icon-end">→</span>;
+    renderWithTheme(<Button iconEnd={icon}>Next</Button>);
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByTestId('icon-end')).toBeInTheDocument();
+  });
+});

package/src/components/interaction/Button/Button.native.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Button } from './Button.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Interaction/Button',
+  component: Button,
+  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'ghost'] },
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    onPress: { action: 'pressed' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { children: 'Default', variant: 'default' } };
+export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
+export const Small: Story = { args: { children: 'Small', size: 'small' } };
+export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
+export const Large: Story = { args: { children: 'Large', size: 'large' } };
+export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
+export const AllVariants: Story = {
+  render: () => (
+    <ThemeProvider>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        {(['default', 'ghost'] as const).map(v => (
+          <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            {(['small', 'medium', 'large'] as const).map(s => (
+              <Button key={s} variant={v} size={s}>{v} {s}</Button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </ThemeProvider>
+  ),
+};

package/src/components/interaction/Button/Button.native.tsx

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+import { StyleSheet, Pressable, Text, View, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+type ButtonVariant = 'default' | 'ghost';
+type ButtonSize = 'small' | 'medium' | 'large';
+
+export interface ButtonProps {
+  children?: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  iconStart?: ReactNode;
+  iconEnd?: ReactNode;
+  disabled?: boolean;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeTokens: Record<ButtonSize, { height: number; px: number; fontSize: number; radius: number }> = {
+  small:  { height: 36,  px: spacing.m,   fontSize: font.size.bodyS,    radius: border.radius.xs },
+  medium: { height: 48,  px: spacing.m,   fontSize: font.size.body,     radius: border.radius.s },
+  large:  { height: 56,  px: spacing.xxl, fontSize: font.size.heading3, radius: border.radius.m },
+};
+
+const styles = StyleSheet.create({
+  pressable: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    alignSelf: 'flex-start',
+  },
+  label: {
+    fontFamily: font.family.body,
+    fontWeight: font.weight.semibold,
+    includeFontPadding: false,
+  },
+});
+
+export function Button({
+  children,
+  variant = 'default',
+  size = 'medium',
+  iconStart,
+  iconEnd,
+  disabled = false,
+  onPress,
+  accessibilityLabel,
+  style,
+}: Readonly<ButtonProps>) {
+  const { colors } = useTheme();
+  const { height, px, fontSize, radius } = sizeTokens[size];
+
+  // Color model: filled = green bg, ghost = transparent bg + darker green border/text
+  const primaryColor = colors.colorGreen;
+  const onPrimaryColor = colors.colorOnGreen;
+  // Ghost uses colorGreenStrong for text/border — colorGreen (#00c950) fails 3:1 on white (2.15:1)
+  const ghostTextColor = colors.colorGreenStrong;
+
+  const containerStyle: ViewStyle = {
+    height,
+    paddingHorizontal: px,
+    borderRadius: radius,
+    opacity: disabled ? 0.4 : 1,
+    ...(variant === 'default' && { backgroundColor: primaryColor }),
+    ...(variant === 'ghost' && {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: ghostTextColor,
+    }),
+  };
+
+  const textColor = variant === 'default' ? onPrimaryColor : ghostTextColor;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      style={({ pressed }) => [styles.pressable, containerStyle, pressed && { opacity: 0.75 }, style]}
+    >
+      {iconStart && <View importantForAccessibility="no-hide-descendants" accessibilityElementsHidden={true}>{iconStart}</View>}
+      {children && (
+        <Text style={[styles.label, { fontSize, color: textColor }]}>
+          {children}
+        </Text>
+      )}
+      {iconEnd && <View importantForAccessibility="no-hide-descendants">{iconEnd}</View>}
+    </Pressable>
+  );
+}

package/src/components/interaction/Button/Button.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 
 const meta = {
-  title: 'Interaction/Button',
+  title: 'React/Interaction/Button',
   component: Button,
   argTypes: {
     variant: { control: 'select', options: ['default', 'ghost'] },

package/src/components/interaction/Button/Button.tsx

@@ -1,8 +1,9 @@
 import {ButtonHTMLAttributes, MouseEventHandler, ReactNode} from 'react';
 import css from './Button.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+export interface ButtonProps extends WithClassName, ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
   href?: string;
   variant?: 'default' | 'ghost';
   type?: 'button' | 'submit' | 'reset';
@@ -10,7 +11,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HT
   iconStart?: ReactNode;
   iconEnd?: ReactNode;
   children?: ReactNode;
-  className?: string;
   disabled?: boolean;
   hasPulse?: boolean;
   onClick?: MouseEventHandler<HTMLElement>;

package/src/components/interaction/Command/Command.mdx

@@ -20,6 +20,22 @@ Keyboard-first command palette for searching and executing actions. Commonly tri
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--command_color`</td><td>`var(--bds-color_bg)`</td><td>Panel background colour</td></tr>
+<tr><td>`--command_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Text and icon colour</td></tr>
+<tr><td>`--command_shadow`</td><td>`var(--bds-shadow_xl)`</td><td>Panel box shadow</td></tr>
+<tr><td>`--command_border`</td><td>`none`</td><td>Panel border</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Input has `role="combobox"` with `aria-controls` pointing to the results list

package/src/components/interaction/Command/Command.module.css

@@ -18,8 +18,8 @@
   .palette {
     display: flex;
     flex-direction: column;
-    background-color: var(--command_color, var(--bds-bg));
-    color: var(--command_on-color, var(--bds-on-bg));
+    background-color: var(--command_color, var(--bds-color_bg));
+    color: var(--command_on-color, var(--bds-color_on-bg));
     border-radius: var(--bds-border_radius--m);
     box-shadow: var(--command_shadow, var(--bds-shadow_xl));
     overflow: hidden;
@@ -44,7 +44,7 @@
   .searchIcon {
     width: 1.25rem;
     height: 1.25rem;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     flex-shrink: 0;
   }
 
@@ -54,18 +54,18 @@
     outline: none;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     background: transparent;
     min-width: 0;
   }
 
   .search::placeholder {
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .escHint {
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
     padding: 0.1em 0.4em;
     flex-shrink: 0;
@@ -94,7 +94,7 @@
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body--s);
     font-weight: var(--bds-font_weight--semibold);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -109,23 +109,23 @@
   }
 
   .itemActive {
-    background-color: var(--bds-bg--subtle);
+    background-color: var(--bds-color_bg--subtle);
   }
 
   .itemLabel {
     flex: 1;
     font-size: var(--bds-font_size--body);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .itemDesc {
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
   }
 
   .shortcut {
     font-size: var(--bds-font_size--body--s);
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     border-radius: var(--bds-border_radius--xs);
     padding: 0.1em 0.4em;
 
@@ -139,7 +139,7 @@
   .empty {
     padding: var(--bds-space_l) var(--bds-space_m);
     text-align: center;
-    color: var(--bds-on-bg);
+    color: var(--bds-color_on-bg);
     font-size: var(--bds-font_size--body);
   }
 }

package/src/components/interaction/Command/Command.stories.tsx

@@ -5,7 +5,7 @@ import type { CommandItem } from './Command';
 import { Button } from '../Button/Button';
 
 const meta = {
-  title: 'Interaction/Command',
+  title: 'React/Interaction/Command',
   component: Command,
 } satisfies Meta<typeof Command>;
 

package/src/components/interaction/Command/Command.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useId, KeyboardEvent, useMemo } from 'react';
 import css from './Command.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface CommandItem {
   id: string;
@@ -11,12 +12,11 @@ export interface CommandItem {
   onSelect: () => void;
 }
 
-interface CommandProps {
+interface CommandProps extends WithClassName {
   isOpen: boolean;
   onClose: () => void;
   items: CommandItem[];
   placeholder?: string;
-  className?: string;
 }
 
 export function Command({

package/src/components/interaction/Dialog/Dialog.module.css

@@ -9,8 +9,8 @@
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--dialog_radius, var(--bdc-outline_radius));
     box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
-    background-color: var(--dialog_color ,var(--bds-grey--subtle));
-    color: var(--dialog_on-color, var(--bds-on-grey--subtle));
+    background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
+    color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
     padding: var(--bds-space_l);
     max-width: 90svw;
     max-height: 90svh;
@@ -39,7 +39,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background-color: var(--bds-bg);
+    background-color: var(--bds-color_bg);
     color: currentcolor;
     border: var(--dialog_close-border, none);
     --bdc_color: currentcolor;

package/src/components/interaction/Dialog/Dialog.stories.tsx

@@ -4,7 +4,7 @@ import { Dialog } from './Dialog';
 import { Button } from '../Button/Button';
 
 const meta = {
-  title: 'Interaction/Dialog',
+  title: 'React/Interaction/Dialog',
   component: Dialog,
 } satisfies Meta<typeof Dialog>;
 

package/src/components/interaction/Dialog/Dialog.tsx

@@ -3,10 +3,10 @@ import { ReactNode, useEffect, useRef } from 'react';
 const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 import css from './Dialog.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface DialogProps {
+interface DialogProps extends WithClassName {
   children: ReactNode;
-  className?: string;
   isOpen?: boolean;
   onClose?: () => void;
 }

package/src/components/interaction/Drawer/Drawer.mdx

@@ -28,6 +28,20 @@ Slide-in panel from the left or right edge of the viewport. Use for navigation,
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--drawer_color`</td><td>`var(--bds-color_bg)`</td><td>Panel background colour</td></tr>
+<tr><td>`--drawer_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Uses `<dialog>` internally — provides native focus trapping and `Escape` to close

package/src/components/interaction/Drawer/Drawer.module.css

@@ -25,8 +25,8 @@
     flex-direction: column;
     width: min(28rem, 90vw);
     height: 100%;
-    background-color: var(--drawer_color, var(--bds-bg));
-    color: var(--drawer_on-color, var(--bds-on-bg));
+    background-color: var(--drawer_color, var(--bds-color_bg));
+    color: var(--drawer_on-color, var(--bds-color_on-bg));
     box-shadow: var(--bds-shadow_xl);
     overflow: hidden;
     transition: var(--bds-animation_transition);
@@ -73,7 +73,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .closeButton:hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
     }
   }
 

package/src/components/interaction/Drawer/Drawer.stories.tsx

@@ -4,7 +4,7 @@ import { Drawer } from './Drawer';
 import { Button } from '../Button/Button';
 
 const meta = {
-  title: 'Interaction/Drawer',
+  title: 'React/Interaction/Drawer',
   component: Drawer,
 } satisfies Meta<typeof Drawer>;
 

package/src/components/interaction/Drawer/Drawer.tsx

@@ -1,14 +1,14 @@
 import { ReactNode, useEffect, useRef } from 'react';
 import css from './Drawer.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface DrawerProps {
+interface DrawerProps extends WithClassName {
   isOpen: boolean;
   onClose: () => void;
   title: ReactNode;
   children: ReactNode;
   side?: 'left' | 'right';
-  className?: string;
   ariaLabel?: string;
 }
 

package/src/components/interaction/DropdownMenu/DropdownMenu.module.css

@@ -17,8 +17,8 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
-    background-color: var(--dropdown_color, var(--bds-bg));
-    color: var(--dropdown_on-color, var(--bds-on-bg));
+    background-color: var(--dropdown_color, var(--bds-color_bg));
+    color: var(--dropdown_on-color, var(--bds-color_on-bg));
     box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
     list-style: none;
     margin: 0;
@@ -62,7 +62,7 @@
 
   @media (hover: hover) and (pointer: fine) {
     .item:not(:disabled):hover {
-      background-color: var(--bds-bg--subtle);
+      background-color: var(--bds-color_bg--subtle);
       color: var(--bds-color_interactive_on-bg);
     }
   }

package/src/components/interaction/DropdownMenu/DropdownMenu.stories.tsx

@@ -3,7 +3,7 @@ import { DropdownMenu } from './DropdownMenu';
 import {Button} from "../Button";
 
 const meta = {
-  title: 'Interaction/DropdownMenu',
+  title: 'React/Interaction/DropdownMenu',
   component: DropdownMenu,
   decorators: [
     Story => (