@uploadcare/file-uploader 1.3.0-alpha.4 → 1.3.0

package/index.ssr.js

@@ -13,8 +13,6 @@ export const ActivityBlock = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const ActivityHeader = class {
   static activities = {
@@ -31,29 +29,23 @@ export const ActivityHeader = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const BaseComponent = class {
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const Block = class {
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const BtnUi = class {
   static observedAttributes = ["text", "icon", "reverse", "theme"];
   static template = `
-  <button type="button" bind="@role:aria-role; @aria-controls: aria-controls">
-    <uc-icon bind="className: iconCss; @name: icon; @hidden: !icon"></uc-icon>
+  <button type="button" set="@role:aria-role; @aria-controls: aria-controls">
+    <uc-icon set="className: iconCss; @name: icon; @hidden: !icon"></uc-icon>
     <div class="uc-text">{{text}}</div>
   </button>
 `;
@@ -61,25 +53,23 @@ export const BtnUi = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const CameraSource = class {
   static template = `
   <uc-activity-header>
-    <button type="button" class="uc-mini-btn" bind="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <uc-icon name="back"></uc-icon>
     </button>
-    <div bind="@hidden: !cameraSelectHidden">
+    <div set="@hidden: !cameraSelectHidden">
       <uc-icon name="camera"></uc-icon>
       <span l10n="caption-camera"></span>
     </div>
     <uc-select
       class="uc-camera-select"
-      bind="options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
+      set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
     >
     </uc-select>
-    <button type="button" class="uc-mini-btn uc-close-btn" bind="onclick: *closeModal">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
       <uc-icon name="close"></uc-icon>
     </button>
   </uc-activity-header>
@@ -87,18 +77,18 @@ export const CameraSource = class {
     <video
       autoplay
       playsinline
-      bind="srcObject: video; style.transform: videoTransformCss; @hidden: videoHidden"
+      set="srcObject: video; style.transform: videoTransformCss; @hidden: videoHidden"
       ref="video"
     ></video>
-    <div class="uc-message-box" bind="@hidden: messageHidden">
+    <div class="uc-message-box" set="@hidden: messageHidden">
       <span l10n="l10nMessage"></span>
       <button
         type="button"
-        bind="onclick: onRequestPermissions; @hidden: requestBtnHidden"
+        set="onclick: onRequestPermissions; @hidden: requestBtnHidden"
         l10n="camera-permissions-request"
       ></button>
     </div>
-    <button type="button" class="uc-shot-btn" bind="onclick: onShot; @disabled: shotBtnDisabled">
+    <button type="button" class="uc-shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
       <uc-icon name="camera"></uc-icon>
     </button>
   </div>
@@ -147,15 +137,13 @@ export const CameraSource = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const CloudImageEditor = class {
   static styleAttrs = [];
   static template = `
   <svg width='0' height='0' style='position:absolute'><symbol viewBox='0 0 20 20' id='uc-icon-brightness' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M15 10a5 5 0 0 1-5 5m5-5a5 5 0 0 0-5-5m5 5h-5m0 5a5 5 0 0 1 0-10m0 10V5m0 15v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05m-.626 2.45H10m4.324 5H10'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-closeMax' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.232 10 3.585 5.353l1.768-1.768L10 8.232l4.648-4.647 1.767 1.768L11.768 10l4.647 4.648-1.767 1.767L10 11.768l-4.647 4.647-1.768-1.767L8.232 10Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-contrast' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 10a8 8 0 1 0 16 0 8 8 0 1 0-16 0m8-8v16m8-8h-8m7.598 2.5H10m6.24 2.5H10m7.6-7.5H10M16.242 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-crop' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M20 14H7.005C6.45 14 6 13.55 6 12.995V0M0 6h13.067c.515 0 .933.418.933.933V20M14.5.4 13 2l1.5 1.6M13 2h2a3 3 0 0 1 3 3v2M5.5 19.6 7 18l-1.5-1.6M7 18H5a3 3 0 0 1-3-3v-2'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-done' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m18.057 6.333-9.365 9.125a1.25 1.25 0 0 1-1.768-.023L1.92 10.296l1.791-1.744 4.132 4.243 8.47-8.253 1.744 1.79Z' clip-rule='evenodd'/></symbol><symbol fill='currentColor' viewBox='0 0 25 24' id='uc-icon-edit-file' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-enhance' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19 13h-2m0 0a4 4 0 0 1-4-4m4 4a4 4 0 0 0-4 4m0-8V7m0 2a4 4 0 0 1-4 4m-2 0h2m0 0a4 4 0 0 1 4 4m0 0v2M8 8.5H6.5m0 0a2 2 0 0 1-2-2m2 2a2 2 0 0 0-2 2m0-4V5m0 1.5a2 2 0 0 1-2 2M1 8.5h1.5m0 0a2 2 0 0 1 2 2m0 0V12M12 3h-1m0 0a1 1 0 0 1-1-1m1 1a1 1 0 0 0-1 1m0-2V1m0 1a1 1 0 0 1-1 1M8 3h1m0 0a1 1 0 0 1 1 1m0 0v1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-exposure' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M10 20v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05M5 10a5 5 0 1 0 10 0 5 5 0 1 0-10 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-filters' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M4.5 6.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m-3.5 6a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m7 0a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-flip' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19.6 5 18 3.5 16.4 5m3.2 10L18 16.5 16.4 15M18 3.523v12.954M3.3 8.5h10.654c.301 0 .415-.395.159-.554L3.459 1.286A.3.3 0 0 0 3 1.542V8.2a.3.3 0 0 0 .3.3zm0 3h10.654c.301 0 .415.395.159.554l-10.654 6.66A.3.3 0 0 1 3 18.458v-6.66a.3.3 0 0 1 .3-.3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-gamma' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M17 3C9 6 2.5 11.5 2.5 17.5m0 0h1m-1 0v-1m14 1h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3-14v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-mirror' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M5 .4 3.5 2 5 3.6M15 .4 16.5 2 15 3.6M3.52 2h12.957M8.5 16.7V6.046c0-.301-.394-.415-.554-.159L1.287 16.541a.3.3 0 0 0 .255.459H8.2a.3.3 0 0 0 .3-.3zm3 0V6.046c0-.301.395-.415.555-.159l6.659 10.654a.3.3 0 0 1-.255.459H11.8a.3.3 0 0 1-.3-.3z'/></symbol><symbol viewBox='0 0 40 40' id='uc-icon-original' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.5' d='M0 40 40 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-rotate' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M13.5.4 12 2l1.5 1.6M12.023 2H14.4A3.6 3.6 0 0 1 18 5.6V8M4 17h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-sad' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 17c4.418-4 11.582-4 16 0M16.5 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-11 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-saturation' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='puc-icon-id__a' x1='10.001' y1='1' x2='10.001' y2='19' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs><circle cx='10.001' cy='10' r='9' transform='rotate(90 10 10)' fill='url(#puc-icon-id__a)'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-slider' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 10h11m0 0a2 2 0 1 0 4 0m-4 0a2 2 0 1 1 4 0m0 0h5'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-tuning' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M8 10h11M1 10h4M1 4.5h11m3 0h4m-18 11h11m3 0h4m-7-11a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M5 10a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0m7 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-vibrance' xmlns='http://www.w3.org/2000/svg'><path d='M2.125 5.64A8.96 8.96 0 0 0 1.001 10a8.96 8.96 0 0 0 1.124 4.36V5.64z' fill='url(#suc-icon-id__a)'/><path d='M2.875 15.499V4.502a9.053 9.053 0 0 1 1.75-1.72v14.437a9.05 9.05 0 0 1-1.75-1.72z' fill='url(#suc-icon-id__b)'/><path d='M5.375 17.722c.548.33 1.134.601 1.75.809V1.469a8.956 8.956 0 0 0-1.75.81v15.443z' fill='url(#suc-icon-id__c)'/><path d='M7.875 1.253v17.495c.564.136 1.15.22 1.75.244V1.008a9 9 0 0 0-1.75.245z' fill='url(#suc-icon-id__d)'/><path d='M10.375 1.008v17.984a9 9 0 0 0 1.75-.244V1.252a9 9 0 0 0-1.75-.244z' fill='url(#suc-icon-id__e)'/><path d='M12.875 1.469V18.53a8.957 8.957 0 0 0 1.75-.808V2.277a8.957 8.957 0 0 0-1.75-.808z' fill='url(#suc-icon-id__f)'/><path d='M15.375 2.78v14.44a9.053 9.053 0 0 0 1.75-1.72v-11a9.054 9.054 0 0 0-1.75-1.72z' fill='url(#suc-icon-id__g)'/><path d='M17.875 5.638v8.724A8.959 8.959 0 0 0 19.001 10a8.96 8.96 0 0 0-1.126-4.362z' fill='url(#suc-icon-id__h)'/><defs><linearGradient id='suc-icon-id__a' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__b' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__c' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__d' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__e' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__f' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__g' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__h' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs></symbol><symbol viewBox='0 0 20 20' id='uc-icon-warmth' xmlns='http://www.w3.org/2000/svg'><path d='m7.5 13.05.429.42.171-.175v-.244h-.6zm5 0h-.6v.245l.172.175.428-.42zM8.1 3.5c0-1.05.85-1.9 1.9-1.9V.4a3.1 3.1 0 0 0-3.1 3.1h1.2zm0 9.55V3.5H6.9v9.55h1.2zm-1 2.45c0-.79.315-1.506.829-2.03l-.858-.84A4.088 4.088 0 0 0 5.9 15.5h1.2zm2.9 2.9a2.9 2.9 0 0 1-2.9-2.9H5.9a4.1 4.1 0 0 0 4.1 4.1v-1.2zm2.9-2.9a2.9 2.9 0 0 1-2.9 2.9v1.2a4.1 4.1 0 0 0 4.1-4.1h-1.2zm-.829-2.03c.514.524.829 1.24.829 2.03h1.2c0-1.117-.447-2.13-1.171-2.87l-.858.84zM11.9 3.5v9.55h1.2V3.5h-1.2zM10 1.6c1.05 0 1.9.85 1.9 1.9h1.2A3.1 3.1 0 0 0 10 .4v1.2z' fill='currentColor'/><path d='M10 14V8' stroke='currentColor' stroke-width='1.2' stroke-linecap='round'/><path d='M14 3h3m-3 3h3m-3 3h3m-8 6.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0' stroke='currentColor' stroke-width='1.2'/></symbol></svg>
   <div class="uc-wrapper uc-wrapper_desktop">
-    <uc-presence-toggle class="uc-network_problems_splash" bind="visible: presence.networkProblems;">
+    <uc-presence-toggle class="uc-network_problems_splash" set="visible: presence.networkProblems;">
       <div class="uc-network_problems_content">
         <div class="uc-network_problems_icon">
           <uc-icon name="sad"></uc-icon>
@@ -163,7 +151,7 @@ export const CloudImageEditor = class {
         <div class="uc-network_problems_text">Network error</div>
       </div>
       <div class="uc-network_problems_footer">
-        <uc-btn-ui theme="primary" text="Retry" bind="onclick: *on.retryNetwork"></uc-btn-ui>
+        <uc-btn-ui theme="primary" text="Retry" set="onclick: *on.retryNetwork"></uc-btn-ui>
       </div>
     </uc-presence-toggle>
     <div class="uc-viewport">
@@ -178,7 +166,7 @@ export const CloudImageEditor = class {
       <div class="uc-info_pan">{{msg}}</div>
     </div>
     <div class="uc-toolbar">
-      <uc-line-loader-ui bind="active: showLoader"></uc-line-loader-ui>
+      <uc-line-loader-ui set="active: showLoader"></uc-line-loader-ui>
       <div class="uc-toolbar_content uc-toolbar_content__editor">
         <uc-editor-toolbar></uc-editor-toolbar>
       </div>
@@ -189,8 +177,6 @@ export const CloudImageEditor = class {
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const CloudImageEditorActivity = class {
   static extSrcList = {
@@ -237,15 +223,13 @@ export const CloudImageEditorActivity = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const CloudImageEditorBlock = class {
   static styleAttrs = [];
   static template = `
   <svg width='0' height='0' style='position:absolute'><symbol viewBox='0 0 20 20' id='uc-icon-brightness' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M15 10a5 5 0 0 1-5 5m5-5a5 5 0 0 0-5-5m5 5h-5m0 5a5 5 0 0 1 0-10m0 10V5m0 15v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05m-.626 2.45H10m4.324 5H10'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-closeMax' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8.232 10 3.585 5.353l1.768-1.768L10 8.232l4.648-4.647 1.767 1.768L11.768 10l4.647 4.648-1.767 1.767L10 11.768l-4.647 4.647-1.768-1.767L8.232 10Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-contrast' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 10a8 8 0 1 0 16 0 8 8 0 1 0-16 0m8-8v16m8-8h-8m7.598 2.5H10m6.24 2.5H10m7.6-7.5H10M16.242 5H10'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-crop' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M20 14H7.005C6.45 14 6 13.55 6 12.995V0M0 6h13.067c.515 0 .933.418.933.933V20M14.5.4 13 2l1.5 1.6M13 2h2a3 3 0 0 1 3 3v2M5.5 19.6 7 18l-1.5-1.6M7 18H5a3 3 0 0 1-3-3v-2'/></symbol><symbol fill='currentColor' viewBox='0 0 20 20' id='uc-icon-done' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m18.057 6.333-9.365 9.125a1.25 1.25 0 0 1-1.768-.023L1.92 10.296l1.791-1.744 4.132 4.243 8.47-8.253 1.744 1.79Z' clip-rule='evenodd'/></symbol><symbol fill='currentColor' viewBox='0 0 25 24' id='uc-icon-edit-file' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M18.558 2.804a.78.78 0 0 0-.557.235l-.008.007-2.472 2.46 3.847 3.848 2.46-2.473.004-.003a.78.78 0 0 0 0-1.108l-.004-.003-2.712-2.728a.78.78 0 0 0-.558-.235Zm-.248 7.613-3.852-3.852-8.93 8.887-1.516 5.41 5.41-1.515 8.888-8.93Zm-.636-8.934a2.28 2.28 0 0 1 2.512.505l2.702 2.717.002.002a2.278 2.278 0 0 1 0 3.234l-.002.002-12.541 12.602a.75.75 0 0 1-.33.193l-6.884 1.928a.75.75 0 0 1-.925-.924l1.928-6.885a.75.75 0 0 1 .193-.33l12.603-12.54a2.28 2.28 0 0 1 .742-.504Z' clip-rule='evenodd'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-enhance' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19 13h-2m0 0a4 4 0 0 1-4-4m4 4a4 4 0 0 0-4 4m0-8V7m0 2a4 4 0 0 1-4 4m-2 0h2m0 0a4 4 0 0 1 4 4m0 0v2M8 8.5H6.5m0 0a2 2 0 0 1-2-2m2 2a2 2 0 0 0-2 2m0-4V5m0 1.5a2 2 0 0 1-2 2M1 8.5h1.5m0 0a2 2 0 0 1 2 2m0 0V12M12 3h-1m0 0a1 1 0 0 1-1-1m1 1a1 1 0 0 0-1 1m0-2V1m0 1a1 1 0 0 1-1 1M8 3h1m0 0a1 1 0 0 1 1 1m0 0v1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-exposure' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M10 20v-3M2.93 2.929 5.05 5.05M0 10h3m-.07 7.071 2.12-2.121M10 0v3m7.07 14.071-2.12-2.121M20 10h-3m.07-7.071L14.95 5.05M5 10a5 5 0 1 0 10 0 5 5 0 1 0-10 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-filters' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M4.5 6.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m-3.5 6a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0m7 0a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-flip' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M19.6 5 18 3.5 16.4 5m3.2 10L18 16.5 16.4 15M18 3.523v12.954M3.3 8.5h10.654c.301 0 .415-.395.159-.554L3.459 1.286A.3.3 0 0 0 3 1.542V8.2a.3.3 0 0 0 .3.3zm0 3h10.654c.301 0 .415.395.159.554l-10.654 6.66A.3.3 0 0 1 3 18.458v-6.66a.3.3 0 0 1 .3-.3z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-gamma' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M17 3C9 6 2.5 11.5 2.5 17.5m0 0h1m-1 0v-1m14 1h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3 0h1m-3-14v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1m0 3v-1'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-mirror' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M5 .4 3.5 2 5 3.6M15 .4 16.5 2 15 3.6M3.52 2h12.957M8.5 16.7V6.046c0-.301-.394-.415-.554-.159L1.287 16.541a.3.3 0 0 0 .255.459H8.2a.3.3 0 0 0 .3-.3zm3 0V6.046c0-.301.395-.415.555-.159l6.659 10.654a.3.3 0 0 1-.255.459H11.8a.3.3 0 0 1-.3-.3z'/></symbol><symbol viewBox='0 0 40 40' id='uc-icon-original' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.5' d='M0 40 40 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-rotate' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M13.5.4 12 2l1.5 1.6M12.023 2H14.4A3.6 3.6 0 0 1 18 5.6V8M4 17h9a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-sad' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M2 17c4.418-4 11.582-4 16 0M16.5 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-11 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-saturation' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='puc-icon-id__a' x1='10.001' y1='1' x2='10.001' y2='19' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs><circle cx='10.001' cy='10' r='9' transform='rotate(90 10 10)' fill='url(#puc-icon-id__a)'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-slider' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M0 10h11m0 0a2 2 0 1 0 4 0m-4 0a2 2 0 1 1 4 0m0 0h5'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-tuning' xmlns='http://www.w3.org/2000/svg'><path stroke-linejoin='round' fill='none' stroke='currentColor' stroke-width='1.2' d='M8 10h11M1 10h4M1 4.5h11m3 0h4m-18 11h11m3 0h4m-7-11a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M5 10a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0m7 5.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/></symbol><symbol viewBox='0 0 20 20' id='uc-icon-vibrance' xmlns='http://www.w3.org/2000/svg'><path d='M2.125 5.64A8.96 8.96 0 0 0 1.001 10a8.96 8.96 0 0 0 1.124 4.36V5.64z' fill='url(#suc-icon-id__a)'/><path d='M2.875 15.499V4.502a9.053 9.053 0 0 1 1.75-1.72v14.437a9.05 9.05 0 0 1-1.75-1.72z' fill='url(#suc-icon-id__b)'/><path d='M5.375 17.722c.548.33 1.134.601 1.75.809V1.469a8.956 8.956 0 0 0-1.75.81v15.443z' fill='url(#suc-icon-id__c)'/><path d='M7.875 1.253v17.495c.564.136 1.15.22 1.75.244V1.008a9 9 0 0 0-1.75.245z' fill='url(#suc-icon-id__d)'/><path d='M10.375 1.008v17.984a9 9 0 0 0 1.75-.244V1.252a9 9 0 0 0-1.75-.244z' fill='url(#suc-icon-id__e)'/><path d='M12.875 1.469V18.53a8.957 8.957 0 0 0 1.75-.808V2.277a8.957 8.957 0 0 0-1.75-.808z' fill='url(#suc-icon-id__f)'/><path d='M15.375 2.78v14.44a9.053 9.053 0 0 0 1.75-1.72v-11a9.054 9.054 0 0 0-1.75-1.72z' fill='url(#suc-icon-id__g)'/><path d='M17.875 5.638v8.724A8.959 8.959 0 0 0 19.001 10a8.96 8.96 0 0 0-1.126-4.362z' fill='url(#suc-icon-id__h)'/><defs><linearGradient id='suc-icon-id__a' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__b' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__c' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__d' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__e' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__f' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__g' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient><linearGradient id='suc-icon-id__h' x1='19.001' y1='10' x2='1.001' y2='10' gradientUnits='userSpaceOnUse'><stop stop-color='#DE15FF'/><stop offset='.203' stop-color='#0029FF'/><stop offset='.479' stop-color='#2AE4F0'/><stop offset='.604' stop-color='#15EF11'/><stop offset='.75' stop-color='#FAE528'/><stop offset='1' stop-color='#EB2A2A'/></linearGradient></defs></symbol><symbol viewBox='0 0 20 20' id='uc-icon-warmth' xmlns='http://www.w3.org/2000/svg'><path d='m7.5 13.05.429.42.171-.175v-.244h-.6zm5 0h-.6v.245l.172.175.428-.42zM8.1 3.5c0-1.05.85-1.9 1.9-1.9V.4a3.1 3.1 0 0 0-3.1 3.1h1.2zm0 9.55V3.5H6.9v9.55h1.2zm-1 2.45c0-.79.315-1.506.829-2.03l-.858-.84A4.088 4.088 0 0 0 5.9 15.5h1.2zm2.9 2.9a2.9 2.9 0 0 1-2.9-2.9H5.9a4.1 4.1 0 0 0 4.1 4.1v-1.2zm2.9-2.9a2.9 2.9 0 0 1-2.9 2.9v1.2a4.1 4.1 0 0 0 4.1-4.1h-1.2zm-.829-2.03c.514.524.829 1.24.829 2.03h1.2c0-1.117-.447-2.13-1.171-2.87l-.858.84zM11.9 3.5v9.55h1.2V3.5h-1.2zM10 1.6c1.05 0 1.9.85 1.9 1.9h1.2A3.1 3.1 0 0 0 10 .4v1.2z' fill='currentColor'/><path d='M10 14V8' stroke='currentColor' stroke-width='1.2' stroke-linecap='round'/><path d='M14 3h3m-3 3h3m-3 3h3m-8 6.5a1 1 0 1 0 2 0 1 1 0 1 0-2 0' stroke='currentColor' stroke-width='1.2'/></symbol></svg>
   <div class="uc-wrapper uc-wrapper_desktop">
-    <uc-presence-toggle class="uc-network_problems_splash" bind="visible: presence.networkProblems;">
+    <uc-presence-toggle class="uc-network_problems_splash" set="visible: presence.networkProblems;">
       <div class="uc-network_problems_content">
         <div class="uc-network_problems_icon">
           <uc-icon name="sad"></uc-icon>
@@ -253,7 +237,7 @@ export const CloudImageEditorBlock = class {
         <div class="uc-network_problems_text">Network error</div>
       </div>
       <div class="uc-network_problems_footer">
-        <uc-btn-ui theme="primary" text="Retry" bind="onclick: *on.retryNetwork"></uc-btn-ui>
+        <uc-btn-ui theme="primary" text="Retry" set="onclick: *on.retryNetwork"></uc-btn-ui>
       </div>
     </uc-presence-toggle>
     <div class="uc-viewport">
@@ -268,7 +252,7 @@ export const CloudImageEditorBlock = class {
       <div class="uc-info_pan">{{msg}}</div>
     </div>
     <div class="uc-toolbar">
-      <uc-line-loader-ui bind="active: showLoader"></uc-line-loader-ui>
+      <uc-line-loader-ui set="active: showLoader"></uc-line-loader-ui>
       <div class="uc-toolbar_content uc-toolbar_content__editor">
         <uc-editor-toolbar></uc-editor-toolbar>
       </div>
@@ -279,8 +263,6 @@ export const CloudImageEditorBlock = class {
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const Config = class {
   static observedAttributes = [
@@ -372,8 +354,6 @@ export const Config = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const Copyright = class {
   static template = `
@@ -388,19 +368,16 @@ export const Copyright = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const CropFrame = class {
-  static template = `<svg class="uc-svg" ref="svg-el" xmlns="http://www.w3.org/2000/svg"></svg>`;
+  static template = ` <svg class="uc-svg" ref="svg-el" xmlns="http://www.w3.org/2000/svg"></svg> `;
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const Data = class {
+  static warn = () => {};
   static registerCtx = () => {};
   static deleteCtx = () => {};
   static getCtx = () => {};
@@ -420,8 +397,8 @@ export const DropArea = class {
   static template = `
   <slot>
     <div data-default-slot hidden></div>
-    <div ref="content-wrapper" class="uc-content-wrapper" bind="@hidden: !isVisible">
-      <div class="uc-icon-container" bind="@hidden: !withIcon">
+    <div ref="content-wrapper" class="uc-content-wrapper" set="@hidden: !isVisible">
+      <div class="uc-icon-container" set="@hidden: !withIcon">
         <uc-icon name="default"></uc-icon>
         <uc-icon name="arrow-down"></uc-icon>
       </div>
@@ -479,13 +456,11 @@ export const DropArea = class {
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const EditorCropButtonControl = class {
   static template = `
   <button type="button" role="option">
-    <uc-icon bind="@name: icon;"></uc-icon>
+    <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>
 `;
@@ -493,13 +468,11 @@ export const EditorCropButtonControl = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const EditorFilterControl = class {
   static template = `
   <button type="button" role="option">
-    <uc-icon bind="@name: icon;"></uc-icon>
+    <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>
 `;
@@ -507,8 +480,6 @@ export const EditorFilterControl = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const EditorImageCropper = class {
   static template = `
@@ -519,21 +490,17 @@ export const EditorImageCropper = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const EditorImageFader = class {
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const EditorOperationControl = class {
   static template = `
   <button type="button" role="option">
-    <uc-icon bind="@name: icon;"></uc-icon>
+    <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>
 `;
@@ -541,8 +508,6 @@ export const EditorOperationControl = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const EditorScroller = class {
   static template = ` <slot></slot> `;
@@ -550,26 +515,22 @@ export const EditorScroller = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const EditorSlider = class {
   static template = `
   <uc-slider-ui
     ref="slider-el"
-    bind="disabled: disabled; min: min; max: max; defaultValue: defaultValue; zero: zero; onInput: on.input;"
+    set="disabled: disabled; min: min; max: max; defaultValue: defaultValue; zero: zero; onInput: on.input;"
   ></uc-slider-ui>
 `;
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const EditorToolbar = class {
   static template = `
-  <uc-line-loader-ui bind="active: showLoader"></uc-line-loader-ui>
+  <uc-line-loader-ui set="active: showLoader"></uc-line-loader-ui>
   <div class="uc-info-tooltip_container">
     <div class="uc-info-tooltip_wrapper">
       <div ref="tooltip-el" class="uc-info-tooltip uc-info-tooltip_hidden">{{*operationTooltip}}</div>
@@ -579,13 +540,13 @@ export const EditorToolbar = class {
     <uc-presence-toggle
       role="tablist"
       class="uc-sub-toolbar"
-      bind="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles"
+      set="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles"
     >
       <div class="uc-tab-content-row">
     <uc-presence-toggle
       id="tab_crop"
       class="uc-tab-content"
-      bind="visible: presence.tabContent.crop; styles: presence.tabContentStyles"
+      set="visible: presence.tabContent.crop; styles: presence.tabContentStyles"
     >
       <uc-editor-scroller hidden-scrollbar>
         <div class="uc-controls-list_align">
@@ -602,7 +563,7 @@ export const EditorToolbar = class {
     <uc-presence-toggle
       id="tab_tuning"
       class="uc-tab-content"
-      bind="visible: presence.tabContent.tuning; styles: presence.tabContentStyles"
+      set="visible: presence.tabContent.tuning; styles: presence.tabContentStyles"
     >
       <uc-editor-scroller hidden-scrollbar>
         <div class="uc-controls-list_align">
@@ -619,7 +580,7 @@ export const EditorToolbar = class {
     <uc-presence-toggle
       id="tab_filters"
       class="uc-tab-content"
-      bind="visible: presence.tabContent.filters; styles: presence.tabContentStyles"
+      set="visible: presence.tabContent.filters; styles: presence.tabContentStyles"
     >
       <uc-editor-scroller hidden-scrollbar>
         <div class="uc-controls-list_align">
@@ -636,67 +597,67 @@ export const EditorToolbar = class {
       <div class="uc-controls-row">
         <uc-presence-toggle
           class="uc-tab-toggles"
-          bind="visible: presence.tabToggles; styles: presence.tabTogglesStyles"
+          set="visible: presence.tabToggles; styles: presence.tabTogglesStyles"
         >
           <div ref="tabs-indicator" class="uc-tab-toggles_indicator"></div>
           
     <uc-presence-toggle
       class="uc-tab-toggle"
-      bind="visible: presence.tabToggle.crop; styles: presence.tabToggleStyles;"
+      set="visible: presence.tabToggle.crop; styles: presence.tabToggleStyles;"
     >
       <uc-btn-ui
         theme="tab"
         ref="tab-toggle-crop"
         data-id="crop"
         icon="crop"
-        bind="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_crop"
+        set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_crop"
       >
       </uc-btn-ui>
     </uc-presence-toggle>
   
     <uc-presence-toggle
       class="uc-tab-toggle"
-      bind="visible: presence.tabToggle.tuning; styles: presence.tabToggleStyles;"
+      set="visible: presence.tabToggle.tuning; styles: presence.tabToggleStyles;"
     >
       <uc-btn-ui
         theme="tab"
         ref="tab-toggle-tuning"
         data-id="tuning"
         icon="tuning"
-        bind="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_tuning"
+        set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_tuning"
       >
       </uc-btn-ui>
     </uc-presence-toggle>
   
     <uc-presence-toggle
       class="uc-tab-toggle"
-      bind="visible: presence.tabToggle.filters; styles: presence.tabToggleStyles;"
+      set="visible: presence.tabToggle.filters; styles: presence.tabToggleStyles;"
     >
       <uc-btn-ui
         theme="tab"
         ref="tab-toggle-filters"
         data-id="filters"
         icon="filters"
-        bind="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_filters"
+        set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_filters"
       >
       </uc-btn-ui>
     </uc-presence-toggle>
   
         </uc-presence-toggle>
-        <uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" bind="onclick: on.cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary-icon" icon="done" bind="onclick: on.apply"> </uc-btn-ui>
+        <uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </uc-btn-ui>
+        <uc-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </uc-btn-ui>
       </div>
     </uc-presence-toggle>
     <uc-presence-toggle
       class="uc-sub-toolbar"
-      bind="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles"
+      set="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles"
     >
       <div class="uc-slider">
         <uc-editor-slider ref="slider-el"></uc-editor-slider>
       </div>
       <div class="uc-controls-row">
-        <uc-btn-ui theme="secondary" bind="onclick: on.cancelSlider;" l10n="@text:cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary" bind="onclick: on.applySlider;" l10n="@text:apply"> </uc-btn-ui>
+        <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </uc-btn-ui>
+        <uc-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </uc-btn-ui>
       </div>
     </uc-presence-toggle>
   </div>
@@ -705,33 +666,31 @@ export const EditorToolbar = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const ExternalSource = class {
   static template = `
   <uc-activity-header>
-    <button type="button" class="uc-mini-btn" bind="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <uc-icon name="back"></uc-icon>
     </button>
     <div>
-      <uc-icon bind="@name: activityIcon"></uc-icon>
+      <uc-icon set="@name: activityIcon"></uc-icon>
       <span>{{activityCaption}}</span>
     </div>
-    <button type="button" class="uc-mini-btn uc-close-btn" bind="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *historyBack">
       <uc-icon name="close"></uc-icon>
     </button>
   </uc-activity-header>
   <div class="uc-content">
     <div ref="iframeWrapper" class="uc-iframe-wrapper"></div>
     <div class="uc-toolbar">
-      <button type="button" class="uc-cancel-btn uc-secondary-btn" bind="onclick: onCancel" l10n="cancel"></button>
+      <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel" l10n="cancel"></button>
       <div></div>
-      <div bind="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
+      <div set="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
       <button
         type="button"
         class="uc-done-btn uc-primary-btn"
-        bind="onclick: onDone; @disabled: !counter"
+        set="onclick: onDone; @disabled: !counter"
         l10n="done"
       ></button>
     </div>
@@ -781,27 +740,25 @@ export const ExternalSource = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const FileItem = class {
   static template = `
-  <div class="uc-inner" bind="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <div class="uc-thumb" bind="style.backgroundImage: thumbUrl">
+  <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
+    <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
       <div class="uc-badge">
-        <uc-icon bind="@name: badgeIcon"></uc-icon>
+        <uc-icon set="@name: badgeIcon"></uc-icon>
       </div>
     </div>
     <div class="uc-file-name-wrapper">
-      <span class="uc-file-name" bind="@title: itemName">{{itemName}}</span>
-      <span class="uc-file-error" bind="@hidden: !errorText">{{errorText}}</span>
+      <span class="uc-file-name" set="@title: itemName">{{itemName}}</span>
+      <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
     </div>
     <div class="uc-file-actions">
       <button
         type="button"
         l10n="@title:file-item-edit-button"
         class="uc-edit-btn uc-mini-btn"
-        bind="onclick: onEdit; @hidden: !isEditable"
+        set="onclick: onEdit; @hidden: !isEditable"
       >
         <uc-icon name="edit-file"></uc-icon>
       </button>
@@ -809,15 +766,15 @@ export const FileItem = class {
         type="button"
         l10n="@title:file-item-remove-button"
         class="uc-remove-btn uc-mini-btn"
-        bind="onclick: onRemove;"
+        set="onclick: onRemove;"
       >
         <uc-icon name="remove-file"></uc-icon>
       </button>
-      <button type="button" class="uc-upload-btn uc-mini-btn" bind="onclick: onUpload;">
+      <button type="button" class="uc-upload-btn uc-mini-btn" set="onclick: onUpload;">
         <uc-icon name="upload"></uc-icon>
       </button>
     </div>
-    <uc-progress-bar class="uc-progress-bar" bind="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
+    <uc-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
   </div>
 `;
   static activeInstances = {};
@@ -865,24 +822,18 @@ export const FileItem = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const FileUploaderInline = class {
   static styleAttrs = [];
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const FileUploaderMinimal = class {
   static styleAttrs = [];
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const FileUploaderRegular = class {
   static styleAttrs = [];
@@ -890,8 +841,6 @@ export const FileUploaderRegular = class {
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const FormInput = class {
   static extSrcList = {
@@ -938,22 +887,19 @@ export const FormInput = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const Icon = class {
   static template = `
   <svg ref="svg" xmlns="http://www.w3.org/2000/svg">
-    <use bind="@href: href;"></use>
+    <title>{{title}}</title>
+    <use set="@href: href;"></use>
   </svg>
 `;
-  static observedAttributes = ["name"];
+  static observedAttributes = ["name", "title"];
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const Img = class {
   static observedAttributes = [
@@ -979,8 +925,6 @@ export const Img = class {
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const LineLoaderUi = class {
   static template = `
@@ -992,8 +936,6 @@ export const LineLoaderUi = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const Modal = class {
   static styleAttrs = [];
@@ -1006,19 +948,15 @@ export const Modal = class {
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const PACKAGE_NAME = `blocks`;
-export const PACKAGE_VERSION = `1.2.0`;
+export const PACKAGE_VERSION = `1.3.0`;
 export const PresenceToggle = class {
-  static template = ` <slot></slot> `;
+  static template = `<slot></slot> `;
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const ProgressBar = class {
   static template = ` <div ref="line" class="uc-progress"></div> `;
@@ -1026,11 +964,9 @@ export const ProgressBar = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const ProgressBarCommon = class {
-  static template = ` <uc-progress-bar bind="visible: visible; value: value"></uc-progress-bar> `;
+  static template = ` <uc-progress-bar set="visible: visible; value: value"></uc-progress-bar> `;
   static extSrcList = {
     FACEBOOK: "facebook",
     DROPBOX: "dropbox",
@@ -1075,38 +1011,19 @@ export const ProgressBarCommon = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
-};
-export const PubSub = class {
-  static registerCtx = () => {};
-  static deleteCtx = () => {};
-  static getCtx = () => {};
-  static globalStore = {};
-  static apply = () => {};
-  static bind = () => {};
-  static call = () => {};
-  static toString = () => {};
-  static hasOwnProperty = () => {};
-  static isPrototypeOf = () => {};
-  static propertyIsEnumerable = () => {};
-  static valueOf = () => {};
-  static toLocaleString = () => {};
 };
 export const Select = class {
-  static template = ` <select ref="select" bind="innerHTML: selectHtml; onchange: onSelect"></select> `;
+  static template = ` <select ref="select" set="innerHTML: selectHtml; onchange: onSelect"></select> `;
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const SimpleBtn = class {
   static styleAttrs = [];
   static template = `
-  <uc-drop-area bind="@disabled: !withDropZone">
-    <button type="button" bind="onclick: onClick">
+  <uc-drop-area set="@disabled: !withDropZone">
+    <button type="button" set="onclick: onClick">
       <uc-icon name="upload"></uc-icon>
       <span l10n="button-text"></span>
       <slot></slot>
@@ -1158,8 +1075,6 @@ export const SimpleBtn = class {
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const SliderUi = class {
   static template = `
@@ -1169,28 +1084,24 @@ export const SliderUi = class {
     class="uc-input"
     type="range"
     ref="input-el"
-    bind="oninput: on.sliderInput; onchange: on.sliderChange; @min: min; @max: max; @value: defaultValue;"
+    set="oninput: on.sliderInput; onchange: on.sliderChange; @min: min; @max: max; @value: defaultValue;"
   />
 `;
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const SolutionBlock = class {
   static styleAttrs = [];
   static reg = () => {};
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const SourceBtn = class {
   static template = `
   <button type="button">
-    <uc-icon bind="@name: iconName"></uc-icon>
+    <uc-icon set="@name: iconName"></uc-icon>
     <div class="uc-txt" l10n="src-type"></div>
   </button>
 `;
@@ -1239,16 +1150,12 @@ export const SourceBtn = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const SourceList = class {
   static reg = () => {};
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const StartFrom = class {
   static template = ` <div class="uc-content"><slot></slot></div> `;
@@ -1266,15 +1173,6 @@ export const StartFrom = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
-};
-export const Symbiote = class {
-  static reg = () => {};
-  static is = `sym-1`;
-  static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const UID = class {
   static generate = () => {};
@@ -1353,46 +1251,44 @@ export const UploadCtxProvider = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const UploadList = class {
   static template = `
   <uc-activity-header>
     <span class="uc-header-text">{{headerText}}</span>
-    <button type="button" class="uc-mini-btn uc-close-btn" bind="onclick: *closeModal">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
       <uc-icon name="close"></uc-icon>
     </button>
   </uc-activity-header>
 
-  <div class="uc-no-files" bind="@hidden: hasFiles">
+  <div class="uc-no-files" set="@hidden: hasFiles">
     <slot name="empty"><span l10n="no-files"></span></slot>
   </div>
 
-  <div class="uc-files" itemize="*uploadList" item-tag="uc-file-item"></div>
+  <div class="uc-files" repeat="*uploadList" repeat-item-tag="uc-file-item"></div>
 
-  <div class="uc-common-error" bind="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
+  <div class="uc-common-error" set="@hidden: !commonErrorMessage; textContent: commonErrorMessage;"></div>
 
   <div class="uc-toolbar">
-    <button type="button" class="uc-cancel-btn uc-secondary-btn" bind="onclick: onCancel;" l10n="clear"></button>
+    <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel;" l10n="clear"></button>
     <div class="uc-toolbar-spacer"></div>
     <button
       type="button"
       class="uc-add-more-btn uc-secondary-btn"
-      bind="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
+      set="onclick: onAdd; @disabled: !addMoreBtnEnabled; @hidden: !addMoreBtnVisible"
     >
       <uc-icon name="add"></uc-icon><span l10n="add-more"></span>
     </button>
     <button
       type="button"
       class="uc-upload-btn uc-primary-btn"
-      bind="@hidden: !uploadBtnVisible; onclick: onUpload;"
+      set="@hidden: !uploadBtnVisible; onclick: onUpload;"
       l10n="upload"
     ></button>
     <button
       type="button"
       class="uc-done-btn uc-primary-btn"
-      bind="@hidden: !doneBtnVisible; onclick: onDone;  @disabled: !doneBtnEnabled"
+      set="@hidden: !doneBtnVisible; onclick: onDone;  @disabled: !doneBtnEnabled"
       l10n="done"
     ></button>
   </div>
@@ -1443,8 +1339,6 @@ export const UploadList = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const UploaderBlock = class {
   static extSrcList = {
@@ -1491,29 +1385,27 @@ export const UploaderBlock = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const UrlSource = class {
   static template = `
   <uc-activity-header>
-    <button type="button" class="uc-mini-btn" bind="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <uc-icon name="back"></uc-icon>
     </button>
     <div>
       <uc-icon name="url"></uc-icon>
       <span l10n="caption-from-url"></span>
     </div>
-    <button type="button" class="uc-mini-btn uc-close-btn" bind="onclick: *closeModal">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
       <uc-icon name="close"></uc-icon>
     </button>
   </uc-activity-header>
   <form class="uc-content">
-    <input placeholder="https://" class="uc-url-input" type="text" ref="input" bind="oninput: onInput" />
+    <input placeholder="https://" class="uc-url-input" type="text" ref="input" set="oninput: onInput" />
     <button
       type="submit"
       class="uc-url-upload-btn uc-primary-btn"
-      bind="onclick: onUpload; @disabled: importDisabled"
+      set="onclick: onUpload; @disabled: importDisabled"
       l10n="upload-url"
     ></button>
   </form>
@@ -1562,11 +1454,8 @@ export const UrlSource = class {
   static styleAttrs = [];
   static is = `sym-1`;
   static bindAttributes = () => {};
-  static addRootStyles = () => {};
-  static addShadowStyles = () => {};
 };
 export const defineComponents = () => {};
 export const defineLocale = () => {};
-export const html = () => {};
 export const loadFileUploaderFrom = () => {};
 export const toKebabCase = () => {};