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

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",
@@ -26,14 +26,14 @@
     "wc-range-datepicker": "^1.3.0"
   },
   "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
+    "@aurodesignsystem/design-tokens": "^4.13.0",
+    "@aurodesignsystem/webcorestylesheets": "^6.0.0"
   },
   "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",
     "compression": "^1.7.4",
@@ -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
@@ -431,7 +496,6 @@ export class AuroDatePicker extends LitElement {
     });
 
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
-      this.setAttribute('aria-expanded', this.dropdown.isPopoverVisible);
       this.notifyDatepickerToggled();
 
       this.calendar.visible = this.dropdown.isPopoverVisible;
@@ -443,10 +507,6 @@ export class AuroDatePicker extends LitElement {
         }
       }
     });
-
-    if (!this.dropdown.hasAttribute('aria-expanded')) {
-      this.dropdown.setAttribute('aria-expanded', this.dropdown.isPopoverVisible);
-    }
   }
 
   /**
@@ -552,8 +612,6 @@ export class AuroDatePicker extends LitElement {
     });
 
     this.addEventListener('focusout', (evt) => {
-      this.setAttribute('aria-expanded', this.dropdown.isPopoverVisible);
-
       if (!this.noValidate && !evt.detail.expanded && this.inputList[0].value !== undefined) {
         if (!this.contains(document.activeElement)) {
           this.validation.validate(this.inputList[0]);
@@ -639,10 +697,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 +734,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 +807,7 @@ export class AuroDatePicker extends LitElement {
         }
       }
 
-      this.validation.validate(this);
+      this.validate();
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
@@ -770,7 +837,7 @@ export class AuroDatePicker extends LitElement {
         }
       }
 
-      this.validation.validate(this);
+      this.validate();
     }
 
     if (changedProperties.has('error')) {
@@ -800,11 +867,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 +895,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 +1022,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}[auro-input]:not(:first-child)::part(wrapper)::after{position:absolute;left:50%;width:95%;height:1px;background-color:var(--ds-auro-datepicker-range-input-divider-color);content:"";transform:translateX(-50%)}.outerWrapper{position:relative;container:outerwrapper/inline-size}.dpTriggerContent{display:flex;flex-direction:column}.dpTriggerContent [auro-input]{flex:1}@container outerwrapper (min-width: 390px){.dpTriggerContent{flex-direction:row}[auro-input]:first-of-type{margin-right:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2){margin-left:var(--ds-size-150, 0.75rem)}[auro-input]:nth-child(2)::part(accentIcon){display:none}[auro-input]:nth-child(2)::part(label){left:0;width:100%}[auro-input]:nth-child(2)::part(input){padding-left:0}[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:""}[auro-input]:not(:first-child)::part(wrapper):after{content:none}: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

@@ -44,54 +44,74 @@
 [auro-input]::part(wrapper) {
   border-width: 0 !important;
 }
+[auro-input]:not(:first-child)::part(wrapper) {
+  /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+}
+[auro-input]:not(:first-child)::part(wrapper)::after {
+  position: absolute;
+  left: 50%;
+  width: 95%;
+  height: 1px;
+  background-color: var(--ds-auro-datepicker-range-input-divider-color);
+  content: "";
+  transform: translateX(-50%);
+}
 
 .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;
+  container: outerwrapper/inline-size;
 }
 
 .dpTriggerContent {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 }
 .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%;
+/* This value is per design but relates to 
+   https://github.com/AlaskaAirlines/AuroDesignTokens/issues/206
+*/
+@container outerwrapper (min-width: 390px) {
+  .dpTriggerContent {
+    flex-direction: row;
+  }
+  [auro-input]:first-of-type {
+    margin-right: var(--ds-size-150, 0.75rem);
+  }
+  [auro-input]:nth-child(2) {
+    margin-left: var(--ds-size-150, 0.75rem);
+  }
+  [auro-input]:nth-child(2)::part(accentIcon) {
+    display: none;
+  }
+  [auro-input]:nth-child(2)::part(label) {
+    left: 0;
+    width: 100%;
+  }
+  [auro-input]:nth-child(2)::part(input) {
+    padding-left: 0;
+  }
+  [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: "";
+  }
+  [auro-input]:not(:first-child) {
+    /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
+  }
+  [auro-input]:not(:first-child)::part(wrapper):after {
+    content: none;
+  }
+  :host([range]) [auro-input] {
+    max-width: 50%;
+  }
 }
-
 @media screen and (max-width: 576px) {
   ::part(popover) {
     position: fixed !important;