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

package/components/select/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-select",
+  "name": "@aurodesignsystem/auro-select",
   "version": "3.3.0",
   "description": "auro-select HTML custom element",
   "type": "module",
@@ -12,14 +12,14 @@
     "url": "https://github.com/AlaskaAirlines/auro-select"
   },
   "dependencies": {
-    "@auro-formkit/auro-dropdown": "*",
-    "@auro-formkit/auro-menu": "*",
+    "@aurodesignsystem/auro-dropdown": "*",
+    "@aurodesignsystem/auro-menu": "*",
     "chalk": "^5.3.0",
     "lit-element": "^4.1.1",
     "lit-html": "^3.2.1"
   },
   "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2"
   },
   "devDependencies": {
@@ -28,7 +28,7 @@
     "@auro-formkit/config": "*",
     "@auro-formkit/form-validation": "*",
     "@auro-formkit/typescript": "*",
-    "@aurodesignsystem/design-tokens": "^4.12.1",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -60,8 +60,8 @@
     "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",
-    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage",
-    "test:watch": "wtr --watch",
+    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage --port 7700",
+    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --watch  --port 7700",
     "types": "tsc --project tsconfig.json",
     "lint": "npm-run-all scssLint esLint",
     "scssLint": "stylelint \"./src/**/*.scss\"",

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

@@ -15,9 +15,14 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 
 import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
 
-import { AuroDropdown } from '@auro-formkit/auro-dropdown';
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown';
 import dropdownVersion from './formkit/auro-dropdownVersion.js';
 
+import {
+  arrayConverter,
+  arrayOrUndefinedHasChanged
+} from '@aurodesignsystem/auro-menu';
+
 import styleCss from "./styles/style-css.js";
 import colorCss from "./styles/color-css.js";
 import tokensCss from "./styles/tokens-css.js";
@@ -31,6 +36,7 @@ import tokensCss from "./styles/tokens-css.js";
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
+ * @event input - Notifies every time the value prop of the element is changed.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -41,7 +47,7 @@ export class AuroSelect extends LitElement {
     super();
 
     this.optionSelected = undefined;
-    this.validity = undefined;
+    this.value = undefined;
 
     const idLength = 36;
     const idSubstrEnd = 8;
@@ -138,7 +144,9 @@ export class AuroSelect extends LitElement {
        * Specifies the current selected menuOption.
        */
       optionSelected: {
-        type: Object
+        // Allow HTMLElement[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
       },
 
       /**
@@ -197,8 +205,19 @@ export class AuroSelect extends LitElement {
        * Value selected for the component.
        */
       value: {
-        type: String
-      }
+        // Allow string[] arrays and undefined
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
+
+      /**
+       * Sets multi-select mode, allowing multiple options to be selected at once.
+       */
+      multiSelect: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'multiselect'
+      },
     };
   }
 
@@ -240,29 +259,30 @@ export class AuroSelect extends LitElement {
   }
 
   /**
-   * Updates the displayed value in an Auro dropdown component based on optionSelected
+   * Updates the displayed value in an Auro dropdown component based on optionSelected.
    * @private
    * @returns {void}
    */
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // remove all existing rendered value(s)
-    triggerContentEl.querySelectorAll('auro-menuoption, [auro-menuoption]').forEach((elm) => {
-      elm.remove();
-    });
+    // Clear everything except placeholder
+    const placeholder = triggerContentEl.querySelector('#placeholder');
+    triggerContentEl.innerHTML = '';
+    if (placeholder) {
+      triggerContentEl.appendChild(placeholder);
+    }
 
-    if (this.optionSelected) {
-      // clone the selected option and remove attributes that style it
-      const clone = this.optionSelected.cloneNode(true);
-      clone.removeAttribute('selected');
-      clone.removeAttribute('class');
+    // Handle selected options
+    if (this.optionSelected && this.optionSelected.length) {
+      // Create display text from selected options
+      const displayText = this.optionSelected.map((option) => option.textContent).join(', ');
 
-      // insert the non-styled clone into the trigger
-      triggerContentEl.appendChild(clone);
+      const span = document.createElement('span');
+      span.textContent = displayText;
+      triggerContentEl.appendChild(span);
     }
 
-    // notify dropdown as trigger content is changed
     this.dropdown.requestUpdate();
   }
 
@@ -282,6 +302,10 @@ export class AuroSelect extends LitElement {
       return;
     }
 
+    if (this.multiSelect) {
+      this.menu.multiSelect = this.multiSelect;
+    }
+
     this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     this.menu.setAttribute('aria-hidden', 'true');
 
@@ -292,8 +316,10 @@ export class AuroSelect extends LitElement {
     });
 
     this.menu.addEventListener('auroMenu-selectedOption', () => {
+      // Get array of selected options from menu
       this.optionSelected = this.menu.optionSelected;
-      this.value = this.optionSelected.value;
+      // For single select, we still use arrays but only take first value
+      this.value = this.menu.value;
 
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
@@ -308,7 +334,7 @@ export class AuroSelect extends LitElement {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.reset();
+      this.menu.clearSelection();
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
@@ -333,7 +359,7 @@ export class AuroSelect extends LitElement {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('up');
+          this.menu.navigateOptions('up');
         }
       }
 
@@ -343,7 +369,7 @@ export class AuroSelect extends LitElement {
         this.dropdown.show();
 
         if (this.dropdown.isPopoverVisible) {
-          this.menu.selectNextItem('down');
+          this.menu.navigateOptions('down');
         }
       }
 
@@ -406,7 +432,7 @@ export class AuroSelect extends LitElement {
      * input as no longer in the initial state.
      */
     if (this.value === undefined) {
-      this.value = '';
+      this.value = undefined;
       this.removeEventListener('focusin', this.handleFocusin);
     }
   }
@@ -464,22 +490,33 @@ export class AuroSelect extends LitElement {
     }
   }
 
-  updated(changedProperties) {
-    // After the component is ready, send direct value changes to auro-menu.
+  async updated(changedProperties) {
     if (changedProperties.has('value')) {
       if (this.value) {
         this.menu.value = this.value;
+
+        // Wait for menu to finish updating its value
+        await this.menu.updateComplete;
+
+        this.optionSelected = this.menu.optionSelected;
       } else {
         this.menu.value = undefined;
       }
 
       this.validation.validate(this);
 
+      // LEGACY EVENT
       this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
         bubbles: true,
         cancelable: false,
         composed: true,
       }));
+
+      this.dispatchEvent(new CustomEvent('input', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      }));
     }
 
     if (changedProperties.has('optionSelected')) {
@@ -487,7 +524,7 @@ export class AuroSelect extends LitElement {
     }
 
     if (changedProperties.has('error')) {
-      this.validation.validate(this, true);
+      this.validate(true);
     }
   }
 
@@ -499,6 +536,14 @@ export class AuroSelect extends LitElement {
     this.validation.reset(this);
   }
 
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
 
@@ -539,18 +584,18 @@ export class AuroSelect extends LitElement {
           <div class="menuWrapper">
           </div>
           <slot name="label" slot="label"></slot>
-          <span slot="helpText">
+          <p slot="helpText">
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? html`
-                <p class="selectElement-helpText" id="${this.uniqueId}" part="helpText">
+                <span id="${this.uniqueId}" part="helpText">
                   <slot name="helpText"></slot>
-                </p>`
+                </span>`
               : html`
-                <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
+                <span id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
                   ${this.errorMessage}
-                </p>`
+                </span>`
             }
-          </span>
+          </p>
         </${this.dropdownTag}>
         <!-- Help text and error message template -->
       </div>

package/components/select/src/dropdownVersion.js

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

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

@@ -1,2 +1,2 @@
 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_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}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events: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{padding:0;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}`;
+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_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}[slot=trigger]{width:100%;padding:0;border:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left}[slot=trigger] .nestingSpacer{display:none}[slot=trigger] #placeholder.hidden{position:absolute;z-index:-1;opacity:0;pointer-events: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{padding:0;pointer-events:none}.menuWrapper{padding:var(--ds-size-50, 0.25rem) 0}:host([multiselect]) [slot=trigger]{display:flex}:host([multiselect]) auro-menuoption:not(:first-child){margin-left:var(--ds-size-100)}`;

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

@@ -97,8 +97,9 @@ auro-menuoption {
   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;
+:host([multiselect]) [slot=trigger] {
+  display: flex;
+}
+:host([multiselect]) auro-menuoption:not(:first-child) {
+  margin-left: var(--ds-size-100);
 }

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

@@ -69,8 +69,15 @@ auro-menuoption {
   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;
+// Multiselect styles
+:host([multiselect]) {
+  [slot="trigger"] {
+    display: flex;
+  }
+
+  auro-menuoption {
+    &:not(:first-child) {
+      margin-left: var(--ds-size-100);
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.40",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",
@@ -11,7 +11,7 @@
   "engines": {
     "node": "^20.x || ^22.x"
   },
-  "packageManager": "npm@10.0.0",
+  "packageManager": "npm@11.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,10 +29,11 @@
     "types": "turbo run types",
     "dev": "turbo run dev --parallel",
     "lint": "turbo run lint",
-    "test": "echo \"Notice: no tests available\" && exit 0",
+    "test": "turbo run test",
+    "test:watch": "turbo run test:watch",
     "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",
+    "postinstall": "node ./packages/build-tools/src/postinstall.mjs",
     "build:docs": "turbo run build:docs",
     "build:docs:kit": "node ./packages/build-tools/src/kitDocProcessor.mjs",
     "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",
@@ -40,12 +41,15 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-library": "^3.0.5"
+    "@aurodesignsystem/auro-library": "^3.0.8"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "*"
   },
   "devDependencies": {
     "@aurodesignsystem/eslint-config": "^1.3.3",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
     "@open-wc/testing": "^4.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -58,30 +62,30 @@
     "babel-loader": "^9.2.1",
     "compression": "^1.7.5",
     "concat": "^1.0.3",
-    "concurrently": "^9.0.1",
+    "concurrently": "^9.1.2",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.38.1",
-    "eslint": "^9.14.0",
-    "eslint-plugin-jsdoc": "^50.5.0",
+    "core-js": "^3.40.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-jsdoc": "^50.6.1",
     "husky": "^9.1.7",
     "lodash": "^4.17.21",
-    "markdown-magic": "^2.6.1",
-    "nodemon": "^3.1.7",
+    "markdown-magic": "^3.3.0",
+    "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.0",
     "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",
+    "prettier": "^3.4.2",
+    "sass": "^1.83.1",
+    "semantic-release": "^24.2.1",
+    "stylelint": "^16.13.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.9.0",
-    "turbo": "^2.3.1",
-    "typescript": "^5.6.3",
+    "stylelint-scss": "^6.10.0",
+    "turbo": "^2.3.3",
+    "typescript": "^5.7.3",
     "whatwg-fetch": "^3.6.20",
     "yaml-lint": "^1.7.0"
   },

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

@@ -1,7 +1,7 @@
 import { Logger } from "@aurodesignsystem/auro-library/scripts/utils/logger.mjs";
+import fs from "node:fs/promises";
 import {
   fromAuroComponentRoot,
-  generateReadmeUrl,
   processContentForFile,
   templateFiller
 } from "@aurodesignsystem/auro-library/scripts/utils/sharedFileProcessorUtils.mjs";
@@ -16,7 +16,6 @@ import {
  * (like "_esm" to make README_esm.md).
  */
 
-
 /**
  * @param {ProcessorConfig} config - The configuration for this processor.
  */
@@ -30,6 +29,38 @@ export const defaultDocsProcessorConfig = {
   remoteReadmeVariant: "_updated_paths"
 };
 
+/**
+ * Get the version from the root package.json
+ * @returns {Promise<string>}
+ */
+async function getPackageVersion() {
+  const packageJsonPath = fromAuroComponentRoot('package.json');
+  const packageContent = await fs.readFile(packageJsonPath, 'utf8');
+  const packageJson = JSON.parse(packageContent);
+  return packageJson.version;
+}
+
+const formkitVersion = await getPackageVersion();
+
+export const monorepoVars = {
+  formkitVersion,
+  'monorepoName': 'auro-formkit',
+  'dependentComponents': [] //  populated by componentDependencyTree in processDocFiles
+}
+
+export const componentDependencyTree = {
+  'checkbox': ['checkbox'],
+  'combobox': ['dropdown', 'input', 'menu', 'combobox'],
+  'counter': ['counter'],
+  'datepicker': ['dropdown', 'input', 'popover', 'datepicker'],
+  'dropdown': ['dropdown'],
+  'form': ['form'],
+  'input': ['input'],
+  'menu': ['menu'],
+  'radio': ['radio'],
+  'select': ['dropdown', 'menu', 'select'],
+}
+
 /**
  * @param {ProcessorConfig} config - The configuration for this processor.
  * @returns {import('@aurodesignsystem/auro-library/scripts/utils/sharedFileProcessorUtils').FileProcessorConfig[]}
@@ -38,11 +69,7 @@ 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
-    },
+    input: fromAuroComponentRoot(`docs/templates/componentReadmeTemplate.md`),
     output: fromAuroComponentRoot(`components/${config.component}/README.md`)
   },
   // index.md
@@ -79,8 +106,10 @@ export async function processDocFiles(componentName) {
 
     for (const fileConfig of fileConfigs(config)) {
       try {
+        const dependencies = componentDependencyTree[config.component];
+
         // eslint-disable-next-line no-await-in-loop
-        await processContentForFile(fileConfig);
+        await processContentForFile({ ...fileConfig, extraVars: { ...monorepoVars, dependentComponents: dependencies} });
       } catch (err) {
         Logger.error(`Error processing ${fileConfig.identifier}: ${err.message}`);
       }

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

@@ -0,0 +1,8 @@
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+const postinstallPath = require.resolve('@aurodesignsystem/auro-library/scripts/build/postinstall.mjs');
+
+// Import and execute the script
+import(postinstallPath);

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

@@ -37,30 +37,87 @@ export default class AuroFormValidation {
   }
 
   /**
-   * Determines the validity state of the element based on the common attribute restrictions (pattern).
-   * @private
-   * @param {object} elem - HTML element to validate.
+   * Validates the attributes of a given element based on predefined validation rules.
+   *
+   * @param {HTMLElement} elem - The element to be validated.
    * @returns {void}
+   *
+   * @example
+   * // Assuming `inputElement` is a reference to an input element in the DOM
+   * validateElementAttributes(inputElement);
+   *
+   * The function checks the element's attributes against the validation rules defined for 'input' and 'counter' types.
+   * If a validation rule is violated, it sets the element's validity state and error message accordingly.
+   *
+   * Validation rules:
+   * - input:
+   *   - length:
+   *     - tooShort: Checks if the value length is less than the minimum length.
+   *     - tooLong: Checks if the value length exceeds the maximum length.
+   *   - pattern:
+   *     - patternMismatch: Checks if the value does not match the specified pattern.
+   * - counter:
+   *   - range:
+   *     - rangeOverflow: Checks if the value exceeds the maximum value.
+   *     - rangeUnderflow: Checks if the value is less than the minimum value.
    */
-  validateAttributes(elem) {
-    if (elem.pattern) {
-      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
-
-      if (!pattern.test(elem.value)) {
-        elem.validity = 'patternMismatch';
-        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
+  validateElementAttributes(elem) {
+    const validationRules = {
+      input: {
+        length: [
+          {
+            check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
+            validity: 'tooShort',
+            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+          },
+          {
+            check: (e) => e.value?.length > e.maxLength,
+            validity: 'tooLong',
+            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+          }
+        ],
+        pattern: [
+          {
+            check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
+            validity: 'patternMismatch',
+            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+          }
+        ]
+      },
+      counter: {
+        range: [
+          {
+            check: (e) => e.max !== undefined && Number(e.max) < Number(e.value),
+            validity: 'rangeOverflow',
+            message: e => e.getAttribute('setCustomValidityRangeOverflow') || ''
+          },
+          {
+            check: (e) => e.min !== undefined && Number(e.min) > Number(e.value),
+            validity: 'rangeUnderflow',
+            message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
+          }
+        ]
       }
+    };
+  
+    let elementType;
+    if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      elementType = 'input';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      elementType = 'counter';
     }
-
-    // Length > 0 is required to prevent the error message from showing when the input is empty
-    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
-      elem.validity = 'tooShort';
-      elem.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
-    }
     
-    if (elem.value?.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
+    if (elementType) {
+      const rules = validationRules[elementType];
+    
+      if (rules) {
+        Object.values(rules).flat().forEach(rule => {
+          if (rule.check(elem)) {
+            elem.validity = rule.validity;
+            elem.errorMessage = rule.message(elem);
+          }
+        });
+      }
     }
   }
 
@@ -170,7 +227,9 @@ export default class AuroFormValidation {
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
-        this.validateAttributes(elem);
+        this.validateElementAttributes(elem);
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+        this.validateElementAttributes(elem);
       }
     }
 

package/packages/utils/package.json

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