@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/item/index.js

@@ -0,0 +1,271 @@
+import { __decorate } from "tslib";
+import { ControlElement, css, html } from '@refinitiv-ui/core';
+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 '../icon/index.js';
+import '../checkbox/index.js';
+export * from './helpers/types';
+const isAllWhitespaceTextNode = (node) => {
+    var _a;
+    return node.nodeType === document.TEXT_NODE
+        && !((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+};
+/**
+ * Used as a basic building block to compose complex custom elements,
+ * additionally it can be used by applications
+ * to create simple menus or navigation panels.
+ *
+ * @attr {string} value - The content of this attribute represents the value of the item.
+ * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ *
+ * @attr {boolean} disabled - Set disabled state.
+ * @prop {boolean} [disabled=false] - Set disabled state.
+ *
+ * @slot left - Used to render the content on the left of the label.
+ * @slot right - Used to render the content on the right of the label.
+ */
+let Item = class Item extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The text for the label indicating the meaning of the item.
+         * By having both `label` and content, `label` always takes priority
+         */
+        this.label = null;
+        /**
+         * If defined value can be `text`, `header` or `divider`
+         * @type {ItemType | null}
+         */
+        this.type = null;
+        /**
+         * Set the icon name from the ef-icon list
+         */
+        this.icon = null;
+        this._selected = false;
+        /**
+         * Aria indicating current select state
+         * @ignore
+         */
+        this.ariaSelected = 'false';
+        /**
+         * Is the item part of a multiple selection
+         */
+        this.multiple = false;
+        /**
+         * Highlight the item
+         */
+        this.highlighted = false;
+        /**
+         * The`subLabel` property represents the text beneath the label.
+         */
+        this.subLabel = null;
+        /**
+         * Specifies which element an item is bound to
+         */
+        this.for = null;
+        /**
+         * True, if there is no slotted content
+         */
+        this.isSlotEmpty = true;
+        /**
+         * Checks slotted children nodes and updates component to refresh label and sub-label templates.
+         * @param event slotchange
+         * @returns {void}
+         */
+        this.checkSlotChildren = (event) => {
+            const slot = event.target;
+            this.isSlotEmpty = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
+            this.requestUpdate();
+        };
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * `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 css `
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      [part=checkbox] {
+        pointer-events: none;
+      }
+      [part=left],
+      [part=right] {
+        display: flex;
+        align-items: center;
+      }
+      [part=center] {
+        flex: 1;
+      }
+      :host([type=divider]) > * {
+        display: none;
+      }
+    `;
+    }
+    /**
+     * Indicates that the item is selected
+     * @param value selected value
+     */
+    set selected(value) {
+        const oldValue = this._selected;
+        if (oldValue !== value) {
+            this._selected = value;
+            this.ariaSelected = String(value);
+            void this.requestUpdate('selected', oldValue);
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+    /**
+     * @param node that should be checked
+     * @returns whether node can be ignored.
+     */
+    isIgnorable(node) {
+        return node.nodeType === document.COMMENT_NODE
+            || isAllWhitespaceTextNode(node);
+    }
+    /**
+     * @override
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (changedProperties.has('type')) {
+            this.typeChanged();
+        }
+        super.update(changedProperties);
+    }
+    /**
+     * Get icon template if icon attribute is defined
+     */
+    get iconTemplate() {
+        return this.icon !== null && this.icon !== undefined ? html `<ef-icon part="icon" .icon="${this.icon}"></ef-icon>` : undefined;
+    }
+    /**
+     * Get subLabel template if it is defined and no slot content present
+     */
+    get subLabelTemplate() {
+        return this.subLabel && this.isSlotEmpty ? html `<div part="sub-label">${this.subLabel}</div>` : undefined;
+    }
+    /**
+     * Get label template if it is defined and no slot content present
+     */
+    get labelTemplate() {
+        return this.label && this.isSlotEmpty ? html `${this.label}` : undefined;
+    }
+    /**
+     * Get template for `for` attribute.
+     * This is usually used with menus when an item needs to reference an element
+     */
+    get forTemplate() {
+        return this.for ? html `<ef-icon icon="right"></ef-icon>` : undefined;
+    }
+    /**
+     * Get template for `multiple` attribute.
+     * This is usually used with lists, when an item can be part of a multiple selection
+     */
+    get multipleTemplate() {
+        const multiple = this.multiple && (!this.type || this.type === 'text');
+        return multiple ? html `<ef-checkbox part="checkbox" .checked="${this.selected}" tabindex="-1"></ef-checkbox>` : undefined;
+    }
+    /**
+     * Return true if the item can be highlighted. True if not disabled and type is Text
+     * @prop {boolean} highlightable
+     * @returns whether element is highlightable
+     */
+    get highlightable() {
+        return !this.disabled && this.type !== 'header' && this.type !== 'divider';
+    }
+    /**
+     * Getter returning if the label is truncated
+     * @prop {boolean} isTruncated
+     * @returns whether element is truncated or not
+     */
+    get isTruncated() {
+        return !!(this.labelEl && (this.labelEl.offsetWidth < this.labelEl.scrollWidth));
+    }
+    /**
+     * Control State behaviour will update tabindex based on the property
+     * @returns {void}
+     */
+    typeChanged() {
+        const noInteraction = this.type === 'header' || this.type === 'divider' || this.disabled;
+        if (noInteraction) {
+            this.disableFocus();
+        }
+        else if (!this.disabled) {
+            this.enableFocus();
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
+    render() {
+        return html `
+      <div part="left">
+        ${this.iconTemplate}
+        ${this.multipleTemplate}
+        <slot name="left"></slot>
+      </div>
+      <div part="center" id="label">
+        ${this.labelTemplate}
+        <slot @slotchange="${this.checkSlotChildren}"></slot>
+        ${this.subLabelTemplate}
+      </div>
+      <div part="right">
+        <slot name="right"></slot>
+        ${this.forTemplate}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], Item.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Item.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Item.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Item.prototype, "selected", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-selected' })
+], Item.prototype, "ariaSelected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Item.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Item.prototype, "highlighted", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sub-label' })
+], Item.prototype, "subLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Item.prototype, "for", void 0);
+__decorate([
+    query('#label')
+], Item.prototype, "labelEl", void 0);
+Item = __decorate([
+    customElement('ef-item', {
+        alias: 'coral-item'
+    })
+], Item);
+export { Item };

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/checkbox/themes/halo/dark';
+
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#fff;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/lib/checkbox/themes/halo/light';
+
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#0d0d0d;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(64,64,64,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#737373;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#d9d9d9,#d9d9d9) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#e6e6e6}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/checkbox/themes/solar/charcoal';
+
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#f93}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(255,255,255,.1)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(194,194,194,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#c2c2c2;background-color:#4a4a52;font-size:100%;font-weight:400;border:1px solid #0a0a0a;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;border:none;border-top:1px solid #0a0a0a;border-bottom:1px solid transparent;text-transform:none;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#2e2e33,#2e2e33) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/checkbox/themes/solar/pearl';
+
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#ee7600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(0,0,0,.08)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#000}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(72,72,72,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#484848;background-color:#f2f3f7;font-size:100%;font-weight:400;border:1px solid #d5d8db;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;border:none;border-top:1px solid #d5d8db;border-bottom:1px solid transparent;text-transform:none;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#a9afba,#a9afba) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}');

package/lib/jsx.d.ts

@@ -0,0 +1,223 @@
+export declare namespace JSXInterface {
+  interface ControlHTMLAttributes<T> extends HTMLAttributes<T> {
+    accept?: string;
+    alt?: string;
+    autoComplete?: string;
+    autocomplete?: string;
+    autoFocus?: boolean;
+    autofocus?: boolean | string;
+    capture?: string;
+    checked?: boolean;
+    crossOrigin?: string;
+    crossorigin?: string;
+    disabled?: boolean;
+    form?: string;
+    formAction?: string;
+    formaction?: string;
+    formEncType?: string;
+    formenctype?: string;
+    formMethod?: string;
+    formmethod?: string;
+    formNoValidate?: boolean;
+    formnovalidate?: boolean;
+    formTarget?: string;
+    formtarget?: string;
+    height?: number | string;
+    list?: string;
+    max?: number | string;
+    maxLength?: number;
+    maxlength?: number | string;
+    min?: number | string;
+    minLength?: number;
+    minlength?: number | string;
+    multiple?: boolean;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    readonly?: boolean | string;
+    required?: boolean;
+    size?: number;
+    src?: string;
+    step?: number | string;
+    type?: string;
+    value?: string | string[] | number;
+    width?: number | string;
+  }
+  interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
+    innerHTML?: string;
+    key?: string | number;
+    accessKey?: string;
+    class?: string | {
+      [className: string]: boolean;
+    };
+    contentEditable?: boolean | string;
+    contenteditable?: boolean | string;
+    contextMenu?: string;
+    contextmenu?: string;
+    dir?: string;
+    draggable?: boolean;
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    spellCheck?: boolean;
+    spellcheck?: boolean | string;
+    style?: {
+      [key: string]: string | undefined;
+    };
+    tabIndex?: number;
+    tabindex?: number | string;
+    title?: string;
+    inputMode?: string;
+    inputmode?: string;
+    is?: string;
+    radioGroup?: string;
+    radiogroup?: string;
+    part?: string;
+    role?: string;
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autocapitalize?: string;
+    autoCorrect?: string;
+    autocorrect?: string;
+    autoSave?: string;
+    autosave?: string;
+    color?: string;
+    itemProp?: string;
+    itemprop?: string;
+    itemScope?: boolean;
+    itemscope?: boolean;
+    itemType?: string;
+    itemtype?: string;
+    itemID?: string;
+    itemid?: string;
+    itemRef?: string;
+    itemref?: string;
+    results?: number;
+    security?: string;
+    unselectable?: boolean;
+  }
+  interface DOMAttributes<T = Element> {
+    ref?: any;
+    slot?: string;
+    children?: any;
+    onCopy?: (event: ClipboardEvent) => void;
+    onCopyCapture?: (event: ClipboardEvent) => void;
+    onCut?: (event: ClipboardEvent) => void;
+    onCutCapture?: (event: ClipboardEvent) => void;
+    onPaste?: (event: ClipboardEvent) => void;
+    onPasteCapture?: (event: ClipboardEvent) => void;
+    onCompositionEnd?: (event: CompositionEvent) => void;
+    onCompositionEndCapture?: (event: CompositionEvent) => void;
+    onCompositionStart?: (event: CompositionEvent) => void;
+    onCompositionStartCapture?: (event: CompositionEvent) => void;
+    onCompositionUpdate?: (event: CompositionEvent) => void;
+    onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onFocusCapture?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onBlurCapture?: (event: FocusEvent) => void;
+    onChange?: (event: Event) => void;
+    onChangeCapture?: (event: Event) => void;
+    onInput?: (event: Event) => void;
+    onInputCapture?: (event: Event) => void;
+    onReset?: (event: Event) => void;
+    onResetCapture?: (event: Event) => void;
+    onSubmit?: (event: Event) => void;
+    onSubmitCapture?: (event: Event) => void;
+    onInvalid?: (event: Event) => void;
+    onInvalidCapture?: (event: Event) => void;
+    onLoad?: (event: Event) => void;
+    onLoadCapture?: (event: Event) => void;
+    onError?: (event: Event) => void;
+    onErrorCapture?: (event: Event) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyDownCapture?: (event: KeyboardEvent) => void;
+    onKeyPress?: (event: KeyboardEvent) => void;
+    onKeyPressCapture?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onKeyUpCapture?: (event: KeyboardEvent) => void;
+    onAuxClick?: (event: MouseEvent) => void;
+    onClick?: (event: MouseEvent) => void;
+    onClickCapture?: (event: MouseEvent) => void;
+    onContextMenu?: (event: MouseEvent) => void;
+    onContextMenuCapture?: (event: MouseEvent) => void;
+    onDblClick?: (event: MouseEvent) => void;
+    onDblClickCapture?: (event: MouseEvent) => void;
+    onDrag?: (event: DragEvent) => void;
+    onDragCapture?: (event: DragEvent) => void;
+    onDragEnd?: (event: DragEvent) => void;
+    onDragEndCapture?: (event: DragEvent) => void;
+    onDragEnter?: (event: DragEvent) => void;
+    onDragEnterCapture?: (event: DragEvent) => void;
+    onDragExit?: (event: DragEvent) => void;
+    onDragExitCapture?: (event: DragEvent) => void;
+    onDragLeave?: (event: DragEvent) => void;
+    onDragLeaveCapture?: (event: DragEvent) => void;
+    onDragOver?: (event: DragEvent) => void;
+    onDragOverCapture?: (event: DragEvent) => void;
+    onDragStart?: (event: DragEvent) => void;
+    onDragStartCapture?: (event: DragEvent) => void;
+    onDrop?: (event: DragEvent) => void;
+    onDropCapture?: (event: DragEvent) => void;
+    onMouseDown?: (event: MouseEvent) => void;
+    onMouseDownCapture?: (event: MouseEvent) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+    onMouseMove?: (event: MouseEvent) => void;
+    onMouseMoveCapture?: (event: MouseEvent) => void;
+    onMouseOut?: (event: MouseEvent) => void;
+    onMouseOutCapture?: (event: MouseEvent) => void;
+    onMouseOver?: (event: MouseEvent) => void;
+    onMouseOverCapture?: (event: MouseEvent) => void;
+    onMouseUp?: (event: MouseEvent) => void;
+    onMouseUpCapture?: (event: MouseEvent) => void;
+    onTouchCancel?: (event: TouchEvent) => void;
+    onTouchCancelCapture?: (event: TouchEvent) => void;
+    onTouchEnd?: (event: TouchEvent) => void;
+    onTouchEndCapture?: (event: TouchEvent) => void;
+    onTouchMove?: (event: TouchEvent) => void;
+    onTouchMoveCapture?: (event: TouchEvent) => void;
+    onTouchStart?: (event: TouchEvent) => void;
+    onTouchStartCapture?: (event: TouchEvent) => void;
+    onPointerDown?: (event: PointerEvent) => void;
+    onPointerDownCapture?: (event: PointerEvent) => void;
+    onPointerMove?: (event: PointerEvent) => void;
+    onPointerMoveCapture?: (event: PointerEvent) => void;
+    onPointerUp?: (event: PointerEvent) => void;
+    onPointerUpCapture?: (event: PointerEvent) => void;
+    onPointerCancel?: (event: PointerEvent) => void;
+    onPointerCancelCapture?: (event: PointerEvent) => void;
+    onPointerEnter?: (event: PointerEvent) => void;
+    onPointerEnterCapture?: (event: PointerEvent) => void;
+    onPointerLeave?: (event: PointerEvent) => void;
+    onPointerLeaveCapture?: (event: PointerEvent) => void;
+    onPointerOver?: (event: PointerEvent) => void;
+    onPointerOverCapture?: (event: PointerEvent) => void;
+    onPointerOut?: (event: PointerEvent) => void;
+    onPointerOutCapture?: (event: PointerEvent) => void;
+    onGotPointerCapture?: (event: PointerEvent) => void;
+    onGotPointerCaptureCapture?: (event: PointerEvent) => void;
+    onLostPointerCapture?: (event: PointerEvent) => void;
+    onLostPointerCaptureCapture?: (event: PointerEvent) => void;
+    onScroll?: (event: UIEvent) => void;
+    onScrollCapture?: (event: UIEvent) => void;
+    onWheel?: (event: WheelEvent) => void;
+    onWheelCapture?: (event: WheelEvent) => void;
+    onAnimationStart?: (event: AnimationEvent) => void;
+    onAnimationStartCapture?: (event: AnimationEvent) => void;
+    onAnimationEnd?: (event: AnimationEvent) => void;
+    onAnimationEndCapture?: (event: AnimationEvent) => void;
+    onAnimationIteration?: (event: AnimationEvent) => void;
+    onAnimationIterationCapture?: (event: AnimationEvent) => void;
+    onTransitionEnd?: (event: TransitionEvent) => void;
+    onTransitionEndCapture?: (event: TransitionEvent) => void;
+  }
+}

package/lib/label/custom-elements.json

@@ -0,0 +1,52 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-label",
+      "description": "Displays a text with alternative truncation",
+      "attributes": [
+        {
+          "name": "line-clamp",
+          "description": "Limit the number of lines before truncating",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "lineClamp",
+          "attribute": "line-clamp",
+          "description": "Limit the number of lines before truncating",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set state to error",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set state to warning",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    }
+  ]
+}

package/lib/label/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-label
+
+Displays a text with alternative truncation
+
+## Properties
+
+| Property    | Attribute    | Type      | Default | Description                                 |
+|-------------|--------------|-----------|---------|---------------------------------------------|
+| `error`     | `error`      | `boolean` | false   | Set state to error                          |
+| `lineClamp` | `line-clamp` | `number`  | 0       | Limit the number of lines before truncating |
+| `warning`   | `warning`    | `boolean` | false   | Set state to warning                        |

package/lib/label/index.d.ts

@@ -0,0 +1,102 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+/**
+ * Displays a text with alternative truncation
+ */
+export declare class Label extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * 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;
+    /**
+     * Limit the number of lines before truncating
+     */
+    lineClamp: number;
+    /**
+     * Set state to error
+     */
+    error: boolean;
+    /**
+     * Set state to warning
+     */
+    warning: boolean;
+    /**
+     * Trimmed chunks of textual content
+     */
+    private chunks;
+    /**
+     * Mutation Observer used to detect changes in the Light DOM
+     */
+    private mutationObserver;
+    /**
+     * Render used to display the tooltip
+     * @returns Tooltip text
+     */
+    protected tooltipRenderer: () => string;
+    /**
+     * Condition used to display the tooltip
+     * @param target Tooltip target
+     * @returns Whether the tooltip should be shown or not.
+     */
+    protected tooltipCondition: (target: HTMLElement) => boolean;
+    /**
+     * @override
+     */
+    connectedCallback(): void;
+    /**
+     * @override
+     */
+    disconnectedCallback(): void;
+    /**
+     * Decides whether the tooltip should b shown
+     * @param tooltipTarget Target element passed by the tooltip condition
+     * @returns True if the tooltip should be shown
+     */
+    protected shouldShowTooltip(tooltipTarget: HTMLElement): boolean;
+    /**
+     * Handles any modifications to the internal HTML
+     * @param [mutation=false] is the request from a mutation event?
+     * @returns {void}
+     */
+    protected recalculate(mutation?: boolean): void;
+    /**
+     * Returns cleaned version of `this.textContent`.
+     */
+    protected get text(): string;
+    /**
+     * Default template
+     */
+    protected get truncateTemplate(): TemplateResult;
+    /**
+     * Template for when line clamp is set
+     */
+    protected get clampTemplate(): TemplateResult;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-label': Label;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-label': Partial<Label> | JSXInterface.HTMLAttributes<Label>;
+    }
+  }
+}
+
+export {};