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

package/components/counter/dist/registered.js

@@ -4820,12 +4820,17 @@ class AuroDropdown extends LitElement {
     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
      */
@@ -4846,16 +4851,6 @@ class AuroDropdown extends LitElement {
      */
     this.floater = new AuroFloatingUI();
 
-    /**
-     * @private
-     */
-    this.floaterConfig = {
-      placement: 'bottom-start',
-      flip: true,
-      autoPlacement: false,
-      offset: 0,
-    };
-
     /**
      * Generate unique names for dependency components.
      */
@@ -4877,6 +4872,18 @@ class AuroDropdown extends LitElement {
     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}
@@ -4897,6 +4904,15 @@ class AuroDropdown extends LitElement {
   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.
        */
@@ -4981,7 +4997,7 @@ class AuroDropdown extends LitElement {
        */
       isBibFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -5024,6 +5040,16 @@ class AuroDropdown extends LitElement {
         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.
        */
@@ -5040,16 +5066,32 @@ class AuroDropdown extends LitElement {
         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
       },
 
       /**
@@ -6216,11 +6258,11 @@ class AuroBibtemplate extends LitElement {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }
@@ -6307,7 +6349,7 @@ class AuroBibtemplate extends LitElement {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss = css`:host{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}:host ::slotted(*:not(:first-child)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}:host([isindropdown]){padding:var(--ds-size-300, 1.5rem)}`;
+var styleCss = css`.wrapper{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.wrapper ::slotted(*:not(:first-child)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}:host([isindropdown]) .wrapper{padding:var(--ds-size-300, 1.5rem)}`;
 
 var colorCss = css`:host ::slotted(*:not(:first-child)){border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12))}`;
 
@@ -6346,7 +6388,7 @@ class AuroCounterWrapper extends LitElement {
 
   // function that renders the HTML and CSS into the scope of the component
   render() {
-    return html$1`<slot></slot>`;
+    return html$1`<div class="wrapper"><slot></slot></div>`;
   }
 }
 
@@ -6434,6 +6476,25 @@ class AuroCounterGroup extends LitElement {
   static get properties() {
     return {
 
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       * @default false
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
+      /**
+       * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
+       * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+       * @default sm
+       */
+      fullscreenBreakpoint: {
+        type: String,
+        reflect: true
+      },
+
       /**
        * Indicates if the counter group is displayed as a dropdown.
        */
@@ -6458,45 +6519,68 @@ class AuroCounterGroup extends LitElement {
       },
 
       /**
-       * Reflects the validity state.
+       * If declared, make bib.fullscreen.headline in HeadingDisplay.
+       * Otherwise, Heading 600
        */
-      validity: {
-        type: String,
-        reflect: true,
+      largeFullscreenHeadline: {
+        type: Boolean,
+        reflect: true
       },
 
       /**
-       * The total value of the counters.
+       * If declared, the bib will NOT flip to an alternate position
+       * when there isn't enough space in the specified `placement`.
+       * @default false
        */
-      total: {
-        type: Number,
+      noFlip: {
+        type: Boolean,
+        reflect: true
       },
 
       /**
-       * The current individual values of the nested counters.
+       * Gap between the trigger element and bib.
+       * @default 0
        */
-      value: {
-        type: Object,
+      offset: {
+        type: Number,
+        reflect: true
       },
 
       /**
-       * If declared, make bib.fullscreen.headline in HeadingDisplay.
-       * Otherwise, Heading 600
+       * 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
        */
-      largeFullscreenHeadline: {
-        type: Boolean,
+      placement: {
+        type: String,
         reflect: true
       },
 
       /**
-       * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
-       * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
-       * @default sm
+       * The total value of the counters.
        */
-      fullscreenBreakpoint: {
+      total: {
+        type: Number,
+      },
+
+      /**
+       * Reflects the validity state.
+       */
+      validity: {
         type: String,
-        reflect: true
-      }
+        reflect: true,
+      },
+
+      /**
+       * The current individual values of the nested counters.
+       */
+      value: {
+        type: Object,
+      },
     };
   }
 
@@ -6739,7 +6823,12 @@ class AuroCounterGroup extends LitElement {
   render() {
     return html$1`
     ${this.isDropdown
-      ? html$1`<${this.dropdownTag} common chevron fullscreenBreakpoint="${this.fullscreenBreakpoint}">
+      ? html$1`<${this.dropdownTag} common chevron
+        .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
+        .placement="${this.placement}"
+        .offset="${this.offset}"
+        ?autoPlacement="${this.autoPlacement}"
+        ?noFlip="${this.noFlip}">
         <div slot="trigger"><slot name="valueText">
           ${this.counters && Array.from(this.counters).map((counter, index) => `${counter.value} ${counter.defaultSlot}${index !== this.counters.length - 1 ? ', ' : ''}`)}
         </slot></div>

package/components/datepicker/README.md

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

package/components/datepicker/demo/api.md

@@ -7,6 +7,7 @@
 
 | Property                          | Attribute                         | Modifiers | Type       | Default                                          | Description                                      |
 |-----------------------------------|-----------------------------------|-----------|------------|--------------------------------------------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                   | `autoPlacement`                   |           | `boolean`  | "false"                                          | If declared, bib's position will be automatically calculated where to appear. |
 | [calendarEndDate](#calendarEndDate)                 | `calendarEndDate`                 |           | `string`   | "undefined"                                      | The last date that may be displayed in the calendar. |
 | [calendarFocusDate](#calendarFocusDate)               | `calendarFocusDate`               |           | `string`   | "value"                                          | The date that will first be visually rendered to the user in the calendar. |
 | [calendarStartDate](#calendarStartDate)               | `calendarStartDate`               |           | `string`   | "undefined"                                      | The first date that may be displayed in the calendar. |
@@ -18,7 +19,10 @@
 | [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. |
+| [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`  | false                                            | If set, disables auto-validation on blur.        |
+| [offset](#offset)                          | `offset`                          |           | `number`   | "0"                                              | Gap between the trigger element and bib.         |
+| [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. |
 | [setCustomValidity](#setCustomValidity)               | `setCustomValidity`               |           | `string`   |                                                  | Sets a custom help text message to display for all validityStates. |
@@ -603,6 +607,63 @@ Set stacked attribute to make range datepicker stacked style.
 <!-- 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: 400px">
+    <auro-datepicker offset="20" placement="bottom-start" noFlip>
+      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+      <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
+      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    </auro-datepicker>
+    <auro-datepicker offset="20" placement="bottom-start">
+      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+      <span slot="fromLabel">bottom-start with 20px offset and flip</span>
+      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    </auro-datepicker>
+    <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
+      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+      <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
+      <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+    </auro-datepicker>
+  </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: 400px">
+  <auro-datepicker offset="20" placement="bottom-start" noFlip>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
+  <auro-datepicker offset="20" placement="bottom-start">
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">bottom-start with 20px offset and flip</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
+  <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
+    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
+    <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
+    <span slot="bib.fullscreen.dateLabel">Choose a date</span>
+  </auro-datepicker>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### validity
 
 Specifies the `validityState` the element is in. Upon first interaction, or presetting the `error` attribute, the component will validate on `focusout`. After validation, `validityState` can be queried from the component by using the following JavaScript.

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

@@ -11448,11 +11448,11 @@ class AuroBibtemplate extends r$3 {
     return {
       isFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
       large: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       }
     };
   }
@@ -15411,12 +15411,17 @@ class AuroDropdown extends r$3 {
     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
      */
@@ -15437,16 +15442,6 @@ class AuroDropdown extends r$3 {
      */
     this.floater = new AuroFloatingUI();
 
-    /**
-     * @private
-     */
-    this.floaterConfig = {
-      placement: 'bottom-start',
-      flip: true,
-      autoPlacement: false,
-      offset: 0,
-    };
-
     /**
      * Generate unique names for dependency components.
      */
@@ -15468,6 +15463,18 @@ class AuroDropdown extends r$3 {
     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}
@@ -15488,6 +15495,15 @@ class AuroDropdown extends r$3 {
   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.
        */
@@ -15572,7 +15588,7 @@ class AuroDropdown extends r$3 {
        */
       isBibFullscreen: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -15615,6 +15631,16 @@ class AuroDropdown extends r$3 {
         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.
        */
@@ -15631,16 +15657,32 @@ class AuroDropdown extends r$3 {
         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
       },
 
       /**
@@ -22891,6 +22933,12 @@ class AuroDatePicker extends r$3 {
 
     this.monthFirst = true;
 
+    // floaterConfig
+    this.placement = 'bottom-start';
+    this.offset = 0;
+    this.noFlip = false;
+    this.autoPlacement = false;
+
     /**
      * @private
      */
@@ -22938,6 +22986,16 @@ class AuroDatePicker extends r$3 {
   static get properties() {
     return {
       // ...super.properties,
+
+      /**
+       * If declared, bib's position will be automatically calculated where to appear.
+       * @default false
+       */
+      autoPlacement: {
+        type: Boolean,
+        reflect: true
+      },
+
       /**
        * The last date that may be displayed in the calendar.
        */
@@ -23032,6 +23090,16 @@ class AuroDatePicker extends r$3 {
         type: Boolean
       },
 
+      /**
+       * 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.
        */
@@ -23039,6 +23107,29 @@ class AuroDatePicker extends r$3 {
         type: Boolean
       },
 
+      /**
+       * Gap between the trigger element and bib.
+       * @default 0
+       */
+      offset: {
+        type: Number,
+        reflect: true
+      },
+
+      /**
+       * 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
+      },
+
       /**
        * If set, turns on date range functionality in auro-calendar.
        */
@@ -23095,7 +23186,7 @@ class AuroDatePicker extends r$3 {
        */
       stacked: {
         type: Boolean,
-        reflect: true,
+        reflect: true
       },
 
       /**
@@ -23795,6 +23886,10 @@ class AuroDatePicker extends r$3 {
           disableEventShow
           noHideOnThisFocusLoss
           fullscreenBreakpoint="sm"
+          .placement="${this.placement}"
+          .offset="${this.offset}"
+          ?autoPlacement="${this.autoPlacement}"
+          ?noFlip="${this.noFlip}"
           part="dropdown">
           <div slot="trigger" class="dpTriggerContent" part="trigger">
             <${this.inputTag}