@aurodesignsystem-dev/auro-formkit 0.0.0-pr1474.3 → 0.0.0-pr1475.0

package/components/dropdown/dist/registered.js

@@ -3243,7 +3243,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
   });
 }
 
-var styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
+var styleCss$2 = css`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host([desktopmodal]:popover-open)::backdrop{background:transparent}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
 
 var colorCss$2 = css`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -3874,7 +3874,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605122144';
+var formkitVersion = '202605182147';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -4054,6 +4054,7 @@ class AuroDropdown extends AuroElement {
   _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
+    this.desktopModal = false;
     this.disabled = false;
     this.disableKeyboardHandling = false;
     this.error = false;
@@ -4234,6 +4235,14 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
+      /**
+       * If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
+       */
+      desktopModal: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
        */
@@ -4521,6 +4530,15 @@ class AuroDropdown extends AuroElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this._clearPageInert();
+    if (this._bibTabHandler) {
+      this.removeEventListener('keydown', this._bibTabHandler);
+      this._bibTabHandler = undefined;
+    }
+    if (this.focusTrap) {
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
+    }
     if (this.floater) {
       this.floater.hideBib('disconnect');
       this.floater.disconnect();
@@ -4548,19 +4566,34 @@ class AuroDropdown extends AuroElement {
       if (this.isPopoverVisible) {
         // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
         // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
-        const useModal = this.isBibFullscreen;
-        this.bibElement.value.open(useModal);
+        this.bibElement.value.open(this.isBibFullscreen);
+        this.updateFocusTrap();
+
+        // Desktop modal: make siblings inert so content outside is not interactive
+        if (this.desktopModal && !this.isBibFullscreen) {
+          this._setPageInert();
+        }
       } else {
         this.bibElement.value.close();
+        this._clearPageInert();
       }
     }
 
     // When fullscreen strategy changes while open, re-open dialog with correct mode
     // (e.g. resizing from desktop → mobile while dropdown is open)
     if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
-      const useModal = this.isBibFullscreen;
       this.bibElement.value.close();
-      this.bibElement.value.open(useModal);
+      this.bibElement.value.open(this.isBibFullscreen);
+
+      // Re-initialize focus management for the new strategy
+      this.updateFocusTrap();
+
+      // Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
+      if (this.desktopModal && !this.isBibFullscreen) {
+        this._setPageInert();
+      } else {
+        this._clearPageInert();
+      }
     }
   }
 
@@ -4570,8 +4603,14 @@ class AuroDropdown extends AuroElement {
    * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
    */
   handleDropdownToggle(event) {
-    this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
+
+    // Tear down FocusTrap when closing. Creation happens in updated()
+    // after the dialog is open so getFocusableElements can find content.
+    if (!this.isPopoverVisible) {
+      this.updateFocusTrap();
+    }
+
     const eventType = event.detail.eventType || "unknown";
     if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
       this.trigger.focus();
@@ -4670,19 +4709,164 @@ class AuroDropdown extends AuroElement {
    * @private
    */
   updateFocusTrap() {
+    // Always clean up existing handlers/traps before setting up new ones
+    // to prevent duplicate listeners on repeated calls.
+    if (this._bibTabHandler) {
+      this.removeEventListener('keydown', this._bibTabHandler);
+      this._bibTabHandler = undefined;
+    }
+
+    if (this.focusTrap) {
+      this.focusTrap.disconnect();
+      this.focusTrap = undefined;
+    }
+
     if (this.isPopoverVisible) {
       if (!this.isBibFullscreen) {
-        // Desktop: show() doesn't trap focus, so use FocusTrap
-        this.focusTrap = new FocusTrap(this.bibContent);
-        this.focusTrap.focusFirstElement();
+        if (this.desktopModal) {
+          // Desktop modal: trap focus only within the bib content.
+          // Can't use FocusTrap on the bib element because keydown events
+          // from slotted content bubble through the dropdown host (light DOM),
+          // not through the bib (shadow projection target). Using FocusTrap
+          // on the dropdown would include the trigger in the tab cycle.
+          // Instead, listen for Tab on the dropdown and manually wrap focus
+          // within the bib's focusable elements.
+          this._bibTabHandler = (event) => {
+            if (event.key !== 'Tab') {
+              return;
+            }
+
+            // Collect focusable elements from the bib content.
+            const focusables = getFocusableElements(this.bibContent);
+
+            // Fallback: try from slotted content directly
+            if (!focusables.length) {
+              const slot = this.shadowRoot.querySelector('.slotContent slot');
+              const assignedNodes = slot ? slot.assignedNodes({ flatten: true }) : [];
+
+              for (const node of assignedNodes) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                  focusables.push(...getFocusableElements(node));
+                }
+              }
+            }
+
+            if (!focusables.length) {
+              return;
+            }
+
+            event.preventDefault();
+
+            const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
+
+            // Walk the active element chain through shadow roots
+            const actives = this._getActiveElements();
+
+            let idx = focusables.findIndex((el) => actives.includes(el));
+
+            if (idx === -1) { // eslint-disable-line no-magic-numbers
+              // Focus is not on a known element — move to first/last
+              idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
+            }
+
+            // Try each element in order, skipping any that can't receive focus
+            // (e.g. hidden elements, elements in collapsed sections)
+            for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
+              let nextIdx = idx + direction;
+
+              // Wrap around
+              if (nextIdx < 0) {
+                nextIdx = focusables.length - 1;
+              } else if (nextIdx >= focusables.length) {
+                nextIdx = 0;
+              }
+
+              focusables[nextIdx].focus();
+
+              // Verify focus actually moved to the target
+              const newActives = this._getActiveElements();
+
+              if (newActives.includes(focusables[nextIdx])) {
+                return;
+              }
+
+              // Focus didn't stick — skip this element and try the next
+              idx = nextIdx;
+            }
+          };
+          this.addEventListener('keydown', this._bibTabHandler);
+        } else {
+          // Normal desktop: use FocusTrap on the bib element
+          this.focusTrap = new FocusTrap(this.bibContent);
+          this.focusTrap.focusFirstElement();
+        }
       }
       // Fullscreen: showModal() provides native focus trapping
+    }
+  }
+
+  /**
+   * Returns the chain of active (focused) elements through shadow roots.
+   * @private
+   * @returns {Array<HTMLElement>}
+   */
+  _getActiveElements() {
+    let { activeElement } = document;
+    const actives = [activeElement];
+
+    while (activeElement?.shadowRoot?.activeElement) {
+      activeElement = activeElement.shadowRoot.activeElement;
+      actives.push(activeElement);
+    }
+
+    return actives;
+  }
+
+  /**
+   * Sets `inert` on sibling elements of the dropdown's top-level host
+   * so that content outside the dropdown is not interactive while the modal is open.
+   * Walks up through shadow DOM boundaries to find the outermost host element
+   * in the light DOM, then sets `inert` on that element's siblings.
+   * @private
+   */
+  _setPageInert() {
+    if (this._inertSiblings) {
       return;
     }
 
-    if (this.focusTrap) {
-      this.focusTrap.disconnect();
-      this.focusTrap = undefined;
+    this._inertSiblings = [];
+
+    // Walk up through shadow DOM boundaries to find the topmost host
+    // element in the light DOM. For example, if this dropdown is inside
+    // auro-datepicker's shadow DOM, we walk up to the datepicker element
+    // so we set inert on its siblings — not on the datepicker itself.
+    let host = this;
+    while (host.getRootNode() instanceof ShadowRoot) {
+      host = host.getRootNode().host;
+    }
+
+    const parent = host.parentElement;
+
+    if (parent) {
+      for (const sibling of parent.children) {
+        if (sibling !== host && !sibling.inert) {
+          sibling.inert = true;
+          this._inertSiblings.push(sibling);
+        }
+      }
+    }
+  }
+
+  /**
+   * Restores `inert` state on siblings that were made inert by `_setPageInert`.
+   * @private
+   */
+  _clearPageInert() {
+    if (this._inertSiblings) {
+      for (const sibling of this._inertSiblings) {
+        sibling.inert = false;
+      }
+      this._inertSiblings = undefined;
     }
   }
 
@@ -4921,6 +5105,7 @@ class AuroDropdown extends AuroElement {
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
           ?isfullscreen="${this.isBibFullscreen}"
+          ?desktopmodal="${this.desktopModal}"
           .dialogLabel="${this.bibDialogLabel}"
           ${ref(this.bibElement)}
           >

package/components/form/demo/customize.html

@@ -36,6 +36,11 @@
   <body class="auro-markdown">
     <main></main>
 
+    <script type="module">
+      import { renderPage } from './demo-support.min.js';
+      await renderPage('./customize.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>
@@ -44,11 +49,6 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
 
-    <script type="module" data-demo-script="true">
-      import { renderPage } from './demo-support.min.js';
-      await renderPage('./customize.md');
-      import { initExamples } from "./customize.min.js";
-      initExamples();
-    </script>
+    <script src="./customize.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>

package/components/form/demo/customize.js

@@ -1,26 +1,9 @@
-/* eslint-disable jsdoc/require-jsdoc */
-
 import { AuroForm } from '../src/auro-form.js';
 import './registerDemoDeps.js';
 import { AuroInput } from '@aurodesignsystem/auro-input';
 import { AuroDatePicker } from '@aurodesignsystem/auro-datepicker';
-import { disabledExample } from '../apiExamples/disabled.js';
 
 AuroInput.register('input-two');
 AuroDatePicker.register();
 AuroForm.register();
 AuroForm.register('custom-form');
-
-export async function initExamples(initCount) {
-  initCount = initCount || 0;
-
-  try {
-    await disabledExample();
-  } catch (err) {
-    if (initCount <= 20) {
-      setTimeout(() => {
-        initExamples(initCount + 1);
-      }, 100);
-    }
-  }
-}

package/components/form/demo/customize.md

@@ -7,8 +7,6 @@
 <auro-anchorlink fluid href="#layout">Layout</auro-anchorlink>
 <auro-anchorlink fluid href="#columnLayout" class="level2 body-xs">Column Layout</auro-anchorlink>
 <auro-anchorlink fluid href="#complexForm" class="level2 body-xs">Complex Form</auro-anchorlink>
-<auro-anchorlink fluid href="#fieldState">Field State</auro-anchorlink>
-<auro-anchorlink fluid href="#disabledFields" class="level2 body-xs">Disabled Fields</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -26,14 +24,16 @@
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 1rem;
-            align-items: start;
           }
 
-          .columned-form .span-2 {
-            grid-column: span 2;
+          .columned-form div {
+            display: flex;
+            flex-direction: column;
+            padding: 1rem;
+            gap: 1rem;
           }
 
-          .columned-form-controls {
+          .controls {
             display: flex;
             justify-content: flex-end;
             margin-top: 1rem;
@@ -41,25 +41,29 @@
 </style>
 <auro-form>
 <div class="columned-form">
-<auro-input id="cl-first-name" name="firstName" required>
-<span slot="label">First Name</span>
+<div>
+<auro-input id="search-box" name="searchBox" required>
+<span slot="label">Search flights</span>
 </auro-input>
-<auro-input id="cl-last-name" name="lastName" required>
+<auro-input id="last-name" name="lastName" required>
 <span slot="label">Last Name</span>
-</auro-input>
-<auro-input id="cl-email" name="email" type="email" class="span-2" required>
-<span slot="label">Email</span>
-</auro-input>
-<auro-datepicker id="cl-date-range" name="dateRange" class="span-2" required range>
-<span slot="fromLabel">Departure</span>
-<span slot="toLabel">Return</span>
-<span slot="bib.fullscreen.fromLabel">Departure</span>
-<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-input>
+</div>
+<div>
+<div class="datepickerBlock">
+<h4>Pick a date range</h4>
+<auro-datepicker id="date-range" name="dateRange" required range>
+<span slot="fromLabel">Start</span>
+<span slot="toLabel">End</span>
+<span slot="bib.fullscreen.fromLabel">Start</span>
+<span slot="bib.fullscreen.toLabel">End</span>
 </auro-datepicker>
 </div>
-<div class="columned-form-controls">
+<div class="controls">
 <auro-button type="submit">Submit</auro-button>
 </div>
+</div>
+</div>
 </auro-form>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -72,14 +76,16 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
-    align-items: start;
   }
 ​
-  .columned-form .span-2 {
-    grid-column: span 2;
+  .columned-form div {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    gap: 1rem;
   }
 ​
-  .columned-form-controls {
+  .controls {
     display: flex;
     justify-content: flex-end;
     margin-top: 1rem;
@@ -87,24 +93,28 @@
 &lt;/style&gt;
 &lt;auro-form&gt;
   &lt;div class="columned-form"&gt;
-    &lt;auro-input id="cl-first-name" name="firstName" required&gt;
-      &lt;span slot="label"&gt;First Name&lt;/span&gt;
-    &lt;/auro-input&gt;
-    &lt;auro-input id="cl-last-name" name="lastName" required&gt;
-      &lt;span slot="label"&gt;Last Name&lt;/span&gt;
-    &lt;/auro-input&gt;
-    &lt;auro-input id="cl-email" name="email" type="email" class="span-2" required&gt;
-      &lt;span slot="label"&gt;Email&lt;/span&gt;
-    &lt;/auro-input&gt;
-    &lt;auro-datepicker id="cl-date-range" name="dateRange" class="span-2" required range&gt;
-      &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
-      &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
-      &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
-      &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
-    &lt;/auro-datepicker&gt;
-  &lt;/div&gt;
-  &lt;div class="columned-form-controls"&gt;
-    &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+    &lt;div&gt;
+      &lt;auro-input id="search-box" name="searchBox" required&gt;
+        &lt;span slot="label"&gt;Search flights&lt;/span&gt;
+      &lt;/auro-input&gt;
+      &lt;auro-input id="last-name" name="lastName" required&gt;
+        &lt;span slot="label"&gt;Last Name&lt;/span&gt;
+      &lt;/auro-input&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;div class="datepickerBlock"&gt;
+        &lt;h4&gt;Pick a date range&lt;/h4&gt;
+        &lt;auro-datepicker id="date-range" name="dateRange" required range&gt;
+          &lt;span slot="fromLabel"&gt;Start&lt;/span&gt;
+          &lt;span slot="toLabel"&gt;End&lt;/span&gt;
+          &lt;span slot="bib.fullscreen.fromLabel"&gt;Start&lt;/span&gt;
+          &lt;span slot="bib.fullscreen.toLabel"&gt;End&lt;/span&gt;
+        &lt;/auro-datepicker&gt;
+      &lt;/div&gt;
+      &lt;div class="controls"&gt;
+        &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
   &lt;/div&gt;
 &lt;/auro-form&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -231,90 +241,6 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 </section>
-<section>
-<auro-header level="2" id="fieldState">Field State</auro-header>
-<p>Per the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/disabled">HTML spec</a>, form controls with the <code>disabled</code> attribute are excluded from form submission and are not validated. <code>auro-form</code> mirrors that behavior.</p>
-<auro-header level="3" id="disabledFields">Disabled Fields</auro-header>
-<p>When a child form element has the <code>disabled</code> attribute:</p>
-<ul>
-<li>Its <code>name</code> is omitted from <code>form.value</code> and from the <code>submit</code> event's <code>detail.value</code>, even if the element carries a value.</li>
-<li>It does not contribute to <code>validity</code> — a disabled <code>required</code> field will not block submission.</li>
-<li>It does not taint <code>isInitialState</code> — a disabled field carrying a preset value still leaves the form in its initial state.</li>
-</ul>
-<p><strong>Behavior change:</strong> a form whose only invalid field was a <code>disabled</code> AND <code>required</code> field is now submittable, where previously it would have been blocked. If you were using <code>disabled</code> on a populated field to carry a value through to submission (for example, a read-only account number or a preset reference id), switch that field to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/hidden"><code>&lt;input type="hidden"&gt;</code></a> — hidden inputs are submitted with the form even though they are not interactive, which is the native pattern for "include this value, but don't show or validate it."</p>
-<p>In the example below the Mileage Plan number is preset and disabled. Fill in the remaining required fields and submit the form — the output region below the form will show the contents of the <code>submit</code> event's <code>detail.value</code>. Notice that only <code>firstName</code> and <code>lastName</code> appear; <code>loyaltyNumber</code> is omitted even though the field has a value.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-<auro-form id="disabledExampleForm">
-<auro-input id="first-name" name="firstName" required>
-<span slot="label">First Name</span>
-</auro-input>
-<br />
-<auro-input id="last-name" name="lastName" required>
-<span slot="label">Last Name</span>
-</auro-input>
-<br />
-<auro-input id="loyalty-number" name="loyaltyNumber" value="AS-123456" disabled>
-<span slot="label">Mileage Plan number</span>
-<span slot="helpText">Account number is read-only and is not submitted with the form.</span>
-</auro-input>
-<br />
-<auro-button type="submit">Submit</auro-button>
-</auro-form>
-<output id="disabledExampleOutput" form="disabledExampleForm" aria-live="polite">Submit the form to see what data gets stored.</output>
-<style>
-          #disabledExampleOutput {
-            display: block;
-            margin-top: 2rem;
-            padding: 1rem 1.25rem;
-            border-left: 4px solid #2a2a2a;
-            border-radius: 0.25rem;
-            background: #f5f5f5;
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-            font-size: 0.875rem;
-            white-space: pre-wrap;
-          }
-</style>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-form id="disabledExampleForm"&gt;
-  &lt;auro-input id="first-name" name="firstName" required&gt;
-    &lt;span slot="label"&gt;First Name&lt;/span&gt;
-  &lt;/auro-input&gt;
-  &lt;br /&gt;
-  &lt;auro-input id="last-name" name="lastName" required&gt;
-    &lt;span slot="label"&gt;Last Name&lt;/span&gt;
-  &lt;/auro-input&gt;
-  &lt;br /&gt;
-  &lt;auro-input id="loyalty-number" name="loyaltyNumber" value="AS-123456" disabled&gt;
-    &lt;span slot="label"&gt;Mileage Plan number&lt;/span&gt;
-    &lt;span slot="helpText"&gt;Account number is read-only and is not submitted with the form.&lt;/span&gt;
-  &lt;/auro-input&gt;
-  &lt;br /&gt;
-  &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
-&lt;/auro-form&gt;
-&lt;output id="disabledExampleOutput" form="disabledExampleForm" aria-live="polite"&gt;Submit the form to see what data gets stored.&lt;/output&gt;
-&lt;style&gt;
-  #disabledExampleOutput {
-    display: block;
-    margin-top: 2rem;
-    padding: 1rem 1.25rem;
-    border-left: 4px solid #2a2a2a;
-    border-radius: 0.25rem;
-    background: #f5f5f5;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    font-size: 0.875rem;
-    white-space: pre-wrap;
-  }
-&lt;/style&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-</section>
 </div>
 </div>
 </div>