Add documentation for the "command" and "commandfor" attributes, and "command" event.

files/en-us/web/api/commandevent/command/index.md

@@ -0,0 +1,49 @@
+---
+title: "CommandEvent: command property"
+short-title: command
+slug: Web/API/CommandEvent/command
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.CommandEvent.command
+---
+
+{{APIRef("Invoker Commands API")}}{{SeeCompatTable}}
+
+The **`command`** read-only property of the {{domxref("CommandEvent")}} interface returns a string containing the value of the {{domxref("HTMLButtonElement.command", "command")}} property at the time the event was dispatched.
+
+## Value
+
+A string.
+
+## Examples
+
+In the following simple example we've set up an event listener to listen for the "show-modal" command:
+
+```js
+document.body.addEventListener(
+  "command",
+  (event) => {
+    const theAction = event.command;
+
+    if (theAction == "show-modal") {
+      console.log("Showing modal dialog");
+    }
+  },
+  { capture: true },
+);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}}
+- {{domxref("HTMLButtonElement.command")}}
+- {{domxref("HTMLButtonElement.commandForElement")}}

files/en-us/web/api/commandevent/commandevent/index.md

@@ -0,0 +1,51 @@
+---
+title: "CommandEvent: CommandEvent() constructor"
+short-title: CommandEvent()
+slug: Web/API/CommandEvent/CommandEvent
+page-type: web-api-constructor
+status:
+  - experimental
+browser-compat: api.CommandEvent.CommandEvent
+---
+
+{{APIRef("Invoker Commands API")}}{{SeeCompatTable}}
+
+The **`CommandEvent()`** constructor creates a new {{domxref("CommandEvent")}} object.
+
+## Syntax
+
+```js-nolint
+new CommandEvent(type)
+new CommandEvent(type, options)
+```
+
+### Parameters
+
+- `type`
+  - : A string with the name of the event.
+    It is case-sensitive and browsers set it to `beforeinput` or `input`.
+- `options` {{optional_inline}}
+  - : An object that, _in addition of the properties defined in {{domxref("Event/Event", "Event()")}}_, can have the following properties:
+    - `source` {{optional_inline}}
+      - : An {{domxref("HTMLButtonElement")}} representing the button that was interacted with to cause this event. This can be any element but we recommend only using button as a source to avoid surprises.
+    - `command` {{optional_inline}}
+      - : A string containing the command for the controlled element to take. While manually instantiating a `CommandEvent` it is possible to use any string value, but it is recommended to use one of the built-in names or prefix with two dashes (`--`) to ensure forward compatibility.
+
+### Return value
+
+A new {{domxref("CommandEvent")}} object.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}}
+- {{domxref("HTMLButtonElement.command")}}
+- {{domxref("HTMLButtonElement.commandForElement")}}
+- {{domxref("CommandEvent")}}

files/en-us/web/api/commandevent/index.md

@@ -0,0 +1,90 @@
+---
+title: CommandEvent
+slug: Web/API/CommandEvent
+page-type: web-api-interface
+status:
+  - experimental
+browser-compat: api.CommandEvent
+---
+
+{{APIRef("Invoker Commands API")}}{{SeeCompatTable}}
+
+The **`CommandEvent`** interface represents an event notifying the user when a {{domxref("HTMLButtonElement", "button")}} element with valid {{domxref("HTMLButtonElement.commandForElement", "commandForElement")}} and {{domxref("HTMLButtonElement.command", "command")}} attributes is about to invoke an interactive element.
+
+It is the event object for the `HTMLElement` {{domxref("HTMLElement.command_event", "command")}} event, which represents an action from an Invoker Control it is invoked (for example when it is clicked or pressed).
+
+{{InheritanceDiagram}}
+
+## Constructor
+
+- {{domxref("CommandEvent.CommandEvent", "CommandEvent()")}}
+  - : Creates an `CommandEvent` object.
+
+## Instance properties
+
+_This interface inherits properties from its parent, {{DOMxRef("Event")}}._
+
+- {{domxref("CommandEvent.source")}} {{ReadOnlyInline}}
+  - : An {{domxref("HTMLButtonElement")}} representing the button that caused this invocation.
+- {{domxref("CommandEvent.command")}} {{ReadOnlyInline}}
+  - : A string representing the {{domxref("HTMLButtonElement.command", "command")}} value of the source button.
+
+## Examples
+
+### Basic example
+
+```html
+<button commandfor="mypopover" command="show-popover">Show popover</button>
+
+<div popover id="mypopover">
+  <button commandfor="mypopover" command="hide-popover">Hide popover</button>
+</div>
+```
+
+```js
+const popover = document.getElementById("mypopover");
+
+// ...
+
+popover.addEventListener("command", (event) => {
+  if (event.command === "show-popover") {
+    console.log("Popover is about to be shown");
+  }
+});
+```
+
+### Custom example
+
+```html
+<button commandfor="the-image" command="--rotate-left">Rotate Left</button>
+
+<button commandfor="the-image" command="--rotate-right">Rotate Right</button>
+
+<img id="the-image" src="photo.jpg" />
+```
+
+```js
+const image = document.getElementById("the-image");
+
+image.addEventListener("command", (event) => {
+  if (event.command == "--rotate-left") {
+    event.target.style.rotate = "-90deg";
+  } else if (event.command == "--rotate-right") {
+    event.target.style.rotate = "90deg";
+  }
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}}
+- {{domxref("HTMLButtonElement.command")}}
+- {{domxref("HTMLButtonElement.commandForElement")}}

files/en-us/web/api/commandevent/source/index.md

@@ -0,0 +1,51 @@
+---
+title: "CommandEvent: source property"
+short-title: source
+slug: Web/API/CommandEvent/source
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.CommandEvent.source
+---
+
+{{APIRef("Invoker Commands API")}}{{SeeCompatTable}}
+
+The **`source`** read-only property of the {{domxref("CommandEvent")}} interface returns an {{domxref("EventTarget")}} representing the control that invoked the given command.
+
+## Value
+
+An {{domxref("EventTarget")}} object. Usually an {{domxref("HTMLButtonElement")}}.
+
+## Examples
+
+In the following simple example we've set up an event listener to add a temporary class to the button element upon a CommandEvent:
+
+```js
+document.body.addEventListener(
+  "command",
+  (event) => {
+    const theButton = event.source;
+
+    theButton.classList.add("just-pressed");
+
+    setTimeout(() => {
+      theButton.classList.remove("just-pressed");
+    }, 1000);
+  },
+  { capture: true },
+);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}}
+- {{domxref("HTMLButtonElement.command")}}
+- {{domxref("HTMLButtonElement.commandForElement")}}

files/en-us/web/api/htmlbuttonelement/command/index.md

@@ -0,0 +1,76 @@
+---
+title: "HTMLButtonElement: command property"
+short-title: command
+slug: Web/API/HTMLButtonElement/command
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.HTMLButtonElement.command
+---
+
+{{APIRef("Invoker Commands API")}}{{SeeCompatTable}}
+
+The **`command`** property of the {{domxref("HTMLButtonElement")}} interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, [`commandfor`](/en-US/docs/Web/HTML/Element/button#commandfor) must be set.
+
+It reflects the [`command`](/en-US/docs/Web/HTML/Element/button#command) HTML attribute.
+
+## Value
+
+A string. See the [`command`](/en-US/docs/Web/HTML/Element/button#command) attribute for valid values.
+
+## Examples
+
+### Basic example
+
+```html
+<button id="toggleBtn" commandfor="mypopover" command="toggle-popover">
+  Toggle popover
+</button>
+
+<div popover id="mypopover">
+  <button commandfor="mypopover" command="hide-popover">Hide popover</button>
+</div>
+```
+
+```js
+const popover = document.getElementById("mypopover");
+const toggleBtn = document.getElementById("toggleBtn");
+
+toggleBtn.command = "show-popover";
+```
+
+### Custom example, using events
+
+```html
+<button commandfor="the-image" command="--rotate-left">Rotate Left</button>
+
+<button commandfor="the-image" command="--rotate-right">Rotate Right</button>
+
+<img id="the-image" src="photo.jpg" />
+```
+
+```js
+const image = document.getElementById("the-image");
+
+image.addEventListener("command", (event) => {
+  if (event.command == "--rotate-left") {
+    event.target.style.rotate = "-90deg";
+  } else if (event.command == "--rotate-right") {
+    event.target.style.rotate = "90deg";
+  }
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}}
+- {{domxref("HTMLButtonElement.commandForElement")}}
+- {{domxref("CommandEvent")}}

files/en-us/web/api/htmlbuttonelement/commandforelement/index.md

@@ -0,0 +1,42 @@
+---
+title: "HTMLButtonElement: commandForElement property"
+short-title: commandForElement
+slug: Web/API/HTMLButtonElement/commandForElement
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.HTMLButtonElement.commandForElement
+---
+
+{{APIRef("Invoker Commands API")}}{{SeeCompatTable}}
+
+The **`commandForElement`** property of the {{domxref("HTMLButtonElement")}} interface gets and sets the element to control via a button.
+
+It is the JavaScript equivalent of the [`commandfor`](/en-US/docs/Web/HTML/Element/button#commandfor) HTML attribute.
+
+## Value
+
+A reference to an existing {{domxref("Element")}} that the button controls.
+
+## Examples
+
+```js
+const popover = document.getElementById("mypopover");
+const toggleBtn = document.getElementById("toggleBtn");
+
+toggleBtn.commandForElement = popover;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}}
+- {{domxref("HTMLButtonElement.command")}}
+- {{domxref("CommandEvent")}}