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

package/components/dropdown/dist/auro-dropdown.d.ts

@@ -17,7 +17,7 @@ export class AuroDropdown extends AuroElement {
     static get shadowRootOptions(): {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
@@ -283,22 +283,22 @@ export class AuroDropdown extends AuroElement {
      * @returns {void} Internal defaults.
      */
     private _intializeDefaults;
-    appearance: string;
-    chevron: boolean;
-    disabled: boolean;
-    disableKeyboardHandling: boolean;
-    error: boolean;
-    noToggle: boolean;
-    a11yRole: string;
-    onDark: boolean;
-    showTriggerBorders: boolean;
+    appearance: string | undefined;
+    chevron: boolean | undefined;
+    disabled: boolean | undefined;
+    disableKeyboardHandling: boolean | undefined;
+    error: boolean | undefined;
+    noToggle: boolean | undefined;
+    a11yRole: string | undefined;
+    onDark: boolean | undefined;
+    showTriggerBorders: boolean | undefined;
     triggerContentFocusable: any;
-    simple: boolean;
-    placement: string;
-    offset: number;
-    noFlip: boolean;
-    shift: boolean;
-    autoPlacement: boolean;
+    simple: boolean | undefined;
+    placement: string | undefined;
+    offset: number | undefined;
+    noFlip: boolean | undefined;
+    shift: boolean | undefined;
+    autoPlacement: boolean | undefined;
     /**
      * @private
      */
@@ -337,11 +337,11 @@ export class AuroDropdown extends AuroElement {
      * @ignore
      */
     get floaterConfig(): {
-        placement: string;
+        placement: string | undefined;
         flip: boolean;
-        shift: boolean;
-        autoPlacement: boolean;
-        offset: number;
+        shift: boolean | undefined;
+        autoPlacement: boolean | undefined;
+        offset: number | undefined;
     };
     /**
      * Public method to hide the dropdown.
@@ -395,7 +395,7 @@ export class AuroDropdown extends AuroElement {
      * @return {void}
      */
     private handleFocusin;
-    hasFocus: boolean;
+    hasFocus: boolean | undefined;
     /**
      * @private
      */
@@ -433,7 +433,7 @@ export class AuroDropdown extends AuroElement {
      * @returns {void}
      */
     private handleTriggerContentSlotChange;
-    triggerNode: EventTarget;
+    triggerNode: EventTarget | null | undefined;
     /**
      * Handles the default slot change event and updates the content.
      *

package/components/dropdown/dist/auro-dropdownBib.d.ts

@@ -86,8 +86,8 @@ export class AuroDropdownBib extends LitElement {
     shape: string;
     matchWidth: boolean;
     hasActiveDescendant: boolean;
-    set mobileFullscreenBreakpoint(value: string);
-    get mobileFullscreenBreakpoint(): string;
+    set mobileFullscreenBreakpoint(value: string | undefined);
+    get mobileFullscreenBreakpoint(): string | undefined;
     updated(changedProperties: any): void;
     bibTemplate: any;
     firstUpdated(changedProperties: any): void;
@@ -112,7 +112,7 @@ export class AuroDropdownBib extends LitElement {
      * @private
      */
     private _lockTouchScroll;
-    _touchMoveHandler: (event: any) => void;
+    _touchMoveHandler: ((event: any) => void) | undefined;
     /**
      * Removes the touchmove listener added by _lockTouchScroll().
      * @private

package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts

@@ -4,4 +4,4 @@
  * @param {HTMLElement} bib - The dropdown bib element.
  * @returns {Object} Keyboard handlers keyed by `event.key`.
  */
-export function createDropdownBibKeyboardStrategy(bib: HTMLElement): any;
+export function createDropdownBibKeyboardStrategy(bib: HTMLElement): Object;

package/components/dropdown/dist/index.js

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

package/components/dropdown/dist/registered.js

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

package/components/form/demo/api.md

@@ -48,11 +48,11 @@ By default, Auro Form connects a `submit` event to all `type="submit"` buttons w
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
 <!-- The below content is automatically added from ./../apiExamples/basic.html -->
 <auro-form>
-  <auro-input id="search-box" name="searchBox" required>
-    <span slot="label">Search flights</span>
-  </auro-input>
-  <br />
-  <auro-button type="submit">Submit</auro-button>
+<auro-input id="search-box" name="searchBox" required>
+<span slot="label">Search flights</span>
+</auro-input>
+<br />
+<auro-button type="submit">Submit</auro-button>
 </auro-form>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -61,15 +61,13 @@ By default, Auro Form connects a `submit` event to all `type="submit"` buttons w
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
-```html
-<auro-form>
-  <auro-input id="search-box" name="searchBox" required>
-    <span slot="label">Search flights</span>
-  </auro-input>
-  <br />
-  <auro-button type="submit">Submit</auro-button>
-</auro-form>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-form&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;br /&gt;
+  &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+&lt;/auro-form&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -84,50 +82,50 @@ This example shows that you can use advanced layouts with Auro Form, such as a c
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/column-layout.html) -->
 <!-- The below content is automatically added from ./../apiExamples/column-layout.html -->
 <style>
-  .columned-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
+.columned-form {
+display: grid;
+grid-template-columns: 1fr 1fr;
+gap: 1rem;
+}
 
-  .columned-form div {
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    gap: 1rem;
-  }
+.columned-form div {
+display: flex;
+flex-direction: column;
+padding: 1rem;
+gap: 1rem;
+}
 
-  .controls {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 1rem;
-  }
+.controls {
+display: flex;
+justify-content: flex-end;
+margin-top: 1rem;
+}
 </style>
 <auro-form>
-  <div class="columned-form">
-    <div>
-      <auro-input id="search-box" name="searchBox" required>
-        <span slot="label">Search flights</span>
-      </auro-input>
-      <auro-input id="last-name" name="lastName" required>
-        <span slot="label">Last Name</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="controls">
-        <auro-button type="submit">Submit</auro-button>
-      </div>
-    </div>
-  </div>
+<div class="columned-form">
+<div>
+<auro-input id="search-box" name="searchBox" required>
+<span slot="label">Search flights</span>
+</auro-input>
+<auro-input id="last-name" name="lastName" required>
+<span slot="label">Last Name</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="controls">
+<auro-button type="submit">Submit</auro-button>
+</div>
+</div>
+</div>
 </auro-form>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -136,54 +134,52 @@ This example shows that you can use advanced layouts with Auro Form, such as a c
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/column-layout.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/column-layout.html -->
 
-```html
-<style>
+<pre class="language-html"><code class="language-html">&lt;style&gt;
   .columned-form {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
-
+​
   .columned-form div {
     display: flex;
     flex-direction: column;
     padding: 1rem;
     gap: 1rem;
   }
-
+​
   .controls {
     display: flex;
     justify-content: flex-end;
     margin-top: 1rem;
   }
-</style>
-<auro-form>
-  <div class="columned-form">
-    <div>
-      <auro-input id="search-box" name="searchBox" required>
-        <span slot="label">Search flights</span>
-      </auro-input>
-      <auro-input id="last-name" name="lastName" required>
-        <span slot="label">Last Name</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="controls">
-        <auro-button type="submit">Submit</auro-button>
-      </div>
-    </div>
-  </div>
-</auro-form>
-```
+&lt;/style&gt;
+&lt;auro-form&gt;
+  &lt;div class="columned-form"&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 -->
 </auro-accordion>
 
@@ -195,60 +191,60 @@ Finally, a more complex form example with multiple form elements, including a da
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/complex.html) -->
 <!-- The below content is automatically added from ./../apiExamples/complex.html -->
 <style>
-  .submitBlock {
-    margin-top: 1rem;
-    display: flex;
-    justify-content: flex-end;
-    gap: 1rem;
-  }
+.submitBlock {
+margin-top: 1rem;
+display: flex;
+justify-content: flex-end;
+gap: 1rem;
+}
 
-  .datepickerBlock {
-    margin-top: 1rem;
-  }
+.datepickerBlock {
+margin-top: 1rem;
+}
 
-  .complex-form {
-    display: block;
-    padding: 1rem;
-    border: 1px solid #2a2a2a;
-    border-radius: 1rem;
-  }
+.complex-form {
+display: block;
+padding: 1rem;
+border: 1px solid #2a2a2a;
+border-radius: 1rem;
+}
 </style>
 <auro-form class="complex-form">
-  <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="occupation" name="occupation" required>
-    <span slot="label">Occupation</span>
-  </auro-input>
-  <br />
-  <auro-input-two id="cool-fact" name="coolFact" required>
-    <span slot="label">Cool Fact</span>
-  </auro-input-two>
-  <div class="datepickerBlock">
-    <h4>Pick a cool date</h4>
-    <auro-datepicker id="date-example" name="dateExample" required>
-      <span slot="fromLabel">Choose a date</span>
-      <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    </auro-datepicker>
-  </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="submitBlock">
-    <auro-button type="reset">Reset</auro-button>
-    <auro-button type="submit">Submit</auro-button>
-  </div>
+<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="occupation" name="occupation" required>
+<span slot="label">Occupation</span>
+</auro-input>
+<br />
+<auro-input-two id="cool-fact" name="coolFact" required>
+<span slot="label">Cool Fact</span>
+</auro-input-two>
+<div class="datepickerBlock">
+<h4>Pick a cool date</h4>
+<auro-datepicker id="date-example" name="dateExample" required>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+</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="submitBlock">
+<auro-button type="reset">Reset</auro-button>
+<auro-button type="submit">Submit</auro-button>
+</div>
 </auro-form>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -257,63 +253,61 @@ Finally, a more complex form example with multiple form elements, including a da
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/complex.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/complex.html -->
 
-```html
-<style>
+<pre class="language-html"><code class="language-html">&lt;style&gt;
   .submitBlock {
     margin-top: 1rem;
     display: flex;
     justify-content: flex-end;
     gap: 1rem;
   }
-
+​
   .datepickerBlock {
     margin-top: 1rem;
   }
-
+​
   .complex-form {
     display: block;
     padding: 1rem;
     border: 1px solid #2a2a2a;
     border-radius: 1rem;
   }
-</style>
-<auro-form class="complex-form">
-  <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="occupation" name="occupation" required>
-    <span slot="label">Occupation</span>
-  </auro-input>
-  <br />
-  <auro-input-two id="cool-fact" name="coolFact" required>
-    <span slot="label">Cool Fact</span>
-  </auro-input-two>
-  <div class="datepickerBlock">
-    <h4>Pick a cool date</h4>
-    <auro-datepicker id="date-example" name="dateExample" required>
-      <span slot="fromLabel">Choose a date</span>
-      <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    </auro-datepicker>
-  </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="submitBlock">
-    <auro-button type="reset">Reset</auro-button>
-    <auro-button type="submit">Submit</auro-button>
-  </div>
-</auro-form>
-```
+&lt;/style&gt;
+&lt;auro-form class="complex-form"&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="occupation" name="occupation" required&gt;
+    &lt;span slot="label"&gt;Occupation&lt;/span&gt;
+  &lt;/auro-input&gt;
+  &lt;br /&gt;
+  &lt;auro-input-two id="cool-fact" name="coolFact" required&gt;
+    &lt;span slot="label"&gt;Cool Fact&lt;/span&gt;
+  &lt;/auro-input-two&gt;
+  &lt;div class="datepickerBlock"&gt;
+    &lt;h4&gt;Pick a cool date&lt;/h4&gt;
+    &lt;auro-datepicker id="date-example" name="dateExample" required&gt;
+      &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+      &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+    &lt;/auro-datepicker&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="submitBlock"&gt;
+    &lt;auro-button type="reset"&gt;Reset&lt;/auro-button&gt;
+    &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
+  &lt;/div&gt;
+&lt;/auro-form&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>