@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.51

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

@@ -4,8 +4,8 @@ The README.md file is a compiled document. No edits should be made directly to t
 README.md is created by running `npm run build:docs`.
 
 This file is generated based on a template fetched from
-`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
-and copied to `./componentDocs/README.md` each time the the docs are compiled.
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
 
 The following sections are editable by making changes to the following files:
 
@@ -17,7 +17,7 @@ The following sections are editable by making changes to the following files:
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
 -->
 
-# Formkit/auro-dropdown
+# Dropdown
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
@@ -39,18 +39,12 @@ For the most up to date information on [UI development browser support](https://
 
 ## Install
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
-[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/-formkit/-formkit/auro-dropdown/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/-formkit/-formkit/auro-dropdown/actions/workflows/testPublish.yml)
-[![See it on NPM!](https://img.shields.io/npm/v/@auro-formkit/-formkit/-formkit/auro-dropdown?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@auro-formkit/-formkit/-formkit/auro-dropdown)
-[![License](https://img.shields.io/npm/l/@auro-formkit/-formkit/-formkit/auro-dropdown?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
-![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
 ```shell
-$ npm i @auro-formkit/-formkit/-formkit/auro-dropdown
+$ npm i @aurodesignsystem/auro-formkit
 ```
-
-Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
-
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ### Design Token CSS Custom Property dependency
@@ -63,17 +57,18 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 ### Define dependency in project component
 
 <!-- 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 `<-formkit/-formkit/auro-dropdown>` component.
+Defining the component dependency within each component that is using the `<auro-dropdown>` component.
 
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
 
 ```js
-import "@auro-formkit/-formkit/-formkit/auro-dropdown";
+import "@aurodesignsystem/auro-formkit/auro-dropdown";
 ```
-
 <!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
+
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
@@ -90,7 +85,7 @@ import "@auro-formkit/-formkit/-formkit/auro-dropdown";
 ## Install bundled assets from CDN
 
 <!-- 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 -- `-formkit/-formkit/auro-dropdown__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+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.
 
 **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.
 
@@ -98,17 +93,14 @@ In cases where the project is not able to process JS assets, there are pre-proce
 
 ### Bundle example code
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
+<!-- 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.13.0/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/@auro-formkit/-formkit/-formkit/auro-dropdown@3.0.0/dist/-formkit/-formkit/auro-dropdown__bundled.js" type="module"></script>
-```
-
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.50/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## auro-formkit/auro-dropdown use cases
+## 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 -->
@@ -121,7 +113,7 @@ The `auro-dropdown` element should be used in situations where users may:
 
 ## API Code Examples
 
-### Default auro-formkit/auro-dropdown
+### Default auro-dropdown
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -176,7 +168,7 @@ The custom element API file is generated in the build and committed back to the
 ### 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\-formkit/-formkit/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.
+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 -->
 

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});