@boostdev/design-system-components 2.15.0 → 2.17.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-WWWJCSXN.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsNotificationBanner

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

@@ -1,6 +1,6 @@
 import {
   BdsRating
-} from "../chunk-SYNLFKD3.js";
+} from "../chunk-3LQKFSMR.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsRating

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.15.0",
+  "version": "2.17.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/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 },
+      ]}
+    />
+  ),
+};

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

@@ -2,6 +2,7 @@ import {
   HTMLAttributes,
   KeyboardEvent,
   ReactElement,
+  Fragment,
   cloneElement,
   isValidElement,
   useEffect,
@@ -20,8 +21,29 @@ export interface DropdownMenuItem {
   disabled?: boolean;
   icon?: ReactElement;
   separator?: boolean;
+  /** Renders the item in the error colour, for actions that delete or discard. */
+  destructive?: boolean;
+  /** Keyboard shortcut as display text. Decorative (`aria-hidden`); the consumer wires the actual key. */
+  shortcut?: string;
+  /** Consecutive items with the same group render inside a labelled `role="group"`. */
+  group?: string;
 }
 
+interface IndexedItem {
+  item: DropdownMenuItem;
+  index: number;
+}
+
+/** Splits items into runs of consecutive items sharing the same `group`. */
+const toSegments = (items: DropdownMenuItem[]): IndexedItem[][] =>
+  items.reduce<IndexedItem[][]>((segments, item, index) => {
+    const last = segments[segments.length - 1];
+    const startsNewSegment = !last || item.group === undefined || last[0].item.group !== item.group;
+    return startsNewSegment
+      ? [...segments, [{ item, index }]]
+      : [...segments.slice(0, -1), [...last, { item, index }]];
+  }, []);
+
 export interface DropdownMenuProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   trigger: ReactElement;
   items: DropdownMenuItem[];
@@ -125,23 +147,53 @@ export function DropdownMenu({
           role="menu"
           className={cn(css.menu, css[`--placement_${placement}`])}
         >
-          {items.map((item, index) => (
-            <li key={item.id} role="presentation">
-              {item.separator && <hr className={css.separator} role="separator" />}
-              <button
-                ref={el => { itemRefs.current[index] = el; }}
-                type="button"
-                role="menuitem"
-                disabled={item.disabled}
-                className={css.item}
-                onClick={() => { item.onClick?.(); close(true); }}
-                onKeyDown={e => handleItemKeyDown(e, index)}
-              >
-                {item.icon && <span className={css.icon} aria-hidden="true">{item.icon}</span>}
-                {item.label}
-              </button>
-            </li>
-          ))}
+          {toSegments(items).map(segment => {
+            const { item: first } = segment[0];
+            const groupLabel = first.group;
+            const renderSeparator = () => (
+              <li role="presentation" className={css.separatorRow}>
+                <hr className={css.separator} role="separator" />
+              </li>
+            );
+            /* The first item's separator sits before the group, so the group holds only its label and items. */
+            const leadingSeparator = groupLabel !== undefined && first.separator;
+            const rows = segment.map(({ item, index }, position) => (
+              <Fragment key={item.id}>
+                {item.separator && !(leadingSeparator && position === 0) && renderSeparator()}
+                <li role="presentation">
+                  <button
+                    ref={el => { itemRefs.current[index] = el; }}
+                    type="button"
+                    role="menuitem"
+                    disabled={item.disabled}
+                    className={cn(css.item, item.destructive && css['--destructive'])}
+                    onClick={() => { item.onClick?.(); close(true); }}
+                    onKeyDown={e => handleItemKeyDown(e, index)}
+                  >
+                    {item.icon && <span className={css.icon} aria-hidden="true">{item.icon}</span>}
+                    <span className={css.label}>{item.label}</span>
+                    {item.shortcut && <span className={css.shortcut} aria-hidden="true">{item.shortcut}</span>}
+                  </button>
+                </li>
+              </Fragment>
+            ));
+
+            return groupLabel === undefined ? (
+              rows
+            ) : (
+              <Fragment key={`group-${first.id}`}>
+                {leadingSeparator && renderSeparator()}
+                <li role="presentation">
+                <ul role="group" aria-labelledby={`${menuId}-group-${first.id}`} className={css.group}>
+                  <li role="presentation" id={`${menuId}-group-${first.id}`} className={css.groupLabel}>
+                    {groupLabel}
+                  </li>
+                  {rows}
+                </ul>
+                </li>
+              </Fragment>
+            );
+          })}
         </ul>
       )}
     </div>

package/src/components/interaction/Rating/Rating.mdx

@@ -40,8 +40,11 @@ Read-only star rating display. Use to show an existing score; for user input, co
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--rating_color`</td><td>`var(--bds-color_bg)`</td><td>Empty star colour</td></tr>
+<tr><td>`--rating_color`</td><td>`var(--bds-color_bg)`</td><td>Empty star fill</td></tr>
 <tr><td>`--rating_color--filled`</td><td>`var(--bds-color_warning)`</td><td>Filled star colour</td></tr>
+<tr><td>`--rating_stroke-color`</td><td>`var(--bds-color_on-bg--as-surface)`</td><td>Empty star outline, a non-text mark (falls back to `--bds-color_on-bg--border`, then `--bds-color_on-bg`, on foundations before 2.3.0)</td></tr>
+<tr><td>`--rating_stroke-color--filled`</td><td>`currentcolor`</td><td>Filled star outline, the filled colour by default so both kinds keep the same size</td></tr>
+<tr><td>`--rating_stroke-width`</td><td>`var(--bdc-outline_width)`</td><td>Outline width, in the star's 24-unit viewBox</td></tr>
 </tbody>
 </table>
 

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

@@ -5,12 +5,21 @@
     color: var(--rating_color, var(--bds-color_bg));
   }
 
+  /* Empty stars are outlined, filled stars solid: the two differ in shape, not
+     only in hue, because the as-surface grey and the warning fill are close in
+     lightness. The outline is a non-text mark, so it takes the as-surface
+     member (>= 3:1 on the page). Filled stars stroke in their own colour so
+     both kinds keep the same size. */
   .star {
     inline-size: 1.5em;
     block-size: 1.5em;
+    stroke: var(--rating_stroke-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
+    stroke-width: var(--rating_stroke-width, var(--bdc-outline_width));
+    stroke-linejoin: round;
   }
 
   .--filled {
     color: var(--rating_color--filled, var(--bds-color_warning));
+    stroke: var(--rating_stroke-color--filled, currentcolor);
   }
 }