npm - @aurodesignsystem-dev/auro-formkit - Versions diffs - 0.0.0-pr1451.21 → 0.0.0-pr1451.23 - Mend

@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.21 → 0.0.0-pr1451.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/components/checkbox/demo/api.min.js +1 -1
package/components/checkbox/demo/getting-started.md +154 -0
package/components/checkbox/demo/index.min.js +1 -1
package/components/checkbox/dist/index.js +1 -1
package/components/checkbox/dist/registered.js +1 -1
package/components/combobox/demo/api.min.js +3 -3
package/components/combobox/demo/customize.min.js +3 -3
package/components/combobox/demo/getting-started.min.js +3 -3
package/components/combobox/demo/index.min.js +3 -3
package/components/combobox/dist/index.js +3 -3
package/components/combobox/dist/registered.js +3 -3
package/components/counter/demo/api.min.js +2 -2
package/components/counter/demo/getting-started.md +150 -0
package/components/counter/demo/index.min.js +2 -2
package/components/counter/dist/index.js +2 -2
package/components/counter/dist/registered.js +2 -2
package/components/datepicker/demo/api.min.js +3 -3
package/components/datepicker/demo/index.min.js +3 -3
package/components/datepicker/dist/index.js +3 -3
package/components/datepicker/dist/registered.js +3 -3
package/components/dropdown/demo/api.min.js +1 -1
package/components/dropdown/demo/getting-started.md +146 -0
package/components/dropdown/demo/index.min.js +1 -1
package/components/dropdown/dist/index.js +1 -1
package/components/dropdown/dist/registered.js +1 -1
package/components/form/demo/api.min.js +13 -13
package/components/form/demo/getting-started.md +143 -0
package/components/form/demo/index.min.js +13 -13
package/components/input/demo/api.min.js +1 -1
package/components/input/demo/customize.min.js +1 -1
package/components/input/demo/getting-started.min.js +1 -1
package/components/input/demo/index.min.js +1 -1
package/components/input/dist/index.js +1 -1
package/components/input/dist/registered.js +1 -1
package/components/menu/README.md +8 -26
package/components/menu/demo/accessibility.html +53 -0
package/components/menu/demo/accessibility.md +34 -0
package/components/menu/demo/api.html +11 -17
package/components/menu/demo/api.md +0 -1059
package/components/menu/demo/customize.html +54 -0
package/components/menu/demo/customize.md +639 -0
package/components/menu/demo/demo-support.js +60 -0
package/components/menu/demo/design.html +53 -0
package/components/menu/demo/design.md +81 -0
package/components/menu/demo/getting-started.html +54 -0
package/components/menu/demo/getting-started.md +322 -0
package/components/menu/demo/index.html +14 -19
package/components/menu/demo/index.md +26 -63
package/components/menu/demo/keyboard-behavior.html +53 -0
package/components/menu/demo/readme.html +11 -15
package/components/menu/demo/readme.md +8 -26
package/components/menu/demo/styles.css +974 -0
package/components/menu/demo/voiceover.html +53 -0
package/components/menu/demo/voiceover.md +33 -0
package/components/radio/demo/api.min.js +1 -1
package/components/radio/demo/getting-started.md +154 -0
package/components/radio/demo/index.min.js +1 -1
package/components/radio/dist/index.js +1 -1
package/components/radio/dist/registered.js +1 -1
package/components/select/demo/customize.min.js +2 -2
package/components/select/demo/getting-started.min.js +2 -2
package/components/select/demo/index.min.js +2 -2
package/components/select/dist/index.js +2 -2
package/components/select/dist/registered.js +2 -2
package/package.json +1 -1

package/components/menu/demo/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
   See LICENSE in the project root for license information.
   HTML in this document is standardized and NOT to be edited.
-  All demo code should be added/edited in ./demo/demo.md
+  All demo code should be added/edited in ./demo/index.md
   With the exception of adding custom elements if needed for the demo.
@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-menu</title>
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
     <!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
@@ -32,28 +32,23 @@
     <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-</head>
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
-      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('./index.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        });
+      import { renderPage } from './demo-support.js';
+      await renderPage('./index.md');
     </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
-    <script type="module" data-demo-script="true">
-      import { initExamples } from "./index.min.js"
-      initExamples();
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>

package/components/menu/demo/index.md CHANGED Viewed

@@ -1,70 +1,33 @@
-<!--
-THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
-ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
-ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
--->
-# Menu
+<auro-header level="1" id="overview">Menu</auro-header>
+<div class="contentWrapper">
+<nav>
+<auro-nav anchorNavContent=".scrollWrapper">
+<span slot="mobileToggleCollapsed">View More</span>
+<span slot="mobileToggleExpanded">View Less</span>
+<auro-anchorlink fluid href="#description">Description</auro-anchorlink>
+<auro-anchorlink fluid href="#useCases">User Stories</auro-anchorlink>
+</auro-nav>
+</nav>
+<div class="mainContent">
+<div class="scrollWrapper">
+<section>
+<auro-header level="2" id="description">Description</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
-The `<auro-menu>` element provides a list of options for a user to select from.
-A list of options is created within the `<slot>` of the `<auro-menu>` element by using the `<auro-menuoption>` element to define options. Use a standard `<hr>` element to create dividers within the list of options.
-The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The `<auro-menu>` element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
-<!-- AURO-GENERATED-CONTENT:END -->
+The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.
-## Use Cases
+A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.
+The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
+<!-- AURO-GENERATED-CONTENT:END -->
+</section>
+<section>
+<auro-header level="2" id="useCases">User Stories</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
-The <code>&lt;auro-menu&gt;</code> element should be used in situations where users may:
-* A user needs to select one option from a list of options.
-<!-- AURO-GENERATED-CONTENT:END -->
-## Example(s)
-### Basic
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preselect.html) -->
-<!-- The below content is automatically added from ./../apiExamples/preselect.html -->
-<auro-menu>
-<auro-menuoption value="new tab">New tab</auro-menuoption>
-<auro-menuoption value="new window" selected>New window</auro-menuoption>
-<auro-menuoption value="open file">Open file</auro-menuoption>
-<auro-menuoption value="open location">Open location</auro-menuoption>
-<hr>
-<auro-menuoption value="close window">Close window</auro-menuoption>
-<auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
-<auro-menuoption value="save page as...">Save page as...</auro-menuoption>
-<hr>
-<auro-menuoption value="share" disabled>Share</auro-menuoption>
-<hr>
-<auro-menuoption value="print">Print</auro-menuoption>
-</auro-menu>
+The <code>&lt;auro-menu&gt;</code> element is not intended for stand-alone use. It serves as the options list within <auro-hyperlink href="https://auro.alaskaair.com/components/auro/select" target="_blank">auro-select</auro-hyperlink> and <auro-hyperlink href="https://auro.alaskaair.com/components/auro/combobox" target="_blank">auro-combobox</auro-hyperlink>. Refer to those components for use cases and implementation guidance.
 <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/preselect.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/preselect.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
-  &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="new window" selected&gt;New window&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
-  &lt;hr&gt;
-  &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="close tab" disabled&gt;Close tab&lt;/auro-menuoption&gt;
-  &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
-  &lt;hr&gt;
-  &lt;auro-menuoption value="share" disabled&gt;Share&lt;/auro-menuoption&gt;
-  &lt;hr&gt;
-  &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
-&lt;/auro-menu&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</section>
+</div>
+</div>
+</div>

package/components/menu/demo/keyboard-behavior.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/keyboardBehavior.md
+  With the exception of adding custom elements if needed for the demo.
+  ----------------------- DO NOT EDIT -----------------------------
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-menu | Keyboard Behavior</title>
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+    <!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+    <script type="module">
+      import { renderPage } from './demo-support.js';
+      await renderPage('./keyboard-behavior.md');
+    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
+  </body>
+</html>

package/components/menu/demo/readme.html CHANGED Viewed

@@ -3,7 +3,7 @@
   See LICENSE in the project root for license information.
   HTML in this document is standardized and NOT to be edited.
-  All demo code should be added/edited in ./demo/index.md
+  All demo code should be added/edited in ./demo/readme.md
   With the exception of adding custom elements if needed for the demo.
@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-menu</title>
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
     <!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
@@ -32,25 +32,21 @@
     <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-</head>
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
-      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('./readme.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        })
+      import { renderPage } from './demo-support.js';
+      await renderPage('./readme.md');
     </script>
-    <script src="./index.min.js" data-demo-script="true" type="module"></script>
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>

package/components/menu/demo/readme.md CHANGED Viewed

@@ -21,11 +21,11 @@ The following sections are editable by making changes to the following files:
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-The `<auro-menu>` element provides a list of options for a user to select from.
+The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.
-A list of options is created within the `<slot>` of the `<auro-menu>` element by using the `<auro-menuoption>` element to define options. Use a standard `<hr>` element to create dividers within the list of options.
+A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.
-The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The `<auro-menu>` element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
+The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -36,9 +36,7 @@ The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menu
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The <code>&lt;auro-menu&gt;</code> element should be used in situations where users may:
-* A user needs to select one option from a list of options.
+The <code>&lt;auro-menu&gt;</code> element is not intended for stand-alone use. It serves as the options list within <auro-hyperlink href="https://auro.alaskaair.com/components/auro/select" target="_blank">auro-select</auro-hyperlink> and <auro-hyperlink href="https://auro.alaskaair.com/components/auro/combobox" target="_blank">auro-combobox</auro-hyperlink>. Refer to those components for use cases and implementation guidance.
 <!-- AURO-GENERATED-CONTENT:END -->
 ## Getting Started
@@ -87,11 +85,8 @@ To only develop a single component, use the `--filter` flag:
 <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
-<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
-## Custom Component Registration for Version Management
-There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+There are two key parts to every Auro component: the <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" target="_blank">class</auro-hyperlink> and the custom element definition. The class defines the component's behavior, while the custom element registers it under a specific name so it can be used in HTML.
 You can do this by importing only the component class and using the `register(name)` method with a unique name:
@@ -99,23 +94,11 @@ You can do this by importing only the component class and using the `register(na
 import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
 // Register with a custom name if desired
-AuroMenu.register('custom-menu');
-AuroMenuOption.register('custom-menu-option');</code></pre>
+AuroMenu.register('[custom]-menu');
+AuroMenuOption.register('[custom]-menu-option');</code></pre>
 This will create a new custom element `<custom-menu>` and `<custom-menu-option>` that behaves exactly like `<auro-menu>` and `<auro-menu-option>`, allowing both to coexist on the same page without interfering with each other.
-<div class="exampleWrapper exampleWrapper--flex">
-<custom-menu>
-<custom-menuoption value="stops">Stops</custom-menuoption>
-<custom-menuoption value="price">Price</custom-menuoption>
-<custom-menuoption value="duration">Duration</custom-menuoption>
-<custom-menuoption value="departure">Departure</custom-menuoption>
-<custom-menuoption value="arrival">Arrival</custom-menuoption>
-</custom-menu>
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
 <pre class="language-html"><code class="language-html">&lt;custom-menu&gt;
   &lt;custom-menuoption value="stops"&gt;Stops&lt;/custom-menuoption&gt;
   &lt;custom-menuoption value="price"&gt;Price&lt;/custom-menuoption&gt;
@@ -123,5 +106,4 @@ This will create a new custom element `<custom-menu>` and `<custom-menu-option>`
   &lt;custom-menuoption value="departure"&gt;Departure&lt;/custom-menuoption&gt;
   &lt;custom-menuoption value="arrival"&gt;Arrival&lt;/custom-menuoption&gt;
 &lt;/custom-menu&gt;</code></pre>
-</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->