@umbraco-cms/backoffice 16.0.0-rc4 → 16.0.0-rc6

package/dist-cms/external/uui/index.js

@@ -44,10 +44,12 @@
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-text p + h1,
 .uui-text p + .uui-h1 {
   margin-top: var(--uui-size-layout-4,66px);
 }
+
 .uui-text h1.--no-top-margin,
 .uui-text h1:first-child,
 .uui-h1.--no-top-margin,
@@ -64,10 +66,12 @@
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-text p + h2,
 .uui-text p + .uui-h2 {
   margin-top: var(--uui-size-layout-3,42px);
 }
+
 .uui-text h2.--no-top-margin,
 .uui-text h2:first-child,
 .uui-h2.--no-top-margin,
@@ -84,6 +88,7 @@
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-text h3.--no-top-margin,
 .uui-text h3:first-child,
 .uui-h3.--no-top-margin,
@@ -100,6 +105,7 @@
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-text h4.--no-top-margin,
 .uui-text h4:first-child,
 .uui-h4.--no-top-margin,
@@ -129,6 +135,7 @@
   margin-top: var(--uui-size-layout-1,24px);
   margin-bottom: var(--uui-size-layout-1,24px);
 }
+
 .uui-p-lead,
 .uui-text p.uui-lead {
   font-size: var(--uui-size-6,18px);
@@ -145,6 +152,7 @@
 .uui-text a:active {
   color: var(--uui-color-interactive,#1b264f);
 }
+
 .uui-a:hover,
 .uui-text a:hover {
   color: var(--uui-color-interactive-emphasis,#3544b1);
@@ -447,12 +455,20 @@
 
       :host {
         --color: var(--uui-color-default,#1b264f);
-        --color-standalone: var(--uui-color-default-standalone,rgb(28, 35, 59));
+        --color-standalone: var(--uui-color-default-standalone,rgb(
+    28,
+    35,
+    59
+  ));
         --color-contrast: var(--uui-color-default-contrast,#fff);
       }
       :host([color='positive']) {
         --color: var(--uui-color-positive,#0b8152);
-        --color-standalone: var(--uui-color-positive-standalone,rgb(10, 115, 73));
+        --color-standalone: var(--uui-color-positive-standalone,rgb(
+    10,
+    115,
+    73
+  ));
         --color-contrast: var(--uui-color-positive-contrast,#fff);
       }
       :host([color='warning']) {
@@ -462,12 +478,20 @@
       }
       :host([color='danger']) {
         --color: var(--uui-color-danger,#d42054);
-        --color-standalone: var(--uui-color-danger-standalone,rgb(191, 33, 78));
+        --color-standalone: var(--uui-color-danger-standalone,rgb(
+    191,
+    33,
+    78
+  ));
         --color-contrast: var(--uui-color-danger-contrast,white);
       }
       :host([color='invalid']) {
         --color: var(--uui-color-invalid,#d42054);
-        --color-standalone: var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        --color-standalone: var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
         --color-contrast: var(--uui-color-invalid-contrast,white);
       }
 
@@ -1131,32 +1155,64 @@
       /** Button color attribute: */
       #button {
         --color: var(--uui-color-default,#1b264f);
-        --color-standalone: var(--uui-color-default-standalone,rgb(28, 35, 59));
+        --color-standalone: var(--uui-color-default-standalone,rgb(
+    28,
+    35,
+    59
+  ));
         --color-emphasis: var(--uui-color-default-emphasis,#3544b1);
         --color-contrast: var(--uui-color-default-contrast,#fff);
       }
       :host([color='positive']) #button {
         --color: var(--uui-color-positive,#0b8152);
-        --color-standalone: var(--uui-color-positive-standalone,rgb(10, 115, 73));
-        --color-emphasis: var(--uui-color-positive-emphasis,rgb(13, 155, 98));
+        --color-standalone: var(--uui-color-positive-standalone,rgb(
+    10,
+    115,
+    73
+  ));
+        --color-emphasis: var(--uui-color-positive-emphasis,rgb(
+    13,
+    155,
+    98
+  ));
         --color-contrast: var(--uui-color-positive-contrast,#fff);
       }
       :host([color='warning']) #button {
         --color: var(--uui-color-warning,#fbd142);
         --color-standalone: var(--uui-color-warning-standalone,#a17700);
-        --color-emphasis: var(--uui-color-warning-emphasis,rgb(251, 224, 101));
+        --color-emphasis: var(--uui-color-warning-emphasis,rgb(
+    251,
+    224,
+    101
+  ));
         --color-contrast: var(--uui-color-warning-contrast,#000);
       }
       :host([color='danger']) #button {
         --color: var(--uui-color-danger,#d42054);
-        --color-standalone: var(--uui-color-danger-standalone,rgb(191, 33, 78));
-        --color-emphasis: var(--uui-color-danger-emphasis,rgb(226, 60, 107));
+        --color-standalone: var(--uui-color-danger-standalone,rgb(
+    191,
+    33,
+    78
+  ));
+        --color-emphasis: var(--uui-color-danger-emphasis,rgb(
+    226,
+    60,
+    107
+  ));
         --color-contrast: var(--uui-color-danger-contrast,white);
       }
       :host([color='invalid']) #button {
         --color: var(--uui-color-invalid,#d42054);
-        --color-standalone: var(--uui-color-invalid-standalone,rgb(191, 33, 78));
-        --color-emphasis: var(--uui-color-invalid-emphasis,rgb(226, 60, 107));
+        --color-standalone: var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
+        --color-emphasis: var(--uui-color-invalid-emphasis,rgb(
+    226,
+    60,
+    107
+  ));
         --color-contrast: var(--uui-color-invalid-contrast,white);
       }
       :host([disabled]) #button {
@@ -1178,7 +1234,11 @@
       :host(:not([disabled]):hover) #button {
         background-color: var(
           --uui-button-background-color-hover,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ))
         );
         color: var(--uui-button-contrast-hover, var(--color-standalone));
         border-color: var(--uui-button-border-color-hover, transparent);
@@ -1239,7 +1299,11 @@
       :host([look='secondary']:hover) #button {
         background-color: var(
           --uui-button-background-color-hover,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ))
         );
         color: var(--uui-button-contrast-hover, var(--color-standalone));
         border-color: var(--uui-button-border-color-hover, transparent);
@@ -2139,7 +2203,11 @@
         );
         background-color: var(
           --uui-checkbox-background-color-hover,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ))
         );
       }
       label:focus #ticker {
@@ -2149,7 +2217,11 @@
         );
         background-color: var(
           --uui-checkbox-background-color-focus,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ))
         );
       }
       input:checked:not([disabled]) + #ticker,
@@ -2159,12 +2231,20 @@
 
       label:hover input:checked:not([disabled]) + #ticker,
       label:hover input:indeterminate:not([disabled]) + #ticker {
-        border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        border-color: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
 
       label:focus input:checked + #ticker,
       label:focus input:indeterminate + #ticker {
-        border-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        border-color: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
 
       #icon-check {
@@ -2200,7 +2280,11 @@
       }
       label:hover input:checked:not([disabled]) + #ticker::before,
       label:hover input:indeterminate:not([disabled]) + #ticker::before {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
 
       input:checked + #ticker::before,
@@ -2214,7 +2298,11 @@
       }
       label:focus input:checked + #ticker,
       label:focus input:indeterminate + #ticker {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
 
       input:focus + #ticker {
@@ -2251,7 +2339,11 @@
       :host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,
       :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,
       :host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {
-        border: 1px solid var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        border: 1px solid var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
       }
 
       :host([disabled]) #ticker {
@@ -2553,7 +2645,11 @@
 
       @keyframes pulse {
         0% {
-          box-shadow: 0 0 0 0 var(--uui-palette-space-cadet-light,rgb(38, 53, 110));
+          box-shadow: 0 0 0 0 var(--uui-palette-space-cadet-light,rgb(
+    38,
+    53,
+    110
+  ));
         }
         70% {
           box-shadow: 0 0 0 0.5rem transparent;
@@ -2996,7 +3092,11 @@
       } */
 
       :host(:hover) {
-        background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));
+        background-color: var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ));
         color: var(--uui-color-interactive-emphasis,#3544b1);
       }
 
@@ -3021,7 +3121,11 @@
 
       :host([selected]:hover) {
         color: var(--uui-color-selected-contrast,#fff);
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
       :host([selected][disabled]) {
         color: var(--uui-color-disabled-contrast,#c4c4c4);
@@ -3396,7 +3500,11 @@
       </div>
     `}};Lr.styles=[b`
       #messages {
-        color: var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        color: var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
       }
     `],Tu([a({reflect:!1,attribute:!0})],Lr.prototype,"for",1),Lr=Tu([v("uui-form-validation-message")],Lr);var Gv=Object.getOwnPropertyDescriptor,qv=(e,t,i,o)=>{for(var r=o>1?void 0:o?Gv(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=n(r)||r);return r};let jn=class extends g{constructor(){super(...arguments),this._formElement=null}getFormElement(){return this._formElement}_onSlotChanged(e){this._formElement&&(this._formElement.removeEventListener("submit",this._onSubmit),this._formElement.removeEventListener("reset",this._onReset));const t=e.target.assignedNodes({flatten:!0}).filter(i=>i instanceof HTMLFormElement);this._formElement=t.length>0?t[0]:null,this._formElement&&(this._formElement.setAttribute("novalidate",""),this._formElement.addEventListener("submit",this._onSubmit),this._formElement.addEventListener("reset",this._onReset))}_onSubmit(e){if(e.target===null)return;const t=e.target;if(!t.checkValidity()){t.setAttribute("submit-invalid","");return}t.removeAttribute("submit-invalid")}_onReset(e){e.target!==null&&e.target.removeAttribute("submit-invalid")}render(){return l`<slot @slotchange=${this._onSlotChanged}></slot>`}};jn=qv([v("uui-form")],jn);class ji extends A{constructor(t,i={}){super(t,{bubbles:!0,composed:!0,...i}),this.icon=null}acceptRequest(t){this.icon=t,this.stopImmediatePropagation()}}ji.ICON_REQUEST="icon-request";var Kv=Object.defineProperty,Xv=Object.getOwnPropertyDescriptor,ti=(e,t,i,o)=>{for(var r=o>1?void 0:o?Xv(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&Kv(t,i,r),r};let We=class extends g{constructor(){super(...arguments),this._name=null,this._retrievedNameIcon=!1,this._nameSvg=null,this.label="",this.svg=null,this.fallback=null,this._useFallback=!1}get name(){return this._name}set name(e){this._name=e,this.shadowRoot&&this.requestIcon()}requestIcon(){if(this._name!==""&&this._name!==null){const e=new ji(ji.ICON_REQUEST,{detail:{iconName:this._name}});this.dispatchEvent(e),e.icon!==null?(this._retrievedNameIcon=!0,e.icon.then(t=>{this._useFallback=!1,this._nameSvg=t})):(this._retrievedNameIcon=!1,this._useFallback=!0)}}connectedCallback(){super.connectedCallback(),this._retrievedNameIcon===!1&&this.requestIcon()}disconnectedCallback(){this._retrievedNameIcon=!1}firstUpdated(){this._retrievedNameIcon===!1&&this.requestIcon(),typeof this.label=="string"&&this.label.length>0?(this.setAttribute("role","img"),this.setAttribute("aria-label",this.label),this.removeAttribute("aria-hidden")):(this.removeAttribute("role"),this.removeAttribute("aria-label"),this.setAttribute("aria-hidden","true"))}render(){return this._useFallback===!0?this.fallback===null?l`<slot name="fallback"></slot>`:l`${ns(this.fallback)}`:this._nameSvg!==null?l`${ns(this._nameSvg)}`:this.svg!==null?l`${ns(this.svg)}`:l`<slot></slot>`}};We.styles=[b`
       :host {
@@ -4042,7 +4150,11 @@
         #caret-button:hover {
         background-color: var(
           --uui-menu-item-background-color-hover,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ))
         );
       }
       :host(:not([active], [selected], [disabled]))
@@ -4073,7 +4185,11 @@
       :host([active]) #caret-button:hover {
         background-color: var(
           --uui-menu-item-background-color-active-hover,
-          var(--uui-color-current-emphasis,rgb(248, 214, 211))
+          var(--uui-color-current-emphasis,rgb(
+    248,
+    214,
+    211
+  ))
         );
       }
 
@@ -4110,7 +4226,11 @@
         #caret-button:hover {
         background-color: var(
           --uui-menu-item-background-color-selected-hover,
-          var(--uui-color-selected-emphasis,rgb(70, 86, 200))
+          var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ))
         );
       }
 
@@ -4122,7 +4242,11 @@
         border-radius: var(--uui-border-radius,3px);
         background-color: var(
           --uui-menu-item-background-color-highlight,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ))
         );
       }
 
@@ -4141,7 +4265,11 @@
         border-radius: var(--uui-border-radius,3px);
         background-color: var(
           --uui-menu-item-background-color-highlight-active-selected,
-          var(--uui-color-current-emphasis,rgb(248, 214, 211))
+          var(--uui-color-current-emphasis,rgb(
+    248,
+    214,
+    211
+  ))
         );
       }
 
@@ -4173,7 +4301,11 @@
         border-radius: var(--uui-border-radius,3px);
         background-color: var(
           --uui-menu-item-background-color-highlight-selectable-selected,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ))
         );
         color: var(
           --uui-menu-item-color-highlight-selectable-selected,
@@ -4738,11 +4870,19 @@
       }
 
       input:checked:hover ~ #button {
-        border: 1px solid var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        border: 1px solid var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
 
       input:checked:hover ~ #button::after {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
 
       :host([disabled]) label {
@@ -4789,7 +4929,11 @@
       :host(:not([pristine]):invalid),
       /* polyfill support */
       :host(:not([pristine])[internals-invalid]) {
-        border: 1px solid var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        border: 1px solid var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
       }
     `],ua([a({type:Boolean,reflect:!0})],li.prototype,"disabled",2),ua([a({type:Boolean,reflect:!0})],li.prototype,"readonly",2),li=ua([v("uui-radio-group")],li);class Ge extends A{constructor(t,i={}){super(t,{bubbles:!0,...i})}}Ge.INPUT="input",Ge.CHANGE="change";var Wb=Object.defineProperty,Fb=Object.getOwnPropertyDescriptor,uc=e=>{throw TypeError(e)},j=(e,t,i,o)=>{for(var r=o>1?void 0:o?Fb(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&Wb(t,i,r),r},cc=(e,t,i)=>t.has(e)||uc("Cannot "+i),Gb=(e,t,i)=>(cc(e,t,"read from private field"),i?i.call(e):t.get(e)),hc=(e,t,i)=>t.has(e)?uc("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),ir=(e,t,i)=>(cc(e,t,"access private method"),i),Ut,ui,ma;const _a={TOP:3,CENTER:2},Rr=18,rr=3,ct=12,qb=24,ya=e=>{const t=e.toString().indexOf(".");return t>=0?e.toString().length-t-1:0};let T=class extends Ne(g,""){constructor(){super(),hc(this,Ut),this.disabled=!1,this.readonly=!1,this._min=0,this._max=0,this.hideStepValues=!1,this._step=1,this._movement=!1,this.startPoint={mouse:0,low:0,high:0},this._lowInputValue=0,this._highInputValue=0,this._trackWidth=0,this._lowValuePercentStart=0,this._highValuePercentEnd=100,hc(this,ma,e=>{e.key=="Enter"&&this.submit()}),this._onTouchStart=e=>{if(this.disabled)return;const t=e.composedPath()[0];if(t!==this._outerTrack)if(t===this._innerColor||t===this._innerColorThumb)window.addEventListener("touchend",this._onTouchEnd),window.addEventListener("touchcancel",this._onTouchEnd),window.addEventListener("touchmove",this._onTouchMove),this._movement=!0,this._saveStartPoints(e.touches[0].pageX);else{const i=this._getClickedValue(e.touches[0].pageX),o=Math.abs(this._lowInputValue-i),r=Math.abs(this._highInputValue-i);o<r?this.setValueLow(i):this.setValueHigh(i)}},this._onTouchMove=e=>{this._dragBothValuesByMousePos(e.touches[0].pageX)},this._onTouchEnd=()=>{this._movement=!1,this.onChanged(),window.removeEventListener("touchend",this._onTouchEnd),window.removeEventListener("touchcancel",this._onTouchEnd),window.removeEventListener("touchmove",this._onTouchMove)},this._onMouseDown=e=>{if(this.disabled||this.readonly)return;const t=e.composedPath()[0];if(t!==this._outerTrack)if(t===this._innerColor||t===this._innerColorThumb)window.addEventListener("mouseup",this._onMouseUp),window.addEventListener("mousemove",this._onMouseMove),this._movement=!0,this._saveStartPoints(e.pageX);else{const i=this._getClickedValue(e.pageX),o=Math.abs(this._lowInputValue-i),r=Math.abs(this._highInputValue-i);o<r?this.setValueLow(i):this.setValueHigh(i)}},this._onMouseMove=e=>{e.preventDefault(),this._dragBothValuesByMousePos(e.pageX)},this._onMouseUp=()=>{this._movement=!1,this.onChanged(),window.removeEventListener("mouseup",this._onMouseUp),window.removeEventListener("mousemove",this._onMouseMove)},this.addEventListener("keydown",Gb(this,ma)),this.addEventListener("mousedown",this._onMouseDown),this.addEventListener("touchstart",this._onTouchStart),window.addEventListener("resize",()=>{this._trackWidth=this._outerTrack?.offsetWidth})}get min(){return this._min}set min(e){this._min=e,ir(this,Ut,ui).call(this)}get max(){return this._max}set max(e){this._max=e,ir(this,Ut,ui).call(this)}get step(){return this._step}set step(e){this._step=e,ir(this,Ut,ui).call(this)}get minGap(){return this._minGap}set minGap(e){this._minGap=e,ir(this,Ut,ui).call(this)}get maxGap(){return this._maxGap}set maxGap(e){this._maxGap=e,ir(this,Ut,ui).call(this)}get value(){return super.value}set value(e){super.value=e,ir(this,Ut,ui).call(this)}setValueLow(e){e=M(e,this.maxGap?this._highInputValue-this.maxGap>this.min?this._highInputValue-this.maxGap:this.min:this.min,this.minGap?this._highInputValue-this.minGap:this._highInputValue-this.step),this.setValue(e,this._highInputValue)}setValueHigh(e){e=M(e,this.minGap?this._lowInputValue+this.minGap:this._lowInputValue+this.step,this.maxGap?this.maxGap+this._lowInputValue<this.max?this.maxGap+this._lowInputValue:this.max:this.max),this.setValue(this._lowInputValue,e)}setValue(e,t,i){if(i){const o=this.startPoint.high-this.startPoint.low;e=M(e,this.min,this.max-o),t=M(t,this.min+o,this.max)}this._inputLow.value=e.toString(),this._inputHigh.value=t.toString(),this.value=`${e},${t}`}getFormElement(){return this._currentFocus?this._currentFocus:this._inputLow}async focus(){await this.updateComplete,this.getFormElement().focus()}async blur(){await this.updateComplete,this.getFormElement().blur()}connectedCallback(){super.connectedCallback(),this.value||(this.value=`${this._min},${this._max}`)}firstUpdated(e){super.updated(e),this._trackWidth=this._outerTrack.offsetWidth,this._runPropertiesChecks()}_runPropertiesChecks(){if(new RegExp(/^-?\d+(\.\d+)?,-?\d+(\.\d+)?$/).test(this.value)||console.error("Range slider (Value error occurred): Bad input"),this._highInputValue===this._lowInputValue&&console.error("Range slider (Value error occurred): Low-end and high-end value should never be equal. Use <uui-slider></uui-slider> instead."),this._lowInputValue>this._highInputValue&&console.error("Range slider (Value error occurred): Low-end value should never be higher than high-end value."),(this._highInputValue>this._max||this._highInputValue<this._min)&&(this.setValueHigh(this._max),console.warn(`Conflict with the high-end value and max value. High-end value has been converted to the max value (${this._max})`)),(this._lowInputValue<this._min||this._lowInputValue>this._max)&&(this.setValueLow(this._min),console.warn(`Conflict with the low-end value and min value. Low-end value has been converted to the min value (${this._min})`)),this._step<=0&&(this._step=1,console.warn("Property step needs a value higher than 0. Converted the step value to 1 (default)")),(this._max-this._min)/this._step%1!==0&&console.error("Conflict with step value and the min and max values. May experience bad side effects"),this._minGap&&this._minGap<this._step&&(this._minGap=void 0,console.warn("Conflict with min-gap and step value. The min-gap needs to be higher than the step value. Removed the min-gap property.")),this._minGap&&this._maxGap&&this._minGap>this._maxGap&&(this._minGap=void 0,this._maxGap=void 0,console.warn("Conflict with min-gap and max-gap. Removed the min-gap and max-gap properties.")),this._minGap&&this._max-this._min<this._minGap&&(this._minGap=void 0,console.warn("Conflict with the min-gap and the total range. Removed the min-gap.")),this._maxGap&&this._highInputValue-this._lowInputValue>this._maxGap&&(this.setValueHigh(this._lowInputValue+this._maxGap),console.warn(`Conflict with value and max-gap. High-end value has been converted to the highest possible value based on the low-end value and the max gap value (${this._highInputValue})`)),this._minGap&&this._highInputValue-this._lowInputValue<this._minGap){const t=this._minGap;this._highInputValue-t<this._min?(this.setValueHigh(this._lowInputValue+t),console.warn(`Conflict with value and min gap. High-end value has been converted to the lowest possible value based on the low-end value and the min gap value (${this._highInputValue}).`)):(this.setValueLow(this._highInputValue-t),console.warn(`Conflict with value and min gap. Low-end value has been converted to the highest possible value based on the high-end value and the min gap value (${this._lowInputValue}).`))}}_updateInnerColor(){const e=this._max-this._min,t=this._lowInputValue-this._min,i=this._highInputValue-this._min,o=t/e*100,r=100-i/e*100;this._lowValuePercentStart=M(o,0,100),this._highValuePercentEnd=M(r,0,100)}_getClickedValue(e){const t=this._outerTrack.getBoundingClientRect().left,r=(e-t-ct)/(this._trackWidth-ct*2)*(this._max-this._min)+this._min;return Math.round(r/this._step)*this._step}_saveStartPoints(e){this.startPoint={mouse:e,low:this._lowInputValue,high:this._highInputValue}}_dragBothValuesByMousePos(e){const t=this._outerTrack.offsetWidth,i=e-this.startPoint.mouse,o=this._max-this._min,r=i/(t+ct*2),s=Math.round(r*o/this._step)*this._step,n=this.startPoint.low+s,u=this.startPoint.high+s;this.setValue(n,u,!0),this.dispatchEvent(new Ge(Ge.INPUT))}_onLowInput(e){this.disabled&&e.preventDefault(),this.readonly&&e.preventDefault(),this._currentFocus=this._inputLow;const t=Number(e.target.value);this.setValueLow(t),this.dispatchEvent(new Ge(Ge.INPUT))}_onHighInput(e){this.disabled&&e.preventDefault(),this.readonly&&e.preventDefault(),this._currentFocus=this._inputHigh;const t=Number(e.target.value);this.setValueHigh(t),this.dispatchEvent(new Ge(Ge.INPUT))}_onLowChange(){this.setValueLow(Number(this._inputLow.value)),this.onChanged()}_onHighChange(){this.setValueHigh(Number(this._inputHigh.value)),this.onChanged()}onChanged(){this.pristine=!1,this.dispatchEvent(new Ge(Ge.CHANGE))}render(){return l`
       <div id="range-slider">
@@ -4852,13 +4996,21 @@
     </div>`}};Ut=new WeakSet,ui=function(){const e=this.value.split(",");let t=Number(e[0])||0,i=Number(e[1])||0;i=M(i,this._min,this._max),t=this._min+Math.round((t-this._min)/this._step)*this._step,i=this._min+Math.round((i-this._min)/this._step)*this._step,this._lowInputValue=M(t,this._min,this._minGap?i-this._minGap:i-this._step),this._highInputValue=M(i,this._minGap?this._lowInputValue+this._minGap:this._lowInputValue+this._step,Math.min(this._maxGap?t+this._maxGap:this._max,this._max)),this._updateInnerColor(),this.requestUpdate()},ma=new WeakMap,T.formAssociated=!0,T.styles=[b`
       :host {
         --color-interactive: var(--uui-color-selected,#3544b1);
-        --color-hover: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        --color-hover: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
         --color-focus: var(--uui-color-focus,#3879ff);
         min-height: 30px;
       }
 
       :host([error]) {
-        --color-interactive: var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        --color-interactive: var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
         --color-hover: var(--uui-color-invalid,#d42054);
       }
 
@@ -4936,11 +5088,19 @@
       }
 
       :host([error]) .color {
-        background-color: var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        background-color: var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
       }
       :host([error]) #inner-color-thumb:hover ~ .color,
       :host([error]) #inner-color-thumb:focus ~ .color {
-        background-color: var(--uui-color-invalid-emphasis,rgb(226, 60, 107));
+        background-color: var(--uui-color-invalid-emphasis,rgb(
+    226,
+    60,
+    107
+  ));
       }
 
       /** Steps */
@@ -4968,7 +5128,11 @@
       }
 
       :host([error]) .track-step.filled {
-        fill: var(--uui-color-invalid-emphasis,rgb(226, 60, 107));
+        fill: var(--uui-color-invalid-emphasis,rgb(
+    226,
+    60,
+    107
+  ));
       }
 
       :host #inner-color-thumb.active ~ .step-wrapper .track-step.filled,
@@ -5328,7 +5492,11 @@
       }
 
       :host([standalone][disabled]) {
-        border-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
+        border-color: var(--uui-color-disabled-standalone,rgb(
+    226,
+    226,
+    226
+  ));
       }
 
       slot[name='tag'] {
@@ -5583,11 +5751,19 @@
       }
 
       :host([error]) #native {
-        border: 1px solid var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        border: 1px solid var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
       }
 
       :host([error]) #native[disabled] {
-        border: 1px solid var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        border: 1px solid var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
       }
     `],De([a({type:String})],fe.prototype,"label",2),De([a()],fe.prototype,"placeholder",2),De([a({type:Boolean,reflect:!0})],fe.prototype,"disabled",2),De([a({type:Boolean,reflect:!0})],fe.prototype,"readonly",2),De([a({type:Boolean,reflect:!0})],fe.prototype,"error",2),De([a({type:Array,attribute:!1})],fe.prototype,"options",2),De([_()],fe.prototype,"_groups",2),De([a()],fe.prototype,"disabledGroups",2),De([_()],fe.prototype,"_disabledGroups",2),De([O("#native")],fe.prototype,"_input",2),fe=De([v("uui-select")],fe);const m0=b`
   input[type='range'] {
@@ -5803,7 +5979,11 @@
       }
       :host([disabled]) #thumb {
         background-color: var(--uui-color-disabled,#f3f3f5);
-        border-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
+        border-color: var(--uui-color-disabled-standalone,rgb(
+    226,
+    226,
+    226
+  ));
       }
 
       #thumb:after {
@@ -5864,7 +6044,11 @@
       }
 
       :host(:not([pristine]):invalid) #thumb {
-        border-color: var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        border-color: var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
       }
       :host(:not([pristine]):invalid) #thumb:after {
         background-color: var(--uui-color-invalid,#d42054);
@@ -5873,7 +6057,11 @@
       // readonly
       :host([readonly]) #thumb {
         background-color: var(--uui-color-disabled,#f3f3f5);
-        border-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
+        border-color: var(--uui-color-disabled-standalone,rgb(
+    226,
+    226,
+    226
+  ));
       }
 
       :host([readonly]) #thumb-label {
@@ -6305,10 +6493,18 @@
       }
 
       #button:hover::before {
-        background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
+        background-color: var(--uui-color-current-emphasis,rgb(
+    248,
+    214,
+    211
+  ));
       }
       :host([disabled]) #button::before {
-        background-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
+        background-color: var(--uui-color-disabled-standalone,rgb(
+    226,
+    226,
+    226
+  ));
       }
 
       slot[name='icon']::slotted(*) {
@@ -6461,12 +6657,20 @@
 
       :host {
         --color: var(--uui-color-default,#1b264f);
-        --color-standalone: var(--uui-color-default-standalone,rgb(28, 35, 59));
+        --color-standalone: var(--uui-color-default-standalone,rgb(
+    28,
+    35,
+    59
+  ));
         --color-contrast: var(--uui-color-default-contrast,#fff);
       }
       :host([color='positive']) {
         --color: var(--uui-color-positive,#0b8152);
-        --color-standalone: var(--uui-color-positive-standalone,rgb(10, 115, 73));
+        --color-standalone: var(--uui-color-positive-standalone,rgb(
+    10,
+    115,
+    73
+  ));
         --color-contrast: var(--uui-color-positive-contrast,#fff);
       }
       :host([color='warning']) {
@@ -6476,12 +6680,20 @@
       }
       :host([color='danger']) {
         --color: var(--uui-color-danger,#d42054);
-        --color-standalone: var(--uui-color-danger-standalone,rgb(191, 33, 78));
+        --color-standalone: var(--uui-color-danger-standalone,rgb(
+    191,
+    33,
+    78
+  ));
         --color-contrast: var(--uui-color-danger-contrast,white);
       }
       :host([color='invalid']) {
         --color: var(--uui-color-invalid,#d42054);
-        --color-standalone: var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        --color-standalone: var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
         --color-contrast: var(--uui-color-invalid-contrast,white);
       }
 
@@ -6552,7 +6764,11 @@
       textarea[readonly] {
         border-color: var(
           --uui-textarea-border-color-readonly,
-          var(--uui-color-disabled-standalone,rgb(226, 226, 226))
+          var(--uui-color-disabled-standalone,rgb(
+    226,
+    226,
+    226
+  ))
         );
         background-color: var(
           --uui-textarea-background-color-readonly,
@@ -6850,7 +7066,11 @@
         );
         background-color: var(
           --uui-toggle-background-color-focus,
-          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+          var(--uui-color-surface-emphasis,rgb(
+    250,
+    250,
+    250
+  ))
         );
       }
 
@@ -6859,11 +7079,19 @@
       }
 
       label:hover input:checked:not([disabled]) ~ #toggle {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
 
       label:focus input:checked ~ #toggle {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,rgb(
+    70,
+    86,
+    200
+  ));
       }
 
       #icon-checked,
@@ -6924,7 +7152,11 @@
       }
 
       :host([disabled]) #toggle {
-        background-color: var(--uui-color-disabled-standalone,rgb(226, 226, 226));
+        background-color: var(--uui-color-disabled-standalone,rgb(
+    226,
+    226,
+    226
+  ));
       }
       :host([disabled]) input:checked ~ #toggle {
         background-color: var(--uui-color-disabled-contrast,#c4c4c4);
@@ -6947,7 +7179,11 @@
       /* polyfill support */
       :host(:not([pristine])[internals-invalid]) #toggle,
       :host(:not([pristine])[internals-invalid]) label:hover #toggle {
-        border: 1px solid var(--uui-color-invalid-standalone,rgb(191, 33, 78));
+        border: 1px solid var(--uui-color-invalid-standalone,rgb(
+    191,
+    33,
+    78
+  ));
       }
     `],no=pg([v("uui-toggle")],no);var vg=Object.getOwnPropertyDescriptor,fg=(e,t,i,o)=>{for(var r=o>1?void 0:o?vg(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=n(r)||r);return r};let Hs=class extends g{render(){return l`<slot></slot>`}};Hs.styles=[b`
       :host(:not(:focus-within)) {