@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.2 → 0.0.0-pr624.21

package/components/datepicker/demo/api.md

@@ -16,8 +16,11 @@
 | [error](#error)                           | `error`                           |           | `string`   |                                                  | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
 | [format](#format)                          | `format`                          |           | `string`   | "mm/dd/yyyy"                                     | Specifies the date format. The default is `mm/dd/yyyy`. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)            | `fullscreenBreakpoint`            |           | `string`   | "sm"                                             | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [hasError](#hasError)                        |                                   | readonly  | `boolean`  |                                                  |                                                  |
+| [hasFocus](#hasFocus)                        | `hasFocus`                        |           | `boolean`  |                                                  |                                                  |
 | [inputmode](#inputmode)                       | `inputmode`                       |           | `string`   |                                                  | Exposes inputmode attribute for input.           |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)         | `largeFullscreenHeadline`         |           | `boolean`  | false                                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| [layout](#layout)                          |                                   |           | `string`   | "classic"                                        |                                                  |
 | [maxDate](#maxDate)                         | `maxDate`                         |           | `string`   |                                                  | Maximum date. All dates after will be disabled.  |
 | [minDate](#minDate)                         | `minDate`                         |           | `string`   |                                                  | Minimum date. All dates before will be disabled. |
 | [monthNames](#monthNames)                      | `monthNames`                      |           | `array`    | ["January","February","March","April","May","June","July","August","September","October","November","December"] | Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. |
@@ -25,6 +28,8 @@
 | [noValidate](#noValidate)                      | `noValidate`                      |           | `boolean`  | false                                            | If set, disables auto-validation on blur.        |
 | [offset](#offset)                          | `offset`                          |           | `number`   | "0"                                              | Gap between the trigger element and bib.         |
 | [onDark](#onDark)                          | `onDark`                          |           | `boolean`  | false                                            | If declared, onDark styles will be applied to the trigger. |
+| [placeholder](#placeholder)                     | `placeholder`                     |           | `string`   |                                                  | Placeholder text to display in the input(s) when no value is set. |
+| [placeholderEndDate](#placeholderEndDate)              | `placeholderEndDate`              |           | `string`   |                                                  | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderendDate is not. |
 | [placement](#placement)                       | `placement`                       |           | `string`   | "bottom-start"                                   | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
 | [range](#range)                           | `range`                           |           | `boolean`  | false                                            | If set, turns on date range functionality in auro-calendar. |
 | [required](#required)                        | `required`                        |           | `boolean`  | false                                            | Populates the `required` attribute on the input. Used for client-side validation. |
@@ -33,6 +38,8 @@
 | [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow)  | `setCustomValidityRangeOverflow`  |           | `string`   |                                                  | Custom help text message to display when validity = `rangeOverflow`. |
 | [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` |           | `string`   |                                                  | Custom help text message to display when validity = `rangeUnderflow`. |
 | [setCustomValidityValueMissing](#setCustomValidityValueMissing)   | `setCustomValidityValueMissing`   |           | `string`   |                                                  | Custom help text message to display when validity = `valueMissing`. |
+| [shape](#shape)                           |                                   |           | `string`   | "classic"                                        |                                                  |
+| [size](#size)                            |                                   |           | `string`   | "lg"                                             |                                                  |
 | [stacked](#stacked)                         | `stacked`                         |           | `boolean`  | false                                            | Set true to make datepicker stacked style.       |
 | [validity](#validity)                        | `validity`                        |           | `string`   | "undefined"                                      | Specifies the `validityState` this element is in. |
 | [value](#value)                           | `value`                           |           | `string`   | "undefined"                                      | Value selected for the datepicker.               |
@@ -41,11 +48,22 @@
 
 ## Methods
 
-| Method     | Type                                   | Description                                      |
-|------------|----------------------------------------|--------------------------------------------------|
-| [focus](#focus)    | `(focusInput: string): void`           | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
-| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
-| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+| Method                        | Type                                   | Description                                      |
+|-------------------------------|----------------------------------------|--------------------------------------------------|
+| [focus](#focus)                       | `(focusInput: string): void`           | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
+| [renderHtmlActionClear](#renderHtmlActionClear)       | `(): TemplateResult`                   |                                                  |
+| [renderHtmlIconCalendar](#renderHtmlIconCalendar)      | `(): TemplateResult`                   |                                                  |
+| [renderHtmlIconError](#renderHtmlIconError)         | `(): TemplateResult`                   |                                                  |
+| [renderHtmlInputs](#renderHtmlInputs)            | `(): TemplateResult`                   |                                                  |
+| [renderLayoutFromAttributes](#renderLayoutFromAttributes)  | `(): TemplateResult`                   |                                                  |
+| [reset](#reset)                       | `(): void`                             | Resets component to initial state.               |
+| [resetLayoutClasses](#resetLayoutClasses)          | `(): void`                             |                                                  |
+| [resetShapeClasses](#resetShapeClasses)           | `(): void`                             |                                                  |
+| [resetValues](#resetValues)                 | `(): void`                             | Resets values without resetting validation.      |
+| [setHasFocus](#setHasFocus)                 | `(): void`                             |                                                  |
+| [setHasValue](#setHasValue)                 | `(): void`                             |                                                  |
+| [updateComponentArchitecture](#updateComponentArchitecture) | `(): void`                             |                                                  |
+| [validate](#validate)                    | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
@@ -1454,26 +1472,25 @@ The component may be restyled using the following code sample and changing the v
 ```scss
 /* stylelint-disable color-function-notation */
 
-@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
-@import "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 
 :host {
-  --ds-auro-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
-  --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
-  --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
-  --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
-  --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{$ds-basic-color-texticon-muted});
+  --ds-auro-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
+  --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
+  --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
   --ds-auro-calendar-nav-btn-border-color: transparent;
-  --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{$ds-basic-color-brand-primary});
+  --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
   --ds-auro-calendar-nav-btn-container-color: transparent;
-  --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
-  --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
-  --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
+  --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
   --ds-auro-calendar-cell-border-color: transparent;
   --ds-auro-calendar-cell-container-color: transparent;
-  --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{$ds-advanced-color-shared-background-muted});
-  --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
-  --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
+  --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->