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

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

@@ -1,289 +0,0 @@
-/* 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 { 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 [
-      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 */
-  }
-
-  render() {
-    return html`
-      <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>
-    `;
-  }
-}

package/components/counter/src/formkit/auro-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)}[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,25 +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);
-}
-
-[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,44 +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);
-}
-
-[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)}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline-color:var(--ds-auro-counter-control-border-active)}@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,14 +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);
-}
-.auroButton:focus-visible:not(.auroButton:focus-visible:disabled) {
-  outline-color: var(--ds-auro-counter-control-border-active);
-}
-@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,29 +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);
-
-  &:focus-visible {
-    &:not(&:disabled) {
-      outline-color: var(--ds-auro-counter-control-border-active);
-    }
-  }
-
-  @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;-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-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem);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-active: var(--ds-color-border-active-default, #0074c8);--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,7 +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-active: var(--ds-color-border-active-default, #0074c8);
-  --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,9 +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-active: var(--ds-color-border-active-default, #{$ds-color-border-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});
-}

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

@@ -1,187 +0,0 @@
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-@media (prefers-reduced-motion: reduce) {
-  *, *:before, *:after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-*:focus-visible {
-  outline: 0;
-}
-*:focus-visible {
-  outline: 0;
-}
-
-:focus:not(:focus-visible) {
-  outline: 3px solid transparent;
-}
-
-/**
- * Do not edit directly
- * Generated on Tue, 10 Dec 2024 19:41:07 GMT
- */
-.util_insetNone {
-  padding: 0;
-}
-
-.util_insetXxxs {
-  padding: 0.125rem;
-}
-
-.util_insetXxxs--stretch {
-  padding: 0.25rem 0.125rem;
-}
-
-.util_insetXxxs--squish {
-  padding: 0 0.125rem;
-}
-
-.util_insetXxs {
-  padding: 0.25rem;
-}
-
-.util_insetXxs--stretch {
-  padding: 0.375rem 0.25rem;
-}
-
-.util_insetXxs--squish {
-  padding: 0.125rem 0.25rem;
-}
-
-.util_insetXs {
-  padding: 0.5rem;
-}
-
-.util_insetXs--stretch {
-  padding: 0.75rem 0.5rem;
-}
-
-.util_insetXs--squish {
-  padding: 0.25rem 0.5rem;
-}
-
-.util_insetSm {
-  padding: 0.75rem;
-}
-
-.util_insetSm--stretch {
-  padding: 1.125rem 0.75rem;
-}
-
-.util_insetSm--squish {
-  padding: 0.375rem 0.75rem;
-}
-
-.util_insetMd {
-  padding: 1rem;
-}
-
-.util_insetMd--stretch {
-  padding: 1.5rem 1rem;
-}
-
-.util_insetMd--squish {
-  padding: 0.5rem 1rem;
-}
-
-.util_insetLg {
-  padding: 1.5rem;
-}
-
-.util_insetLg--stretch {
-  padding: 2.25rem 1.5rem;
-}
-
-.util_insetLg--squish {
-  padding: 0.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;
-  -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-offset: 0;
-  outline-style: solid;
-  outline-width: var(--ds-size-25, 0.125rem);
-  transform: unset;
-}