@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.10

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,8 +12,8 @@
     "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"

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

@@ -7,6 +7,7 @@
 
 // If using litElement base class
 import { LitElement } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit/static-html.js';
 
 import AuroFormValidation from '@auro-formkit/form-validation';
@@ -14,7 +15,7 @@ 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 styleCss from "./styles/style-css.js";
@@ -25,22 +26,10 @@ import tokensCss from "./styles/tokens-css.js";
 /**
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
  *
- * @attr {String} validity - Specifies the `validityState` this element is in.
- * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
- * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
- * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
- * @attr {Boolean} required - Populates the `required` attribute on the element. Used for client-side validation.
- * @attr {Boolean} flexMenuWidth - If set, makes dropdown bib width match the size of the content, rather than the width of the trigger.
- * @prop {String} placeholder - Define placeholder text to display before a value is manually selected.
- * @prop {String} value - Value selected for the component.
- * @prop {Boolean} disabled - When attribute is present element shows disabled state.
- * @prop {Boolean} noCheckmark - When true, checkmark on selected option will no longer be present.
- * @attr {Object} optionSelected - Specifies the current selected menuOption.
  * @slot - Default slot for the menu content.
  * @slot label - Defines the content of the label.
  * @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 auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
@@ -51,7 +40,6 @@ export class AuroSelect extends LitElement {
   constructor() {
     super();
 
-    this.placeholder = 'Please select option';
     this.optionSelected = undefined;
     this.validity = undefined;
 
@@ -106,68 +94,118 @@ export class AuroSelect extends LitElement {
   // to understand how to use reflected attributes with your property settings.
   static get properties() {
     return {
-      // ...super.properties,
-      optionSelected: {
-        type: Object
+
+      /**
+       * When attribute is present, element shows disabled state.
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true
       },
-      value: {
-        type: String
+
+      /**
+       * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
+       */
+      flexMenuWidth: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * When true, checkmark on selected option will no longer be present.
+       */
+      noCheckmark: {
+        type: Boolean,
+        reflect: true
       },
+
+      /**
+       * If set, disables auto-validation on blur.
+       */
       noValidate: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      optionActive: {
+        type: Object
+      },
+
+      /**
+       * Specifies the current selected menuOption.
+       */
+      optionSelected: {
+        type: Object
+      },
+
+      /**
+       * @private
+       */
+      options: {
+        type: Array
+      },
+
+      /**
+       * Populates the `required` attribute on the element. Used for client-side validation.
+       */
       required: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+       */
       error: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Sets a custom help text message to display for all validityStates.
+       */
       setCustomValidity: {
         type: String
       },
+
+      /**
+       * Custom help text message to display when validity = `customError`.
+       */
       setCustomValidityCustomError: {
         type: String
       },
+
+      /**
+       * Custom help text message to display when validity = `valueMissing`.
+       */
       setCustomValidityValueMissing: {
         type: String
       },
+
+      /**
+       * Specifies the `validityState` this element is in.
+       */
       validity: {
         type: String,
         reflect: true
       },
-      disabled: {
-        type: Boolean,
-        reflect: true
-      },
-      noCheckmark: {
-        type: Boolean,
-        reflect: true
-      },
-      flexMenuWidth: {
-        type: Boolean,
-        reflect: true
-      },
-      placeholder: { type: String },
-
-      /**
-       * @private
-       */
-      options: { type: Array },
 
       /**
-       * @private
+       * Value selected for the component.
        */
-      optionActive: { type: Object },
+      value: {
+        type: String
+      }
     };
   }
 
   static get styles() {
     return [
-      styleCss,
       colorCss,
+      styleCss,
       tokensCss
     ];
   }
@@ -202,36 +240,30 @@ export class AuroSelect extends LitElement {
   }
 
   /**
-   * Updates the displayed value in an Auro dropdown component based on the provided option.
-   * @param {string|HTMLElement} option - The option to display. If a string, a new span element with the value string is created. If an HTMLElement, the selected option is cloned and non-styling attributes are removed.
+   * Updates the displayed value in an Auro dropdown component based on optionSelected
    * @private
    * @returns {void}
    */
-  updateDisplayedValue(option) {
+  updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
     // remove all existing rendered value(s)
-    triggerContentEl.querySelectorAll('auro-menuoption, [valuestr], [auro-menuoption]').forEach((elm) => {
+    triggerContentEl.querySelectorAll('auro-menuoption, [auro-menuoption]').forEach((elm) => {
       elm.remove();
     });
 
-    if (typeof option === 'string' && option !== this.placeholder) {
-      // create a new span element with the value string
-      const valueElem = document.createElement('span');
-      valueElem.setAttribute('valuestr', true);
-      valueElem.textContent = option;
-
-      // append the new element into the trigger content
-      triggerContentEl.appendChild(valueElem);
-    } else if (typeof option === 'object') {
+    if (this.optionSelected) {
       // clone the selected option and remove attributes that style it
-      const clone = option.cloneNode(true);
+      const clone = this.optionSelected.cloneNode(true);
       clone.removeAttribute('selected');
       clone.removeAttribute('class');
 
       // insert the non-styled clone into the trigger
       triggerContentEl.appendChild(clone);
     }
+
+    // notify dropdown as trigger content is changed
+    this.dropdown.requestUpdate();
   }
 
   /**
@@ -241,7 +273,7 @@ export class AuroSelect extends LitElement {
    */
   configureMenu() {
     this.menu = this.querySelector('auro-menu, [auro-menu]');
-    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
+
     // racing condition on custom-select with custom-menu
     if (!this.menu) {
       setTimeout(() => {
@@ -250,6 +282,7 @@ export class AuroSelect extends LitElement {
       return;
     }
 
+    this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
     this.menu.setAttribute('aria-hidden', 'true');
 
     this.generateOptionsArray();
@@ -262,8 +295,6 @@ export class AuroSelect extends LitElement {
       this.optionSelected = this.menu.optionSelected;
       this.value = this.optionSelected.value;
 
-      this.updateDisplayedValue(this.optionSelected);
-
       if (this.dropdown.isPopoverVisible) {
         this.dropdown.hide();
       }
@@ -277,25 +308,11 @@ export class AuroSelect extends LitElement {
      * with `auro-select.value`.
      */
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {
-      this.menu.optionSelected = undefined;
-      this.optionSelected = this.menu.optionSelected;
-
-      this.validity = 'badInput';
-
-      // Capitalizes the first letter of each word in this.value string
-      const valueStr = this.value.replace(/(^\w{1})|(\s+\w{1})/gu, (letter) => letter.toUpperCase());
-
-      // Pass the new string to the trigger content
-      this.updateDisplayedValue(valueStr);
+      this.reset();
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      // set the trigger content back to the placeholder
-      this.updateDisplayedValue(this.placeholder);
-
-      this.optionSelected = undefined;
-      this.value = undefined;
-
+      this.optionSelected = this.menu.optionSelected;
       this.validation.validate(this);
     });
   }
@@ -347,8 +364,6 @@ export class AuroSelect extends LitElement {
     this.addEventListener('blur', () => {
       this.validation.validate(this);
     });
-
-    this.labelForSr();
   }
 
   /**
@@ -467,6 +482,10 @@ export class AuroSelect extends LitElement {
       }));
     }
 
+    if (changedProperties.has('optionSelected')) {
+      this.updateDisplayedValue();
+    }
+
     if (changedProperties.has('error')) {
       this.validation.validate(this, true);
     }
@@ -480,52 +499,15 @@ export class AuroSelect extends LitElement {
     this.validation.reset(this);
   }
 
-  /**
-   * Handles reading of auro-select by screen readers.
-   * @private
-   * @returns {void}
-   */
-  labelForSr() {
-    const placeholderLabel = document.createElement("div");
-    const textId = "label";
-
-    placeholderLabel.setAttribute("id", textId);
-    placeholderLabel.setAttribute("aria-live", "polite");
-
-    const styles = {
-      position: 'absolute',
-      overflow: 'hidden',
-      clipPath: 'inset(1px, 1px, 1px, 1px)',
-      width: '1px',
-      height: '1px',
-      padding: '0',
-      border: '0'
-    };
-
-    Object.assign(placeholderLabel.style, styles);
-
-    this.addEventListener('focus', () => {
-      document.body.appendChild(placeholderLabel);
-
-      if (!this.optionSelected) {
-        document.getElementById(textId).innerHTML = this.placeholder;
-      } else {
-        document.getElementById(textId).innerHTML = `${this.optionSelected.innerText}, ${this.placeholder}`;
-      }
-    });
-
-    this.addEventListener('blur', () => {
-      if (document.contains(placeholderLabel)) {
-        document.body.removeChild(placeholderLabel);
-      }
-    });
-  }
-
   // When using auroElement, use the following attribute and function when hiding content from screen readers.
   // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
 
   // function that renders the HTML and CSS into  the scope of the component
   render() {
+    const placeholderClass = {
+      hidden: this.value,
+    };
+
     return html`
       <div class="outerWrapper">
         <div aria-live="polite" class="util_displayHiddenVisually">
@@ -552,7 +534,7 @@ export class AuroSelect extends LitElement {
           chevron
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            ${this.value ? this.displayValue : html`<span class="placeholder">${this.placeholder}</span>`}
+            <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
           </span>
           <div class="menuWrapper">
           </div>
@@ -565,7 +547,7 @@ export class AuroSelect extends LitElement {
                 </p>`
               : html`
                 <p class="selectElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-                  ${this.setCustomValidity}
+                  ${this.errorMessage}
                 </p>`
             }
           </span>

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}: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}`;
+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}`;

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

@@ -62,6 +62,12 @@
 [slot=trigger] .nestingSpacer {
   display: none;
 }
+[slot=trigger] #placeholder.hidden {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
 
 :host [auro-dropdown] {
   position: relative;
@@ -83,6 +89,7 @@
 }
 
 auro-menuoption {
+  padding: 0;
   pointer-events: none;
 }
 

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

@@ -24,7 +24,16 @@
   .nestingSpacer {
     display: none;
   }
-}
+
+  #placeholder {
+    &.hidden {
+      position: absolute;
+      z-index: -1;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+} 
 
 :host {
   [auro-dropdown] {
@@ -52,6 +61,7 @@
 }
 
 auro-menuoption {
+  padding: 0;
   pointer-events: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.10",
   "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"
   },
@@ -40,12 +40,12 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-library": "^3.0.5"
+    "@aurodesignsystem/auro-library": "^3.0.7"
   },
   "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 +58,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}`);
       }