@uploadcare/file-uploader 1.6.0-alpha.0 → 1.7.0

package/abstract/UploaderBlock.d.ts

@@ -100,8 +100,11 @@ export namespace UploaderBlock {
         ONEDRIVE: "onedrive";
         HUDDLE: "huddle";
         LOCAL: "local";
-        URL: "url";
+        DROP_AREA: "drop-area";
         CAMERA: "camera";
+        EXTERNAL: "external";
+        API: "js-api";
+        URL: "url";
         DRAW: "draw";
     }>;
 }

package/abstract/UploaderBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploaderBlock.d.ts","sourceRoot":"","sources":["UploaderBlock.js"],"names":[],"mappings":"AAkBA;IACE,iBAAiB;IACjB,mCAAwB;IAExB,eAAe;IACf,mBAAmB;IAEnB;;;;;;;;;;;;;;MAA+B;IAE/B,eAAe;IACf,0BAOC;IA2BD;;;OAGG;IACH,qDAKC;IAED,mCAAmC;IACnC,6BAKC;IAED,4BAEC;IAED,iCAAiC;IACjC,wCAKC;IAYD,eAAe;IACf,qBA0BC;IAvBC,eAAe;IACf,6BAAiG;IAEjG,eAAe;IACf,uCAEC;IAmBH;;;OAGG;IACH,qBAkBC;IAED,eAAe;IACf,0BAYQ;IAER;;;;OAIG;IACH,gCAiCE;IAEF;;;OAGG;IACH,0CAyFE;IAEF,eAAe;IACf,mCAoBE;IAEF,eAAe;IACf,uBAuCC;IAED;;;OAGG;IACH,kCAHW,MAAM,qEAWhB;IAED;;;OAGG;IACH,oCAHa,QAAQ,OAAO,2BAA2B,EAAE,eAAe,CAAC,CA2BxE;IAED,kEAAkE;IAClE,iBADc,OAAO,sBAAsB,EAAE,eAAe,EAAE,CAK7D;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BApa6B,oBAAoB;qCAWb,2BAA2B;kCAG9B,wBAAwB;kCADxB,wBAAwB;gCAD1B,sBAAsB"}
+{"version":3,"file":"UploaderBlock.d.ts","sourceRoot":"","sources":["UploaderBlock.js"],"names":[],"mappings":"AAmBA;IACE,iBAAiB;IACjB,mCAAwB;IAExB,eAAe;IACf,mBAAmB;IAEnB;;;;;;;;;;;;;;MAA+B;IAE/B,eAAe;IACf,0BAOC;IA2BD;;;OAGG;IACH,qDAKC;IAED,mCAAmC;IACnC,6BAKC;IAED,4BAEC;IAED,iCAAiC;IACjC,wCAKC;IAYD,eAAe;IACf,qBA0BC;IAvBC,eAAe;IACf,6BAAiG;IAEjG,eAAe;IACf,uCAEC;IAmBH;;;OAGG;IACH,qBAkBC;IAED,eAAe;IACf,0BAYQ;IAER;;;;OAIG;IACH,gCAiCE;IAEF;;;OAGG;IACH,0CAyFE;IAEF,eAAe;IACf,mCAoBE;IAEF,eAAe;IACf,uBAuCC;IAED;;;OAGG;IACH,kCAHW,MAAM,qEAWhB;IAED;;;OAGG;IACH,oCAHa,QAAQ,OAAO,2BAA2B,EAAE,eAAe,CAAC,CA2BxE;IAED,kEAAkE;IAClE,iBADc,OAAO,sBAAsB,EAAE,eAAe,EAAE,CAK7D;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAra6B,oBAAoB;qCAWb,2BAA2B;kCAG9B,wBAAwB;kCADxB,wBAAwB;gCAD1B,sBAAsB"}

package/abstract/UploaderBlock.js

@@ -15,6 +15,7 @@ import { TypedCollection } from './TypedCollection.js';
 import { UploaderPublicApi } from './UploaderPublicApi.js';
 import { ValidationManager } from './ValidationManager.js';
 import { uploadEntrySchema } from './uploadEntrySchema.js';
+import { ExternalUploadSource, UploadSource } from '../blocks/utils/UploadSource.js';
 
 export class UploaderBlock extends ActivityBlock {
   /** @protected */
@@ -421,26 +422,18 @@ export class UploaderBlock extends ActivityBlock {
   }
 }
 
-/** @enum {String} */
+/**
+ * @deprecated Use list sources ExternalUploadSource from from blocks/utils/UploadSource.js
+ * @enum {String}
+ */
 UploaderBlock.extSrcList = Object.freeze({
-  FACEBOOK: 'facebook',
-  DROPBOX: 'dropbox',
-  GDRIVE: 'gdrive',
-  GPHOTOS: 'gphotos',
-  INSTAGRAM: 'instagram',
-  FLICKR: 'flickr',
-  VK: 'vk',
-  EVERNOTE: 'evernote',
-  BOX: 'box',
-  ONEDRIVE: 'onedrive',
-  HUDDLE: 'huddle',
+  ...ExternalUploadSource,
 });
 
-/** @enum {String} */
+/**
+ * @deprecated Use list sources UploadSource from from blocks/utils/UploadSource.js
+ * @enum {String}
+ */
 UploaderBlock.sourceTypes = Object.freeze({
-  LOCAL: 'local',
-  URL: 'url',
-  CAMERA: 'camera',
-  DRAW: 'draw',
-  ...UploaderBlock.extSrcList,
+  ...UploadSource,
 });

package/blocks/CloudImageEditor/src/css/common.css

@@ -348,6 +348,8 @@ uc-editor-operation-control {
   --down-opacity: 1;
   --down-filter: 0.6;
   --down-background: var(--uc-secondary);
+
+  border-radius: var(--uc-radius);
 }
 
 uc-editor-button-control > button,
@@ -384,11 +386,11 @@ uc-editor-button-control.uc-active,
 uc-editor-operation-control.uc-active,
 uc-editor-crop-button-control.uc-active,
 uc-editor-filter-control.uc-active {
-  --idle-color-rgb: var(--uc-primary);
-  --idle-background: var(--uc-primary-transparent);
-  --idle-opacity: 0.9;
-  --hover-color-rgb: var(--uc-primary);
-  --hover-background: var(--uc-primary-transparent);
+  --idle-color-rgb: var(--uc-primary-foreground);
+  --idle-background: var(--uc-primary);
+  --idle-opacity: 1;
+  --hover-color-rgb: var(--uc-primary-foreground);
+  --hover-background: var(--uc-primary);
   --hover-opacity: 1;
 }
 
@@ -407,6 +409,17 @@ uc-editor-filter-control.uc-not_active {
   --idle-color-rgb: var(--uc-secondary-foreground);
 }
 
+:where(.uc-contrast) uc-editor-button-control.uc-not_active,
+:where(.uc-contrast) uc-editor-operation-control.uc-not_active,
+:where(.uc-contrast) uc-editor-crop-button-control.uc-not_active,
+:where(.uc-contrast) uc-editor-filter-control.uc-not_active {
+  --idle-background: transparent;
+  --hover-background: var(--uc-secondary);
+
+  outline: 1px solid var(--uc-border);
+  outline-offset: -1px;
+}
+
 uc-editor-button-control > button::before,
 uc-editor-operation-control > button::before,
 uc-editor-crop-button-control > button::before,
@@ -973,6 +986,10 @@ uc-btn-ui.uc-secondary > button {
   --active-background: transparent;
 }
 
+:where(.uc-contrast) uc-btn-ui.uc-secondary > button {
+  border: 1px solid var(--uc-border);
+}
+
 uc-btn-ui.uc-secondary-icon > button {
   --idle-color-rgb: var(--uc-secondary-foreground);
   --idle-brightness: 1;
@@ -1036,6 +1053,13 @@ uc-btn-ui.uc-default > button {
   --active-background: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) uc-btn-ui.uc-default > button {
+  --idle-background: transparent;
+  --hover-background: var(--uc-secondary);
+  --active-background: var(--uc-foreground);
+  --active-color-rgb: var(--uc-background);
+}
+
 uc-line-loader-ui {
   position: absolute;
   top: 0px;
@@ -1107,16 +1131,16 @@ uc-slider-ui .uc-steps {
 uc-slider-ui .uc-border-step {
   width: 0px;
   height: 10px;
-  border-right: 1px solid var(--l-color);
-  opacity: 0.6;
+  border-right: 1px solid var(--uc-foreground);
+  opacity: 1;
   transition: border-color var(--transition-duration-2);
 }
 
 uc-slider-ui .uc-minor-step {
   width: 0px;
   height: 4px;
-  border-right: 1px solid var(--l-color);
-  opacity: 0.2;
+  border-right: 1px solid var(--uc-foreground);
+  opacity: 0.6;
   transition: border-color var(--transition-duration-2);
 }
 

package/blocks/CloudImageEditor/src/elements/slider/SliderUi.js

@@ -114,7 +114,7 @@ export class SliderUi extends Block {
     if (value === this._zero) {
       this._zeroDotEl.style.opacity = '0';
     } else {
-      this._zeroDotEl.style.opacity = '0.2';
+      this._zeroDotEl.style.opacity = '1';
     }
     let { width } = this.getBoundingClientRect();
     let slope = 100 / (this.$.max - this.$.min);

package/blocks/DropArea/DropArea.js

@@ -151,7 +151,7 @@ export class DropArea extends UploaderBlock {
     this.subConfigValue('sourceList', (value) => {
       const list = stringToArray(value);
       // Enable drop area if local files are allowed
-      this.$.isEnabled = list.includes(UploaderBlock.sourceTypes.LOCAL);
+      this.$.isEnabled = list.includes(UploadSource.LOCAL);
       // Show drop area if it's enabled or default slot is overrided
       this.$.isVisible = this.$.isEnabled || !this.querySelector('[data-default-slot]');
     });

package/blocks/DropArea/drop-area.css

@@ -32,18 +32,19 @@
   background: var(--uc-background);
 }
 
-:where([uc-drop-area])[with-icon]
-  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  :is(.uc-text, .uc-icon-container) {
-  color: var(--uc-primary);
-}
-
 :where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
-  color: var(--uc-primary);
   background: var(--uc-primary-transparent);
   border-color: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) :where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
+  color: var(--uc-foreground);
+  background: transparent;
+  border-color: var(--uc-foreground);
+  border-width: 2px;
+  border-style: solid;
+}
+
 :where([uc-drop-area]):is([drag-state='active'], [drag-state='near']) {
   opacity: 1;
 }
@@ -95,15 +96,19 @@
   transform: translateY(48px);
 }
 
-:where([uc-drop-area])[with-icon]:hover .uc-icon-container,
-:where([uc-drop-area])[with-icon]:hover .uc-text {
-  color: var(--uc-primary);
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container,
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-text {
+  color: var(--uc-foreground);
 }
 
 :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
   background-color: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
+  background-color: var(--uc-muted);
+}
+
 :where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   .uc-icon-container {
@@ -114,7 +119,13 @@
 :where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   .uc-text {
-  color: var(--uc-primary);
+  color: var(--uc-foreground);
+}
+
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  .uc-text {
+  color: var(--uc-foreground);
 }
 
 :where([uc-drop-area])[with-icon]

package/blocks/FileItem/FileItem.d.ts

@@ -28,6 +28,7 @@ export class FileItem extends UploaderBlock {
         isFocused: boolean;
         isEditable: boolean;
         state: symbol;
+        ariaLabelStatusFile: string;
         onEdit: () => void;
         onRemove: () => void;
         onUpload: () => void;
@@ -35,7 +36,7 @@ export class FileItem extends UploaderBlock {
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
         '*collectionErrors': any[];
-        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null; /** @private */
+        '*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/FileItem/FileItem.d.ts.map

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;;;;;;;;;uJApBF,eAAe;;;;;;;;;MA+CZ;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,wBAsFC;CACF;;;;;8BA/Z6B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4BC;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,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BApa6B,iCAAiC;AAO/D;;;;;GAKG"}

package/blocks/FileItem/FileItem.js

@@ -10,10 +10,10 @@ import { generateThumb } from '../utils/resizeImage.js';
 import { parseShrink } from '../../utils/parseShrink.js';
 
 const FileItemState = Object.freeze({
-  FINISHED: Symbol(0),
-  FAILED: Symbol(1),
-  UPLOADING: Symbol(2),
-  IDLE: Symbol(3),
+  FINISHED: Symbol('FINISHED'),
+  FAILED: Symbol('FAILED'),
+  UPLOADING: Symbol('UPLOADING'),
+  IDLE: Symbol('IDLE'),
 });
 
 export class FileItem extends UploaderBlock {
@@ -55,6 +55,7 @@ export class FileItem extends UploaderBlock {
       isFocused: false,
       isEditable: false,
       state: FileItemState.IDLE,
+      ariaLabelStatusFile: '',
       onEdit: () => {
         this.$['*currentActivityParams'] = {
           internalId: this._entry.uid,
@@ -290,6 +291,10 @@ export class FileItem extends UploaderBlock {
       progressVisible: state === FileItemState.UPLOADING,
       isEditable: this.cfg.useCloudImageEditor && this._entry?.getValue('isImage') && this._entry?.getValue('cdnUrl'),
       errorText: this._entry.getValue('errors')?.[0]?.message,
+      ariaLabelStatusFile: this.l10n('a11y-file-item-status', {
+        fileName: this._entry?.getValue('fileName'),
+        status: this.l10n(state?.description?.toLocaleLowerCase() ?? '').toLocaleLowerCase(),
+      }),
     });
   }
 
@@ -392,7 +397,7 @@ export class FileItem extends UploaderBlock {
         cdnUrl: entry.getValue('cdnUrl') ?? fileInfo.cdnUrl,
         cdnUrlModifiers: entry.getValue('cdnUrlModifiers') ?? '',
         uploadProgress: 100,
-        source: entry.getValue('source') ?? '',
+        source: entry.getValue('source') ?? null,
       });
 
       if (entry === this._entry) {
@@ -426,7 +431,7 @@ FileItem.template = /* HTML */ `
         <uc-icon set="@name: badgeIcon"></uc-icon>
       </div>
     </div>
-    <div class="uc-file-name-wrapper">
+    <div aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
       <span class="uc-file-name" set="@title: itemName">{{itemName}}</span>
       <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
     </div>

package/blocks/FileItem/file-item.css

@@ -127,11 +127,15 @@ uc-file-item .uc-badge uc-icon svg {
 }
 
 uc-file-item .uc-progress-bar {
-  opacity: 0.5;
+  opacity: 0.7;
   top: calc(100% - 2px);
   height: 2px;
 }
 
+:where(.uc-contrast) uc-file-item .uc-progress-bar {
+  opacity: 1;
+}
+
 uc-file-item .uc-file-actions {
   display: flex;
   gap: 2px;

package/blocks/Modal/modal.css

@@ -85,6 +85,10 @@
     opacity 0.4s ease;
 }
 
+:where(.uc-contrast) :where([uc-modal]) > dialog {
+  outline: 1px solid var(--uc-border);
+}
+
 @media only screen and (max-width: 430px), only screen and (max-height: 600px) {
   :where([uc-modal]) > dialog > .uc-content {
     height: var(--modal-max-content-height);

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

@@ -1 +1 @@
-{"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"}
+{"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;;;;;;;;;;;;;;;;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;8BAd0B,iCAAiC"}

package/blocks/SourceBtn/SourceBtn.js

@@ -1,6 +1,7 @@
 // @ts-check
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { ExternalUploadSource, UploadSource } from '../utils/UploadSource.js';
 
 const L10N_PREFIX = 'src-type-';
 
@@ -37,19 +38,19 @@ export class SourceBtn extends UploaderBlock {
 
   initTypes() {
     this.registerType({
-      type: UploaderBlock.sourceTypes.LOCAL,
+      type: UploadSource.LOCAL,
       activate: () => {
         this.api.openSystemDialog();
         return false;
       },
     });
     this.registerType({
-      type: UploaderBlock.sourceTypes.URL,
+      type: UploadSource.URL,
       activity: ActivityBlock.activities.URL,
       textKey: 'from-url',
     });
     this.registerType({
-      type: UploaderBlock.sourceTypes.CAMERA,
+      type: UploadSource.CAMERA,
       activity: ActivityBlock.activities.CAMERA,
       activate: () => {
         const supportsCapture = 'capture' in document.createElement('input');
@@ -65,7 +66,7 @@ export class SourceBtn extends UploaderBlock {
       icon: 'edit-draw',
     });
 
-    for (let externalSourceType of Object.values(UploaderBlock.extSrcList)) {
+    for (let externalSourceType of Object.values(ExternalUploadSource)) {
       this.registerType({
         type: externalSourceType,
         activity: ActivityBlock.activities.EXTERNAL,

package/blocks/SourceBtn/source-btn.css

@@ -20,10 +20,14 @@ uc-source-btn:last-child > button {
 }
 
 uc-source-btn > button:hover {
-  color: var(--uc-primary);
   background-color: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) uc-source-btn > button:hover {
+  background-color: var(--uc-secondary);
+  color: var(--uc-foreground);
+}
+
 uc-source-btn uc-icon {
   display: inline-flex;
   flex-grow: 1;
@@ -33,6 +37,10 @@ uc-source-btn uc-icon {
   opacity: 0.8;
 }
 
+:where(.uc-contrast) uc-source-btn uc-icon {
+  opacity: 1;
+}
+
 uc-source-btn .uc-txt {
   display: flex;
   align-items: center;

package/blocks/UploadList/UploadList.js

@@ -201,7 +201,7 @@ export class UploadList extends UploaderBlock {
 
 UploadList.template = /* HTML */ `
   <uc-activity-header>
-    <span class="uc-header-text">{{headerText}}</span>
+    <span aria-live="polite" class="uc-header-text">{{headerText}}</span>
     <button
       type="button"
       class="uc-mini-btn uc-close-btn"

package/blocks/UrlSource/UrlSource.js

@@ -13,7 +13,7 @@ export class UrlSource extends UploaderBlock {
       e.preventDefault();
 
       let url = this.ref.input['value'];
-      this.api.addFileFromUrl(url, { source: UploadSource.URL_TAB });
+      this.api.addFileFromUrl(url, { source: UploadSource.URL });
       this.$['*currentActivity'] = ActivityBlock.activities.UPLOAD_LIST;
     },
     onCancel: () => {

package/blocks/themes/uc-basic/common.css

@@ -56,6 +56,10 @@
   background-color: var(--uc-secondary-hover);
 }
 
+:where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
+  border: 1px solid var(--uc-border);
+}
+
 :where([uc-wgt-common]) button.uc-mini-btn {
   height: var(--uc-button-size);
   padding: 0;

package/blocks/themes/uc-basic/theme.css

@@ -41,7 +41,7 @@
 @supports not (color: oklch(0% 0 0)) {
   :where([uc-wgt-common]) {
     /* Light colors RGB fallback */
-    --uc-primary-rgb-light: 54 112 253;
+    --uc-primary-rgb-light: 23 75 215;
     --uc-primary-light: rgb(var(--uc-primary-rgb-light));
     --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
     --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
@@ -87,10 +87,10 @@
 @supports (color: oklch(0% 0 0)) {
   :where([uc-wgt-common]) {
     /* Light colors OKLCH */
-    --uc-primary-oklch-light: 59% 0.22 264; /* Quick customization: change this value to your brand color */
+    --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
     --uc-primary-light: oklch(var(--uc-primary-oklch-light));
     --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
-    --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 10%);
+    --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
     --uc-background-light: oklch(100% 0 0);
     --uc-foreground-light: oklch(21% 0 0);
     --uc-primary-foreground-light: oklch(100% 0 0);
@@ -98,7 +98,7 @@
     --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
     --uc-secondary-foreground-light: oklch(21% 0 0);
     --uc-muted-light: oklch(97% 0 0);
-    --uc-muted-foreground-light: oklch(55% 0 0);
+    --uc-muted-foreground-light: oklch(40% 0 0);
     --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
     --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
     --uc-border-light: oklch(92% 0 0);
@@ -232,27 +232,27 @@
 }
 
 :where(.uc-purple) {
-  --uc-primary-oklch-light: 59% 0.22 300;
+  --uc-primary-oklch-light: 47% 0.22 300;
   --uc-primary-oklch-dark: 69% 0.1768 300;
 }
 
 :where(.uc-red) {
-  --uc-primary-oklch-light: 59% 0.22 21;
-  --uc-primary-oklch-dark: 69% 0.1768 21;
+  --uc-primary-oklch-light: 47% 0.21 21;
+  --uc-primary-oklch-dark: 71% 0.1768 21;
 }
 
 :where(.uc-orange) {
-  --uc-primary-oklch-light: 59% 0.1724 51.88;
+  --uc-primary-oklch-light: 47% 0.1376 51.88;
   --uc-primary-oklch-dark: 69% 0.1768 51.88;
 }
 
 :where(.uc-green) {
-  --uc-primary-oklch-light: 59% 0.1724 130;
+  --uc-primary-oklch-light: 45% 0.14 130;
   --uc-primary-oklch-dark: 69% 0.1768 130;
 }
 
 :where(.uc-turquoise) {
-  --uc-primary-oklch-light: 59% 0.1523 174;
+  --uc-primary-oklch-light: 45% 0.0854 174;
   --uc-primary-oklch-dark: 69% 0.1768 174;
 }
 
@@ -260,3 +260,20 @@
   --uc-primary-oklch-light: 10% 0 0;
   --uc-primary-oklch-dark: 97% 0 0;
 }
+
+:where(.uc-contrast) {
+  --uc-border-light: oklch(50% 0 0);
+  --uc-border-dark: oklch(50% 0 0);
+
+  --uc-muted-light: oklch(98% 0 0);
+  --uc-muted-dark: oklch(16% 0 0);
+
+  --uc-muted-foreground-light: oklch(20% 0 0);
+  --uc-muted-foreground-dark: oklch(80% 0 0);
+
+  --uc-background-light: oklch(100% 0 0);
+  --uc-foreground-light: oklch(0% 0 0);
+
+  --uc-background-dark: oklch(10% 0 0);
+  --uc-foreground-dark: oklch(100% 0 0);
+}

package/blocks/utils/UploadSource.d.ts

@@ -1,9 +1,35 @@
+export const ExternalUploadSource: Readonly<{
+    FACEBOOK: "facebook";
+    DROPBOX: "dropbox";
+    GDRIVE: "gdrive";
+    GPHOTOS: "gphotos";
+    INSTAGRAM: "instagram";
+    FLICKR: "flickr";
+    VK: "vk";
+    EVERNOTE: "evernote";
+    BOX: "box";
+    ONEDRIVE: "onedrive";
+    HUDDLE: "huddle";
+}>;
 export const UploadSource: Readonly<{
+    FACEBOOK: "facebook";
+    DROPBOX: "dropbox";
+    GDRIVE: "gdrive";
+    GPHOTOS: "gphotos";
+    INSTAGRAM: "instagram";
+    FLICKR: "flickr";
+    VK: "vk";
+    EVERNOTE: "evernote";
+    BOX: "box";
+    ONEDRIVE: "onedrive";
+    HUDDLE: "huddle";
     LOCAL: "local";
     DROP_AREA: "drop-area";
-    URL_TAB: "url-tab";
     CAMERA: "camera";
     EXTERNAL: "external";
     API: "js-api";
+    URL: "url";
+    DRAW: "draw";
 }>;
+export type SourceTypes = (typeof UploadSource)[keyof typeof UploadSource];
 //# sourceMappingURL=UploadSource.d.ts.map

package/blocks/utils/UploadSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadSource.d.ts","sourceRoot":"","sources":["UploadSource.js"],"names":[],"mappings":"AAAA;;;;;;;GAOG"}
+{"version":3,"file":"UploadSource.d.ts","sourceRoot":"","sources":["UploadSource.js"],"names":[],"mappings":"AACA;;;;;;;;;;;;GAYG;AAEH;;;;;;;;;;;;;;;;;;;GASG;0BAEW,CAAC,mBAAmB,CAAC,CAAC,MAAM,mBAAmB,CAAC"}

package/blocks/utils/UploadSource.js

@@ -1,8 +1,27 @@
+// @ts-check
+export const ExternalUploadSource = Object.freeze({
+  FACEBOOK: 'facebook',
+  DROPBOX: 'dropbox',
+  GDRIVE: 'gdrive',
+  GPHOTOS: 'gphotos',
+  INSTAGRAM: 'instagram',
+  FLICKR: 'flickr',
+  VK: 'vk',
+  EVERNOTE: 'evernote',
+  BOX: 'box',
+  ONEDRIVE: 'onedrive',
+  HUDDLE: 'huddle',
+});
+
 export const UploadSource = Object.freeze({
   LOCAL: 'local',
   DROP_AREA: 'drop-area',
-  URL_TAB: 'url-tab',
   CAMERA: 'camera',
   EXTERNAL: 'external',
   API: 'js-api',
+  URL: 'url',
+  DRAW: 'draw',
+  ...ExternalUploadSource,
 });
+
+/** @typedef {(typeof UploadSource)[keyof typeof UploadSource]} SourceTypes */

package/env.d.ts

@@ -1,4 +1,4 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME: "blocks";
-export const PACKAGE_VERSION: "1.5.2";
+export const PACKAGE_VERSION: "1.7.0";
 //# sourceMappingURL=env.d.ts.map

package/env.js

@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '1.5.2';
+export const PACKAGE_VERSION = '1.7.0';

package/index.d.ts

@@ -36,4 +36,5 @@ export { defineLocale } from "./abstract/localeRegistry.js";
 export { loadFileUploaderFrom } from "./abstract/loadFileUploaderFrom.js";
 export { toKebabCase } from "./utils/toKebabCase.js";
 export { BaseComponent, Data, UID } from "@symbiotejs/symbiote";
+export { UploadSource, ExternalUploadSource } from "./blocks/utils/UploadSource.js";
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -44,6 +44,7 @@ export { defineComponents } from './abstract/defineComponents.js';
 export { defineLocale } from './abstract/localeRegistry.js';
 export { loadFileUploaderFrom } from './abstract/loadFileUploaderFrom.js';
 export { toKebabCase } from './utils/toKebabCase.js';
+export { UploadSource, ExternalUploadSource } from './blocks/utils/UploadSource.js';
 
 export * from './env.js';