feat: add Invoker Commands (`command`/`commandfor`) to dialog-based components by Copilot · Pull Request #6513 · db-ux-design-system/core-web

Copilot · 2026-04-18T09:52:06Z

Integrate the Invoker Commands API (command and commandfor HTML attributes) into all components using <dialog>, with JavaScript feature detection for older browsers.

follow up to #6603

DBDrawer

Close button: command="close" + commandfor pointing to the dialog's id
command event listener on <dialog> calls preventDefault() to preserve animation and JS state management

DBHeader

Burger menu button: command="show-modal" + commandfor pointing to derived drawer ID (${id}-drawer)
Drawer receives id derived from the header's id prop

Plain HTML examples & docs

Drawer and Header HTML docs updated with Invoker Commands usage and feature detection fallback:

<button class="db-button" command="show-modal" commandfor="my-drawer">Open</button>
<dialog id="my-drawer" class="db-drawer">
  <button class="db-button" command="close" commandfor="my-drawer">Close</button>
</dialog>

<script>
  if (!('CommandEvent' in window)) {
    // JS fallback for browsers without Invoker Commands support
  }
</script>

BrowserSupport.md

Invoker Commands moved from "(planned)" to active usage

Original prompt

Please include Invoker Commands (command and commandfor HTML attributes) into all components and examples, documentation etc. in which we use the dialog HTML elements, as this even already provides built-in commands. Please integrate feature detection in JavaScript as well for older, unsupported browser versions. By this we'd like to future prove show the relation of elements in our documentation and inspire our users to use stable features by the web platform.

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/copilot/add-invoker-commands-to-dialog-components

changeset-bot · 2026-04-18T09:52:10Z

🦋 Changeset detected

Latest commit: f1fe821

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@db-ux/core-components	Minor
@db-ux/ngx-core-components	Minor
@db-ux/react-core-components	Minor
@db-ux/wc-core-components	Minor
@db-ux/v-core-components	Minor
@db-ux/core-foundations	Minor
@db-ux/core-stylelint	Minor
@db-ux/core-migration	Minor
@db-ux/agent-cli	Minor
@db-ux/core-eslint-plugin	Minor
@db-ux/core-vite-plugin	Minor
@db-ux/core-postcss-plugin	Minor
@db-ux/mcp-server	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/9f347c3d-ad28-49b3-8d49-3eb46a67bc9b Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

…nents Add command and commandfor HTML attributes to buttons interacting with dialog elements in the drawer and header components. Include feature detection fallback for older browsers. Update plain HTML examples and documentation to showcase Invoker Commands usage. Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/9f347c3d-ad28-49b3-8d49-3eb46a67bc9b Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Add React post-build script to generate type declarations for the command and commandfor HTML attributes. Add changeset for the new Invoker Commands feature. Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/9f347c3d-ad28-49b3-8d49-3eb46a67bc9b Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Copilot

Pull request overview

This PR introduces the web platform’s Invoker Commands API (command / commandfor) across dialog-based components (Drawer/Header) and related documentation, plus build-pipeline adjustments to avoid attribute mangling and support React typings.

Changes:

Add command / commandfor props to DBButton and pass them through to the native <button>.
Wire Invoker Commands into DBDrawer and DBHeader (and update plain-HTML docs/examples with a JS fallback for unsupported browsers).
Update build scripts: Stencil for={ → htmlFor={ replacement avoids touching commandfor, and React post-build generates a type augmentation file.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/foundations/docs/BrowserSupport.md	Marks Invoker Commands as actively used (not planned).
packages/components/src/components/button/model.ts	Adds `command` / `commandfor` to the public Button prop model.
packages/components/src/components/button/button.lite.tsx	Passes `command` / `commandfor` through to the native `<button>`.
packages/components/src/components/drawer/drawer.lite.tsx	Adds `command` listener + close button Invoker Commands attributes.
packages/components/src/components/drawer/index.html	Updates example to use Invoker Commands + JS fallback.
packages/components/src/components/drawer/docs/HTML.md	Documents Invoker Commands usage + JS fallback snippet.
packages/components/src/components/header/header.lite.tsx	Adds derived drawer id + burger-menu Invoker Commands attributes.
packages/components/src/components/header/docs/HTML.md	Documents Invoker Commands usage + JS fallback snippet.
packages/components/scripts/post-build/stencil.ts	Regex replacement prevents `commandfor` from being altered.
packages/components/scripts/post-build/react.ts	Writes a React type augmentation file for `command` / `commandfor`.
package-lock.json	Lockfile changes (includes Vue patch/range updates).
.changeset/invoker-commands-dialog.md	Declares a minor bump for affected packages.

- Fix event listener leak: use AbortController + onUnMount to clean up the command event listener when drawer is unmounted - Fix header drawer ID: derive from props.id ?? props.propOverrides?.id so commandfor works when id is set via propOverrides - Fix React type augmentation: change .d.ts to .ts and import from index.ts so it's included in the compiled dist/ output - Update TODO comment in React post-build per suggestion - Update feature detection text in drawer and header HTML docs with polyfill reference per suggestions Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/f2040173-be93-4267-84d0-0ba10910dfec Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

…nents

even in the other files

…nents

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

nmerget · 2026-04-27T07:26:00Z

We should just add command and commandFor to the components as properties instead of changing the complete DBHeader. We already have this branch where the DBHeader won't have any external open/setOpen property anymore

…nents

…pilot/add-invoker-commands-to-dialog-components

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 29 out of 31 changed files in this pull request and generated 4 comments.

 export type DBHeaderProps = DBHeaderDefaultProps &
 	InnerCloseButtonProps &
 	GlobalProps &
-	ToggleEventProps &
 	ContainerWidthProps;


+						command="close"
+						commandfor={props.id ?? props.propOverrides?.id}
 						onClick={(event) => state.handleClose(event, true)}>


+							command="show-modal"
+							commandfor={`${props.id ?? props.propOverrides?.id ?? state.generatedId}-drawer`}>


+		closeDialog: () => {
+			if (_ref?.open) {
+				if (dialogContainerRef) {


Initial plan

ee260c9

Copilot AI assigned Copilot and mfranzke Apr 18, 2026

github-project-automation Bot added this to UX Engineering Team Backlog Apr 18, 2026

github-project-automation Bot moved this to 🏗 In progress in UX Engineering Team Backlog Apr 18, 2026

Copilot started work on behalf of mfranzke April 18, 2026 09:52 View session

Copilot AI and others added 3 commits April 18, 2026 09:56

Initial plan for Invoker Commands integration

27fd1b2

Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/9f347c3d-ad28-49b3-8d49-3eb46a67bc9b Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add invoker commands to dialog HTML elements documentation~~ feat: add Invoker Commands (command/commandfor) to dialog-based components Apr 18, 2026

Copilot AI requested a review from mfranzke April 18, 2026 10:22

Copilot finished work on behalf of mfranzke April 18, 2026 10:22

mfranzke requested review from Copilot and removed request for mfranzke April 18, 2026 13:55

Copilot started reviewing on behalf of mfranzke April 18, 2026 13:55 View session

Copilot AI reviewed Apr 18, 2026

View reviewed changes

Comment thread packages/components/src/components/header/header.lite.tsx Outdated

Comment thread packages/components/src/components/drawer/drawer.lite.tsx Outdated

Comment thread packages/components/scripts/post-build/react.ts Outdated

mfranzke reviewed Apr 18, 2026

View reviewed changes

Comment thread packages/components/scripts/post-build/react.ts Outdated

mfranzke reviewed Apr 18, 2026

View reviewed changes

Comment thread packages/components/src/components/drawer/docs/HTML.md Outdated

mfranzke reviewed Apr 18, 2026

View reviewed changes

Comment thread packages/components/src/components/header/docs/HTML.md Outdated

Copilot started work on behalf of mfranzke April 18, 2026 16:07 View session

Copilot AI requested a review from mfranzke April 18, 2026 16:24

Copilot finished work on behalf of mfranzke April 18, 2026 16:24

Fix formatting in HTML.md documentation

88e13e8

github-actions Bot added 📕documentation Improvements or additions to documentation 🏗foundations 🏘components labels Apr 18, 2026

mfranzke added 2 commits April 18, 2026 22:36

Update HTML.md

5b2d844

Merge branch 'main' into copilot/add-invoker-commands-to-dialog-compo…

3b660c7

…nents

mfranzke mentioned this pull request Apr 19, 2026

feat(drawer): add closedby="any" to prevent backdrop drag-close #5959

Draft

9 tasks

mfranzke added 2 commits April 19, 2026 08:19

refactor: switching to Invoker Commands

3f64202

even in the other files

refactor: switching to Invoker Commands

e8fe73d

even in the other files

github-actions Bot added the 📺showcases Changes to 1-n showcases label Apr 19, 2026

mfranzke reviewed Apr 25, 2026

View reviewed changes

Comment thread packages/components/src/components/header/header.lite.tsx Outdated

mfranzke and others added 2 commits April 25, 2026 17:24

Apply suggestion from @mfranzke

170b3da

Merge branch 'main' into copilot/add-invoker-commands-to-dialog-compo…

fc4c945

…nents

github-actions Bot mentioned this pull request Apr 25, 2026

Automated PR: auto update snapshots #6558

Merged

auto update snapshots (#6558)

3139814

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

mfranzke marked this pull request as ready for review April 26, 2026 20:23

mfranzke moved this from 🏗 In progress to 🎁 Ready for review in UX Engineering Team Backlog Apr 26, 2026

mfranzke added this to the 5.0.0 milestone Apr 26, 2026

nmerget moved this from 🎁 Ready for review to 👀 Actively In Review in UX Engineering Team Backlog Apr 27, 2026

nmerget moved this from 👀 Actively In Review to 🎶 Waiting for feedback in UX Engineering Team Backlog Apr 27, 2026

Merge branch 'main' into copilot/add-invoker-commands-to-dialog-compo…

e722443

…nents

mfranzke moved this from 🎶 Waiting for feedback to Backlog in UX Engineering Team Backlog May 1, 2026

mfranzke marked this pull request as draft May 1, 2026 07:43

mfranzke changed the base branch from main to feat-add-invoker-commands-support-for-DBButton May 1, 2026 07:53

Merge branch 'feat-add-invoker-commands-support-for-DBButton' into co…

f1fe821

…pilot/add-invoker-commands-to-dialog-components

mfranzke changed the title ~~feat: add Invoker Commands (command/commandfor) to dialog-based components~~ feat: add Invoker Commands (command/commandfor) to dialog-based components May 1, 2026

mfranzke linked an issue May 26, 2026 that may be closed by this pull request

Introduce Invoker commands instead of JS glue code #3322

Open

mfranzke requested a review from Copilot May 31, 2026 11:15

Copilot started reviewing on behalf of mfranzke May 31, 2026 11:15 View session

Copilot AI reviewed May 31, 2026

View reviewed changes

mfranzke requested a review from Copilot May 31, 2026 19:49

Copilot started reviewing on behalf of mfranzke May 31, 2026 19:50 View session

Copilot AI reviewed May 31, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Invoker Commands (`command`/`commandfor`) to dialog-based components#6513

feat: add Invoker Commands (`command`/`commandfor`) to dialog-based components#6513
Copilot wants to merge 15 commits into
feat-add-invoker-commands-support-for-DBButtonfrom
copilot/add-invoker-commands-to-dialog-components

Copilot AI commented Apr 18, 2026 •

edited by github-actions Bot

Loading

Uh oh!

changeset-bot Bot commented Apr 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nmerget commented Apr 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		command="show-modal"
		commandfor={`${props.id ?? props.propOverrides?.id ?? state.generatedId}-drawer`}>

Conversation

Copilot AI commented Apr 18, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DBDrawer

DBHeader

Plain HTML examples & docs

BrowserSupport.md

Uh oh!

changeset-bot Bot commented Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nmerget commented Apr 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Apr 18, 2026 •

edited by github-actions Bot

Loading

changeset-bot Bot commented Apr 18, 2026 •

edited

Loading