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

package/components/form/demo/api.md

@@ -195,55 +195,247 @@ 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;
   }
 
-  .datepickerBlock {
-    margin-top: 1rem;
-  }
-
-  .complex-form {
-    display: block;
-    padding: 1rem;
-    border: 1px solid #2a2a2a;
-    border-radius: 1rem;
+  @media (max-width: 767px) {
+    .complex-form {
+      padding: 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 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="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 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>
+  </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>
   <div class="submitBlock">
     <auro-button type="reset">Reset</auro-button>
@@ -259,55 +451,247 @@ 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;
   }
 
-  .datepickerBlock {
-    margin-top: 1rem;
-  }
-
-  .complex-form {
-    display: block;
-    padding: 1rem;
-    border: 1px solid #2a2a2a;
-    border-radius: 1rem;
+  @media (max-width: 767px) {
+    .complex-form {
+      padding: 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 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="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 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>
+  </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>
   <div class="submitBlock">
     <auro-button type="reset">Reset</auro-button>