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

package/components/counter/node_modules/chalk/source/vendor/supports-color/browser.js

@@ -1,30 +0,0 @@
-/* eslint-env browser */
-
-const level = (() => {
-	if (navigator.userAgentData) {
-		const brand = navigator.userAgentData.brands.find(({brand}) => brand === 'Chromium');
-		if (brand && brand.version > 93) {
-			return 3;
-		}
-	}
-
-	if (/\b(Chrome|Chromium)\//.test(navigator.userAgent)) {
-		return 1;
-	}
-
-	return 0;
-})();
-
-const colorSupport = level !== 0 && {
-	level,
-	hasBasic: true,
-	has256: level >= 2,
-	has16m: level >= 3,
-};
-
-const supportsColor = {
-	stdout: colorSupport,
-	stderr: colorSupport,
-};
-
-export default supportsColor;

package/components/counter/node_modules/chalk/source/vendor/supports-color/index.d.ts

@@ -1,55 +0,0 @@
-import type {WriteStream} from 'node:tty';
-
-export type Options = {
-	/**
-	Whether `process.argv` should be sniffed for `--color` and `--no-color` flags.
-
-	@default true
-	*/
-	readonly sniffFlags?: boolean;
-};
-
-/**
-Levels:
-- `0` - All colors disabled.
-- `1` - Basic 16 colors support.
-- `2` - ANSI 256 colors support.
-- `3` - Truecolor 16 million colors support.
-*/
-export type ColorSupportLevel = 0 | 1 | 2 | 3;
-
-/**
-Detect whether the terminal supports color.
-*/
-export type ColorSupport = {
-	/**
-	The color level.
-	*/
-	level: ColorSupportLevel;
-
-	/**
-	Whether basic 16 colors are supported.
-	*/
-	hasBasic: boolean;
-
-	/**
-	Whether ANSI 256 colors are supported.
-	*/
-	has256: boolean;
-
-	/**
-	Whether Truecolor 16 million colors are supported.
-	*/
-	has16m: boolean;
-};
-
-export type ColorInfo = ColorSupport | false;
-
-export function createSupportsColor(stream?: WriteStream, options?: Options): ColorInfo;
-
-declare const supportsColor: {
-	stdout: ColorInfo;
-	stderr: ColorInfo;
-};
-
-export default supportsColor;

package/components/counter/node_modules/chalk/source/vendor/supports-color/index.js

@@ -1,182 +0,0 @@
-import process from 'node:process';
-import os from 'node:os';
-import tty from 'node:tty';
-
-// From: https://github.com/sindresorhus/has-flag/blob/main/index.js
-/// function hasFlag(flag, argv = globalThis.Deno?.args ?? process.argv) {
-function hasFlag(flag, argv = globalThis.Deno ? globalThis.Deno.args : process.argv) {
-	const prefix = flag.startsWith('-') ? '' : (flag.length === 1 ? '-' : '--');
-	const position = argv.indexOf(prefix + flag);
-	const terminatorPosition = argv.indexOf('--');
-	return position !== -1 && (terminatorPosition === -1 || position < terminatorPosition);
-}
-
-const {env} = process;
-
-let flagForceColor;
-if (
-	hasFlag('no-color')
-	|| hasFlag('no-colors')
-	|| hasFlag('color=false')
-	|| hasFlag('color=never')
-) {
-	flagForceColor = 0;
-} else if (
-	hasFlag('color')
-	|| hasFlag('colors')
-	|| hasFlag('color=true')
-	|| hasFlag('color=always')
-) {
-	flagForceColor = 1;
-}
-
-function envForceColor() {
-	if ('FORCE_COLOR' in env) {
-		if (env.FORCE_COLOR === 'true') {
-			return 1;
-		}
-
-		if (env.FORCE_COLOR === 'false') {
-			return 0;
-		}
-
-		return env.FORCE_COLOR.length === 0 ? 1 : Math.min(Number.parseInt(env.FORCE_COLOR, 10), 3);
-	}
-}
-
-function translateLevel(level) {
-	if (level === 0) {
-		return false;
-	}
-
-	return {
-		level,
-		hasBasic: true,
-		has256: level >= 2,
-		has16m: level >= 3,
-	};
-}
-
-function _supportsColor(haveStream, {streamIsTTY, sniffFlags = true} = {}) {
-	const noFlagForceColor = envForceColor();
-	if (noFlagForceColor !== undefined) {
-		flagForceColor = noFlagForceColor;
-	}
-
-	const forceColor = sniffFlags ? flagForceColor : noFlagForceColor;
-
-	if (forceColor === 0) {
-		return 0;
-	}
-
-	if (sniffFlags) {
-		if (hasFlag('color=16m')
-			|| hasFlag('color=full')
-			|| hasFlag('color=truecolor')) {
-			return 3;
-		}
-
-		if (hasFlag('color=256')) {
-			return 2;
-		}
-	}
-
-	// Check for Azure DevOps pipelines.
-	// Has to be above the `!streamIsTTY` check.
-	if ('TF_BUILD' in env && 'AGENT_NAME' in env) {
-		return 1;
-	}
-
-	if (haveStream && !streamIsTTY && forceColor === undefined) {
-		return 0;
-	}
-
-	const min = forceColor || 0;
-
-	if (env.TERM === 'dumb') {
-		return min;
-	}
-
-	if (process.platform === 'win32') {
-		// Windows 10 build 10586 is the first Windows release that supports 256 colors.
-		// Windows 10 build 14931 is the first release that supports 16m/TrueColor.
-		const osRelease = os.release().split('.');
-		if (
-			Number(osRelease[0]) >= 10
-			&& Number(osRelease[2]) >= 10_586
-		) {
-			return Number(osRelease[2]) >= 14_931 ? 3 : 2;
-		}
-
-		return 1;
-	}
-
-	if ('CI' in env) {
-		if ('GITHUB_ACTIONS' in env || 'GITEA_ACTIONS' in env) {
-			return 3;
-		}
-
-		if (['TRAVIS', 'CIRCLECI', 'APPVEYOR', 'GITLAB_CI', 'BUILDKITE', 'DRONE'].some(sign => sign in env) || env.CI_NAME === 'codeship') {
-			return 1;
-		}
-
-		return min;
-	}
-
-	if ('TEAMCITY_VERSION' in env) {
-		return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
-	}
-
-	if (env.COLORTERM === 'truecolor') {
-		return 3;
-	}
-
-	if (env.TERM === 'xterm-kitty') {
-		return 3;
-	}
-
-	if ('TERM_PROGRAM' in env) {
-		const version = Number.parseInt((env.TERM_PROGRAM_VERSION || '').split('.')[0], 10);
-
-		switch (env.TERM_PROGRAM) {
-			case 'iTerm.app': {
-				return version >= 3 ? 3 : 2;
-			}
-
-			case 'Apple_Terminal': {
-				return 2;
-			}
-			// No default
-		}
-	}
-
-	if (/-256(color)?$/i.test(env.TERM)) {
-		return 2;
-	}
-
-	if (/^screen|^xterm|^vt100|^vt220|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
-		return 1;
-	}
-
-	if ('COLORTERM' in env) {
-		return 1;
-	}
-
-	return min;
-}
-
-export function createSupportsColor(stream, options = {}) {
-	const level = _supportsColor(stream, {
-		streamIsTTY: stream && stream.isTTY,
-		...options,
-	});
-
-	return translateLevel(level);
-}
-
-const supportsColor = {
-	stdout: createSupportsColor({isTTY: tty.isatty(1)}),
-	stderr: createSupportsColor({isTTY: tty.isatty(2)}),
-};
-
-export default supportsColor;

package/components/counter/package.json

@@ -1,59 +0,0 @@
-{
-  "name": "@aurodesignsystem/auro-counter",
-  "version": "1.0.0",
-  "description": "auro-counter HTML custom element",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/AlaskaAirlines/auro-counter"
-  },
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "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.13.0",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
-  },
-  "devDependencies": {
-    "@auro-formkit/build-tools": "*",
-    "@auro-formkit/config": "*",
-    "@auro-formkit/typescript": "*",
-    "@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",
-    "rollup": "^4.22.4",
-    "rollup-plugin-serve": "^2.0.2",
-    "wc-sass-render": "^1.4.0",
-    "web-component-analyzer": "^2.0.0"
-  },
-  "scripts": {
-    "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\" --fix",
-    "esLint": "eslint \"./src/**/*.js\""
-  }
-}

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

@@ -1,42 +0,0 @@
-// 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,333 +0,0 @@
-/* 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.
-
-// ---------------------------------------------------------------------
-
-import { html } from "lit/static-html.js";
-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];
-  }
-
-  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.
-       */
-      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,
-      },
-
-      /**
-       * The total value of the counters.
-       */
-      total: {
-        type: Number,
-      },
-
-      /**
-       * 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`
-    ${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>`
-    }`;
-  }
-}