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

package/components/datepicker/dist/styles/color-calendar-css.d.ts

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

package/components/datepicker/dist/styles/color-cell-css.d.ts

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

package/components/datepicker/dist/styles/color-css.d.ts

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

package/components/datepicker/dist/styles/color-month-css.d.ts

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

package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts

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

package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts

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

package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts

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

package/components/datepicker/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/datepicker/dist/styles/tokens-css.d.ts

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

package/components/datepicker/dist/utilities.d.ts

@@ -3,9 +3,34 @@ export class AuroDatepickerUtilities {
      * Returns true if value passed in is a valid date.
      * @private
      * @param {String} date - Date to validate.
+     * @param {String} format - Date format to validate against.
      * @returns {Boolean}
      */
     private validDateStr;
+    /**
+     * Converts a date string to a North American date format.
+     * @private
+     * @param {String} dateStr - Date to validate.
+     * @param {String} format - Date format to validate against.
+     * @returns {Boolean}
+     */
+    private toNorthAmericanFormat;
+    /**
+     * Parses a date string into its components.
+     * @private
+     * @param {string} dateStr - Date string to parse.
+     * @param {string} format - Date format to parse.
+     * @returns {void}
+     */
+    private parseDate;
+    /**
+     * Converts a date string to a custom date format.
+     * @private
+     * @param {string} dateStr - Date string to parse.
+     * @param {string} format - Date format to parse.
+     * @returns {void}
+     */
+    private toCustomFormat;
     /**
      * Converts any date object to a date object representing the first day of the month.
      * @param {Object} date - Date to convert to the first day of the month.
@@ -44,4 +69,3 @@ export class AuroDatepickerUtilities {
      */
     private datesMatch;
 }
-//# sourceMappingURL=utilities.d.ts.map

package/components/datepicker/dist/utilitiesCalendar.d.ts

@@ -4,9 +4,10 @@ export class CalendarUtilities {
      * Scroll the calendar month list to a given valid date if in mobile view.
      * @param {Object} elem - The calendar element.
      * @param {String} date - The date to scroll into view.
+     * @param {String} format - The format of the date.
      * @returns {void}
      */
-    scrollMonthIntoView(elem: any, date: string): void;
+    scrollMonthIntoView(elem: any, date: string, format: string): void;
     /**
      * Sends an event requesting the dropdown bib be closed.
      * @private
@@ -35,4 +36,3 @@ export class CalendarUtilities {
     handleMonthChange(elem: any, direction: string): void;
 }
 import { AuroDatepickerUtilities } from './utilities.js';
-//# sourceMappingURL=utilitiesCalendar.d.ts.map

package/components/datepicker/dist/utilitiesCalendarRender.d.ts

@@ -17,7 +17,7 @@ export class UtilitiesCalendarRender {
     /**
      * Determines how many calendar months can be rendered based on the screen size and defined range.
      * @param {Object} elem - The auro-calendar element.
-     * @param {Boolean} isMobile - true if it's to render for mobile view
+     * @param {Boolean} isMobile - True if it's to render for mobile view.
      * @private
      * @returns {Number} Returns the maximum number of months that can be rendered.
      */
@@ -25,7 +25,7 @@ export class UtilitiesCalendarRender {
     /**
      * Determines the number of months rendered inside the calendar.
      * @param {Object} elem - The auro-calendar element.
-     * @param {Boolean} isMobile - true if it's to render for mobile view
+     * @param {Boolean} isMobile - True if it's to render for mobile view.
      * @private
      * @returns {void}
      */
@@ -48,4 +48,3 @@ export class UtilitiesCalendarRender {
     private renderCalendar;
 }
 import { AuroDatepickerUtilities } from './utilities.js';
-//# sourceMappingURL=utilitiesCalendarRender.d.ts.map

package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts

@@ -3,4 +3,3 @@ export class Day {
     date: number;
     title: number;
 }
-//# sourceMappingURL=day.d.ts.map

package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts

@@ -58,4 +58,3 @@ export namespace RangeDatepickerCalendar {
     let styles: import("lit").CSSResult;
 }
 import { LitElement } from 'lit';
-//# sourceMappingURL=range-datepicker-calendar.d.ts.map

package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=range-datepicker-cell.d.ts.map

package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts

@@ -55,4 +55,3 @@ export namespace RangeDatepicker {
     let styles: import("lit").CSSResult;
 }
 import { LitElement } from 'lit';
-//# sourceMappingURL=range-datepicker.d.ts.map

package/components/dropdown/README.md

@@ -18,7 +18,6 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Dropdown
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
@@ -30,42 +29,55 @@ _Note: if the dropdown content in your implementation is not interactive (e.g. a
 <!-- 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-dropdown> automatically
+import '@aurodesignsystem/auro-formkit/auro-dropdown';
+```
 
-### 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-dropdown>` component.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroDropdown.register('custom-dropdown')` 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 { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
+
+// Register with a custom name if desired
+AuroDropdown.register('custom-dropdown');
+```
 
-```js
-import "@aurodesignsystem/auro-formkit/auro-dropdown";
+#### 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**
 
@@ -82,26 +94,30 @@ import "@aurodesignsystem/auro-formkit/auro-dropdown";
 ```
 <!-- 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-dropdown__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/auro-dropdown/+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.9.2/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-dropdown@2.0.0-beta.8/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown 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-dropdown` element should be used in situations where users may:
@@ -111,70 +127,18 @@ The `auro-dropdown` element should be used in situations where users may:
 * when interactive help is required
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Code Examples
-
-### Default auro-dropdown
+## Formkit development
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
 
-```html
-<auro-dropdown aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-```
-<!-- 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.
-
-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 -->
-
-### Start development environment
-
-<!-- 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**.
+### Filtering
 
-```shell
-$ npm run dev
-```
-
-Open [localhost:8000](http://localhost:8000/)
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
 
-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-dropdown.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/dropdown/demo/api.js

@@ -2,7 +2,7 @@
 import { showExample } from './../apiExamples/programmaticallyShow.js';
 import { hideExample } from './../apiExamples/programmaticallyHide.js';
 import { inDialogExample } from '../apiExamples/inDialog.js';
-import '../src/index.js';
+import '../src/registered.js';
 
 export function initExamples(initialCount = 0) {
   try {

package/components/dropdown/demo/api.md

@@ -11,31 +11,33 @@
 
 ## Properties
 
-| Property                     | Attribute                    | Type        | Default | Description                                      |
-|------------------------------|------------------------------|-------------|---------|--------------------------------------------------|
-| [bordered](#bordered)                   | `bordered`                   | ` Boolean ` |         | If declared, applies a border around the trigger slot. |
-| [chevron](#chevron)                    | `chevron`                    | ` Boolean ` |         | If declared, the dropdown displays a chevron on the right. |
-| [common](#common)                     | `common`                     | ` Boolean ` |         | If declared, the dropdown will be styled with the common theme. |
-| [disabled](#disabled)                   | `disabled`                   | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
-| [error](#error)                      | `error`                      | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
-| [fluid](#fluid)                      | `fluid`                      | `Boolean`   |         | Makes the trigger to be full width of its parent container. |
-| [focusShow](#focusShow)                  | `focusShow`                  | ` Boolean ` |         | If declared, the bib will display when focus is applied to the trigger. |
-| [hoverToggle](#hoverToggle)                | `hoverToggle`                | ` Boolean ` |         | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
-| [inset](#inset)                      | `inset`                      | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
-| [isPopoverVisible](#isPopoverVisible)           | `isPopoverVisible`           | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
-| [matchWidth](#matchWidth)                 | `matchWidth`                 | ` Boolean ` | false   | If declared, the popover and trigger will be set to the same width. |
-| [mobileFullscreenBreakpoint](#mobileFullscreenBreakpoint) | `mobileFullscreenBreakpoint` | ` String `  |         | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
-| [noHideOnThisFocusLoss](#noHideOnThisFocusLoss)      | `noHideOnThisFocusLoss`      | ` Boolean ` | false   | If declared, the dropdown will not hide when moving focus outside the element. |
-| [noToggle](#noToggle)                   | `noToggle`                   | ` Boolean ` |         | If declared, the trigger will only show the dropdown bib. |
-| [onSlotChange](#onSlotChange)               | `onSlotChange`               |             |         |                                                  |
-| [rounded](#rounded)                    | `rounded`                    | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
+| Property                | Attribute               | Type        | Default | Description                                      |
+|-------------------------|-------------------------|-------------|---------|--------------------------------------------------|
+| [bordered](#bordered)              | `bordered`              | ` Boolean ` |         | If declared, applies a border around the trigger slot. |
+| [chevron](#chevron)               | `chevron`               | ` Boolean ` |         | If declared, the dropdown displays a chevron on the right. |
+| [common](#common)                | `common`                | ` Boolean ` |         | If declared, the dropdown will be styled with the common theme. |
+| [disabled](#disabled)              | `disabled`              | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
+| [error](#error)                 | `error`                 | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
+| [fluid](#fluid)                 | `fluid`                 | `Boolean`   |         | Makes the trigger to be full width of its parent container. |
+| [focusShow](#focusShow)             | `focusShow`             | ` Boolean ` |         | If declared, the bib will display when focus is applied to the trigger. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)  | `fullscreenBreakpoint`  | ` String `  |         | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
+| [hoverToggle](#hoverToggle)           | `hoverToggle`           | ` Boolean ` |         | If declared, the trigger will toggle the dropdown on mouseover/mouseout. |
+| [inset](#inset)                 | `inset`                 | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
+| [isBibFullscreen](#isBibFullscreen)       | `isBibFullscreen`       | `boolean`   | false   | If true, the dropdown bib is taking the fullscreen when it's open |
+| [isPopoverVisible](#isPopoverVisible)      | `isPopoverVisible`      | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
+| [matchWidth](#matchWidth)            | `matchWidth`            | ` Boolean ` | false   | If declared, the popover and trigger will be set to the same width. |
+| [noHideOnThisFocusLoss](#noHideOnThisFocusLoss) | `noHideOnThisFocusLoss` | ` Boolean ` | false   | If declared, the dropdown will not hide when moving focus outside the element. |
+| [noToggle](#noToggle)              | `noToggle`              | ` Boolean ` |         | If declared, the trigger will only show the dropdown bib. |
+| [onSlotChange](#onSlotChange)          | `onSlotChange`          |             |         |                                                  |
+| [rounded](#rounded)               | `rounded`               | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
 
 ## Methods
 
-| Method | Type       | Description                         |
-|--------|------------|-------------------------------------|
-| [hide](#hide) | `(): void` | Public method to hide the dropdown. |
-| [show](#show) | `(): void` | Public method to show the dropdown. |
+| Method           | Type       | Description                                      |
+|------------------|------------|--------------------------------------------------|
+| [exposeCssParts](#exposeCssParts) | `(): void` | Exposes CSS parts for styling from parent components. |
+| [hide](#hide)           | `(): void` | Public method to hide the dropdown.              |
+| [show](#show)           | `(): void` | Public method to show the dropdown.              |
 
 ## Events
 
@@ -640,9 +642,9 @@ In cases where it is desired behavior for `auro-dropdown` to only show, not togg
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-#### mobileFullscreenBreakpoint
+#### fullscreenBreakpoint
 
-On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` will switch the dropdown to fullscreen mode. 
+On mobile view, adding the `fullscreenBreakpoint="{breakpoint-token}"` will switch the dropdown to fullscreen mode. 
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customDimensions300.html) -->
@@ -654,7 +656,7 @@ On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` wil
     }
     </style>
   <div style="width: 300px;" aria-label="custom label">
-    <auro-dropdown id="customDropdown300" inset bordered rounded chevron mobileFullscreenBreakpoint="sm">
+    <auro-dropdown id="customDropdown300" inset bordered rounded chevron fullscreenBreakpoint="sm">
       <div>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -686,7 +688,7 @@ On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` wil
   }
   </style>
 <div style="width: 300px;" aria-label="custom label">
-  <auro-dropdown id="customDropdown300" inset bordered rounded chevron mobileFullscreenBreakpoint="sm">
+  <auro-dropdown id="customDropdown300" inset bordered rounded chevron fullscreenBreakpoint="sm">
     <div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -709,9 +711,21 @@ On mobile view, adding the `mobileFullscreenBreakpoint="{breakpoint-token}"` wil
 
 ### Slot Examples
 
-#### trigger & default
+#### default
 
-All examples shown on this page include default and `trigger` slot content.
+All examples shown on this page include default slot content.
+
+#### trigger
+
+Content defined in the `trigger` slot will be rendered in the clickable trigger of the dropdown that is used to display the bib. Focus state visual effects will be disabled on the trigger when it contains a focusable element other than `<auro-input>`.
+
+This slot may contain any static content (e.g. plain text) and/or no more than one of the following elements:
+- `<a>`
+- `<auro-hyperlink>`
+- `<button>`
+- `<auro-button>`
+- `<input>`
+- `<auro-input>`
 
 #### label
 
@@ -1163,13 +1177,13 @@ The component may be restyled using the following code sample and changing the v
 @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
 :host {
-  --ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-dropdown-popover-border-color: transparent;
   --ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-dropdown-trigger-border-color: transparent;
+  --ds-auro-dropdown-trigger-outline-color: transparent;
   --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200});
   --ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});