@aurodesignsystem/auro-formkit 2.0.0-beta.4 → 2.0.0-beta.41

package/components/{input/dist/styles/helpText-css.d.ts → counter/dist/styles/color-css.d.ts}

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

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

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

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

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

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

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

package/components/counter/dist/styles/counter-button-css.d.ts

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

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

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

package/components/counter/dist/styles/counter-button-tokens-css.d.ts

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

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

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

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-wrapper-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# 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/dist/styles/tokens-css.d.ts

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

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

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

package/components/counter/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-counter",
+  "name": "@aurodesignsystem/auro-counter",
   "version": "1.0.0",
   "description": "auro-counter HTML custom element",
   "repository": {
@@ -12,18 +12,22 @@
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "dependencies": {
+    "@alaskaairux/icons": "^4.44.1",
+    "@aurodesignsystem/auro-button": "^8.2.1",
+    "@aurodesignsystem/auro-dropdown": "*",
     "chalk": "^5.2.0",
     "lit": "^3.2.1"
   },
   "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2"
   },
   "devDependencies": {
     "@auro-formkit/build-tools": "*",
     "@auro-formkit/config": "*",
     "@auro-formkit/typescript": "*",
-    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@auro-formkit/utils": "*",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "postcss-selector-replace": "^1.0.2",
@@ -33,18 +37,23 @@
     "web-component-analyzer": "^2.0.0"
   },
   "scripts": {
-    "build": "run-s build:sass bundler types",
+    "build": "run-s sass bundler build:docs types",
+    "build:version": "node ./scripts/version.mjs",
     "build:sass": "sass --no-source-map --load-path=../../node_modules \"./src/styles/:./src/styles/\"",
     "build:watch": "nodemon -e scss,js --watch src --ignore \"*.css\" --ignore \"*-css.js\" --exec \"npm run build\"",
+    "build:docs": "wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component counter",
     "bundler": "rollup -c node:@auro-formkit/config/rollup",
+    "sass": "run-s build:sass sass:render",
     "clean": "rm -rf dist build",
     "dev": "concurrently \"npm run build:watch\" \"npm run serve\"",
     "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
     "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
     "serve": "web-dev-server --open demo/ --node-resolve --watch",
+    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage",
+    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\"  --watch",
     "types": "tsc --project tsconfig.json",
     "lint": "npm-run-all scssLint esLint",
-    "scssLint": "stylelint \"./src/**/*.scss\"",
+    "scssLint": "stylelint \"./src/**/*.scss\" --fix",
     "esLint": "eslint \"./src/**/*.js\""
   }
 }

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

@@ -0,0 +1,42 @@
+// Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import styleButtonTokenCss from "./styles/counter-button-tokens-css.js";
+import styleButtonColorCss from "./styles/counter-button-color-css.js";
+import styleButtonCss from "./styles/counter-button-css.js";
+
+import { AuroButton } from "@aurodesignsystem/auro-button/src/auro-button.js";
+
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+// build the component class
+export class AuroCounterButton extends AuroButton {
+
+  static get styles() {
+    return [
+      styleButtonCss,
+      styleButtonColorCss,
+      styleButtonTokenCss
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-counter-button"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroCounterButton.register("custom-counter-button") // this will register this element to <custom-counter-button/>
+   *
+   */
+  static register(name = "auro-counter-button") {
+    RuntimeUtils.default.prototype.registerComponent(name, AuroCounterButton);
+  }
+}
+
+/* istanbul ignore else */
+// define the name of the custom component
+if (!customElements.get("auro-counter-button")) {
+  customElements.define("auro-counter-button", AuroCounterButton);
+}

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

@@ -1,4 +1,6 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, prefer-destructuring, no-underscore-dangle */
+
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
 // ---------------------------------------------------------------------
@@ -8,7 +10,67 @@ import { LitElement } from "lit";
 
 import styleCss from "./styles/counter-group-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.
+ *
+ * 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 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.
+ */
 export class AuroCounterGroup extends LitElement {
+  constructor() {
+    super();
+
+    this.isDropdown = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.total = undefined;
+    this.validity = undefined;
+    this.value = undefined;
+
+    /**
+     * @private
+     */
+    this.counters = undefined;
+
+    /**
+     * @private
+     */
+    this.dropdown = undefined;
+
+    /**
+     * @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 [styleCss];
@@ -16,33 +78,256 @@ export class AuroCounterGroup extends LitElement {
 
   static get properties() {
     return {
-      common: {
-        type: Boolean,
-        reflect: true
+
+      /**
+       * Indicates if the counter group is displayed as a dropdown.
+       */
+      isDropdown: {
+        type: Boolean
+      },
+
+      /**
+       * The maximum value allowed for the whole group of counters.
+       */
+      max: {
+        type: Number,
+        reflect: true,
+      },
+
+      /**
+       * The minimum value allowed for the whole group of counters.
+       */
+      min: {
+        type: Number,
+        reflect: true,
+      },
+
+      /**
+       * Reflects the validity state.
+       */
+      validity: {
+        type: String,
+        reflect: true,
       },
-      inset: {
-        type: Boolean,
-        reflect: true
+
+      /**
+       * The total value of the counters.
+       */
+      total: {
+        type: Number,
       },
-      rounded: {
-        type: Boolean,
-        reflect: true
+
+      /**
+       * The current individual values of the nested counters.
+       */
+      value: {
+        type: Object,
+      }
+    };
+  }
+
+  /**
+   * Traps keyboard tab interactions within dropdown when open.
+   * @private
+   * @param {KeyboardEvent} event - The keyboard event.
+   * @param {NodeList} counters - The list of counter elements.
+   */
+  trapKeyboard(event, counters) {
+    if (!this.dropdown.isPopoverVisible) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    const firstFocusable = counters[0];
+    const lastFocusable = counters[counters.length - 1];
+
+    if (event.key === 'Enter') {
+      firstFocusable.focus();
+    }
+
+    if (event.key === 'Escape') {
+      this.dropdown.hide();
+    }
+
+    if (event.key === 'Tab' && event.target.offsetParent.id === 'bib') {
+      this.dropdown.noHideOnThisFocusLoss = true;
+
+      const currentIndex = Array.from(counters).indexOf(document.activeElement);
+
+      if (event.shiftKey) {
+        if (currentIndex === 0) {
+          lastFocusable.focus();
+        } else {
+          counters[currentIndex - 1].focus();
+        }
+      } else if (currentIndex === counters.length - 1) {
+        firstFocusable.focus();
+      } else {
+        counters[currentIndex + 1].focus();
       }
+
+    }
+  }
+
+  /**
+   * Dynamically disables increment/decrement buttons on a counter based on group value.
+   * This method checks the total aggregated value against the group's min and max properties.
+   * If the total value is at or below the minimum, the counter's decrement button is disabled; if at or above the maximum, the increment button is disabled.
+   *
+   * @param {HTMLElement} counter - The counter element to potentially disable.
+   * @private
+   */
+  manageDisabled(counter) {
+    counter.disableMax = false;
+    counter.disableMin = false;
+
+    if (this.total <= this.min) {
+      counter.disableMin = true;
+    } else if (this.total >= this.max) {
+      counter.disableMax = true;
+    }
+  }
+
+  /**
+   * Attaches input event listeners to all auro-counter elements within the component.
+   * 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, [auro-counter]");
+    this.counters.forEach((counter) => {
+      counter.addEventListener("input", () => this.updateValue());
+    });
+  }
+
+  /**
+   * Configures the dropdown counters by selecting all `auro-counter` elements,
+   * appending them to the `auro-counter-wrapper` element within the shadow DOM,
+   * and setting up keyboard navigation and input event listeners.
+   * @private
+   */
+  configureDropdownCounters() {
+    this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
+    this.dropdown.addEventListener('keydown', (event) => this.trapKeyboard(event, this.counters, 'dropdown'));
+    // notify dropdown to reconfigure as the trigger text is updated
+    this.dropdown.requestUpdate();
+
+    this.addEventListener('auroDropdown-toggled', () => {
+      if (!this.dropdown.isPopoverVisible) {
+        this.dropdown.focus();
+      }
+    });
+
+    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]");
+
+    if (this.keydownHandler) {
+      counterWrapper.removeEventListener('keydown', this.keydownHandler);
+    }
+    this.keydownHandler = (keydownEvent) => {
+      this.trapKeyboard(keydownEvent, this.counters);
     };
+    counterWrapper.addEventListener('keydown', this.keydownHandler);
+
+    this.counters.forEach((counter) => {
+      counter.addEventListener("input", () => this.updateValue());
+    });
+  }
+
+  /**
+   * Safely converts a value to a number, returning 0 if invalid.
+   * @private
+   * @param {*} value - The value to convert.
+   * @returns {number} The converted number or 0 if invalid.
+   */
+  safeNumberConversion(value) {
+    const num = Number(value);
+    return Number.isNaN(num) ? 0 : num;
+  }
+
+  /**
+   * Updates the aggregate value based on the values of contained auro-counter components.
+   * This method queries for all `auro-counter` elements, sums their values, and updates the component's `value` property.
+   * Additionally, it iterates through each counter and calls `manageDisabled()` on it.
+   * @private
+   */
+  updateValue() {
+    this.value = Array.from(this.counters).reduce((acc, counter, index) => {
+      const name = counter.hasAttribute('name') ? counter.getAttribute('name') : `counter-${index}`;
+      acc[name] = this.safeNumberConversion(counter.value);
+      return acc;
+    }, {});
+
+    this.total = Array.from(this.counters).reduce(
+      (total, counter) => total + this.safeNumberConversion(counter.value),
+      0,
+    );
+
+    this.counters.forEach((counter) => {
+      this.manageDisabled(counter);
+    });
+  }
+
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.validate();
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: {
+            total: this.total,
+            value: this.value
+          },
+        }),
+        {
+          bubbles: true,
+          composed: true,
+        }
+      );
+    }
+  }
+
+  /**
+   * Registers the custom element with the browser.
+   * @param {string} [name="auro-counter-group"] - Custom element name to register.
+   * @example
+   * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
+   */
+  static register(name = "auro-counter-group") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCounterGroup);
   }
 
   // function that renders the HTML and CSS into the scope of the component
   render() {
     return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
+    ${this.isDropdown
+      ? html`<${this.dropdownTag} common chevron>
+        <div slot="trigger"><slot name="valueText">
+          ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
+        </slot></div>
+        <div slot="label"><slot name="label"></slot></div>
+        <div slot="helpText"><slot name="helpText"></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>`
+    }`;
   }
 }
-
-/* istanbul ignore else */
-// define the name of the custom component
-if (!customElements.get("auro-counter-group")) {
-  customElements.define("auro-counter-group", AuroCounterGroup);
-}

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);
+}
+