@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/components/dropdown/demo/readme.md

@@ -18,6 +18,7 @@ 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.
@@ -29,7 +30,19 @@ _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 -->
 
+## 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:
+
+* interact with an element to get clarification on content offering
+* provide definition to iconic imagery
+* when interactive help is required
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Getting Started
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
@@ -42,30 +55,7 @@ $ npm i @aurodesignsystem/auro-formkit
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Import Options
-
-#### Automatic Registration
-
-For automatic registration, simply import the component:
-
-```javascript
-// Registers <auro-dropdown> automatically
-import '@aurodesignsystem/auro-formkit/auro-dropdown';
-```
-
-#### Custom Registration
-
-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.
-
-```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');
-```
-
-#### TypeScript Module Resolution
+### TypeScript Module Resolution
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
@@ -78,30 +68,10 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
 ```
 
 This configuration enables proper module resolution for the component's TypeScript files.
-<!-- 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 -->
-
-```html
-<auro-dropdown aria-label="custom label">
-  Lorem ipsum solar
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Design Token CSS Custom Property dependency
-
-<!-- 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).
-
 <!-- 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.
@@ -111,23 +81,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```
 <!-- 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 -->
-
-## 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:
-
-* interact with an element to get clarification on content offering
-* provide definition to iconic imagery
-* when interactive help is required
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Formkit development
+## Formkit Development
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
 <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
@@ -141,4 +95,66 @@ To only develop a single component, use the `--filter` flag:
 ```shell
 npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+
+## Custom Component Registration for Version Management
+
+There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> 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.
+
+When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
+
+However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
+
+You can do this by importing only the component class and using the `register(name)` method with a unique name:
+
+```js
+// Import the class only
+import { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
+
+// Register with a custom name if desired
+AuroDropdown.register('custom-dropdown');
+```
+
+This will create a new custom element `<custom-dropdown>` that behaves exactly like `<auro-dropdown>`, allowing both to coexist on the same page without interfering with each other.
+
+<div class="exampleWrapper exampleWrapper--flex">
+  <custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#customCommon').hide()">
+        Dismiss Dropdown
+      </auro-button>
+    </div>
+    <span slot="helpText">
+      Help text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </custom-dropdown>
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```html
+  <custom-dropdown id="customCommon" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader">
+    <div style="padding: var(--ds-size-150);">
+      Lorem ipsum solar
+      <br />
+      <auro-button onclick="document.querySelector('#customCommon').hide()">
+        Dismiss Dropdown
+      </auro-button>
+    </div>
+    <span slot="helpText">
+      Help text
+    </span>
+    <div slot="trigger">
+      Trigger
+    </div>
+  </custom-dropdown>
+```
+</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/dropdown/dist/auro-dropdown.d.ts

@@ -1,17 +1,36 @@
+/**
+ * The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
+ * @customElement auro-dropdown
+ *
+ * @slot - Default slot for the popover content.
+ * @slot helpText - Defines the content of the helpText.
+ * @slot trigger - Defines the content of the trigger.
+ * @csspart trigger - The trigger content container.
+ * @csspart chevron - The collapsed/expanded state icon container.
+ * @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
+ * @csspart helpText - The helpText content container.
+ * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
+ * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
+ * @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
+ */
 export class AuroDropdown extends AuroElement {
     static get properties(): {
         /**
-         * Defines whether the component will be on lighter or darker backgrounds.
-         * @property {'default', 'inverse'}
-         * @default 'default'
+         * The value for the role attribute of the trigger element.
          */
-        appearance: {
+        a11yRole: {
             type: StringConstructor;
+            attribute: boolean;
             reflect: boolean;
         };
+        /**
+         * Defines whether the component will be on lighter or darker backgrounds.
+         * @type {'default' | 'inverse'}
+         * @default 'default'
+         */
+        appearance: "default" | "inverse";
         /**
          * If declared, bib's position will be automatically calculated where to appear.
-         * @default false
          */
         autoPlacement: {
             type: BooleanConstructor;
@@ -19,7 +38,6 @@ export class AuroDropdown extends AuroElement {
         };
         /**
          * If declared, the dropdown will only show by calling the API .show() public method.
-         * @default false
          */
         disableEventShow: {
             type: BooleanConstructor;
@@ -34,11 +52,11 @@ export class AuroDropdown extends AuroElement {
         };
         /**
          * If declared, the dropdown displays a chevron on the right.
-         * @attr {Boolean} chevron
          */
         chevron: {
             type: BooleanConstructor;
             reflect: boolean;
+            attribute: string;
         };
         /**
          * If declared, the dropdown is not interactive.
@@ -70,7 +88,7 @@ export class AuroDropdown extends AuroElement {
             attribute: boolean;
         };
         /**
-         * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
+         * If declared, will apply error UI to the dropdown.
          */
         error: {
             type: BooleanConstructor;
@@ -118,17 +136,20 @@ export class AuroDropdown extends AuroElement {
             type: BooleanConstructor;
         };
         /**
-         * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-         * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+         * Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
          *
          * When expanded, the dropdown will automatically display in fullscreen mode
          * if the screen size is equal to or smaller than the selected breakpoint.
-         * @default sm
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
+         * @default 'sm'
          */
-        fullscreenBreakpoint: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
+        /**
+         * Sets the layout of the dropdown.
+         * @type {'classic' | 'emphasized' | 'snowflake'}
+         * @default 'classic'
+         */
+        layout: "classic" | "emphasized" | "snowflake";
         /**
          * Defines if the trigger should size based on the parent element providing the border UI.
          * @private
@@ -147,7 +168,6 @@ export class AuroDropdown extends AuroElement {
         /**
          * If declared, the bib will NOT flip to an alternate position
          * when there isn't enough space in the specified `placement`.
-         * @default false
          */
         noFlip: {
             type: BooleanConstructor;
@@ -155,7 +175,6 @@ export class AuroDropdown extends AuroElement {
         };
         /**
          * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-         * @default false
          */
         shift: {
             type: BooleanConstructor;
@@ -184,7 +203,7 @@ export class AuroDropdown extends AuroElement {
             reflect: boolean;
         };
         /**
-         * DEPRECATED - use `appearance` instead.
+         * DEPRECATED - use `appearance="inverse"` instead.
          */
         onDark: {
             type: BooleanConstructor;
@@ -199,31 +218,21 @@ export class AuroDropdown extends AuroElement {
         };
         /**
          * Position where the bib should appear relative to the trigger.
-         * @default bottom-start
+         * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
+         * @default 'bottom-start'
          */
-        placement: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
         /**
          * @private
          */
         tabIndex: {
             type: NumberConstructor;
         };
-        /**
-         * The value for the role attribute of the trigger element.
-         */
-        a11yRole: {
-            type: StringConstructor;
-            attribute: boolean;
-            reflect: boolean;
-        };
     };
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
-     * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
+     * @param {string} [name="auro-dropdown"] - The name of the element that you want to register.
      *
      * @example
      * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>
@@ -256,7 +265,7 @@ export class AuroDropdown extends AuroElement {
      * @private
      * @returns {void} Internal defaults.
      */
-    private privateDefaults;
+    private _intializeDefaults;
     appearance: string;
     chevron: boolean;
     disabled: boolean;

package/components/dropdown/dist/index.js

@@ -3094,7 +3094,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202512120003';
+var formkitVersion = '202601271813';
 
 class AuroElement extends LitElement {
   static get properties() {
@@ -3200,12 +3200,14 @@ class AuroElement extends LitElement {
   }
 }
 
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
-
-/*
+/**
+ * The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
+ * @customElement auro-dropdown
+ *
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
@@ -3241,7 +3243,7 @@ class AuroDropdown extends AuroElement {
     /** @private */
     this.bibElement = createRef();
 
-    this.privateDefaults();
+    this._intializeDefaults();
   }
 
   /**
@@ -3262,7 +3264,7 @@ class AuroDropdown extends AuroElement {
    * @private
    * @returns {void} Internal defaults.
    */
-  privateDefaults() {
+  _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
@@ -3383,9 +3385,18 @@ class AuroDropdown extends AuroElement {
   static get properties() {
     return {
 
+      /**
+       * The value for the role attribute of the trigger element.
+       */
+      a11yRole: {
+        type: String || undefined,
+        attribute: false,
+        reflect: false
+      },
+
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -3395,7 +3406,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, bib's position will be automatically calculated where to appear.
-       * @default false
        */
       autoPlacement: {
         type: Boolean,
@@ -3404,7 +3414,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
-       * @default false
        */
       disableEventShow: {
         type: Boolean,
@@ -3421,11 +3430,11 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, the dropdown displays a chevron on the right.
-       * @attr {Boolean} chevron
        */
       chevron: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'chevron'
       },
 
       /**
@@ -3462,7 +3471,7 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * If declared in combination with not using the `simple` property or `helpText` slot content, will apply red color to both.
+       * If declared, will apply error UI to the dropdown.
        */
       error: {
         type: Boolean,
@@ -3517,18 +3526,28 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
-       * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+       * Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
        *
        * When expanded, the dropdown will automatically display in fullscreen mode
        * if the screen size is equal to or smaller than the selected breakpoint.
-       * @default sm
+       * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
+       * @default 'sm'
        */
       fullscreenBreakpoint: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Sets the layout of the dropdown.
+       * @type {'classic' | 'emphasized' | 'snowflake'}
+       * @default 'classic'
+       */
+      layout: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Defines if the trigger should size based on the parent element providing the border UI.
        * @private
@@ -3549,7 +3568,6 @@ class AuroDropdown extends AuroElement {
       /**
        * If declared, the bib will NOT flip to an alternate position
        * when there isn't enough space in the specified `placement`.
-       * @default false
        */
       noFlip: {
         type: Boolean,
@@ -3558,7 +3576,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-       * @default false
        */
       shift: {
         type: Boolean,
@@ -3591,7 +3608,7 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -3608,7 +3625,8 @@ class AuroDropdown extends AuroElement {
 
       /**
        * Position where the bib should appear relative to the trigger.
-       * @default bottom-start
+       * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
+       * @default 'bottom-start'
        */
       placement: {
         type: String,
@@ -3620,15 +3638,6 @@ class AuroDropdown extends AuroElement {
        */
       tabIndex: {
         type: Number
-      },
-
-      /**
-       * The value for the role attribute of the trigger element.
-       */
-      a11yRole: {
-        type: String || undefined,
-        attribute: false,
-        reflect: false
       }
     };
   }
@@ -3655,7 +3664,7 @@ class AuroDropdown extends AuroElement {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-dropdown"] - The name of element that you want to register to.
+   * @param {string} [name="auro-dropdown"] - The name of the element that you want to register.
    *
    * @example
    * AuroDropdown.register("custom-dropdown") // this will register this element to <custom-dropdown/>