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

package/components/counter/demo/api.min.js

@@ -7087,13 +7087,6 @@ class AuroDropdown extends AuroElement$3 {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
-
-    this.trigger.addEventListener('click', () => {
-      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
-        bubbles: true,
-        composed: true
-      }));
-    });
   }
 
   /**
@@ -9380,7 +9373,7 @@ class AuroBibtemplate extends i$2 {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
@@ -10047,26 +10040,6 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
-  /**
-   * Hides the dropdown bib if its open.
-   * @returns {void}
-   */
-  hideBib() {
-    if (this.dropdown && this.dropdown.isPopoverVisible) {
-      this.dropdown.hide();
-    }
-  }
-
-  /**
-   * Shows the dropdown bib if there are options to show.
-   * @returns {void}
-   */
-  showBib() {
-    if (this.dropdown && !this.dropdown.isPopoverVisible) {
-      this.dropdown.show();
-    }
-  }
-
   /**
    * Configures the dropdown counters by selecting all `auro-counter` elements,
    * appending them to the `auro-counter-wrapper` element within the shadow DOM,

package/components/counter/demo/index.min.js

@@ -7087,13 +7087,6 @@ class AuroDropdown extends AuroElement$3 {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
-
-    this.trigger.addEventListener('click', () => {
-      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
-        bubbles: true,
-        composed: true
-      }));
-    });
   }
 
   /**
@@ -9380,7 +9373,7 @@ class AuroBibtemplate extends i$2 {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
@@ -10047,26 +10040,6 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
-  /**
-   * Hides the dropdown bib if its open.
-   * @returns {void}
-   */
-  hideBib() {
-    if (this.dropdown && this.dropdown.isPopoverVisible) {
-      this.dropdown.hide();
-    }
-  }
-
-  /**
-   * Shows the dropdown bib if there are options to show.
-   * @returns {void}
-   */
-  showBib() {
-    if (this.dropdown && !this.dropdown.isPopoverVisible) {
-      this.dropdown.show();
-    }
-  }
-
   /**
    * Configures the dropdown counters by selecting all `auro-counter` elements,
    * appending them to the `auro-counter-wrapper` element within the shadow DOM,

package/components/counter/dist/auro-counter-group.d.ts

@@ -267,16 +267,6 @@ export class AuroCounterGroup extends LitElement {
      */
     private getErrorMessages;
     errorMessage: any;
-    /**
-     * Hides the dropdown bib if its open.
-     * @returns {void}
-     */
-    hideBib(): void;
-    /**
-     * Shows the dropdown bib if there are options to show.
-     * @returns {void}
-     */
-    showBib(): void;
     /**
      * Configures the dropdown counters by selecting all `auro-counter` elements,
      * appending them to the `auro-counter-wrapper` element within the shadow DOM,

package/components/counter/dist/index.js

@@ -7040,13 +7040,6 @@ class AuroDropdown extends AuroElement$3 {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
-
-    this.trigger.addEventListener('click', () => {
-      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
-        bubbles: true,
-        composed: true
-      }));
-    });
   }
 
   /**
@@ -9333,7 +9326,7 @@ class AuroBibtemplate extends LitElement {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
@@ -10000,26 +9993,6 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
-  /**
-   * Hides the dropdown bib if its open.
-   * @returns {void}
-   */
-  hideBib() {
-    if (this.dropdown && this.dropdown.isPopoverVisible) {
-      this.dropdown.hide();
-    }
-  }
-
-  /**
-   * Shows the dropdown bib if there are options to show.
-   * @returns {void}
-   */
-  showBib() {
-    if (this.dropdown && !this.dropdown.isPopoverVisible) {
-      this.dropdown.show();
-    }
-  }
-
   /**
    * Configures the dropdown counters by selecting all `auro-counter` elements,
    * appending them to the `auro-counter-wrapper` element within the shadow DOM,

package/components/counter/dist/registered.js

@@ -7040,13 +7040,6 @@ class AuroDropdown extends AuroElement$3 {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
-
-    this.trigger.addEventListener('click', () => {
-      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
-        bubbles: true,
-        composed: true
-      }));
-    });
   }
 
   /**
@@ -9333,7 +9326,7 @@ class AuroBibtemplate extends LitElement {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
@@ -10000,26 +9993,6 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
-  /**
-   * Hides the dropdown bib if its open.
-   * @returns {void}
-   */
-  hideBib() {
-    if (this.dropdown && this.dropdown.isPopoverVisible) {
-      this.dropdown.hide();
-    }
-  }
-
-  /**
-   * Shows the dropdown bib if there are options to show.
-   * @returns {void}
-   */
-  showBib() {
-    if (this.dropdown && !this.dropdown.isPopoverVisible) {
-      this.dropdown.show();
-    }
-  }
-
   /**
    * Configures the dropdown counters by selecting all `auro-counter` elements,
    * appending them to the `auro-counter-wrapper` element within the shadow DOM,

package/components/datepicker/README.md

@@ -83,7 +83,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-datepicker required="">
+<auro-datepicker>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>

package/components/datepicker/demo/api.md

@@ -51,13 +51,17 @@
 | 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. |
-| [hideBib](#hideBib)                     | `(): void`                             | Hides the dropdown bib if its open.              |
+| [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`                   |                                                  |
 | [reset](#reset)                       | `(): void`                             | Resets component to initial state.               |
 | [resetLayoutClasses](#resetLayoutClasses)          | `(): void`                             |                                                  |
 | [resetShapeClasses](#resetShapeClasses)           | `(): void`                             |                                                  |
 | [resetValues](#resetValues)                 | `(): void`                             | Resets values without resetting validation.      |
-| [showBib](#showBib)                     | `(): void`                             | Shows the dropdown bib if there are options to show. |
+| [setHasFocus](#setHasFocus)                 | `(): void`                             |                                                  |
+| [setHasValue](#setHasValue)                 | `(): void`                             |                                                  |
 | [updateComponentArchitecture](#updateComponentArchitecture) | `(): void`                             |                                                  |
 | [validate](#validate)                    | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
@@ -103,7 +107,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 required="">
+  <auro-datepicker>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -116,7 +120,7 @@
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker required="">
+<auro-datepicker>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -132,7 +136,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 minDate="07/08/2025">
+  <auro-datepicker range>
     <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
@@ -146,7 +150,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 minDate="07/08/2025">
+<auro-datepicker range>
   <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
@@ -910,7 +914,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 required="">
+  <auro-datepicker>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -923,7 +927,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 required="">
+<auro-datepicker>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -971,7 +975,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 required="">
+  <auro-datepicker>
     <span slot="bib.fullscreen.headline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -984,7 +988,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 required="">
+<auro-datepicker>
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -1000,7 +1004,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 minDate="07/08/2025">
+  <auro-datepicker range>
     <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
@@ -1014,7 +1018,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 minDate="07/08/2025">
+<auro-datepicker range>
   <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
@@ -1470,35 +1474,9 @@ 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(:not([ondark])) {
-  // datepicker
+:host {
+  --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-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});