@aurodesignsystem/auro-formkit 2.0.0-beta.15 → 2.0.0-beta.17

package/components/counter/dist/styles/counter-wrapper-color-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=counter-wrapper-color-css.d.ts.map

package/components/counter/dist/styles/counter-wrapper-color-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter-wrapper-color-css.d.ts","sourceRoot":"","sources":["../../src/styles/counter-wrapper-color-css.js"],"names":[],"mappings":""}

package/components/counter/dist/styles/{counter-group-color-css.d.ts → counter-wrapper-css.d.ts}

@@ -1,3 +1,3 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=counter-group-color-css.d.ts.map
+//# sourceMappingURL=counter-wrapper-css.d.ts.map

package/components/counter/dist/styles/counter-wrapper-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter-wrapper-css.d.ts","sourceRoot":"","sources":["../../src/styles/counter-wrapper-css.js"],"names":[],"mappings":""}

package/components/counter/src/auro-counter-group.js

@@ -1,3 +1,5 @@
+/* eslint-disable lit/no-invalid-html, lit/binding-positions */
+
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -5,11 +7,18 @@
 
 import { html } from "lit/static-html.js";
 import { LitElement } from "lit";
+
 import styleCss from "./styles/counter-group-css.js";
-import colorCss from "./styles/counter-group-color-css.js";
+
 import AuroLibraryRuntimeUtils from "@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs";
 import AuroFormValidation from "@auro-formkit/form-validation";
 
+import { AuroDependencyVersioning } from "@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs";
+import { AuroDropdown } from "@aurodesignsystem/auro-dropdown";
+import dropdownVersion from "./dropdownVersion.js";
+
+import './auro-counter-wrapper.js';
+
 /**
  * Auro Counter Group is a group of counter components.
  *
@@ -24,6 +33,8 @@ export class AuroCounterGroup extends LitElement {
   constructor() {
     super();
 
+    this.isDropdown = false;
+
     this.max = undefined;
     this.min = undefined;
     this.total = undefined;
@@ -39,18 +50,35 @@ export class AuroCounterGroup extends LitElement {
      * @private
      */
     this.validation = new AuroFormValidation();
+
+    /**
+     * Generate unique names for dependency components.
+     * @private
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * Dynamically generated dropdown tag.
+     * @private
+     * @type {string}
+     */
+    this.dropdownTag = versioning.generateTag("auro-dropdown", dropdownVersion, AuroDropdown);
   }
 
   static get styles() {
-    return [
-      colorCss,
-      styleCss
-    ];
+    return [styleCss];
   }
 
   static get properties() {
     return {
 
+      /**
+       * Indicates if the counter group is displayed as a dropdown.
+       */
+      isDropdown: {
+        type: Boolean
+      },
+
       /**
        * The maximum value allowed for the whole group of counters.
        */
@@ -67,13 +95,6 @@ export class AuroCounterGroup extends LitElement {
         reflect: true,
       },
 
-      /**
-       * The total value of the counters.
-       */
-      total: {
-        type: Number,
-      },
-
       /**
        * Reflects the validity state.
        */
@@ -82,12 +103,19 @@ export class AuroCounterGroup extends LitElement {
         reflect: true,
       },
 
+      /**
+       * The total value of the counters.
+       */
+      total: {
+        type: Number,
+      },
+
       /**
        * The current individual values of the nested counters.
        */
       value: {
         type: Object,
-      },
+      }
     };
   }
 
@@ -112,12 +140,32 @@ export class AuroCounterGroup extends LitElement {
 
   /**
    * Attaches input event listeners to all auro-counter elements within the component.
-   * This method selects all `auro-counter` and `[auto-counter]` elements and adds an `input` event listener to each.
+   * This method selects all `auro-counter` and `[auro-counter]` elements and adds an `input` event listener to each.
    * The listener calls `this.updateValue()` whenever the value of a counter changes.
    * @private
    */
   configureCounters() {
-    this.counters = this.querySelectorAll("auro-counter, [auto-counter]");
+    this.counters = this.querySelectorAll("auro-counter, [auro-counter]");
+    this.counters.forEach((counter) => {
+      counter.addEventListener("input", () => this.updateValue());
+    });
+  }
+
+  /**
+   * Configures the dropdown counters by selecting all `auro-counter` elements
+   * and appending them to the `auro-counter-wrapper` element within the shadow DOM.
+   * Adds an event listener to each counter to update the value on input.
+   * @private
+   */
+  configureDropdownCounters() {
+    const counterWrapper = this.shadowRoot.querySelector('auro-counter-wrapper');
+    this.counters = this.querySelectorAll("auro-counter, [auro-counter]");
+
+    this.counters.forEach((counter) => {
+      counterWrapper.append(counter);
+    });
+
+    this.counters = counterWrapper.querySelectorAll("auro-counter, [auro-counter]");
     this.counters.forEach((counter) => {
       counter.addEventListener("input", () => this.updateValue());
     });
@@ -188,9 +236,14 @@ export class AuroCounterGroup extends LitElement {
   // function that renders the HTML and CSS into the scope of the component
   render() {
     return html`
-      <div class="counters">
-        <slot @slotchange=${() => this.configureCounters()}></slot>
-      </div>
-    `;
+    ${this.isDropdown
+      ? html`<${this.dropdownTag} common chevron>
+        <div slot="trigger">${this.total}<slot name="placeholder"></slot></div>
+        <auro-counter-wrapper isInDropdown>
+        </auro-counter-wrapper>
+      </${this.dropdownTag}>
+      <slot @slotchange=${() => this.configureDropdownCounters()}></slot>`
+      : html`<auro-counter-wrapper><slot @slotchange=${() => this.configureCounters()}></slot></auro-counter-wrapper>`
+    }`;
   }
 }

package/components/counter/src/auro-counter-wrapper.js

@@ -0,0 +1,54 @@
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { html } from "lit/static-html.js";
+import { LitElement } from "lit";
+
+import styleCss from "./styles/counter-wrapper-css.js";
+import colorCss from "./styles/counter-wrapper-color-css.js";
+
+import AuroLibraryRuntimeUtils from "@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs";
+
+/**
+ * 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.
+ *
+ * @element auro-counter-group
+ * @extends LitElement
+ * @slot Default - Slot for counter elements.
+ */
+export class AuroCounterWrapper extends LitElement {
+
+  static get styles() {
+    return [
+      colorCss,
+      styleCss
+    ];
+  }
+
+  /**
+   * Registers the custom element with the browser.
+   * @param {string} [name="auro-counter-wrapper"] - Custom element name to register.
+   * @example
+   * AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
+   */
+  static register(name = "auro-counter-wrapper") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCounterWrapper);
+  }
+
+  // function that renders the HTML and CSS into the scope of the component
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+/* istanbul ignore else */
+// define the name of the custom component
+if (!customElements.get("auro-counter-wrapper")) {
+  customElements.define("auro-counter-wrapper", AuroCounterWrapper);
+}
+

package/components/counter/src/styles/counter-group-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{position:relative;display:block}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(*:not(:first-child)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}`;
+export default css`:host{position:relative;display:block}[slot=trigger]{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}`;

package/components/counter/src/styles/counter-group.css

@@ -4,13 +4,9 @@
   display: block;
 }
 
-.counters {
+[slot=trigger] {
   display: flex;
-  flex-direction: column;
-  gap: var(--ds-size-300, 1.5rem);
-}
-.counters ::slotted(*:not(:first-child)) {
-  padding-top: var(--ds-size-300, 1.5rem);
-  border-top-width: 1px;
-  border-top-style: solid;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ds-size-100, 0.5rem);
 }

package/components/counter/src/styles/counter-group.scss

@@ -17,14 +17,10 @@
   display: block;
 }
 
-.counters {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ds-size-300, $ds-size-300);
-
-  ::slotted(*:not(:first-child)) {
-    padding-top: var(--ds-size-300, $ds-size-300);
-    border-top-width: 1px;
-    border-top-style: solid;
-  }
+[slot="trigger"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ds-size-100, $ds-size-100);
+    
 }

package/components/counter/src/styles/counter-wrapper-color-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host ::slotted(*:not(:first-child)){border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12))}`;

package/components/counter/src/styles/{counter-group-color.css → counter-wrapper-color.css}

@@ -1,4 +1,4 @@
 /* stylelint-disable no-descending-specificity, selector-max-attribute */
-.counters ::slotted(*:not(:first-child)) {
+:host ::slotted(*:not(:first-child)) {
   border-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));
 }

package/components/counter/src/styles/{counter-group-color.scss → counter-wrapper-color.scss}

@@ -12,7 +12,7 @@
 
 /* stylelint-disable no-descending-specificity, selector-max-attribute */
 
-.counters {
+:host {
   ::slotted(*:not(:first-child)) {
     border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
   }

package/components/counter/src/styles/counter-wrapper-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}:host ::slotted(*:not(:first-child)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}:host([isindropdown]){padding:var(--ds-size-300, 1.5rem)}`;

package/components/counter/src/styles/counter-wrapper.css

@@ -0,0 +1,15 @@
+/* stylelint-disable no-descending-specificity, selector-max-attribute, selector-nest-combinators */
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-300, 1.5rem);
+}
+:host ::slotted(*:not(:first-child)) {
+  padding-top: var(--ds-size-300, 1.5rem);
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+
+:host([isindropdown]) {
+  padding: var(--ds-size-300, 1.5rem);
+}

package/components/counter/src/styles/counter-wrapper.scss

@@ -0,0 +1,29 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license.
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// layout styles - define any layout specifications for UI that is contained WITHIN the component
+// never define layout that would cause effect on element outside the scope of this component
+
+// Support for fallback values
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+
+/* stylelint-disable no-descending-specificity, selector-max-attribute, selector-nest-combinators */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-size-300, $ds-size-300);
+
+  ::slotted(*:not(:first-child)) {
+    padding-top: var(--ds-size-300, $ds-size-300);
+    border-top-width: 1px;
+    border-top-style: solid;
+  }
+}
+
+:host([isindropdown]) {
+  padding: var(--ds-size-300, $ds-size-300);
+}

package/components/datepicker/.turbo/turbo-build.log

@@ -373,13 +373,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 7.4s
+created dist in 7.7s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 3.5s
+created ./demo/ in 3.6s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 3.3s
+created ./demo/ in 3.4s
 
 > @aurodesignsystem/auro-datepicker@3.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component datepicker

package/components/datepicker/README.md

@@ -93,10 +93,10 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/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/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.14/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.14/dist/auro-input__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.14/dist/auro-popover__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.14/dist/auro-datepicker__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.16/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.16/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-popover@2.0.0-beta.16/dist/auro-popover__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-datepicker@2.0.0-beta.16/dist/auro-datepicker__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-datepicker use cases

package/components/dropdown/.turbo/turbo-build.log

@@ -90,13 +90,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.1s
+created dist in 1.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1.1s
+created ./demo/ in 801ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 652ms
 
 > @aurodesignsystem/auro-dropdown@3.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component dropdown

package/components/dropdown/.turbo/turbo-bundler.log

@@ -7,7 +7,7 @@
 created dist in 1.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 899ms
+created ./demo/ in 814ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 669ms
+created ./demo/ in 806ms

package/components/dropdown/README.md

@@ -97,7 +97,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/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/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.14/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.16/dist/auro-dropdown__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-dropdown use cases

package/components/form/.turbo/turbo-build.log

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 355ms
+created dist in 149ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 198ms
+created ./demo/ in 77ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 183ms
+created ./demo/ in 70ms
 
 > @aurodesignsystem/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form

package/components/form/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 533ms
+created dist in 674ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 265ms
+created ./demo/ in 389ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 276ms
+created ./demo/ in 380ms

package/components/form/README.md

@@ -75,10 +75,11 @@ import "@aurodesignsystem/auro-formkit/auro-form";
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-form>Hello World</auro-form>
-<auro-input>
-    <span slot="label">Hello World</span>
-</auro-input>
+<auro-form>
+  <auro-input>
+      <span slot="label">Hello World</span>
+  </auro-input>
+</auro-form>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -97,7 +98,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/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/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.14/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.16/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases
@@ -119,10 +120,11 @@ The `<auro-form>` element should be used in situations where users may:
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-form>Hello World</auro-form>
-<auro-input>
-    <span slot="label">Hello World</span>
-</auro-input>
+<auro-form>
+  <auro-input>
+      <span slot="label">Hello World</span>
+  </auro-input>
+</auro-form>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->