@refinitiv-ui/elements 5.12.0-alpha.2 → 5.12.2

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.12.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.12.1...@refinitiv-ui/elements@5.12.2) (2022-02-17)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [5.12.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.12.0...@refinitiv-ui/elements@5.12.1) (2022-02-15)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+# [5.12.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.11.0...@refinitiv-ui/elements@5.12.0) (2022-02-15)
+
+
+### Bug Fixes
+
+* radio-button not add to group ([#167](https://github.com/Refinitiv/refinitiv-ui/issues/167)) ([fb05273](https://github.com/Refinitiv/refinitiv-ui/commit/fb052730cf8c7eeb376a3a49501b85dc363bf614))
+* **slider:** value-changed event is not fired ([#174](https://github.com/Refinitiv/refinitiv-ui/issues/174)) ([687f244](https://github.com/Refinitiv/refinitiv-ui/commit/687f244b4d848a684dc986158f324974931a3689))
+
+
+### Features
+
+* **button-bar:** improve screen reader support ([#176](https://github.com/Refinitiv/refinitiv-ui/issues/176)) ([f121ea6](https://github.com/Refinitiv/refinitiv-ui/commit/f121ea62fbdc160823dff386ec937b45d0a131e7))
+* **collapse:** accessibility support ([#203](https://github.com/Refinitiv/refinitiv-ui/issues/203)) ([12ae2f7](https://github.com/Refinitiv/refinitiv-ui/commit/12ae2f7fe036d0351e69f5daca4369fae4097917))
+* **collapse:** add accessibility support ([#161](https://github.com/Refinitiv/refinitiv-ui/issues/161)) ([158f031](https://github.com/Refinitiv/refinitiv-ui/commit/158f0317dd4df9ab76e1bd27d4aa02151787c252))
+
+
+### Reverts
+
+* Revert "feat(collapse): add accessibility support (#161)" (#179) ([9a0ad70](https://github.com/Refinitiv/refinitiv-ui/commit/9a0ad709d71c243fe68dbc38318a04745ea5b23b)), closes [#161](https://github.com/Refinitiv/refinitiv-ui/issues/161) [#179](https://github.com/Refinitiv/refinitiv-ui/issues/179)
+
+
+
+
+
 # [5.11.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.10.1...@refinitiv-ui/elements@5.11.0) (2022-01-14)
 
 

package/README.md

@@ -29,10 +29,10 @@ Finally, import both elements that you want to use and its themes into your appl
 import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
 
 // import element and its Halo dark theme
-import '@refinitiv-ui/elements/button';
-import '@refinitiv-ui/elements/panel';
-import '@refinitiv-ui/elements/button/themes/halo/dark';
-import '@refinitiv-ui/elements/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/button';
+import '@refinitiv-ui/elements/lib/panel';
+import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
 ```
 
 Now, you can use the elements in your app.

package/lib/accordion/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
 import { VERSION } from '../version.js';
 import { Collapse } from '../collapse/index.js';
 /**

package/lib/appstate-bar/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 /**

package/lib/autosuggest/index.js

@@ -1,14 +1,14 @@
 var Autosuggest_1;
 import { __decorate } from "tslib";
 import { css, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { unsafeHTML } from '@refinitiv-ui/core/directives/unsafe-html.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { unsafeHTML } from '@refinitiv-ui/core/lib/directives/unsafe-html.js';
 import { VERSION } from '../version.js';
-import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
 import { escapeRegExp, itemHighlightable, itemRenderer, queryWordSelect } from './helpers/utils.js';
-import { isIE, isMobile } from '@refinitiv-ui/utils/browser.js';
+import { isIE, isMobile } from '@refinitiv-ui/utils/lib/browser.js';
 import { Overlay } from '../overlay/index.js';
 import '../loader/index.js';
 import '../item/index.js';

package/lib/button/index.d.ts

@@ -58,10 +58,16 @@ export declare class Button extends ControlElement {
      */
     ariaPressed: string;
     /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
+     * Aria indicating state of toggle button.
+     * Used when role is radio.
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
     protected update(changedProperties: PropertyValues): void;
     /**
      * the lifecycle method called when properties changed first time

package/lib/button/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { ControlElement, html } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
 import { VERSION } from '../version.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import '../icon/index.js';
@@ -65,6 +65,12 @@ let Button = class Button extends ControlElement {
          * @ignore
          */
         this.ariaPressed = '';
+        /**
+         * Aria indicating state of toggle button.
+         * Used when role is radio.
+         * @ignore
+         */
+        this.ariaChecked = '';
     }
     /**
      * Element version number
@@ -74,13 +80,18 @@ let Button = class Button extends ControlElement {
         return VERSION;
     }
     /**
-    * Updates the element
-    * @param changedProperties Properties that has changed
-    * @returns {void}
-    */
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
     update(changedProperties) {
         if (changedProperties.has('active') && this.toggles || changedProperties.has('toggles') && this.toggles) {
-            this.ariaPressed = String(this.active);
+            if (this.getAttribute('role') === 'radio') {
+                this.ariaChecked = String(this.active);
+            }
+            else {
+                this.ariaPressed = String(this.active);
+            }
         }
         super.update(changedProperties);
     }
@@ -215,6 +226,13 @@ __decorate([
         converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
     })
 ], Button.prototype, "ariaPressed", void 0);
+__decorate([
+    property({ type: String,
+        reflect: true,
+        attribute: 'aria-checked',
+        converter: { toAttribute: emptyStringToNull } // TODO: Remove after typescript update to allow nullable for ARIAMixin
+    })
+], Button.prototype, "ariaChecked", void 0);
 Button = __decorate([
     customElement('ef-button', {
         alias: 'coral-button'

package/lib/button-bar/index.d.ts

@@ -9,6 +9,11 @@ export declare class ButtonBar extends BasicElement {
      * @returns version number
      */
     static get version(): string;
+    /**
+     * Element's role attribute for accessibility
+     * `role` should be `radiogroup` when it is managed.
+     */
+    protected defaultRole: 'toolbar' | 'radiogroup';
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -30,6 +35,45 @@ export declare class ButtonBar extends BasicElement {
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    private navigateToSibling;
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    private first;
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    private last;
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    private rovingTabIndex;
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    private manageTabIndex;
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    private isNested;
     /**
      * Handles tap event
      * @param event the param is the event of click and tap handlers
@@ -47,6 +91,11 @@ export declare class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     private getElementsOfSlot;
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    private getFocusableButtons;
     /**
      * Filter Button classes by the toggles property
      * @param buttons the array of Button items is the converted nodes of the default slot

package/lib/button-bar/index.js

@@ -1,20 +1,30 @@
+var ButtonBar_1;
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
 import { VERSION } from '../version.js';
 import { Button } from '../button/index.js';
+import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
 /**
  * Used to display multiple buttons to create a list of commands bar.
  */
-let ButtonBar = class ButtonBar extends BasicElement {
+let ButtonBar = ButtonBar_1 = class ButtonBar extends BasicElement {
     constructor() {
         super(...arguments);
+        /**
+         * Element's role attribute for accessibility
+         * `role` should be `radiogroup` when it is managed.
+         */
+        this.defaultRole = 'toolbar';
         /**
          * Manages user interaction, only allowing one toggle button to be active at any one time.
          */
         this.managed = false;
+        /**
+         * Default slot
+         */
+        this.defaultSlot = createRef();
     }
     /**
      * Element version number
@@ -84,6 +94,130 @@ let ButtonBar = class ButtonBar extends BasicElement {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.addEventListener('tap', this.onTapHandler);
+        this.addEventListener('keydown', this.onKeyDown);
+        this.manageTabIndex();
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Tab':
+                // To prevent inserting button case, make sure there is only one tabIndex=0 in the buttons
+                this.manageTabIndex();
+                break;
+            case ' ':
+            case 'Spacebar':
+            case 'Enter':
+                this.onTapHandler(event);
+                break;
+            case 'Right':
+            case 'ArrowRight':
+                // Prevent calling twice if this component is nested
+                !this.isNested() && this.navigateToSibling('next');
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                // Managed works as role radiogroup so `Up` and `Down` key can navigate among radios in the group
+                this.managed && this.navigateToSibling('next');
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                !this.isNested() && this.navigateToSibling('previous');
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.managed && this.navigateToSibling('previous');
+                break;
+            case 'Home':
+                !this.isNested() && this.first();
+                break;
+            case 'End':
+                !this.isNested() && this.last();
+                break;
+            default:
+                return;
+        }
+    }
+    /**
+     * Navigate to next or previous focusable button
+     * @param direction next | down
+     * @returns {void}
+     */
+    navigateToSibling(direction) {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        const focusedButtonIndex = buttons.findIndex(button => button === document.activeElement);
+        const nextButton = direction === 'next'
+            ? buttons[focusedButtonIndex + 1] || buttons[0]
+            : buttons[focusedButtonIndex - 1] || buttons[buttons.length - 1];
+        nextButton.focus();
+        this.rovingTabIndex(nextButton, buttons);
+    }
+    /**
+     * Navigate to the first focusable button
+     * @returns {void}
+     */
+    first() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[0].focus();
+        this.rovingTabIndex(buttons[0], buttons);
+    }
+    /**
+     * Navigate to the last focusable button
+     * @returns {void}
+     */
+    last() {
+        const buttons = this.getFocusableButtons();
+        if (buttons.length <= 0) {
+            return;
+        }
+        buttons[buttons.length - 1].focus();
+        this.rovingTabIndex(buttons[buttons.length - 1], buttons);
+    }
+    /**
+     * Sets the tabindex to -1 for all buttons except the currently focused one.
+     * @param target the button to be focused
+     * @param buttons Array of Buttons that contains target
+     * @returns {void}
+     */
+    rovingTabIndex(target, buttons) {
+        buttons.forEach((button) => {
+            button.tabIndex = -1;
+        });
+        target.tabIndex = 0;
+    }
+    /**
+     * Set tabIndex to all buttons
+     * @returns {void}
+     */
+    manageTabIndex() {
+        if (this.isNested()) {
+            return;
+        }
+        const buttons = this.getFocusableButtons();
+        if (buttons && buttons.length > 0) {
+            // Set tabindex=0 to previous focused button when new button added If not found set it to first button instead
+            let focusedButtonIndex = buttons.findIndex(button => document.activeElement === button);
+            if (focusedButtonIndex === -1) {
+                focusedButtonIndex = 0;
+            }
+            this.rovingTabIndex(buttons[focusedButtonIndex], buttons);
+        }
+    }
+    /**
+     * Check if button bar is nested, a.k.a. has parent button bar
+     * @returns `True` if button bar is nested
+     */
+    isNested() {
+        return this.parentElement instanceof ButtonBar_1;
     }
     /**
      * Handles tap event
@@ -99,6 +233,8 @@ let ButtonBar = class ButtonBar extends BasicElement {
             event.stopPropagation();
             this.manageButtons(target);
         }
+        target.focus();
+        this.rovingTabIndex(target, this.getFocusableButtons());
     }
     /**
      * Get the target Button item and handle it with other managed Button items
@@ -120,8 +256,15 @@ let ButtonBar = class ButtonBar extends BasicElement {
      * @returns the array of Element of the default slot
      */
     getElementsOfSlot() {
-        return this.defaultSlot.assignedNodes()
-            .filter(node => node instanceof Element);
+        var _a;
+        return (_a = this.defaultSlot.value) === null || _a === void 0 ? void 0 : _a.assignedNodes().filter(node => node instanceof Element);
+    }
+    /**
+     * Return the array of Buttons which focusable
+     * @returns the array of focusable Buttons
+     */
+    getFocusableButtons() {
+        return [...this.querySelectorAll('ef-button,coral-button')].filter(button => !button.disabled);
     }
     /**
      * Filter Button classes by the toggles property
@@ -138,16 +281,13 @@ let ButtonBar = class ButtonBar extends BasicElement {
      * @return {TemplateResult}  Render template
      */
     render() {
-        return html `<slot></slot>`;
+        return html `<slot ${ref(this.defaultSlot)} ></slot>`;
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ButtonBar.prototype, "managed", void 0);
-__decorate([
-    query('slot:not([name])')
-], ButtonBar.prototype, "defaultSlot", void 0);
-ButtonBar = __decorate([
+ButtonBar = ButtonBar_1 = __decorate([
     customElement('ef-button-bar', {
         alias: 'coral-split-button'
     })

package/lib/calendar/constants.js

@@ -1,4 +1,4 @@
-import { uuid } from '@refinitiv-ui/utils/uuid.js';
+import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
 export var RenderView;
 (function (RenderView) {
     RenderView["DAY"] = "day";

package/lib/calendar/index.d.ts

@@ -4,7 +4,7 @@ import { TranslateDirective, TranslatePromise } from '@refinitiv-ui/translate';
 import { CalendarFilter } from './types';
 import './locales.js';
 import '../button/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
 export { CalendarFilter };
 /**
  * Standard calendar element

package/lib/calendar/index.js

@@ -1,22 +1,22 @@
 import { __decorate } from "tslib";
 import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
-import { cache } from '@refinitiv-ui/core/directives/cache.js';
-import { guard } from '@refinitiv-ui/core/directives/guard.js';
-import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { cache } from '@refinitiv-ui/core/lib/directives/cache.js';
+import { guard } from '@refinitiv-ui/core/lib/directives/guard.js';
+import { ref, createRef } from '@refinitiv-ui/core/lib/directives/ref.js';
 import { VERSION } from '../version.js';
-import { isIE } from '@refinitiv-ui/utils/browser.js';
-import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/date.js';
-import { left, right, up, down, first, last } from '@refinitiv-ui/utils/navigation.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { DateFormat, format, utcFormat, utcParse, isValidDate, isWeekend, isAfter, isBefore, addMonths, subMonths, isToday, isThisMonth, isThisYear, isSameDay, isSameMonth, isSameYear, toDateSegment, parse } from '@refinitiv-ui/utils/lib/date.js';
+import { left, right, up, down, first, last } from '@refinitiv-ui/utils/lib/navigation.js';
 import { monthInfo, weekdaysNames, monthsNames, formatLocaleDate, ViewFormatTranslateParams } from './utils.js';
 import { translate, getLocale, TranslatePropertyKey } from '@refinitiv-ui/translate';
 import { RenderView, CalendarLocaleScope, FIRST_DAY_OF_WEEK, YEARS_PER_YEAR_VIEW, DAY_VIEW, YEAR_VIEW, MONTH_VIEW } from './constants.js';
 import './locales.js';
 import '../button/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/calendar.js';
 /**
  * Standard calendar element
  *

package/lib/calendar/types.d.ts

@@ -1,4 +1,4 @@
-import { CellIndex } from '@refinitiv-ui/utils/navigation.js';
+import { CellIndex } from '@refinitiv-ui/utils/lib/navigation.js';
 import { RenderView } from './constants.js';
 export interface CellSelectionModel {
     selected?: boolean;

package/lib/calendar/utils.js

@@ -1,4 +1,4 @@
-import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/date.js';
+import { toDateSegment, getDaysInMonth, utcParse } from '@refinitiv-ui/utils/lib/date.js';
 import { DEFAULT_LOCALE, resolveLocale } from '@refinitiv-ui/i18n';
 import { CalendarLocaleScope } from './constants.js';
 /**

package/lib/canvas/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
 import { VERSION } from '../version.js';
 /**
  * A Component uses to draw graphics on a web page,

package/lib/card/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
 import { VERSION } from '../version.js';
-import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
 import '../label/index.js';
 import '../button/index.js';
 import '../overlay-menu/index.js';

package/lib/chart/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
 import { VERSION } from '../version.js';
-import { color as parseColor } from '@refinitiv-ui/utils/color.js';
+import { color as parseColor } from '@refinitiv-ui/utils/lib/color.js';
 import 'chart.js/dist/Chart.bundle.min.js';
 import { legendHelper, merge } from './helpers/index.js';
 import '../header/index.js';

package/lib/checkbox/index.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { ControlElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
 import { VERSION } from '../version.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import '../icon/index.js';

package/lib/clock/index.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
 import { html, css, WarningNotice, ResponsiveElement } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
 import { VERSION } from '../version.js';
-import { MILLISECONDS_IN_SECOND, HOURS_OF_NOON, isValidTime, toTimeSegment, TimeFormat, format, padNumber } from '@refinitiv-ui/utils/date.js';
+import { MILLISECONDS_IN_SECOND, HOURS_OF_NOON, isValidTime, toTimeSegment, TimeFormat, format, padNumber } from '@refinitiv-ui/utils/lib/date.js';
 import { HOURS_IN_DAY, MINUTES_IN_HOUR, SECONDS_IN_DAY, SECONDS_IN_HOUR, SECONDS_IN_MINUTE } from './utils/timestamps.js';
 import { register, deRegister } from './utils/TickManager.js';
 const UP = 'Up';

package/lib/clock/utils/TickManager.js

@@ -1,5 +1,5 @@
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
-import { MILLISECONDS_IN_SECOND } from '@refinitiv-ui/utils/date.js';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { MILLISECONDS_IN_SECOND } from '@refinitiv-ui/utils/lib/date.js';
 const tickSet = new Set();
 let timeout = null;
 /**

package/lib/collapse/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "header",
           "description": "Set text on the header",
-          "type": "string | null"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "level",
@@ -34,7 +35,8 @@
           "name": "header",
           "attribute": "header",
           "description": "Set text on the header",
-          "type": "string | null"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "level",