@refinitiv-ui/elements 5.3.3 → 5.3.4

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/index.d.ts

@@ -0,0 +1,102 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, TemplateResult, CSSResult } 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 `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * 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 {};

package/lib/label/index.js

@@ -0,0 +1,252 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BasicElement, html, css, customElement, property, styleMap } from '@refinitiv-ui/core';
+import { VERSION } from '../';
+import { addTooltipCondition, removeTooltipCondition } from '../tooltip';
+/**
+ * Configuration object
+ * for mutations observers
+ */
+const observerOptions = {
+    subtree: true,
+    childList: true,
+    characterData: true
+};
+/**
+ * Reusable SPACE
+ */
+const _ = ' ';
+/**
+ * Helper to check if the browser is IE
+ * @returns True if the browser is IE
+ */
+const isIE = () => !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
+/**
+ * Determines if the browser is legacy or modern.
+ */
+/* istanbul ignore next */
+const browserType = isIE() ? 'legacy' : 'modern';
+/**
+ * Displays a text with alternative truncation
+ */
+let Label = class Label extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Limit the number of lines before truncating
+         */
+        this.lineClamp = 0;
+        /**
+         * Set state to error
+         */
+        this.error = false;
+        /**
+         * Set state to warning
+         */
+        this.warning = false;
+        /**
+         * Trimmed chunks of textual content
+         */
+        this.chunks = [];
+        /**
+         * Mutation Observer used to detect changes in the Light DOM
+         */
+        this.mutationObserver = new MutationObserver(() => this.recalculate(true));
+        /**
+         * Render used to display the tooltip
+         * @returns Tooltip text
+         */
+        this.tooltipRenderer = () => this.text;
+        /**
+         * Condition used to display the tooltip
+         * @param target Tooltip target
+         * @returns Whether the tooltip should be shown or not.
+         */
+        this.tooltipCondition = (target) => this.shouldShowTooltip(target);
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResult` 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: inline-flex;
+        max-width: 100%;
+      }
+      .split {
+        height: 1.2em;
+        line-height: 1.2em;
+        margin-top: -0.1em;
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .left.modern {
+        word-break: break-all;
+        white-space: normal;
+      }
+      .left.legacy {
+        text-overflow: ellipsis;
+      }
+      .center {
+        flex: 0 100 auto;
+      }
+      .right.modern {
+        direction: rtl;
+        text-overflow: ellipsis;
+      }
+      .right.legacy span {
+        float: right;
+      }
+      .clamp {
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        display: -webkit-inline-box;
+        text-overflow: ellipsis;
+        position: relative;
+        overflow-wrap: break-word;
+      }
+    `;
+    }
+    /**
+     * @override
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        addTooltipCondition(this.tooltipCondition, this.tooltipRenderer);
+        this.mutationObserver.observe(this, observerOptions);
+        !isIE() && this.recalculate(); // In IE the mutation will trigger
+    }
+    /**
+     * @override
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        removeTooltipCondition(this.tooltipCondition);
+        this.mutationObserver.disconnect();
+    }
+    /**
+     * Decides whether the tooltip should b shown
+     * @param tooltipTarget Target element passed by the tooltip condition
+     * @returns True if the tooltip should be shown
+     */
+    shouldShowTooltip(tooltipTarget) {
+        const targetMatches = tooltipTarget === this;
+        const part = this.renderRoot.firstElementChild;
+        if (targetMatches && part) {
+            return part.clientHeight !== part.scrollHeight || part.clientWidth !== part.scrollWidth;
+        }
+        return false;
+    }
+    /**
+     * Handles any modifications to the internal HTML
+     * @param [mutation=false] is the request from a mutation event?
+     * @returns {void}
+     */
+    recalculate(mutation = false) {
+        mutation; // keeping here for future use
+        const oldValue = this.text;
+        const raw = this.textContent || '';
+        this.chunks = raw.split(_).map(chunk => chunk.trim()).filter(chunk => chunk);
+        const newValue = this.text;
+        if (oldValue !== newValue) {
+            void this.requestUpdate('text', oldValue);
+        }
+    }
+    /**
+     * Returns cleaned version of `this.textContent`.
+     */
+    get text() {
+        return this.chunks.join(_);
+    }
+    /**
+     * Default template
+     */
+    get truncateTemplate() {
+        const words = this.chunks;
+        const left = [];
+        const right = [];
+        const isSingleWord = words.length === 1;
+        if (isSingleWord) {
+            const word = words[0];
+            const split = Math.round(word.length / 2);
+            left.push(word.substr(0, split));
+            right.push(word.substr(split));
+        }
+        else {
+            const split = Math.round(words.length / 2);
+            for (let i = 0; i < words.length; i += 1) {
+                (i < split ? left : right).push(words[i]);
+            }
+        }
+        const leftPart = html `<div class="split left ${browserType}">${left.join(_)}</div>`;
+        const centerPart = isSingleWord ? undefined : html `<div class="split center">&nbsp;</div>`;
+        const rightPart = right.length ? html `<div class="split right ${browserType}"><span dir="ltr">${right.join(_)}</span></div>` : undefined;
+        return html `${leftPart}${centerPart}${rightPart}`;
+    }
+    /**
+     * Template for when line clamp is set
+     */
+    get clampTemplate() {
+        const styles = {
+            maxHeight: '',
+            whiteSpace: '',
+            lineClamp: `${this.lineClamp}`,
+            '-webkit-line-clamp': `${this.lineClamp}`
+        };
+        /* istanbul ignore if */
+        if (browserType === 'legacy') {
+            const cs = getComputedStyle(this);
+            const lineHeight = parseFloat(cs.lineHeight) || 1.2 /* css default */;
+            styles.maxHeight = `calc(1em * ${lineHeight} * ${this.lineClamp})`; // faux clamp in legacy browsers
+            styles.whiteSpace = this.lineClamp === 1 ? 'nowrap' : ''; // show ellipsis in legacy browsers
+        }
+        return html `
+      <span class="clamp ${browserType}" style="${styleMap(styles)}">${this.text}</span>
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        const template = this.lineClamp ? this.clampTemplate : this.truncateTemplate;
+        /* istanbul ignore if */
+        if (browserType === 'legacy') {
+            // Mutation observer does not fire in IE11 if slot is not present
+            return html `${template}<span style="display: none !important;"><slot></slot></span>`;
+        }
+        return template;
+    }
+};
+__decorate([
+    property({ type: Number, attribute: 'line-clamp' })
+], Label.prototype, "lineClamp", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Label.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Label.prototype, "warning", void 0);
+Label = __decorate([
+    customElement('ef-label', {
+        alias: 'quartz-label'
+    })
+], Label);
+export { Label };

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+
+elf.customStyles.define('ef-label', ':host([warning]){color:#ffc800}:host([error]),:host([error][warning]){color:#f5475b}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+
+elf.customStyles.define('ef-label', ':host([warning]){color:#cca000}:host([error]),:host([error][warning]){color:#d94255}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+
+elf.customStyles.define('ef-label', ':host([warning]){color:#f93}:host([error]),:host([error][warning]){color:#f5475b}');

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

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+
+elf.customStyles.define('ef-label', ':host([warning]){color:#f93}:host([error]),:host([error][warning]){color:#d94255}');