@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/components/counter/dist/index.js

@@ -150,11 +150,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() {
@@ -1391,22 +1390,17 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-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.
@@ -1416,6 +1410,10 @@ class AuroCounter extends LitElement {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     this.appearance = "default";
     this.defaultSlot = undefined;
     this.disabled = false;
@@ -1484,7 +1482,7 @@ class AuroCounter extends LitElement {
 
       /**
        * Defines whether the component will be on lighter or darker backgrounds.
-       * @property {'default', 'inverse'}
+       * @type {'default' | 'inverse'}
        * @default 'default'
        */
       appearance: {
@@ -1494,11 +1492,10 @@ class AuroCounter extends LitElement {
 
       /**
        * The default slot content.
-       * @type {string}
        * @private
        */
       defaultSlot: {
-        type: String,
+        type: String
       },
 
       /**
@@ -1506,7 +1503,7 @@ class AuroCounter extends LitElement {
        */
       disabled: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -1514,7 +1511,7 @@ class AuroCounter extends LitElement {
        * @private
        */
       disableMax: {
-        type: Boolean,
+        type: Boolean
       },
 
       /**
@@ -1522,7 +1519,7 @@ class AuroCounter extends LitElement {
        * @private
        */
       disableMin: {
-        type: Boolean,
+        type: Boolean
       },
 
       /**
@@ -1531,7 +1528,7 @@ class AuroCounter extends LitElement {
        */
       error: {
         type: String,
-        reflect: false,
+        reflect: false
       },
 
       /**
@@ -1539,7 +1536,7 @@ class AuroCounter extends LitElement {
        */
       max: {
         type: Number,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -1547,11 +1544,11 @@ class AuroCounter extends LitElement {
        */
       min: {
         type: Number,
-        reflect: true,
+        reflect: true
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -1563,21 +1560,21 @@ class AuroCounter extends LitElement {
        */
       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/>
    */
@@ -4908,7 +4905,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202512120003';
+var formkitVersion = '202601271813';
 
 let AuroElement$1 = class AuroElement extends LitElement {
   static get properties() {
@@ -5014,12 +5011,14 @@ let AuroElement$1 = 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.
@@ -5055,7 +5054,7 @@ class AuroDropdown extends AuroElement$1 {
     /** @private */
     this.bibElement = createRef();
 
-    this.privateDefaults();
+    this._intializeDefaults();
   }
 
   /**
@@ -5076,7 +5075,7 @@ class AuroDropdown extends AuroElement$1 {
    * @private
    * @returns {void} Internal defaults.
    */
-  privateDefaults() {
+  _intializeDefaults() {
     this.appearance = 'default';
     this.chevron = false;
     this.disabled = false;
@@ -5197,9 +5196,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: {
@@ -5209,7 +5217,6 @@ class AuroDropdown extends AuroElement$1 {
 
       /**
        * If declared, bib's position will be automatically calculated where to appear.
-       * @default false
        */
       autoPlacement: {
         type: Boolean,
@@ -5218,7 +5225,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,
@@ -5235,11 +5241,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'
       },
 
       /**
@@ -5276,7 +5282,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,
@@ -5331,18 +5337,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
@@ -5363,7 +5379,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,
@@ -5372,7 +5387,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,
@@ -5405,7 +5419,7 @@ class AuroDropdown extends AuroElement$1 {
       },
 
       /**
-       * DEPRECATED - use `appearance` instead.
+       * DEPRECATED - use `appearance="inverse"` instead.
        */
       onDark: {
         type: Boolean,
@@ -5422,7 +5436,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,
@@ -5434,15 +5449,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
       }
     };
   }
@@ -5469,7 +5475,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/>
@@ -6327,13 +6333,8 @@ var colorCss = css`: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 LitElement {
@@ -6472,29 +6473,14 @@ class AuroElement extends LitElement {
   }
 }
 
-/*
-  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.
@@ -6502,7 +6488,6 @@ class AuroElement extends LitElement {
  * @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() {
@@ -6600,7 +6585,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: {
@@ -6637,12 +6622,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,
@@ -6650,12 +6635,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.
@@ -6693,7 +6688,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,
@@ -6702,7 +6696,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,
@@ -6728,12 +6721,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,
@@ -6744,7 +6733,7 @@ class AuroCounterGroup extends AuroElement {
        * The total value of the counters.
        */
       total: {
-        type: Number,
+        type: Number
       },
 
       /**
@@ -7076,7 +7065,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/>
    */