@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 2.0.0

package/components/combobox/dist/styles/style-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=style-css.d.ts.map

package/components/counter/README.md

@@ -18,7 +18,6 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Counter
-
 <!-- 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.
@@ -28,42 +27,55 @@ The `auro-counter` component is a ui element that enables a way to increment or
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Install
-
+## Getting Started
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
+#### NPM Installation
+
 ```shell
 $ npm i @aurodesignsystem/auro-formkit
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Design Token CSS Custom Property dependency
+### Import Options
+
+#### Automatic Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+For automatic registration, simply import the component:
 
-<!-- AURO-GENERATED-CONTENT:END -->
+```javascript
+// Registers <auro-counter> automatically
+import '@aurodesignsystem/auro-formkit/auro-counter';
+```
 
-### Define dependency in project component
+#### Custom Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<auro-counter>` component.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroCounter.register('custom-counter')` method on the component class and pass in a unique name.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
+```javascript
+// Import the class only
+import { AuroCounter } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+
+// Register with a custom name if desired
+AuroCounter.register('custom-counter');
+```
 
-```js
-import "@aurodesignsystem/auro-formkit/auro-counter";
+#### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
 ```
+
+This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
 
@@ -85,104 +97,50 @@ import "@aurodesignsystem/auro-formkit/auro-counter";
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Install bundled assets from CDN
+### Design Token CSS Custom Property dependency
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-counter__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
-**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install from CDN
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
+```html
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.0-beta.54/auro-counter/+esm"></script>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### Bundle example code
+## UI development browser support
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentBundleUseModBrowsers.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.8/dist/auro-counter__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-counter 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:
 
-* 1
-* 2
-* 3
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## API Code Examples
-
-### Default auro-counter
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-counter-group>
-  <auro-counter>
-    Short label
-  </auro-counter>
-  <auro-counter>
-    Another short label
-  </auro-counter>
-  <auro-counter>
-    This is an example of the wrapping behavior for a long label
-  </auro-counter>
-</auro-counter-group>
-```
+* Need to input a numeric value within a defined range
+* Need a user-friendly interface for quantity selection
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Development
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
-In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
+## Formkit development
 
-Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
-
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
 
-### Start development environment
+### Filtering
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
 
-```shell
-$ npm run dev
-```
-
-Open [localhost:8000](http://localhost:8000/)
-
-If running separate sessions is preferred, please run the following commands in individual terminal shells.
+To only develop a single component, use the `--filter` flag:
 
 ```shell
-$ npm run build:watch
-
-$ npm run serve
+npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### API generation
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
-The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-counter.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Bundled assets
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->
-Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
-
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/counter/demo/api.js

@@ -1,9 +1,13 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
-import '../src/index.js';
+import '../src/registered.js';
+import { dropdownCounterExample } from "../apiExamples/dropdown-mobile-properties.js";
+import { eventCounterExample } from "../apiExamples/events.js";
 
 export function initExamples(initialCount = 0) {
   try {
     // javascript example function calls to be added here upon creation to test examples
+    dropdownCounterExample();
+    eventCounterExample();
 
   } catch (err) {
     if (initialCount <= 20) {

package/components/counter/demo/api.md

@@ -15,11 +15,11 @@
 
 ## Methods
 
-| Method             | Type                                  | Description                                      |
-|--------------------|---------------------------------------|--------------------------------------------------|
-| [decrement](#decrement)        | `(value?: number \| undefined): void` | Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.<br /><br />**value**: The amount to decrement by. |
-| [handleSlotChange](#handleSlotChange) | `(): void`                            |                                                  |
-| [increment](#increment)        | `(value?: number \| undefined): void` | Increments the counter value by 1. If a value is provided, it increments by that amount.<br /><br />**value**: The amount to increment by. |
+| Method      | Type                                   | Description                                      |
+|-------------|----------------------------------------|--------------------------------------------------|
+| [decrement](#decrement) | `(value?: number \| undefined): void`  | Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.<br /><br />**value**: The amount to decrement by. |
+| [increment](#increment) | `(value?: number \| undefined): void`  | Increments the counter value by 1. If a value is provided, it increments by that amount.<br /><br />**value**: The amount to increment by. |
+| [validate](#validate)  | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
@@ -31,35 +31,290 @@
 
 | Name          | Description                          |
 |---------------|--------------------------------------|
-| [Default](#Default)     | Main label content for the counter.  |
+| [default](#default)     | Main label content for the counter.  |
 | [description](#description) | Descriptive content for the counter. |
 
 # auro-counter-group
 
 ## Properties
 
-| Property   | Attribute  | Type     | Default     | Description                                      |
-|------------|------------|----------|-------------|--------------------------------------------------|
-| [max](#max)      | `max`      | `number` | "undefined" | The maximum value allowed for the whole group of counters. |
-| [min](#min)      | `min`      | `number` | "undefined" | The minimum value allowed for the whole group of counters. |
-| [validity](#validity) | `validity` | `string` | "undefined" | Reflects the validity state.                     |
-| [value](#value)    | `value`    | `number` | "undefined" | The current value.                               |
+| Property                  | Attribute                 | Type      | Default     | Description                                      |
+|---------------------------|---------------------------|-----------|-------------|--------------------------------------------------|
+| [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `string`  | "sm"        | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
+| [isDropdown](#isDropdown)              | `isDropdown`              | `boolean` | false       | Indicates if the counter group is displayed as a dropdown. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` |             | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [max](#max)                     | `max`                     | `number`  | "undefined" | The maximum value allowed for the whole group of counters. |
+| [min](#min)                     | `min`                     | `number`  | "undefined" | The minimum value allowed for the whole group of counters. |
+| [total](#total)                   | `total`                   | `number`  | "undefined" | The total value of the counters.                 |
+| [validity](#validity)                | `validity`                | `string`  | "undefined" | Reflects the validity state.                     |
+| [value](#value)                   | `value`                   | `object`  | "undefined" | The current individual values of the nested counters. |
+
+## Methods
+
+| Method     | Type                                   | Description                                      |
+|------------|----------------------------------------|--------------------------------------------------|
+| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
-| Event   | Type                                           |
-|---------|------------------------------------------------|
-| [input](#input) | `CustomEvent<{ value: number \| undefined; }>` |
+| Event   | Type                                             |
+|---------|--------------------------------------------------|
+| [input](#input) | `CustomEvent<{ total: number \| undefined; value: {} \| undefined; }>` |
 
 ## Slots
 
-| Name      | Description                |
-|-----------|----------------------------|
-| [Default](#Default) | Slot for counter elements. |
+| Name                      | Description                                      |
+|---------------------------|--------------------------------------------------|
+| `bib.fullscreen.footer`   | Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true. |
+| `bib.fullscreen.headline` | Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required. |
+| [default](#default)                 | Slot for counter elements.                       |
+| [helpText](#helpText)                | Dropdown help text content. Only used when `isDropdown` is true. |
+| [label](#label)                   | Dropdown label content. Only used when `isDropdown` is true. |
+| [valueText](#valueText)               | Dropdown value text display. Only used when `isDropdown` is true. |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
 
+### Counter
+
+#### Min/Max and Value
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-minmax.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/counter-minmax.html -->
+  <auro-counter min="1" max="5" value="2">
+    Adults
+    <span slot="description">Min: 1, Max: 5</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-minmax.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-minmax.html -->
+
+```html
+<auro-counter min="1" max="5" value="2">
+  Adults
+  <span slot="description">Min: 1, Max: 5</span>
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### Disabled State
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/counter-disabled.html -->
+  <auro-counter disabled value="0">
+    Disabled counter
+    <span slot="description">This counter cannot be modified</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-disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-disabled.html -->
+
+```html
+<auro-counter disabled value="0">
+  Disabled counter
+  <span slot="description">This counter cannot be modified</span>
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Counter Group
+
+#### Group Properties
+All available counter-group properties:
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-group-properties.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/api-group-properties.html -->
+  <!-- Example of counter-group properties -->
+  <auro-counter-group max="10" min="2" isDropdown>
+    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+    <div slot="label">Group with all properties</div>
+    <div slot="helpText">Total must be between 2-10</div>
+    <div slot="valueText">Custom total display</div>
+    <auro-counter>
+      Counter 1
+    </auro-counter>
+    <auro-counter>
+      Counter 2
+    </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/api-group-properties.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/api-group-properties.html -->
+
+```html
+<!-- Example of counter-group properties -->
+<auro-counter-group max="10" min="2" isDropdown>
+  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+  <div slot="label">Group with all properties</div>
+  <div slot="helpText">Total must be between 2-10</div>
+  <div slot="valueText">Custom total display</div>
+  <auro-counter>
+    Counter 1
+  </auro-counter>
+  <auro-counter>
+    Counter 2
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### Available Slots
+All available slots for both components:
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-slots.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/api-slots.html -->
+  <!-- Example of all available slots -->
+  <auro-counter-group isDropdown>
+    <!-- Group slots -->
+    <div slot="label">Group with all slots</div>
+    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+    <div slot="helpText">Help text appears below the group</div>
+    <div slot="valueText">Custom value display</div>
+    <!-- Counter with all slots -->
+    <auro-counter>
+      Default slot content
+      <span slot="description">Description slot content</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/api-slots.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/api-slots.html -->
+
+```html
+<!-- Example of all available slots -->
+<auro-counter-group isDropdown>
+  <!-- Group slots -->
+  <div slot="label">Group with all slots</div>
+  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
+  <div slot="helpText">Help text appears below the group</div>
+  <div slot="valueText">Custom value display</div>
+  <!-- Counter with all slots -->
+  <auro-counter>
+    Default slot content
+    <span slot="description">Description slot content</span>
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Event Handling
+Listen for `input` events to react to user interactions.
+
+<code id="eventOutput">
+  Event values will appear here
+</code><br><br>
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/events.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/events.html -->
+  <auro-counter-group id="eventExample">
+    <auro-counter>
+      Adults
+    </auro-counter>
+    <auro-counter>
+      Children
+    </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/events.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/events.html -->
+
+```html
+<auro-counter-group id="eventExample">
+  <auro-counter>
+    Adults
+  </auro-counter>
+  <auro-counter>
+    Children
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+----
+
+```javascript
+const counter = document.getElementById('eventExample');
+counter.addEventListener('input', (event) => {
+  console.log(`Values updated: ${JSON.stringify(event.detail)}`);
+});
+```
+
+</auro-accordion>
+
+#### Custom Value Display
+<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="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 -->
+
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <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 -->
+</auro-accordion>
+
 ### Group Max/Min
 
 The group counter max or min property sets the value for all counters in the group. If a counter has a max value set, the group max attribute will override it. All increment buttons as a result will be disabled to prevent the group of counters from exceeding the group max.
@@ -132,4 +387,76 @@ You can also individually set the max or min value for each counter in a group.
 </auro-counter-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dropdown with fullscreen bib
+
+You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
+
+The default value of `fullscreenBreakpoint` is `sm`. 
+
+Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens)
+
+To support fullscreen bib, setting the `bib.fullscreen.headline` slot is **REQUIRED**.
+You can also set `bib.fullscreen.footer` slot to add any additional options on fullscreen view.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-mobile-properties.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+  <div style="max-width: 350px;">
+    <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+      <span slot="label">Passengers</span>
+      <span slot="bib.fullscreen.headline">Passengers</span>
+      <div slot="helpText">This is help text</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>
+      <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+        <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+        <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
+      </div>
+    </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-mobile-properties.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+    <span slot="label">Passengers</span>
+    <span slot="bib.fullscreen.headline">Passengers</span>
+    <div slot="helpText">This is help text</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>
+    <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+      <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+      <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
+    </div>
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>