@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.1

package/components/dropdown/demo/api.min.js

@@ -3910,7 +3910,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 
 class AuroElement extends i {
   static get properties() {

package/components/dropdown/demo/index.md

@@ -1,7 +1,7 @@
 <!--
- 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.
+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.
 -->
 
 # Dropdown
@@ -53,29 +53,27 @@ The dropdown can be closed with the following actions:
 ### Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-dropdown aria-label="custom label">
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-dropdown aria-label="custom label">
+Lorem ipsum solar
+<div slot="trigger">
+Trigger
+</div>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
-```html
-<auro-dropdown aria-label="custom label">
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label"&gt;
   Lorem ipsum solar
-  <div slot="trigger">
+  &lt;div slot="trigger"&gt;
     Trigger
-  </div>
-</auro-dropdown>
-```
+  &lt;/div&gt;
+&lt;/auro-dropdown&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -88,196 +86,188 @@ The `auro-dropdown` element supports multiple layouts to fit different design ne
 #### Classic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
-  <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button id="classicButton">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
+<auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
+<div style="padding: var(--ds-size-150);">
+Lorem ipsum solar
+<br />
+<auro-button id="classicButton">
+Dismiss Dropdown
+</auro-button>
+</div>
+<span slot="helpText">
+Help text
+</span>
+<div slot="trigger">
+Trigger
+</div>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/classic/basic.html -->
 
-```html
-<auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
-  <div style="padding: var(--ds-size-150);">
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader"&gt;
+  &lt;div style="padding: var(--ds-size-150);"&gt;
     Lorem ipsum solar
-    <br />
-    <auro-button id="classicButton">
+    &lt;br /&gt;
+    &lt;auro-button id="classicButton"&gt;
       Dismiss Dropdown
-    </auro-button>
-  </div>
-  <span slot="helpText">
+    &lt;/auro-button&gt;
+  &lt;/div&gt;
+  &lt;span slot="helpText"&gt;
     Help text
-  </span>
-  <div slot="trigger">
+  &lt;/span&gt;
+  &lt;div slot="trigger"&gt;
     Trigger
-  </div>
-</auro-dropdown>
-```
+  &lt;/div&gt;
+&lt;/auro-dropdown&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
-  <auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button id="classicInverseButton">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
+<auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
+<div style="padding: var(--ds-size-150);">
+Lorem ipsum solar
+<br />
+<auro-button id="classicInverseButton">
+Dismiss Dropdown
+</auro-button>
+</div>
+<span slot="helpText">
+Help text
+</span>
+<div slot="trigger">
+Trigger
+</div>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/appearance-inverse.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
 
-```html
-<auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
-  <div style="padding: var(--ds-size-150);">
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown id="classicInverse" appearance="inverse" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader"&gt;
+  &lt;div style="padding: var(--ds-size-150);"&gt;
     Lorem ipsum solar
-    <br />
-    <auro-button id="classicInverseButton">
+    &lt;br /&gt;
+    &lt;auro-button id="classicInverseButton"&gt;
       Dismiss Dropdown
-    </auro-button>
-  </div>
-  <span slot="helpText">
+    &lt;/auro-button&gt;
+  &lt;/div&gt;
+  &lt;span slot="helpText"&gt;
     Help text
-  </span>
-  <div slot="trigger">
+  &lt;/span&gt;
+  &lt;div slot="trigger"&gt;
     Trigger
-  </div>
-</auro-dropdown>
-```
+  &lt;/div&gt;
+&lt;/auro-dropdown&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### Emphasized
 
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
-  <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-    <span slot="helpText">
-      Help text - Lorem ipsum solar lorem ipsum solar
-    </span>
-  </auro-dropdown>
-  <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-    <span slot="helpText">
-      Help text - Lorem ipsum solar lorem ipsum solar
-    </span>
-  </auro-dropdown>
-  <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-    <span slot="helpText">
-      Help text - Lorem ipsum solar lorem ipsum solar
-    </span>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
+<auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+Lorem ipsum solar
+<div slot="trigger">
+Trigger
+</div>
+<span slot="helpText">
+Help text - Lorem ipsum solar lorem ipsum solar
+</span>
+</auro-dropdown>
+<auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+Lorem ipsum solar
+<div slot="trigger">
+Trigger
+</div>
+<span slot="helpText">
+Help text - Lorem ipsum solar lorem ipsum solar
+</span>
+</auro-dropdown>
+<auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+Lorem ipsum solar
+<div slot="trigger">
+Trigger
+</div>
+<span slot="helpText">
+Help text - Lorem ipsum solar lorem ipsum solar
+</span>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
 
-```html
-<auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse"&gt;
   Lorem ipsum solar
-  <div slot="trigger">
+  &lt;div slot="trigger"&gt;
     Trigger
-  </div>
-  <span slot="helpText">
+  &lt;/div&gt;
+  &lt;span slot="helpText"&gt;
     Help text - Lorem ipsum solar lorem ipsum solar
-  </span>
-</auro-dropdown>
-<auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+  &lt;/span&gt;
+&lt;/auro-dropdown&gt;
+&lt;auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse"&gt;
   Lorem ipsum solar
-  <div slot="trigger">
+  &lt;div slot="trigger"&gt;
     Trigger
-  </div>
-  <span slot="helpText">
+  &lt;/div&gt;
+  &lt;span slot="helpText"&gt;
     Help text - Lorem ipsum solar lorem ipsum solar
-  </span>
-</auro-dropdown>
-<auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse">
+  &lt;/span&gt;
+&lt;/auro-dropdown&gt;
+&lt;auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" appearance="inverse"&gt;
   Lorem ipsum solar
-  <div slot="trigger">
+  &lt;div slot="trigger"&gt;
     Trigger
-  </div>
-  <span slot="helpText">
+  &lt;/div&gt;
+  &lt;span slot="helpText"&gt;
     Help text - Lorem ipsum solar lorem ipsum solar
-  </span>
-</auro-dropdown>
-```
+  &lt;/span&gt;
+&lt;/auro-dropdown&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### Snowflake
 
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
-  <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
-    Lorem ipsum solar
-    <div slot="trigger">
-      Trigger
-    </div>
-    <span slot="helpText">
-      Help text - Lorem ipsum solar lorem ipsum solar
-    </span>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
+<auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
+Lorem ipsum solar
+<div slot="trigger">
+Trigger
+</div>
+<span slot="helpText">
+Help text - Lorem ipsum solar lorem ipsum solar
+</span>
+</auro-dropdown>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
 
-```html
-<auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse">
+<pre class="language-html"><code class="language-html">&lt;auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" appearance="inverse"&gt;
   Lorem ipsum solar
-  <div slot="trigger">
+  &lt;div slot="trigger"&gt;
     Trigger
-  </div>
-  <span slot="helpText">
+  &lt;/div&gt;
+  &lt;span slot="helpText"&gt;
     Help text - Lorem ipsum solar lorem ipsum solar
-  </span>
-</auro-dropdown>
-```
+  &lt;/span&gt;
+&lt;/auro-dropdown&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

package/components/dropdown/demo/index.min.js

@@ -3831,7 +3831,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202604231640';
+var formkitVersion = '202604232250';
 
 class AuroElement extends i {
   static get properties() {

package/components/dropdown/demo/keyboard-behavior.md

@@ -0,0 +1,72 @@
+## Auro-Dropdown Keyboard Behavior
+
+### Tab Behavior
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/tabindex.md) -->
+<!-- The below content is automatically added from ./../docs/partials/tabindex.md -->
+<p>The trigger is a focusable element and participates in the standard tab order, responding to <code>Tab</code> and <code>Shift+Tab</code> key events per <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex">native browser behavior, i.e., these keys step through the browser tabindex sequence.</auro-hyperlink></p>
+<p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
+<p>When the bib is collapsed, the bib content is excluded from the tab sequence. When <strong>expanded</strong>, focusable elements within the bib content are included in the natural tab order. In fullscreen mode, focus is trapped within the bib, and the tab sequence cycles through the bib content focusable elements until the bib is closed or the viewport no longer meets the fullscreen condition and is rendered as a popover.</p>
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Key Events
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
+<!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
+<table>
+<thead>
+<tr>
+<th>Key</th>
+<th>Modifier</th>
+<th>Current State</th>
+<th>Focus Element</th>
+<th>Behavior</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td rowspan="2">Enter</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Closes the bib.</td>
+</tr>
+<tr>
+<td>Escape</td>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Component <code>:host</code> or any <strong>focusable</strong> element within the component.
+</td>
+<td>Closes the bib.</td>
+</tr>
+<tr>
+<td rowspan="2">Space</td>
+<td>-</td>
+<td>Collapsed</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Opens the bib.</td>
+</tr>
+<tr>
+<td>-</td>
+<td>Expanded</td>
+<td>
+Trigger or any <strong>focusable</strong> element within the trigger.
+</td>
+<td>Closes the bib.</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->

package/components/dropdown/demo/readme.md

@@ -48,9 +48,7 @@ The `auro-dropdown` element should be used in situations where users may:
 
 #### 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 +57,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 +72,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-dropdown/+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-dropdown/+esm"&gt;&lt;/script&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development
@@ -92,9 +86,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 -->
@@ -109,52 +101,48 @@ However, if you need to load multiple versions of the same component on a single
 
 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 { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
-
+​
 // Register with a custom name if desired
-AuroDropdown.register('custom-dropdown');
-```
+AuroDropdown.register('custom-dropdown');</code></pre>
 
 This will create a new custom element `<custom-dropdown>` that behaves exactly like `<auro-dropdown>`, allowing both to coexist on the same page without interfering with each other.
 
 <div class="exampleWrapper exampleWrapper--flex">
-  <custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button id="customCommonButton">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </custom-dropdown>
+<custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader">
+<div style="padding: var(--ds-size-150);">
+Lorem ipsum solar
+<br />
+<auro-button id="customCommonButton">
+Dismiss Dropdown
+</auro-button>
+</div>
+<span slot="helpText">
+Help text
+</span>
+<div slot="trigger">
+Trigger
+</div>
+</custom-dropdown>
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 
-```html
-  <custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button id="customCommonButton">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </custom-dropdown>
-```
+<pre class="language-html"><code class="language-html">&lt;custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader"&gt;
+  &lt;div style="padding: var(--ds-size-150);"&gt;
+    Lorem ipsum solar
+    &lt;br /&gt;
+    &lt;auro-button id="customCommonButton"&gt;
+      Dismiss Dropdown
+    &lt;/auro-button&gt;
+  &lt;/div&gt;
+  &lt;span slot="helpText"&gt;
+    Help text
+  &lt;/span&gt;
+  &lt;div slot="trigger"&gt;
+    Trigger
+  &lt;/div&gt;
+&lt;/custom-dropdown&gt;</code></pre>
 </auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->