@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

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

@@ -196,11 +196,10 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
   }
 };
 
-// Copyright (c) 2022 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.
 
 
-// build the component class
 class AuroCounterButton extends T$1 {
 
   constructor() {
@@ -1437,22 +1436,17 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202512120003';
+var formkitVersion$1 = '202601271813';
 
-/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 
 /**
- * Auro Counter is a customizable counter component for user interface interactions.
+ * The `auro-counter` element provides a flexible counter interface with increment and decrement buttons, supporting optional sub-labels and disabled states.
+ * @customElement auro-counter
  *
- * This web component provides a flexible counter interface with increment and decrement buttons,
- * supporting optional sub-labels and disabled states.
- *
- * @element auro-counter
- * @extends LitElement
- * @slot - Main label content for the counter.
+ * @slot default - Main label content for the counter.
  * @slot ariaLabel.minus - Accessible label for the decrement button.
  * @slot ariaLabel.plus - Accessible label for the increment button.
  * @slot helpText - Help text content for the counter.
@@ -1462,6 +1456,10 @@ class AuroCounter extends i$2 {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     this.appearance = "default";
     this.defaultSlot = undefined;
     this.disabled = false;
@@ -1530,7 +1528,7 @@ class AuroCounter extends i$2 {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -1540,11 +1538,10 @@ class AuroCounter extends i$2 {
 
       /**
        * The default slot content.
-       * @type {string}
        * @private
        */
       defaultSlot: {
-        type: String,
+        type: String
       },
 
       /**
@@ -1552,7 +1549,7 @@ class AuroCounter extends i$2 {
        */
       disabled: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -1560,7 +1557,7 @@ class AuroCounter extends i$2 {
        * @private
        */
       disableMax: {
-        type: Boolean,
+        type: Boolean
       },
 
       /**
@@ -1568,7 +1565,7 @@ class AuroCounter extends i$2 {
        * @private
        */
       disableMin: {
-        type: Boolean,
+        type: Boolean
       },
 
       /**
@@ -1577,7 +1574,7 @@ class AuroCounter extends i$2 {
        */
       error: {
         type: String,
-        reflect: false,
+        reflect: false
       },
 
       /**
@@ -1585,7 +1582,7 @@ class AuroCounter extends i$2 {
        */
       max: {
         type: Number,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -1593,11 +1590,11 @@ class AuroCounter extends i$2 {
        */
       min: {
         type: Number,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -1609,21 +1606,21 @@ class AuroCounter extends i$2 {
        */
       validity: {
         type: String,
-        reflect: true,
+        reflect: true
       },
 
       /**
        * The current value of the counter.
        */
       value: {
-        type: Number,
+        type: Number
       },
     };
   }
 
   /**
    * Registers the custom element with the browser.
-   * @param {string} [name="auro-counter"] - Custom element name to register.
+   * @param {string} [name="auro-counter"] - The name of the element that you want to register.
    * @example
    * AuroCounter.register("custom-counter") // registers <custom-counter/>
    */
@@ -4972,7 +4969,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202512120003';
+var formkitVersion = '202601271813';
 
 let AuroElement$1 = class AuroElement extends i$2 {
   static get properties() {
@@ -5078,12 +5075,14 @@ let AuroElement$1 = class AuroElement extends i$2 {
   }
 };
 
-// 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.
@@ -5119,7 +5118,7 @@ class AuroDropdown extends AuroElement$1 {
     /** @private */
     this.bibElement = e();
 
-    this.privateDefaults();
+    this._intializeDefaults();
   }
 
   /**
@@ -5140,7 +5139,7 @@ class AuroDropdown extends AuroElement$1 {
    * @private
    * @returns {void} Internal defaults.
    */
-  privateDefaults() {
+  _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
@@ -5261,9 +5260,18 @@ class AuroDropdown extends AuroElement$1 {
   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: {
@@ -5273,7 +5281,6 @@ class AuroDropdown extends AuroElement$1 {
 
       /**
        * If declared, bib's position will be automatically calculated where to appear.
-       * @default false
        */
       autoPlacement: {
         type: Boolean,
@@ -5282,7 +5289,6 @@ class AuroDropdown extends AuroElement$1 {
 
       /**
        * If declared, the dropdown will only show by calling the API .show() public method.
-       * @default false
        */
       disableEventShow: {
         type: Boolean,
@@ -5299,11 +5305,11 @@ class AuroDropdown extends AuroElement$1 {
 
       /**
        * If declared, the dropdown displays a chevron on the right.
-       * @attr {Boolean} chevron
        */
       chevron: {
         type: Boolean,
-        reflect: true
+        reflect: true,
+        attribute: 'chevron'
       },
 
       /**
@@ -5340,7 +5346,7 @@ class AuroDropdown extends AuroElement$1 {
       },
 
       /**
-       * 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,
@@ -5395,18 +5401,28 @@ class AuroDropdown extends AuroElement$1 {
       },
 
       /**
-       * 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
@@ -5427,7 +5443,6 @@ class AuroDropdown extends AuroElement$1 {
       /**
        * 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,
@@ -5436,7 +5451,6 @@ class AuroDropdown extends AuroElement$1 {
 
       /**
        * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-       * @default false
        */
       shift: {
         type: Boolean,
@@ -5469,7 +5483,7 @@ class AuroDropdown extends AuroElement$1 {
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -5486,7 +5500,8 @@ class AuroDropdown extends AuroElement$1 {
 
       /**
        * 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,
@@ -5498,15 +5513,6 @@ class AuroDropdown extends AuroElement$1 {
        */
       tabIndex: {
         type: Number
-      },
-
-      /**
-       * The value for the role attribute of the trigger element.
-       */
-      a11yRole: {
-        type: String || undefined,
-        attribute: false,
-        reflect: false
       }
     };
   }
@@ -5533,7 +5539,7 @@ class AuroDropdown extends AuroElement$1 {
 
   /**
    * 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/>
@@ -6391,13 +6397,8 @@ var colorCss = i$5`:host ::slotted(*:not(:first-child)){border-color:var(--ds-au
 
 
 /**
- * Auro Counter Wrapper is a group of counter components.
- *
- * This web component provides a flexible interface for grouping multiple counters, supporting
- * validation, custom validity messages, and disabled states based on the group's value.
+ * Wrapper element for auro-counter elements in an application to provide layout structure for multiple counters.
  *
- * @element auro-counter-group
- * @extends LitElement
  * @slot Default - Slot for counter elements.
  */
 class AuroCounterWrapper extends i$2 {
@@ -6536,29 +6537,14 @@ class AuroElement extends i$2 {
   }
 }
 
-/*
-  eslint-disable
-  lit/no-invalid-html,
-  lit/binding-positions,
-  max-lines,
-  no-underscore-dangle,
-  arrow-parens,
-  no-confusing-arrow,
-  curly,
-  dot-location,
-  no-inline-comments,
-  line-comment-position,
+/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly, dot-location, no-inline-comments, line-comment-position,
 */
 
 
 /**
- * Auro Counter Group is a group of counter components.
+ * The `auro-counter-group` element provides a flexible interface for grouping multiple counters, supporting validation, custom validity messages, and disabled states based on the group's value.
+ * @customElement auro-counter-group
  *
- * This web component provides a flexible interface for grouping multiple counters, supporting
- * validation, custom validity messages, and disabled states based on the group's value.
- *
- * @element auro-counter-group
- * @extends LitElement
  * @slot default - Slot for counter elements.
  * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
  * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
@@ -6566,7 +6552,6 @@ class AuroElement extends i$2 {
  * @slot label - Dropdown label content. Only used when `isDropdown` is true.
  * @slot valueText - Dropdown value text display. Only used when `isDropdown` is true.
  * @slot helpText - Dropdown help text content. Only used when `isDropdown` is true.
- * @property {'classic'|'snowflake'} layout - Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'.
  */
 class AuroCounterGroup extends AuroElement {
   constructor() {
@@ -6664,7 +6649,7 @@ class AuroCounterGroup extends AuroElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -6701,12 +6686,12 @@ class AuroCounterGroup 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,
@@ -6714,12 +6699,22 @@ class AuroCounterGroup extends AuroElement {
       },
 
       /**
-       * Indicates if the counter group is displayed as a dropdown.
+       * If true, the counter group is displayed as a dropdown.
        */
       isDropdown: {
         type: Boolean
       },
 
+      /**
+       * Determines the layout style of the counter group when it is a dropdown.
+       * @type {'classic' | 'snowflake'}
+       * @default 'classic'
+       */
+      layout: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * If declared, the dropdown will expand to the width of its parent container.
        * Otherwise, the dropdown width will be determined by its content.
@@ -6757,7 +6752,6 @@ class AuroCounterGroup 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,
@@ -6766,7 +6760,6 @@ class AuroCounterGroup extends AuroElement {
 
       /**
        * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-       * @default false
        */
       shift: {
         type: Boolean,
@@ -6792,12 +6785,8 @@ class AuroCounterGroup extends AuroElement {
 
       /**
        * Position where the bib should appear relative to the trigger.
-       * Accepted values:
-       * "top" | "right" | "bottom" | "left" |
-       * "bottom-start" | "top-start" | "top-end" |
-       * "right-start" | "right-end" | "bottom-end" |
-       * "left-start" | "left-end".
-       * @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,
@@ -6808,7 +6797,7 @@ class AuroCounterGroup extends AuroElement {
        * The total value of the counters.
        */
       total: {
-        type: Number,
+        type: Number
       },
 
       /**
@@ -7140,7 +7129,7 @@ class AuroCounterGroup extends AuroElement {
 
   /**
    * Registers the custom element with the browser.
-   * @param {string} [name="auro-counter-group"] - Custom element name to register.
+   * @param {string} [name="auro-counter-group"] - The name of the element that you want to register.
    * @example
    * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
    */
@@ -7366,28 +7355,11 @@ class AuroCounterGroup extends AuroElement {
 AuroCounter.register();
 AuroCounterGroup.register();
 
-function dropdownCounterExample() {
-  const elem = document.querySelector('#dropdownCouterExample');
-  const resetBtn = elem.querySelector("#dropdownCounterExampleResetbutton") || elem.dropdown.bib.querySelector("#dropdownCounterExampleResetbutton");
-  const saveBtn = elem.querySelector("#dropdownCounterExampleSavebutton") || elem.dropdown.bib.querySelector("#dropdownCounterExampleSavebutton");
-
-  resetBtn.addEventListener('click', () => {
-    elem.counters.forEach(counter => {
-      counter.value = 0;
-    });
-  });
-
-  saveBtn.addEventListener('click', () => {
-    elem.dropdown.hide();
-  });
-}
-
 function eventCounterExample() {
   const counter = document.getElementById('eventExample');
-  const output = document.getElementById('eventOutput');
 
   counter.addEventListener('input', (event) => {
-    output.textContent = `Values updated: ${JSON.stringify(event.detail)}`;
+    console.log(`Values updated: ${JSON.stringify(event.detail)}`);
   });
 }
 
@@ -7396,7 +7368,7 @@ function eventCounterExample() {
 function initExamples(initialCount = 0) {
   try {
     // javascript example function calls to be added here upon creation to test examples
-    dropdownCounterExample();
+    // dropdownCounterExample();
     eventCounterExample();
 
   } catch (err) {

package/components/counter/demo/index.html

@@ -55,7 +55,5 @@
     </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>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
   </body>
 </html>