@aurodesignsystem/auro-formkit 2.0.0-beta.7 → 2.0.0-beta.9

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-group-color-css.d.ts","sourceRoot":"","sources":["../../src/styles/counter-group-color-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

@@ -12,6 +12,8 @@
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "dependencies": {
+    "@alaskaairux/icons": "^4.44.1",
+    "@aurodesignsystem/auro-button": "^8.2.1",
     "chalk": "^5.2.0",
     "lit": "^3.2.1"
   },
@@ -23,6 +25,7 @@
     "@auro-formkit/build-tools": "*",
     "@auro-formkit/config": "*",
     "@auro-formkit/typescript": "*",
+    "@auro-formkit/utils": "*",
     "@aurodesignsystem/design-tokens": "^4.12.1",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -33,10 +36,13 @@
     "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",
@@ -44,7 +50,7 @@
     "serve": "web-dev-server --open demo/ --node-resolve --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,48 +1,177 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// 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-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";
 
+/**
+ * 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.
+ */
 export class AuroCounterGroup extends LitElement {
+  constructor() {
+    super();
+
+    this.max = undefined;
+    this.min = undefined;
+    this.validity = undefined;
+    this.value = undefined;
+
+    /**
+     * @private
+     */
+    this.validation = new AuroFormValidation();
+  }
 
   static get styles() {
-    return [styleCss];
+    return [
+      colorCss,
+      styleCss
+    ];
   }
 
   static get properties() {
     return {
-      common: {
-        type: Boolean,
-        reflect: true
+
+      /**
+       * The maximum value allowed for the whole group of counters.
+       */
+      max: {
+        type: Number,
+        reflect: true,
       },
-      inset: {
-        type: Boolean,
-        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,
+      },
+
+      /**
+       * The current value.
+       */
+      value: {
+        type: Number,
       },
-      rounded: {
-        type: Boolean,
-        reflect: true
-      }
     };
   }
 
+  /**
+   * 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.value <= this.min) {
+      counter.disableMin = true;
+    } else if (this.value >= this.max) {
+      counter.disableMax = true;
+    }
+  }
+
+
+  /**
+   * 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.
+   * The listener calls `this.updateValue()` whenever the value of a counter changes.
+   * @private
+   */
+  configureCounters() {
+    const counters = this.querySelectorAll("auro-counter, [auto-counter]");
+    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() {
+    const counters = this.querySelectorAll("auro-counter, [auro-counter]");
+    this.value = Array.from(counters).reduce(
+      (total, counter) => total + this.safeNumberConversion(counter.value),
+      0,
+    );
+    counters.forEach((counter) => {
+      this.manageDisabled(counter);
+    });
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.validation.validate(this);
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: {
+            value: this.value,
+          },
+        }),
+        {
+          bubble: true,
+          composable: 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 class="counters">
+        <slot @slotchange=${() => this.configureCounters()}></slot>
       </div>
     `;
   }
 }
-
-/* 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.js

@@ -1,29 +1,289 @@
-// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+/* eslint-disable lit/binding-positions, lit/no-invalid-html */
+// 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 { html } from "lit/static-html.js";
+
+import "./auro-counter-button.js";
+
+import { AuroDependencyVersioning } from "@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs";
+import AuroLibraryRuntimeUtils from "@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs";
+
+import { AuroIcon } from "@aurodesignsystem/auro-icon/src/auro-icon.js";
+import iconVersion from "./iconVersion.js";
+import AuroFormValidation from "@auro-formkit/form-validation";
+
+import { IconUtil } from "@auro-formkit/utils";
+import plusIcon from '@alaskaairux/icons/dist/icons/interface/plus-lg.mjs';
+import minusIcon from '@alaskaairux/icons/dist/icons/interface/minus-lg.mjs';
 
+import tokensCss from "./styles/tokens-css.js";
+import colorCss from "./styles/color-css.js";
 import styleCss from "./styles/style-css.js";
 
+/**
+ * Auro Counter is a customizable counter component for user interface interactions.
+ *
+ * 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 Default - Main label content for the counter.
+ * @slot description - Descriptive content for the counter.
+ */
 export class AuroCounter extends LitElement {
+  constructor() {
+    super();
+
+    this.disabled = false;
+    this.disableMax = false;
+    this.disableMin = false;
+    this.max = 9;
+    this.min = 0;
+    this.validity = undefined;
+    this.value = undefined;
+
+    /**
+     * @private
+     */
+    this.validation = new AuroFormValidation();
+
+    /**
+     * Generate unique names for dependency components.
+     * @private
+     */
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * Dynamically generated icon tag for counter buttons.
+     * @private
+     * @type {string}
+     */
+    this.iconTag = versioning.generateTag("auro-icon", iconVersion, AuroIcon);
+  }
+
+  /**
+   * Defines reactive properties for the component.
+   * @returns {Object} Property configuration.
+   */
+  static get properties() {
+    return {
+
+      /**
+       * Indicates if the counter is disabled.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+
+      /**
+       * Group will attach to counter to disable the increment button.
+       * @private
+       */
+      disableMax: {
+        type: Boolean,
+      },
+
+      /**
+       * Group will attach to counter to disable the decrement button.
+       * @private
+       */
+      disableMin: {
+        type: Boolean,
+      },
+
+      /**
+       * The maximum value for the counter.
+       */
+      max: {
+        type: Number,
+        reflect: true,
+      },
+
+      /**
+       * The minimum value for the counter.
+       */
+      min: {
+        type: Number,
+        reflect: true,
+      },
+
+      /**
+       * The validity state of the counter.
+       */
+      validity: {
+        type: String,
+        reflect: true,
+      },
+
+      /**
+       * The current value of the counter.
+       */
+      value: {
+        type: Number,
+      },
+    };
+  }
+
+  /**
+   * Registers the custom element with the browser.
+   * @param {string} [name="auro-counter"] - Custom element name to register.
+   * @example
+   * AuroCounter.register("custom-counter") // registers <custom-counter/>
+   */
+  static register(name = "auro-counter") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCounter);
+  }
 
   static get styles() {
-    return [styleCss];
+    return [
+      tokensCss,
+      colorCss,
+      styleCss
+    ];
+  }
+
+  /**
+   * Increments the counter value by 1. If a value is provided, it increments by that amount.
+   * @method increment
+   * @param {number} [value] - The amount to increment by.
+   * @returns {void}
+   */
+  increment(value) {
+    this.value += value !== undefined ? value : 1;
+  }
+
+  /**
+   * Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.
+   * @method decrement
+   * @param {number} [value] - The amount to decrement by.
+   * @returns {void}
+   */
+  decrement(value) {
+    this.value -= value !== undefined ? value : 1;
+  }
+
+  /**
+   * Initializes the value of the counter.
+   * If the current value is undefined, it sets the value to the minimum value.
+   * @private
+   */
+  initValue() {
+    if (this.value === undefined) {
+      this.value = this.min;
+    }
+  }
+
+  /**
+   * Determines if the increment button should be disabled based on the current value and extrema.
+   *
+   * @param {number} extrema - The extreme value (either min or max) to compare against the current value.
+   * @returns {boolean} - Returns true if the increment button should be disabled, otherwise false.
+   * @private
+   */
+  isIncrementDisabled(extrema) {
+    // Initially, the value is undefined and then set to the minimum value. During this transition, the increment button should be disabled.
+    if (this.value === undefined) {
+      return false;
+    } else if (extrema === this.min && this.value > extrema) {
+      return false;
+    } else if (extrema === this.max && this.value < extrema) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Moves the focus to the first enabled button within the shadow DOM.
+   * This method searches for the first `auro-counter-button` element that is not disabled
+   * and sets the focus on it.
+   * @private
+   */
+  jumpFocusToEnabled() {
+    const button = this.shadowRoot.querySelector("auro-counter-button:not([disabled])");
+    if (button !== null) {
+      button.focus();
+    }
+  }
+
+  handleSlotChange() {
+    this.checkSlots();
+  }
+
+  firstUpdated() {
+    this.initValue();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.validation.validate(this);
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: {
+            value: this.value,
+          },
+        }),
+        {
+          bubble: true,
+          composable: true,
+        }
+      );
+
+      if (
+        this.value === this.max ||
+        this.value === this.min ||
+        changedProperties.get("disableMax") ||
+        changedProperties.get("disableMin")
+      ) {
+        this.jumpFocusToEnabled();
+      }
+    }
+    /* eslint-disable no-extra-parens */
+    if (
+      (changedProperties.has("disableMax") &&
+        changedProperties.get("disableMax") !== undefined) ||
+      (changedProperties.has("disableMin") &&
+        changedProperties.get("disableMin") !== undefined)
+    ) {
+      this.jumpFocusToEnabled();
+    }
+    /* eslint-enable no-extra-parens */
   }
 
-  // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`
-      <div>
-        <slot></slot>
+      <div class="counter">
+        <div class="content" >
+          <label class="label"><slot></slot></label>
+          <slot name="description"></slot>
+        </div>
+        
+        <div part="counterControl">
+          <auro-counter-button
+          part="controlMinus"
+          @click="${() => this.decrement()}"
+          ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
+          >
+            <${this.iconTag} class="controlIcon" slot="icon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
+          </auro-counter-button>
+
+          <div class="quantityWrapper">
+            <div class="quantity">${this.value !== undefined ? this.value : this.min}</div>
+          </div>
+
+          <auro-counter-button
+          part="controlPlus"
+          @click="${() => this.increment()}"
+          ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
+          >
+            <${this.iconTag} class="controlIcon" slot="icon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
+          </auro-counter-button>
+        </div>
       </div>
     `;
   }
 }
-
-/* istanbul ignore else */
-// define the name of the custom component
-if (!customElements.get("auro-counter")) {
-  customElements.define("auro-counter", AuroCounter);
-}

package/components/counter/src/formkit/auro-dropdownVersion.js

@@ -0,0 +1 @@
+export default '3.0.0';

package/components/counter/src/iconVersion.js

@@ -0,0 +1 @@
+export default '6.1.2';

package/components/counter/src/index.js

@@ -5,4 +5,4 @@ AuroCounter.register();
 AuroCounterGroup.register();
 
 // Enable TypeScript support
-export { AuroCounter, AuroCounterGroup };
+export { AuroCounter, AuroCounterGroup};

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.counter{color:var(--ds-auro-counter-text-default)}[name=description]::slotted(*){color:var(--ds-auro-counter-text-secondary)}.controlIcon{color:var(--ds-auro-counter-icon-color-default)}.quantityWrapper{background-color:var(--ds-auro-counter-control-ui-bkg)}[disabled] .controlIcon,:host([disabled]) .controlIcon{color:var(--ds-auro-counter-control-ui-disabled)}[disabled] label,[disabled] [name=description]::slotted(*),[disabled]::part(counterControl),:host([disabled]) label,:host([disabled]) [name=description]::slotted(*),:host([disabled])::part(counterControl){color:var(--ds-auro-counter-text-disabled)}`;

package/components/counter/src/styles/color.css

@@ -0,0 +1,25 @@
+/* stylelint-disable selector-max-attribute, scss/selector-nest-combinators */
+.counter {
+  color: var(--ds-auro-counter-text-default);
+}
+
+[name=description]::slotted(*) {
+  color: var(--ds-auro-counter-text-secondary);
+}
+
+.controlIcon {
+  color: var(--ds-auro-counter-icon-color-default);
+}
+
+.quantityWrapper {
+  background-color: var(--ds-auro-counter-control-ui-bkg);
+}
+
+[disabled] .controlIcon, :host([disabled]) .controlIcon {
+  color: var(--ds-auro-counter-control-ui-disabled);
+}
+[disabled] label,
+[disabled] [name=description]::slotted(*), [disabled]::part(counterControl), :host([disabled]) label,
+:host([disabled]) [name=description]::slotted(*), :host([disabled])::part(counterControl) {
+  color: var(--ds-auro-counter-text-disabled);
+}