@aurodesignsystem/auro-formkit 2.1.0-beta.4 → 2.1.0-beta.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Semantic Release Automated Changelog
 
+# [2.1.0-beta.6](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.1.0-beta.5...v2.1.0-beta.6) (2025-04-01)
+
+
+### Features
+
+* add `floaterConfig` attributes on dropdown counter-group ([9510ee0](https://github.com/AlaskaAirlines/auro-formkit/commit/9510ee034800071e97e599ef6c213bda98ef908c))
+* expose `floaterConfig` related attrs on combobox ([ea78a71](https://github.com/AlaskaAirlines/auro-formkit/commit/ea78a71617e9414069c002ea83f6d5f33df3111a))
+* expose `floaterConfig` related attrs on datepicker ([d426bf7](https://github.com/AlaskaAirlines/auro-formkit/commit/d426bf7d04a8de00cf8689c4efe3bbdaaf0e75dc))
+* expose `floaterConfig` related attrs on select ([3183fa0](https://github.com/AlaskaAirlines/auro-formkit/commit/3183fa0f137a2daeae34b5165a55158f1f5a92ae))
+* expose `placement`, `offset`, `noFlip`, `autoPlacement` attrs in dropdown ([b67a47d](https://github.com/AlaskaAirlines/auro-formkit/commit/b67a47dd8d38518da8b621d2cef88c9840682cfa))
+
+# [2.1.0-beta.5](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.1.0-beta.4...v2.1.0-beta.5) (2025-03-31)
+
+
+### Bug Fixes
+
+* move host styles to div to prevent tailwindcss from overriding the padding ([3f4bc55](https://github.com/AlaskaAirlines/auro-formkit/commit/3f4bc551cebc70717ad556e7e3addaa3c5c0f9c7))
+
 # [2.1.0-beta.4](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.1.0-beta.3...v2.1.0-beta.4) (2025-03-28)
 
 

package/components/bibtemplate/dist/index.js

@@ -845,11 +845,11 @@ class AuroBibtemplate extends LitElement {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }

package/components/bibtemplate/dist/registered.js

@@ -845,11 +845,11 @@ class AuroBibtemplate extends LitElement {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }

package/components/checkbox/README.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.3/auro-checkbox/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.5/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/readme.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.3/auro-checkbox/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.5/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.3/auro-combobox/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.5/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/demo/api.md

@@ -5,25 +5,29 @@
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default     | Description                                      |
-|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
-| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`  |             | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [checkmark](#checkmark)                     | `checkmark`                     | `boolean` |             | When attribute is present auro-menu will apply checkmarks to selected options. |
-| [disabled](#disabled)                      | `disabled`                      | `boolean` |             | If set, disables the combobox.                   |
-| [error](#error)                         | `error`                         | `string`  |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`  | "sm"        | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
-| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |             | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
-| [noFilter](#noFilter)                      | `noFilter`                      | `boolean` | false       | If set, combobox will not filter menuoptions based in input. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |             | If set, disables auto-validation on blur.        |
-| [optionSelected](#optionSelected)                | `optionSelected`                | `object`  | "undefined" | Specifies the current selected option.           |
-| [required](#required)                      | `required`                      | `boolean` |             | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`  |             | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`  |             | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`  |             | Custom help text message to display when validity = `valueMissing`. |
-| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `boolean` |             | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
-| [type](#type)                          | `type`                          | `string`  |             | Applies the defined value as the type attribute on auro-input. |
-| [validity](#validity)                      | `validity`                      | `string`  | "undefined" | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         |           | "undefined" | Value selected for the dropdown menu.            |
+| Property                        | Attribute                       | Type      | Default        | Description                                      |
+|---------------------------------|---------------------------------|-----------|----------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean` |                | If declared, bib's position will be automatically calculated where to appear. |
+| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`  | "false"        | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [checkmark](#checkmark)                     | `checkmark`                     | `boolean` |                | When attribute is present auro-menu will apply checkmarks to selected options. |
+| [disabled](#disabled)                      | `disabled`                      | `boolean` |                | If set, disables the combobox.                   |
+| [error](#error)                         | `error`                         | `string`  |                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`  | "sm"           | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [noFilter](#noFilter)                      | `noFilter`                      | `boolean` | false          | If set, combobox will not filter menuoptions based in input. |
+| [noFlip](#noFlip)                        | `noFlip`                        | `boolean` | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |                | If set, disables auto-validation on blur.        |
+| [offset](#offset)                        | `offset`                        | `number`  | "0"            | Gap between the trigger element and bib.         |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `object`  | "undefined"    | Specifies the current selected option.           |
+| [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" |
+| [required](#required)                      | `required`                      | `boolean` |                | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`  |                | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`  |                | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`  |                | Custom help text message to display when validity = `valueMissing`. |
+| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `boolean` |                | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| [type](#type)                          | `type`                          | `string`  |                | Applies the defined value as the type attribute on auro-input. |
+| [validity](#validity)                      | `validity`                      | `string`  | "undefined"    | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         |           | "undefined"    | Value selected for the dropdown menu.            |
 
 ## Methods
 
@@ -840,6 +844,105 @@ export function auroMenuLoadingExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Customized bib position
+The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement` attributes.
+
+- `placement` specifies the preferred position where the bib should appear relative to the trigger.
+- `offset` sets the distance between the trigger and the bib.
+- When `autoPlacement` is enabled, smart positioning logic is applied to determine the best placement for the bib. If all sides have sufficient space, the bib will appear in the position specified by `placement`.
+- Unless `noFlip` is enabled, if there isn't enough space for the preferred `placement`, the bib will automatically flip to an alternative position.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floaterConfig.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/floaterConfig.html -->
+  <div style="width: 350px">
+    <auro-combobox offset="20" noFlip placement="bottom-end">
+      <span slot="bib.fullscreen.headline">Bib Header</span>
+      <span slot="label">bottom-end bib with 20px offset and noFlip</span>
+      <auro-menu>
+        <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+        <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+        <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+        <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+        <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+        <auro-menuoption static nomatch>No matching option</auro-menuoption>
+      </auro-menu>
+    </auro-combobox>
+    <auro-combobox offset="20" placement="bottom-end">
+      <span slot="bib.fullscreen.headline">Bib Header</span>
+      <span slot="label">bottom-end bib with 20px offset and flip</span>
+      <auro-menu>
+        <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+        <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+        <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+        <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+        <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+        <auro-menuoption static nomatch>No matching option</auro-menuoption>
+      </auro-menu>
+    </auro-combobox>
+    <auro-combobox offset="20" noFlip placement="right" autoPlacement>
+      <span slot="bib.fullscreen.headline">Bib Header</span>
+      <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
+      <auro-menu>
+        <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+        <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+        <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+        <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+        <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+        <auro-menuoption static nomatch>No matching option</auro-menuoption>
+      </auro-menu>
+    </auro-combobox>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floaterConfig.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/floaterConfig.html -->
+
+```html
+<div style="width: 350px">
+  <auro-combobox offset="20" noFlip placement="bottom-end">
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">bottom-end bib with 20px offset and noFlip</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <auro-combobox offset="20" placement="bottom-end">
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">bottom-end bib with 20px offset and flip</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <auro-combobox offset="20" noFlip placement="right" autoPlacement>
+    <span slot="bib.fullscreen.headline">Bib Header</span>
+    <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Dropdown with fullscreen bib
 
 You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.

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

@@ -3552,12 +3552,17 @@ class AuroDropdown extends r$1 {
     this.disabled = false;
     this.error = false;
     this.inset = false;
-    this.placement = 'bottom-start';
     this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
     this.labeled = true;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     /**
      * @private
      */
@@ -3578,16 +3583,6 @@ class AuroDropdown extends r$1 {
      */
     this.floater = new AuroFloatingUI();
 
-    /**
-     * @private
-     */
-    this.floaterConfig = {
-      placement: 'bottom-start',
-      flip: true,
-      autoPlacement: false,
-      offset: 0,
-    };
-
     /**
      * Generate unique names for dependency components.
      */
@@ -3609,6 +3604,18 @@ class AuroDropdown extends r$1 {
     this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion$1, AuroHelpText$1);
   }
 
+  /**
+   * @ignore
+   */
+  get floaterConfig() {
+    return {
+      placement: this.placement,
+      flip: !this.noFlip,
+      autoPlacement: this.autoPlacement,
+      offset: this.offset,
+    };
+  }
+
   /**
    * Public method to hide the dropdown.
    * @returns {void}
@@ -3629,6 +3636,15 @@ class AuroDropdown extends r$1 {
   static get properties() {
     return {
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       * @default false
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, applies a border around the trigger slot.
        */
@@ -3713,7 +3729,7 @@ class AuroDropdown extends r$1 {
        */
       isBibFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -3756,6 +3772,16 @@ class AuroDropdown extends r$1 {
         reflect: true
       },
 
+      /**
+       * If declared, the bib will NOT flip to an alternate position
+       * when there isn't enough space in the specified `placement`.
+       * @default false
+       */
+      noFlip: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If declared, the dropdown will not hide when moving focus outside the element.
        */
@@ -3772,16 +3798,32 @@ class AuroDropdown extends r$1 {
         reflect: true
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
       onSlotChange: {
         type: Function,
         reflect: false
       },
 
       /**
-       * @private
+       * Position where the bib should appear relative to the trigger.
+       * Accepted values:
+       * "top" | "right" | "bottom" | "left" |
+       * "bottom-start" | "top-start" | "top-end" |
+       * "right-start" | "right-end" | "bottom-end" |
+       * "left-start" | "left-end"
+       * @default bottom-start
        */
       placement: {
-        type: String
+        type: String,
+        reflect: true
       },
 
       /**
@@ -11796,11 +11838,11 @@ class AuroBibtemplate extends r$1 {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }
@@ -12049,6 +12091,12 @@ class AuroCombobox extends r$1 {
 
     this.isHiddenWhileLoading = false;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     const versioning = new AuroDependencyVersioning$4();
 
     this.dropdownTag = versioning.generateTag('auro-formkit-checkbox-dropdown', dropdownVersion, AuroDropdown);
@@ -12065,12 +12113,21 @@ class AuroCombobox extends r$1 {
 
       /**
        * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+       * @default false
        */
       autocomplete: {
         type: String,
         reflect: true
       },
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * When attribute is present auro-menu will apply checkmarks to selected options.
        */
@@ -12103,6 +12160,16 @@ class AuroCombobox extends r$1 {
         reflect: true
       },
 
+      /**
+       * If declared, the bib will NOT flip to an alternate position
+       * when there isn't enough space in the specified `placement`.
+       * @default false
+       */
+      noFlip: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * If set, disables auto-validation on blur.
        */
@@ -12110,6 +12177,15 @@ class AuroCombobox extends r$1 {
         type: Boolean
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
       /**
        * Specifies the current selected option.
        */
@@ -12119,6 +12195,20 @@ class AuroCombobox extends r$1 {
         hasChanged: arrayOrUndefinedHasChanged$1
       },
 
+      /**
+       * Position where the bib should appear relative to the trigger.
+       * Accepted values:
+       * "top" | "right" | "bottom" | "left" |
+       * "bottom-start" | "top-start" | "top-end" |
+       * "right-start" | "right-end" | "bottom-end" |
+       * "left-start" | "left-end"
+       * @default bottom-start
+       */
+      placement: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Populates the `required` attribute on the input. Used for client-side validation.
        */
@@ -12886,6 +12976,10 @@ class AuroCombobox extends r$1 {
           .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
           ?disabled="${this.disabled}"
           ?error="${this.validity !== undefined && this.validity !== 'valid'}"
+          .placement="${this.placement}"
+          .offset="${this.offset}"
+          ?autoPlacement="${this.autoPlacement}"
+          ?noFlip="${this.noFlip}"
           disableEventShow>
           <${this.inputTag}
             slot="trigger"