@aurodesignsystem-dev/auro-formkit 0.0.0-pr1456.1 → 0.0.0-pr1457.0

package/components/menu/README.md

@@ -36,7 +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 `<auro-menu>` element should be used in situations where users may:
+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 -->
@@ -46,11 +46,7 @@ The `<auro-menu>` element should be used in situations where users may:
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
-#### NPM Installation
-
-```shell
-$ npm i @aurodesignsystem/auro-formkit
-```
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -59,13 +55,11 @@ $ npm i @aurodesignsystem/auro-formkit
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
-```json
-{
+<pre class="language-json"><code class="language-json">{
     "compilerOptions": {
         "moduleResolution": "bundler"
     }
-}
-```
+}</code></pre>
 
 This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -76,9 +70,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-menu/+esm"></script>
-```
+<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-menu/+esm"&gt;&lt;/script&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development
@@ -92,9 +84,7 @@ Running the `dev` command will open a `localhost` development server for all com
 
 To only develop a single component, use the `--filter` flag:
 
-```shell
-npx turbo dev --filter=@aurodesignsystem/auro-input
-```
+<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 -->
@@ -103,43 +93,35 @@ npx turbo dev --filter=@aurodesignsystem/auro-input
 
 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.
 
-When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
-
-However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
-
 You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
-```js
-// Import the class only
+<pre class="language-js"><code class="language-js">// Import the class only
 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');
-```
+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>
+<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>
+<span slot="trigger">See code</span>
 
-```html
-  <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>
-```
+<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;
+  &lt;custom-menuoption value="duration"&gt;Duration&lt;/custom-menuoption&gt;
+  &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 -->