npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.4 → 2.0.0-beta.40 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (637) hide show

package/components/dropdown/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-dropdown",
+  "name": "@aurodesignsystem/auro-dropdown",
   "version": "3.0.0",
   "description": "auro-dropdown HTML custom element",
   "repository": {
@@ -12,6 +12,7 @@
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "dependencies": {
+    "@aurodesignsystem/auro-helptext": "*",
     "@aurodesignsystem/auro-icon": "^6.1.2",
     "@floating-ui/dom": "^1.6.11",
     "@popperjs/core": "^2.11.8",
@@ -19,14 +20,14 @@
     "lit": "^3.2.1"
   },
   "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.9.2",
+    "@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.12.1",
+    "@aurodesignsystem/design-tokens": "^4.13.0",
     "@aurodesignsystem/webcorestylesheets": "^5.1.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "postcss-selector-replace": "^1.0.2",
@@ -47,8 +48,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 7705",
+    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --watch --port 7705",
     "types": "tsc --project tsconfig.json",
     "lint": "npm-run-all scssLint esLint",
     "scssLint": "stylelint \"./src/**/*.scss\"",

package/components/dropdown/src/auro-dropdown.js CHANGED Viewed

@@ -3,8 +3,7 @@
 // ---------------------------------------------------------------------
-/* eslint-disable max-lines, lit-a11y/accessible-name, lit/no-invalid-html, lit/binding-positions,
-arrow-body-style, no-extra-parens, block-spacing, brace-style, curly, template-curly-spacing, no-underscore-dangle */
+/* eslint-disable max-lines, lit-a11y/accessible-name, lit/no-invalid-html, lit/binding-positions, template-curly-spacing, no-magic-numbers */
 import { html } from "lit/static-html.js";
 import { LitElement } from "lit";
@@ -21,6 +20,7 @@ import styleCss from "./styles/style-css.js";
 import colorCss from "./styles/color-css.js";
 import tokensCss from "./styles/tokens-css.js";
+import '@aurodesignsystem/auro-helptext';
 import './auro-dropdownBib.js';
 /**
@@ -32,7 +32,6 @@ import './auro-dropdownBib.js';
  * @csspart trigger - The trigger content container.
  * @csspart chevron - The collapsed/expanded state icon container.
  * @csspart helpText - The helpText content container.
- * @csspart popover - The bib content container.
  * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
  * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
  */
@@ -45,6 +44,25 @@ export class AuroDropdown extends LitElement {
     this.noHideOnThisFocusLoss = false;
     this.privateDefaults();
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
+    /**
+     * @private
+     */
+    this.triggerContentFocusable = false;
+    /**
+     * @private
+     */
+    this.showTriggerBorders = true;
   }
   /**
@@ -358,6 +376,64 @@ export class AuroDropdown extends LitElement {
     return inCustomSlot;
   }
+  /**
+   * Determines if the element or any children are focusable.
+   * @private
+   * @param {HTMLElement} element - Element to check.
+   * @returns {Boolean} - True if the element or any children are focusable.
+   */
+  containsFocusableElement(element) {
+    this.showTriggerBorders = true;
+    const nodes = [
+      element,
+      ...element.children
+    ];
+    const focusableElements = [
+      'a',
+      'auro-hyperlink',
+      'button',
+      'auro-button',
+      'input',
+      'auro-input',
+    ];
+    const focusableElementsThatNeedBorders = ['auro-input'];
+    const result = nodes.some((node) => {
+      const tagName = node.tagName.toLowerCase();
+      if (node.tabIndex > -1) {
+        return true;
+      }
+      if (focusableElements.includes(tagName)) {
+        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
+          return true;
+        }
+        if (!node.hasAttribute('disabled')) {
+          return true;
+        }
+      }
+      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
+        return true;
+      }
+      return false;
+    });
+    if (result) {
+      this.showTriggerBorders = !nodes.some((node) => {
+        const tagName = node.tagName.toLowerCase();
+        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
+      });
+    }
+    return result;
+  }
   /**
    * Handles changes to the trigger content slot and updates related properties.
    *
@@ -367,12 +443,30 @@ export class AuroDropdown extends LitElement {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {
     this.floater.handleTriggerTabIndex();
+    const triggerContentNodes = this.shadowRoot.querySelector('.triggerContent slot').assignedNodes();
+    triggerContentNodes.forEach((node) => {
+      if (!this.triggerContentFocusable) {
+        this.triggerContentFocusable = this.containsFocusableElement(node);
+      }
+    });
+    const trigger = this.shadowRoot.querySelector('#trigger');
+    if (!this.triggerContentFocusable) {
+      trigger.setAttribute('tabindex', '0');
+      trigger.setAttribute('role', 'button');
+    } else {
+      trigger.removeAttribute('tabindex');
+      trigger.removeAttribute('role');
+    }
     if (event) {
       this.triggerNode = event.target;
       this.triggerContentSlot = event.target.assignedNodes();
@@ -423,10 +517,9 @@ export class AuroDropdown extends LitElement {
           id="trigger"
           class="trigger"
           part="trigger"
-          role="button"
           aria-labelledby="triggerLabel"
-          aria-controls="popover"
           tabindex="${this.tabIndex}"
+          ?showBorder="${this.showTriggerBorders}"
           >
           <div class="triggerContentWrapper">
             <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
@@ -435,7 +528,7 @@ export class AuroDropdown extends LitElement {
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
+                @slotchange="${this.handleTriggerContentSlotChange}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? html`
@@ -452,11 +545,9 @@ export class AuroDropdown extends LitElement {
               </div>
             ` : undefined }
         </div>
-        <div
-          class="helpText"
-          part="helpText">
+        <auro-helptext part="helpText" ?error="${this.error}">
           <slot name="helpText"></slot>
-        </div>
+        </auro-helptext>
         <div class="slotContent">
           <slot @slotchange="${this.handleDefaultSlot}"></slot>
         </div>

package/components/dropdown/src/styles/color-css.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
+export default css`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;

package/components/dropdown/src/styles/color.css CHANGED Viewed

@@ -7,22 +7,20 @@
   border-color: var(--ds-auro-dropdown-trigger-border-color);
   background-color: var(--ds-auro-dropdown-trigger-container-color);
   color: var(--ds-auro-dropdown-trigger-text-color);
+  outline-color: var(--ds-auro-dropdown-trigger-outline-color);
 }
 .trigger:focus-within, .trigger:active {
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);
+  --ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8);
 }
 .trigger:focus-within:not(:active) {
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
-  outline: 1px solid var(--ds-color-border-ui-focus-default, #2c67b5);
+  --ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5);
 }
 .trigger:hover {
   --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));
 }
-.helpText {
-  color: var(--ds-auro-dropdown-help-text-color);
-}
 :host([disabled]) {
   --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
   --ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
@@ -39,7 +37,6 @@
 }
 :host([error]) {
-  --ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816);
 }
 :host([error]) .trigger {

package/components/dropdown/src/styles/color.scss CHANGED Viewed

@@ -15,16 +15,18 @@
   border-color: var(--ds-auro-dropdown-trigger-border-color);
   background-color: var(--ds-auro-dropdown-trigger-container-color);
   color: var(--ds-auro-dropdown-trigger-text-color);
+  outline-color: var(--ds-auro-dropdown-trigger-outline-color);
   &:focus-within,
   &:active {
     --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
+    --ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #{$ds-color-border-active-default});
   }
   &:focus-within {
     &:not(:active) {
       --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
-      outline: 1px solid var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
+      --ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
     }
   }
@@ -33,10 +35,6 @@
   }
 }
-.helpText {
-  color: var(--ds-auro-dropdown-help-text-color);
-}
 :host([disabled]) {
   --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
   --ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
@@ -55,7 +53,6 @@
 }
 :host([error]) {
-  --ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
   .trigger {

package/components/dropdown/src/styles/style-css.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+export default css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;

package/components/dropdown/src/styles/style.css CHANGED Viewed

@@ -30,8 +30,13 @@
   position: relative;
   display: flex;
   align-items: center;
+}
+.trigger[showBorder] {
   border-width: 1px;
   border-style: solid;
+  cursor: pointer;
+  outline-style: solid;
+  outline-width: 1px;
 }
 @media (hover: hover) {
@@ -63,12 +68,6 @@
 }
 /* stylelint-enable selector-id-pattern */
-.helpText {
-  margin-top: var(--ds-size-50, 0.25rem);
-  font-size: var(--ds-text-body-size-xs, 0.75rem);
-  line-height: var(--ds-text-body-size-default, 1rem);
-}
 :host([matchwidth]) #bibSizer {
   width: 100%;
 }

package/components/dropdown/src/styles/style.scss CHANGED Viewed

@@ -44,8 +44,14 @@
   position: relative;
   display: flex;
   align-items: center;
-  border-width: 1px;
-  border-style: solid;
+  &[showBorder] {
+    border-width: 1px;
+    border-style: solid;
+    cursor: pointer;
+    outline-style: solid;
+    outline-width: 1px;
+  }
 }
 @media (hover: hover) {
@@ -85,12 +91,6 @@
 }
 /* stylelint-enable selector-id-pattern */
-.helpText {
-  margin-top: var(--ds-size-50, $ds-size-50);
-  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
-  line-height: var(--ds-text-body-size-default, $ds-text-body-size-default);
-}
 :host([matchwidth]) {
   #bibSizer {
     width: 100%;

package/components/dropdown/src/styles/tokens-css.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+export default css`:host{--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;

package/components/dropdown/src/styles/tokens.css CHANGED Viewed

@@ -1,11 +1,11 @@
 :host {
-  --ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);
   --ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);
   --ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);
   --ds-auro-dropdown-popover-border-color: transparent;
   --ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);
   --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);
   --ds-auro-dropdown-trigger-border-color: transparent;
+  --ds-auro-dropdown-trigger-outline-color: transparent;
   --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);
   --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));
   --ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);

package/components/dropdown/src/styles/tokens.scss CHANGED Viewed

@@ -1,13 +1,13 @@
 @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 :host {
-  --ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-dropdown-popover-border-color: transparent;
   --ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-dropdown-trigger-border-color: transparent;
+  --ds-auro-dropdown-trigger-outline-color: transparent;
   --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   --ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200});
   --ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});

package/components/form/.turbo/turbo-build$colon$sass.log CHANGED Viewed

@@ -1,8 +1,8 @@
-> @auro-formkit/auro-form@1.0.0 build:sass
+> @aurodesignsystem/auro-form@1.0.0 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -12,7 +12,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style.scss 7:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -22,7 +22,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style.scss 8:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -32,7 +32,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 11:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -42,7 +42,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 12:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import

package/components/form/.turbo/turbo-build$colon$version.log CHANGED Viewed

@@ -1,4 +1,4 @@
-> @auro-formkit/auro-form@1.0.0 build:version
+> @aurodesignsystem/auro-form@1.0.0 build:version
 > node ./src/scripts/version.mjs

package/components/form/.turbo/turbo-build.log CHANGED Viewed

@@ -1,16 +1,16 @@
-> @auro-formkit/auro-form@1.0.0 build
+> @aurodesignsystem/auro-form@1.0.0 build
 > run-s build:version build:sass bundler build:docs types
-> @auro-formkit/auro-form@1.0.0 build:version
+> @aurodesignsystem/auro-form@1.0.0 build:version
 > node ./src/scripts/version.mjs
-> @auro-formkit/auro-form@1.0.0 build:sass
+> @aurodesignsystem/auro-form@1.0.0 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -20,7 +20,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style.scss 7:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -30,7 +30,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/style.scss 8:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -40,7 +40,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 11:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -50,7 +50,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 12:9  root stylesheet
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 More info and automated migrator: https://sass-lang.com/d/import
@@ -64,33 +64,29 @@ WARNING: 3 repetitive deprecation warnings omitted.
 Run in verbose mode to see all warnings.
-> @auro-formkit/auro-form@1.0.0 bundler
+> @aurodesignsystem/auro-form@1.0.0 bundler
 > rollup -c node:@auro-formkit/config/rollup
 [36m
 [1m./src/index.js[22m → [1mdist[22m...[39m
-[32mcreated [1mdist[22m in [1m551ms[22m[39m
+[32mcreated [1mdist[22m in [1m188ms[22m[39m
 [36m
 [1m./demo/index.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m314ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m94ms[22m[39m
 [36m
 [1m./demo/api.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m300ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m81ms[22m[39m
-> @auro-formkit/auro-form@1.0.0 build:docs
+> @aurodesignsystem/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form
 Web Component Analyzer analyzing 1 file...
-Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/form/docTemplates/README.md" file...
 ✔ /README.md Updated
  Transforms run
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md
-  ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md
@@ -98,6 +94,9 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/form/d
   ⁕ REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md
   ⁕ FILE:src=./docs/partials/description.md
   ⁕ FILE:src=./docs/partials/readmeAddlInfo.md
+  ⁕ FILE:src=../../docs/templates/componentInstall.md
+  ⁕ FILE:src=../../docs/templates/componentUsage.md
+  ⁕ FILE:src=../../docs/templates/componentBundleUseModBrowsers.md
   ⁕ FILE:src=./docs/partials/useCases.md
   ⁕ CODE:src=./apiExamples/basic.html
   ⁕ CODE:src=./apiExamples/basic.html
@@ -108,6 +107,6 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/form/d
 Docs processed successfully for form
-> @auro-formkit/auro-form@1.0.0 types
+> @aurodesignsystem/auro-form@1.0.0 types
 > tsc --project tsconfig.json

package/components/form/.turbo/turbo-bundler.log CHANGED Viewed

@@ -1,13 +1,13 @@
-> @auro-formkit/auro-form@1.0.0 bundler
+> @aurodesignsystem/auro-form@1.0.0 bundler
 > rollup -c node:@auro-formkit/config/rollup
 [36m
 [1m./src/index.js[22m → [1mdist[22m...[39m
-[32mcreated [1mdist[22m in [1m754ms[22m[39m
+[32mcreated [1mdist[22m in [1m360ms[22m[39m
 [36m
 [1m./demo/index.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m317ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m255ms[22m[39m
 [36m
 [1m./demo/api.js[22m → [1m./demo/[22m...[39m
-[32mcreated [1m./demo/[22m in [1m302ms[22m[39m
+[32mcreated [1m./demo/[22m in [1m218ms[22m[39m

package/components/form/.turbo/turbo-postCss$colon$component.log CHANGED Viewed

@@ -1,5 +1,4 @@
-> @auro-formkit/auro-form@1.0.0 postCss:component
+> @aurodesignsystem/auro-form@1.0.0 postCss:component
 > node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs
-Unable to scan directory: Error: ENOENT: no such file or directory, scandir '/home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-library/scripts/src'

package/components/form/.turbo/turbo-sass$colon$render.log CHANGED Viewed

@@ -1,9 +1,9 @@
-> @auro-formkit/auro-form@1.0.0 sass:render
+> @aurodesignsystem/auro-form@1.0.0 sass:render
 > sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js
 Rendering src/styles/style.css...
-DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
+DEPRECATION WARNING [user-authored]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 More info: https://sass-lang.com/d/legacy-js-api

package/components/form/.turbo/turbo-types.log CHANGED Viewed

@@ -1,4 +1,4 @@
-> @auro-formkit/auro-form@1.0.0 types
+> @aurodesignsystem/auro-form@1.0.0 types
 > tsc --project tsconfig.json