@boostdev/design-system-components 2.14.1 → 2.16.0

package/dist/web-components/ui/bds-notification-banner.d.ts

@@ -2,16 +2,19 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 type NotificationBannerVariant = 'info' | 'success' | 'warning' | 'error';
+type NotificationBannerAppearance = 'default' | 'gradient';
 /**
  * `<bds-notification-banner>` — framework-agnostic Notification Banner custom element.
  *
  * Attributes:
  *   variant       — "info" (default) | "success" | "warning" | "error"
+ *   appearance    — "default" | "gradient" (fades the tint to the surface, accent line, shadow)
  *   dismissible   — boolean; shows a dismiss button when present
  *   dismiss-label — aria-label for the dismiss button (default: "Dismiss notification")
  *
  * Slots:
  *   (default) — banner body content
+ *   icon      — optional icon displayed before the content
  *   action    — optional action area (e.g. a button)
  *
  * Events:
@@ -30,6 +33,10 @@ declare class BdsNotificationBanner extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        appearance: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         dismissible: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -41,12 +48,18 @@ declare class BdsNotificationBanner extends LitElement {
         _actionFilled: {
             state: boolean;
         };
+        _iconFilled: {
+            state: boolean;
+        };
     };
     variant: NotificationBannerVariant;
+    appearance: NotificationBannerAppearance;
     dismissible: boolean;
     dismissLabel: string;
     private _actionFilled;
+    private _iconFilled;
     constructor();
+    private _onIconSlotChange;
     private _onActionSlotChange;
     private get _isUrgent();
     private _handleDismiss;
@@ -58,4 +71,4 @@ declare global {
     }
 }
 
-export { BdsNotificationBanner, type NotificationBannerVariant };
+export { BdsNotificationBanner, type NotificationBannerAppearance, type NotificationBannerVariant };

package/dist/web-components/ui/bds-notification-banner.js

@@ -1,6 +1,6 @@
 import {
   BdsNotificationBanner
-} from "../chunk-LDIPCTRN.js";
+} from "../chunk-2MJTO2IW.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsNotificationBanner

package/dist/web-components/ui/bds-section-header.d.ts

@@ -13,6 +13,7 @@ import { LitElement } from 'lit';
  *   subtitle  — optional subheading text
  *   alignment — "start" (default) | "center" | "end"
  *   size      — "xs" | "small" | "medium" (default) | "large"
+ *   appearance — "default" | "gradient" (gradient-filled title)
  *   title-as  — tag name for the title element (default: "h2")
  *
  * @example
@@ -38,6 +39,10 @@ declare class BdsSectionHeader extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        appearance: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         titleAs: {
             type: StringConstructor;
             attribute: string;
@@ -53,6 +58,7 @@ declare class BdsSectionHeader extends LitElement {
     subtitle: string;
     alignment: 'start' | 'center' | 'end';
     size: 'xs' | 'small' | 'medium' | 'large';
+    appearance: 'default' | 'gradient';
     titleAs: string;
     constructor();
     private get _headingText();

package/dist/web-components/ui/bds-section-header.js

@@ -1,6 +1,6 @@
 import {
   BdsSectionHeader
-} from "../chunk-RVF7W653.js";
+} from "../chunk-DGOCPKHI.js";
 import "../chunk-QPOKHLMQ.js";
 import "../chunk-LGEZYFUU.js";
 export {

package/dist/web-components/ui/bds-separator.js

@@ -1,6 +1,6 @@
 import {
   BdsSeparator
-} from "../chunk-5HUAFCU6.js";
+} from "../chunk-TJV7UIXC.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsSeparator

package/dist/web-components/ui/bds-table.js

@@ -1,6 +1,6 @@
 import {
   BdsTable
-} from "../chunk-HBLJ4SLY.js";
+} from "../chunk-DD3OUXNG.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "2.14.1",
+  "version": "2.16.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -171,6 +171,10 @@
       "types": "./dist/web-components/interaction/bds-dropdown-menu-item.d.ts",
       "import": "./dist/web-components/interaction/bds-dropdown-menu-item.js"
     },
+    "./web-components/interaction/bds-dropdown-menu-group": {
+      "types": "./dist/web-components/interaction/bds-dropdown-menu-group.d.ts",
+      "import": "./dist/web-components/interaction/bds-dropdown-menu-group.js"
+    },
     "./web-components/interaction/bds-popover": {
       "types": "./dist/web-components/interaction/bds-popover.d.ts",
       "import": "./dist/web-components/interaction/bds-popover.js"
@@ -338,7 +342,7 @@
     "changelog:unreleased": "pnpm exec git-cliff --unreleased"
   },
   "devDependencies": {
-    "@boostdev/design-system-foundation": "^2.3.0",
+    "@boostdev/design-system-foundation": "^2.4.0",
     "@boostdev/design-system-react-native": "0.2.0",
     "@modelcontextprotocol/sdk": "^1.27.0",
     "@storybook/addon-docs": "8.6.14",

package/src/components/interaction/Button/Button.mdx

@@ -55,6 +55,12 @@ Pass any `ReactNode` to `iconStart` or `iconEnd`. Icons inherit the button's `cu
 <Canvas of={Stories.WithIconEnd} />
 <Canvas of={Stories.WithBothIcons} />
 
+### Icon offset across sizes
+
+The gap between an icon and the button edge (`--button_icon-offset`) is half the size's inline padding by default, so it scales automatically with `size` and with the responsive space tokens at wider viewports.
+
+<Canvas of={Stories.IconOffsetMatrix} />
+
 ### Icon-only (1:1 aspect ratio)
 
 Set `isIconOnly` to render a square button with equal `xs` padding on both axes — composable with any `variant`. The icon sits centred; the button's height (from `size`) determines both width and height. Always pair with `aria-label` — there's no visible text for assistive tech to read.
@@ -143,6 +149,7 @@ Every public token below can be set on the button or any ancestor — the consum
 <tr><td>`--button_radius`</td><td>`var(--bds-border_radius--full)`</td><td>Button border radius.</td></tr>
 <tr><td>`--button_height`</td><td>`3em` (medium)</td><td>Button height. Also drives the width when `isIconOnly` is set.</td></tr>
 <tr><td>`--button_font-size`</td><td>`inherit` (medium)</td><td>Button font size.</td></tr>
+<tr><td>`--button_icon-offset`</td><td>Half of the inline padding for the current size</td><td>How far `iconStart`/`iconEnd` pull into the padding (optical correction). Scales with `size` and with the responsive space tokens by default — override to pin a fixed offset instead.</td></tr>
 </tbody>
 </table>
 

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

@@ -33,7 +33,9 @@
     all: unset;
     position: relative;
     font: inherit;
-    padding-inline: var(--bds-space_l);
+    --button_padding-inline--size: var(--bds-space_l);
+
+    padding-inline: var(--button_padding-inline--size);
     display: inline-flex;
     gap: var(--bds-space_xs);
     border-radius: var(--button_radius, var(--bds-border_radius--full));
@@ -82,20 +84,17 @@
   .button.--size_small {
     --button_height:    2.25em;
     --button_font-size: var(--bds-font_size--body--s);
-
-    padding-inline: var(--bds-space_m);
+    --button_padding-inline--size: var(--bds-space_m);
   }
 
   .button.--size_medium {
     --button_height: 3em;
-
-    padding-inline: var(--bds-space_l);
+    --button_padding-inline--size: var(--bds-space_l);
   }
 
   .button.--size_large {
     --button_font-size: var(--bds-font_size--heading-3);
-
-    padding-inline: var(--bds-space_xl);
+    --button_padding-inline--size: var(--bds-space_xl);
   }
 
   .button.--hasPulse {
@@ -133,17 +132,26 @@
     flex-shrink: 0;
   }
 
+  /* Icon offset — pulls the icon into the padding so the optical gap between
+     icon and edge matches the gap between label and edge. Defaults to half
+     the size's inline padding (--button_padding-inline--size, set above per
+     --size_*), so it scales automatically with size and with the responsive
+     space tokens (space_l/space_xl grow at wider viewports). --button_icon-offset
+     is the public override; like the identity tokens above it is intentionally
+     read only as a var() fallback here, never declared on .button, so an
+     ancestor-set value inherits through instead of being shadowed by a
+     same-element declaration. */
   .iconStart {
     display: flex;
     align-items: center;
-    margin-inline-start: calc(var(--bds-space_s) * -1);
+    margin-inline-start: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
     transition: var(--bds-animation_transition);
   }
 
   .iconEnd {
     display: flex;
     align-items: center;
-    margin-inline-end: calc(var(--bds-space_s) * -1);
+    margin-inline-end: calc(var(--button_icon-offset, calc(var(--button_padding-inline--size) / 2)) * -1);
     transition: var(--bds-animation_transition);
   }
 

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

@@ -158,3 +158,31 @@ export const AllIconOnly: Story = {
     </div>
   ),
 };
+
+/**
+ * Every size × icon position × variant combination in one grid, so the
+ * icon-to-edge offset (which now scales with the size's inline padding —
+ * see `--button_icon-offset` in the CSS variables docs) can be eyeballed
+ * and measured across viewports. Each button's label states its own
+ * variant/size/position so a verification script can find the right
+ * `.iconStart`/`.iconEnd` span via the button's accessible name and read
+ * `getComputedStyle(span).marginInlineStart` / `marginInlineEnd`.
+ */
+export const IconOffsetMatrix: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      {(['small', 'medium', 'large'] as const).map(s => (
+        <div key={s} style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+          {(['default', 'outline'] as const).flatMap(v => [
+            <Button key={`${v}-${s}-start`} variant={v} size={s} iconStart={CheckIcon}>
+              {v} {s} start
+            </Button>,
+            <Button key={`${v}-${s}-end`} variant={v} size={s} iconEnd={CheckIcon}>
+              {v} {s} end
+            </Button>,
+          ])}
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/components/interaction/DropdownMenu/DropdownMenu.mdx

@@ -5,7 +5,7 @@ import * as Stories from './DropdownMenu.stories';
 
 # DropdownMenu
 
-Floating menu with a list of selectable actions, triggered by a button. Supports disabled items and separators.
+Floating menu with a list of selectable actions, triggered by a button. Supports disabled items, separators, destructive items, shortcut hints and labelled groups.
 
 ## When to use
 - Overflow actions in a toolbar or table row
@@ -26,6 +26,12 @@ Floating menu with a list of selectable actions, triggered by a button. Supports
 ### With disabled item
 <Canvas of={Stories.WithDisabledItem} />
 
+### With groups
+<Canvas of={Stories.WithGroups} />
+
+### With destructive item
+<Canvas of={Stories.WithDestructiveItem} />
+
 ### Aligned end
 <Canvas of={Stories.AlignedEnd} />
 
@@ -45,14 +51,37 @@ Floating menu with a list of selectable actions, triggered by a button. Supports
 <tr><td>`--dropdown_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Menu container corner radius</td></tr>
 <tr><td>`--dropdown_color`</td><td>`var(--bds-color_bg)`</td><td>Menu background colour</td></tr>
 <tr><td>`--dropdown_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Menu text colour</td></tr>
-<tr><td>`--dropdown_shadow`</td><td>`var(--bds-shadow_m)`</td><td>Menu box shadow</td></tr>
+<tr><td>`--dropdown_shadow`</td><td>`var(--bds-shadow_l)`</td><td>Menu box shadow</td></tr>
 <tr><td>`--dropdown_separator-color`</td><td>`var(--bds-color_on-bg--as-surface)`</td><td>Separator line colour — the non-text member of the colour set (≥ 3:1)</td></tr>
-<tr><td>`--dropdown_item-bg--hover`</td><td>`var(--bds-color_bg--subtle)`</td><td>Menu item background on hover</td></tr>
-<tr><td>`--dropdown_item-color--hover`</td><td>`var(--bds-color_interactive_on-bg)`</td><td>Menu item text colour on hover</td></tr>
+<tr><td>`--dropdown_item-bg--hover`</td><td>`var(--bds-color_primary--subtle)`</td><td>Menu item background on hover and focus</td></tr>
+<tr><td>`--dropdown_item-color--hover`</td><td>`var(--bds-color_on-primary--subtle)`</td><td>Menu item text colour on hover and focus</td></tr>
+<tr><td>`--dropdown_padding`</td><td>`var(--bds-space_xxs)`</td><td>Menu padding on all sides</td></tr>
+<tr><td>`--dropdown_border-color`</td><td>`var(--bds-color_on-bg--as-surface)`</td><td>Menu outline colour</td></tr>
+<tr><td>`--dropdown_item-padding`</td><td>`var(--bds-space_xs) var(--bds-space_s)`</td><td>Item padding</td></tr>
+<tr><td>`--dropdown_item-radius`</td><td>`var(--bds-border_radius--xs)`</td><td>Item corner radius</td></tr>
+<tr><td>`--dropdown_item-font-size`</td><td>`var(--bds-font_size--body)`</td><td>Item font size</td></tr>
+<tr><td>`--dropdown_item-opacity--disabled`</td><td>`0.4`</td><td>Disabled item opacity</td></tr>
+<tr><td>`--dropdown_item-color--destructive`</td><td>`var(--bds-color_error_on-bg)`</td><td>Destructive item text colour</td></tr>
+<tr><td>`--dropdown_item-bg--destructive-hover`</td><td>`var(--bds-color_error--subtle)`</td><td>Destructive item background on hover and focus</td></tr>
+<tr><td>`--dropdown_item-color--destructive-hover`</td><td>`var(--bds-color_on-error--subtle)`</td><td>Destructive item text colour on hover and focus</td></tr>
+<tr><td>`--dropdown_group-label-font-size`</td><td>`var(--bds-font_size--body--s)`</td><td>Group label font size</td></tr>
+<tr><td>`--dropdown_group-label-font-weight`</td><td>`var(--bds-font_weight--bold)`</td><td>Group label font weight</td></tr>
+<tr><td>`--dropdown_group-label-color`</td><td>`var(--bds-color_on-bg--muted)`</td><td>Group label colour</td></tr>
+<tr><td>`--dropdown_group-label-padding`</td><td>`var(--bds-space_xs) var(--bds-space_s) var(--bds-space_xxs)`</td><td>Group label padding</td></tr>
+<tr><td>`--dropdown_shortcut-color`</td><td>`var(--bds-color_on-bg--muted)`</td><td>Shortcut hint colour</td></tr>
+<tr><td>`--dropdown_shortcut-font-size`</td><td>`var(--bds-font_size--body--s)`</td><td>Shortcut hint font size</td></tr>
 </tbody>
 </table>
 
 
+## Item options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `destructive` | boolean | Renders the item in the error colour |
+| `shortcut` | string | Display-only shortcut hint at the inline end; rendered `aria-hidden`, the consumer wires the actual key |
+| `group` | string | Consecutive items with the same `group` render inside a `role="group"` named by a visible label |
+
 ## Accessibility
 
 - Implements ARIA menu pattern: `role="menu"`, `role="menuitem"`
@@ -60,3 +89,5 @@ Floating menu with a list of selectable actions, triggered by a button. Supports
 - Disabled items have `aria-disabled="true"` and are skipped during keyboard navigation
 - Opening the menu focuses the first enabled item (disabled items are skipped as the initial target)
 - Closing the menu via `Escape` or item activation returns focus to the trigger; closing via `Tab` lets focus move naturally to the next element
+- Grouped items sit inside `role="group"` with `aria-labelledby` pointing at the visible group label; the label is not focusable and arrow keys skip it
+- Shortcut hints are `aria-hidden` so they do not become part of the item name

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

@@ -9,15 +9,15 @@
     inset-block-start: calc(100% + var(--bds-space_xxs));
     z-index: var(--bds-z-index_dropdown);
     min-inline-size: 10rem;
-    padding: var(--bds-space_xxs) 0;
+    padding: var(--dropdown_padding, var(--bds-space_xxs));
     border: var(--dropdown_border, none);
-    --bdc_color: currentcolor;
+    --bdc_color: var(--dropdown_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
     --bdc-outline_radius: var(--bds-border_radius--s);
 
     border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
     background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
     color: var(--dropdown_on-color, var(--bds-color_on-bg));
-    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_m));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_l));
     list-style: none;
     margin: 0;
   }
@@ -29,10 +29,29 @@
   .--placement_bottom-start { inset-inline-start: 0; }
   .--placement_bottom-end   { inset-inline-end: 0; }
 
+  .separatorRow {
+    padding-block: var(--bds-space_xxs);
+  }
+
   .separator {
     border: none;
     border-block-start: 1px solid var(--dropdown_separator-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
-    margin: var(--bds-space_xxs) 0;
+    margin: 0;
+  }
+
+  .group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .groupLabel {
+    display: block;
+    padding: var(--dropdown_group-label-padding, var(--bds-space_xs) var(--bds-space_s) var(--bds-space_xxs));
+    font-family: var(--bds-font_family--body);
+    font-size: var(--dropdown_group-label-font-size, var(--bds-font_size--body--s));
+    font-weight: var(--dropdown_group-label-font-weight, var(--bds-font_weight--bold));
+    color: var(--dropdown_group-label-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
   }
 
   .item {
@@ -41,9 +60,10 @@
     align-items: center;
     gap: var(--bds-space_xs);
     inline-size: 100%;
-    padding: var(--bds-space_xs) var(--bds-space_m);
+    padding: var(--dropdown_item-padding, var(--bds-space_xs) var(--bds-space_s));
+    border-radius: var(--dropdown_item-radius, var(--bds-border_radius--xs));
     font-family: var(--bds-font_family--body);
-    font-size: var(--bds-font_size--body);
+    font-size: var(--dropdown_item-font-size, var(--bds-font_size--body));
     color: currentcolor;
     cursor: pointer;
     box-sizing: border-box;
@@ -51,23 +71,51 @@
   }
 
   .item:disabled {
-    opacity: 0.4;
+    opacity: var(--dropdown_item-opacity--disabled, 0.4);
     cursor: not-allowed;
   }
 
   .item:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
-    border-radius: var(--bds-border_radius--xs);
+  }
+
+  .item:not(:disabled):focus-visible {
+    background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+    color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+  }
+
+  .--destructive {
+    color: var(--dropdown_item-color--destructive, var(--bds-color_error_on-bg));
+  }
+
+  .--destructive:not(:disabled):focus-visible {
+    background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
+    color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
   }
 
   @media (hover: hover) and (pointer: fine) {
     .item:not(:disabled):hover {
-      background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
-      color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
+      background-color: var(--dropdown_item-bg--hover, var(--bds-color_primary--subtle, var(--bds-color_blue--subtle)));
+      color: var(--dropdown_item-color--hover, var(--bds-color_on-primary--subtle, var(--bds-color_on-blue--subtle)));
+    }
+
+    .--destructive:not(:disabled):hover {
+      background-color: var(--dropdown_item-bg--destructive-hover, var(--bds-color_error--subtle));
+      color: var(--dropdown_item-color--destructive-hover, var(--bds-color_on-error--subtle));
     }
   }
 
+  .label {
+    flex: 1;
+  }
+
+  .shortcut {
+    flex-shrink: 0;
+    color: var(--dropdown_shortcut-color, var(--bds-color_on-bg--muted, var(--bds-color_on-bg)));
+    font-size: var(--dropdown_shortcut-font-size, var(--bds-font_size--body--s));
+  }
+
   .icon {
     display: flex;
     align-items: center;

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

@@ -1,7 +1,14 @@
-import { render, screen } from '@testing-library/react';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { DropdownMenu } from './DropdownMenu';
 
+const cssSource = readFileSync(
+  resolve(process.cwd(), 'src/components/interaction/DropdownMenu/DropdownMenu.module.css'),
+  'utf8',
+);
+
 const items = [
   { id: 'edit', label: 'Edit', onClick: vi.fn() },
   { id: 'duplicate', label: 'Duplicate', onClick: vi.fn() },
@@ -105,4 +112,110 @@ describe('DropdownMenu', () => {
     await user.click(screen.getByRole('button', { name: 'Actions' }));
     expect(screen.getByRole('menuitem', { name: 'Edit' })).toHaveFocus();
   });
+
+  describe('groups, destructive and shortcut', () => {
+    const grouped = [
+      { id: 'edit', label: 'Edit', group: 'Edit' },
+      { id: 'duplicate', label: 'Duplicate', shortcut: '⌘D', group: 'Edit' },
+      { id: 'delete', label: 'Delete', destructive: true, group: 'Danger' },
+    ];
+
+    it('renders a labelled group for consecutive items with the same group', async () => {
+      const user = userEvent.setup();
+      render(<DropdownMenu trigger={<button type="button">Actions</button>} items={grouped} />);
+      await user.click(screen.getByRole('button', { name: 'Actions' }));
+      const group = screen.getByRole('group', { name: 'Edit' });
+      expect(within(group).getAllByRole('menuitem')).toHaveLength(2);
+      expect(screen.getByRole('group', { name: 'Danger' })).toBeInTheDocument();
+    });
+
+    it('moves focus from the last item of a group to the first of the next', async () => {
+      const user = userEvent.setup();
+      render(<DropdownMenu trigger={<button type="button">Actions</button>} items={grouped} />);
+      await user.click(screen.getByRole('button', { name: 'Actions' }));
+      await user.keyboard('{ArrowDown}');
+      expect(screen.getByRole('menuitem', { name: 'Duplicate' })).toHaveFocus();
+      await user.keyboard('{ArrowDown}');
+      expect(screen.getByRole('menuitem', { name: 'Delete' })).toHaveFocus();
+    });
+
+    it('does not render a group for items without a group', async () => {
+      const user = userEvent.setup();
+      render(<DropdownMenu trigger={<button type="button">Actions</button>} items={items} />);
+      await user.click(screen.getByRole('button', { name: 'Actions' }));
+      expect(screen.queryByRole('group')).not.toBeInTheDocument();
+    });
+
+    it('marks a destructive item with the destructive class', async () => {
+      const user = userEvent.setup();
+      render(<DropdownMenu trigger={<button type="button">Actions</button>} items={grouped} />);
+      await user.click(screen.getByRole('button', { name: 'Actions' }));
+      expect(screen.getByRole('menuitem', { name: 'Delete' }).className).toMatch(/destructive/);
+      expect(screen.getByRole('menuitem', { name: 'Edit' }).className).not.toMatch(/destructive/);
+    });
+
+    it('renders the shortcut aria-hidden and keeps it out of the item name', async () => {
+      const user = userEvent.setup();
+      render(<DropdownMenu trigger={<button type="button">Actions</button>} items={grouped} />);
+      await user.click(screen.getByRole('button', { name: 'Actions' }));
+      expect(screen.getByText('⌘D')).toHaveAttribute('aria-hidden', 'true');
+      expect(screen.getByRole('menuitem', { name: 'Duplicate' })).toBeInTheDocument();
+    });
+
+    it('renders a separator before an item with separator set', async () => {
+      const user = userEvent.setup();
+      render(
+        <DropdownMenu
+          trigger={<button type="button">Actions</button>}
+          items={[{ id: 'a', label: 'A' }, { id: 'b', label: 'B', separator: true }]}
+        />
+      );
+      await user.click(screen.getByRole('button', { name: 'Actions' }));
+      expect(screen.getByRole('separator')).toBeInTheDocument();
+    });
+
+    it('renders the separator of a group\'s first item outside the group', async () => {
+      const user = userEvent.setup();
+      render(
+        <DropdownMenu
+          trigger={<button type="button">Actions</button>}
+          items={[
+            { id: 'a', label: 'A', group: 'One' },
+            { id: 'b', label: 'B', group: 'Two', separator: true },
+            { id: 'c', label: 'C', group: 'Two', separator: true },
+          ]}
+        />
+      );
+      await user.click(screen.getByRole('button', { name: 'Actions' }));
+      const groups = screen.getAllByRole('group');
+      const separators = screen.getAllByRole('separator');
+      expect(separators).toHaveLength(2);
+      expect(groups[1]).not.toContainElement(separators[0]);
+      expect(groups[1]).toContainElement(separators[1]);
+    });
+  });
+
+  describe('stylesheet hooks', () => {
+    it.each([
+      '--dropdown_padding',
+      '--dropdown_border-color',
+      '--dropdown_item-padding',
+      '--dropdown_item-radius',
+      '--dropdown_item-font-size',
+      '--dropdown_item-bg--hover',
+      '--dropdown_item-color--hover',
+      '--dropdown_item-opacity--disabled',
+      '--dropdown_item-color--destructive',
+      '--dropdown_item-bg--destructive-hover',
+      '--dropdown_item-color--destructive-hover',
+      '--dropdown_group-label-font-size',
+      '--dropdown_group-label-font-weight',
+      '--dropdown_group-label-color',
+      '--dropdown_group-label-padding',
+      '--dropdown_shortcut-color',
+      '--dropdown_shortcut-font-size',
+    ])('reads %s through var()', hook => {
+      expect(cssSource).toContain(`var(${hook},`);
+    });
+  });
 });

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

@@ -66,3 +66,28 @@ export const AlignedEnd: Story = {
     />
   ),
 };
+
+export const WithGroups: Story = {
+  render: () => (
+    <DropdownMenu
+      trigger={<Button variant="outline">Acties ▾</Button>}
+      items={[
+        { id: 'edit', label: 'Bewerken', icon: <span>✎</span>, shortcut: '⌘E', group: 'Bewerken' },
+        { id: 'duplicate', label: 'Dupliceren', shortcut: '⌘D', group: 'Bewerken' },
+        { id: 'delete', label: 'Verwijderen', destructive: true, group: 'Gevaarlijk' },
+      ]}
+    />
+  ),
+};
+
+export const WithDestructiveItem: Story = {
+  render: () => (
+    <DropdownMenu
+      trigger={<Button variant="outline">Beheer ▾</Button>}
+      items={[
+        { id: 'edit', label: 'Bewerken' },
+        { id: 'delete', label: 'Verwijderen', destructive: true, separator: true },
+      ]}
+    />
+  ),
+};