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

package/components/select/demo/api.md

@@ -14,23 +14,27 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default | Description                                      |
-|---------------------------------|---------------------------------|-----------|---------|--------------------------------------------------|
-| [disabled](#disabled)                      | `disabled`                      | `boolean` |         | When attribute is present, element shows disabled state. |
-| [error](#error)                         | `error`                         | `string`  |         | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |         | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
-| [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 |
-| [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean` |         | Sets multi-select mode, allowing multiple options to be selected at once. |
-| [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |         | When true, checkmark on selected option will no longer be present. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |         | If set, disables auto-validation on blur.        |
-| [optionSelected](#optionSelected)                | `optionSelected`                |           |         | Specifies the current selected menuOption.       |
-| [required](#required)                      | `required`                      | `boolean` |         | Populates the `required` attribute on the element. 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`. |
-| [validity](#validity)                      | `validity`                      | `string`  |         | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         |           |         | Value selected for the component.                |
+| Property                        | Attribute                       | Type      | Default        | Description                                      |
+|---------------------------------|---------------------------------|-----------|----------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean` | "false"        | If declared, bib's position will be automatically calculated where to appear. |
+| [disabled](#disabled)                      | `disabled`                      | `boolean` |                | When attribute is present, element shows disabled state. |
+| [error](#error)                         | `error`                         | `string`  |                | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |                | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
+| [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 |
+| [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean` |                | Sets multi-select mode, allowing multiple options to be selected at once. |
+| [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |                | When true, checkmark on selected option will no longer be present. |
+| [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`                |           |                | Specifies the current selected menuOption.       |
+| [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 element. 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`. |
+| [validity](#validity)                      | `validity`                      | `string`  |                | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         |           |                | Value selected for the component.                |
 
 ## Methods
 
@@ -758,6 +762,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-select offset="20" noFlip placement="bottom-end">
+      <span slot="bib.fullscreen.headline">Bib Headline</span>
+      <span slot="label">bottom-end bib with 20px offset and noFlip</span>
+      <auro-menu>
+        <auro-menuoption value="stops">Stops</auro-menuoption>
+        <auro-menuoption value="price">Price</auro-menuoption>
+        <auro-menuoption value="duration">Duration</auro-menuoption>
+        <auro-menuoption value="departure">Departure</auro-menuoption>
+        <auro-menuoption value="arrival">Arrival</auro-menuoption>
+        <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+      </auro-menu>
+    </auro-select>
+    <auro-select offset="20" placement="bottom-end">
+      <span slot="bib.fullscreen.headline">Bib Headline</span>
+      <span slot="label">bottom-end bib with 20px offset and flip</span>
+      <auro-menu>
+        <auro-menuoption value="stops">Stops</auro-menuoption>
+        <auro-menuoption value="price">Price</auro-menuoption>
+        <auro-menuoption value="duration">Duration</auro-menuoption>
+        <auro-menuoption value="departure">Departure</auro-menuoption>
+        <auro-menuoption value="arrival">Arrival</auro-menuoption>
+        <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+      </auro-menu>
+    </auro-select>
+    <auro-select offset="20" noFlip placement="right" autoPlacement noFlip >
+      <span slot="bib.fullscreen.headline">Bib Headline</span>
+      <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
+      <auro-menu>
+        <auro-menuoption value="stops">Stops</auro-menuoption>
+        <auro-menuoption value="price">Price</auro-menuoption>
+        <auro-menuoption value="duration">Duration</auro-menuoption>
+        <auro-menuoption value="departure">Departure</auro-menuoption>
+        <auro-menuoption value="arrival">Arrival</auro-menuoption>
+        <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+      </auro-menu>
+    </auro-select>
+  </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-select offset="20" noFlip placement="bottom-end">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">bottom-end bib with 20px offset and noFlip</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <auro-select offset="20" placement="bottom-end">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">bottom-end bib with 20px offset and flip</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <auro-select offset="20" noFlip placement="right" autoPlacement noFlip >
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+</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/select/demo/api.min.js

@@ -3491,12 +3491,17 @@ class AuroDropdown extends r {
     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
      */
@@ -3517,16 +3522,6 @@ class AuroDropdown extends r {
      */
     this.floater = new AuroFloatingUI();
 
-    /**
-     * @private
-     */
-    this.floaterConfig = {
-      placement: 'bottom-start',
-      flip: true,
-      autoPlacement: false,
-      offset: 0,
-    };
-
     /**
      * Generate unique names for dependency components.
      */
@@ -3548,6 +3543,18 @@ class AuroDropdown extends r {
     this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText);
   }
 
+  /**
+   * @ignore
+   */
+  get floaterConfig() {
+    return {
+      placement: this.placement,
+      flip: !this.noFlip,
+      autoPlacement: this.autoPlacement,
+      offset: this.offset,
+    };
+  }
+
   /**
    * Public method to hide the dropdown.
    * @returns {void}
@@ -3568,6 +3575,15 @@ class AuroDropdown extends r {
   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.
        */
@@ -3652,7 +3668,7 @@ class AuroDropdown extends r {
        */
       isBibFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -3695,6 +3711,16 @@ class AuroDropdown extends r {
         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.
        */
@@ -3711,16 +3737,32 @@ class AuroDropdown extends r {
         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
       },
 
       /**
@@ -4887,11 +4929,11 @@ class AuroBibtemplate extends r {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }
@@ -5130,6 +5172,12 @@ class AuroSelect extends r {
     const idSubstrEnd = 8;
     const idSubstrStart = 2;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     /**
      * @private
      */
@@ -5186,6 +5234,15 @@ class AuroSelect extends r {
   static get properties() {
     return {
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       * @default false
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * When attribute is present, element shows disabled state.
        */
@@ -5229,6 +5286,16 @@ class AuroSelect extends r {
         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.
        */
@@ -5237,6 +5304,15 @@ class AuroSelect extends r {
         reflect: true
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
       /**
        * @private
        */
@@ -5260,6 +5336,20 @@ class AuroSelect extends r {
         type: Array
       },
 
+      /**
+       * 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 element. Used for client-side validation.
        */
@@ -5722,6 +5812,10 @@ class AuroSelect extends r {
           .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
           ?matchWidth="${!this.flexMenuWidth}"
           chevron
+          .placement="${this.placement}"
+          .offset="${this.offset}"
+          ?autoPlacement="${this.autoPlacement}"
+          ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
             <span id="placeholder" class="${e(placeholderClass)}"><slot name="placeholder"></slot></span>

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

@@ -3387,12 +3387,17 @@ class AuroDropdown extends r {
     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
      */
@@ -3413,16 +3418,6 @@ class AuroDropdown extends r {
      */
     this.floater = new AuroFloatingUI();
 
-    /**
-     * @private
-     */
-    this.floaterConfig = {
-      placement: 'bottom-start',
-      flip: true,
-      autoPlacement: false,
-      offset: 0,
-    };
-
     /**
      * Generate unique names for dependency components.
      */
@@ -3444,6 +3439,18 @@ class AuroDropdown extends r {
     this.helpTextTag = versioning.generateTag('auro-formkit-dropdown-helptext', helpTextVersion, AuroHelpText);
   }
 
+  /**
+   * @ignore
+   */
+  get floaterConfig() {
+    return {
+      placement: this.placement,
+      flip: !this.noFlip,
+      autoPlacement: this.autoPlacement,
+      offset: this.offset,
+    };
+  }
+
   /**
    * Public method to hide the dropdown.
    * @returns {void}
@@ -3464,6 +3471,15 @@ class AuroDropdown extends r {
   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.
        */
@@ -3548,7 +3564,7 @@ class AuroDropdown extends r {
        */
       isBibFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -3591,6 +3607,16 @@ class AuroDropdown extends r {
         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.
        */
@@ -3607,16 +3633,32 @@ class AuroDropdown extends r {
         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
       },
 
       /**
@@ -4783,11 +4825,11 @@ class AuroBibtemplate extends r {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }
@@ -5026,6 +5068,12 @@ class AuroSelect extends r {
     const idSubstrEnd = 8;
     const idSubstrStart = 2;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     /**
      * @private
      */
@@ -5082,6 +5130,15 @@ class AuroSelect extends r {
   static get properties() {
     return {
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       * @default false
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * When attribute is present, element shows disabled state.
        */
@@ -5125,6 +5182,16 @@ class AuroSelect extends r {
         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.
        */
@@ -5133,6 +5200,15 @@ class AuroSelect extends r {
         reflect: true
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
       /**
        * @private
        */
@@ -5156,6 +5232,20 @@ class AuroSelect extends r {
         type: Array
       },
 
+      /**
+       * 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 element. Used for client-side validation.
        */
@@ -5618,6 +5708,10 @@ class AuroSelect extends r {
           .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
           ?matchWidth="${!this.flexMenuWidth}"
           chevron
+          .placement="${this.placement}"
+          .offset="${this.offset}"
+          ?autoPlacement="${this.autoPlacement}"
+          ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
             <span id="placeholder" class="${e(placeholderClass)}"><slot name="placeholder"></slot></span>

package/components/select/demo/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-select/+esm"></script>
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.1.0-beta.5/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->