@refinitiv-ui/elements 6.8.1 → 6.9.0-next.0

package/lib/calendar/index.d.ts

@@ -5,7 +5,6 @@ import type { CalendarFilter } from './types';
 import './locales.js';
 import '../button/index.js';
 import '@refinitiv-ui/phrasebook/locale/en/calendar.js';
-import { PropertyValueMap } from 'lit';
 export { CalendarFilter };
 /**
  * Standard calendar element
@@ -185,7 +184,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * @param changedProperties  Properties that will change
      * @returns {void}
      */
-    protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     /**
     * Updates the element
     * @param changedProperties Properties that has changed

package/lib/calendar/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { ControlElement, html, css, nothing, 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';
@@ -1132,7 +1131,7 @@ let Calendar = class Calendar extends ControlElement {
         return html `<div
       role="gridcell"
       part="cell ${cell.view}"
-      aria-selected="${ifDefined(isSelectable ? (cell.selected ? 'true' : 'false') : undefined)}"
+      aria-selected="${isSelectable ? (cell.selected ? 'true' : 'false') : nothing}"
       ?active=${cell.active}
       ?disabled=${cell.disabled}
       ?idle=${cell.idle}
@@ -1143,13 +1142,13 @@ let Calendar = class Calendar extends ControlElement {
       ?range=${cell.range}
       ?range-from=${cell.rangeFrom}
       ?range-to=${cell.rangeTo}>
-        <div role="${ifDefined(cell.value ? 'button' : undefined)}"
-             tabindex=${ifDefined(isSelectable ? (cell.active ? 0 : -1) : undefined)}
-             aria-label="${ifDefined(isSelectable && !isIE ? this.t(this.getCellLabelKey(cell), {
+        <div role="${cell.value ? 'button' : nothing}"
+             tabindex=${isSelectable ? (cell.active ? 0 : -1) : nothing}
+             aria-label="${isSelectable && !isIE ? this.t(this.getCellLabelKey(cell), {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             value: parse(cell.value),
             view: this.renderView
-        }) : undefined)}"
+        }) : nothing}"
              part="cell-content${isSelection ? ' selection' : ''}${isSelectable ? ' selectable' : ''}"
              .value=${cell.value}
              .index=${cell.index}>${cell.text}</div>

package/lib/collapse/index.d.ts

@@ -100,6 +100,12 @@ export declare class Collapse extends BasicElement {
      * @returns clientHeight of the panel so that the panel holder max-height can be set
      */
     private getContentHeight;
+    /**
+     * Prevents expanding collapse when interactive element in slot is tapped
+     * @param event Tap event
+     * @returns {void}
+     */
+    private handleSlotTap;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/collapse/index.js

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
-import { BasicElement, css, html } from '@refinitiv-ui/core';
+import { BasicElement, css, nothing, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
@@ -74,20 +73,6 @@ let Collapse = class Collapse extends BasicElement {
       :host(:not([expanded])) [part~=content] {
         visibility: hidden;
       }
-      [part~=header] {
-        position: relative;
-        z-index: 0;
-      }
-      [part~=header-toggle]::before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: -1;
-      }
       [part~=content]  {
         overflow: hidden;
         box-sizing: border-box;
@@ -173,6 +158,14 @@ let Collapse = class Collapse extends BasicElement {
         const panelEl = this.panelRef.value;
         return panelEl ? panelEl.clientHeight : 0;
     }
+    /**
+     * Prevents expanding collapse when interactive element in slot is tapped
+     * @param event Tap event
+     * @returns {void}
+     */
+    handleSlotTap(event) {
+        event.stopPropagation();
+    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -180,21 +173,25 @@ let Collapse = class Collapse extends BasicElement {
      */
     render() {
         return html `
-      <ef-header part="header" level="${this.level}">
-        <div part="heading" role="heading" aria-level="${ifDefined(this.headingLevel || undefined)}">
-          <div id="header-toggle"
-               part="header-toggle"
-               role="button"
-               tabindex="0"
-               aria-expanded="${this.expanded}"
-               aria-controls="content"
-               @tap=${this.toggle}>${this.header}</div>
-        </div>
+      <ef-header
+        part="header"
+        role="heading"
+        level=${this.level}
+        aria-level=${this.headingLevel ?? nothing}
+        @tap=${this.toggle}>
+          <div
+            id="header-label"
+            role="button"
+            tabindex="0"
+            aria-expanded="${this.expanded}"
+            aria-controls="content">
+            ${this.header}
+          </div>
         <ef-icon icon="right" part="toggle" slot="left" aria-hidden="true"></ef-icon>
-        <slot name="header-left" slot="left"></slot>
-        <slot name="header-right" slot="right"></slot>
+        <slot name="header-left" slot="left" @tap=${this.handleSlotTap}></slot>
+        <slot name="header-right" slot="right" @tap=${this.handleSlotTap}></slot>
       </ef-header>
-      <div ${ref(this.panelHolderRef)} id="content" part="content" role="region" aria-labelledby="header-toggle">
+      <div ${ref(this.panelHolderRef)} id="content" part="content" role="region" aria-labelledby="header-label">
         <ef-panel ${ref(this.panelRef)} part="content-data" ?spacing="${this.spacing}" transparent>
           <slot></slot>
         </ef-panel>

package/lib/collapse/themes/halo/dark/index.js

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/panel/themes/halo/dark';
 import '@refinitiv-ui/elements/header/themes/halo/dark';
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;cursor:pointer;background-color:#404040}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#fff;background-color:#404040}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}' }}));

package/lib/collapse/themes/halo/light/index.js

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/panel/themes/halo/light';
 import '@refinitiv-ui/elements/header/themes/halo/light';
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;cursor:pointer;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.1s;opacity:.5;margin-right:.25em;margin-left:8px;flex-shrink:0;pointer-events:none;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#1429bd}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.1s;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]{text-transform:inherit}:host [part=header]:hover,:host [part~=header][focused=visible],:host([expanded]) [part=header]{color:#0d0d0d;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host [part~=header][focused=visible][level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host [part~=header][focused=visible][level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host [part~=header][focused=visible][level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}' }}));

package/lib/collapse/themes/solar/charcoal/index.js

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/panel/themes/solar/charcoal';
 import '@refinitiv-ui/elements/header/themes/solar/charcoal';
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#4d4d55}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));

package/lib/collapse/themes/solar/pearl/index.js

@@ -2,4 +2,4 @@ import '@refinitiv-ui/elements/panel/themes/solar/pearl';
 import '@refinitiv-ui/elements/header/themes/solar/pearl';
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{padding:0}:host [part~=header][focused=visible]{background-color:#fff}:host [part=header-toggle]{touch-action:manipulation;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-collapse', styles: ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.25em;margin-left:10px;flex-shrink:0;pointer-events:none}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part~=header]{touch-action:manipulation;cursor:pointer;padding:0}:host [part~=header][focused=visible]{background-color:#fff}:host [part=header-label]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:0}@keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{animation-duration:.2s;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{animation-name:expand}:host [part=content] ef-panel{overflow:auto}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}' }}));

package/lib/color-dialog/helpers/value-model.js

@@ -17,10 +17,7 @@ class ValueModel {
         this._hex = value.slice(1);
     }
     getHexValue() {
-        if (this.red === '' && this.green === '' && this.blue === '') {
-            return '';
-        }
-        else if (!this.isValidRGB()) {
+        if (!this.isValidRGB() || this.red === '' && this.green === '' && this.blue === '') {
             return '';
         }
         const hex = rgb(Number(this.red), Number(this.green), Number(this.blue)).formatHex();

package/lib/color-picker/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { ControlElement, html, css, WarningNotice, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import { isHex, readableColor } from '@refinitiv-ui/utils/color.js';
 import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
@@ -247,7 +246,7 @@ let ColorPicker = class ColorPicker extends ControlElement {
             return html `<ef-color-dialog
       offset="4"
       ${ref(this.dialogRef)}
-      .lang=${ifDefined(this.lang || undefined)}
+      .lang=${this.lang || nothing}
       .value=${this.value}
       .focusBoundary=${this}
       .positionTarget=${this}

package/lib/combo-box/index.js

@@ -1,11 +1,10 @@
 import { __decorate } from "tslib";
-import { FormFieldElement, css, html, WarningNotice, FocusedPropertyKey, triggerResize } from '@refinitiv-ui/core';
+import { FormFieldElement, css, html, WarningNotice, FocusedPropertyKey, triggerResize, nothing } 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 { eventOptions } from '@refinitiv-ui/core/decorators/event-options.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
@@ -1026,7 +1025,7 @@ let ComboBox = class ComboBox extends FormFieldElement {
             // benefit of being localised too
             if (this.focused || selectionLength > 1) {
                 return html `
-        <ef-counter part="selection-badge" tabindex="-1" .value=${selectionLength} title=${ifDefined(selectionLength > 999 ? selectionLength.toLocaleString() : undefined)} max="999"></ef-counter>
+        <ef-counter part="selection-badge" tabindex="-1" .value=${selectionLength} title=${selectionLength > 999 ? selectionLength.toLocaleString() : nothing} max="999"></ef-counter>
       `;
             }
         }

package/lib/config/custom-elements.json

@@ -0,0 +1,23 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-config",
+      "attributes": [
+        {
+          "name": "icon"
+        }
+      ],
+      "properties": [
+        {
+          "name": "config",
+          "default": "{\"icon\":{\"map\":{}}}"
+        },
+        {
+          "name": "icon",
+          "attribute": "icon"
+        }
+      ]
+    }
+  ]
+}

package/lib/config/custom-elements.md

@@ -0,0 +1,8 @@
+# ef-config
+
+## Properties
+
+| Property | Attribute | Default             |
+|----------|-----------|---------------------|
+| `config` |           | {"icon":{"map":{}}} |
+| `icon`   | `icon`    |                     |

package/lib/config/elements/config.d.ts

@@ -0,0 +1,37 @@
+import { JSXInterface } from '../../jsx';
+import { BasicElement, TemplateResult } from '@refinitiv-ui/core';
+import { type Config as ConfigType, type ConfigIcon } from '../helpers/context.js';
+export declare class Config extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    config: ConfigType;
+    set icon(icon: ConfigIcon);
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-config': Config;
+    }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-config': Config;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-config': Partial<Config> | JSXInterface.HTMLAttributes<Config>;
+    }
+  }
+}
+
+export {};

package/lib/config/elements/config.js

@@ -0,0 +1,44 @@
+import { __decorate } from "tslib";
+import { BasicElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { VERSION } from '../../version.js';
+import { efConfig } from '../helpers/context.js';
+import { provide } from '@lit-labs/context';
+const DEFAULT_CONFIG = { icon: { map: {} } };
+let Config = class Config extends BasicElement {
+    constructor() {
+        super(...arguments);
+        this.config = DEFAULT_CONFIG;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    set icon(icon) {
+        this.config = { ...this.config, icon };
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    provide({ context: efConfig }),
+    state()
+], Config.prototype, "config", void 0);
+__decorate([
+    property({ type: Object })
+], Config.prototype, "icon", null);
+Config = __decorate([
+    customElement('ef-config', { theme: false })
+], Config);
+export { Config };

package/lib/config/helpers/context.d.ts

@@ -0,0 +1,12 @@
+export type IconMap = {
+    [key: string]: string;
+};
+export type ConfigIcon = {
+    map: IconMap;
+};
+export type Config = {
+    icon: ConfigIcon;
+};
+export declare const efConfig: {
+    __context__: Config;
+};

package/lib/config/helpers/context.js

@@ -0,0 +1,2 @@
+import { createContext } from '@lit-labs/context';
+export const efConfig = createContext('ef-config');

package/lib/config/index.d.ts

@@ -0,0 +1,2 @@
+export * from './elements/config.js';
+export { efConfig, type Config } from './helpers/context.js';

package/lib/config/index.js

@@ -0,0 +1,2 @@
+export * from './elements/config.js';
+export { efConfig } from './helpers/context.js';

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

@@ -262,11 +262,11 @@ export declare class DatetimeField extends TextField {
     reportValidity(): boolean;
     /**
      * Select part
-     * @param index Part index
      * @param parts The list of parts
+     * @param index Part index
      * @returns {void}
      */
-    protected selectPart(index: number | undefined, parts: DateTimeFormatPart[]): void;
+    protected selectPart(parts: DateTimeFormatPart[], index?: number): void;
     /**
      * Change value or selection based on keyboard navigation
      * @param key Navigation key

package/lib/datetime-field/index.js

@@ -438,12 +438,12 @@ let DatetimeField = class DatetimeField extends TextField {
     }
     /**
      * Select part
-     * @param index Part index
      * @param parts The list of parts
+     * @param index Part index
      * @returns {void}
      */
-    selectPart(index = 0, parts) {
-        const { selectionStart, selectionEnd } = selectPart(index, parts);
+    selectPart(parts, index = 0) {
+        const { selectionStart, selectionEnd } = selectPart(parts, index);
         this.partLabel = parts[index] ? parts[index].type : '';
         this.setSelectionRange(selectionStart, selectionEnd);
     }
@@ -487,7 +487,7 @@ let DatetimeField = class DatetimeField extends TextField {
         const selectedPartIndex = getSelectedPartIndex(selection, parts);
         // If no segments selected, select the segment where the cursor is
         if (this.selectionStart === this.selectionEnd) {
-            this.selectPart(selectedPartIndex, parts);
+            this.selectPart(parts, selectedPartIndex);
             event.preventDefault();
             return;
         }
@@ -520,16 +520,16 @@ let DatetimeField = class DatetimeField extends TextField {
                     }
                     this.setValueAndNotify(newValue);
                     this.syncInputValue();
-                    this.selectPart(selectedPartIndex, this.formatToParts(newValue));
+                    this.selectPart(this.formatToParts(newValue), selectedPartIndex);
                     this.resetError();
                     event.preventDefault();
                 }
                 break;
             case 'ArrowRight':
             case 'ArrowLeft':
-                const nextPartIdx = getNextSelectedPartIndex(selection, parts, this.inputValue, key === 'ArrowLeft' ? Direction.Down : Direction.Up);
+                const nextPartIndex = getNextSelectedPartIndex(selection, parts, this.inputValue, key === 'ArrowLeft' ? Direction.Down : Direction.Up);
                 this.selectPartFrame.schedule(() => {
-                    this.selectPart(nextPartIdx, parts);
+                    this.selectPart(parts, nextPartIndex);
                 });
                 break;
             // no default

package/lib/datetime-field/utils.d.ts

@@ -18,8 +18,8 @@ export declare const getSelectedPartIndex: (selection: InputSelection, parts: Da
 export declare const getNextSelectedPartIndex: (selection: InputSelection, parts: DateTimeFormatPart[], inputValue: string, direction?: Direction) => number;
 /**
  * Get part selectionStart and selectionEnd indexes
- * @param index Part index
  * @param parts The list of parts
+ * @param index Part index
  * @returns selection
  */
-export declare const selectPart: (index: number | undefined, parts: DateTimeFormatPart[]) => InputSelection;
+export declare const selectPart: (parts: DateTimeFormatPart[], index?: number) => InputSelection;

package/lib/datetime-field/utils.js

@@ -57,11 +57,11 @@ export const getNextSelectedPartIndex = (selection, parts, inputValue, direction
 };
 /**
  * Get part selectionStart and selectionEnd indexes
- * @param index Part index
  * @param parts The list of parts
+ * @param index Part index
  * @returns selection
  */
-export const selectPart = (index = 0, parts) => {
+export const selectPart = (parts, index = 0) => {
     let selectionStart = 0;
     let selectionEnd = 0;
     for (let i = 0; i < parts.length; i += 1) {

package/lib/datetime-picker/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { ControlElement, html, css, WarningNotice, nothing } 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 { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import '../calendar/index.js';
 import '../icon/index.js';
@@ -938,7 +937,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         return html `<ef-calendar
       part="calendar"
       id=${id}
-      lang=${ifDefined(this.lang || undefined)}
+      lang=${this.lang || nothing}
       .fillCells=${!this.isDuplex()}
       .range=${this.range}
       .multiple=${this.multiple}
@@ -946,7 +945,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
       .max=${this.maxDate}
       .weekdaysOnly=${this.weekdaysOnly}
       .weekendsOnly=${this.weekendsOnly}
-      .firstDayOfWeek=${ifDefined(this.firstDayOfWeek)}
+      .firstDayOfWeek=${this.firstDayOfWeek || nothing}
       .values=${this.calendarValues}
       .filter=${this.filter}
       .view=${view}

package/lib/icon/index.d.ts

@@ -1,12 +1,18 @@
 import { JSXInterface } from '../jsx';
 import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
 export { preload } from './utils/IconLoader.js';
+import { type Config } from '../config/index.js';
 export declare class Icon extends BasicElement {
     /**
      * Element version number
      * @returns version number
      */
     static get version(): string;
+    /**
+     * Icon map from ef-config
+     * @ignore
+     */
+    config?: Config;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -37,6 +43,11 @@ export declare class Icon extends BasicElement {
      */
     private get template();
     private set template(value);
+    /**
+     * Check if the autosuggest has content
+     * @returns content exists
+     */
+    private get iconMap();
     /**
      * Called after the component is first rendered
      * @param changedProperties Properties which have changed

package/lib/icon/index.js

@@ -6,6 +6,8 @@ import { unsafeSVG } from '@refinitiv-ui/core/directives/unsafe-svg.js';
 import { VERSION } from '../version.js';
 import { IconLoader } from './utils/IconLoader.js';
 export { preload } from './utils/IconLoader.js';
+import { consume } from '@lit-labs/context';
+import { efConfig } from '../config/index.js';
 const EmptyTemplate = svg ``;
 /**
  * Cache for reusing SVG template results across multiple icons.
@@ -76,7 +78,10 @@ let Icon = class Icon extends BasicElement {
         if (this.src !== value) {
             this._src = value;
             this.clearIcon();
-            if (value) {
+            if (this.icon && this.iconMap) {
+                void this.loadAndRenderIcon(this.iconMap);
+            }
+            else if (value) {
                 void this.loadAndRenderIcon(value);
             }
         }
@@ -93,6 +98,13 @@ let Icon = class Icon extends BasicElement {
             this.requestUpdate();
         }
     }
+    /**
+     * Check if the autosuggest has content
+     * @returns content exists
+     */
+    get iconMap() {
+        return this.icon && this.config?.icon.map[this.icon] || null;
+    }
     /**
      * Called after the component is first rendered
      * @param changedProperties Properties which have changed
@@ -157,6 +169,9 @@ let Icon = class Icon extends BasicElement {
         return this.template;
     }
 };
+__decorate([
+    consume({ context: efConfig, subscribe: true })
+], Icon.prototype, "config", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Icon.prototype, "icon", null);

package/lib/multi-input/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { ControlElement, css, html } from '@refinitiv-ui/core';
+import { ControlElement, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import '../pill/index.js';
@@ -411,8 +410,8 @@ let MultiInput = class MultiInput extends ControlElement {
           @keydown="${this.handleKeyDown}"
           @change="${this.onInputChange}"
           @input="${this.onInputChange}"
-          maxlength="${ifDefined(this.maxLength || undefined)}"
-          minlength="${ifDefined(this.minLength || undefined)}"
+          maxlength="${this.maxLength || nothing}"
+          minlength="${this.minLength || nothing}"
           ?error="${this.error}"
           .value="${this.value}"
           .icon="${this.icon || null}"

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

@@ -235,8 +235,8 @@ export declare class NumberField extends FormFieldElement {
     private findNearestSteppedValue;
     /**
      * Apply step up or step down on the input
-     * @param stepIncrement step increment factor
      * @param direction either go up or down
+     * @param stepIncrement step increment factor
      * @returns {void}
      */
     private applyStepDirection;

package/lib/number-field/index.js

@@ -276,7 +276,7 @@ let NumberField = class NumberField extends FormFieldElement {
      */
     onApplyStep(direction) {
         try {
-            this.applyStepDirection(undefined, direction);
+            this.applyStepDirection(direction);
             this.setSilentlyValueAndNotify();
         }
         catch (error) {
@@ -502,11 +502,11 @@ let NumberField = class NumberField extends FormFieldElement {
     }
     /**
      * Apply step up or step down on the input
-     * @param stepIncrement step increment factor
      * @param direction either go up or down
+     * @param stepIncrement step increment factor
      * @returns {void}
      */
-    applyStepDirection(stepIncrement = 1, direction) {
+    applyStepDirection(direction, stepIncrement = 1) {
         const min = this.stringToNumber(this.min);
         const max = this.stringToNumber(this.max);
         // If the element has a minimum and a maximum and the minimum is greater than the maximum, then return.
@@ -564,7 +564,7 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns {void}
      */
     stepUp(stepIncrement) {
-        this.applyStepDirection(stepIncrement, Direction.Up);
+        this.applyStepDirection(Direction.Up, stepIncrement);
     }
     /**
      * Decreases the input value by amount of step
@@ -572,7 +572,7 @@ let NumberField = class NumberField extends FormFieldElement {
      * @returns {void}
      */
     stepDown(stepIncrement) {
-        this.applyStepDirection(stepIncrement, Direction.Down);
+        this.applyStepDirection(Direction.Down, stepIncrement);
     }
     /**
      * Returns true if an input element contains valid data.

package/lib/overlay-menu/index.js

@@ -1,9 +1,8 @@
 var OverlayMenu_1;
 import { __decorate } from "tslib";
-import { html, css, WarningNotice } from '@refinitiv-ui/core';
+import { html, css, nothing, 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 { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
@@ -872,7 +871,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             return html `<ef-item
         role="presentation"
         type="header"
-        title=${ifDefined(tooltip || undefined)}
+        title=${tooltip || nothing}
         .label=${label}
         .icon=${icon}></ef-item>`;
         }
@@ -886,9 +885,9 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         // type text
         return html `<ef-item
       role="menuitem"
-      aria-haspopup=${ifDefined(forMenu ? true : undefined)}
-      aria-expanded=${ifDefined(forMenu ? false : undefined)}
-      title=${ifDefined(tooltip || undefined)}
+      aria-haspopup=${forMenu ? true : nothing}
+      aria-expanded=${forMenu ? false : nothing}
+      title=${tooltip || nothing}
       ?disabled=${disabled}
       ?selected=${selected}
       ?highlighted=${highlighted}
@@ -896,8 +895,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
       .label=${label}
       .subLabel=${subLabel}
       .icon=${icon}
-      .value=${ifDefined(value || undefined)}
-      .for=${ifDefined(forMenu || undefined)}>
+      .value=${value || nothing}
+      .for=${forMenu || nothing}>
     </ef-item>`;
     }
     /**

package/lib/pagination/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { BasicElement, html, css, nothing, 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 { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
 import '../button/index.js';
@@ -477,7 +476,7 @@ let Pagination = class Pagination extends BasicElement {
           role="spinbutton"
           aria-valuenow=${this.internalValue}
           aria-valuemin="1"
-          aria-valuemax=${ifDefined(this.max || undefined)}
+          aria-valuemax=${this.max || nothing}
           .value=${this.inputValue}
           .disabled=${this.disabled}
           @focus=${this.onFocusedChanged}

package/lib/search-field/index.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
-import { html } from '@refinitiv-ui/core';
+import { html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import { translate } from '@refinitiv-ui/translate';
@@ -66,13 +65,13 @@ let SearchField = class SearchField extends TextField {
         return html `
       <ef-icon
         part="icon"
-        role="${ifDefined(this.iconHasAction ? 'button' : undefined)}"
+        role="${this.iconHasAction ? 'button' : nothing}"
+        tabindex="${this.iconHasAction ? '0' : nothing}"
         icon="search"
         aria-label="${this.t('SEARCH')}"
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
         @tap="${this.iconClick}"
-        tabindex="${ifDefined(this.iconHasAction ? '0' : undefined)}"
       ></ef-icon>
     `;
     }

package/lib/sidebar-layout/index.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { BasicElement, html, css, nothing } 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 { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import '../layout/index.js';
 /**
@@ -82,7 +81,7 @@ let SidebarLayout = class SidebarLayout extends BasicElement {
         return html `
       <ef-layout flex nowrap part="container">
 
-        <ef-layout flex container part="sidebar" size="${ifDefined(this.sidebarWidth || undefined)}">
+        <ef-layout flex container part="sidebar" size="${this.sidebarWidth || nothing}">
           <ef-layout size="auto">
             <slot name="sidebar-header"></slot>
           </ef-layout>

package/lib/slider/index.js

@@ -1,10 +1,9 @@
 import { __decorate } from "tslib";
-import { html, css, ControlElement, WarningNotice } from '@refinitiv-ui/core';
+import { html, css, nothing, ControlElement, 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 { 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 { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { translate } from '@refinitiv-ui/translate';
@@ -663,7 +662,7 @@ let Slider = class Slider extends ControlElement {
         if (this.readonly || this.disabled) {
             return;
         }
-        if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
             event.target.blur();
         }
     }
@@ -1118,7 +1117,7 @@ let Slider = class Slider extends ControlElement {
         ${ref(this[`${name}ThumbRef`])}
         @focus=${this.onThumbFocus}
         @blur=${this.onThumbBlur}
-        active=${ifDefined(isActive || undefined)}
+        active=${isActive || nothing}
         name="${name}"
         role="slider"
         aria-label="${this.t(name.toUpperCase())}"

package/lib/text-field/index.js

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
-import { FormFieldElement, css, html } from '@refinitiv-ui/core';
+import { FormFieldElement, css, nothing, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
 import { VERSION } from '../version.js';
 import { isIE } from '@refinitiv-ui/utils/browser.js';
@@ -236,14 +235,14 @@ let TextField = class TextField extends FormFieldElement {
     renderIcon() {
         return this.icon ? html `
     <ef-icon
-        role="${ifDefined(this.iconHasAction ? 'button' : undefined)}"
+        role="${this.iconHasAction ? 'button' : nothing}"
+        tabindex="${this.iconHasAction ? '0' : nothing}"
+        aria-label="${this.iconHasAction ? this.icon : nothing}"
         part="icon"
         icon="${this.icon}"
-        aria-label="${ifDefined(this.iconHasAction ? this.icon : undefined)}"
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
         @tap="${this.iconClick}"
-        tabindex="${ifDefined(this.iconHasAction ? '0' : undefined)}"
       ></ef-icon>
     ` : null;
     }

package/lib/time-picker/index.js

@@ -1,7 +1,6 @@
 var TimePicker_1;
 import { __decorate } from "tslib";
-import { ControlElement, html, css } from '@refinitiv-ui/core';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { ControlElement, html, css, nothing } from '@refinitiv-ui/core';
 import { guard } from '@refinitiv-ui/core/directives/guard.js';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
@@ -706,13 +705,13 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         return html `<ef-number-field
         id="hours"
         part="input"
-        aria-label="${ifDefined(!isIE ? this.t('SELECT_HOURS', { value: this.periodHours }) : undefined)}"
+        aria-label="${!isIE ? this.t('SELECT_HOURS', { value: this.periodHours }) : nothing}"
         no-spinner
         transparent
         min="${this.amPm ? 1 : MIN_UNIT}"
         max="${this.amPm ? HOURS_OF_NOON : MAX_HOURS}"
         .value="${hours}"
-        placeholder="${ifDefined(hours ? undefined : Placeholder.HOURS)}"
+        placeholder="${hours ? nothing : Placeholder.HOURS}"
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"
         @value-changed="${this.onInputValueChanged}"
@@ -726,13 +725,13 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         const minutes = this.formattedMinutes;
         return html `<ef-number-field
         id="minutes"
-        aria-label="${ifDefined(!isIE ? this.t('SELECT_MINUTES', { value: this.minutes }) : undefined)}"
+        aria-label="${!isIE ? this.t('SELECT_MINUTES', { value: this.minutes }) : nothing}"
         part="input"
         no-spinner
         min="${MIN_UNIT}"
         max="${MAX_MINUTES}"
         .value="${minutes}"
-        placeholder="${ifDefined(minutes ? undefined : Placeholder.MINUTES)}"
+        placeholder="${minutes ? nothing : Placeholder.MINUTES}"
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
         transparent
@@ -749,12 +748,12 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
       <ef-number-field
         id="seconds"
         part="input"
-        aria-label="${ifDefined(!isIE ? this.t('SELECT_SECONDS', { value: this.seconds }) : undefined)}"
+        aria-label="${!isIE ? this.t('SELECT_SECONDS', { value: this.seconds }) : nothing}"
         no-spinner
         min="${MIN_UNIT}"
         max="${MAX_SECONDS}"
         .value="${seconds}"
-        placeholder="${ifDefined(seconds ? undefined : Placeholder.SECONDS)}"
+        placeholder="${seconds ? nothing : Placeholder.SECONDS}"
         ?readonly="${this.readonly}"
         ?disabled="${this.disabled}"
         transparent
@@ -770,7 +769,7 @@ let TimePicker = TimePicker_1 = class TimePicker extends ControlElement {
         return this.amPm ? html `
       <div role="listbox"
            aria-label="${this.t('TOGGLE_TIME_PERIOD')}"
-           aria-activedescendant="${ifDefined(hasHours ? this.isAM() ? 'toggle-am' : 'toggle-pm' : undefined)}"
+           aria-activedescendant="${hasHours ? this.isAM() ? 'toggle-am' : 'toggle-pm' : nothing}"
            id="toggle"
            part="toggle"
            @tap=${this.toggle}

package/lib/toggle/index.js

@@ -103,9 +103,6 @@ let Toggle = class Toggle extends ControlElement {
         if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
             this.handleCheckedChange();
         }
-        else if (event.keyCode && event.keyCode === 13 || event.keyCode === 32) { // For older browsers
-            this.handleCheckedChange();
-        }
     }
     /**
      * A `TemplateResult` that will be used

package/lib/tooltip/index.js

@@ -11,7 +11,7 @@ import './elements/title-tooltip.js';
 import { register, deregister } from './managers/tooltip-manager.js';
 import { tooltipRenderer } from './helpers/renderer.js';
 import { register as registerOverflowTooltip, deregister as deregisterOverflowTooltip } from './helpers/overflow-tooltip.js';
-const TooltipPositionMap = {
+const PositionMap = {
     'auto': ['bottom-start', 'top-start'],
     'above': ['top-middle'],
     'right': ['right-middle'],
@@ -413,7 +413,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
      * Get popup position based on tooltip position
      */
     get tipPosition() {
-        return TooltipPositionMap[this.position];
+        return PositionMap[this.position];
     }
     /**
      * A `TemplateResult` that will be used

package/lib/tornado-chart/elements/tornado-item.js

@@ -1,8 +1,7 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { BasicElement, html, css, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../../version.js';
 import '../../progress-bar/index.js';
 import '../../layout/index.js';
@@ -157,26 +156,26 @@ let TornadoItem = class TornadoItem extends BasicElement {
     render() {
         return html `
       <ef-layout part="container" flex nowrap ?container="${this.isContainer}">
-        <ef-layout flex size="${ifDefined(this.labelLayoutSize)}">
+        <ef-layout flex size="${this.labelLayoutSize || nothing}">
           <div part="label">
             <slot></slot>
           </div>
         </ef-layout>
-        <ef-layout flex basis="${ifDefined(this.primaryLayoutFlexBasis)}">
+        <ef-layout flex basis="${this.primaryLayoutFlexBasis || nothing}">
           <ef-progress-bar
             part="primary-bar"
             alignment=${this.primaryBarAlignment}
-            label="${ifDefined(this.primaryLabel || undefined)}"
-            value="${ifDefined(this.primaryValue || undefined)}">
+            label="${this.primaryLabel || nothing}"
+            value="${this.primaryValue || nothing}">
           </ef-progress-bar>
         </ef-layout>
         <div part="seperator"></div>
-        <ef-layout flex basis="${ifDefined(this.secondaryLayoutFlexBasis)}">
+        <ef-layout flex basis="${this.secondaryLayoutFlexBasis || nothing}">
           <ef-progress-bar
             part="secondary-bar"
             alignment="${this.secondaryBarAlignment}"
-            label="${ifDefined(this.secondaryLabel || undefined)}"
-            value="${ifDefined(this.secondaryValue || undefined)}">
+            label="${this.secondaryLabel || nothing}"
+            value="${this.secondaryValue || nothing}">
           </ef-progress-bar>
         </ef-layout>
       </ef-layout>

package/lib/tree-select/index.js

@@ -1,11 +1,10 @@
 import { __decorate } from "tslib";
-import { html, css, triggerResize } from '@refinitiv-ui/core';
+import { html, css, nothing, triggerResize } 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 { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
 import { repeat } from '@refinitiv-ui/core/directives/repeat.js';
-import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import { TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
@@ -745,7 +744,7 @@ let TreeSelect = class TreeSelect extends ComboBox {
               @tap="${this.fullClickHandler}">${this.t('FULL_LIST')}</div>
             <div
               role="button"
-              tabindex="${ifDefined(this.hasActiveSelection ? 0 : undefined)}"
+              tabindex="${this.hasActiveSelection ? 0 : nothing}"
               part="control selected-filter${this.selectionFilterState ? ' active' : ''}${!this.hasActiveSelection ? ' disabled' : ''}"
               @tap="${this.selectedClickHandler}">${this.t('SELECTED')}</div>
           </div>` : html ``}

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '6.8.1';
+export const VERSION = '6.9.0-next.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.8.1",
+  "version": "6.9.0-next.0",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -105,6 +105,7 @@
     "./combo-box/themes/halo/light": "./lib/combo-box/themes/halo/light/index.js",
     "./combo-box/themes/solar/charcoal": "./lib/combo-box/themes/solar/charcoal/index.js",
     "./combo-box/themes/solar/pearl": "./lib/combo-box/themes/solar/pearl/index.js",
+    "./config": "./lib/config/index.js",
     "./counter": "./lib/counter/index.js",
     "./counter/themes/halo/dark": "./lib/counter/themes/halo/dark/index.js",
     "./counter/themes/halo/light": "./lib/counter/themes/halo/light/index.js",
@@ -336,9 +337,10 @@
     "version": "node ../../scripts/version"
   },
   "dependencies": {
+    "@lit-labs/context": "^0.3.1",
     "@refinitiv-ui/browser-sparkline": "1.1.8",
-    "@refinitiv-ui/halo-theme": "^6.5.0",
-    "@refinitiv-ui/solar-theme": "^6.3.2",
+    "@refinitiv-ui/halo-theme": "^6.6.0-next.0",
+    "@refinitiv-ui/solar-theme": "^6.4.0-next.0",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
     "d3-interpolate": "^3.0.1",
@@ -347,24 +349,24 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^6.4.1",
-    "@refinitiv-ui/demo-block": "^6.1.1",
+    "@refinitiv-ui/core": "^6.5.0-next.0",
+    "@refinitiv-ui/demo-block": "^6.2.0-next.0",
     "@refinitiv-ui/i18n": "^6.0.12",
     "@refinitiv-ui/phrasebook": "^6.3.1",
     "@refinitiv-ui/test-helpers": "^6.0.9",
-    "@refinitiv-ui/translate": "^6.0.19",
-    "@refinitiv-ui/utils": "^6.2.3",
+    "@refinitiv-ui/translate": "^6.1.0-next.0",
+    "@refinitiv-ui/utils": "^6.3.0-next.0",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
-    "@refinitiv-ui/core": "^6.4.1",
+    "@refinitiv-ui/core": "^6.5.0-next.0",
     "@refinitiv-ui/i18n": "^6.0.12",
     "@refinitiv-ui/phrasebook": "^6.3.1",
-    "@refinitiv-ui/translate": "^6.0.19",
-    "@refinitiv-ui/utils": "^6.2.3"
+    "@refinitiv-ui/translate": "^6.1.0-next.0",
+    "@refinitiv-ui/utils": "^6.3.0-next.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2d8bcd48b5a79bef7f61806ff6af850816b992fd"
+  "gitHead": "9c5e19ece59cf12e07ab7593f712b4184298b4af"
 }