@aurodesignsystem/auro-formkit 2.0.0-beta.42 → 2.0.0-beta.43

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

@@ -1,54 +0,0 @@
-// 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/auro-counter.js

@@ -1,342 +0,0 @@
-/* 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.
-
-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.defaultSlot = undefined;
-    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);
-
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('keydown', this.handleKeyDown);
-    super.disconnectedCallback();
-  }
-
-  /**
-   * Defines reactive properties for the component.
-   * @returns {Object} Property configuration.
-   */
-  static get properties() {
-    return {
-
-      /**
-       * The default slot content.
-       * @type {string}
-       * @private
-       */
-      defaultSlot: {
-        type: String,
-      },
-
-      /**
-       * 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 [
-      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) {
-    if (this.disabled || this.disableMax || this.value >= this.max) {
-      return;
-    }
-
-    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) {
-    if (this.disabled || this.disableMin || this.value <= this.min) {
-      return;
-    }
-
-    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;
-  }
-
-  /**
-   * Validates value.
-   * @param {boolean} [force=false] - Whether to force validation.
-   */
-  validate(force = false) {
-    this.validation.validate(this, force);
-  }
-
-  /**
-   * Handles the keydown event for the counter component.
-   * @param {KeyboardEvent} event - The keyboard event object.
-   * @returns {void}
-   * @private
-   */
-  handleKeyDown(event) {
-    if (this.disabled) {
-      return;
-    }
-
-    switch (event.key) {
-      case 'ArrowUp':
-        event.preventDefault();
-        this.increment();
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        this.decrement();
-        break;
-      default:
-        break;
-    }
-  }
-
-  firstUpdated() {
-    this.initValue();
-  }
-
-  /**
-   * Handles the change event for the default slot.
-   * Updates the defaultSlot property with the trimmed text content of the first assigned node.
-   *
-   * @param {Event} event - The event object representing the slot change event.
-   * @private
-   */
-  onDefaultSlotChange(event) {
-    const assignedNodes = event.target.assignedNodes();
-    if (assignedNodes.length > 0) {
-      this.defaultSlot = assignedNodes[0].textContent.trim();
-    }
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has("value")) {
-      this.validate();
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          detail: {
-            value: this.value,
-          },
-        }),
-        {
-          bubbles: true,
-          composed: true,
-        }
-      );
-    }
-  }
-
-  render() {
-    return html`
-      <div class="counter">
-        <div class="content" >
-          <label id="counter-label" class="label"><slot @slotchange="${this.onDefaultSlotChange}" ></slot></label>
-          <slot id="counter-description" name="description"></slot>
-        </div>
-        <div part="counterControl" aria-labelledby="counter-label" aria-describedby="counter-description" tabindex="${this.disabled ? '-1' : '0'}" role="spinbutton" aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}">
-          <auro-counter-button
-          aria-hidden="true"
-          iconOnly
-          tabindex="-1"
-          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
-          aria-hidden="true"
-          iconOnly
-          tabindex="-1"
-          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>
-    `;
-  }
-}

package/components/counter/src/dropdownVersion.js

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

package/components/counter/src/iconVersion.js

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

package/components/counter/src/index.js

@@ -1,8 +0,0 @@
-import { AuroCounter } from './auro-counter.js';
-import { AuroCounterGroup } from './auro-counter-group.js';
-
-AuroCounter.register();
-AuroCounterGroup.register();
-
-// Enable TypeScript support
-export { AuroCounter, AuroCounterGroup};

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

@@ -1,2 +0,0 @@
-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)}:host::part(counterControl):focus-visible{outline-color:var(--ds-auro-counter-control-border-active)}[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

@@ -1,29 +0,0 @@
-/* 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);
-}
-
-:host::part(counterControl):focus-visible {
-  outline-color: var(--ds-auro-counter-control-border-active);
-}
-
-[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.scss

@@ -1,49 +0,0 @@
-/* stylelint-disable selector-max-attribute, scss/selector-nest-combinators */
-
-// 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';
-
-.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);
-}
-
-:host::part(counterControl) {
-  &:focus-visible {
-    outline-color: var(--ds-auro-counter-control-border-active);
-  }
-}
-
-[disabled], :host([disabled]) {
-  .controlIcon {
-    color: var(--ds-auro-counter-control-ui-disabled);
-  }
-
-  label,
-  [name="description"]::slotted(*),
-  &::part(counterControl) {
-    color: var(--ds-auro-counter-text-disabled);
-  }
-}

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

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-ui-bkg);color:var(--ds-auro-button-text-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){background-color:var(--ds-auro-counter-control-ui-hover)}}`;

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

@@ -1,11 +0,0 @@
-.auroButton {
-  border-color: unset;
-  background-color: var(--ds-auro-counter-control-ui-bkg);
-  color: var(--ds-auro-button-text-color);
-  -webkit-tap-highlight-color: var(--ds-auro-button-tap-color);
-}
-@media (hover: hover) {
-  .auroButton:active:not(:disabled), .auroButton:hover:not(:disabled) {
-    background-color: var(--ds-auro-counter-control-ui-hover);
-  }
-}

package/components/counter/src/styles/counter-button-color.scss

@@ -1,23 +0,0 @@
-// stylelint-disable max-nesting-depth
-
-// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
-
-.auroButton {
-  border-color: unset;
-  background-color: var(--ds-auro-counter-control-ui-bkg);
-  color: var(--ds-auro-button-text-color);
-  -webkit-tap-highlight-color: var(--ds-auro-button-tap-color);
-
-  @media (hover: hover) {
-    &:active, &:hover{
-      &:not(:disabled) {
-        background-color: var(--ds-auro-counter-control-ui-hover);
-      }
-    }
-  }
-}

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

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;touch-action:manipulation;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline:none;transform:unset}`;

package/components/counter/src/styles/counter-button-tokens-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host{--ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03))}`;

package/components/counter/src/styles/counter-button-tokens.css

@@ -1,6 +0,0 @@
-:host {
-  --ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));
-  --ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);
-  --ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));
-  --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));
-}

package/components/counter/src/styles/counter-button-tokens.scss

@@ -1,8 +0,0 @@
-@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
-
-:host {  
-    --ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, #{$ds-color-ui-bkg-hover-default});
-    --ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #{$ds-color-ui-active-default});
-    --ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, #{$ds-color-ui-bkg-hover-default});
-    --ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, #{$ds-color-ui-bkg-default-default});
-}