@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

package/components/counter/demo/getting-started.md

@@ -0,0 +1,332 @@
+<auro-header level="1" id="overview">Counter - Getting Started</auro-header>
+<div class="contentWrapper">
+<nav>
+<auro-nav anchorNavContent=".scrollWrapper">
+<span slot="mobileToggleCollapsed">View More</span>
+<span slot="mobileToggleExpanded">View Less</span>
+<auro-anchorlink fluid href="#setup">Setup</auro-anchorlink>
+<auro-anchorlink fluid href="#recommendedSetup" class="level2 body-xs" onclick="openAccordion('recommendedAccordion')">Recommended</auro-anchorlink>
+<auro-anchorlink fluid href="#autoSetup" class="level2 body-xs" onclick="openAccordion('autoAccordion')">Auto</auro-anchorlink>
+<auro-anchorlink fluid href="#cdnSetup" class="level2 body-xs" onclick="openAccordion('cdnAccordion')">CDN</auro-anchorlink>
+<auro-anchorlink fluid href="#minimalConfig">Minimal Config</auro-anchorlink>
+<auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
+<auro-anchorlink fluid href="#slotsGroup" class="level2 body-xs">auro-counter-group</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-label" class="level2 body-xs">- label</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-helpText" class="level2 body-xs">- helpText</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-valueText" class="level2 body-xs">- valueText</auro-anchorlink>
+<auro-anchorlink fluid href="#slotsCounter" class="level2 body-xs">auro-counter</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-default-counter" class="level2 body-xs">- (default)</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-description" class="level2 body-xs">- description</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-helpText-counter" class="level2 body-xs">- helpText</auro-anchorlink>
+<auro-anchorlink fluid href="#stateManagement">State Management</auro-anchorlink>
+<auro-anchorlink fluid href="#validity" class="level2 body-xs">Validity</auro-anchorlink>
+<auro-anchorlink fluid href="#publicFunctions">Functions</auro-anchorlink>
+<auro-anchorlink fluid href="#validate" class="level2 body-xs">validate()</auro-anchorlink>
+<auro-anchorlink fluid href="#increment" class="level2 body-xs">increment()</auro-anchorlink>
+<auro-anchorlink fluid href="#decrement" class="level2 body-xs">decrement()</auro-anchorlink>
+</auro-nav>
+</nav>
+<div class="mainContent">
+<div class="scrollWrapper">
+<section>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/install.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/install.md -->
+<auro-header level="2" id="setup">Setup</auro-header>
+<auro-accordion-group Emphasis>
+<auro-accordion expanded class="section" id="recommendedAccordion">
+<span slot="trigger">Recommended Installation and Implementation</span>
+<div class="accordion-content">
+<auro-header level="3">Install</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
+
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3">Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
+<auro-header level="4">Custom Component Registration for Version Management</auro-header>
+There are two key parts to every Auro component: the <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</auro-hyperlink> and the custom element definition. The class defines the component's behavior, while the custom element registers it under a specific name so it can be used in HTML.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+<pre class="language-js"><code class="language-js">// Import the class only
+import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+​
+// Register with a custom name if desired
+AuroCounter.register('custom-counter');
+AuroCounterGroup.register('custom-counter-group');</code></pre>
+
+This will create a new custom element <code>&lt;custom-counter&gt;</code> and <code>&lt;custom-counter-group&gt;</code> that behaves exactly like <code>&lt;auro-counter&gt;</code> and <code>&lt;auro-counter-group&gt;</code>, allowing both to coexist on the same page without interfering with each other.
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
+<pre class="language-html"><code class="language-html">&lt;custom-counter-group&gt;
+  &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+  &lt;div slot="label"&gt;Passengers&lt;/div&gt;
+  &lt;custom-counter&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/custom-counter&gt;
+  &lt;custom-counter&gt;
+    Children
+    &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+  &lt;/custom-counter&gt;
+&lt;/custom-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="autoAccordion">
+<span slot="trigger">Auto Installation and Implementation</span>
+<div class="accordion-content">
+<p class="warning"><strong>Warning:</strong> Default registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
+<auro-header level="3">Install</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
+
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<auro-header level="3">Implementation</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
+Import the component and its dependencies, then register the custom elements:
+
+<pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-counter';</code></pre>
+
+Then use the elements in your HTML:
+
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group&gt;
+  &lt;auro-counter&gt;Adults&lt;/auro-counter&gt;
+  &lt;auro-counter&gt;Children&lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+<auro-accordion class="section" id="cdnAccordion">
+<span slot="trigger">CDN Installation</span>
+<div class="accordion-content">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
+The counter components can be loaded via CDN without a build step:
+
+<pre class="language-html"><code class="language-html">&lt;script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-counter/+esm" type="module"&gt;&lt;/script&gt;</code></pre>
+
+Then use the elements in your HTML:
+
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group&gt;
+  &lt;auro-counter&gt;Adults&lt;/auro-counter&gt;
+  &lt;auro-counter&gt;Children&lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</auro-accordion>
+</auro-accordion-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</section>
+<section>
+<auro-header level="3" id="minimalConfig">Minimal Configuration</auro-header>
+<p>A standalone <code>&lt;auro-counter&gt;</code> requires only a label in the default slot:</p>
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
+  Adults
+&lt;/auro-counter&gt;</code></pre>
+<p>For a grouped counter with dropdown, provide a <code>label</code> slot and <code>bib.fullscreen.headline</code> slot on the group:</p>
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group isDropdown&gt;
+  &lt;span slot="label"&gt;Passengers&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Passengers&lt;/span&gt;
+  &lt;auro-counter&gt;Adults&lt;/auro-counter&gt;
+  &lt;auro-counter&gt;Children&lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+</section>
+<section>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/slots.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/slots.md -->
+<auro-header level="2" id="slots">Slots</auro-header>
+<auro-header level="3" id="slotsGroup">auro-counter-group</auro-header>
+<p>The following slots are available on the <code>&lt;auro-counter-group&gt;</code> element.</p>
+<auro-header level="4" id="slot-label">label</auro-header>
+<p>Dropdown label content. Only used when <code>isDropdown</code> is true.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
+<auro-counter-group isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="bib.fullscreen.headline">Passengers</span>
+<div slot="label">Passengers</div>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+</auro-counter>
+<auro-counter>
+Lap Infants
+<span slot="description">Under 2 years</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group isDropdown&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Passengers&lt;/span&gt;
+  &lt;div slot="label"&gt;Passengers&lt;/div&gt;
+  &lt;auro-counter&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
+    Children
+    &lt;span slot="description"&gt;Under 17 years old. Restrictions apply if traveling without an adult.&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
+    Lap Infants
+    &lt;span slot="description"&gt;Under 2 years&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="slot-helpText">helpText</auro-header>
+<p>Dropdown help text content. Only used when <code>isDropdown</code> is true.</p>
+<auro-header level="4" id="slot-valueText">valueText</auro-header>
+<p>Customize the value display text in the dropdown trigger.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-value-text.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown-value-text.html -->
+<div style="max-width: 350px;">
+<auro-counter-group isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="bib.fullscreen.headline">Passengers</span>
+<div slot="valueText">Custom value text</div>
+<div slot="label"></div>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+</auro-counter>
+<auro-counter>
+Lap Infants
+<span slot="description">Under 2 years</span>
+</auro-counter>
+</auro-counter-group>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-value-text.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-value-text.html -->
+<pre class="language-html"><code class="language-html">&lt;div style="max-width: 350px;"&gt;
+  &lt;auro-counter-group isDropdown&gt;
+    &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.headline"&gt;Passengers&lt;/span&gt;
+    &lt;div slot="valueText"&gt;Custom value text&lt;/div&gt;
+    &lt;div slot="label"&gt;&lt;/div&gt;
+    &lt;auro-counter&gt;
+      Adults
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
+      Children
+      &lt;span slot="description"&gt;Under 17 years old. Restrictions apply if traveling without an adult.&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
+      Lap Infants
+      &lt;span slot="description"&gt;Under 2 years&lt;/span&gt;
+    &lt;/auro-counter&gt;
+  &lt;/auro-counter-group&gt;
+&lt;/div&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="slotsCounter">auro-counter</auro-header>
+<p>The following slots are available on the <code>&lt;auro-counter&gt;</code> element.</p>
+<auro-header level="4" id="slot-default-counter">(default)</auro-header>
+<p>Main label content for the counter. This is the primary text displayed alongside the increment/decrement controls.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
+<auro-counter>
+Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
+  Adults
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="slot-description">description</auro-header>
+<p>Descriptive content rendered below the counter label. Use this for supplementary information about the counter option.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/description.html) -->
+<!-- The below content is automatically added from ./../apiExamples/description.html -->
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/description.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/description.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
+  Adults
+  &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="4" id="slot-helpText-counter">helpText</auro-header>
+<p>Help text content displayed below the counter.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-helptext.html) -->
+<!-- The below content is automatically added from ./../apiExamples/counter-helptext.html -->
+<auro-counter>
+Adults
+<span slot="helpText">This is help text for the counter</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-helptext.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-helptext.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
+  Adults
+  &lt;span slot="helpText"&gt;This is help text for the counter&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:END -->
+</section>
+<section>
+<auro-header level="2" id="stateManagement">State Management</auro-header>
+<p>The following properties reflect the current state of the component and can be accessed via JavaScript.</p>
+<auro-header level="3" id="validity">validity</auro-header>
+<p>Returns the current <code>validityState</code> of the counter or counter group as a string. Possible values include <code>valid</code> and <code>customError</code>.</p>
+</section>
+<section>
+<auro-header level="2" id="publicFunctions">Functions</auro-header>
+<p>The following public methods are available.</p>
+<auro-header level="3" id="validate">validate()</auro-header>
+<p>Triggers validation on the counter or counter group. Pass <code>true</code> to force validation even when <code>noValidate</code> is set.</p>
+<auro-header level="3" id="increment">increment()</auro-header>
+<p>Increments the counter value by 1. Optionally pass a number to increment by a specific amount.</p>
+<auro-header level="3" id="decrement">decrement()</auro-header>
+<p>Decrements the counter value by 1. Optionally pass a number to decrement by a specific amount.</p>
+</section>
+</div>
+</div>
+</div>

package/components/counter/demo/index.html

@@ -18,42 +18,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-counter</title>
 
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
 
     <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
 
     <!-- Design Token Alaska Theme -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
+
     <!-- Webcore Stylesheet Alaska Theme -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
+
     <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-</head>
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
 
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
-      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('./index.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        })
+      import { renderPage } from './demo-support.js';
+      await renderPage('./index.md');
     </script>
-    <script type="module">
-      import { initExamples } from "./index.min.js";
 
-      initExamples();
-    </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>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>

package/components/counter/demo/index.md

@@ -1,34 +1,24 @@
-<!--
-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.
--->
-
-# Counter
-
+<auro-header level="1" id="overview">Counter - Overview and UX Guide</auro-header>
+<div class="contentWrapper">
+<nav>
+<auro-nav anchorNavContent=".scrollWrapper">
+<span slot="mobileToggleCollapsed">View More</span>
+<span slot="mobileToggleExpanded">View Less</span>
+<auro-anchorlink fluid href="#description">Description</auro-anchorlink>
+<auro-anchorlink fluid href="#userStories">User Stories</auro-anchorlink>
+<auro-anchorlink fluid href="#standaloneCounter" class="level2 body-xs">Standalone Counter</auro-anchorlink>
+<auro-anchorlink fluid href="#counterGroup" class="level2 body-xs">Counter Group</auro-anchorlink>
+<auro-anchorlink fluid href="#dropdownCounter" class="level2 body-xs">Dropdown Counter</auro-anchorlink>
+<auro-anchorlink fluid href="#viewport" class="level2 body-xs">Change Viewport Size</auro-anchorlink>
+</auro-nav>
+</nav>
+<div class="mainContent">
+<div class="scrollWrapper">
+<auro-header level="2" id="description">Description</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
-The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Use Cases
-
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
-<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
-The `auro-counter` element should be used in situations where users may:
-
-* Need to input a numeric value within a defined range
-* Need a user-friendly interface for quantity selection
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Example(s)
-
-### Basic Counter
-
-The counter component provides a simple interface for incrementing or decrementing numeric values. It displays a label with increment/decrement buttons and the current value. 
-
-This example demonstrates most basic implementation of a standalone counter.
-
+The <code>auro-counter</code> component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the <code>auro-counter-group</code> to facilitate a collection of counters to add passenger types to a flight.
+<!-- AURO-GENERATED-CONTENT:END -->
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
 <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
@@ -36,22 +26,41 @@ This example demonstrates most basic implementation of a standalone counter.
 Adults
 </auro-counter>
 <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
-<span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
-
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
 <pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
   Adults
-&lt;/auro-counter&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<section>
+<auro-header level="2" id="userStories">User Stories</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/index/userStories.md) -->
+<!-- The below content is automatically added from ./../docs/partials/index/userStories.md -->
+<auro-header level="3" id="standaloneCounter">Standalone Counter</auro-header>
+<p>As a user, I want a simple numeric input that I can increment or decrement to select a quantity.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
+<auro-counter>
+Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
+  Adults
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
-
-### Basic Counter Group
-
-Counter groups allow you to manage multiple related counters together. This is useful when you need to collect multiple quantities that are related, such as different passenger types.
-
+<auro-header level="3" id="counterGroup">Counter Group</auro-header>
+<p>As a user, I want to select multiple related quantities — such as different passenger types — in a single grouped interface.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
 <!-- The below content is automatically added from ./../apiExamples/basic.html -->
@@ -67,12 +76,11 @@ This is an example of the wrapping behavior for a long label
 </auro-counter>
 </auro-counter-group>
 <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</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 -->
-
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 <pre class="language-html"><code class="language-html">&lt;auro-counter-group&gt;
   &lt;auro-counter&gt;
     Short label
@@ -83,6 +91,64 @@ This is an example of the wrapping behavior for a long label
   &lt;auro-counter&gt;
     This is an example of the wrapping behavior for a long label
   &lt;/auro-counter&gt;
-&lt;/auro-counter-group&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="dropdownCounter">Dropdown Counter</auro-header>
+<p>As a user, I want a compact dropdown that expands to reveal counter options, saving space in forms.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
+<auro-counter-group isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="bib.fullscreen.headline">Passengers</span>
+<div slot="label">Passengers</div>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+</auro-counter>
+<auro-counter>
+Lap Infants
+<span slot="description">Under 2 years</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group isDropdown&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Passengers&lt;/span&gt;
+  &lt;div slot="label"&gt;Passengers&lt;/div&gt;
+  &lt;auro-counter&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
+    Children
+    &lt;span slot="description"&gt;Under 17 years old. Restrictions apply if traveling without an adult.&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
+    Lap Infants
+    &lt;span slot="description"&gt;Under 2 years&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="viewport">Change Viewport Size</auro-header>
+<p>The user may change the size of their viewport (e.g. resize their desktop browser window, rotate their mobile device). In some cases, this may cause a re-render of the counter group while the dropdown bib is expanded. It is possible that the viewport size change will cause the bib to change from a popover to a fullscreen modal or vice versa while the bib is open.</p>
+<auro-header level="4" id="us-popoverToModal">Popover to Modal</auro-header>
+<p>While in a popover display state with the bib open, focus will be on the trigger. After switching to the fullscreen modal dialog, focus will move to the close button inside the dialog.</p>
+<auro-header level="4" id="us-modalToPopover">Modal to Popover</auro-header>
+<p>While in a fullscreen modal display state with the bib open, focus will be on the close button inside the dialog. After switching to the popover display, focus will move to the trigger.</p>
+<!-- AURO-GENERATED-CONTENT:END -->
+</section>
+</div>
+</div>
+</div>