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

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

@@ -0,0 +1,34 @@
+/* eslint-env browser */
+
+const level = (() => {
+	if (!('navigator' in globalThis)) {
+		return 0;
+	}
+
+	if (globalThis.navigator.userAgentData) {
+		const brand = navigator.userAgentData.brands.find(({brand}) => brand === 'Chromium');
+		if (brand && brand.version > 93) {
+			return 3;
+		}
+	}
+
+	if (/\b(Chrome|Chromium)\//.test(globalThis.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/helptext/node_modules/chalk/source/vendor/supports-color/index.d.ts

@@ -0,0 +1,55 @@
+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/helptext/node_modules/chalk/source/vendor/supports-color/index.js

@@ -0,0 +1,182 @@
+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', 'GITEA_ACTIONS', 'CIRCLECI'].some(key => key in env)) {
+			return 3;
+		}
+
+		if (['TRAVIS', '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/helptext/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@aurodesignsystem/auro-helptext",
+  "version": "1.0.0",
+  "description": "auro-helptext HTML custom element",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "dependencies": {
+    "chalk": "^5.3.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": "*",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.1.2",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "rollup": "^4.24.0",
+    "rollup-plugin-serve": "^2.0.3",
+    "wc-sass-render": "^1.4.0"
+  },
+  "overrides": {
+    "wc-sass-render": {
+      "sass": "$sass"
+    }
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "*-css.js",
+      "*.css"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "run-s build:sass bundler types",
+    "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\"",
+    "bundler": "rollup -c node:@auro-formkit/config/internal.rollup",
+    "clean": "rm -rf dist build",
+    "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",
+    "types": "tsc --project tsconfig.json",
+    "lint": "npm-run-all scssLint esLint",
+    "scssLint": "stylelint \"./src/**/*.scss\"",
+    "esLint": "eslint \"./src/**/*.js\""
+  }
+}

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

@@ -0,0 +1,127 @@
+// 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, html } from "lit";
+
+import colorCss from "./styles/color-css.js";
+import styleCss from "./styles/style-css.js";
+import tokensCss from "./styles/tokens-css.js";
+
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+/**
+ * Displays help text or error messages within form elements - Internal Use Only.
+ *
+ * @attr { Boolean } large - If declared, make font-size to 1rem(16px).
+ */
+export class AuroHelpText extends LitElement {
+
+  constructor() {
+    super();
+
+    this.error = false;
+    this.hasTextContent = false;
+  }
+
+  static get styles() {
+    return [
+      colorCss,
+      styleCss,
+      tokensCss
+    ];
+  }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+
+      /**
+       * @private
+       */
+      slotNodes: {
+        type: Boolean,
+      },
+
+      /**
+       * @private
+       */
+      hasTextContent: {
+        type: Boolean,
+      },
+
+      /**
+       * If declared, make font color red.
+       */
+      error: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-helptext"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroCheckbox.register("custom-helptext") // this will register this element to <custom-helptext/>
+   *
+   */
+  static register(name = "auro-helptext") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroHelpText);
+  }
+
+  updated() {
+    this.handleSlotChange();
+  }
+
+  handleSlotChange(event) {
+    if (event) {
+      this.slotNodes = event.target.assignedNodes();
+    }
+
+    this.hasTextContent = this.checkSlotsForContent(this.slotNodes);
+  }
+
+  /**
+   * Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.
+   *
+   * @param {NodeList|Array} nodes - The list of nodes to check for content.
+   * @returns {boolean} - Returns true if any node or nested slot node contains non-empty text content, otherwise false.
+   * @private
+   */
+  checkSlotsForContent(nodes) {
+    if (!nodes) {
+      return false;
+    }
+
+    return nodes.some((node) => {
+      if (node.textContent.trim()) {
+        return true;
+      }
+
+      if (!node.querySelector) {
+        return false;
+      }
+
+      const nestedSlot = node.tagName === 'SLOT' ? node : node.querySelector('slot');
+      if (!nestedSlot) {
+        return false;
+      }
+
+      const nestedSlotNodes = nestedSlot.assignedNodes();
+      return this.checkSlotsForContent(nestedSlotNodes);
+    });
+  }
+
+  // function that renders the HTML and CSS into  the scope of the component
+  render() {
+    return html`
+      <div class="helptext-wrapper" ?visible="${this.hasTextContent}">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}

package/components/helptext/src/index.js

@@ -0,0 +1,6 @@
+import { AuroHelpText } from './auro-helptext.js';
+
+AuroHelpText.register();
+
+// Enable TypeScript support
+export { AuroHelpText };

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;

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

@@ -0,0 +1,8 @@
+/* stylelint-disable selector-class-pattern */
+:host([error]) {
+  --ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816);
+}
+
+.helptext-wrapper {
+  color: var(--ds-auro-helptext-color);
+}

package/components/helptext/src/styles/color.scss

@@ -0,0 +1,11 @@
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+/* stylelint-disable selector-class-pattern */
+
+:host([error]) {
+  --ds-auro-helptext-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
+}
+
+.helptext-wrapper {
+  color: var(--ds-auro-helptext-color);
+}

package/components/helptext/src/styles/style-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;

package/components/helptext/src/styles/style.css

@@ -0,0 +1,23 @@
+/* stylelint-disable scss/selector-nest-combinators, selector-class-pattern */
+.helptext-wrapper {
+  display: none;
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: var(--ds-size-200, 1rem);
+}
+
+:host([large]) .helptext-wrapper {
+  font-size: var(--ds-text-body-size-default, 1rem);
+}
+
+.helptext-wrapper[visible] {
+  display: block;
+}
+
+::slotted(*:not(:empty)) {
+  margin-top: var(--ds-size-50, 0.25rem);
+  margin-bottom: 0;
+}
+
+::slotted(p) {
+  margin-block: 0;
+}

package/components/helptext/src/styles/style.scss

@@ -0,0 +1,33 @@
+// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* stylelint-disable scss/selector-nest-combinators, selector-class-pattern */
+
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+.helptext-wrapper {
+  display: none;
+  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  line-height: var(--ds-size-200, $ds-size-200);
+}
+
+:host([large]) {
+  .helptext-wrapper {
+    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  }
+}
+
+.helptext-wrapper[visible] {
+  display: block;
+}
+
+::slotted(*:not(:empty)) {
+  margin-top: var(--ds-size-50, $ds-size-50);
+  margin-bottom: 0;
+}
+
+::slotted(p) {
+  margin-block: 0;
+}

package/components/helptext/src/styles/tokens-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;

package/components/helptext/src/styles/tokens.css

@@ -0,0 +1,3 @@
+:host {
+  --ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c);
+}

package/components/helptext/src/styles/tokens.scss

@@ -0,0 +1,5 @@
+@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  --ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #{$ds-color-text-tertiary-default});
+}