@aurodesignsystem/auro-formkit 1.6.0-beta.4

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

@@ -0,0 +1,97 @@
+*, *: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;
+}
+
+.util_displayInline {
+  display: inline;
+}
+
+.util_displayInlineBlock {
+  display: inline-block;
+}
+
+.util_displayBlock {
+  display: block;
+}
+
+.util_displayFlex {
+  display: flex;
+}
+
+.util_displayHidden {
+  display: none;
+}
+
+.util_displayHiddenVisually {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+}
+
+/* stylelint-disable selector-class-pattern */
+[slot=trigger] {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+}
+[slot=trigger] .nestingSpacer {
+  display: none;
+}
+
+:host [auro-dropdown] {
+  position: relative;
+}
+:host [auro-dropdown]::part(trigger) {
+  max-height: var(--ds-size-300, 1.5rem);
+}
+:host [auro-dropdown]::part(popover) {
+  max-width: -webkit-fill-available;
+  overflow-y: scroll;
+}
+
+:host([disabled]) * {
+  user-select: none;
+}
+
+.outerWrapper {
+  position: relative;
+}
+
+auro-menuoption {
+  pointer-events: none;
+}
+
+.menuWrapper {
+  padding: var(--ds-size-50, 0.25rem) 0;
+}
+
+.selectElement-helpText {
+  margin: var(--ds-size-50, 0.25rem) 0;
+  font-size: var(--ds-text-body-size-xs, 0.75rem);
+  line-height: 1rem;
+}

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

@@ -0,0 +1,66 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Import Auro tokens
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import '@aurodesignsystem/webcorestylesheets/src/core';
+@import '@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+/* stylelint-disable selector-class-pattern */
+
+[slot='trigger'] {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+
+  .nestingSpacer {
+    display: none;
+  }
+}
+
+:host {
+  [auro-dropdown] {
+    position: relative;
+
+    &::part(trigger) {
+      max-height: var(--ds-size-300, $ds-size-300);
+    }
+
+    &::part(popover) {
+      max-width: -webkit-fill-available;
+      overflow-y: scroll;
+    }
+  }
+}
+
+:host([disabled]) {
+  * {
+    user-select: none;
+  }
+}
+
+.outerWrapper {
+  position: relative;
+}
+
+auro-menuoption {
+  pointer-events: none;
+}
+
+.menuWrapper {
+  padding: var(--ds-size-50, $ds-size-50) 0;
+}
+
+.selectElement-helpText {
+  margin: var(--ds-size-50, $ds-size-50) 0;
+  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  line-height: 1rem;
+}

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{--ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default)}`;

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

@@ -0,0 +1,3 @@
+:host {
+  --ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
+}

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

@@ -0,0 +1,5 @@
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
+}

package/package.json

@@ -0,0 +1,142 @@
+{
+  "name": "@aurodesignsystem/auro-formkit",
+  "version": "1.6.0-beta.4",
+  "description": "A collection of web components used to build forms.",
+  "type": "module",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AlaskaAirlines/auro-formkit"
+  },
+  "engines": {
+    "node": "^18.x || ^20.x"
+  },
+  "packageManager": "npm@10.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "workspaces": [
+    "components/*",
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "turbo run build",
+    "build:sass": "turbo run build:sass",
+    "build:version": "turbo run build:version",
+    "postCss:component": "turbo run postCss:component",
+    "sass:render": "turbo run sass:render",
+    "bundler": "turbo run bundler",
+    "types": "turbo run types",
+    "dev": "turbo run dev --parallel",
+    "lint": "turbo run lint",
+    "test": "echo \"Notice: no tests available\" && exit 0",
+    "clean": "turbo run clean && rm -rf node_modules",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "postinstall": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/postinstall.mjs",
+    "build:docs": "turbo run build:docs",
+    "build:docs:kit": "turbo run --filter=@auro-formkit/build-tools build:docs:kit",
+    "sweep": "find ./components ./packages -type d -name 'dist' -exec rm -rf {} + && find ./components ./packages -not -path '*/node_modules/*' -type f \\( -name '*.css' -o -name '*-css.js' \\) -delete",
+    "preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@aurodesignsystem/auro-library": "^3.0.2"
+  },
+  "devDependencies": {
+    "@aurodesignsystem/eslint-config": "^1.3.3",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@open-wc/testing": "^4.0.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.1",
+    "@types/chai": "^5.0.1",
+    "@types/mocha": "^10.0.10",
+    "@web/dev-server": "^0.4.6",
+    "@web/test-runner": "^0.19.0",
+    "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.2.1",
+    "compression": "^1.7.5",
+    "concat": "^1.0.3",
+    "concurrently": "^9.0.1",
+    "copyfiles": "^2.4.1",
+    "core-js": "^3.38.1",
+    "eslint": "^9.14.0",
+    "eslint-plugin-jsdoc": "^50.5.0",
+    "husky": "^9.1.7",
+    "lodash": "^4.17.21",
+    "markdown-magic": "^2.6.1",
+    "nodemon": "^3.1.7",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.49",
+    "postcss-custom-properties": "^14.0.4",
+    "postcss-discard-comments": "^7.0.3",
+    "prettier": "^3.0.0",
+    "sass": "^1.80.7",
+    "semantic-release": "^24.2.0",
+    "stylelint": "^16.10.0",
+    "stylelint-config-idiomatic-order": "^10.0.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.9.0",
+    "turbo": "^2.3.1",
+    "typescript": "^5.6.3",
+    "whatwg-fetch": "^3.6.20",
+    "yaml-lint": "^1.7.0"
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 iOS major versions",
+    "last 2 Firefox versions",
+    "last 2 Edge versions",
+    "last 2 Safari major versions"
+  ],
+  "sass": {
+    "includePaths": [
+      "./node_modules"
+    ]
+  },
+  "release": {
+    "branches": [
+      {
+        "name": "main"
+      },
+      {
+        "name": "beta",
+        "prerelease": true
+      }
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "./CHANGELOG.md",
+          "changelogTitle": "# Semantic Release Automated Changelog"
+        }
+      ],
+      "@semantic-release/npm",
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "./package.json",
+            "./CHANGELOG.md",
+            "./README.md",
+            "./docs/api.md"
+          ],
+          "noVerify": true
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  },
+  "keywords": [
+    "alaska airlines",
+    "auro",
+    "design system",
+    "web components"
+  ]
+}

package/packages/build-tools/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@auro-formkit/build-tools",
+  "description": "Shared build tools for auro-formkit monorepo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "tsc",
+  "exports": {
+    ".": "./src/index.js",
+    "./formVersionWriter": "./src/formVersionWriter.mjs",
+    "./docProcessor": "./src/docProcessor.mjs",
+    "./kitDocProcessor": "./src/kitDocProcessor.mjs"
+  },
+  "scripts": {
+    "build:docs:kit": "node src/kitDocProcessor.mjs"
+  }
+}

package/packages/build-tools/src/docProcessor.mjs

@@ -0,0 +1,104 @@
+import { Logger } from "@aurodesignsystem/auro-library/scripts/utils/logger.mjs";
+import {
+  fromAuroComponentRoot,
+  generateReadmeUrl,
+  processContentForFile,
+  templateFiller
+} from "@aurodesignsystem/auro-library/scripts/utils/sharedFileProcessorUtils.mjs";
+
+/**
+ * Processor config object.
+ * @typedef {Object} ProcessorConfig
+ * @property {String} [component=undefined] - The name of component to process docs.
+ * @property {boolean} [overwriteLocalCopies=true] - The release version tag to use instead of master.
+ * @property {string} [remoteReadmeVersion="master"] - The release version tag to use instead of master.
+ * @property {string} [remoteReadmeVariant=""] - The variant string to use for the README source.
+ * (like "_esm" to make README_esm.md).
+ */
+
+
+/**
+ * @param {ProcessorConfig} config - The configuration for this processor.
+ */
+export const defaultDocsProcessorConfig = {
+  component: undefined,
+  overwriteLocalCopies: true,
+  remoteReadmeVersion: "master",
+  // eslint-disable-next-line no-warning-comments
+  // TODO: remove this variant when all components are updated to use latest auro-library
+  // AND the default README.md is updated to use the new paths
+  remoteReadmeVariant: "_updated_paths"
+};
+
+/**
+ * @param {ProcessorConfig} config - The configuration for this processor.
+ * @returns {import('@aurodesignsystem/auro-library/scripts/utils/sharedFileProcessorUtils').FileProcessorConfig[]}
+ */
+export const fileConfigs = (config) => [
+  // README.md
+  {
+    identifier: 'README.md',
+    input: {
+      remoteUrl: generateReadmeUrl(config.remoteReadmeVersion, config.remoteReadmeVariant),
+      fileName: fromAuroComponentRoot(`components/${config.component}/docTemplates/README.md`),
+      overwrite: config.overwriteLocalCopies
+    },
+    output: fromAuroComponentRoot(`components/${config.component}/README.md`)
+  },
+  // index.md
+  {
+    identifier: 'index.md',
+    input: fromAuroComponentRoot(`components/${config.component}/docs/partials/index.md`),
+    output: fromAuroComponentRoot(`components/${config.component}/demo/index.md`),
+    mdMagicConfig: {
+      output: {
+        directory: fromAuroComponentRoot(`components/${config.component}/demo`)
+      }
+    }
+  },
+  // api.md
+  {
+    identifier: 'api.md',
+    input: fromAuroComponentRoot(`components/${config.component}/docs/partials/api.md`),
+    output: fromAuroComponentRoot(`components/${config.component}/demo/api.md`),
+    preProcessors: [templateFiller.formatApiTable],
+  }
+];
+
+/**
+ *
+ * @param {ProcessorConfig} config - The configuration for this processor.
+ * @return {Promise<void>}
+ */
+export async function processDocFiles(componentName) {
+  const config = { ...defaultDocsProcessorConfig };
+  if (componentName) {
+    config.component = componentName;
+    // setup
+    await templateFiller.extractNames();
+
+    for (const fileConfig of fileConfigs(config)) {
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        await processContentForFile(fileConfig);
+      } catch (err) {
+        Logger.error(`Error processing ${fileConfig.identifier}: ${err.message}`);
+      }
+    }
+  } else {
+    Logger.error('no component name provided');
+  }
+}
+
+function main() {
+  const optionIndex = process.argv.indexOf('--component');
+  const componentName = process.argv[optionIndex + 1];
+  processDocFiles(componentName).then(() => {
+    Logger.log('Docs processed successfully for ' + componentName);
+  }).
+    catch((err) => {
+      Logger.error(`Error processing docs: ${err.message}`);
+  });
+}
+
+main();

package/packages/build-tools/src/formVersionWriter.mjs

@@ -0,0 +1,75 @@
+import { readFile, mkdir, writeFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+/**
+ * Writes a version file for the specified dependency package.
+ * Supports workspace and node_modules packages.
+ * @param {string} pkg Dependency to write version file for
+ * @returns {Promise<void>}
+ */
+export async function writeDepVersionFile(pkg) {
+  const auroSubNameIndex = 5;
+  
+  // Function to find package.json path with workspace support
+  async function findPackageJson(packageName) {
+    // List of possible locations to check
+    const possiblePaths = [
+      // Direct workspace path
+      resolve(process.cwd(), '..', packageName.replace('@auro-formkit/', ''), 'package.json'),
+      // Workspace root node_modules
+      resolve(process.cwd(), '../../node_modules', packageName, 'package.json'),
+      // Component-level node_modules
+      resolve(process.cwd(), 'node_modules', packageName, 'package.json'),
+      // Try monorepo packages directory if it exists
+      resolve(process.cwd(), '../../packages', packageName.replace('@auro-formkit/', ''), 'package.json')
+    ];
+
+    for (const path of possiblePaths) {
+      if (existsSync(path)) {
+        return path;
+      }
+    }
+
+    throw new Error(`Could not find package.json for ${packageName} in any of the expected locations`);
+  }
+
+  try {
+    // Get package.json path
+    const packagePath = await findPackageJson(pkg);
+    console.log(`Found package.json at: ${packagePath}`);
+    
+    // Read and parse package.json
+    const packageJson = JSON.parse(await readFile(packagePath, 'utf8'));
+    const { version } = packageJson;
+
+    // Calculate paths
+    const elemSubName = pkg.substring(pkg.indexOf('auro-') + auroSubNameIndex);
+    const callerPath = fileURLToPath(import.meta.url);
+    const pathParts = callerPath.split('/');
+    const componentsIndex = pathParts.indexOf('components');
+    const componentName = componentsIndex !== -1 ? pathParts[componentsIndex + 1] : null;
+    const basePath = componentName
+      ? `components/${componentName}/src`
+      : 'src';
+    const versionFilePath = `./${basePath}/${elemSubName}Version.js`;
+    
+    console.log(`Writing version file to: ${versionFilePath}`);
+
+    // Ensure directory exists
+    const directory = dirname(versionFilePath);
+    if (!existsSync(directory)) {
+      await mkdir(directory, { recursive: true });
+    }
+
+    // Write version file
+    const fileContent = `export default '${version}';\n`;
+    await writeFile(versionFilePath, fileContent);
+    
+    console.log(`Successfully wrote version file for ${pkg}`);
+  } catch (error) {
+    console.error(`Error processing ${pkg}:`, error);
+    throw error;
+  }
+}

package/packages/build-tools/src/index.js

@@ -0,0 +1 @@
+export { writeDepVersionFile } from './formVersionWriter.js';

package/packages/build-tools/src/kitDocProcessor.mjs

@@ -0,0 +1,66 @@
+import { Logger } from "@aurodesignsystem/auro-library/scripts/utils/logger.mjs";
+import {
+  fromAuroComponentRoot,
+  processContentForFile,
+  templateFiller
+} from "@aurodesignsystem/auro-library/scripts/utils/sharedFileProcessorUtils.mjs";
+
+/**
+ * Processor config object.
+ * @typedef {Object} ProcessorConfig
+ * @property {String} [component=undefined] - The name of component to process docs.
+ * @property {boolean} [overwriteLocalCopies=true] - The release version tag to use instead of master.
+ * @property {string} [remoteReadmeVersion="master"] - The release version tag to use instead of master.
+ * @property {string} [remoteReadmeVariant=""] - The variant string to use for the README source.
+ * (like "_esm" to make README_esm.md).
+ */
+
+
+/**
+ * @param {ProcessorConfig} config - The configuration for this processor.
+ */
+export const defaultDocsProcessorConfig = {
+  component: undefined,
+  overwriteLocalCopies: true,
+  remoteReadmeVersion: "master",
+  // eslint-disable-next-line no-warning-comments
+  // TODO: remove this variant when all components are updated to use latest auro-library
+  // AND the default README.md is updated to use the new paths
+  remoteReadmeVariant: "_updated_paths"
+};
+
+/**
+ * @param {ProcessorConfig} config - The configuration for this processor.
+ * @returns {import('@aurodesignsystem/auro-library/scripts/utils/sharedFileProcessorUtils').FileProcessorConfig[]}
+ */
+export const fileConfigs = (config) => [
+  // README.md
+  {
+    identifier: 'README.md',
+    input: fromAuroComponentRoot(`docs/templates/README.md`),
+    output: fromAuroComponentRoot(`README.md`)
+  }
+];
+
+/**
+ *
+ * @param {ProcessorConfig} config - The configuration for this processor.
+ * @return {Promise<void>}
+ */
+export async function processDocFiles(config = defaultDocsProcessorConfig) {
+  // setup
+  await templateFiller.extractNames();
+
+  for (const fileConfig of fileConfigs(config)) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      await processContentForFile(fileConfig);
+    } catch (err) {
+      Logger.error(`Error processing ${fileConfig.identifier}: ${err.message}`);
+    }
+  }
+}
+
+processDocFiles().catch(err => {
+  Logger.error(`Failed to process docs: ${err}`);
+});

package/packages/form-validation/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@auro-formkit/form-validation",
+  "description": "Shared validation for all form components in auro-formkit monorepo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "tsc",
+  "exports": {
+    ".": "./src/index.js"
+  }
+}

package/packages/form-validation/src/index.js

@@ -0,0 +1 @@
+export { default } from './validation.js';