@aurodesignsystem-dev/auro-formkit 0.0.0-pr802.0 → 0.0.0-pr805.0

package/components/datepicker/demo/api.md

@@ -51,17 +51,13 @@
 | Method                        | Type                                   | Description                                      |
 |-------------------------------|----------------------------------------|--------------------------------------------------|
 | [clear](#clear)                       | `(): void`                             | Clears the current value(s) of the datepicker.   |
-| [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`                   |                                                  |
+| [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. |
+| [hideBib](#hideBib)                     | `(): void`                             | Hides the dropdown bib if its open.              |
 | [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`                             |                                                  |
+| [showBib](#showBib)                     | `(): void`                             | Shows the dropdown bib if there are options to show. |
 | [updateComponentArchitecture](#updateComponentArchitecture) | `(): void`                             |                                                  |
 | [validate](#validate)                    | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
@@ -107,7 +103,7 @@
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker>
+  <auro-datepicker required="">
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -120,7 +116,7 @@
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker>
+<auro-datepicker required="">
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -136,7 +132,7 @@ When used, the datepicker will display two inputs and the component will support
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
-  <auro-datepicker range>
+  <auro-datepicker range minDate="07/08/2025">
     <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
@@ -150,7 +146,7 @@ When used, the datepicker will display two inputs and the component will support
 <!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
 
 ```html
-<auro-datepicker range>
+<auro-datepicker range minDate="07/08/2025">
   <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
@@ -914,7 +910,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker>
+  <auro-datepicker required="">
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -927,7 +923,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker>
+<auro-datepicker required="">
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -975,7 +971,7 @@ To view this demo, set your window to a mobile screen size.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker>
+  <auro-datepicker required="">
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -988,7 +984,7 @@ To view this demo, set your window to a mobile screen size.
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker>
+<auro-datepicker required="">
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -1004,7 +1000,7 @@ Only for use with the `range` attribute. Sets the label for the second input.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
-  <auro-datepicker range>
+  <auro-datepicker range minDate="07/08/2025">
     <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
@@ -1018,7 +1014,7 @@ Only for use with the `range` attribute. Sets the label for the second input.
 <!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
 
 ```html
-<auro-datepicker range>
+<auro-datepicker range minDate="07/08/2025">
   <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
@@ -1474,9 +1470,35 @@ The component may be restyled using the following code sample and changing the v
 
 @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 
-:host {
-  --ds-auro-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+:host(:not([ondark])) {
+  // datepicker
   --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
+  --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
+  --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+
+  // calendar
+  --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, #{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, #{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, #{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});
+}
+
+:host([ondark]) {
+  --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-texticon-inverse-muted, v.$ds-basic-color-texticon-inverse-muted);
+  --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error-subtle, v.$ds-basic-color-status-error-subtle);
+  --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, v.$ds-basic-color-texticon-inverse-muted);
+
+  // calendar
   --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});