new repository

1 files changed, 81 insertions, 0 deletions

diff --git a/devdocs/html/element%2Fmenuitem.html b/devdocs/html/element%2Fmenuitem.html
new file mode 100644
index 00000000..c446d12a
--- /dev/null
+++ b/devdocs/html/element%2Fmenuitem.html
@@ -0,0 +1,81 @@
+<header><h1>&lt;menuitem&gt;</h1></header><div class="section-content">
+<div class="notecard deprecated" id="sect1"><p><strong>Deprecated:</strong> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the <a href="#browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p></div>
+<div class="notecard nonstandard" id="sect2"><p><strong>Non-standard:</strong> This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</p></div> <p>The <code>&lt;menuitem&gt;</code> <a href="../index">HTML</a> element represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button.</p> <p>A command can either be defined explicitly, with a textual label and optional icon to describe its appearance, or alternatively as an <em>indirect command</em> whose behavior is defined by a separate element. Commands can also optionally include a checkbox or be grouped to share radio buttons. (Menu items for indirect commands gain checkboxes or radio buttons when defined against elements <code>&lt;input type="checkbox"&gt;</code> and <code>&lt;input type="radio"&gt;</code>.)</p>
+</div>
+<h2 id="attributes">Attributes</h2>
+<div class="section-content">
+<p>This element includes the <a href="../global_attributes">global attributes</a>; in particular <code>title</code> can be used to describe the command, or provide usage hints.</p> <dl> <dt id="checked">
+<a href="#checked"><code>checked</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
+</dt> <dd> <p>Boolean attribute which indicates whether the command is selected. May only be used when the <code>type</code> attribute is <code>checkbox</code> or <code>radio</code>.</p> </dd> <dt id="command">
+<a href="#command"><code>command</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
+</dt> <dd> <p>Specifies the ID of a separate element, indicating a command to be invoked indirectly. May not be used within a menu item that also includes the attributes <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> or <code>type</code>.</p> </dd> <dt id="default">
+<a href="#default"><code>default</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
+</dt> <dd> <p>This Boolean attribute indicates use of the same command as the menu's subject element (such as a <code>button</code> or <code>input</code>).</p> </dd> <dt id="disabled">
+<a href="#disabled"><code>disabled</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
+</dt> <dd> <p>Boolean attribute which indicates that the command is not available in the current state. Note that <code>disabled</code> is distinct from <code>hidden</code>; the <code>disabled</code> attribute is appropriate in any context where a change in circumstances might render the command relevant.</p> </dd> <dt id="icon">
+<a href="#icon"><code>icon</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
+</dt> <dd> <p>Image URL, used to provide a picture to represent the command.</p> </dd> <dt id="label"><a href="#label"><code>label</code></a></dt> <dd> <p>The name of the command as shown to the user. Required when a <code>command</code> attribute is not present.</p> </dd> <dt id="radiogroup">
+<a href="#radiogroup"><code>radiogroup</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
+</dt> <dd> <p>This attribute specifies the name of a group of commands to be toggled as radio buttons when selected. May only be used where the <code>type</code> attribute is <code>radio</code>.</p> </dd> <dt id="type">
+<a href="#type"><code>type</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> <abbr class="icon icon-nonstandard" title="Non-standard. Check cross-browser support before using."> <span class="visually-hidden">Non-standard</span> </abbr>
+</dt> <dd> <p>This attribute indicates the kind of command, and can be one of three values.</p> <ul> <li>
+<code>command</code>: A regular command with an associated action. This is the missing value default.</li> <li>
+<code>checkbox</code>: Represents a command that can be toggled between two different states.</li> <li>
+<code>radio</code>: Represent one selection from a group of commands that can be toggled as radio buttons.</li> </ul> </dd> </dl>
+</div>
+<h2 id="examples">Examples</h2>
+
+<h3 id="html">HTML</h3>
+<div class="section-content"><div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="BTiHTjP6sN+zysHcuCfxoMzzFEa1aUEgiVt8vdn3otY=" data-language="html"><span class="token comment">&lt;!-- A &lt;div&gt; element with a context menu --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">contextmenu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-menu<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Right-click to see the adjusted context menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menu</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>context<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-menu<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menuitem</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>Checkbox<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>menuitem</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menuitem</span>
+    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>command<span class="token punctuation">"</span></span>
+    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This command does nothing<span class="token punctuation">"</span></span>
+    <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>favicon-192x192.png<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+    Commands don't render their contents.
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>menuitem</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menuitem</span>
+    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>command<span class="token punctuation">"</span></span>
+    <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This command has javascript<span class="token punctuation">"</span></span>
+    <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'command clicked'</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">&gt;</span></span>
+    Commands don't render their contents.
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>menuitem</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span> <span class="token punctuation">/&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menuitem</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">radiogroup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Radio Button 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>menuitem</span><span class="token punctuation">&gt;</span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>menuitem</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">radiogroup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Radio Button 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>menuitem</span><span class="token punctuation">&gt;</span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>menu</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div></div>
+<h3 id="css">CSS</h3>
+<div class="section-content"><div class="code-example">
+<p class="example-header"><span class="language-name">css</span></p>
+<pre data-signature="sZSFt7GZWQTjuNzkDA9M0lYCZVgpeqYK+GNWMLzPZQk=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span>
+  <span class="token property">background-color</span><span class="token punctuation">:</span> lightgreen<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</pre>
+</div></div>
+<h3 id="result">Result</h3>
+<div class="section-content"><div class="code-example" id="sect3">
+
+<iframe class="sample-code-frame" title="Examples" id="frame_example" width="100%" height="80" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/menuitem/runner.html?id=example" loading="lazy"></iframe>
+</div></div>
+<h2 id="technical_summary">Technical summary</h2>
+<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td>None.</td> </tr> <tr> <th scope="row">Permitted content</th> <td>None; it is a <a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element">void element</a>.</td> </tr> <tr> <th scope="row">Tag omission</th> <td>Must have a start tag and must not have an end tag.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> The <a href="menu"><code>&lt;menu&gt;</code></a> element, where that element is in the <em>popup menu</em> state. (If specified, the <code>type</code> attribute of the <a href="menu"><code>&lt;menu&gt;</code></a> element must be <code>popup</code>; if missing, the parent element of the <a href="menu"><code>&lt;menu&gt;</code></a> must itself be a <a href="menu"><code>&lt;menu&gt;</code></a> in the <em>popup menu</em> state.) </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>None</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMenuItemElement"><code>HTMLMenuItemElement</code></a></td> </tr> </tbody> </table></div></figure></div>
+<h2 id="specifications">Specifications</h2>
+<div class="section-content"><p>Not part of any current specifications.</p></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/" target="_blank">HTML context menus in Firefox (Screencast and Code)</a></li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem</a>
+  </p>
+</div>