@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/avatars/index.ts

@@ -0,0 +1,30 @@
+// @datatechsolutions/tympan/avatars (FSL-1.1-ALv2): deterministic generated
+// avatars on DiceBear, in the colours of the active Tympan theme. Needs the
+// optional peer @dicebear/core (9.x) and the style packages you use, each on
+// the licence allow-list (CC0 1.0 or MIT artwork):
+//   import * as shapes from '@dicebear/shapes'
+//   <GeneratedAvatar seed={user.id} avatarStyle={shapes} name={user.name} />
+
+export { GeneratedAvatar, type GeneratedAvatarProps } from './GeneratedAvatar'
+export {
+  avatarSvg,
+  avatarPalette,
+  avatarCssPalette,
+  allowedAvatarStyle,
+  AvatarStyleError,
+  AVATAR_SLOTS,
+  type AvatarSvgOptions,
+  type AvatarStyle,
+  type AvatarKind,
+  type AvatarPalette,
+  type AvatarSlot,
+} from './avatarSvg'
+export {
+  ALLOWED_AVATAR_LICENSES,
+  ALLOWED_AVATAR_STYLES,
+  EXCLUDED_AVATAR_STYLES,
+  type AllowedAvatarLicense,
+  type AllowedAvatarStyle,
+  type AvatarSubject,
+  type ExcludedAvatarStyle,
+} from './styles'

package/src/avatars/styles.ts

@@ -0,0 +1,80 @@
+// Licence gate for DiceBear avatar styles. DiceBear's code is MIT, but every
+// style carries its own artwork licence. Only styles whose artwork is CC0 1.0
+// or MIT are allowed; the list below was read from each package's LICENSE file
+// and its `meta` export (DiceBear 9.4.3, 2026-09-26). THIRD_PARTY_NOTICES.md
+// and PROVENANCE.md carry the same table.
+
+/** Artwork licences that need no attribution in the UI and allow any use. */
+export const ALLOWED_AVATAR_LICENSES = ['CC0 1.0', 'MIT'] as const
+export type AllowedAvatarLicense = (typeof ALLOWED_AVATAR_LICENSES)[number]
+
+/**
+ * What a style depicts. `figure` and `text` styles are for people only: an
+ * agent is never drawn with a face or with initials (design direction §2.11).
+ */
+export type AvatarSubject = 'abstract' | 'figure' | 'text'
+
+export interface AllowedAvatarStyle {
+  /** npm package that holds the style. */
+  package: string
+  /** `meta.title` of the style module (the key the gate matches). */
+  title: string
+  /** Artwork author as recorded by the package. */
+  designer: string
+  /** Where the artwork comes from. */
+  source: string
+  /** Artwork licence (`meta.license.name`). */
+  designLicense: AllowedAvatarLicense
+  /** Licence of the package code. */
+  codeLicense: 'MIT'
+  subject: AvatarSubject
+}
+
+export const ALLOWED_AVATAR_STYLES: readonly AllowedAvatarStyle[] = [
+  { package: '@dicebear/glass', title: 'Glass', designer: 'DiceBear', source: 'https://www.dicebear.com', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'abstract' },
+  { package: '@dicebear/icons', title: 'Bootstrap Icons', designer: 'The Bootstrap Authors', source: 'https://github.com/twbs/icons', designLicense: 'MIT', codeLicense: 'MIT', subject: 'abstract' },
+  { package: '@dicebear/identicon', title: 'Identicon', designer: 'DiceBear', source: 'https://www.dicebear.com', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'abstract' },
+  { package: '@dicebear/initials', title: 'Initials', designer: 'DiceBear', source: 'https://github.com/dicebear/dicebear', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'text' },
+  { package: '@dicebear/lorelei', title: 'Lorelei', designer: 'Lisa Wischofsky', source: 'https://www.figma.com/community/file/1198749693280469639', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'figure' },
+  { package: '@dicebear/lorelei-neutral', title: 'Lorelei Neutral', designer: 'Lisa Wischofsky', source: 'https://www.figma.com/community/file/1198749693280469639', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'figure' },
+  { package: '@dicebear/notionists', title: 'Notionists', designer: 'Zoish', source: 'https://heyzoish.gumroad.com/l/notionists', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'figure' },
+  { package: '@dicebear/notionists-neutral', title: 'Notionists', designer: 'Zoish', source: 'https://heyzoish.gumroad.com/l/notionists', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'figure' },
+  { package: '@dicebear/open-peeps', title: 'Open Peeps', designer: 'Pablo Stanley', source: 'https://www.openpeeps.com/', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'figure' },
+  { package: '@dicebear/pixel-art', title: 'Pixel Art', designer: 'DiceBear', source: 'https://www.figma.com/community/file/1198754108850888330', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'figure' },
+  { package: '@dicebear/pixel-art-neutral', title: 'Pixel Art Neutral', designer: 'DiceBear', source: 'https://www.figma.com/community/file/1198754108850888330', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'figure' },
+  { package: '@dicebear/rings', title: 'Rings', designer: 'DiceBear', source: 'https://www.dicebear.com', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'abstract' },
+  { package: '@dicebear/shapes', title: 'Shapes', designer: 'DiceBear', source: 'https://www.dicebear.com', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'abstract' },
+  { package: '@dicebear/thumbs', title: 'Thumbs', designer: 'DiceBear', source: 'https://www.dicebear.com', designLicense: 'CC0 1.0', codeLicense: 'MIT', subject: 'figure' },
+]
+
+export interface ExcludedAvatarStyle {
+  package: string
+  designer: string
+  designLicense: string
+  reason: string
+}
+
+const CC_BY = 'CC BY 4.0 requires visible attribution wherever the artwork is shown.'
+const CUSTOM = 'Custom "free for personal and commercial use" terms: not an open licence, no redistribution grant.'
+
+/** DiceBear 9 styles left out, and why. Importing any of them fails `check:provenance`. */
+export const EXCLUDED_AVATAR_STYLES: readonly ExcludedAvatarStyle[] = [
+  { package: '@dicebear/adventurer', designer: 'Lisa Wischofsky', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/adventurer-neutral', designer: 'Lisa Wischofsky', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/avataaars', designer: 'Pablo Stanley', designLicense: 'Free for personal and commercial use', reason: CUSTOM },
+  { package: '@dicebear/avataaars-neutral', designer: 'Pablo Stanley', designLicense: 'Free for personal and commercial use', reason: CUSTOM },
+  { package: '@dicebear/big-ears', designer: 'The Visual Team', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/big-ears-neutral', designer: 'The Visual Team', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/big-smile', designer: 'Ashley Seo', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/bottts', designer: 'Pablo Stanley', designLicense: 'Free for personal and commercial use', reason: CUSTOM },
+  { package: '@dicebear/bottts-neutral', designer: 'Pablo Stanley', designLicense: 'Free for personal and commercial use', reason: CUSTOM },
+  { package: '@dicebear/croodles', designer: 'vijay verma', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/croodles-neutral', designer: 'vijay verma', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/dylan', designer: 'Natalia Spivak', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/fun-emoji', designer: 'Davis Uche', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/micah', designer: 'Micah Lanier', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/miniavs', designer: 'Webpixels', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/personas', designer: 'Draftbit', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/toon-head', designer: 'Johan Melin', designLicense: 'CC BY 4.0', reason: CC_BY },
+  { package: '@dicebear/collection', designer: '(all of the above)', designLicense: 'mixed', reason: 'Re-exports every style, including the excluded ones.' },
+]

package/src/base.css

@@ -0,0 +1,49 @@
+/* Base layer: document defaults and shared helpers. */
+@layer tympan.base {
+  :where(html) {
+    /* Focus is never hidden under the sticky top bar (§2.6). */
+    scroll-padding-top: var(--ty-layout-scroll-padding);
+  }
+
+  :where(body),
+  .ty-theme-scope {
+    margin: 0;
+    background-color: var(--ty-bg);
+    color: var(--ty-ink-2);
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .ty-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Shared icon sizing: icons inherit the text colour and never catch pointer events. */
+  .ty-icon {
+    flex: none;
+    width: 1.15em;
+    height: 1.15em;
+    pointer-events: none;
+  }
+
+  /* A subtree in another language re-resolves the per-script stacks of @datatechsolutions/tympan-tokens (:lang overrides). */
+  [lang] {
+    font-family: var(--ty-font-sans);
+  }
+
+  /* Directional icons (chevrons, arrows, "back", "next") mirror in right-to-left text. */
+  :dir(rtl) .ty-mirror-rtl,
+  [dir='rtl'] .ty-mirror-rtl {
+    scale: -1 1;
+  }
+}

package/src/components/action-menu/ActionMenu.css

@@ -0,0 +1,152 @@
+/* ActionMenu (spec: wave-1/action-menu.md; design direction §2.4, §2.5, §2.7). */
+@layer tympan.components {
+  .ty-action-menu {
+    box-sizing: border-box;
+    min-inline-size: 12rem;
+    max-inline-size: min(22rem, calc(100vw - 2 * var(--ty-space-4)));
+    padding: var(--ty-space-1);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-card);
+    background: var(--ty-surface-raised);
+    color: var(--ty-on-surface-raised);
+    box-shadow: var(--ty-shadow-floating);
+    backdrop-filter: blur(var(--ty-glass-blur-floating)) saturate(var(--ty-glass-saturate));
+    -webkit-backdrop-filter: blur(var(--ty-glass-blur-floating)) saturate(var(--ty-glass-saturate));
+    z-index: var(--ty-z-popover);
+    overflow: auto;
+    outline: none;
+  }
+
+  .ty-action-menu[data-entering] {
+    animation: ty-action-menu-in var(--ty-dur-quick) var(--ty-ease);
+  }
+  .ty-action-menu[data-exiting] {
+    animation: ty-action-menu-in var(--ty-dur-quick) var(--ty-ease-out) reverse;
+  }
+
+  @keyframes ty-action-menu-in {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+  }
+
+  .ty-action-menu__menu {
+    outline: none;
+  }
+
+  .ty-action-menu__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-3);
+    min-block-size: calc(var(--ty-control-height) - var(--ty-space-1));
+    padding-block: var(--ty-space-2);
+    padding-inline: var(--ty-space-3);
+    border-radius: calc(var(--ty-radius-card) - var(--ty-space-1));
+    color: var(--ty-ink-2);
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+    cursor: default;
+    outline: none;
+  }
+
+  .ty-action-menu__item[data-focused],
+  .ty-action-menu__item[data-hovered] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+  }
+
+  .ty-action-menu__item[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: -2px;
+  }
+
+  .ty-action-menu__item[data-pressed] {
+    background: var(--ty-accent-soft);
+  }
+
+  .ty-action-menu__item[data-tone='danger'] {
+    color: var(--ty-danger);
+  }
+  .ty-action-menu__item[data-tone='danger'][data-focused] {
+    background: var(--ty-danger-soft);
+    color: var(--ty-on-danger-soft);
+  }
+
+  .ty-action-menu__item[data-disabled] {
+    color: var(--ty-ink-3);
+    opacity: 0.6;
+  }
+
+  .ty-action-menu__icon {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+  }
+
+  .ty-action-menu__icon > svg {
+    inline-size: 18px;
+    block-size: 18px;
+  }
+
+  .ty-action-menu__label {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .ty-action-menu__shortcut {
+    color: var(--ty-ink-3);
+    font-family: var(--ty-font-mono);
+    font-size: var(--ty-font-size-meta);
+  }
+
+  .ty-action-menu__section-title {
+    padding-block: var(--ty-space-2) var(--ty-space-1);
+    padding-inline: var(--ty-space-3);
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+
+  .ty-action-menu__separator {
+    block-size: 1px;
+    margin-block: var(--ty-space-1);
+    border: 0;
+    background: var(--ty-line);
+  }
+
+  .ty-action-menu__target {
+    display: contents;
+  }
+
+  /* Touch layouts: every row at least 44 px tall (§2.10). */
+  @media (max-width: 1023.98px) {
+    .ty-action-menu__item {
+      min-block-size: var(--ty-control-target);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-action-menu[data-entering],
+    .ty-action-menu[data-exiting] {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-action-menu {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      backdrop-filter: none;
+    }
+    .ty-action-menu__item[data-focused] {
+      background: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .ty-action-menu__separator {
+      background: CanvasText;
+    }
+  }
+}

package/src/components/action-menu/ActionMenu.test.tsx

@@ -0,0 +1,189 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Trash2 } from 'lucide-react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { Button } from '../button/Button'
+import { ActionMenu, clampToViewport, type ActionMenuEntry } from './ActionMenu'
+
+import * as rtlDom from '@testing-library/react'
+import rtlUser from '@testing-library/user-event'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const items: ActionMenuEntry[] = [
+  { id: 'open', label: 'Open' },
+  { id: 'rename', label: 'Rename', shortcut: 'F2' },
+  { type: 'separator' },
+  { id: 'archive', label: 'Archive', disabled: true },
+  { type: 'section', id: 'danger', title: 'Danger zone', items: [{ id: 'delete', label: 'Delete', tone: 'danger', icon: Trash2 }] },
+]
+
+describe('ActionMenu', () => {
+  afterEach(() => vi.restoreAllMocks())
+
+  it('opens with Enter and focuses the first enabled item', async () => {
+    render(<ActionMenu label="Record actions" items={items} onAction={() => {}} trigger={<Button>Actions</Button>} />)
+    await userEvent.tab()
+    await userEvent.keyboard('{Enter}')
+    const menu = await screen.findByRole('menu', { name: 'Record actions' })
+    expect(menu).toBeInTheDocument()
+    expect(screen.getByRole('menuitem', { name: 'Open' })).toHaveFocus()
+  })
+
+  it('opens on the last item with ArrowUp from the trigger', async () => {
+    render(<ActionMenu label="Record actions" items={items} onAction={() => {}} trigger={<Button>Actions</Button>} />)
+    screen.getByRole('button', { name: 'Actions' }).focus()
+    await userEvent.keyboard('{ArrowUp}')
+    await screen.findByRole('menu')
+    expect(screen.getByRole('menuitem', { name: 'Delete' })).toHaveFocus()
+  })
+
+  it('wraps from the last item to the first with ArrowDown', async () => {
+    render(<ActionMenu label="Record actions" items={items} onAction={() => {}} trigger={<Button>Actions</Button>} />)
+    screen.getByRole('button', { name: 'Actions' }).focus()
+    await userEvent.keyboard('{ArrowUp}')
+    await screen.findByRole('menu')
+    await userEvent.keyboard('{ArrowDown}')
+    expect(screen.getByRole('menuitem', { name: 'Open' })).toHaveFocus()
+  })
+
+  it('calls onAction once and closes when an item is activated', async () => {
+    const onAction = vi.fn()
+    render(<ActionMenu label="Record actions" items={items} onAction={onAction} trigger={<Button>Actions</Button>} />)
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }))
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'Rename' }))
+    expect(onAction).toHaveBeenCalledTimes(1)
+    expect(onAction).toHaveBeenCalledWith('rename')
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument())
+  })
+
+  it('does not call onAction for a disabled item', async () => {
+    const onAction = vi.fn()
+    render(<ActionMenu label="Record actions" items={items} onAction={onAction} trigger={<Button>Actions</Button>} />)
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }))
+    const archive = await screen.findByRole('menuitem', { name: 'Archive' })
+    expect(archive).toHaveAttribute('aria-disabled', 'true')
+    await userEvent.click(archive)
+    expect(onAction).not.toHaveBeenCalled()
+  })
+
+  it('uses a default icon-only trigger named from messages', () => {
+    render(<ActionMenu label="Record actions" items={items} onAction={() => {}} />)
+    expect(screen.getByRole('button', { name: 'More actions' })).toHaveAttribute('aria-haspopup', 'true')
+  })
+
+  it('keeps a context menu near the bottom-right corner inside the viewport', async () => {
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1024 })
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 768 })
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      x: 0, y: 0, top: 0, left: 0, right: 200, bottom: 300, width: 200, height: 300, toJSON: () => ({}),
+    } as DOMRect)
+    render(<ActionMenu mode="context" label="Row actions" items={items} onAction={() => {}} open position={{ x: 1010, y: 760 }} trigger={<span>Row</span>} />)
+    const menu = await screen.findByRole('menu')
+    const popover = menu.closest('.ty-action-menu') as HTMLElement
+    await waitFor(() => {
+      const left = parseFloat(popover.style.left)
+      const top = parseFloat(popover.style.top)
+      expect(left + 200).toBeLessThanOrEqual(1024)
+      expect(top + 300).toBeLessThanOrEqual(768)
+      expect(left).toBeGreaterThanOrEqual(0)
+    })
+    expect(clampToViewport({ x: 1010, y: 760 }, 200, 300)).toEqual({ x: 816, y: 460 })
+  })
+
+  it('closes on Escape and returns focus to the trigger', async () => {
+    render(<ActionMenu label="Record actions" items={items} onAction={() => {}} trigger={<Button>Actions</Button>} />)
+    const trigger = screen.getByRole('button', { name: 'Actions' })
+    await userEvent.tab()
+    await userEvent.keyboard('{Enter}')
+    await screen.findByRole('menu')
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument())
+    await waitFor(() => expect(trigger).toHaveFocus())
+  })
+
+  it('closes on an outside click', async () => {
+    render(
+      <>
+        <ActionMenu label="Record actions" items={items} onAction={() => {}} trigger={<Button>Actions</Button>} />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Actions' }))
+    await screen.findByRole('menu')
+    await userEvent.click(document.body)
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument())
+  })
+
+  it('opens a context menu with Shift+F10 on a focused row and returns focus on Escape', async () => {
+    render(
+      <ActionMenu
+        mode="context"
+        label="Row actions"
+        items={items}
+        onAction={() => {}}
+        trigger={
+          <div role="row" tabIndex={0} aria-label="Row one">
+            Row one
+          </div>
+        }
+      />,
+    )
+    const row = screen.getByRole('row', { name: 'Row one' })
+    row.focus()
+    await userEvent.keyboard('{Shift>}{F10}{/Shift}')
+    expect(await screen.findByRole('menu', { name: 'Row actions' })).toBeInTheDocument()
+    await waitFor(() => expect(screen.getByRole('menuitem', { name: 'Open' })).toHaveFocus())
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument())
+    await waitFor(() => expect(row).toHaveFocus())
+  })
+
+  it('opens a context menu from the ContextMenu key and from a right click', async () => {
+    const onOpenChange = vi.fn()
+    render(<ActionMenu mode="context" label="Row actions" items={items} onAction={() => {}} onOpenChange={onOpenChange} trigger={<div tabIndex={0}>Row</div>} />)
+    const row = screen.getByText('Row')
+    act(() => row.focus())
+    fireEvent.keyDown(row, { key: 'ContextMenu' })
+    expect(onOpenChange).toHaveBeenLastCalledWith(true)
+    await screen.findByRole('menu')
+    await userEvent.keyboard('{Escape}')
+    fireEvent.contextMenu(row, { clientX: 20, clientY: 30 })
+    expect(await screen.findByRole('menu')).toBeInTheDocument()
+  })
+
+  it('calls onAction and closes in context mode', async () => {
+    const onAction = vi.fn()
+    render(<ActionMenu mode="context" label="Row actions" items={items} onAction={onAction} trigger={<div tabIndex={0}>Row</div>} />)
+    fireEvent.contextMenu(screen.getByText('Row'), { clientX: 20, clientY: 30 })
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'Open' }))
+    expect(onAction).toHaveBeenCalledWith('open')
+    await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument())
+  })
+
+  it('has 44 px rows on touch, reduced motion and forced colours rules', () => {
+    const css = cssOf('components/action-menu/ActionMenu.css')
+    expect(mediaBlock(css, /\(max-width:\s*1023\.98px\)/)).toMatch(/min-block-size:\s*var\(--ty-control-target\)/)
+    expect(mediaBlock(css, /\(prefers-reduced-motion:\s*reduce\)/)).toMatch(/animation:\s*none/)
+    const forced = mediaBlock(css, /\(forced-colors:\s*active\)/)
+    expect(forced).toMatch(/Highlight/)
+    expect(forced).toMatch(/HighlightText/)
+  })
+
+  it('has no axe violations when open', async () => {
+    render(<ActionMenu label="Record actions" items={items} onAction={() => {}} defaultOpen trigger={<Button>Actions</Button>} />)
+    await screen.findByRole('menu')
+    await expectNoAxeViolations(document.body)
+  })
+})
+
+describe('ActionMenu in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    renderRtl(<ActionMenu label="إجراءات" trigger={<Button>المزيد</Button>} items={[{ id: 'open', label: 'فتح' }, { id: 'export', label: 'تصدير' }]} onAction={() => {}} />)
+    await rtlUser.click(rtlDom.screen.getByRole('button', { name: 'المزيد' }))
+    expect(await rtlDom.screen.findByRole('menu')).toBeInTheDocument()
+    await axeRtl(document.body)
+  })
+})