@refinitiv-ui/elements 6.0.0-next.2 → 6.0.1

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 
-elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#fafafa;transition:120ms;color:#0d0d0d;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#595959;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#fafafa;border:1px solid #ccc}:host(:hover),:host([active]:hover){background-color:#334bff;border-color:#334bff}:host([active]){border-color:#ccc;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#ccc}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#ccc;color:#0d0d0d;background-color:#fafafa}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#0d0d0d;background-color:#fafafa;border-color:#ccc}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#0d0d0d;opacity:.4}}');
+elf.customStyles.define('ef-pill', ':host{touch-action:manipulation;background:#fafafa;transition:120ms;color:#0d0d0d;margin:2px;font-family:inherit;font-size:12rem;font-weight:400;padding:0 5px;min-width:21px;max-width:180px;outline:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;vertical-align:middle;position:relative;overflow:hidden}:host [part=close]{touch-action:manipulation;border-radius:100%;position:relative;display:flex;margin-left:4px;flex:none;width:12px;height:12px;box-sizing:border-box;cursor:pointer;background-clip:content-box;color:#595959;min-width:12px;opacity:.4;background-color:initial}:host [part=close]:active{border:1px solid transparent}:host([focused=visible]){border:1px solid #334bff}:host{border-radius:10px;height:20px;line-height:20px;background-color:#fafafa;border:1px solid #ccc}:host(:hover),:host([active]:hover){background-color:#1429bd;border-color:#1429bd}:host([active]){border-color:#ccc;background-color:#334bff}:host([toggles][active][pressed]),:host([toggles][pressed]){border-color:#ccc}:host([toggles][pressed]),:host([toggles][pressed]:hover){background-color:#0f1e8a}:host(:hover),:host([active]),:host([pressed]){color:#fff}:host(:hover) [part=close],:host([active]) [part=close],:host([pressed]) [part=close]{color:#fff;opacity:1}:host([disabled]){border-color:#ccc;color:#0d0d0d;background-color:#fafafa}@media (pointer:coarse){:host(:not([active])),:host([toggles]:not([active])){color:#0d0d0d;background-color:#fafafa;border-color:#ccc}:host(:not([active])) [part=close],:host([toggles]:not([active])) [part=close]{color:#0d0d0d;opacity:.4}}');

package/lib/rating/custom-elements.json

@@ -15,13 +15,13 @@
           "name": "max",
           "description": "Set number of total stars",
           "type": "string",
-          "default": "\"5\""
+          "default": "\"'5'\""
         },
         {
           "name": "value",
           "description": "Set number of selected stars. Value can be any number between 0 and `max`.\nDecimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1)",
           "type": "string",
-          "default": "\"0\""
+          "default": "\"'0'\""
         }
       ],
       "properties": [
@@ -37,14 +37,14 @@
           "attribute": "max",
           "description": "Set number of total stars",
           "type": "string",
-          "default": "\"5\""
+          "default": "\"'5'\""
         },
         {
           "name": "value",
           "attribute": "value",
           "description": "Set number of selected stars. Value can be any number between 0 and `max`.\nDecimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1)",
           "type": "string",
-          "default": "\"0\""
+          "default": "\"'0'\""
         }
       ],
       "events": [

package/lib/rating/custom-elements.md

@@ -7,8 +7,8 @@ Star visualisation component that is generally used for ranking
 | Property      | Attribute     | Type      | Default | Description                                      |
 |---------------|---------------|-----------|---------|--------------------------------------------------|
 | `interactive` | `interactive` | `boolean` | false   | Make it possible to interact with rating control and change the value |
-| `max`         | `max`         | `string`  | "5"     | Set number of total stars                        |
-| `value`       | `value`       | `string`  | "0"     | Set number of selected stars. Value can be any number between 0 and `max`.<br />Decimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1) |
+| `max`         | `max`         | `string`  | "'5'"   | Set number of total stars                        |
+| `value`       | `value`       | `string`  | "'0'"   | Set number of selected stars. Value can be any number between 0 and `max`.<br />Decimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1) |
 
 ## Events
 

package/lib/rating/index.d.ts

@@ -10,64 +10,116 @@ export declare class Rating extends BasicElement {
      * @returns version number
      */
     static get version(): string;
-    private items;
-    private valuePrevious;
+    /**
+     * 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;
+    private MAX_VALUE;
+    private MIN_VALUE;
     /**
      * Make it possible to interact with rating control and change the value
      */
     interactive: boolean;
     /**
-      * Set number of total stars
-      */
-    max: string;
+     * Internal max value of rating.
+     * Controlled by public setter and getter
+     */
+    private _max;
+    /**
+     * Set number of total stars
+     * @param max max value
+     * @default '5'
+     */
+    set max(max: string);
+    get max(): string;
     /**
-      * Set number of selected stars. Value can be any number between 0 and `max`.
-      * Decimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1)
-      */
-    value: string;
+     * Converts max value from string to number for calculations
+     * @returns maximum value of rating as a number
+     */
+    private get maxNumber();
     /**
-     * Get stars element of container
+     * Internal value of rating.
+     * Controlled by public setter and getter
      */
-    private stars;
+    private _value;
+    /**
+     * Set number of selected stars. Value can be any number between 0 and `max`.
+     * Decimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1)
+     * @param value Element value
+     * @default '0'
+     */
+    set value(value: string);
+    get value(): string;
     /**
      * Converts value from string to number for calculations
      * @returns value of rating as a number
      */
     private get valueNumber();
     /**
-     * Converts max value from string to number for calculations
-     * @returns maximum value of rating as a number
+     * Called before update() to compute values needed during the update.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
      */
-    private get maxNumber();
+    protected willUpdate(changedProperties: PropertyValues): void;
     /**
-     * Compute rating based on max number of stars and value.
-     * Note: to speed up the component, hover state is implemented using CSS only.
-     * CSS3 specification does not allow to select items preceding the hover, but allows to select the following items.
-     * Therefore `flex: reverse` style is applied and the items are constructed in the reverse mode to mimic the correct behaviour.
-     * @param {Number} max Number of stars
-     * @param {Number} value Value
+     * Invoked when the element is first updated
+     * @param changedProperties changed properties
      * @returns {void}
      */
-    private computeRating;
+    protected firstUpdated(changedProperties: PropertyValues): void;
     /**
-     * Process click event to set the new value
-     * @param {number} index index of star
+     * Handles interactive and aria attribute changes
      * @returns {void}
      */
-    private handleTap;
+    private interactiveChanged;
     /**
-     * Invoked whenever the element properties are updated
-     * @param changedProperties changed properties
+     * Handles key input
+     * @param event Key down event object
      * @returns {void}
      */
-    protected updated(changedProperties: PropertyValues): void;
+    protected onKeyDown(event: KeyboardEvent): void;
     /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @returns CSS template
+     * Update value and fired value-changed event
+     * @param value value to updated
+     * @returns {void}
      */
-    static get styles(): CSSResultGroup;
+    private notifyValueChange;
+    /**
+     * Check if passed value is a valid value
+     * @override
+     * @param value Value to check
+     * @returns {boolean} false if value is invalid
+     */
+    protected isValidValue(value: string): boolean;
+    /**
+     * Increases the value of rating by half or 1 if not specific amount but not exceed max value
+     * @param value step up value to specific number (optional)
+     * @returns {void}
+     */
+    private stepUp;
+    /**
+     * Decrease the value of rating by half or 1 if not specific amount but not exceed min value
+     * @param value step down value to specific number (optional)
+     * @returns {void}
+     */
+    private stepDown;
+    /**
+     * Process click event to set the new value
+     * @param {number} index index of star
+     * @returns {void}
+     */
+    private handleTap;
+    /**
+     * Render rating based on max number of stars and value.
+     * Note: to speed up the component, hover state is implemented using CSS only.
+     * CSS3 specification does not allow to select items preceding the hover, but allows to select the following items.
+     * Therefore `flex: reverse` style is applied and the items are constructed in the reverse mode to mimic the correct behaviour.
+     * @returns stars template
+     */
+    private get starsTemplate();
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/rating/index.js

@@ -2,9 +2,8 @@ import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { queryAll } from '@refinitiv-ui/core/decorators/query-all.js';
-import { repeat } from '@refinitiv-ui/core/directives/repeat.js';
 import { VERSION } from '../version.js';
+import { clamp } from './utils.js';
 /**
  * Star visualisation component that is generally used for ranking
  * @fires value-changed - Fired when the `value` changes.
@@ -12,21 +11,22 @@ import { VERSION } from '../version.js';
 let Rating = class Rating extends BasicElement {
     constructor() {
         super(...arguments);
-        this.items = [];
-        this.valuePrevious = 0;
+        this.MAX_VALUE = '5'; // default max value
+        this.MIN_VALUE = 1; // min value of interactive mode
         /**
          * Make it possible to interact with rating control and change the value
          */
         this.interactive = false;
         /**
-          * Set number of total stars
-          */
-        this.max = '5';
+         * Internal max value of rating.
+         * Controlled by public setter and getter
+         */
+        this._max = this.MAX_VALUE;
         /**
-          * Set number of selected stars. Value can be any number between 0 and `max`.
-          * Decimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1)
-          */
-        this.value = '0';
+         * Internal value of rating.
+         * Controlled by public setter and getter
+         */
+        this._value = '0';
     }
     /**
      * Element version number
@@ -36,95 +36,226 @@ let Rating = class Rating extends BasicElement {
         return VERSION;
     }
     /**
-     * Converts value from string to number for calculations
-     * @returns value of rating as a number
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @returns CSS template
      */
-    get valueNumber() {
-        const value = parseFloat(this.value);
-        if (!this.value || isNaN(value)) {
-            return 0;
+    static get styles() {
+        return css `
+      :host {
+        display: inline-block;
+      }
+    `;
+    }
+    /**
+     * Set number of total stars
+     * @param max max value
+     * @default '5'
+     */
+    set max(max) {
+        const newMax = max && this.isValidValue(max) ? Math.round(Number(max)).toString() : this.MAX_VALUE;
+        const oldMax = this._max;
+        if (oldMax !== newMax) {
+            this._max = newMax;
+            if (this.interactive) {
+                this.setAttribute('aria-valuemax', newMax);
+            }
+            this.requestUpdate('max', oldMax);
         }
-        return value;
+    }
+    get max() {
+        return this._max;
     }
     /**
      * Converts max value from string to number for calculations
      * @returns maximum value of rating as a number
      */
     get maxNumber() {
-        let max = parseFloat(this.max);
-        if (!this.max || isNaN(max)) {
-            return 5;
+        return Number(this.max);
+    }
+    /**
+     * Set number of selected stars. Value can be any number between 0 and `max`.
+     * Decimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1)
+     * @param value Element value
+     * @default '0'
+     */
+    set value(value) {
+        const newValue = this.isValidValue(value) ? Number(value).toString() : '0';
+        const oldValue = this._value;
+        if (oldValue !== newValue) {
+            this._value = newValue;
+            if (this.interactive) {
+                this.setAttribute('aria-valuenow', newValue);
+            }
+            this.requestUpdate('value', oldValue);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Converts value from string to number for calculations
+     * @returns value of rating as a number
+     */
+    get valueNumber() {
+        return Number(this.value);
+    }
+    /**
+     * Called before update() to compute values needed during the update.
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('interactive')) {
+            this.interactiveChanged();
         }
-        // Prevent decimal max value
-        max = max % 1 === 0 ? max : Math.round(max);
-        return max;
     }
     /**
-     * Compute rating based on max number of stars and value.
-     * Note: to speed up the component, hover state is implemented using CSS only.
-     * CSS3 specification does not allow to select items preceding the hover, but allows to select the following items.
-     * Therefore `flex: reverse` style is applied and the items are constructed in the reverse mode to mimic the correct behaviour.
-     * @param {Number} max Number of stars
-     * @param {Number} value Value
+     * Invoked when the element is first updated
+     * @param changedProperties changed properties
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('keydown', this.onKeyDown.bind(this));
+    }
+    /**
+     * Handles interactive and aria attribute changes
      * @returns {void}
      */
-    computeRating(max, value) {
-        this.items = [];
-        for (let i = 0; i < max; i += 1) {
-            const reverseIdx = value - (max - i) + 1;
-            const v = reverseIdx > 0 ? Math.min(1, reverseIdx) : 0;
-            const selected = v >= 0.75 ? 'full' : v >= 0.25 ? 'half' : false;
-            this.items.push({ item: selected ? `icon icon-${selected}` : 'icon' });
+    interactiveChanged() {
+        if (this.interactive) {
+            this.setAttribute('role', 'slider');
+            this.setAttribute('aria-valuemin', this.MIN_VALUE.toString());
+            this.setAttribute('aria-valuenow', this.value);
+            this.setAttribute('aria-valuemax', this.max);
+            this.setAttribute('tabindex', this.getAttribute('tabindex') || '0');
+        }
+        else {
+            if (this.getAttribute('role') === 'slider') {
+                this.removeAttribute('role');
+            }
+            this.removeAttribute('aria-valuemin');
+            this.removeAttribute('aria-valuenow');
+            this.removeAttribute('aria-valuemax');
         }
-        this.valuePrevious = value;
-        this.requestUpdate();
     }
     /**
-     * Process click event to set the new value
-     * @param {number} index index of star
+     * Handles key input
+     * @param event Key down event object
      * @returns {void}
      */
-    handleTap(index) {
-        if (!this.interactive) {
+    onKeyDown(event) {
+        if (event.defaultPrevented || !this.interactive) {
             return;
         }
-        const valueIndex = this.maxNumber - index;
-        if (this.valuePrevious !== valueIndex) {
-            this.value = valueIndex.toString();
-            // Dispatch Event when value change
+        // Ignore special keys
+        if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
+            return;
+        }
+        switch (event.key) {
+            case 'Right':
+            case 'Up':
+            case 'ArrowRight':
+            case 'ArrowUp':
+                this.stepUp();
+                break;
+            case 'Left':
+            case 'Down':
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                this.stepDown();
+                break;
+            case 'Home':
+                this.stepDown(this.MIN_VALUE);
+                break;
+            case 'End':
+                this.stepUp(this.maxNumber);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Update value and fired value-changed event
+     * @param value value to updated
+     * @returns {void}
+     */
+    notifyValueChange(value) {
+        if (this.value !== value) {
+            this.value = value;
             this.notifyPropertyChange('value', this.value);
         }
     }
     /**
-     * Invoked whenever the element properties are updated
-     * @param changedProperties changed properties
+     * Check if passed value is a valid value
+     * @override
+     * @param value Value to check
+     * @returns {boolean} false if value is invalid
+     */
+    isValidValue(value) {
+        const number = Number(value);
+        return !isNaN(number) && isFinite(number);
+    }
+    /**
+     * Increases the value of rating by half or 1 if not specific amount but not exceed max value
+     * @param value step up value to specific number (optional)
      * @returns {void}
      */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        changedProperties.forEach((oldValue, propName) => {
-            if (propName === 'value') {
-                this.value = this.valueNumber.toString();
-                this.computeRating(this.maxNumber, this.valueNumber);
-            }
-            else if (propName === 'max') {
-                this.max = this.maxNumber.toString();
-                this.computeRating(this.maxNumber, this.valueNumber);
-            }
-        });
+    stepUp(value) {
+        if (this.valueNumber > this.maxNumber) {
+            return;
+        }
+        const newValue = value || clamp(Math.floor(this.valueNumber + 1), this.MIN_VALUE, this.maxNumber);
+        this.notifyValueChange(newValue.toString());
     }
     /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @returns CSS template
+     * Decrease the value of rating by half or 1 if not specific amount but not exceed min value
+     * @param value step down value to specific number (optional)
+     * @returns {void}
      */
-    static get styles() {
-        return css `
-      :host {
-        display: inline-block;
-      }
-    `;
+    stepDown(value) {
+        if (this.valueNumber < this.MIN_VALUE) {
+            return;
+        }
+        const newValue = value || clamp(Math.round(this.valueNumber - 1), this.MIN_VALUE, this.maxNumber - 1);
+        this.notifyValueChange(newValue.toString());
+    }
+    /**
+     * Process click event to set the new value
+     * @param {number} index index of star
+     * @returns {void}
+     */
+    handleTap(index) {
+        if (!this.interactive) {
+            return;
+        }
+        const newValue = this.maxNumber - index;
+        if (this.valueNumber !== newValue) {
+            this.value = newValue.toString();
+            this.notifyPropertyChange('value', this.value);
+        }
+    }
+    /**
+     * Render rating based on max number of stars and value.
+     * Note: to speed up the component, hover state is implemented using CSS only.
+     * CSS3 specification does not allow to select items preceding the hover, but allows to select the following items.
+     * Therefore `flex: reverse` style is applied and the items are constructed in the reverse mode to mimic the correct behaviour.
+     * @returns stars template
+     */
+    get starsTemplate() {
+        const stars = [];
+        for (let index = 0; index < this.maxNumber; index += 1) {
+            const reverseIndex = this.valueNumber - (this.maxNumber - index) + 1;
+            const starValue = reverseIndex > 0 ? Math.min(1, reverseIndex) : 0;
+            const selected = starValue >= 0.75 ? 'full' : starValue >= 0.25 ? 'half' : false;
+            const className = selected ? `icon icon-${selected}` : 'icon';
+            stars.push(html `<div part="${className}" @tap="${() => this.handleTap(index)}"></div>`);
+        }
+        return stars;
     }
     /**
      * A `TemplateResult` that will be used
@@ -132,9 +263,10 @@ let Rating = class Rating extends BasicElement {
      * @return Render template
      */
     render() {
-        return html `<div part="container">
-      ${repeat(this.items, (i, index) => html `<div part="${i.item}" @tap="${() => this.handleTap(index)}"></div>`)}
-    </div>`;
+        return html `
+      <div part="container">
+        ${this.starsTemplate}
+      </div>`;
     }
 };
 __decorate([
@@ -142,13 +274,10 @@ __decorate([
 ], Rating.prototype, "interactive", void 0);
 __decorate([
     property({ type: String })
-], Rating.prototype, "max", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Rating.prototype, "value", void 0);
+], Rating.prototype, "max", null);
 __decorate([
-    queryAll('[part~="icon"]')
-], Rating.prototype, "stars", void 0);
+    property({ type: String })
+], Rating.prototype, "value", null);
 Rating = __decorate([
     customElement('ef-rating', {
         alias: 'sapphire-rating'

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

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-rating', ':host{font-size:16px}:host [part=container]{touch-action:manipulation;display:flex;flex-direction:row-reverse;flex-wrap:nowrap}:host [part^=icon]{margin:0 1px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IG0tNTEyIDM1Ny0yMjQgMTE4IDQzLTI0OS0xODEtMTc2IDI1MC0zNiAxMTItMjI2IDExMiAyMjYgMjUwIDM2LTE4MSAxNzYgNDMgMjQ5eiIgZmlsbD0iIzQwNDA0MCIvPgo8L3N2Zz4K) 0 0/100% no-repeat;width:1em;height:1em}:host [part^=icon]:first-child,:host [part^=icon]:last-child{margin:0}:host(:not([interactive])) [part~=icon-full],:host([interactive]) [part=container]:not(:hover) [part~=icon-full]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjMzM0QkZGIi8+Cjwvc3ZnPgo=)}:host(:not([interactive])) [part~=icon-half],:host([interactive]) [part=container]:not(:hover) [part~=icon-half]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9InJpZ2h0IiBkPSJtMTAyNCAzOTctMzU0LTUxLTE1OS0zMjF2ODA4bDMxNyAxNjYtNjAtMzUyem0tNTEzIDM1N3YtNTcwbDExMyAyMjYgMjUwIDM2LTE4MSAxNzYgNDMgMjQ5eiIgZmlsbD0iIzQwNDA0MCIvPgogICAgPHBhdGggaWQ9ImxlZnQiIGQ9Im01MTIgMjUtMTU4IDMyMS0zNTQgNTEgMjU2IDI1MC02MCAzNTIgMzE2LTE2NnoiIGZpbGw9IiMzMzRCRkYiLz4KPC9zdmc+Cg==)}:host([interactive]) [part^=icon]{cursor:pointer}:host([interactive]) [part^=icon]:hover,:host([interactive]) [part^=icon]:hover~[part^=icon]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjMzM0QkZGIi8+Cjwvc3ZnPgo=)}');
+elf.customStyles.define('ef-rating', ':host{font-size:16px}:host [part=container]{touch-action:manipulation;display:flex;flex-direction:row-reverse;flex-wrap:nowrap}:host [part^=icon]{margin:0 1px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IG0tNTEyIDM1Ny0yMjQgMTE4IDQzLTI0OS0xODEtMTc2IDI1MC0zNiAxMTItMjI2IDExMiAyMjYgMjUwIDM2LTE4MSAxNzYgNDMgMjQ5eiIgZmlsbD0iIzQwNDA0MCIvPgo8L3N2Zz4K) 0 0/100% no-repeat;width:1em;height:1em}:host [part^=icon]:first-child,:host [part^=icon]:last-child{margin:0}:host(:not([interactive])) [part~=icon-full],:host([interactive]) [part=container]:not(:hover) [part~=icon-full]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjMzM0QkZGIi8+Cjwvc3ZnPgo=)}:host(:not([interactive])) [part~=icon-half],:host([interactive]) [part=container]:not(:hover) [part~=icon-half]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9InJpZ2h0IiBkPSJtMTAyNCAzOTctMzU0LTUxLTE1OS0zMjF2ODA4bDMxNyAxNjYtNjAtMzUyem0tNTEzIDM1N3YtNTcwbDExMyAyMjYgMjUwIDM2LTE4MSAxNzYgNDMgMjQ5eiIgZmlsbD0iIzQwNDA0MCIvPgogICAgPHBhdGggaWQ9ImxlZnQiIGQ9Im01MTIgMjUtMTU4IDMyMS0zNTQgNTEgMjU2IDI1MC02MCAzNTIgMzE2LTE2NnoiIGZpbGw9IiMzMzRCRkYiLz4KPC9zdmc+Cg==)}:host([interactive]) [part^=icon]{cursor:pointer}:host([interactive]) [part^=icon]:hover,:host([interactive]) [part^=icon]:hover~[part^=icon]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjMzM0QkZGIi8+Cjwvc3ZnPgo=)}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}');

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

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-rating', ':host{font-size:16px}:host [part=container]{touch-action:manipulation;display:flex;flex-direction:row-reverse;flex-wrap:nowrap}:host [part^=icon]{margin:0 1px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IG0tNTEyIDM1Ny0yMjQgMTE4IDQzLTI0OS0xODEtMTc2IDI1MC0zNiAxMTItMjI2IDExMiAyMjYgMjUwIDM2LTE4MSAxNzYgNDMgMjQ5eiIgZmlsbD0iIzU5NTk1OSIvPgo8L3N2Zz4K) 0 0/100% no-repeat;width:1em;height:1em}:host [part^=icon]:first-child,:host [part^=icon]:last-child{margin:0}:host(:not([interactive])) [part~=icon-full],:host([interactive]) [part=container]:not(:hover) [part~=icon-full]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjMzM0QkZGIi8+Cjwvc3ZnPgo=)}:host(:not([interactive])) [part~=icon-half],:host([interactive]) [part=container]:not(:hover) [part~=icon-half]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9InJpZ2h0IiBkPSJtMTAyNCAzOTctMzU0LTUxLTE1OS0zMjF2ODA4bDMxNyAxNjYtNjAtMzUyem0tNTEzIDM1N3YtNTcwbDExMyAyMjYgMjUwIDM2LTE4MSAxNzYgNDMgMjQ5eiIgZmlsbD0iIzU5NTk1OSIvPgogICAgPHBhdGggaWQ9ImxlZnQiIGQ9Im01MTIgMjUtMTU4IDMyMS0zNTQgNTEgMjU2IDI1MC02MCAzNTIgMzE2LTE2NnoiIGZpbGw9IiMzMzRCRkYiLz4KPC9zdmc+Cg==)}:host([interactive]) [part^=icon]{cursor:pointer}:host([interactive]) [part^=icon]:hover,:host([interactive]) [part^=icon]:hover~[part^=icon]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjMzM0QkZGIi8+Cjwvc3ZnPgo=)}');
+elf.customStyles.define('ef-rating', ':host{font-size:16px}:host [part=container]{touch-action:manipulation;display:flex;flex-direction:row-reverse;flex-wrap:nowrap}:host [part^=icon]{margin:0 1px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IG0tNTEyIDM1Ny0yMjQgMTE4IDQzLTI0OS0xODEtMTc2IDI1MC0zNiAxMTItMjI2IDExMiAyMjYgMjUwIDM2LTE4MSAxNzYgNDMgMjQ5eiIgZmlsbD0iIzU5NTk1OSIvPgo8L3N2Zz4K) 0 0/100% no-repeat;width:1em;height:1em}:host [part^=icon]:first-child,:host [part^=icon]:last-child{margin:0}:host(:not([interactive])) [part~=icon-full],:host([interactive]) [part=container]:not(:hover) [part~=icon-full]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjMzM0QkZGIi8+Cjwvc3ZnPgo=)}:host(:not([interactive])) [part~=icon-half],:host([interactive]) [part=container]:not(:hover) [part~=icon-half]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9InJpZ2h0IiBkPSJtMTAyNCAzOTctMzU0LTUxLTE1OS0zMjF2ODA4bDMxNyAxNjYtNjAtMzUyem0tNTEzIDM1N3YtNTcwbDExMyAyMjYgMjUwIDM2LTE4MSAxNzYgNDMgMjQ5eiIgZmlsbD0iIzU5NTk1OSIvPgogICAgPHBhdGggaWQ9ImxlZnQiIGQ9Im01MTIgMjUtMTU4IDMyMS0zNTQgNTEgMjU2IDI1MC02MCAzNTIgMzE2LTE2NnoiIGZpbGw9IiMzMzRCRkYiLz4KPC9zdmc+Cg==)}:host([interactive]) [part^=icon]{cursor:pointer}:host([interactive]) [part^=icon]:hover,:host([interactive]) [part^=icon]:hover~[part^=icon]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjMzM0QkZGIi8+Cjwvc3ZnPgo=)}:host([focused=visible]){outline:#334bff solid 1px;outline-offset:2px}');

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

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-rating', ':host [part=container]{touch-action:manipulation;display:flex;flex-direction:row-reverse;flex-wrap:nowrap}:host [part^=icon]{margin:0 1px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjNjY2NTcwIi8+Cjwvc3ZnPgo=) 0 0/100% no-repeat;width:1em;height:1em}:host [part^=icon]:first-child,:host [part^=icon]:last-child{margin:0}:host([interactive]) [part^=icon]{cursor:pointer}:host{font-size:10px}:host([size=large]){font-size:15px}:host(:not([interactive])) [part~=icon-full],:host([interactive]) [part=container]:not(:hover) [part~=icon-full]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjRkY5OTMzIi8+Cjwvc3ZnPgo=)}:host(:not([interactive])) [part~=icon-half],:host([interactive]) [part=container]:not(:hover) [part~=icon-half]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9ImxlZnQiIGQ9Im01MTIgMjUtMTU4IDMyMS0zNTQgNTEgMjU2IDI1MC02MCAzNTIgMzE2LTE2NnoiIGZpbGw9IiNGRjk5MzMiLz4KICAgIDxwYXRoIGlkPSJyaWdodCIgZD0ibTEwMjQgMzk3LTM1NC01MS0xNTktMzIxdjgwOGwzMTcgMTY2LTYwLTM1MnoiIGZpbGw9IiM2NjY1NzAiLz4KPC9zdmc+Cg==)}:host([interactive]) [part^=icon]:hover,:host([interactive]) [part^=icon]:hover~[part^=icon]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjRkY5OTMzIi8+Cjwvc3ZnPgo=)}');
+elf.customStyles.define('ef-rating', ':host [part=container]{touch-action:manipulation;display:flex;flex-direction:row-reverse;flex-wrap:nowrap}:host [part^=icon]{margin:0 1px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjNjY2NTcwIi8+Cjwvc3ZnPgo=) 0 0/100% no-repeat;width:1em;height:1em}:host [part^=icon]:first-child,:host [part^=icon]:last-child{margin:0}:host([interactive]) [part^=icon]{cursor:pointer}:host([focused=visible]){outline:#f93 solid 1px;outline-offset:2px}:host{font-size:10px}:host([size=large]){font-size:15px}:host(:not([interactive])) [part~=icon-full],:host([interactive]) [part=container]:not(:hover) [part~=icon-full]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjRkY5OTMzIi8+Cjwvc3ZnPgo=)}:host(:not([interactive])) [part~=icon-half],:host([interactive]) [part=container]:not(:hover) [part~=icon-half]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9ImxlZnQiIGQ9Im01MTIgMjUtMTU4IDMyMS0zNTQgNTEgMjU2IDI1MC02MCAzNTIgMzE2LTE2NnoiIGZpbGw9IiNGRjk5MzMiLz4KICAgIDxwYXRoIGlkPSJyaWdodCIgZD0ibTEwMjQgMzk3LTM1NC01MS0xNTktMzIxdjgwOGwzMTcgMTY2LTYwLTM1MnoiIGZpbGw9IiM2NjY1NzAiLz4KPC9zdmc+Cg==)}:host([interactive]) [part^=icon]:hover,:host([interactive]) [part^=icon]:hover~[part^=icon]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjRkY5OTMzIi8+Cjwvc3ZnPgo=)}');

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

@@ -1,2 +1,2 @@
 
-elf.customStyles.define('ef-rating', ':host [part=container]{touch-action:manipulation;display:flex;flex-direction:row-reverse;flex-wrap:nowrap}:host [part^=icon]{margin:0 1px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjQUNBRkI1Ii8+Cjwvc3ZnPgo=) 0 0/100% no-repeat;width:1em;height:1em}:host [part^=icon]:first-child,:host [part^=icon]:last-child{margin:0}:host([interactive]) [part^=icon]{cursor:pointer}:host{font-size:10px}:host([size=large]){font-size:15px}:host(:not([interactive])) [part~=icon-full],:host([interactive]) [part=container]:not(:hover) [part~=icon-full]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjRUU3NjAwIi8+Cjwvc3ZnPgo=)}:host(:not([interactive])) [part~=icon-half],:host([interactive]) [part=container]:not(:hover) [part~=icon-half]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9ImxlZnQiIGQ9Im01MTIgMjUtMTU4IDMyMS0zNTQgNTEgMjU2IDI1MC02MCAzNTIgMzE2LTE2NnoiIGZpbGw9IiNFRTc2MDAiLz4KICAgIDxwYXRoIGlkPSJyaWdodCIgZD0ibTEwMjQgMzk3LTM1NC01MS0xNTktMzIxdjgwOGwzMTcgMTY2LTYwLTM1MnoiIGZpbGw9IiNBQ0FGQjUiLz4KPC9zdmc+Cg==)}:host([interactive]) [part^=icon]:hover,:host([interactive]) [part^=icon]:hover~[part^=icon]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjRUU3NjAwIi8+Cjwvc3ZnPgo=)}');
+elf.customStyles.define('ef-rating', ':host [part=container]{touch-action:manipulation;display:flex;flex-direction:row-reverse;flex-wrap:nowrap}:host [part^=icon]{margin:0 1px;background:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjQUNBRkI1Ii8+Cjwvc3ZnPgo=) 0 0/100% no-repeat;width:1em;height:1em}:host [part^=icon]:first-child,:host [part^=icon]:last-child{margin:0}:host([interactive]) [part^=icon]{cursor:pointer}:host([focused=visible]){outline:#ffb266 solid 1px;outline-offset:2px}:host{font-size:10px}:host([size=large]){font-size:15px}:host(:not([interactive])) [part~=icon-full],:host([interactive]) [part=container]:not(:hover) [part~=icon-full]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjRUU3NjAwIi8+Cjwvc3ZnPgo=)}:host(:not([interactive])) [part~=icon-half],:host([interactive]) [part=container]:not(:hover) [part~=icon-half]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9ImxlZnQiIGQ9Im01MTIgMjUtMTU4IDMyMS0zNTQgNTEgMjU2IDI1MC02MCAzNTIgMzE2LTE2NnoiIGZpbGw9IiNFRTc2MDAiLz4KICAgIDxwYXRoIGlkPSJyaWdodCIgZD0ibTEwMjQgMzk3LTM1NC01MS0xNTktMzIxdjgwOGwzMTcgMTY2LTYwLTM1MnoiIGZpbGw9IiNBQ0FGQjUiLz4KPC9zdmc+Cg==)}:host([interactive]) [part^=icon]:hover,:host([interactive]) [part^=icon]:hover~[part^=icon]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMjQgMzk3LTM1NC01MS0xNTgtMzIxLTE1OCAzMjEtMzU0IDUxIDI1NiAyNTAtNjAgMzUyIDMxNi0xNjYgMzE2IDE2Ni02MC0zNTJ6IiBmaWxsPSIjRUU3NjAwIi8+Cjwvc3ZnPgo=)}');

package/lib/rating/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+   * Return value that never exceed the maximum boundary
+   * @param value value for check clamp
+   * @param min max value
+   * @param max min value
+   * @returns number between two numbers
+   */
+declare const clamp: (value: number, min: number, max: number) => number;
+export { clamp };

package/lib/rating/utils.js

@@ -0,0 +1,11 @@
+/**
+   * Return value that never exceed the maximum boundary
+   * @param value value for check clamp
+   * @param min max value
+   * @param max min value
+   * @returns number between two numbers
+   */
+const clamp = function (value, min, max) {
+    return Math.max(min, Math.min(value, max));
+};
+export { clamp };