@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/components/dropdown/demo/api.min.js

@@ -1,12 +1,3 @@
-function showExample() {
-  const triggerInput = document.querySelector('#showExampleTriggerInput');
-  const dropdownElem = document.querySelector('#showMethodExample');
-
-  triggerInput.addEventListener('keydown', () => {
-    dropdownElem.show();
-  });
-}
-
 function hideExample() {
   const btn = document.querySelector('#hideExampleBtn');
   const dropdown = document.querySelector('#hideExample');
@@ -16,6 +7,15 @@ function hideExample() {
   });
 }
 
+function showExample() {
+  const triggerInput = document.querySelector('#showExampleTriggerInput');
+  const dropdownElem = document.querySelector('#showMethodExample');
+
+  triggerInput.addEventListener('keydown', () => {
+    dropdownElem.show();
+  });
+}
+
 function inDialogExample() {
   document.querySelector("#dropdown-dialog-opener").addEventListener("click", () => {
     const dialog = document.querySelector("#dropdown-dialog");
@@ -3183,7 +3183,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202512120003';
+var formkitVersion = '202601271813';
 
 class AuroElement extends i {
   static get properties() {
@@ -3289,12 +3289,14 @@ class AuroElement extends i {
   }
 }
 
-// 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.
@@ -3330,7 +3332,7 @@ class AuroDropdown extends AuroElement {
     /** @private */
     this.bibElement = e();
 
-    this.privateDefaults();
+    this._intializeDefaults();
   }
 
   /**
@@ -3351,7 +3353,7 @@ class AuroDropdown extends AuroElement {
    * @private
    * @returns {void} Internal defaults.
    */
-  privateDefaults() {
+  _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
@@ -3472,9 +3474,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: {
@@ -3484,7 +3495,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, bib's position will be automatically calculated where to appear.
-       * @default false
        */
       autoPlacement: {
         type: Boolean,
@@ -3493,7 +3503,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
-       * @default false
        */
       disableEventShow: {
         type: Boolean,
@@ -3510,11 +3519,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'
       },
 
       /**
@@ -3551,7 +3560,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,
@@ -3606,18 +3615,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
@@ -3638,7 +3657,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,
@@ -3647,7 +3665,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,
@@ -3680,7 +3697,7 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -3697,7 +3714,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,
@@ -3709,15 +3727,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
       }
     };
   }
@@ -3744,7 +3753,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/>
@@ -4233,8 +4242,8 @@ AuroDropdown.register();
 function initExamples(initialCount = 0) {
   try {
     // javascript example function calls to be added here upon creation to test examples
-    showExample();
     hideExample();
+    showExample();
     inDialogExample();
   } catch (err) {
     if (initialCount <= 20) {

package/components/dropdown/demo/index.md

@@ -1,13 +1,11 @@
 <!--
-The index.md file is a compiled document. No edits should be made directly to this file.
-
-index.md is created by running `npm run build:markdownDocs`.
-
-This file is generated based on a template fetched from `./docs/partials/index.md`
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
-# Dropdown
-
+# 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.
@@ -15,8 +13,8 @@ The `auro-dropdown` component is a trigger and dropdown element combination inte
 _Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Dropdown use cases
-
+## 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:
@@ -36,9 +34,58 @@ To meet our accessibility requirement, all uses of `auro-dropdown` should have a
 
 Not including one of the above options will result in your UI being non-compliant with Alaska's accessibility policies.
 
-## Layouts
+## Supported Standard and Accessible Interactions
+
+The dropdown can be opened with the following actions:
+
+1. Clicking/tapping on the trigger.
+1. Tabbing to the trigger and using the `enter` or `spacebar` keys.
+1. Programmatically via another control in the UI calling the `show()` method (see api).
+
+The dropdown can be closed with the following actions:
+
+1. Clicking anywhere in the view outside of the dropdown.
+1. Using the `esc` key.
+1. Programmatically via another control in the UI calling the `hide()` method (see api).
 
-### Classic
+## Example(s)
+
+### Basic
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-dropdown aria-label="custom label">
+    Lorem ipsum solar
+    <div slot="trigger">
+      Trigger
+    </div>
+  </auro-dropdown>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
+```html
+<auro-dropdown aria-label="custom label">
+  Lorem ipsum solar
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Layouts
+
+The `auro-dropdown` element supports multiple layouts to fit different design needs. The available layouts are: `classic`, `emphasized`, and `snowflake`. Each layout offers a unique visual style while maintaining the same core functionality.
+
+**Important**: The `emphasized` and `snowflake` layouts are designed specifically for dark backgrounds and should be used with the `appearance="inverse"` attribute.
+
+#### Classic
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
@@ -85,8 +132,8 @@ Not including one of the above options will result in your UI being non-complian
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic-inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/classic/basic-inverseAppearance.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/appearance-inverse.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
   <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
     <div style="padding: var(--ds-size-150);">
       Lorem ipsum solar
@@ -106,8 +153,8 @@ Not including one of the above options will result in your UI being non-complian
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/basic-inverseAppearance.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/classic/basic-inverseAppearance.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/classic/appearance-inverse.html -->
 
 ```html
 <auro-dropdown appearance="inverse" layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
@@ -129,9 +176,7 @@ Not including one of the above options will result in your UI being non-complian
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Emphasized
-
-Only supports `appearance="inverse"`.
+#### Emphasized
 
 <div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
@@ -202,9 +247,7 @@ Only supports `appearance="inverse"`.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Snowflake
-
-Only supports `appearance="inverse"`.
+#### Snowflake
 
 <div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
@@ -237,101 +280,4 @@ Only supports `appearance="inverse"`.
 </auro-dropdown>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Triggering a fullscreen dropdown
-This example shows how to set a dropdown fullscreen breakpoint attribute. Most consuming components use `sm` by default, but
-dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` ensuring that the dropdown will never be fullscreen.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/fullscreen.html -->
-  <h3>Never fullscreen</h3>
-  <auro-dropdown id="common-never-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <h3>Always fullscreen</h3>
-  <auro-dropdown id="common-always-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
-    <div style="padding: var(--ds-size-150);">
-      Lorem ipsum solar
-      <br />
-      <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
-        Dismiss Dropdown
-      </auro-button>
-    </div>
-    <span slot="helpText">
-      Help text
-    </span>
-    <div slot="trigger">
-      Trigger
-    </div>
-  </auro-dropdown>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen.html -->
-
-```html
-<h3>Never fullscreen</h3>
-<auro-dropdown id="common-never-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
-  <div style="padding: var(--ds-size-150);">
-    Lorem ipsum solar
-    <br />
-    <auro-button onclick="document.querySelector('#common-never-fullscreen').hide()">
-      Dismiss Dropdown
-    </auro-button>
-  </div>
-  <span slot="helpText">
-    Help text
-  </span>
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-<h3>Always fullscreen</h3>
-<auro-dropdown id="common-always-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
-  <div style="padding: var(--ds-size-150);">
-    Lorem ipsum solar
-    <br />
-    <auro-button onclick="document.querySelector('#common-always-fullscreen').hide()">
-      Dismiss Dropdown
-    </auro-button>
-  </div>
-  <span slot="helpText">
-    Help text
-  </span>
-  <div slot="trigger">
-    Trigger
-  </div>
-</auro-dropdown>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Supported standard and accessible interactions
-
-The dropdown can be opened with the following actions:
-
-1. Clicking/tapping on the trigger.
-1. Tabbing to the trigger and using the `enter` or `spacebar` keys.
-1. Programmatically via another control in the UI calling the `show()` method (see api).
-
-The dropdown can be closed with the following actions:
-
-1. Clicking anywhere in the view outside of the dropdown.
-1. Using the `esc` key.
-1. Programmatically via another control in the UI calling the `hide()` method (see api).
+</auro-accordion>

package/components/dropdown/demo/index.min.js

@@ -3158,7 +3158,7 @@ class AuroHelpText extends i {
   }
 }
 
-var formkitVersion = '202512120003';
+var formkitVersion = '202601271813';
 
 class AuroElement extends i {
   static get properties() {
@@ -3264,12 +3264,14 @@ class AuroElement extends i {
   }
 }
 
-// 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.
@@ -3305,7 +3307,7 @@ class AuroDropdown extends AuroElement {
     /** @private */
     this.bibElement = e();
 
-    this.privateDefaults();
+    this._intializeDefaults();
   }
 
   /**
@@ -3326,7 +3328,7 @@ class AuroDropdown extends AuroElement {
    * @private
    * @returns {void} Internal defaults.
    */
-  privateDefaults() {
+  _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
@@ -3447,9 +3449,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: {
@@ -3459,7 +3470,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, bib's position will be automatically calculated where to appear.
-       * @default false
        */
       autoPlacement: {
         type: Boolean,
@@ -3468,7 +3478,6 @@ class AuroDropdown extends AuroElement {
 
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
-       * @default false
        */
       disableEventShow: {
         type: Boolean,
@@ -3485,11 +3494,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'
       },
 
       /**
@@ -3526,7 +3535,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,
@@ -3581,18 +3590,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
@@ -3613,7 +3632,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,
@@ -3622,7 +3640,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,
@@ -3655,7 +3672,7 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -3672,7 +3689,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,
@@ -3684,15 +3702,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
       }
     };
   }
@@ -3719,7 +3728,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/>

package/components/dropdown/demo/readme.html

@@ -48,10 +48,9 @@
           Prism.highlightAll();
         })
     </script>
-    <script type="module">
-      import { initExamples } from "./index.min.js";
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
 
-      initExamples();
-    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
   </body>
 </html>