@refinitiv-ui/elements 7.6.2 → 7.8.0

package/lib/multi-input/custom-elements.md

@@ -8,7 +8,7 @@ An input control component to display a selection of pills
 |---------------------|---------------|--------------------------|---------|------------------------------------------------|
 | `data`              |               | `MultiInputData \| null` | null    | The data object, used to render the list.      |
 | `disabled`          | `disabled`    | `boolean`                | false   | Set disabled state                             |
-| `error`             | `error`       | `boolean`                | false   | Set state to error                             |
+| `error`             | `error`       | `boolean`                | false   | Set error state                                |
 | `icon`              | `icon`        | `string`                 | ""      | Specify icon to display inside input box       |
 | `maxLength`         | `maxlength`   | `number \| null`         | null    | Set character max limit                        |
 | `minLength`         | `minlength`   | `number \| null`         | null    | Set character min limit                        |
@@ -19,7 +19,7 @@ An input control component to display a selection of pills
 | `selectionStart`    |               | `number \| null`         | null    | Selection start index                          |
 | `value`             | `value`       | `string`                 | ""      | Current value of text field                    |
 | `values (readonly)` |               | `string[]`               | []      | Array of item's values ( readonly )            |
-| `warning`           | `warning`     | `boolean`                | false   | Set state to warning                           |
+| `warning`           | `warning`     | `boolean`                | false   | Set warning state                              |
 
 ## Methods
 

package/lib/multi-input/index.d.ts

@@ -56,11 +56,11 @@ export declare class MultiInput extends ControlElement implements MultiValue {
      */
     placeholder: string;
     /**
-     * Set state to error
+     * Set error state
      */
     error: boolean;
     /**
-     * Set state to warning
+     * Set warning state
      */
     warning: boolean;
     /**

package/lib/multi-input/index.js

@@ -43,11 +43,11 @@ let MultiInput = class MultiInput extends ControlElement {
          */
         this.placeholder = '';
         /**
-         * Set state to error
+         * Set error state
          */
         this.error = false;
         /**
-         * Set state to warning
+         * Set warning state
          */
         this.warning = false;
         /**

package/lib/number-field/index.d.ts

@@ -49,6 +49,14 @@ export declare class NumberField extends FormFieldElement {
      * @return CSS template
      */
     static get styles(): CSSResultGroup;
+    /**
+     * Time period (ms) before press repetition starts
+     */
+    private repeatDelay;
+    /**
+     * Time period (ms) between each repeat
+     */
+    private repeatRate;
     /**
      * Set spinner's visibility
      */
@@ -87,6 +95,20 @@ export declare class NumberField extends FormFieldElement {
      * Get spinner down element
      */
     private spinnerDownEl?;
+    /**
+     * An object's returned from setTimeout to use with repeat delay.
+     */
+    private repeatDelayTimer;
+    /**
+     * An object's returned from setInterval to use with repeat rate.
+     */
+    private repeatRateTimer;
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -164,6 +186,11 @@ export declare class NumberField extends FormFieldElement {
      * @returns {void}
      */
     protected onSpinnerTap(event: TapEvent): void;
+    /**
+     * Clear repeatDelayTimer and repeatRateTimer if exist
+     * @returns {void}
+     */
+    protected clearTimer: () => void;
     /**
      * Step down or up and notify value change
      * @param direction Up or Down

package/lib/number-field/index.js

@@ -44,6 +44,14 @@ var Direction;
 let NumberField = class NumberField extends FormFieldElement {
     constructor() {
         super(...arguments);
+        /**
+         * Time period (ms) before press repetition starts
+         */
+        this.repeatDelay = 300;
+        /**
+         * Time period (ms) between each repeat
+         */
+        this.repeatRate = 50;
         /**
          * Set spinner's visibility
          */
@@ -63,6 +71,16 @@ let NumberField = class NumberField extends FormFieldElement {
          */
         this.max = null;
         this.interimValueState = false; // make sure that internal input field value is updated only on external value change
+        /**
+         * Clear repeatDelayTimer and repeatRateTimer if exist
+         * @returns {void}
+         */
+        this.clearTimer = () => {
+            if (this.repeatDelayTimer || this.repeatRateTimer) {
+                clearTimeout(this.repeatDelayTimer);
+                clearInterval(this.repeatRateTimer);
+            }
+        };
     }
     /**
      * Element version number
@@ -132,6 +150,16 @@ let NumberField = class NumberField extends FormFieldElement {
     get valueAsNumber() {
         return this.stringToNumber(this.internalValue);
     }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // To remove press repetition when tap event ends outside of the pressed button
+        document.addEventListener('tapend', this.clearTimer);
+    }
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -272,12 +300,14 @@ let NumberField = class NumberField extends FormFieldElement {
             return;
         }
         const target = event.target;
-        if (target === this.spinnerDownEl) {
-            this.onApplyStep(Direction.Down);
-        }
-        else if (target === this.spinnerUpEl) {
-            this.onApplyStep(Direction.Up);
-        }
+        const direction = target === this.spinnerDownEl ? Direction.Down : Direction.Up;
+        this.onApplyStep(direction);
+        // Support long tap at a spinner
+        this.repeatDelayTimer = setTimeout(() => {
+            this.repeatRateTimer = setInterval(() => {
+                this.onApplyStep(direction);
+            }, this.repeatRate);
+        }, this.repeatDelay);
     }
     /**
      * Step down or up and notify value change
@@ -713,7 +743,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     renderSpinner() {
         return html `
-      <div part="spinner" @tap=${this.onSpinnerTap}>
+      <div part="spinner" @tapstart=${this.onSpinnerTap}>
         <ef-icon icon="up" part="spinner-up" ?readonly=${this.readonly} ?disabled=${this.disabled}> </ef-icon>
         <ef-icon icon="down" part="spinner-down" ?readonly=${this.readonly} ?disabled=${this.disabled}>
         </ef-icon>

package/lib/overlay/custom-elements.json

@@ -129,7 +129,7 @@
         {
           "name": "position",
           "description": "Set position and align against the attach target.\nPosition may contain a single word or a comma separated list to set the priority.\nPosition is not applied if `positionTarget` is not an HTML Element.\nFor instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;\nor `left, right` - align is not set, set best position on the `left` or `right`\n\nPosition can be: `top`, `right`, `bottom`, `left`, `center`\nAlign can be: `start`, `middle`, `end`",
-          "type": "{} | undefined"
+          "type": "Position[] | undefined"
         }
       ],
       "properties": [
@@ -264,7 +264,7 @@
         {
           "name": "interactiveElements",
           "description": "A list of elements, which are active when overlay is opened\nValid only if noInteractionLock is false (default)",
-          "type": "object",
+          "type": "HTMLElement[]",
           "default": "[]"
         },
         {
@@ -285,26 +285,30 @@
           "name": "position",
           "attribute": "position",
           "description": "Set position and align against the attach target.\nPosition may contain a single word or a comma separated list to set the priority.\nPosition is not applied if `positionTarget` is not an HTML Element.\nFor instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;\nor `left, right` - align is not set, set best position on the `left` or `right`\n\nPosition can be: `top`, `right`, `bottom`, `left`, `center`\nAlign can be: `start`, `middle`, `end`",
-          "type": "{} | undefined"
+          "type": "Position[] | undefined"
         },
         {
           "name": "positionTargetConfig (readonly)",
-          "description": "Get position target configuration based on positionTarget and fullScreen properties\nUsed for caching and calculations"
+          "description": "Get position target configuration based on positionTarget and fullScreen properties\nUsed for caching and calculations",
+          "type": "PositionTargetStrategy"
         },
         {
           "name": "focusBoundary",
           "description": "Set focus boundary to restrict tabbing. Default's overlay itself.\nIf external focus is required, set to null",
+          "type": "HTMLElement | ShadowRoot | null",
           "default": "\"this\""
         },
         {
           "name": "fullyOpened (readonly)",
           "description": "Returns true if the overlay is opened and animation is not running.\nReturns false if overlay is closed and animation is not running",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "transitioning (readonly)",
           "description": "Returns true if overlay is doing opening or closing transition",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [

package/lib/overlay/custom-elements.md

@@ -4,35 +4,35 @@ Element to help building modals, dialogs and other overlay content
 
 ## Properties
 
-| Property                          | Attribute                    | Type                               | Default | Description                                      |
-|-----------------------------------|------------------------------|------------------------------------|---------|--------------------------------------------------|
-| `focusBoundary`                   |                              |                                    | "this"  | Set focus boundary to restrict tabbing. Default's overlay itself.<br />If external focus is required, set to null |
-| `fullScreen`                      | `full-screen`                | `boolean`                          | false   | Set to true to show overlay in full screen mode  |
-| `fullyOpened (readonly)`          |                              | `boolean`                          |         | Returns true if the overlay is opened and animation is not running.<br />Returns false if overlay is closed and animation is not running |
-| `horizontalOffset`                | `horizontal-offset`          | `number`                           | 0       | A pixel value that will be added to the position calculated on the horizontal axis.<br />The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
-| `interactiveElements`             |                              | `object`                           | []      | A list of elements, which are active when overlay is opened<br />Valid only if noInteractionLock is false (default) |
-| `lockPositionTarget`              | `lock-position-target`       | `boolean`                          | false   | True to lock position target<br />Valid only if noInteractionLock is false (default) |
-| `noAutofocus`                     | `no-autofocus`               | `boolean`                          | false   | Set to true to disable autofocusing the overlay or open |
-| `noCancelOnEscKey`                | `no-cancel-on-esc-key`       | `boolean`                          | false   | Set to true to disable canceling the overlay with the ESC key |
-| `noCancelOnOutsideClick`          | `no-cancel-on-outside-click` | `boolean`                          | false   | Set to true to disable canceling the overlay by clicking outside it |
-| `noFocusManagement`               | `no-focus-management`        | `boolean`                          | false   | True to not apply focus management.<br />The overlay will not limit Tab behaviour or do auto-focusing |
-| `noInteractionLock`               | `no-interaction-lock`        | `boolean`                          | false   | Stop preventing user interaction when overlay is visible |
-| `noOverlap`                       | `no-overlap`                 | `boolean`                          | false   | True to not overlap positionTarget               |
-| `offset`                          | `offset`                     | `number`                           | 0       | A pixel value that will be added to the position calculated on the vertical or horizontal axis.<br />The offset is applied dynamically depending on the `positionTarget` |
-| `opened`                          | `opened`                     | `boolean`                          | false   | True if the overlay is currently displayed       |
-| `position`                        | `position`                   | `{} \| undefined`                  |         | Set position and align against the attach target.<br />Position may contain a single word or a comma separated list to set the priority.<br />Position is not applied if `positionTarget` is not an HTML Element.<br />For instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;<br />or `left, right` - align is not set, set best position on the `left` or `right`<br /><br />Position can be: `top`, `right`, `bottom`, `left`, `center`<br />Align can be: `start`, `middle`, `end` |
-| `positionTarget`                  | `position-target`            | `PositionTarget\|null\|undefined`  |         | Set the position target as follows:<br />- HTMLElement if overlay is position next to the HTML element<br />- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.<br />For instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen |
-| `positionTargetConfig (readonly)` |                              |                                    |         | Get position target configuration based on positionTarget and fullScreen properties<br />Used for caching and calculations |
-| `spacing`                         | `spacing`                    | `boolean`                          | false   | True to apply spacing for overlay content        |
-| `transitionStyle`                 | `transition-style`           | `TransitionStyle\|null\|undefined` |         | Set the transition style                         |
-| `transitioning (readonly)`        |                              | `boolean`                          |         | Returns true if overlay is doing opening or closing transition |
-| `transparent`                     | `transparent`                | `boolean`                          | false   | True to make overlay background transparent      |
-| `verticalOffset`                  | `vertical-offset`            | `number`                           | 0       | A pixel value that will be added to the position calculated on the vertical axis.<br />The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
-| `withBackdrop`                    | `with-backdrop`              | `boolean`                          | false   | True to show backdrop                            |
-| `withShadow`                      | `with-shadow`                | `boolean`                          | false   | True to add shadow                               |
-| `x`                               | `x`                          | `number\|null\|undefined`          |         | Set a specific x coordinate                      |
-| `y`                               | `y`                          | `number\|null\|undefined`          |         | Set a specific y coordinate                      |
-| `zIndex`                          | `z-index`                    | `number\|null\|undefined`          |         | Set a preferable z-index to override automatically calculated z-index |
+| Property                          | Attribute                    | Type                                | Default | Description                                      |
+|-----------------------------------|------------------------------|-------------------------------------|---------|--------------------------------------------------|
+| `focusBoundary`                   |                              | `HTMLElement \| ShadowRoot \| null` | "this"  | Set focus boundary to restrict tabbing. Default's overlay itself.<br />If external focus is required, set to null |
+| `fullScreen`                      | `full-screen`                | `boolean`                           | false   | Set to true to show overlay in full screen mode  |
+| `fullyOpened (readonly)`          |                              | `boolean`                           | false   | Returns true if the overlay is opened and animation is not running.<br />Returns false if overlay is closed and animation is not running |
+| `horizontalOffset`                | `horizontal-offset`          | `number`                            | 0       | A pixel value that will be added to the position calculated on the horizontal axis.<br />The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `interactiveElements`             |                              | `HTMLElement[]`                     | []      | A list of elements, which are active when overlay is opened<br />Valid only if noInteractionLock is false (default) |
+| `lockPositionTarget`              | `lock-position-target`       | `boolean`                           | false   | True to lock position target<br />Valid only if noInteractionLock is false (default) |
+| `noAutofocus`                     | `no-autofocus`               | `boolean`                           | false   | Set to true to disable autofocusing the overlay or open |
+| `noCancelOnEscKey`                | `no-cancel-on-esc-key`       | `boolean`                           | false   | Set to true to disable canceling the overlay with the ESC key |
+| `noCancelOnOutsideClick`          | `no-cancel-on-outside-click` | `boolean`                           | false   | Set to true to disable canceling the overlay by clicking outside it |
+| `noFocusManagement`               | `no-focus-management`        | `boolean`                           | false   | True to not apply focus management.<br />The overlay will not limit Tab behaviour or do auto-focusing |
+| `noInteractionLock`               | `no-interaction-lock`        | `boolean`                           | false   | Stop preventing user interaction when overlay is visible |
+| `noOverlap`                       | `no-overlap`                 | `boolean`                           | false   | True to not overlap positionTarget               |
+| `offset`                          | `offset`                     | `number`                            | 0       | A pixel value that will be added to the position calculated on the vertical or horizontal axis.<br />The offset is applied dynamically depending on the `positionTarget` |
+| `opened`                          | `opened`                     | `boolean`                           | false   | True if the overlay is currently displayed       |
+| `position`                        | `position`                   | `Position[] \| undefined`           |         | Set position and align against the attach target.<br />Position may contain a single word or a comma separated list to set the priority.<br />Position is not applied if `positionTarget` is not an HTML Element.<br />For instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;<br />or `left, right` - align is not set, set best position on the `left` or `right`<br /><br />Position can be: `top`, `right`, `bottom`, `left`, `center`<br />Align can be: `start`, `middle`, `end` |
+| `positionTarget`                  | `position-target`            | `PositionTarget\|null\|undefined`   |         | Set the position target as follows:<br />- HTMLElement if overlay is position next to the HTML element<br />- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.<br />For instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen |
+| `positionTargetConfig (readonly)` |                              | `PositionTargetStrategy`            |         | Get position target configuration based on positionTarget and fullScreen properties<br />Used for caching and calculations |
+| `spacing`                         | `spacing`                    | `boolean`                           | false   | True to apply spacing for overlay content        |
+| `transitionStyle`                 | `transition-style`           | `TransitionStyle\|null\|undefined`  |         | Set the transition style                         |
+| `transitioning (readonly)`        |                              | `boolean`                           | false   | Returns true if overlay is doing opening or closing transition |
+| `transparent`                     | `transparent`                | `boolean`                           | false   | True to make overlay background transparent      |
+| `verticalOffset`                  | `vertical-offset`            | `number`                            | 0       | A pixel value that will be added to the position calculated on the vertical axis.<br />The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `withBackdrop`                    | `with-backdrop`              | `boolean`                           | false   | True to show backdrop                            |
+| `withShadow`                      | `with-shadow`                | `boolean`                           | false   | True to add shadow                               |
+| `x`                               | `x`                          | `number\|null\|undefined`           |         | Set a specific x coordinate                      |
+| `y`                               | `y`                          | `number\|null\|undefined`           |         | Set a specific y coordinate                      |
+| `zIndex`                          | `z-index`                    | `number\|null\|undefined`           |         | Set a preferable z-index to override automatically calculated z-index |
 
 ## Methods
 

package/lib/overlay/elements/overlay.d.ts

@@ -117,6 +117,7 @@ export declare class Overlay extends ResponsiveElement {
     /**
      * A list of elements, which are active when overlay is opened
      * Valid only if noInteractionLock is false (default)
+     * @type {HTMLElement[]}
      */
     interactiveElements: HTMLElement[];
     /**
@@ -142,6 +143,7 @@ export declare class Overlay extends ResponsiveElement {
      * Align can be: `start`, `middle`, `end`
      *
      * @param value Position value
+     * @type {Position[] | undefined}
      */
     set position(value: Position[] | undefined);
     get position(): Position[] | undefined;
@@ -157,11 +159,13 @@ export declare class Overlay extends ResponsiveElement {
     /**
      * Get position target configuration based on positionTarget and fullScreen properties
      * Used for caching and calculations
+     * @type {PositionTargetStrategy}
      */
     get positionTargetConfig(): PositionTargetStrategy;
     /**
      * Set focus boundary to restrict tabbing. Default's overlay itself.
      * If external focus is required, set to null
+     * @type {HTMLElement | ShadowRoot | null}
      */
     focusBoundary: HTMLElement | ShadowRoot | null;
     /**
@@ -369,11 +373,13 @@ export declare class Overlay extends ResponsiveElement {
     /**
      * Returns true if the overlay is opened and animation is not running.
      * Returns false if overlay is closed and animation is not running
+     * @default false
      * @readonly
      */
     get fullyOpened(): boolean;
     /**
      * Returns true if overlay is doing opening or closing transition
+     * @default false
      * @readonly
      */
     get transitioning(): boolean;

package/lib/overlay/elements/overlay.js

@@ -153,6 +153,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         /**
          * A list of elements, which are active when overlay is opened
          * Valid only if noInteractionLock is false (default)
+         * @type {HTMLElement[]}
          */
         this.interactiveElements = [];
         /**
@@ -166,6 +167,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         /**
          * Set focus boundary to restrict tabbing. Default's overlay itself.
          * If external focus is required, set to null
+         * @type {HTMLElement | ShadowRoot | null}
          */
         this.focusBoundary = this;
         /**
@@ -358,6 +360,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
      * Align can be: `start`, `middle`, `end`
      *
      * @param value Position value
+     * @type {Position[] | undefined}
      */
     set position(value) {
         const oldPosition = this._position;
@@ -403,6 +406,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
     /**
      * Get position target configuration based on positionTarget and fullScreen properties
      * Used for caching and calculations
+     * @type {PositionTargetStrategy}
      */
     get positionTargetConfig() {
         const { viewHeight, viewWidth, viewOffsetTop, viewOffsetLeft } = this.viewAreaInfo;
@@ -1320,6 +1324,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
     /**
      * Returns true if the overlay is opened and animation is not running.
      * Returns false if overlay is closed and animation is not running
+     * @default false
      * @readonly
      */
     get fullyOpened() {
@@ -1327,6 +1332,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
     }
     /**
      * Returns true if overlay is doing opening or closing transition
+     * @default false
      * @readonly
      */
     get transitioning() {

package/lib/overlay/managers/backdrop-manager.d.ts

@@ -1,5 +1,5 @@
-import '../elements/overlay-backdrop.js';
 import type { Overlay } from '../elements/overlay';
+import '../elements/overlay-backdrop.js';
 /**
  * Backdrop manager adds a backdrop to the body
  * @returns {void}

package/lib/overlay/managers/viewport-manager.d.ts

@@ -1,5 +1,5 @@
-import '../elements/overlay-viewport.js';
 import type { Overlay } from '../elements/overlay';
+import '../elements/overlay-viewport.js';
 import type { ViewAreaInfo } from '../helpers/types';
 /**
  * Viewport manager singleton is responsible for getting

package/lib/overlay/managers/viewport-manager.js

@@ -95,6 +95,7 @@ export class ViewportManager {
         // Safari does but zooming doesn't update this property value
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
+        // TODO: Remove @ts-ignore and re-test again when standardized zoom is implemented across major browsers and TypeScript, https://github.com/w3c/csswg-drafts/issues/5623
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         const zoom = parseFloat(window.getComputedStyle(document.body).zoom);
         const screenHeight = screenRect.height / zoom;

package/lib/overlay-menu/custom-elements.json

@@ -77,7 +77,8 @@
         {
           "name": "offset",
           "description": "A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`",
-          "type": "number"
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "position",
@@ -222,7 +223,8 @@
           "name": "offset",
           "attribute": "offset",
           "description": "A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`",
-          "type": "number"
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "position",

package/lib/overlay-menu/custom-elements.md

@@ -24,7 +24,7 @@ Overlay that supports single-level and multi-level menus
 | `lockPositionTarget`     | `lock-position-target`       | `boolean`                    | false   | Set to true to lock position target              |
 | `noCancelOnEscKey`       | `no-cancel-on-esc-key`       | `boolean`                    | false   | Set to true to disable canceling the overlay with the ESC key |
 | `noCancelOnOutsideClick` | `no-cancel-on-outside-click` | `boolean`                    | false   | Set to true to disable canceling the overlay by clicking outside it |
-| `offset`                 | `offset`                     | `number`                     |         | A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget` |
+| `offset`                 | `offset`                     | `number`                     | 0       | A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget` |
 | `opened`                 | `opened`                     | `boolean`                    | false   | True if the menu is currently displayed          |
 | `position`               | `position`                   | `Position[] \| undefined`    |         | Set position and align against the attach target. |
 | `positionTarget`         |                              | `HTMLElement \| null`        | null    | Position next to the HTML element                |

package/lib/overlay-menu/helpers/types.d.ts

@@ -1,6 +1,6 @@
+import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import type { Item, ItemData } from '../../item';
 import type { OverlayMenu } from '../index';
-import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 export type NestedMenu = {
     menu: OverlayMenu;
     item: Item;

package/lib/overlay-menu/index.d.ts

@@ -45,7 +45,7 @@ export type { OverlayMenuData };
  * @prop {number} [verticalOffset=0] - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
  *
  * @attr {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
- * @prop {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
+ * @prop {number} [offset=0] - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  *
  * @attr {Position[] | undefined} position - Set position and align against the attach target.
  * @prop {Position[] | undefined} position - Set position and align against the attach target.

package/lib/overlay-menu/index.js

@@ -54,7 +54,7 @@ import { OpenedMenusManager } from './managers/menu-manager.js';
  * @prop {number} [verticalOffset=0] - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
  *
  * @attr {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
- * @prop {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
+ * @prop {number} [offset=0] - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  *
  * @attr {Position[] | undefined} position - Set position and align against the attach target.
  * @prop {Position[] | undefined} position - Set position and align against the attach target.

package/lib/overlay-menu/managers/menu-manager.d.ts

@@ -1,5 +1,5 @@
-import { OverlayMenu } from '../index.js';
 import type { Item } from '../../item';
+import { OverlayMenu } from '../index.js';
 /**
  * Overlay menu manager monitors menu nesting and ensures
  * that only a single menu tree can be opened

package/lib/pagination/custom-elements.json

@@ -8,16 +8,18 @@
         {
           "name": "value",
           "description": "Current page",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "max",
-          "description": "Max page",
-          "type": "string"
+          "description": "Maximum page limit",
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "disabled",
-          "description": "Set state to disable",
+          "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
         }
@@ -27,18 +29,20 @@
           "name": "value",
           "attribute": "value",
           "description": "Current page",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "max",
           "attribute": "max",
-          "description": "Max page",
-          "type": "string"
+          "description": "Maximum page limit",
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Set state to disable",
+          "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
         }

package/lib/pagination/custom-elements.md

@@ -4,11 +4,11 @@ Used to control and navigate through multiple pages
 
 ## Properties
 
-| Property   | Attribute  | Type      | Default | Description          |
-|------------|------------|-----------|---------|----------------------|
-| `disabled` | `disabled` | `boolean` | false   | Set state to disable |
-| `max`      | `max`      | `string`  |         | Max page             |
-| `value`    | `value`    | `string`  |         | Current page         |
+| Property   | Attribute  | Type      | Default | Description        |
+|------------|------------|-----------|---------|--------------------|
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state |
+| `max`      | `max`      | `string`  | ""      | Maximum page limit |
+| `value`    | `value`    | `string`  | ""      | Current page       |
 
 ## Methods
 

package/lib/pagination/index.d.ts

@@ -31,6 +31,7 @@ export declare class Pagination extends BasicElement {
     private get internalValue();
     /**
      * Current page
+     * @default -
      */
     get value(): string;
     /**
@@ -48,7 +49,8 @@ export declare class Pagination extends BasicElement {
      */
     private get internalMax();
     /**
-     * Max page
+     * Maximum page limit
+     * @default -
      * @returns max page
      */
     get max(): string;
@@ -58,7 +60,7 @@ export declare class Pagination extends BasicElement {
      */
     set max(value: string);
     /**
-     * Set state to disable
+     * Set disabled state
      */
     disabled: boolean;
     /**

package/lib/pagination/index.js

@@ -31,7 +31,7 @@ let Pagination = class Pagination extends BasicElement {
          */
         this._max = '';
         /**
-         * Set state to disable
+         * Set disabled state
          */
         this.disabled = false;
         /**
@@ -63,6 +63,7 @@ let Pagination = class Pagination extends BasicElement {
     }
     /**
      * Current page
+     * @default -
      */
     get value() {
         return this._value;
@@ -94,7 +95,8 @@ let Pagination = class Pagination extends BasicElement {
         return max >= 1 ? max : 1;
     }
     /**
-     * Max page
+     * Maximum page limit
+     * @default -
      * @returns max page
      */
     get max() {