@refinitiv-ui/elements 7.6.1 → 7.7.0

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-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/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/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() {

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

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { Translate } from '@refinitiv-ui/translate';
@@ -49,6 +49,16 @@ export declare class PasswordField extends TextField {
      * Defines whether password is visible or not
      */
     private isPasswordVisible;
+    /**
+     * live region content presenting password field visibility state
+     */
+    private liveRegionContent;
+    /**
+     * A `CSSResultGroup` that will be used to style the host,
+     * slotted children and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
     /**
      * Called when the element’s DOM has been updated and rendered for the first time
      * @param changedProperties Properties that has changed
@@ -76,6 +86,18 @@ export declare class PasswordField extends TextField {
      * @returns {void}
      */
     protected renderIcon(): TemplateResult | null;
+    /**
+     * update live region content describing password visibility state
+     * @param event event trigging live region content update
+     * @return void
+     */
+    protected updateLiveRegionContent(event: Event): void;
+    /**
+     * Handle tap events of toggle password icon
+     * @param event custom event
+     * @returns {void}
+     */
+    protected onTogglePasswordTap(event: CustomEvent): void;
     /**
      * Toggles password visibility state
      * @return void

package/lib/password-field/index.js

@@ -1,9 +1,10 @@
 import { __decorate } from "tslib";
-import { html } from '@refinitiv-ui/core';
+import { html, unsafeCSS } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
+import { VISUALLY_HIDDEN_STYLE } from '@refinitiv-ui/utils/accessibility.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import { deregisterOverflowTooltip } from '../tooltip/index.js';
@@ -49,6 +50,18 @@ let PasswordField = class PasswordField extends TextField {
          * Defines whether password is visible or not
          */
         this.isPasswordVisible = false;
+        /**
+         * live region content presenting password field visibility state
+         */
+        this.liveRegionContent = '';
+    }
+    /**
+     * A `CSSResultGroup` that will be used to style the host,
+     * slotted children and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles() {
+        return [super.styles, unsafeCSS(VISUALLY_HIDDEN_STYLE)];
     }
     /**
      * Called when the element’s DOM has been updated and rendered for the first time
@@ -95,14 +108,40 @@ let PasswordField = class PasswordField extends TextField {
         part="icon"
         role="button"
         tabindex="0"
-        aria-label="${this.isPasswordVisible ? this.t('HIDE_PASSWORD') : this.t('SHOW_PASSWORD')}"
+        aria-pressed="${this.isPasswordVisible}"
+        aria-label="${this.t('SHOW_PASSWORD')}"
         icon=${this.isPasswordVisible ? 'eye-off' : 'eye'}
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
-        @tap="${this.togglePasswordVisibility}"
+        @tap="${this.onTogglePasswordTap}"
+        @focus="${this.updateLiveRegionContent}"
+        @blur="${this.updateLiveRegionContent}"
       ></ef-icon>
+      <div part="live-region" aria-live="polite" class="visually-hidden">${this.liveRegionContent}</div>
     `;
     }
+    /**
+     * update live region content describing password visibility state
+     * @param event event trigging live region content update
+     * @return void
+     */
+    updateLiveRegionContent(event) {
+        this.liveRegionContent =
+            event.type === 'blur'
+                ? ''
+                : this.isPasswordVisible
+                    ? this.t('SHOW_PASSWORD_ON')
+                    : this.t('SHOW_PASSWORD_OFF');
+    }
+    /**
+     * Handle tap events of toggle password icon
+     * @param event custom event
+     * @returns {void}
+     */
+    onTogglePasswordTap(event) {
+        this.togglePasswordVisibility();
+        this.updateLiveRegionContent(event);
+    }
     /**
      * Toggles password visibility state
      * @return void
@@ -117,6 +156,9 @@ __decorate([
 __decorate([
     state()
 ], PasswordField.prototype, "isPasswordVisible", void 0);
+__decorate([
+    state()
+], PasswordField.prototype, "liveRegionContent", void 0);
 PasswordField = __decorate([
     customElement('ef-password-field')
 ], PasswordField);

package/lib/pill/custom-elements.json

@@ -19,7 +19,7 @@
         },
         {
           "name": "active",
-          "description": "Add to pill for active state",
+          "description": "Set active state",
           "type": "boolean",
           "default": "false"
         },
@@ -60,7 +60,7 @@
         {
           "name": "active",
           "attribute": "active",
-          "description": "Add to pill for active state",
+          "description": "Set active state",
           "type": "boolean",
           "default": "false"
         },

package/lib/pill/custom-elements.md

@@ -6,14 +6,14 @@ It is rarely used in the UI but inside other components to visualize multiple it
 
 ## Properties
 
-| Property   | Attribute  | Type      | Default | Description                  |
-|------------|------------|-----------|---------|------------------------------|
-| `active`   | `active`   | `boolean` | false   | Add to pill for active state |
-| `clears`   | `clears`   | `boolean` | false   | Set pill to clearable        |
-| `disabled` | `disabled` | `boolean` | false   | Set disabled state           |
-| `readonly` | `readonly` | `boolean` | false   | Set readonly state           |
-| `toggles`  | `toggles`  | `boolean` | false   | Set pill to toggle mode      |
-| `value`    | `value`    | `string`  | ""      | Value of pill                |
+| Property   | Attribute  | Type      | Default | Description             |
+|------------|------------|-----------|---------|-------------------------|
+| `active`   | `active`   | `boolean` | false   | Set active state        |
+| `clears`   | `clears`   | `boolean` | false   | Set pill to clearable   |
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state      |
+| `readonly` | `readonly` | `boolean` | false   | Set readonly state      |
+| `toggles`  | `toggles`  | `boolean` | false   | Set pill to toggle mode |
+| `value`    | `value`    | `string`  | ""      | Value of pill           |
 
 ## Events