@aurodesignsystem/auro-formkit 2.0.0-beta.3 → 2.0.0-beta.30

package/components/dropdown/package.json

@@ -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",
@@ -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

@@ -4,7 +4,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 */
+arrow-body-style, no-extra-parens, block-spacing, brace-style, curly, template-curly-spacing, no-underscore-dangle */
 
 import { html } from "lit/static-html.js";
 import { LitElement } from "lit";
@@ -21,25 +21,11 @@ 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';
 
 /**
- * @attr { Boolean } bordered - If declared, applies a border around the trigger slot.
- * @attr { Boolean } common - If declared, the dropdown will be styled with the common theme.
- * @attr { Boolean } chevron - If declared, the dropdown displays an display state chevron on the right.
- * @attr { Boolean } disabled - If declared, the dropdown is not interactive.
  * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
- * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
- * @attr {Boolean} fluid - Makes the trigger to be full width of its parent container
- * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width.
- * @attr { Boolean } inset - If declared, will apply padding around trigger slot content.
- * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots.
- * @attr { Boolean } hoverToggle - if declared, the trigger will toggle the big on mouseover/mouseout.
- * @attr { Boolean } noToggle - If declared, the trigger will only show the dropdown bib.
- * @attr { Boolean } focusShow - if declared, the bib will display when focus is applied to the trigger.
- * @attr { Boolean } noHideOnThisFocusLoss - If declared, the dropdown will not hide when moving focus outside the element.
- * @attr { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
- * @prop { Boolean } isPopoverVisible - If true, the dropdown bib is displayed.
  * @slot - Default slot for the popover content.
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -77,6 +63,16 @@ export class AuroDropdown extends LitElement {
     this.tabIndex = 0;
     this.noToggle = false;
 
+    /**
+     * @private
+     */
+    this.hasTriggerContent = false;
+
+    /**
+     * @private
+     */
+    this.triggerContentSlot = undefined;
+
     /**
      * @private
      */
@@ -123,89 +119,166 @@ export class AuroDropdown extends LitElement {
   // function to define props used within the scope of this component
   static get properties() {
     return {
+
+      /**
+       * If declared, applies a border around the trigger slot.
+       */
       bordered: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If declared, the dropdown displays a chevron on the right.
+       * @attr {Boolean} chevron
+       */
       chevron: {
         type: Boolean,
         reflect: true
       },
-      disabled: {
+
+      /**
+       * If declared, the dropdown will be styled with the common theme.
+       */
+      common: {
         type: Boolean,
         reflect: true
       },
-      error: {
+
+      /**
+       * If declared, the dropdown is not interactive.
+       */
+      disabled: {
         type: Boolean,
         reflect: true
       },
-      fluid: {
+
+      /**
+       * @private
+       */
+      dropdownWidth: {
+        type: Number
+      },
+
+      /**
+       * If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both.
+       */
+      error: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
+
+      /**
+       * If declared, the bib will display when focus is applied to the trigger.
+       */
       focusShow: {
         type: Boolean,
         reflect: true
       },
-      hoverToggle: {
+
+      /**
+       * Makes the trigger to be full width of its parent container.
+       */
+      fluid: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If declared, will apply padding around trigger slot content.
+       */
       inset: {
         type: Boolean,
         reflect: true
       },
-      matchWidth: {
+
+      /**
+       * If true, the dropdown bib is displayed.
+       */
+      isPopoverVisible: {
+        type: Boolean
+      },
+
+      /**
+       * If declared, the trigger will toggle the dropdown on mouseover/mouseout.
+       */
+      hoverToggle: {
         type: Boolean,
         reflect: true
       },
-      rounded: {
-        type: Boolean,
+
+      /**
+       * @private
+       */
+      hasTriggerContent: {
+        type: Boolean
+      },
+
+      /**
+       * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+       */
+      mobileFullscreenBreakpoint: {
+        type: String,
         reflect: true
       },
-      common: {
+
+      /**
+       * If declared, the popover and trigger will be set to the same width.
+       */
+      matchWidth: {
         type: Boolean,
         reflect: true
       },
-      noToggle: {
+
+      /**
+       * If declared, the dropdown will not hide when moving focus outside the element.
+       */
+      noHideOnThisFocusLoss: {
         type: Boolean,
         reflect: true
       },
-      noHideOnThisFocusLoss: {
+
+      /**
+       * If declared, the trigger will only show the dropdown bib.
+       */
+      noToggle: {
         type: Boolean,
         reflect: true
       },
-      isPopoverVisible: { type: Boolean },
+
       onSlotChange: {
         type: Function,
         reflect: false
       },
-      mobileFullscreenBreakpoint: {
-        type: String,
-        reflect: true,
-      },
 
       /**
        * @private
        */
-      dropdownWidth: { type: Number },
+      placement: {
+        type: String
+      },
 
       /**
-       * @private
+       * If declared, will apply border-radius to trigger and default slots.
        */
-      placement:     { type: String },
+      rounded: {
+        type: Boolean,
+        reflect: true
+      },
 
       /**
        * @private
        */
-      tabIndex: { type: Number }
+      tabIndex: {
+        type: Number
+      }
     };
   }
 
   static get styles() {
     return [
-      styleCss,
       colorCss,
+      styleCss,
       tokensCss
     ];
   }
@@ -236,6 +309,12 @@ export class AuroDropdown extends LitElement {
     if (changedProperties.has('mobileFullscreenBreakpoint')) {
       this.bibContent.mobileFullscreenBreakpoint = this.mobileFullscreenBreakpoint;
     }
+
+    // when trigger's content is changed without any attribute or node change,
+    // `requestUpdate` needs to be called to update hasTriggerContnet
+    if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
+      this.handleTriggerContentSlotChange();
+    }
   }
 
   firstUpdated() {
@@ -280,6 +359,43 @@ export class AuroDropdown extends LitElement {
     return inCustomSlot;
   }
 
+  /**
+   * Handles changes to the trigger content slot and updates related properties.
+   *
+   * It first updates the floater settings
+   * Then, it retrieves the assigned nodes from the event target and checks if any of
+   * the nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.
+   *
+   * @private
+   * @method handleTriggerContentSlotChange
+   * @param {Event} event - native slotchange event
+   * @returns {void}
+   */
+  handleTriggerContentSlotChange(event) {
+    this.floater.handleTriggerTabIndex();
+
+    if (event) {
+      this.triggerNode = event.target;
+      this.triggerContentSlot = event.target.assignedNodes();
+    }
+
+    if (this.triggerContentSlot) {
+      this.hasTriggerContent = this.triggerContentSlot.some((slot) => {
+        if (slot.textContent.trim()) {
+          return true;
+        }
+        const slotInSlot = slot.querySelector('slot');
+        if (!slotInSlot) {
+          return false;
+        }
+        const slotsInSlotNodes = slotInSlot.assignedNodes();
+        return slotsInSlotNodes.some((ss) => Boolean(ss.textContent.trim()));
+      });
+    } else {
+      this.hasTriggerContent = false;
+    }
+  }
+
   /**
    * Handles the default slot change event and updates the content.
    *
@@ -314,13 +430,13 @@ export class AuroDropdown extends LitElement {
           tabindex="${this.tabIndex}"
           >
           <div class="triggerContentWrapper">
-            <label class="label" id="triggerLabel">
+            <label class="label" id="triggerLabel" hasTrigger=${this.hasTriggerContent}>
               <slot name="label"></slot>
             </label>
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
+                @slotchange="${this.handleTriggerContentSlotChange}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? html`
@@ -337,11 +453,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/auro-dropdownBib.js

@@ -22,9 +22,6 @@ const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
 ];
 
 /**
- * @attr { Boolean } common - If declared, will apply all styles for the common theme.
- * @attr { Boolean } rounded - If declared, will apply border-radius to the bib.
- * @attr { Boolean } inset - If declared, will apply extra padding to bib content.
  * @prop { String } mobileFullscreenBreakpoint - Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
  * @csspart bibContainer - Apply css to the bib container.
  */
@@ -50,14 +47,26 @@ export class AuroDropdownBib extends LitElement {
 
   static get properties() {
     return {
+
+      /**
+       * If declared, will apply all styles for the common theme.
+       */
       common: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If declared, will apply extra padding to bib content.
+       */
       inset: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If declared, will apply border-radius to the bib.
+       */
       rounded: {
         type: Boolean,
         reflect: true

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

@@ -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)}.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))}: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

@@ -19,10 +19,6 @@
   --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 +35,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

@@ -33,10 +33,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 +51,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

@@ -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);white-space:normal}.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;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)}: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

@@ -19,8 +19,12 @@
 .label {
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   line-height: var(--ds-text-body-size-default, 1rem);
+  transition: font-size 0.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;
@@ -59,12 +63,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

@@ -32,7 +32,12 @@
 .label {
   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);
+  transition: font-size .3s cubic-bezier(.215, .61, .355, 1);
   white-space: normal;
+
+  &[hasTrigger='false'] {
+    font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
+  }
 }
 
 .trigger {
@@ -80,12 +85,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

@@ -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-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

@@ -1,5 +1,4 @@
 :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;

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

@@ -1,7 +1,6 @@
 @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;

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

@@ -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

@@ -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