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

package/components/datepicker/dist/inputVersion.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "4.2.0";
+export default _default;
+//# sourceMappingURL=inputVersion.d.ts.map

package/components/datepicker/dist/inputVersion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputVersion.d.ts","sourceRoot":"","sources":["../src/inputVersion.js"],"names":[],"mappings":"wBAAe,OAAO"}

package/components/datepicker/dist/utilitiesCalendarRender.d.ts

@@ -17,7 +17,7 @@ export class UtilitiesCalendarRender {
     /**
      * Determines how many calendar months can be rendered based on the screen size and defined range.
      * @param {Object} elem - The auro-calendar element.
-     * @param {Boolean} isMobile - true if it's to render for mobile view
+     * @param {Boolean} isMobile - True if it's to render for mobile view.
      * @private
      * @returns {Number} Returns the maximum number of months that can be rendered.
      */
@@ -25,7 +25,7 @@ export class UtilitiesCalendarRender {
     /**
      * Determines the number of months rendered inside the calendar.
      * @param {Object} elem - The auro-calendar element.
-     * @param {Boolean} isMobile - true if it's to render for mobile view
+     * @param {Boolean} isMobile - True if it's to render for mobile view.
      * @private
      * @returns {void}
      */

package/components/datepicker/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-datepicker",
+  "name": "@aurodesignsystem/auro-datepicker",
   "version": "3.2.0",
   "description": "auro-datepicker HTML custom element",
   "type": "module",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@alaskaairux/icons": "^4.44.1",
-    "@auro-formkit/auro-dropdown": "*",
-    "@auro-formkit/auro-input": "*",
+    "@aurodesignsystem/auro-dropdown": "*",
+    "@aurodesignsystem/auro-input": "*",
     "@auro-formkit/form-validation": "*",
     "@aurodesignsystem/auro-popover": "^4.1.2",
     "@material/mwc-icon-button": "^0.27.0",
@@ -69,8 +69,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 --config \"../../packages/config/src/web-test-runner.config.mjs\"  --watch",
+    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage --port 7706",
+    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\"  --watch --port 7706",
     "types": "tsc --project tsconfig.json",
     "lint": "npm-run-all scssLint esLint",
     "scssLint": "stylelint \"./src/**/*.scss\"",

package/components/datepicker/src/auro-calendar.js

@@ -25,7 +25,7 @@ import { UtilitiesCalendarRender } from './utilitiesCalendarRender.js';
  * @prop {Date} minDate - Minimum date. All dates before will be disabled.
  * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
  * Not to be confused with the focused date (therefore not necessarily in active month view).
- * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
+ * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:.
  * @prop {Boolean} visible - Flag indicating if the calendar is visible.
  * - 'short' (e.g., Thu)
  * - 'narrow' (e.g., T).

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

@@ -3,7 +3,7 @@
 
 // ---------------------------------------------------------------------
 
-/* eslint-disable max-lines, max-depth, no-magic-numbers, complexity, newline-per-chained-call, no-underscore-dangle, lit/binding-positions,
+/* eslint-disable max-lines, no-magic-numbers, complexity, newline-per-chained-call, no-underscore-dangle, lit/binding-positions,
    lit/no-invalid-html, no-unused-expressions */
 
 // If using litElement base class
@@ -25,34 +25,14 @@ import tokensCss from "./styles/tokens-css.js";
 
 import './auro-calendar.js';
 
-import { AuroDropdown } from '@auro-formkit/auro-dropdown';
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown';
 import dropdownVersion from './formkit/auro-dropdownVersion.js';
 
-import { AuroInput } from '@auro-formkit/auro-input';
+import { AuroInput } from '@aurodesignsystem/auro-input';
 import inputVersion from './formkit/auro-inputVersion.js';
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * @prop {String} value - Value selected for the date picker.
- * @prop {String} valueEnd - Value selected for the second date picker when using date range.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
- * @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} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`.
- * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`.
- * @attr {String} setCustomValidityValueMissing - Help text message to display when validity = `valueMissing`.
- * @attr {String} calendarStartDate - The first date that may be displayed in the calendar.
- * @attr {String} calendarEndDate - The last date that may be displayed in the calendar
- * @attr {String} calendarFocusDate - The date that will first be visually rendered to the user in the calendar.
- * @attr {Boolean} disabled - If set, disables the datepicker.
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
- * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
- * @attr {Boolean} range - If set, turns on date range functionality in auro-calendar.
- * @attr {String} centralDate - The date that determines the currently visible month.
- * @attr {String} maxDate - Maximum date. All dates after will be disabled.
- * @attr {String} minDate - Minimum date. All dates before will be disabled.
- * @attr {Array} monthNames = Names of all 12 months to render in the calendar, used for localization of date string in mobile layout.
  * @slot helpText - Defines the content of the helpText.
  * @slot mobileDateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
@@ -149,7 +129,15 @@ export class AuroDatePicker extends LitElement {
      * Generate unique names for dependency components.
      */
     const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
     this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+
+    /**
+     * @private
+     */
     this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
   }
 
@@ -159,100 +147,155 @@ export class AuroDatePicker extends LitElement {
   static get properties() {
     return {
       // ...super.properties,
-      error: {
+      /**
+       * The last date that may be displayed in the calendar.
+       */
+      calendarEndDate: {
         type: String,
         reflect: true
       },
-      noValidate: {
-        type: Boolean
-      },
-      setCustomValidity: {
-        type: String,
-      },
-      setCustomValidityCustomError: {
-        type: String,
-      },
-      setCustomValidityRangeUnderflow: {
-        type: String,
-      },
-      setCustomValidityRangeOverflow: {
-        type: String,
-      },
-      setCustomValidityValueMissing: {
+
+      /**
+       * The date that will first be visually rendered to the user in the calendar.
+       */
+      calendarFocusDate: {
         type: String,
+        reflect: true
       },
-      validity: {
+
+      /**
+       * The first date that may be displayed in the calendar.
+       */
+      calendarStartDate: {
         type: String,
         reflect: true
       },
-      range: {
-        type: Boolean,
-        reflect: true
+
+      /**
+       * The date that determines the currently visible month.
+       */
+      centralDate: {
+        type: String
       },
+
+      /**
+       * If set, disables the datepicker.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
-      required: {
-        type: Boolean,
-        reflect: true
-      },
-      type: {
+
+      /**
+       * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
+       */
+      error: {
         type: String,
         reflect: true
       },
-      value: {
-        type: String
-      },
-      valueEnd: {
-        type: String
-      },
-      centralDate: {
-        type: String
-      },
+
+      /**
+       * Maximum date. All dates after will be disabled.
+       */
       maxDate: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Minimum date. All dates before will be disabled.
+       */
       minDate: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Names of all 12 months to render in the calendar, used for localization of date string in mobile layout.
+       */
       monthNames: {
         type: Array
       },
-      calendarStartDate: {
-        type: String,
-        reflect: true
+
+      /**
+       * If set, disables auto-validation on blur.
+       */
+      noValidate: {
+        type: Boolean
       },
-      calendarEndDate: {
-        type: String,
+
+      /**
+       * If set, turns on date range functionality in auro-calendar.
+       */
+      range: {
+        type: Boolean,
         reflect: true
       },
-      calendarFocusDate: {
-        type: String,
+
+      /**
+       * Populates the `required` attribute on the input. Used for client-side validation.
+       */
+      required: {
+        type: Boolean,
         reflect: true
       },
 
       /**
-       * @private
+       * Sets a custom help text message to display for all validityStates.
        */
-      dropdownElementName: { type: String },
+      setCustomValidity: {
+        type: String
+      },
 
       /**
-       * @private
+       * Custom help text message to display when validity = `customError`.
        */
-      dropdownTag: { type: Object },
+      setCustomValidityCustomError: {
+        type: String
+      },
 
       /**
-       * @private
+       * Custom help text message to display when validity = `rangeOverflow`.
        */
-      inputElementName: { type: String },
+      setCustomValidityRangeOverflow: {
+        type: String
+      },
 
       /**
-       * @private
+       * Custom help text message to display when validity = `rangeUnderflow`.
        */
-      inputTag: { type: Object }
+      setCustomValidityRangeUnderflow: {
+        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
+      },
+
+      /**
+       * Value selected for the datepicker.
+       */
+      value: {
+        type: String
+      },
+
+      /**
+       * Value selected for the second datepicker when using date range.
+       */
+      valueEnd: {
+        type: String
+      }
     };
   }
 
@@ -276,6 +319,28 @@ export class AuroDatePicker extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDatePicker);
   }
 
+  /**
+   * A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern".
+   * @returns {string[]}
+   */
+  get values() {
+    // If range, and both populated, return both values in an array
+    // - NOTE: both are required here, so we don't have something like `['10/22/25', undefined]`
+    if (this.range && this.value && this.valueEnd) {
+      return [
+        this.value,
+        this.valueEnd
+      ];
+    }
+
+    // This if block catches instances where `value` is present, no matter if valueEnd is selected yet
+    if (this.value) {
+      return [this.value];
+    }
+
+    return [];
+  }
+
   /**
    * Force the calendar view to the focus date when it changes.
    * @private
@@ -639,10 +704,11 @@ export class AuroDatePicker extends LitElement {
         if (!this.value || !this.util.validDateStr(this.value)) {
           this.value = newDate;
         } else if (!this.valueEnd || !this.util.validDateStr(this.valueEnd)) {
-
           // verify the date is after this.value to insure we are setting a proper range
           if (new Date(newDate) >= new Date(this.value)) {
             this.valueEnd = newDate;
+          } else {
+            this.value = newDate;
           }
         } else {
           this.value = newDate;
@@ -675,6 +741,14 @@ export class AuroDatePicker extends LitElement {
     this.validation.reset(this);
   }
 
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('calendarFocusDate')) {
       this.handleFocusDateChange();
@@ -740,7 +814,7 @@ export class AuroDatePicker extends LitElement {
         }
       }
 
-      this.validation.validate(this);
+      this.validate();
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
@@ -770,7 +844,7 @@ export class AuroDatePicker extends LitElement {
         }
       }
 
-      this.validation.validate(this);
+      this.validate();
     }
 
     if (changedProperties.has('error')) {
@@ -800,11 +874,14 @@ export class AuroDatePicker extends LitElement {
     // a later date than the current value date
     if (changedProperties.has('minDate')) {
       if (this.minDate) {
-        const minDateMonth = Number(this.minDate.charAt(1));
+        const minDateMonth = Number(this.minDate.split('/')[0]);
+        const minDateYear = Number(this.minDate.split('/')[2]);
 
         // This sets the visible month of the calendar to the minDate when the minDate is later
         // than the current visible date
-        if (minDateMonth > this.calendar.month) {
+        if (minDateYear > this.calendar.year) {
+          this.calendarRenderUtil.updateCentralDate(this, this.minDate);
+        } else if (minDateYear === this.calendar.year && minDateMonth > this.calendar.month) {
           this.calendarRenderUtil.updateCentralDate(this, this.minDate);
         }
 
@@ -825,6 +902,17 @@ export class AuroDatePicker extends LitElement {
     // This resets the datepicker when the maxDate is set to a new value that is
     // an earlier date than the current value date
     if (changedProperties.has('maxDate')) {
+      const maxDateMonth = Number(this.maxDate.split('/')[0]);
+      const maxDateYear = Number(this.maxDate.split('/')[2]);
+
+      // This sets the visible month of the calendar to the maxDate when the maxDate is earlier
+      // than the current visible date
+      if (maxDateYear < this.calendar.year) {
+        this.calendarRenderUtil.updateCentralDate(this, this.maxDate);
+      } else if (maxDateYear === this.calendar.year && maxDateMonth < this.calendar.month) {
+        this.calendarRenderUtil.updateCentralDate(this, this.maxDate);
+      }
+
       if (this.maxDate) {
         if (this.value) {
           if (new Date(this.maxDate).getTime() < new Date(this.value).getTime()) {
@@ -941,17 +1029,17 @@ export class AuroDatePicker extends LitElement {
               ${this.range ? html`<span slot="mobileDateToStr">${this.valueEnd ? this.getMobileDateStr(this.valueEnd) : html`<span class="placeholderDate">MM/DD/YYYY</span>`}</span>` : undefined}
             </auro-calendar>
           </div>
-          <span slot="helpText" part="helpTextSpan">
+          <p slot="helpText" part="helpTextSpan">
             <!-- Help text and error message template -->
             ${!this.validity || this.validity === undefined || this.validity === 'valid'
               ? html`
                 <slot name="helpText"></slot>
               ` : html`
-                <p class="datepickerElement-helpText" role="alert" aria-live="assertive" part="helpText">
+                <span role="alert" aria-live="assertive" part="helpText">
                   ${this.errorMessage}
-                </p>`
+                </span>`
             }
-          </span>
+          </p>
         </${this.dropdownTag}>
       </div>
     `;

package/components/datepicker/src/dropdownVersion.js

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

package/components/datepicker/src/inputVersion.js

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

package/components/datepicker/src/styles/color-cell-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+export default css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #e4e8ec);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;

package/components/datepicker/src/styles/color-cell.css

@@ -26,7 +26,7 @@
   --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff);
 }
 .day:hover {
-  --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));
+  --ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #e4e8ec);
   --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a);
 }
 .day.disabled {

package/components/datepicker/src/styles/color-cell.scss

@@ -43,7 +43,7 @@
   }
 
   &:hover {
-    --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, #{$ds-color-container-ui-secondary-hover-default});
+    --ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #{$ds-color-brand-neutral-200});
     --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   }
 

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.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}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}.outerWrapper{position:relative}.datepickerElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:1rem}.dpTriggerContent{display:flex;flex-direction:row}.dpTriggerContent [auro-input]{flex:1}.dpTriggerContent [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon){display:none}.dpTriggerContent [auro-input]:nth-child(2)::part(label){left:0;width:100%}.dpTriggerContent [auro-input]:nth-child(2)::part(input){padding-left:0}.dpTriggerContent [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host([range]) [auro-input]{max-width:50%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
+export default css`.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}[auro-input]::part(iconContainer){top:0;display:flex;height:100%;align-items:center}[auro-input]::part(accentIcon){transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}[auro-input]::part(helpText){display:none}[auro-input]::part(wrapper){border-width:0 !important}.outerWrapper{position:relative}.dpTriggerContent{display:flex;flex-direction:row}.dpTriggerContent [auro-input]{flex:1}.dpTriggerContent [auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}.dpTriggerContent [auro-input]:nth-child(2)::part(accentIcon){display:none}.dpTriggerContent [auro-input]:nth-child(2)::part(label){left:0;width:100%}.dpTriggerContent [auro-input]:nth-child(2)::part(input){padding-left:0}.dpTriggerContent [auro-input]:nth-child(2):before{position:absolute;top:13px;left:calc(var(--ds-size-150, 0.75rem)*-1);display:block;width:1px;height:2rem;content:""}:host([range]) [auro-input]{max-width:50%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;

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

@@ -49,12 +49,6 @@
   position: relative;
 }
 
-.datepickerElement-helpText {
-  margin: var(--ds-size-50, 0.25rem) 0;
-  font-size: var(--ds-text-body-size-xs, 0.75rem);
-  line-height: 1rem;
-}
-
 .dpTriggerContent {
   display: flex;
   flex-direction: row;

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

@@ -35,12 +35,6 @@
   position: relative;
 }
 
-.datepickerElement-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;
-}
-
 .dpTriggerContent {
   display: flex;
   flex-direction: row;

package/components/datepicker/src/utilitiesCalendarRender.js

@@ -41,7 +41,7 @@ export class UtilitiesCalendarRender {
   /**
    * Determines how many calendar months can be rendered based on the screen size and defined range.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {Number} Returns the maximum number of months that can be rendered.
    */
@@ -75,7 +75,7 @@ export class UtilitiesCalendarRender {
   /**
    * Determines the number of months rendered inside the calendar.
    * @param {Object} elem - The auro-calendar element.
-   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @param {Boolean} isMobile - True if it's to render for mobile view.
    * @private
    * @returns {void}
    */

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

@@ -1,8 +1,8 @@
 
-> @auro-formkit/auro-dropdown@3.0.0 build:sass
+> @aurodesignsystem/auro-dropdown@3.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/bibColors.scss 10: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/bibStyles.scss 10: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/color.scss 6: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 10: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
 
@@ -52,7 +52,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
 
@@ -63,7 +63,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 6:9  @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