@refinitiv-ui/elements 6.5.3 → 6.6.0

package/lib/number-field/index.js

@@ -16,8 +16,8 @@ var Direction;
 /**
  * Form control element for numbers.
  *
- * @fires value-changed - Dispatched when value changes
- * @fires error-changed - Dispatched when error state changes
+ * @fires value-changed - Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically.
+ * @fires error-changed - Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
  *
  * @attr {boolean} disabled - Set disabled state
  * @prop {boolean} [disabled=false] - Set disabled state
@@ -752,8 +752,6 @@ __decorate([
     query('[part=spinner-down]')
 ], NumberField.prototype, "spinnerDownEl", void 0);
 NumberField = __decorate([
-    customElement('ef-number-field', {
-        alias: 'coral-number-field'
-    })
+    customElement('ef-number-field')
 ], NumberField);
 export { NumberField };

package/lib/number-field/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-number-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner-down],:host [part=spinner-up]{line-height:0;min-width:22px;color:#ccc}:host [part=spinner]{height:100%;margin-left:8px;border-left:inherit;border-color:inherit}:host(:not([no-spinner])){padding:0 0 0 8px}:host([transparent]),:host([transparent]) [part=spinner]{border:none}:host(:hover:not([readonly])) [part=spinner-down],:host(:hover:not([readonly])) [part=spinner-up]{color:#6678ff}:host(:hover:not([readonly])) [part=spinner-down]:hover,:host(:hover:not([readonly])) [part=spinner-up]:hover{color:#fff;background-color:#1429bd}:host(:hover:not([readonly])) [part=spinner-down]:active,:host(:hover:not([readonly])) [part=spinner-up]:active{color:#fff;background:#0f1e8a}:host(:not([transparent]):not([readonly])) [part=spinner]:hover{border-left-color:#334bff!important;border-left-style:solid!important}:host(:not([transparent]):not([readonly])) [part=spinner]:hover::after{content:\'\';border:1px solid #334bff;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none}:host([focused]) [part=spinner-down],:host([focused]) [part=spinner-up]{color:#6678ff}:host([disabled]) [part=spinner-down],:host([disabled]) [part=spinner-up],:host([readonly]:not([focused])) [part=spinner-down],:host([readonly]:not([focused])) [part=spinner-up]{color:rgba(204,204,204,.5)}:host([disabled][error]) [part=spinner],:host([readonly]:not([focused])[error]) [part=spinner]{border-color:rgba(250,168,177,.5)}:host([disabled][warning]) [part=spinner],:host([readonly]:not([focused])[warning]) [part=spinner]{border-color:rgba(255,233,153,.5)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-number-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;color:#ccc}:host([disabled]){border:1px solid rgba(64,64,64,.5);color:rgba(204,204,204,.5);background-color:rgba(13,13,13,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #ffc800}:host([warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#ccc;min-width:1em;margin-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:grey;color:#fff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#6678ff}:host([warning]:hover:not([readonly]):not([focused])){color:#fff;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#fff;border-color:#faa8b1}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(250,168,177,.5)}:host([readonly]:not([focused])){border-color:rgba(64,64,64,.5);background-color:rgba(13,13,13,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(204,204,204,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#fff}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#6678ff}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner-down],:host [part=spinner-up]{line-height:0;min-width:22px;color:#ccc}:host [part=spinner]{height:100%;margin-left:8px;border-left:inherit;border-color:inherit}:host(:not([no-spinner])){padding:0 0 0 8px}:host([transparent]),:host([transparent]) [part=spinner]{border:none}:host(:hover:not([readonly])) [part=spinner-down],:host(:hover:not([readonly])) [part=spinner-up]{color:#6678ff}:host(:hover:not([readonly])) [part=spinner-down]:hover,:host(:hover:not([readonly])) [part=spinner-up]:hover{color:#fff;background-color:#1429bd}:host(:hover:not([readonly])) [part=spinner-down]:active,:host(:hover:not([readonly])) [part=spinner-up]:active{color:#fff;background:#0f1e8a}:host(:not([transparent]):not([readonly])) [part=spinner]:hover{border-left-color:#334bff!important;border-left-style:solid!important}:host(:not([transparent]):not([readonly])) [part=spinner]:hover::after{content:\'\';border:1px solid #334bff;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none}:host([focused]) [part=spinner-down],:host([focused]) [part=spinner-up]{color:#6678ff}:host([disabled]) [part=spinner-down],:host([disabled]) [part=spinner-up],:host([readonly]:not([focused])) [part=spinner-down],:host([readonly]:not([focused])) [part=spinner-up]{color:rgba(204,204,204,.5)}:host([disabled][error]) [part=spinner],:host([readonly]:not([focused])[error]) [part=spinner]{border-color:rgba(250,168,177,.5)}:host([disabled][warning]) [part=spinner],:host([readonly]:not([focused])[warning]) [part=spinner]{border-color:rgba(255,233,153,.5)}' }}));

package/lib/number-field/themes/halo/light/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-number-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12rem;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;margin-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner-down],:host [part=spinner-up]{line-height:0;min-width:22px;color:#404040}:host [part=spinner]{height:100%;margin-left:8px;border-left:inherit;border-color:inherit}:host(:not([no-spinner])){padding:0 0 0 8px}:host([transparent]),:host([transparent]) [part=spinner]{border:none}:host(:hover:not([readonly])) [part=spinner-down],:host(:hover:not([readonly])) [part=spinner-up]{color:#334bff}:host(:hover:not([readonly])) [part=spinner-down]:hover,:host(:hover:not([readonly])) [part=spinner-up]:hover{color:#fff;background-color:#1429bd}:host(:hover:not([readonly])) [part=spinner-down]:active,:host(:hover:not([readonly])) [part=spinner-up]:active{color:#fff;background:#0f1e8a}:host(:not([transparent]):not([readonly])) [part=spinner]:hover{border-left-color:#334bff!important;border-left-style:solid!important}:host(:not([transparent]):not([readonly])) [part=spinner]:hover::after{content:\'\';border:1px solid #334bff;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none}:host([focused]) [part=spinner-down],:host([focused]) [part=spinner-up]{color:#334bff}:host([disabled]) [part=spinner-down],:host([disabled]) [part=spinner-up],:host([readonly]:not([focused])) [part=spinner-down],:host([readonly]:not([focused])) [part=spinner-up]{color:rgba(64,64,64,.5)}:host([disabled][error]) [part=spinner],:host([readonly]:not([focused])[error]) [part=spinner]{border-color:rgba(238,172,180,.5)}:host([disabled][warning]) [part=spinner],:host([readonly]:not([focused])[warning]) [part=spinner]{border-color:rgba(255,233,153,.5)}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-number-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:12px;font-weight:400;height:24px;width:152px;max-width:100%;padding:0 8px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;color:#404040}:host([disabled]){border:1px solid rgba(89,89,89,.5);color:rgba(64,64,64,.5);background-color:rgba(255,255,255,.5)}:host([type=number]){padding-right:0}:host([warning]){border:1px solid #cca000}:host([warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host ::-ms-clear{display:none}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#404040;min-width:1em;margin-left:2px}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host ::-moz-selection{color:#fff;background-color:#334bff}:host ::selection{color:#fff;background-color:#334bff}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover){border-color:#0d0d0d;color:#0d0d0d}:host(:not([readonly]):not([error]):not([warning]):not([focused]):hover) [part=icon]{color:#334bff}:host([warning]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#ffe999}:host([warning][disabled]),:host([warning][readonly]:not([focused])){border-color:rgba(255,233,153,.5)}:host([error]:hover:not([readonly]):not([focused])){color:#0d0d0d;border-color:#eeacb4}:host([error][disabled]),:host([error][readonly]:not([focused])),:host([error][warning][disabled]){border-color:rgba(238,172,180,.5)}:host([readonly]:not([focused])){border-color:rgba(89,89,89,.5);background-color:rgba(255,255,255,.5)}:host([readonly]:not([focused])) [part=icon]{color:rgba(64,64,64,.5)}:host([focused]),:host([focused][error][warning]){border-color:#334bff;color:#0d0d0d}:host([focused]) [part=icon],:host([focused][error][warning]) [part=icon]{color:#334bff}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner-down],:host [part=spinner-up]{line-height:0;min-width:22px;color:#404040}:host [part=spinner]{height:100%;margin-left:8px;border-left:inherit;border-color:inherit}:host(:not([no-spinner])){padding:0 0 0 8px}:host([transparent]),:host([transparent]) [part=spinner]{border:none}:host(:hover:not([readonly])) [part=spinner-down],:host(:hover:not([readonly])) [part=spinner-up]{color:#334bff}:host(:hover:not([readonly])) [part=spinner-down]:hover,:host(:hover:not([readonly])) [part=spinner-up]:hover{color:#fff;background-color:#1429bd}:host(:hover:not([readonly])) [part=spinner-down]:active,:host(:hover:not([readonly])) [part=spinner-up]:active{color:#fff;background:#0f1e8a}:host(:not([transparent]):not([readonly])) [part=spinner]:hover{border-left-color:#334bff!important;border-left-style:solid!important}:host(:not([transparent]):not([readonly])) [part=spinner]:hover::after{content:\'\';border:1px solid #334bff;position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;pointer-events:none}:host([focused]) [part=spinner-down],:host([focused]) [part=spinner-up]{color:#334bff}:host([disabled]) [part=spinner-down],:host([disabled]) [part=spinner-up],:host([readonly]:not([focused])) [part=spinner-down],:host([readonly]:not([focused])) [part=spinner-up]{color:rgba(64,64,64,.5)}:host([disabled][error]) [part=spinner],:host([readonly]:not([focused])[error]) [part=spinner]{border-color:rgba(238,172,180,.5)}:host([disabled][warning]) [part=spinner],:host([readonly]:not([focused])[warning]) [part=spinner]{border-color:rgba(255,233,153,.5)}' }}));

package/lib/number-field/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-number-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}button{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden}button[cta]{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}button[cta]:active{background-color:#f93;background-image:linear-gradient(rgba(0,0,0,.3) 0,rgba(0,0,0,0) 100%)}button[cta][disabled],button[disabled]{opacity:.4}button[toggles][active]{color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%);border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}button:active{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}button[toggles]{background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner]{line-height:0;height:100%;max-width:23px;margin:0 1px 0 5px}:host(:not([no-spinner])){padding:0 0 0 5px}:host [part=spinner-down],:host [part=spinner-up]{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;border:none;min-height:9px}:host [part=spinner-down][cta],:host [part=spinner-up][cta]{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host [part=spinner-down][cta]:active,:host [part=spinner-up][cta]:active{background-color:#f93;background-image:linear-gradient(rgba(0,0,0,.3) 0,rgba(0,0,0,0) 100%)}:host [part=spinner-down][cta][disabled],:host [part=spinner-up][cta][disabled]{opacity:.4}:host [part=spinner-down][disabled],:host [part=spinner-up][disabled]{opacity:.4}:host [part=spinner-down][toggles][active],:host [part=spinner-up][toggles][active]{color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%);border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host [part=spinner-down]:active,:host [part=spinner-up]:active{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=spinner-down][toggles],:host [part=spinner-up][toggles]{background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}@media (-ms-high-contrast:none),(pointer:fine){button[cta]:focus:not([focused]),button[cta][focused=visible]{box-shadow:inset 0 0 0 1px #000;background-color:#f93;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}button:focus:not([focused]),button[focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #000;background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}button:hover,button[toggles]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}button:hover:not(:focus),button[cta]:hover:not(:focus),button[toggles]:hover:not(:focus),button[toggles][active]:hover:not(:focus){border-color:#000;outline:0}button[cta]:hover{background-color:#ffab57;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}button[toggles]:focus:not([focused]),button[toggles][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}button[toggles][active]:focus:not([focused]),button[toggles][active][focused=visible]{background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}button[toggles][active]:hover{background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down][cta]:focus:not([focused]),:host [part=spinner-down][cta][focused=visible],:host [part=spinner-up][cta]:focus:not([focused]),:host [part=spinner-up][cta][focused=visible]{box-shadow:inset 0 0 0 1px #000;background-color:#f93;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part=spinner-down]:focus:not([focused]),:host [part=spinner-down][focused=visible],:host [part=spinner-up]:focus:not([focused]),:host [part=spinner-up][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #000;background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part=spinner-down]:hover,:host [part=spinner-up]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down]:hover:not(:focus),:host [part=spinner-up]:hover:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][cta]:hover,:host [part=spinner-up][cta]:hover{background-color:#ffab57;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down][cta]:hover:not(:focus),:host [part=spinner-up][cta]:hover:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][toggles]:focus:not([focused]),:host [part=spinner-down][toggles][focused=visible],:host [part=spinner-up][toggles]:focus:not([focused]),:host [part=spinner-up][toggles][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part=spinner-down][toggles]:hover,:host [part=spinner-up][toggles]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down][toggles]:hover:not(:focus),:host [part=spinner-up][toggles]:hover:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][toggles][active]:focus:not([focused]),:host [part=spinner-down][toggles][active][focused=visible],:host [part=spinner-up][toggles][active]:focus:not([focused]),:host [part=spinner-up][toggles][active][focused=visible]{background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part=spinner-down][toggles][active]:hover,:host [part=spinner-up][toggles][active]:hover{background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down][toggles][active]:hover:not(:focus),:host [part=spinner-up][toggles][active]:hover:not(:focus){border-color:#000;outline:0}}@media all{button:active,button[toggles]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button:active:not(:focus),button[cta]:active:not(:focus),button[toggles]:active:not(:focus),button[toggles][active]:active:not(:focus){border-color:#000;outline:0}button[disabled],button[toggles][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}button[cta]:active{background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button[cta][disabled]{background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}button[toggles][active]:active{background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button[toggles][active][disabled]{background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down]:active,:host [part=spinner-up]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down]:active:not(:focus),:host [part=spinner-up]:active:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][disabled],:host [part=spinner-up][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][cta]:active,:host [part=spinner-up][cta]:active{background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][cta]:active:not(:focus),:host [part=spinner-up][cta]:active:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][cta][disabled],:host [part=spinner-up][cta][disabled]{background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][toggles]:active,:host [part=spinner-up][toggles]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][toggles]:active:not(:focus),:host [part=spinner-up][toggles]:active:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][toggles][disabled],:host [part=spinner-up][toggles][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][toggles][active]:active,:host [part=spinner-up][toggles][active]:active{background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][toggles][active]:active:not(:focus),:host [part=spinner-up][toggles][active]:active:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][toggles][active][disabled],:host [part=spinner-up][toggles][active][disabled]{background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part=spinner-down]{margin-top:0}:host([readonly]) [part=spinner-down]:hover,:host([readonly]) [part=spinner-up]:hover{color:#c2c2c2;background-color:#3c3c42}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-number-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;text-overflow:ellipsis;background-color:#000;border:1px solid #4a4a52}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #f5475b}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#e2e2e2;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6)}:host([readonly]){border:1px solid rgba(74,74,82,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([warning]){background-color:#000;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(194,194,194,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#000;border:1px solid #f5475b}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(245,71,91,.6);color:rgba(194,194,194,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(245,71,91,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #f87584}:host([highlight]){background-color:#1b252f;border:1px solid #4a4a52}:host([highlight][disabled]){border:1px solid rgba(74,74,82,.6);color:rgba(194,194,194,.6);background-color:rgba(27,37,47,.6)}:host([highlight][readonly]){border:1px solid rgba(74,74,82,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #77777d}:host([indirect]){color:#0fd;background-color:#000;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,255,221,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}button{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0 8px;outline:0;font-family:inherit;font-size:13px;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden}button[cta]{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}button[cta]:active{background-color:#f93;background-image:linear-gradient(rgba(0,0,0,.3) 0,rgba(0,0,0,0) 100%)}button[cta][disabled],button[disabled]{opacity:.4}button[toggles][active]{color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%);border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}button:active{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}button[toggles]{background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner]{line-height:0;height:100%;max-width:23px;margin:0 1px 0 5px}:host(:not([no-spinner])){padding:0 0 0 5px}:host [part=spinner-down],:host [part=spinner-up]{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#3c3c42;color:#c2c2c2;border:1px solid #000;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.6);padding:0;outline:0;font-family:inherit;font-size:13px;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;border:none;min-height:9px}:host [part=spinner-down][cta],:host [part=spinner-up][cta]{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%);background-color:#f93;color:#0a0a0a;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host [part=spinner-down][cta]:active,:host [part=spinner-up][cta]:active{background-color:#f93;background-image:linear-gradient(rgba(0,0,0,.3) 0,rgba(0,0,0,0) 100%)}:host [part=spinner-down][cta][disabled],:host [part=spinner-up][cta][disabled]{opacity:.4}:host [part=spinner-down][disabled],:host [part=spinner-up][disabled]{opacity:.4}:host [part=spinner-down][toggles][active],:host [part=spinner-up][toggles][active]{color:#f93!important;background-color:#38383d!important;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.1) 90%);border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}:host [part=spinner-down]:active,:host [part=spinner-up]:active{background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=spinner-down][toggles],:host [part=spinner-up][toggles]{background-color:#3c3c42;color:#c2c2c2;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.6);outline:0}@media (-ms-high-contrast:none),(pointer:fine){button[cta]:focus:not([focused]),button[cta][focused=visible]{box-shadow:inset 0 0 0 1px #000;background-color:#f93;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}button:focus:not([focused]),button[focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #000;background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}button:hover,button[toggles]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}button:hover:not(:focus),button[cta]:hover:not(:focus),button[toggles]:hover:not(:focus),button[toggles][active]:hover:not(:focus){border-color:#000;outline:0}button[cta]:hover{background-color:#ffab57;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}button[toggles]:focus:not([focused]),button[toggles][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}button[toggles][active]:focus:not([focused]),button[toggles][active][focused=visible]{background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}button[toggles][active]:hover{background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down][cta]:focus:not([focused]),:host [part=spinner-down][cta][focused=visible],:host [part=spinner-up][cta]:focus:not([focused]),:host [part=spinner-up][cta][focused=visible]{box-shadow:inset 0 0 0 1px #000;background-color:#f93;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part=spinner-down]:focus:not([focused]),:host [part=spinner-down][focused=visible],:host [part=spinner-up]:focus:not([focused]),:host [part=spinner-up][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #000;background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part=spinner-down]:hover,:host [part=spinner-up]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down]:hover:not(:focus),:host [part=spinner-up]:hover:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][cta]:hover,:host [part=spinner-up][cta]:hover{background-color:#ffab57;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down][cta]:hover:not(:focus),:host [part=spinner-up][cta]:hover:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][toggles]:focus:not([focused]),:host [part=spinner-down][toggles][focused=visible],:host [part=spinner-up][toggles]:focus:not([focused]),:host [part=spinner-up][toggles][focused=visible]{background-color:#3c3c42;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part=spinner-down][toggles]:hover,:host [part=spinner-up][toggles]:hover{background-color:#4d4d55;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down][toggles]:hover:not(:focus),:host [part=spinner-up][toggles]:hover:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][toggles][active]:focus:not([focused]),:host [part=spinner-down][toggles][active][focused=visible],:host [part=spinner-up][toggles][active]:focus:not([focused]),:host [part=spinner-up][toggles][active][focused=visible]{background-color:#38383d;color:#c2c2c2;box-shadow:inset 0 0 0 1px #000;border-color:#f93;outline:0}:host [part=spinner-down][toggles][active]:hover,:host [part=spinner-up][toggles][active]:hover{background-color:#494950;color:#e2e2e2;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=spinner-down][toggles][active]:hover:not(:focus),:host [part=spinner-up][toggles][active]:hover:not(:focus){border-color:#000;outline:0}}@media all{button:active,button[toggles]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button:active:not(:focus),button[cta]:active:not(:focus),button[toggles]:active:not(:focus),button[toggles][active]:active:not(:focus){border-color:#000;outline:0}button[disabled],button[toggles][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}button[cta]:active{background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button[cta][disabled]{background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}button[toggles][active]:active{background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button[toggles][active][disabled]{background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down]:active,:host [part=spinner-up]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down]:active:not(:focus),:host [part=spinner-up]:active:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][disabled],:host [part=spinner-up][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][cta]:active,:host [part=spinner-up][cta]:active{background-color:#ed8e2f;color:#0a0a0a;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][cta]:active:not(:focus),:host [part=spinner-up][cta]:active:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][cta][disabled],:host [part=spinner-up][cta][disabled]{background-color:#f93;color:#0a0a0a;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][toggles]:active,:host [part=spinner-up][toggles]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][toggles]:active:not(:focus),:host [part=spinner-up][toggles]:active:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][toggles][disabled],:host [part=spinner-up][toggles][disabled]{background-color:#3c3c42;color:#c2c2c2;border-color:#333;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][toggles][active]:active,:host [part=spinner-up][toggles][active]:active{background-color:#343439;color:#f93;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][toggles][active]:active:not(:focus),:host [part=spinner-up][toggles][active]:active:not(:focus){border-color:#000;outline:0}:host [part=spinner-down][toggles][active][disabled],:host [part=spinner-up][toggles][active][disabled]{background-color:#38383d;color:#f93;border-color:#333;box-shadow:none;outline:0;pointer-events:none}}:host [part=spinner-down]{margin-top:0}:host([readonly]) [part=spinner-down]:hover,:host([readonly]) [part=spinner-up]:hover{color:#c2c2c2;background-color:#3c3c42}' }}));

package/lib/number-field/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-number-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13rem;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}button{background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0 8px;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden}button[cta]{background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}button[cta]:active{background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}button[cta][disabled],button[disabled]{opacity:.4}button[toggles][active]{color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%);border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}button:active{background-image:none}button[toggles]{background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner]{line-height:0;height:100%;max-width:23px;margin:0 1px 0 5px}:host(:not([no-spinner])){padding:0 0 0 5px}:host [part=spinner-down],:host [part=spinner-up]{background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0;outline:0;font-family:inherit;font-size:13rem;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;border:none;min-height:9px}:host [part=spinner-down][cta],:host [part=spinner-up][cta]{background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host [part=spinner-down][cta]:active,:host [part=spinner-up][cta]:active{background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}:host [part=spinner-down][cta][disabled],:host [part=spinner-up][cta][disabled]{opacity:.4}:host [part=spinner-down][disabled],:host [part=spinner-up][disabled]{opacity:.4}:host [part=spinner-down][toggles][active],:host [part=spinner-up][toggles][active]{color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%);border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host [part=spinner-down]:active,:host [part=spinner-up]:active{background-image:none}:host [part=spinner-down][toggles],:host [part=spinner-up][toggles]{background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}@media (-ms-high-contrast:none),(pointer:fine){button[cta]:focus:not([focused]),button[cta][focused=visible]{box-shadow:inset 0 0 0 1px #a9afba;background-color:#ffb266;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}button:focus:not([focused]),button[focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba;background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}button:hover,button[toggles]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button:hover:not(:focus),button[cta]:hover:not(:focus),button[toggles]:hover:not(:focus),button[toggles][active]:hover:not(:focus){border-color:#a9afba;outline:0}button[cta]:hover{background-color:#ffc48a;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button[toggles]:focus:not([focused]),button[toggles][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}button[toggles][active]:focus:not([focused]),button[toggles][active][focused=visible]{background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}button[toggles][active]:hover{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][cta]:focus:not([focused]),:host [part=spinner-down][cta][focused=visible],:host [part=spinner-up][cta]:focus:not([focused]),:host [part=spinner-up][cta][focused=visible]{box-shadow:inset 0 0 0 1px #a9afba;background-color:#ffb266;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part=spinner-down]:focus:not([focused]),:host [part=spinner-down][focused=visible],:host [part=spinner-up]:focus:not([focused]),:host [part=spinner-up][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba;background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part=spinner-down]:hover,:host [part=spinner-up]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down]:hover:not(:focus),:host [part=spinner-up]:hover:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][cta]:hover,:host [part=spinner-up][cta]:hover{background-color:#ffc48a;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][cta]:hover:not(:focus),:host [part=spinner-up][cta]:hover:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][toggles]:focus:not([focused]),:host [part=spinner-down][toggles][focused=visible],:host [part=spinner-up][toggles]:focus:not([focused]),:host [part=spinner-up][toggles][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part=spinner-down][toggles]:hover,:host [part=spinner-up][toggles]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][toggles]:hover:not(:focus),:host [part=spinner-up][toggles]:hover:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][toggles][active]:focus:not([focused]),:host [part=spinner-down][toggles][active][focused=visible],:host [part=spinner-up][toggles][active]:focus:not([focused]),:host [part=spinner-up][toggles][active][focused=visible]{background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part=spinner-down][toggles][active]:hover,:host [part=spinner-up][toggles][active]:hover{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][toggles][active]:hover:not(:focus),:host [part=spinner-up][toggles][active]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{button:active,button[cta]:active,button[toggles]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}button:active:not(:focus),button[cta]:active:not(:focus),button[toggles]:active:not(:focus),button[toggles][active]:active:not(:focus){border-color:#a9afba;outline:0}button[disabled],button[toggles][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}button[cta][disabled]{background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}button[toggles][active]:active{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}button[toggles][active][disabled]{background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down]:active,:host [part=spinner-up]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part=spinner-down]:active:not(:focus),:host [part=spinner-up]:active:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][disabled],:host [part=spinner-up][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][cta]:active,:host [part=spinner-up][cta]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part=spinner-down][cta]:active:not(:focus),:host [part=spinner-up][cta]:active:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][cta][disabled],:host [part=spinner-up][cta][disabled]{background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][toggles]:active,:host [part=spinner-up][toggles]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part=spinner-down][toggles]:active:not(:focus),:host [part=spinner-up][toggles]:active:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][toggles][disabled],:host [part=spinner-up][toggles][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][toggles][active]:active,:host [part=spinner-up][toggles][active]:active{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part=spinner-down][toggles][active]:active:not(:focus),:host [part=spinner-up][toggles][active]:active:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][toggles][active][disabled],:host [part=spinner-up][toggles][active][disabled]{background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part=spinner-down]{margin-top:0}:host([readonly]) [part=spinner-down]:hover,:host([readonly]) [part=spinner-up]:hover{color:#505050;background-color:#fafbfc}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-number-field', styles: ':host{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:left;font-family:inherit;font-size:13px;font-weight:400;height:23px;width:140px;max-width:100%;padding:0 5px;margin:1px 0;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;text-overflow:ellipsis;background-color:#fff;border:1px solid #a9afba}:host([type=number]){padding-right:0}:host([error]),:host([error][warning]){border:1px solid #d94255}:host([error][disabled]),:host([error][warning][disabled]){color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host ::-ms-clear{display:none}:host [part=input]{color:inherit;padding:0;margin:0;flex:1 1 auto;min-width:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-overflow:ellipsis;touch-action:manipulation}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:invalid{box-shadow:none}:host [part=icon]{color:#acafb5;min-width:1em}:host([disabled]) [part=input]{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6)}:host([readonly]){border:1px solid rgba(169,175,186,.6)}:host(:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([warning]){background-color:#fff;border:1px solid #f93}:host([warning][disabled]){border:1px solid rgba(255,153,51,.6);color:rgba(72,72,72,.6)}:host([warning][readonly]){border:1px solid rgba(255,153,51,.6)}:host([warning]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #ffb366}:host([error]),:host([error][warning]:not([focused])){background-color:#fff;border:1px solid #d94255}:host([error][disabled]),:host([error][warning]:not([focused])[disabled]){border:1px solid rgba(217,66,85,.6);color:rgba(72,72,72,.6)}:host([error][readonly]),:host([error][warning]:not([focused])[readonly]){border:1px solid rgba(217,66,85,.6)}:host([error]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover),:host([error][warning]:not([focused]):not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #e37180}:host([highlight]){background-color:#b0ffff;border:1px solid #a9afba}:host([highlight][disabled]){border:1px solid rgba(169,175,186,.6);color:rgba(72,72,72,.6);background-color:rgba(176,255,255,.6)}:host([highlight][readonly]){border:1px solid rgba(169,175,186,.6)}:host([highlight]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #bfc3cb}:host([indirect]){color:#009494;background-color:#effefe;border:1px solid #898623}:host([indirect][disabled]){border:1px solid rgba(137,134,35,.6);color:rgba(0,148,148,.6)}:host([indirect][readonly]){border:1px solid rgba(137,134,35,.6)}:host([indirect]:not([focused]):not(:focus):not([disabled]):not([readonly]):hover){border:1px solid #a7a45a}:host([focused]){background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}:host([disabled]) [part=input]::-webkit-input-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]::-moz-placeholder{color:rgba(102,101,112,.6)}:host([disabled]) [part=input]:-ms-input-placeholder{color:rgba(102,101,112,.6)}button{background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0 8px;outline:0;font-family:inherit;font-size:13px;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden}button[cta]{background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}button[cta]:active{background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}button[cta][disabled],button[disabled]{opacity:.4}button[toggles][active]{color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%);border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}button:active{background-image:none}button[toggles]{background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host [part=input]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host [part=spinner]{line-height:0;height:100%;max-width:23px;margin:0 1px 0 5px}:host(:not([no-spinner])){padding:0 0 0 5px}:host [part=spinner-down],:host [part=spinner-up]{background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;background-color:#fafbfc;color:#505050;border:1px solid #a9afba;height:23px;box-shadow:0 0 0 0 rgba(0,0,0,.3);padding:0;outline:0;font-family:inherit;font-size:13px;font-weight:400;min-width:23px;margin:1px 0;transition:70ms;text-align:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;justify-content:center;align-items:center;vertical-align:bottom;position:relative;overflow:hidden;border:none;min-height:9px}:host [part=spinner-down][cta],:host [part=spinner-up][cta]{background-image:linear-gradient(rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);background-color:#ffb266;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host [part=spinner-down][cta]:active,:host [part=spinner-up][cta]:active{background-color:#ffb266;background-image:linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,.4) 100%)}:host [part=spinner-down][cta][disabled],:host [part=spinner-up][cta][disabled]{opacity:.4}:host [part=spinner-down][disabled],:host [part=spinner-up][disabled]{opacity:.4}:host [part=spinner-down][toggles][active],:host [part=spinner-up][toggles][active]{color:#f93!important;background-color:#fff!important;background-image:linear-gradient(rgba(0,0,0,.1) 0,rgba(0,0,0,0) 100%);border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}:host [part=spinner-down]:active,:host [part=spinner-up]:active{background-image:none}:host [part=spinner-down][toggles],:host [part=spinner-up][toggles]{background-color:#fafbfc;color:#505050;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);outline:0}@media (-ms-high-contrast:none),(pointer:fine){button[cta]:focus:not([focused]),button[cta][focused=visible]{box-shadow:inset 0 0 0 1px #a9afba;background-color:#ffb266;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}button:focus:not([focused]),button[focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba;background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}button:hover,button[toggles]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button:hover:not(:focus),button[cta]:hover:not(:focus),button[toggles]:hover:not(:focus),button[toggles][active]:hover:not(:focus){border-color:#a9afba;outline:0}button[cta]:hover{background-color:#ffc48a;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}button[toggles]:focus:not([focused]),button[toggles][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}button[toggles][active]:focus:not([focused]),button[toggles][active][focused=visible]{background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}button[toggles][active]:hover{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][cta]:focus:not([focused]),:host [part=spinner-down][cta][focused=visible],:host [part=spinner-up][cta]:focus:not([focused]),:host [part=spinner-up][cta][focused=visible]{box-shadow:inset 0 0 0 1px #a9afba;background-color:#ffb266;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part=spinner-down]:focus:not([focused]),:host [part=spinner-down][focused=visible],:host [part=spinner-up]:focus:not([focused]),:host [part=spinner-up][focused=visible]{border-style:dotted;box-shadow:inset 0 0 0 1px #a9afba;background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part=spinner-down]:hover,:host [part=spinner-up]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down]:hover:not(:focus),:host [part=spinner-up]:hover:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][cta]:hover,:host [part=spinner-up][cta]:hover{background-color:#ffc48a;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][cta]:hover:not(:focus),:host [part=spinner-up][cta]:hover:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][toggles]:focus:not([focused]),:host [part=spinner-down][toggles][focused=visible],:host [part=spinner-up][toggles]:focus:not([focused]),:host [part=spinner-up][toggles][focused=visible]{background-color:#fafbfc;color:#505050;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part=spinner-down][toggles]:hover,:host [part=spinner-up][toggles]:hover{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][toggles]:hover:not(:focus),:host [part=spinner-up][toggles]:hover:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][toggles][active]:focus:not([focused]),:host [part=spinner-down][toggles][active][focused=visible],:host [part=spinner-up][toggles][active]:focus:not([focused]),:host [part=spinner-up][toggles][active][focused=visible]{background-color:#fff;color:#f93;box-shadow:inset 0 0 0 1px #a9afba;border-color:#ee7600;outline:0}:host [part=spinner-down][toggles][active]:hover,:host [part=spinner-up][toggles][active]:hover{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=spinner-down][toggles][active]:hover:not(:focus),:host [part=spinner-up][toggles][active]:hover:not(:focus){border-color:#a9afba;outline:0}}@media all{button:active,button[cta]:active,button[toggles]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}button:active:not(:focus),button[cta]:active:not(:focus),button[toggles]:active:not(:focus),button[toggles][active]:active:not(:focus){border-color:#a9afba;outline:0}button[disabled],button[toggles][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}button[cta][disabled]{background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}button[toggles][active]:active{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}button[toggles][active][disabled]{background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down]:active,:host [part=spinner-up]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part=spinner-down]:active:not(:focus),:host [part=spinner-up]:active:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][disabled],:host [part=spinner-up][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][cta]:active,:host [part=spinner-up][cta]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part=spinner-down][cta]:active:not(:focus),:host [part=spinner-up][cta]:active:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][cta][disabled],:host [part=spinner-up][cta][disabled]{background-color:#ffb266;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][toggles]:active,:host [part=spinner-up][toggles]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part=spinner-down][toggles]:active:not(:focus),:host [part=spinner-up][toggles]:active:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][toggles][disabled],:host [part=spinner-up][toggles][disabled]{background-color:#fafbfc;color:#505050;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}:host [part=spinner-down][toggles][active]:active,:host [part=spinner-up][toggles][active]:active{background-color:#fff;color:#c60;box-shadow:0 0 0 0 rgba(0,0,0,.3)}:host [part=spinner-down][toggles][active]:active:not(:focus),:host [part=spinner-up][toggles][active]:active:not(:focus){border-color:#a9afba;outline:0}:host [part=spinner-down][toggles][active][disabled],:host [part=spinner-up][toggles][active][disabled]{background-color:#fff;color:#f93;border-color:#babfc8;box-shadow:none;outline:0;pointer-events:none}}:host [part=spinner-down]{margin-top:0}:host([readonly]) [part=spinner-down]:hover,:host([readonly]) [part=spinner-up]:hover{color:#505050;background-color:#fafbfc}' }}));

package/lib/overlay/custom-elements.json

@@ -128,7 +128,7 @@
         },
         {
           "name": "position",
-          "description": "Set position and align against the attach target.\nPosition may contain a single word or a comma separated list to set the priority.\nPosition is not applied if `attachTarget` is not HTML Element.\nFor instance: `[bottom-middle, top-middle]` - default position is bottom-middle, if cannot fit position top-middle;\nor `[left, right]` - align is not set, set best position on the left or right\n\nPosition can be: `top`, `right`, `bottom`, `left`, `center`\nAlign can be: `start`, `middle`, `end`",
+          "description": "Set position and align against the attach target.\nPosition may contain a single word or a comma separated list to set the priority.\nPosition is not applied if `positionTarget` is not an HTML Element.\nFor instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;\nor `left, right` - align is not set, set best position on the `left` or `right`\n\nPosition can be: `top`, `right`, `bottom`, `left`, `center`\nAlign can be: `start`, `middle`, `end`",
           "type": "{} | undefined"
         }
       ],
@@ -284,7 +284,7 @@
         {
           "name": "position",
           "attribute": "position",
-          "description": "Set position and align against the attach target.\nPosition may contain a single word or a comma separated list to set the priority.\nPosition is not applied if `attachTarget` is not HTML Element.\nFor instance: `[bottom-middle, top-middle]` - default position is bottom-middle, if cannot fit position top-middle;\nor `[left, right]` - align is not set, set best position on the left or right\n\nPosition can be: `top`, `right`, `bottom`, `left`, `center`\nAlign can be: `start`, `middle`, `end`",
+          "description": "Set position and align against the attach target.\nPosition may contain a single word or a comma separated list to set the priority.\nPosition is not applied if `positionTarget` is not an HTML Element.\nFor instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;\nor `left, right` - align is not set, set best position on the `left` or `right`\n\nPosition can be: `top`, `right`, `bottom`, `left`, `center`\nAlign can be: `start`, `middle`, `end`",
           "type": "{} | undefined"
         },
         {
@@ -310,22 +310,19 @@
       "events": [
         {
           "name": "closed",
-          "description": "Dispatched when overlay becomes invisible and close animation finishes"
+          "description": "Fired when overlay becomes invisible and close animation finished"
         },
         {
           "name": "opened",
-          "description": "Dispatched when the overlay becomes visible and the open animation finishes"
+          "description": "Fired when overlay becomes visible and the open animation finished"
         },
         {
           "name": "refit",
-          "description": "Dispatched when refit algorithm finishes calculations"
+          "description": "Fired when refit algorithm finishes calculations"
         },
         {
           "name": "opened-changed",
-          "description": "Dispatched when when open attribute changes internally. Prevent default to stop opening/closing pipeline"
-        },
-        {
-          "name": "animationiteration"
+          "description": "Fired when the user changes open state of overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically."
         }
       ],
       "methods": [

package/lib/overlay/custom-elements.md

@@ -20,7 +20,7 @@ Element to help building modals, dialogs and other overlay content
 | `noOverlap`                       | `no-overlap`                 | `boolean`                          | false   | True to not overlap positionTarget               |
 | `offset`                          | `offset`                     | `number`                           | 0       | A pixel value that will be added to the position calculated on the vertical or horizontal axis.<br />The offset is applied dynamically depending on the `positionTarget` |
 | `opened`                          | `opened`                     | `boolean`                          | false   | True if the overlay is currently displayed       |
-| `position`                        | `position`                   | `{} \| undefined`                  |         | Set position and align against the attach target.<br />Position may contain a single word or a comma separated list to set the priority.<br />Position is not applied if `attachTarget` is not HTML Element.<br />For instance: `[bottom-middle, top-middle]` - default position is bottom-middle, if cannot fit position top-middle;<br />or `[left, right]` - align is not set, set best position on the left or right<br /><br />Position can be: `top`, `right`, `bottom`, `left`, `center`<br />Align can be: `start`, `middle`, `end` |
+| `position`                        | `position`                   | `{} \| undefined`                  |         | Set position and align against the attach target.<br />Position may contain a single word or a comma separated list to set the priority.<br />Position is not applied if `positionTarget` is not an HTML Element.<br />For instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;<br />or `left, right` - align is not set, set best position on the `left` or `right`<br /><br />Position can be: `top`, `right`, `bottom`, `left`, `center`<br />Align can be: `start`, `middle`, `end` |
 | `positionTarget`                  | `position-target`            | `PositionTarget\|null\|undefined`  |         | Set the position target as follows:<br />- HTMLElement if overlay is position next to the HTML element<br />- String containing `top`, `right`, `left`, `bottom`, `center` combinations to position against the screen.<br />For instance: `top left` - put the overlay at `top left` point of the screen; `bottom` - put overlay at `bottom center` point of the screen |
 | `positionTargetConfig (readonly)` |                              |                                    |         | Get position target configuration based on positionTarget and fullScreen properties<br />Used for caching and calculations |
 | `spacing`                         | `spacing`                    | `boolean`                          | false   | True to apply spacing for overlay content        |
@@ -45,10 +45,9 @@ Element to help building modals, dialogs and other overlay content
 
 ## Events
 
-| Event                | Description                                      |
-|----------------------|--------------------------------------------------|
-| `animationiteration` |                                                  |
-| `closed`             | Dispatched when overlay becomes invisible and close animation finishes |
-| `opened`             | Dispatched when the overlay becomes visible and the open animation finishes |
-| `opened-changed`     | Dispatched when when open attribute changes internally. Prevent default to stop opening/closing pipeline |
-| `refit`              | Dispatched when refit algorithm finishes calculations |
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `closed`         | Fired when overlay becomes invisible and close animation finished |
+| `opened`         | Fired when overlay becomes visible and the open animation finished |
+| `opened-changed` | Fired when the user changes open state of overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically. |
+| `refit`          | Fired when refit algorithm finishes calculations |

package/lib/overlay/elements/overlay.d.ts

@@ -4,10 +4,10 @@ import { TransitionStyle, PositionTarget, Position, NullOrUndefined, PositionTar
 export type { TransitionStyle, PositionTarget, Position, PositionTargetStrategy };
 /**
  * Element to help building modals, dialogs and other overlay content
- * @fires closed - Dispatched when overlay becomes invisible and close animation finishes
- * @fires opened - Dispatched when the overlay becomes visible and the open animation finishes
- * @fires refit - Dispatched when refit algorithm finishes calculations
- * @fires opened-changed - Dispatched when when open attribute changes internally. Prevent default to stop opening/closing pipeline
+ * @fires closed - Fired when overlay becomes invisible and close animation finished
+ * @fires opened - Fired when overlay becomes visible and the open animation finished
+ * @fires refit - Fired when refit algorithm finishes calculations
+ * @fires opened-changed - Fired when the user changes open state of overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically.
  */
 export declare class Overlay extends ResponsiveElement {
     /**
@@ -134,9 +134,9 @@ export declare class Overlay extends ResponsiveElement {
     /**
      * Set position and align against the attach target.
      * Position may contain a single word or a comma separated list to set the priority.
-     * Position is not applied if `attachTarget` is not HTML Element.
-     * For instance: `[bottom-middle, top-middle]` - default position is bottom-middle, if cannot fit position top-middle;
-     * or `[left, right]` - align is not set, set best position on the left or right
+     * Position is not applied if `positionTarget` is not an HTML Element.
+     * For instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;
+     * or `left, right` - align is not set, set best position on the `left` or `right`
      *
      * Position can be: `top`, `right`, `bottom`, `left`, `center`
      * Align can be: `start`, `middle`, `end`

package/lib/overlay/elements/overlay.js

@@ -1,6 +1,6 @@
 var Overlay_1;
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { ResponsiveElement, html, css, triggerResize } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../../version.js';
@@ -63,10 +63,10 @@ const shouldUpdateProperties = ['withShadow', 'transparent', 'spacing', 'transit
 const shouldRefitProperties = ['position', 'x', 'y', 'positionTarget', 'horizontalOffset', 'verticalOffset', 'offset', 'fullScreen', 'noOverlap'];
 /**
  * Element to help building modals, dialogs and other overlay content
- * @fires closed - Dispatched when overlay becomes invisible and close animation finishes
- * @fires opened - Dispatched when the overlay becomes visible and the open animation finishes
- * @fires refit - Dispatched when refit algorithm finishes calculations
- * @fires opened-changed - Dispatched when when open attribute changes internally. Prevent default to stop opening/closing pipeline
+ * @fires closed - Fired when overlay becomes invisible and close animation finished
+ * @fires opened - Fired when overlay becomes visible and the open animation finished
+ * @fires refit - Fired when refit algorithm finishes calculations
+ * @fires opened-changed - Fired when the user changes open state of overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically.
  */
 let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
     constructor() {
@@ -320,9 +320,9 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
     /**
      * Set position and align against the attach target.
      * Position may contain a single word or a comma separated list to set the priority.
-     * Position is not applied if `attachTarget` is not HTML Element.
-     * For instance: `[bottom-middle, top-middle]` - default position is bottom-middle, if cannot fit position top-middle;
-     * or `[left, right]` - align is not set, set best position on the left or right
+     * Position is not applied if `positionTarget` is not an HTML Element.
+     * For instance: `bottom-middle, top-middle` - default position is `bottom-middle`, if cannot fit then position would be `top-middle`;
+     * or `left, right` - align is not set, set best position on the `left` or `right`
      *
      * Position can be: `top`, `right`, `bottom`, `left`, `center`
      * Align can be: `start`, `middle`, `end`
@@ -602,14 +602,7 @@ let Overlay = Overlay_1 = class Overlay extends ResponsiveElement {
         else if (isEdge) {
             this.redrawThrottler.schedule(() => this.updateVariable('--redraw', `${Date.now()}`));
         }
-        /*
-        https://github.com/juggle/resize-observer/issues/42
-    
-        This event ensures that ResizeObserver picks up resize events
-        when overlay is deeply nested inside shadow root.
-        TODO: remove this workaround once ResizeObserver handles shadow root scenario
-        */
-        window.dispatchEvent(new Event('animationiteration'));
+        triggerResize();
     }
     /**
      * This function sets obligatory registers
@@ -1421,8 +1414,6 @@ __decorate([
     })
 ], Overlay.prototype, "position", null);
 Overlay = Overlay_1 = __decorate([
-    customElement('ef-overlay', {
-        alias: 'coral-popup-panel'
-    })
+    customElement('ef-overlay')
 ], Overlay);
 export { Overlay };

package/lib/overlay/helpers/types.d.ts

@@ -1,10 +1,10 @@
-declare type Position = ('top' | 'right' | 'bottom' | 'left' | 'center' | 'top-start' | 'top-middle' | 'top-end' | 'right-start' | 'right-middle' | 'right-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end' | 'center-middle');
-declare type PositionTarget = HTMLElement | 'top' | 'right' | 'bottom' | 'left' | 'center' | 'top right' | 'right top' | 'top center' | 'center top' | 'top left' | 'left top' | 'bottom right' | 'right bottom' | 'bottom center' | 'center bottom' | 'bottom left' | 'left bottom' | 'center left' | 'left center' | 'center right' | 'right center' | 'center center';
-declare type TransitionStyle = 'slide' | 'fade' | 'zoom' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'slide-right-down' | 'slide-right-up' | 'slide-left-down' | 'slide-left-up';
-declare type Calculated = {
+type Position = ('top' | 'right' | 'bottom' | 'left' | 'center' | 'top-start' | 'top-middle' | 'top-end' | 'right-start' | 'right-middle' | 'right-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end' | 'center-middle');
+type PositionTarget = HTMLElement | 'top' | 'right' | 'bottom' | 'left' | 'center' | 'top right' | 'right top' | 'top center' | 'center top' | 'top left' | 'left top' | 'bottom right' | 'right bottom' | 'bottom center' | 'center bottom' | 'bottom left' | 'left bottom' | 'center left' | 'left center' | 'center right' | 'right center' | 'center center';
+type TransitionStyle = 'slide' | 'fade' | 'zoom' | 'slide-down' | 'slide-up' | 'slide-right' | 'slide-left' | 'slide-right-down' | 'slide-right-up' | 'slide-left-down' | 'slide-left-up';
+type Calculated = {
     position?: string;
 };
-declare type SizingInfoComputed = {
+type SizingInfoComputed = {
     minWidth: number | null;
     maxWidth: number | null;
     minHeight: number | null;
@@ -14,21 +14,21 @@ declare type SizingInfoComputed = {
     marginTop: number | null;
     marginBottom: number | null;
 };
-declare type SizingInfoStyle = {
+type SizingInfoStyle = {
     minWidth: string;
     maxWidth: string;
     minHeight: string;
     maxHeight: string;
 };
-declare type SizingInfoRect = {
+type SizingInfoRect = {
     width: number;
     height: number;
 };
-declare type SizingInfo = {
+type SizingInfo = {
     computed: SizingInfoComputed;
     style: SizingInfoStyle;
 };
-declare type PositionTargetStrategy = {
+type PositionTargetStrategy = {
     rect: {
         top: number;
         bottom: number;
@@ -39,16 +39,16 @@ declare type PositionTargetStrategy = {
     };
     position: Array<string[]>;
 };
-declare type NullOrUndefined = null | undefined;
+type NullOrUndefined = null | undefined;
 declare const DEFAULT_ALIGN: Map<string, string>;
 declare const DEFAULT_TARGET_STRATEGY: string[][];
-declare type PositionStyle = {
+type PositionStyle = {
     top?: number | NullOrUndefined;
     left?: number | NullOrUndefined;
     right?: number | NullOrUndefined;
     bottom?: number | NullOrUndefined;
 };
-declare type CalculatedPosition = {
+type CalculatedPosition = {
     position: string;
     align: string;
     canPosition: boolean;
@@ -60,7 +60,7 @@ declare type CalculatedPosition = {
     isVertical: boolean;
     area: number;
 };
-declare type ViewAreaInfo = {
+type ViewAreaInfo = {
     /**
      * Height of current viewport. Height is limited by screen size
      */

package/lib/overlay/managers/close-manager.d.ts

@@ -1,5 +1,5 @@
 import type { Overlay } from '../elements/overlay';
-declare type CloseCallback = () => void;
+type CloseCallback = () => void;
 /**
  * Close manager ensures that the correct (or the most top) overlay
  * is closed on ESC and click events

package/lib/overlay/managers/zindex-manager.d.ts

@@ -1,6 +1,6 @@
 import type { Overlay } from '../elements/overlay';
 export declare const ZIndex = 103;
-export declare type OverlayLayer = {
+export type OverlayLayer = {
     overlay: Overlay;
     zIndex: number;
 };

package/lib/overlay-menu/custom-elements.json

@@ -234,11 +234,11 @@
       "events": [
         {
           "name": "item-trigger",
-          "description": "Dispatched when user clicks on item"
+          "description": "Fired when the user taps on item."
         },
         {
           "name": "opened-changed",
-          "description": "Dispatched when when opened attribute changes internally. Prevent default to stop opening/closing pipeline"
+          "description": "Fired when the user changes open state of the overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically."
         }
       ]
     }

package/lib/overlay-menu/custom-elements.md

@@ -40,5 +40,5 @@ Overlay that supports single-level and multi-level menus
 
 | Event            | Description                                      |
 |------------------|--------------------------------------------------|
-| `item-trigger`   | Dispatched when user clicks on item              |
-| `opened-changed` | Dispatched when when opened attribute changes internally. Prevent default to stop opening/closing pipeline |
+| `item-trigger`   | Fired when the user taps on item.                |
+| `opened-changed` | Fired when the user changes open state of the overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically. |

package/lib/overlay-menu/helpers/types.d.ts

@@ -1,8 +1,8 @@
 import type { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
 import type { OverlayMenu } from '../index';
 import type { Item, ItemData } from '../../item';
-export declare type NestedMenu = {
+export type NestedMenu = {
     menu: OverlayMenu;
     item: Item;
 };
-export declare type OverlayMenuData = ItemData[] | CollectionComposer<ItemData>;
+export type OverlayMenuData = ItemData[] | CollectionComposer<ItemData>;

package/lib/overlay-menu/index.d.ts

@@ -7,8 +7,8 @@ import type { OverlayMenuData } from './helpers/types';
 export type { OverlayMenuData };
 /**
  * Overlay that supports single-level and multi-level menus
- * @fires item-trigger - Dispatched when user clicks on item
- * @fires opened-changed - Dispatched when when opened attribute changes internally. Prevent default to stop opening/closing pipeline
+ * @fires item-trigger - Fired when the user taps on item.
+ * @fires opened-changed - Fired when the user changes open state of the overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically.
  *
  * @attr {boolean} opened - True if the menu is currently displayed
  * @prop {boolean} [opened=false] - True if the menu is currently displayed

package/lib/overlay-menu/index.js

@@ -17,8 +17,8 @@ import { OpenedMenusManager } from './managers/menu-manager.js';
 import { Navigation } from './helpers/constants.js';
 /**
  * Overlay that supports single-level and multi-level menus
- * @fires item-trigger - Dispatched when user clicks on item
- * @fires opened-changed - Dispatched when when opened attribute changes internally. Prevent default to stop opening/closing pipeline
+ * @fires item-trigger - Fired when the user taps on item.
+ * @fires opened-changed - Fired when the user changes open state of the overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically.
  *
  * @attr {boolean} opened - True if the menu is currently displayed
  * @prop {boolean} [opened=false] - True if the menu is currently displayed
@@ -61,6 +61,33 @@ import { Navigation } from './helpers/constants.js';
  * @prop {Position[] | undefined} position - Set position and align against the attach target.
  */
 let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return [
+            super.styles,
+            css `
+        :host {
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+        :host([compact]:not([active])) { /* active is set in menu-manager */
+          opacity: 0;
+        }
+      `
+        ];
+    }
     constructor() {
         super();
         /**
@@ -106,33 +133,6 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         */
         this.modificationUpdate = this.modificationUpdate.bind(this);
     }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return CSS template
-     */
-    static get styles() {
-        return [
-            super.styles,
-            css `
-        :host {
-          overflow-y: auto;
-          overflow-x: hidden;
-        }
-        :host([compact]:not([active])) { /* active is set in menu-manager */
-          opacity: 0;
-        }
-      `
-        ];
-    }
     /**
      * Array of item's values
      * @type {string[]}
@@ -956,8 +956,6 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], OverlayMenu.prototype, "nested", void 0);
 OverlayMenu = OverlayMenu_1 = __decorate([
-    customElement('ef-overlay-menu', {
-        alias: 'emerald-popup-menu'
-    })
+    customElement('ef-overlay-menu')
 ], OverlayMenu);
 export { OverlayMenu };

package/lib/pagination/custom-elements.json

@@ -46,7 +46,7 @@
       "events": [
         {
           "name": "value-changed",
-          "description": "Fired when the `value` property is changed"
+          "description": "Fired when the user interacts with the control to change pages and so the `value` property changed. The event is not triggered if `value` is changed programmatically."
         }
       ],
       "methods": [