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

package/blocks/ExternalSource/ExternalSource.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import { create, html } from '@symbiotejs/symbiote';
+import { create } from '@symbiotejs/symbiote';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { stringToArray } from '../../utils/stringToArray.js';
@@ -87,7 +87,7 @@ export class ExternalSource extends UploaderBlock {
         this.mountIframe();
       },
     });
-    this.sub('*currentActivityParams', () => {
+    this.sub('*currentActivityParams', (val) => {
       if (!this.isActivityActive) {
         return;
       }
@@ -238,29 +238,29 @@ export class ExternalSource extends UploaderBlock {
   }
 }
 
-ExternalSource.template = html`
+ExternalSource.template = /* HTML */ `
   <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>

package/blocks/ExternalSource/buildStyles.js

@@ -7,9 +7,9 @@
 const styleToCss = (style) => {
   const css = Object.keys(style).reduce((acc, selector) => {
     const propertiesObj = style[selector];
-    const propertiesStr = Object.keys(propertiesObj).reduce((innerAcc, prop) => {
+    const propertiesStr = Object.keys(propertiesObj).reduce((acc, prop) => {
       const value = propertiesObj[prop];
-      return innerAcc + `${prop}: ${value};`;
+      return acc + `${prop}: ${value};`;
     }, '');
     return acc + `${selector}{${propertiesStr}}`;
   }, '');

package/blocks/ExternalSource/query-string.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-string.d.ts","sourceRoot":"","sources":["query-string.js"],"names":[],"mappings":"AAAA;;;GAGG;AACH,oCAHW;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;CAAE,GAC7D,MAAM,CAWlB"}
+{"version":3,"file":"query-string.d.ts","sourceRoot":"","sources":["query-string.js"],"names":[],"mappings":"AAAA;;;GAGG;AACH;;IAFa,MAAM,CAWlB"}

package/blocks/FileItem/FileItem.d.ts

@@ -35,10 +35,10 @@ export class FileItem extends UploaderBlock {
         '*uploadList': never[];
         '*focusedEntry': null;
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': import("../../index.js").OutputErrorCollection[];
-        '*collectionState': import("../../index.js").OutputCollectionState | null;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
-        '*uploadTrigger': Set<string>;
+        '*uploadTrigger': Set<string>; /** @private */
         '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
         '*currentActivity': null;
         '*currentActivityParams': {};

package/blocks/FileItem/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAmBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;oCA/B+B,gBAC5B;mCAGS,gBAGd;6BAEY,2BAEG;;wCAON,wCACS;;;;;;MA2Cf;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;OAGG;IACH,uBAkDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,OAAO,aAAa,EAAE,MAAM,OAAO,aAAa,CAAC,QAsB7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAqFC;CACF;;;;;8BAla6B,iCAAiC;AAO/D;;;;;GAKG"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAkBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;;uCAXF,eAAe;;;;;;;MA0CZ;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;OAGG;IACH,uBAkDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QAsB7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAqFC;CACF;;;;;8BAla6B,iCAAiC;AAO/D;;;;;GAKG"}

package/blocks/FileItem/FileItem.js

@@ -1,5 +1,4 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
 import { CancelError, uploadFile } from '@uploadcare/upload-client';
 import { shrinkFile } from '@uploadcare/image-shrink';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
@@ -294,7 +293,7 @@ export class FileItem extends UploaderBlock {
       isFinished: state === FileItemState.FINISHED,
       progressVisible: state === FileItemState.UPLOADING,
       isEditable: this.cfg.useCloudImageEditor && this._entry?.getValue('isImage') && this._entry?.getValue('cdnUrl'),
-      errorText: this._entry.getValue('errors')?.[0]?.message ?? '',
+      errorText: this._entry.getValue('errors')?.[0]?.message,
     });
   }
 
@@ -423,23 +422,23 @@ export class FileItem extends UploaderBlock {
   }
 }
 
-FileItem.template = html`
-  <div class="uc-inner" bind="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <div class="uc-thumb" bind="style.backgroundImage: thumbUrl">
+FileItem.template = /* HTML */ `
+  <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>
@@ -447,15 +446,15 @@ FileItem.template = html`
         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>
 `;
 FileItem.activeInstances = new Set();

package/blocks/Icon/Icon.d.ts

@@ -2,6 +2,7 @@ export class Icon extends Block {
     init$: {
         name: string;
         href: string;
+        title: string;
     };
 }
 export namespace Icon {

package/blocks/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["Icon.js"],"names":[],"mappings":"AAIA;IAII;;;MAIC;CAmBJ;;;;sBA7BqB,yBAAyB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["Icon.js"],"names":[],"mappings":"AAGA;IAII;;;;MAKC;CAmBJ;;;;sBA9BqB,yBAAyB"}

package/blocks/Icon/Icon.js

@@ -1,5 +1,4 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
 import { Block } from '../../abstract/Block.js';
 
 export class Icon extends Block {
@@ -10,6 +9,7 @@ export class Icon extends Block {
       ...this.init$,
       name: '',
       href: '',
+      title: '',
     };
   }
 
@@ -31,12 +31,14 @@ export class Icon extends Block {
   }
 }
 
-Icon.template = html`
+Icon.template = /* HTML */ `
   <svg ref="svg" xmlns="http://www.w3.org/2000/svg">
-    <use bind="@href: href;"></use>
+    <title>{{title}}</title>
+    <use set="@href: href;"></use>
   </svg>
 `;
 
 Icon.bindAttributes({
   name: 'name',
+  title: 'title',
 });

package/blocks/Img/ImgBase.js

@@ -103,8 +103,8 @@ export class ImgBase extends ImgConfig {
         createCdnUrl(
           //
           createOriginalUrl(this.$$('cdn-cname'), this.$$('uuid')),
-          cdnModifiers,
-        ),
+          cdnModifiers
+        )
       );
     }
 
@@ -114,8 +114,8 @@ export class ImgBase extends ImgConfig {
         createCdnUrl(
           //
           createOriginalUrl(this.$$('cdn-cname'), this.$$('uuid')),
-          cdnModifiers,
-        ),
+          cdnModifiers
+        )
       );
     }
 
@@ -126,8 +126,8 @@ export class ImgBase extends ImgConfig {
           //
           this.$$('proxy-cname'),
           cdnModifiers,
-          this._fmtAbs(this.$$('src')),
-        ),
+          this._fmtAbs(this.$$('src'))
+        )
       );
     }
 
@@ -138,8 +138,8 @@ export class ImgBase extends ImgConfig {
           //
           `https://${this.$$('pubkey')}.ucr.io/`,
           cdnModifiers,
-          this._fmtAbs(this.$$('src')),
-        ),
+          this._fmtAbs(this.$$('src'))
+        )
       );
     }
   }
@@ -157,7 +157,7 @@ export class ImgBase extends ImgConfig {
     return applyTemplateData(
       this.$$('secure-delivery-proxy'),
       { previewUrl: url },
-      { transform: (value) => window.encodeURIComponent(value) },
+      { transform: (value) => window.encodeURIComponent(value) }
     );
   }
 

package/blocks/Img/ImgConfig.d.ts

@@ -1,4 +1,4 @@
-export class ImgConfig extends Symbiote<any> {
+export class ImgConfig extends BaseComponent<any> {
     static get observedAttributes(): string[];
     constructor();
     cssInit$: any;
@@ -27,5 +27,5 @@ export class ImgConfig extends Symbiote<any> {
     private _observed;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
 }
-import { Symbiote } from '@symbiotejs/symbiote';
+import { BaseComponent } from '@symbiotejs/symbiote';
 //# sourceMappingURL=ImgConfig.d.ts.map

package/blocks/Img/ImgConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImgConfig.d.ts","sourceRoot":"","sources":["ImgConfig.js"],"names":[],"mappings":"AAUA;IAkFE,0CAEC;;IAnFD,cAAqB;IAErB;;;OAGG;IACH,iBAFa,GAAG,CAIf;IAED,qDAAqD;IACrD,wBAIC;IAED;;;OAGG;IACH,yBAFW,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,QAW5B;IAED,0BAEC;IAED,8BAMC;IAED;;;OAGG;IACH,qBAHW,WAAW,SACX,MAAM,IAAI,QAsBpB;IAfC,eAAe;IACf,qBAOQ;IAGN,eAAe;IACf,kBAA0B;IAoB9B,oEAIC;CACF;yBArGgC,sBAAsB"}
+{"version":3,"file":"ImgConfig.d.ts","sourceRoot":"","sources":["ImgConfig.js"],"names":[],"mappings":"AAUA;IAkFE,0CAEC;IAlDgD,cACjD;IAlCA,cAAqB;IAErB;;;OAGG;IACH,iBAFa,GAAG,CAIf;IAED,qDAAqD;IACrD,wBAIC;IAED;;;OAGG;IACH,+BAFiB,GAAG,KAAK,IAAI,QAW5B;IAED,0BAEC;IAED,8BAMC;IAED;;;OAGG;IACH,qBAHW,WAAW,SACX,MAAM,IAAI,QAsBpB;IAfC,eAAe;IACf,qBAOQ;IAGN,eAAe;IACf,kBAA0B;IAoB9B,oEAIC;CACF;8BArGmC,sBAAsB"}

package/blocks/Img/ImgConfig.js

@@ -1,4 +1,4 @@
-import { Symbiote, PubSub } from '@symbiotejs/symbiote';
+import { BaseComponent, Data } from '@symbiotejs/symbiote';
 import { PROPS_MAP } from './props-map.js';
 import { CSS_PREF } from './configurations.js';
 import { PACKAGE_NAME, PACKAGE_VERSION } from '../../env.js';
@@ -8,7 +8,7 @@ for (let prop in PROPS_MAP) {
   CSS_PROPS[CSS_PREF + prop] = PROPS_MAP[prop]?.default || '';
 }
 
-export class ImgConfig extends Symbiote {
+export class ImgConfig extends BaseComponent {
   cssInit$ = CSS_PROPS;
 
   /**
@@ -87,7 +87,7 @@ export class ImgConfig extends Symbiote {
       });
       this._isnObserver = null;
     }
-    PubSub.deleteCtx(this);
+    Data.deleteCtx(this);
   }
 
   static get observedAttributes() {

package/blocks/Img/utils/parseObjectToString.js

@@ -1,6 +1,6 @@
 export const parseObjectToString = (params) =>
   Object.entries(params)
-    .filter(([, value]) => value !== undefined && value !== '')
+    .filter(([key, value]) => value !== undefined && value !== '')
     .map(([key, value]) => {
       if (key === 'cdn-operations') {
         return value;

package/blocks/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAIA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAEE;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAMC;IAED,aAMC;CAqDF;;;;sBA5GqB,yBAAyB"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAGA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAEE;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAMC;IAED,aAMC;CAqDF;;;;sBA5GqB,yBAAyB"}

package/blocks/Modal/Modal.js

@@ -1,5 +1,4 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
 import { Block } from '../../abstract/Block.js';
 
 export class Modal extends Block {
@@ -110,7 +109,7 @@ export class Modal extends Block {
   }
 }
 
-Modal.template = html`
+Modal.template = /* HTML */ `
   <dialog ref="dialog">
     <slot></slot>
   </dialog>

package/blocks/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAGA;IACE,qBAAqB;IACrB,eAAW;IAEX,WAIE;CAyBH;;;;sBAnCqB,yBAAyB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAEA;IACE,qBAAqB;IACrB,eAAW;IAEX,WAIE;CAyBH;;;;sBAnCqB,yBAAyB"}

package/blocks/ProgressBar/ProgressBar.js

@@ -1,4 +1,3 @@
-import { html } from '@symbiotejs/symbiote';
 import { Block } from '../../abstract/Block.js';
 
 export class ProgressBar extends Block {
@@ -36,4 +35,4 @@ export class ProgressBar extends Block {
   }
 }
 
-ProgressBar.template = html` <div ref="line" class="uc-progress"></div> `;
+ProgressBar.template = /* HTML */ ` <div ref="line" class="uc-progress"></div> `;

package/blocks/ProgressBarCommon/ProgressBarCommon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarCommon.d.ts","sourceRoot":"","sources":["ProgressBarCommon.js"],"names":[],"mappings":"AAGA;IACE,WAME;CAgCH;;;;8BAzC6B,iCAAiC"}
+{"version":3,"file":"ProgressBarCommon.d.ts","sourceRoot":"","sources":["ProgressBarCommon.js"],"names":[],"mappings":"AAEA;IACE,WAME;CAgCH;;;;8BAzC6B,iCAAiC"}

package/blocks/ProgressBarCommon/ProgressBarCommon.js

@@ -1,4 +1,3 @@
-import { html } from '@symbiotejs/symbiote';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 
 export class ProgressBarCommon extends UploaderBlock {
@@ -42,4 +41,4 @@ export class ProgressBarCommon extends UploaderBlock {
   }
 }
 
-ProgressBarCommon.template = html` <uc-progress-bar bind="visible: visible; value: value"></uc-progress-bar> `;
+ProgressBarCommon.template = /* HTML */ ` <uc-progress-bar set="visible: visible; value: value"></uc-progress-bar> `;

package/blocks/Range/Range.d.ts

@@ -0,0 +1,16 @@
+export class Range extends BaseComponent<any> {
+    constructor();
+    init$: {
+        cssLeft: string;
+        barActive: boolean;
+        value: number;
+        onChange: (e: any) => void;
+    };
+    /** @type {HTMLInputElement} */
+    _range: HTMLInputElement | undefined;
+}
+export namespace Range {
+    let template: string;
+}
+import { BaseComponent } from '@symbiotejs/symbiote';
+//# sourceMappingURL=Range.d.ts.map

package/blocks/Range/Range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["Range.js"],"names":[],"mappings":"AAEA;IAqC0C,cAAgB;IApCxD;;;;;MAUE;IAIA,+BAA+B;IAC/B,qCAA4B;CAe/B;;;;8BAjC6B,sBAAsB"}

package/blocks/Range/Range.js

@@ -0,0 +1,44 @@
+import { BaseComponent } from '@symbiotejs/symbiote';
+
+export class Range extends BaseComponent {
+  init$ = {
+    cssLeft: '50%',
+    barActive: false,
+    value: 50,
+    onChange: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.$.value = parseFloat(this._range.value);
+      this.dispatchEvent(new Event('change'));
+    },
+  };
+
+  initCallback() {
+    super.initCallback();
+    /** @type {HTMLInputElement} */
+    this._range = this.ref.range;
+    [...this.attributes].forEach((attr) => {
+      let exclude = ['style', 'ref'];
+      if (!exclude.includes(attr.name)) {
+        this.ref.range.setAttribute(attr.name, attr.value);
+      }
+    });
+    this.sub('value', (val) => {
+      let pcnt = (val / 100) * 100;
+      this.$.cssLeft = `${pcnt}%`;
+    });
+    this.defineAccessor('value', (val) => {
+      this.$.value = val;
+    });
+  }
+}
+
+Range.template = /* HTML */ `
+  <div class="uc-track-wrapper">
+    <div class="uc-track"></div>
+    <div class="uc-bar" set -style.width="cssLeft" -@active="barActive"></div>
+    <div class="uc-slider" set -style.left="cssLeft"></div>
+  </div>
+
+  <input type="range" ref="range" set -@value="value" -oninput="onChange" />
+`;

package/blocks/Range/range.css

@@ -0,0 +1,65 @@
+uc-range {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--uc-button-size);
+}
+
+uc-range datalist {
+  display: none;
+}
+
+uc-range input {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+uc-range .uc-track-wrapper {
+  position: absolute;
+  right: 10px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2px;
+  user-select: none;
+  pointer-events: none;
+}
+
+uc-range .uc-track {
+  position: absolute;
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2px;
+  background-color: currentColor;
+  border-radius: 2px;
+  opacity: 0.5;
+}
+
+uc-range .uc-slider {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: currentColor;
+  border-radius: 100%;
+  transform: translateX(-50%);
+}
+
+uc-range .uc-bar {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background-color: currentColor;
+  border-radius: 2px;
+}
+
+uc-range .uc-caption {
+  position: absolute;
+  display: inline-flex;
+  justify-content: center;
+}

package/blocks/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["Select.js"],"names":[],"mappings":"AAGA;IACE,WAeE;IAPE,WAAkC;CAyBvC;;;;sBApCqB,yBAAyB"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["Select.js"],"names":[],"mappings":"AAEA;IACE,WAeE;IAPE,WAAkC;CAqBvC;;;;sBAhCqB,yBAAyB"}

package/blocks/Select/Select.js

@@ -1,4 +1,3 @@
-import { html } from '@symbiotejs/symbiote';
 import { Block } from '../../abstract/Block.js';
 
 export class Select extends Block {
@@ -22,19 +21,15 @@ export class Select extends Block {
   initCallback() {
     super.initCallback();
 
-    this.defineAccessor(
-      'options',
-      /** @param {{ text: String; value: String }[]} options */
-      (options) => {
-        this.$.currentText = options?.[0]?.text || '';
-        let htmlCode = '';
-        options?.forEach((opt) => {
-          htmlCode += html`<option value="${opt.value}">${opt.text}</option>`;
-        });
-        this.$.selectHtml = htmlCode;
-      },
-    );
+    this.sub('options', (/** @type {{ text: String; value: String }[]} */ options) => {
+      this.$.currentText = options?.[0]?.text || '';
+      let html = '';
+      options?.forEach((opt) => {
+        html += /* HTML */ `<option value="${opt.value}">${opt.text}</option>`;
+      });
+      this.$.selectHtml = html;
+    });
   }
 }
 
-Select.template = html` <select ref="select" bind="innerHTML: selectHtml; onchange: onSelect"></select> `;
+Select.template = /* HTML */ ` <select ref="select" set="innerHTML: selectHtml; onchange: onSelect"></select> `;

package/blocks/SimpleBtn/SimpleBtn.d.ts

@@ -7,8 +7,8 @@ export class SimpleBtn extends UploaderBlock {
         '*uploadList': never[];
         '*focusedEntry': null;
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': import("../../index.js").OutputErrorCollection[];
-        '*collectionState': import("../../index.js").OutputCollectionState | null;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;

package/blocks/SimpleBtn/SimpleBtn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleBtn.d.ts","sourceRoot":"","sources":["SimpleBtn.js"],"names":[],"mappings":"AAKA;IAMI;;;;;;;;oCAiBgB,gBAAU;mCAGO,gBACpC;6BAGoB,2BAA2B;;wCAO5B,wCAA2B;;;;;;MAxB1C;CAoBJ;;;;8BApC6B,iCAAiC"}
+{"version":3,"file":"SimpleBtn.d.ts","sourceRoot":"","sources":["SimpleBtn.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;;;;MAOC;CAoBJ;;;;8BApC6B,iCAAiC"}

package/blocks/SimpleBtn/SimpleBtn.js

@@ -1,5 +1,4 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { asBoolean } from '../Config/normalizeConfigValue.js';
 
@@ -38,9 +37,9 @@ export class SimpleBtn extends UploaderBlock {
   }
 }
 
-SimpleBtn.template = html`
-  <uc-drop-area bind="@disabled: !withDropZone">
-    <button type="button" bind="onclick: onClick">
+SimpleBtn.template = /* HTML */ `
+  <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>

package/blocks/SourceBtn/SourceBtn.d.ts

@@ -23,8 +23,8 @@ export class SourceBtn extends UploaderBlock {
         '*uploadList': never[];
         '*focusedEntry': null;
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
-        '*collectionErrors': import("../../index.js").OutputErrorCollection[];
-        '*collectionState': import("../../index.js").OutputCollectionState | null;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
         '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
         '*uploadTrigger': Set<string>;
         '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;

package/blocks/SourceBtn/SourceBtn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AAOA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;;;;oCAAA,gBAAS;mCAIT,gBAEJ;6BAG0C,2BAE1C;;wCAK+B,wCAChB;;;;;;MAbV;IAGH,kBAuCC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAYC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBA9HY;IACZ,IAAQ,EAAE,MAAM,CAAC;IACjB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAY,CAAC,EAAE,MAAM,OAAO,CAAC;IAC7B,cAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;8BAZ0B,iCAAiC"}
+{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AAMA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;;;;;;;;;;;;;;MAIC;IAGH,kBAuCC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAYC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBA9HY;IACZ,IAAQ,EAAE,MAAM,CAAC;IACjB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAY,CAAC,EAAE,MAAM,OAAO,CAAC;IAC7B,cAAkB,CAAC,EAAE,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;8BAb0B,iCAAiC"}

package/blocks/SourceBtn/SourceBtn.js

@@ -1,7 +1,6 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
-import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 
 const L10N_PREFIX = 'src-type-';
 
@@ -133,9 +132,10 @@ export class SourceBtn extends UploaderBlock {
     };
   }
 }
-SourceBtn.template = html`
+
+SourceBtn.template = /* HTML */ `
   <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>
 `;

package/blocks/SourceList/SourceList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAIA;CAgBC;sBApBqB,yBAAyB"}
+{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAGA;CAgBC;sBAnBqB,yBAAyB"}

package/blocks/SourceList/SourceList.js

@@ -1,20 +1,19 @@
 import { Block } from '../../abstract/Block.js';
 import { stringToArray } from '../../utils/stringToArray.js';
-import { html } from '@symbiotejs/symbiote';
 
 export class SourceList extends Block {
   initCallback() {
     super.initCallback();
     this.subConfigValue('sourceList', (/** @type {String} */ val) => {
       let list = stringToArray(val);
-      let htmlContent = '';
+      let html = '';
       list.forEach((srcName) => {
-        htmlContent += html`<uc-source-btn type="${srcName}"></uc-source-btn>`;
+        html += /* HTML */ `<uc-source-btn type="${srcName}"></uc-source-btn>`;
       });
       if (this.cfg.sourceListWrap) {
-        this.innerHTML = htmlContent;
+        this.innerHTML = html;
       } else {
-        this.outerHTML = htmlContent;
+        this.outerHTML = html;
       }
     });
   }