@aurodesignsystem-dev/auro-formkit 0.0.0-pr1424.0 → 0.0.0-pr1425.0

package/components/form/demo/api.md

@@ -195,247 +195,55 @@ 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>
-  .complex-form {
-    display: grid;
-    gap: 1.5rem;
-    padding: 1.5rem;
-    border: 1px solid #2a2a2a;
-    border-radius: 1rem;
-    background: #fff;
-  }
-
-  .sectionGrid {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  }
-
-  .sectionCard {
-    display: grid;
-    gap: 1rem;
-    padding: 1rem;
-    border: 1px solid #d5d9e0;
-    border-radius: 0.75rem;
-    background: #fafbfc;
-  }
-
-  .sectionCard h3,
-  .sectionCard h4,
-  .sectionCard p {
-    margin: 0;
-  }
-
-  .sectionCopy {
-    color: #3f4854;
-  }
-
-  .stack {
-    display: grid;
-    gap: 1rem;
-  }
-
-  .counterBlock {
-    display: grid;
-    gap: 0.75rem;
-  }
-
   .submitBlock {
     margin-top: 1rem;
     display: flex;
     justify-content: flex-end;
-    flex-wrap: wrap;
     gap: 1rem;
   }
 
-  @media (max-width: 767px) {
-    .complex-form {
-      padding: 1rem;
-    }
+  .datepickerBlock {
+    margin-top: 1rem;
+  }
+
+  .complex-form {
+    display: block;
+    padding: 1rem;
+    border: 1px solid #2a2a2a;
+    border-radius: 1rem;
   }
 </style>
 <auro-form class="complex-form">
-  <div class="sectionGrid">
-    <section class="sectionCard">
-      <h3>Traveler Details</h3>
-      <p class="sectionCopy">Standard text inputs, a required field, and a disabled state.</p>
-      <div class="stack">
-        <auro-input id="first-name" name="firstName" required>
-          <span slot="label">First Name</span>
-        </auro-input>
-        <auro-input id="last-name" name="lastName" required>
-          <span slot="label">Last Name</span>
-        </auro-input>
-        <auro-input id="occupation" name="occupation">
-          <span slot="label">Occupation</span>
-          <span slot="helpText">Optional field for a short role description.</span>
-        </auro-input>
-        <auro-input id="employee-id" name="employeeId" disabled value="AS-4821">
-          <span slot="label">Employee ID</span>
-        </auro-input>
-        <auro-input-two id="cool-fact" name="coolFact" required>
-          <span slot="label">Cool Fact</span>
-        </auro-input-two>
-      </div>
-    </section>
-    <section class="sectionCard">
-      <h3>Trip Timing</h3>
-      <p class="sectionCopy">Single-date and range-date examples inside the same form flow.</p>
-      <div class="stack">
-        <auro-datepicker id="date-example" name="dateExample" required>
-          <span slot="fromLabel">Departure date</span>
-          <span slot="bib.fullscreen.fromLabel">Departure date</span>
-        </auro-datepicker>
-        <auro-datepicker id="date-range" name="dateRange" range>
-          <span slot="fromLabel">Trip start</span>
-          <span slot="toLabel">Trip end</span>
-          <span slot="bib.fullscreen.fromLabel">Trip start</span>
-          <span slot="bib.fullscreen.toLabel">Trip end</span>
-        </auro-datepicker>
-      </div>
-    </section>
-  </div>
-  <div class="sectionGrid">
-    <section class="sectionCard">
-      <h3>Select States</h3>
-      <p class="sectionCopy">Required, multiselect, and disabled dropdown patterns.</p>
-      <div class="stack">
-        <auro-select id="seat-preference" name="seatPreference" required placeholder="Choose a seat preference">
-          <span slot="ariaLabel.bib.close">Close seat preference menu</span>
-          <span slot="bib.fullscreen.headline">Seat Preference</span>
-          <span slot="label">Seat Preference</span>
-          <auro-menu>
-            <auro-menuoption value="aisle">Aisle</auro-menuoption>
-            <auro-menuoption value="window">Window</auro-menuoption>
-            <auro-menuoption value="middle">Middle</auro-menuoption>
-            <auro-menuoption value="exit-row">Exit row</auro-menuoption>
-          </auro-menu>
-        </auro-select>
-        <auro-select id="trip-features" name="tripFeatures" multiselect value='["wifi","meal"]'>
-          <span slot="ariaLabel.bib.close">Close trip feature menu</span>
-          <span slot="bib.fullscreen.headline">Trip Features</span>
-          <span slot="label">Trip Features</span>
-          <span slot="helpText">Preselected values show multiselect state.</span>
-          <auro-menu>
-            <auro-menuoption value="wifi">Wi-Fi</auro-menuoption>
-            <auro-menuoption value="meal">Meal service</auro-menuoption>
-            <auro-menuoption value="power">Power outlet</auro-menuoption>
-            <auro-menuoption value="streaming">Streaming entertainment</auro-menuoption>
-          </auro-menu>
-        </auro-select>
-        <auro-select id="status-disabled" name="statusDisabled" disabled placeholder="Unavailable while syncing">
-          <span slot="ariaLabel.bib.close">Close status menu</span>
-          <span slot="bib.fullscreen.headline">Traveler Status</span>
-          <span slot="label">Traveler Status</span>
-          <auro-menu>
-            <auro-menuoption value="mvp">MVP</auro-menuoption>
-            <auro-menuoption value="gold">Gold</auro-menuoption>
-            <auro-menuoption value="75k">75K</auro-menuoption>
-          </auro-menu>
-        </auro-select>
-      </div>
-    </section>
-    <section class="sectionCard">
-      <h3>Combobox States</h3>
-      <p class="sectionCopy">Suggestion, filter validation, and disabled examples.</p>
-      <div class="stack">
-        <auro-combobox id="favorite-fruit" name="favoriteFruit" behavior="suggestion">
-          <span slot="ariaLabel.bib.close">Close combobox</span>
-          <span slot="ariaLabel.input.clear">Clear fruit</span>
-          <span slot="bib.fullscreen.headline">Favorite Fruit</span>
-          <span slot="label">Favorite Fruit</span>
-          <auro-menu>
-            <auro-menuoption value="Apples">Apples</auro-menuoption>
-            <auro-menuoption value="Oranges">Oranges</auro-menuoption>
-            <auro-menuoption value="Peaches">Peaches</auro-menuoption>
-            <auro-menuoption value="Grapes">Grapes</auro-menuoption>
-            <auro-menuoption static nomatch>No matching option</auro-menuoption>
-          </auro-menu>
-        </auro-combobox>
-        <auro-combobox
-          id="airport-code"
-          name="airportCode"
-          behavior="filter"
-          required
-          setCustomValidityValueMissingFilter="Select an airport from the list">
-          <span slot="ariaLabel.bib.close">Close airport list</span>
-          <span slot="ariaLabel.input.clear">Clear airport</span>
-          <span slot="bib.fullscreen.headline">Airport Search</span>
-          <span slot="label">Airport Search</span>
-          <span slot="helpText">Filter mode requires picking from the menu.</span>
-          <auro-menu>
-            <auro-menuoption value="SEA">Seattle</auro-menuoption>
-            <auro-menuoption value="PDX">Portland</auro-menuoption>
-            <auro-menuoption value="SFO">San Francisco</auro-menuoption>
-            <auro-menuoption value="LAX">Los Angeles</auro-menuoption>
-            <auro-menuoption static nomatch>No matching airport</auro-menuoption>
-          </auro-menu>
-        </auro-combobox>
-        <auro-combobox id="travel-policy" name="travelPolicy" disabled>
-          <span slot="ariaLabel.bib.close">Close policy list</span>
-          <span slot="ariaLabel.input.clear">Clear policy</span>
-          <span slot="bib.fullscreen.headline">Travel Policy</span>
-          <span slot="label">Travel Policy</span>
-          <auro-menu>
-            <auro-menuoption value="standard">Standard</auro-menuoption>
-            <auro-menuoption value="executive">Executive</auro-menuoption>
-          </auro-menu>
-        </auro-combobox>
-      </div>
-    </section>
+  <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="sectionGrid">
-    <section class="sectionCard">
-      <h3>Choice Controls</h3>
-      <p class="sectionCopy">Checkbox and radio groups with required and horizontal states.</p>
-      <div class="stack">
-        <auro-checkbox-group required setCustomValidityValueMissing="Select at least one travel extra">
-          <span slot="legend">Travel Extras</span>
-          <span slot="helpText">Pick any extras that apply to this trip.</span>
-          <auro-checkbox value="priority-boarding" name="travelExtras" id="extra-priority">Priority boarding</auro-checkbox>
-          <auro-checkbox value="lounge" name="travelExtras" id="extra-lounge" checked>Lounge access</auro-checkbox>
-          <auro-checkbox value="bags" name="travelExtras" id="extra-bags">Checked bags</auro-checkbox>
-        </auro-checkbox-group>
-        <auro-radio-group horizontal required setCustomValidityValueMissing="Choose a cabin class">
-          <span slot="legend">Cabin Class</span>
-          <auro-radio id="cabin-main" label="Main" name="cabinClass" value="main"></auro-radio>
-          <auro-radio id="cabin-premium" label="Premium" name="cabinClass" value="premium"></auro-radio>
-          <auro-radio id="cabin-first" label="First" name="cabinClass" value="first"></auro-radio>
-        </auro-radio-group>
-      </div>
-    </section>
-    <section class="sectionCard">
-      <h3>Counter States</h3>
-      <p class="sectionCopy">Dropdown counter group plus standalone min/max and disabled states.</p>
-      <div class="stack">
-        <auro-counter-group id="passenger-counts" isDropdown>
-          <span slot="ariaLabel.bib.close">Close passenger selector</span>
-          <span slot="bib.fullscreen.headline">Passengers</span>
-          <div slot="label">Passengers</div>
-          <auro-counter value="1">
-            Adults
-            <span slot="description">18 years or older</span>
-          </auro-counter>
-          <auro-counter>
-            Children
-            <span slot="description">Under 17 years old</span>
-          </auro-counter>
-          <auro-counter>
-            Lap Infants
-            <span slot="description">Under 2 years</span>
-          </auro-counter>
-        </auro-counter-group>
-        <div class="counterBlock">
-          <auro-counter min="1" max="5" value="2">
-            Hotel Rooms
-            <span slot="description">Limit 5 rooms per booking</span>
-          </auro-counter>
-          <auro-counter disabled value="0">
-            Upgrade Vouchers
-            <span slot="description">Unavailable for this itinerary</span>
-          </auro-counter>
-        </div>
-      </div>
-    </section>
+  <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>
@@ -451,247 +259,55 @@ Finally, a more complex form example with multiple form elements, including a da
 
 ```html
 <style>
-  .complex-form {
-    display: grid;
-    gap: 1.5rem;
-    padding: 1.5rem;
-    border: 1px solid #2a2a2a;
-    border-radius: 1rem;
-    background: #fff;
-  }
-
-  .sectionGrid {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  }
-
-  .sectionCard {
-    display: grid;
-    gap: 1rem;
-    padding: 1rem;
-    border: 1px solid #d5d9e0;
-    border-radius: 0.75rem;
-    background: #fafbfc;
-  }
-
-  .sectionCard h3,
-  .sectionCard h4,
-  .sectionCard p {
-    margin: 0;
-  }
-
-  .sectionCopy {
-    color: #3f4854;
-  }
-
-  .stack {
-    display: grid;
-    gap: 1rem;
-  }
-
-  .counterBlock {
-    display: grid;
-    gap: 0.75rem;
-  }
-
   .submitBlock {
     margin-top: 1rem;
     display: flex;
     justify-content: flex-end;
-    flex-wrap: wrap;
     gap: 1rem;
   }
 
-  @media (max-width: 767px) {
-    .complex-form {
-      padding: 1rem;
-    }
+  .datepickerBlock {
+    margin-top: 1rem;
+  }
+
+  .complex-form {
+    display: block;
+    padding: 1rem;
+    border: 1px solid #2a2a2a;
+    border-radius: 1rem;
   }
 </style>
 <auro-form class="complex-form">
-  <div class="sectionGrid">
-    <section class="sectionCard">
-      <h3>Traveler Details</h3>
-      <p class="sectionCopy">Standard text inputs, a required field, and a disabled state.</p>
-      <div class="stack">
-        <auro-input id="first-name" name="firstName" required>
-          <span slot="label">First Name</span>
-        </auro-input>
-        <auro-input id="last-name" name="lastName" required>
-          <span slot="label">Last Name</span>
-        </auro-input>
-        <auro-input id="occupation" name="occupation">
-          <span slot="label">Occupation</span>
-          <span slot="helpText">Optional field for a short role description.</span>
-        </auro-input>
-        <auro-input id="employee-id" name="employeeId" disabled value="AS-4821">
-          <span slot="label">Employee ID</span>
-        </auro-input>
-        <auro-input-two id="cool-fact" name="coolFact" required>
-          <span slot="label">Cool Fact</span>
-        </auro-input-two>
-      </div>
-    </section>
-    <section class="sectionCard">
-      <h3>Trip Timing</h3>
-      <p class="sectionCopy">Single-date and range-date examples inside the same form flow.</p>
-      <div class="stack">
-        <auro-datepicker id="date-example" name="dateExample" required>
-          <span slot="fromLabel">Departure date</span>
-          <span slot="bib.fullscreen.fromLabel">Departure date</span>
-        </auro-datepicker>
-        <auro-datepicker id="date-range" name="dateRange" range>
-          <span slot="fromLabel">Trip start</span>
-          <span slot="toLabel">Trip end</span>
-          <span slot="bib.fullscreen.fromLabel">Trip start</span>
-          <span slot="bib.fullscreen.toLabel">Trip end</span>
-        </auro-datepicker>
-      </div>
-    </section>
-  </div>
-  <div class="sectionGrid">
-    <section class="sectionCard">
-      <h3>Select States</h3>
-      <p class="sectionCopy">Required, multiselect, and disabled dropdown patterns.</p>
-      <div class="stack">
-        <auro-select id="seat-preference" name="seatPreference" required placeholder="Choose a seat preference">
-          <span slot="ariaLabel.bib.close">Close seat preference menu</span>
-          <span slot="bib.fullscreen.headline">Seat Preference</span>
-          <span slot="label">Seat Preference</span>
-          <auro-menu>
-            <auro-menuoption value="aisle">Aisle</auro-menuoption>
-            <auro-menuoption value="window">Window</auro-menuoption>
-            <auro-menuoption value="middle">Middle</auro-menuoption>
-            <auro-menuoption value="exit-row">Exit row</auro-menuoption>
-          </auro-menu>
-        </auro-select>
-        <auro-select id="trip-features" name="tripFeatures" multiselect value='["wifi","meal"]'>
-          <span slot="ariaLabel.bib.close">Close trip feature menu</span>
-          <span slot="bib.fullscreen.headline">Trip Features</span>
-          <span slot="label">Trip Features</span>
-          <span slot="helpText">Preselected values show multiselect state.</span>
-          <auro-menu>
-            <auro-menuoption value="wifi">Wi-Fi</auro-menuoption>
-            <auro-menuoption value="meal">Meal service</auro-menuoption>
-            <auro-menuoption value="power">Power outlet</auro-menuoption>
-            <auro-menuoption value="streaming">Streaming entertainment</auro-menuoption>
-          </auro-menu>
-        </auro-select>
-        <auro-select id="status-disabled" name="statusDisabled" disabled placeholder="Unavailable while syncing">
-          <span slot="ariaLabel.bib.close">Close status menu</span>
-          <span slot="bib.fullscreen.headline">Traveler Status</span>
-          <span slot="label">Traveler Status</span>
-          <auro-menu>
-            <auro-menuoption value="mvp">MVP</auro-menuoption>
-            <auro-menuoption value="gold">Gold</auro-menuoption>
-            <auro-menuoption value="75k">75K</auro-menuoption>
-          </auro-menu>
-        </auro-select>
-      </div>
-    </section>
-    <section class="sectionCard">
-      <h3>Combobox States</h3>
-      <p class="sectionCopy">Suggestion, filter validation, and disabled examples.</p>
-      <div class="stack">
-        <auro-combobox id="favorite-fruit" name="favoriteFruit" behavior="suggestion">
-          <span slot="ariaLabel.bib.close">Close combobox</span>
-          <span slot="ariaLabel.input.clear">Clear fruit</span>
-          <span slot="bib.fullscreen.headline">Favorite Fruit</span>
-          <span slot="label">Favorite Fruit</span>
-          <auro-menu>
-            <auro-menuoption value="Apples">Apples</auro-menuoption>
-            <auro-menuoption value="Oranges">Oranges</auro-menuoption>
-            <auro-menuoption value="Peaches">Peaches</auro-menuoption>
-            <auro-menuoption value="Grapes">Grapes</auro-menuoption>
-            <auro-menuoption static nomatch>No matching option</auro-menuoption>
-          </auro-menu>
-        </auro-combobox>
-        <auro-combobox
-          id="airport-code"
-          name="airportCode"
-          behavior="filter"
-          required
-          setCustomValidityValueMissingFilter="Select an airport from the list">
-          <span slot="ariaLabel.bib.close">Close airport list</span>
-          <span slot="ariaLabel.input.clear">Clear airport</span>
-          <span slot="bib.fullscreen.headline">Airport Search</span>
-          <span slot="label">Airport Search</span>
-          <span slot="helpText">Filter mode requires picking from the menu.</span>
-          <auro-menu>
-            <auro-menuoption value="SEA">Seattle</auro-menuoption>
-            <auro-menuoption value="PDX">Portland</auro-menuoption>
-            <auro-menuoption value="SFO">San Francisco</auro-menuoption>
-            <auro-menuoption value="LAX">Los Angeles</auro-menuoption>
-            <auro-menuoption static nomatch>No matching airport</auro-menuoption>
-          </auro-menu>
-        </auro-combobox>
-        <auro-combobox id="travel-policy" name="travelPolicy" disabled>
-          <span slot="ariaLabel.bib.close">Close policy list</span>
-          <span slot="ariaLabel.input.clear">Clear policy</span>
-          <span slot="bib.fullscreen.headline">Travel Policy</span>
-          <span slot="label">Travel Policy</span>
-          <auro-menu>
-            <auro-menuoption value="standard">Standard</auro-menuoption>
-            <auro-menuoption value="executive">Executive</auro-menuoption>
-          </auro-menu>
-        </auro-combobox>
-      </div>
-    </section>
+  <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="sectionGrid">
-    <section class="sectionCard">
-      <h3>Choice Controls</h3>
-      <p class="sectionCopy">Checkbox and radio groups with required and horizontal states.</p>
-      <div class="stack">
-        <auro-checkbox-group required setCustomValidityValueMissing="Select at least one travel extra">
-          <span slot="legend">Travel Extras</span>
-          <span slot="helpText">Pick any extras that apply to this trip.</span>
-          <auro-checkbox value="priority-boarding" name="travelExtras" id="extra-priority">Priority boarding</auro-checkbox>
-          <auro-checkbox value="lounge" name="travelExtras" id="extra-lounge" checked>Lounge access</auro-checkbox>
-          <auro-checkbox value="bags" name="travelExtras" id="extra-bags">Checked bags</auro-checkbox>
-        </auro-checkbox-group>
-        <auro-radio-group horizontal required setCustomValidityValueMissing="Choose a cabin class">
-          <span slot="legend">Cabin Class</span>
-          <auro-radio id="cabin-main" label="Main" name="cabinClass" value="main"></auro-radio>
-          <auro-radio id="cabin-premium" label="Premium" name="cabinClass" value="premium"></auro-radio>
-          <auro-radio id="cabin-first" label="First" name="cabinClass" value="first"></auro-radio>
-        </auro-radio-group>
-      </div>
-    </section>
-    <section class="sectionCard">
-      <h3>Counter States</h3>
-      <p class="sectionCopy">Dropdown counter group plus standalone min/max and disabled states.</p>
-      <div class="stack">
-        <auro-counter-group id="passenger-counts" isDropdown>
-          <span slot="ariaLabel.bib.close">Close passenger selector</span>
-          <span slot="bib.fullscreen.headline">Passengers</span>
-          <div slot="label">Passengers</div>
-          <auro-counter value="1">
-            Adults
-            <span slot="description">18 years or older</span>
-          </auro-counter>
-          <auro-counter>
-            Children
-            <span slot="description">Under 17 years old</span>
-          </auro-counter>
-          <auro-counter>
-            Lap Infants
-            <span slot="description">Under 2 years</span>
-          </auro-counter>
-        </auro-counter-group>
-        <div class="counterBlock">
-          <auro-counter min="1" max="5" value="2">
-            Hotel Rooms
-            <span slot="description">Limit 5 rooms per booking</span>
-          </auro-counter>
-          <auro-counter disabled value="0">
-            Upgrade Vouchers
-            <span slot="description">Unavailable for this itinerary</span>
-          </auro-counter>
-        </div>
-      </div>
-    </section>
+  <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>