@breadstone/mosaik-elements-foundation 0.0.136 → 0.0.137

package/Controls/Components/Layouts/Split/Themes/SplitElement.Retro.js

@@ -129,7 +129,7 @@ export function splitElementRetroStyle() {
 }
 
 :host([orientation="horizontal"]) [part="divider"] {
-  cursor: row-resize;
+  cursor: col-resize;
 }
 
 :host([orientation="horizontal"]) [part="divider"]:after {

package/Controls/Components/Primitives/DropZone/DropZoneElement.d.ts

@@ -2,12 +2,35 @@ import { IEventEmitter } from '@breadstone/mosaik-elements';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import type { IDropZoneDataTransferEventDetail } from './Events/IDropZoneDataEventDetail';
 import type { IDropZoneElementProps } from './IDropZoneElementProps';
+import { DropZoneState } from '../../../Types/DropZoneState';
 declare const DropZoneElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
- * The `{@link DropZoneElement}` element.
+ * DropZoneElement - An interactive component that defines a target area for drag-and-drop operations.
+ *
+ * @description
+ * The DropZoneElement provides a designated area within the interface where users can drop draggable items.
+ * It is commonly used in applications that require file uploads, reordering of elements, or custom drag-and-drop
+ * interactions. By offering a clear and accessible drop target, this component helps improve usability and
+ * guides users through intuitive drag-and-drop workflows.
+ *
+ * DropZoneElement can be styled and configured to visually indicate when a draggable item is hovering over it,
+ * and it can emit events to notify the application when an item has been dropped. This makes it a flexible
+ * building block for implementing custom drag-and-drop experiences across web and application interfaces.
+ *
+ * @element mosaik-drop-zone
+ * @category Interaction
  *
  * @fires dataTransferred - Fired when data is transferred to the drop zone.
  *
+ * @slot - The default slot for content displayed inside the drop zone.
+ *
+ * @example
+ * ```html
+ * <mosaik-drop-zone>
+ *   <p>Drag files here to upload</p>
+ * </mosaik-drop-zone>
+ * ```
+ *
  * @public
  */
 export declare class DropZoneElement extends DropZoneElement_base implements IDropZoneElementProps {
@@ -19,7 +42,7 @@ export declare class DropZoneElement extends DropZoneElement_base implements IDr
     private _dragEnterSubscription;
     private _dragLeaveSubscription;
     private _dropSubscription;
-    private _isDragging;
+    private _state;
     /**
      * @public
      */
@@ -34,14 +57,13 @@ export declare class DropZoneElement extends DropZoneElement_base implements IDr
      */
     static get is(): string;
     /**
-     * Returns the `{@link isDragging}` property.
+     * Gets or sets the `state` property.
      *
-     * @public
      * @readonly
      * @attr
      */
-    get isDragging(): boolean;
-    private set isDragging(value);
+    get state(): DropZoneState;
+    private set state(value);
     /**
      * Called when the data is transferred to the drop zone.
      * Provides reference to `{@link IEventDetail}` as event detail.
@@ -66,7 +88,31 @@ export declare class DropZoneElement extends DropZoneElement_base implements IDr
     /**
      * @protected
      */
-    protected onDragDrop(event: DragEvent): void;
+    protected onDrag(event: DragEvent): void;
+    /**
+     * @protected
+     */
+    protected onDragOver(event: DragEvent): void;
+    /**
+     * @protected
+     */
+    protected onDragStart(event: DragEvent): void;
+    /**
+     * @protected
+     */
+    protected onDragEnd(event: DragEvent): void;
+    /**
+     * @protected
+     */
+    protected onDragEnter(event: DragEvent): void;
+    /**
+     * @protected
+     */
+    protected onDragLeave(event: DragEvent): void;
+    /**
+     * @protected
+     */
+    protected onDrop(event: DragEvent): void;
 }
 /**
  * @public

package/Controls/Components/Primitives/DropZone/DropZoneElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropZoneElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/DropZone/DropZoneElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAA4D,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAMtH,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AAC1F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAQrE;;;;;;GAMG;AACH,qBAUa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAIhC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkD;IACnF,OAAO,CAAC,iBAAiB,CAAoC;IAC7D,OAAO,CAAC,qBAAqB,CAAoC;IACjE,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,iBAAiB,CAAoC;IAC7D,OAAO,CAAC,WAAW,CAAU;IAM7B;;OAEG;;IAmBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;;OAMG;IACH,IAIW,UAAU,IAAI,OAAO,CAE/B;IAED,OAAO,KAAK,UAAU,QAKrB;IAED;;;;;;;OAOG;IACH,IACW,eAAe,IAAI,aAAa,CAAC,gCAAgC,CAAC,CAE5E;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAY5C;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,gCAAgC,GAAG,IAAI;IAIzE;;OAEG;IACH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;CAW/C;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,kBAAkB,EAAE,eAAe,CAAC;KACvC;CACJ"}
+{"version":3,"file":"DropZoneElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/DropZone/DropZoneElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAA4D,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAMtH,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AAC1F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAKrE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;;AAI7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAUa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAIhC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkD;IACnF,OAAO,CAAC,iBAAiB,CAAoC;IAC7D,OAAO,CAAC,qBAAqB,CAAoC;IACjE,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,oBAAoB,CAAoC;IAChE,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,sBAAsB,CAAoC;IAClE,OAAO,CAAC,iBAAiB,CAAoC;IAC7D,OAAO,CAAC,MAAM,CAAgB;IAM9B;;OAEG;;IAmBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,KAAK,IAAI,aAAa,CAAwB;IACzD,OAAO,KAAK,KAAK,QAKhB;IAED;;;;;;;OAOG;IACH,IACW,eAAe,IAAI,aAAa,CAAC,gCAAgC,CAAC,CAE5E;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAY5C;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,gCAAgC,GAAG,IAAI;IAIzE;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAWxC;;OAEG;IACH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAe5C;;OAEG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAW7C;;OAEG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAW3C;;OAEG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAqB7C;;OAEG;IACH,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAkB7C;;OAEG;IACH,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;CAkB3C;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAC;KACvC;CACJ"}

package/Controls/Components/Primitives/DropZone/DropZoneElement.js

@@ -21,12 +21,35 @@ import { dropZoneElementJoyStyle } from './Themes/DropZoneElement.Joy';
 import { dropZoneElementRetroStyle } from './Themes/DropZoneElement.Retro';
 import { dropZoneElementCosmopolitanStyle } from './Themes/DropZoneElement.Cosmopolitan';
 import { Themeable } from '../../../Behaviors/Themeable';
+import { DropZoneState } from '../../../Types/DropZoneState';
 // #endregion
 /**
- * The `{@link DropZoneElement}` element.
+ * DropZoneElement - An interactive component that defines a target area for drag-and-drop operations.
+ *
+ * @description
+ * The DropZoneElement provides a designated area within the interface where users can drop draggable items.
+ * It is commonly used in applications that require file uploads, reordering of elements, or custom drag-and-drop
+ * interactions. By offering a clear and accessible drop target, this component helps improve usability and
+ * guides users through intuitive drag-and-drop workflows.
+ *
+ * DropZoneElement can be styled and configured to visually indicate when a draggable item is hovering over it,
+ * and it can emit events to notify the application when an item has been dropped. This makes it a flexible
+ * building block for implementing custom drag-and-drop experiences across web and application interfaces.
+ *
+ * @element mosaik-drop-zone
+ * @category Interaction
  *
  * @fires dataTransferred - Fired when data is transferred to the drop zone.
  *
+ * @slot - The default slot for content displayed inside the drop zone.
+ *
+ * @example
+ * ```html
+ * <mosaik-drop-zone>
+ *   <p>Drag files here to upload</p>
+ * </mosaik-drop-zone>
+ * ```
+ *
  * @public
  */
 let DropZoneElement = class DropZoneElement extends Themeable(Disableable(Appearanceable(Variantable(CustomElement)))) {
@@ -39,7 +62,7 @@ let DropZoneElement = class DropZoneElement extends Themeable(Disableable(Appear
     _dragEnterSubscription;
     _dragLeaveSubscription;
     _dropSubscription;
-    _isDragging;
+    _state;
     // #endregion
     // #region Ctor
     /**
@@ -54,7 +77,7 @@ let DropZoneElement = class DropZoneElement extends Themeable(Disableable(Appear
         this._dragEnterSubscription = null;
         this._dragLeaveSubscription = null;
         this._dropSubscription = null;
-        this._isDragging = false;
+        this._state = 'none';
         this._dataTransferred = new HTMLElementEventEmitter(this, 'dataTransferred');
     }
     // #endregion
@@ -71,19 +94,16 @@ let DropZoneElement = class DropZoneElement extends Themeable(Disableable(Appear
         return 'mosaik-drop-zone';
     }
     /**
-     * Returns the `{@link isDragging}` property.
+     * Gets or sets the `state` property.
      *
-     * @public
      * @readonly
      * @attr
      */
-    get isDragging() {
-        return this._isDragging;
-    }
-    set isDragging(value) {
-        if (this._isDragging !== value) {
-            this._isDragging = value;
-            this.requestUpdate('isDragging');
+    get state() { return this._state; }
+    set state(value) {
+        if (this._state !== value) {
+            this._state = value;
+            this.requestUpdate('state');
         }
     }
     /**
@@ -105,13 +125,13 @@ let DropZoneElement = class DropZoneElement extends Themeable(Disableable(Appear
      */
     connectedCallback() {
         super.connectedCallback();
-        this._dragSubscription = this.on('drag', (e) => this.onDragDrop(e));
-        this._dragOverSubscription = this.on('dragover', (e) => this.onDragDrop(e));
-        this._dragStartSubscription = this.on('dragstart', (e) => this.onDragDrop(e));
-        this._dragEndSubscription = this.on('dragend', (e) => this.onDragDrop(e));
-        this._dragEnterSubscription = this.on('dragenter', (e) => this.onDragDrop(e));
-        this._dragLeaveSubscription = this.on('dragleave', (e) => this.onDragDrop(e));
-        this._dropSubscription = this.on('drop', (e) => this.onDragDrop(e));
+        this._dragSubscription = this.on('drag', (e) => this.onDrag(e));
+        this._dragOverSubscription = this.on('dragover', (e) => this.onDragOver(e));
+        this._dragStartSubscription = this.on('dragstart', (e) => this.onDragStart(e));
+        this._dragEndSubscription = this.on('dragend', (e) => this.onDragEnd(e));
+        this._dragEnterSubscription = this.on('dragenter', (e) => this.onDragEnter(e));
+        this._dragLeaveSubscription = this.on('dragleave', (e) => this.onDragLeave(e));
+        this._dropSubscription = this.on('drop', (e) => this.onDrop(e));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -134,22 +154,109 @@ let DropZoneElement = class DropZoneElement extends Themeable(Disableable(Appear
     /**
      * @protected
      */
-    onDragDrop(event) {
+    onDrag(event) {
+        if (this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.state = event.type;
+    }
+    /**
+     * @protected
+     */
+    onDragOver(event) {
+        if (this.disabled) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = event.dataTransfer.effectAllowed === 'move' ? 'move' : 'copy';
+        }
+        this.state = event.type;
+    }
+    /**
+     * @protected
+     */
+    onDragStart(event) {
         if (this.disabled) {
-            // TODO: handle disabled state
+            return;
         }
+        event.preventDefault();
+        event.stopPropagation();
+        this.state = event.type;
+    }
+    /**
+     * @protected
+     */
+    onDragEnd(event) {
+        if (this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.state = event.type;
+    }
+    /**
+     * @protected
+     */
+    onDragEnter(event) {
+        if (this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        // IMPORTANT: Drag events fire not only when entering or leaving the host as a whole,
+        // but also when moving between child elements inside the same host. Without this guard,
+        // every small movement inside the drop zone would incorrectly trigger a "leave"/"enter"
+        // state change, causing flickering and broken visual feedback. By explicitly checking
+        // whether the event path still includes the host element, we can differentiate between
+        // internal transitions (safe to ignore) and real exits/entries from the drop zone.
+        if (event.composedPath().includes(this)) {
+            this.state = 'dragenter';
+        }
+        this.state = event.type;
+    }
+    /**
+     * @protected
+     */
+    onDragLeave(event) {
+        if (this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        // IMPORTANT: Not all browsers provide reliable `relatedTarget` information for drag
+        // operations, especially when dragging external data (e.g. files from the OS). Using
+        // `composedPath()` ensures that we inspect the actual event propagation path through
+        // the DOM and Shadow DOM. This makes the drop zone detection more robust and avoids
+        // false positives when the user is still inside the component boundaries.
+        if (event.composedPath().includes(this)) {
+            this.state = event.type;
+        }
+    }
+    /**
+     * @protected
+     */
+    onDrop(event) {
+        if (this.disabled) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.state = event.type;
+        this.onDataTransferred({ data: event.dataTransfer });
+        setTimeout(() => {
+            this.state = 'none';
+        }, 250);
     }
 };
 __decorate([
-    Attribute({
-        type: Boolean,
-        useDefault: true
-    }),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], DropZoneElement.prototype, "isDragging", null);
+    Attribute({ type: DropZoneState }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], DropZoneElement.prototype, "state", null);
 __decorate([
     Emit({ eventName: 'dataTransferred' }),
     __metadata("design:type", Object),

package/Controls/Components/Primitives/DropZone/DropZoneElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZoneElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/DropZone/DropZoneElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropZoneElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/DropZone/DropZoneElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Primitives/DropZone/Events/IDropZoneDataEventDetail.d.ts

@@ -6,7 +6,7 @@ import type { DropZoneElement } from '../DropZoneElement';
  * @public
  */
 export interface IDropZoneDataTransferEventDetail extends IEventDetail<DropZoneElement> {
-    readonly data: DataTransfer;
+    readonly data: DataTransfer | null;
 }
 /**
  * Represents the `IDropZoneDataTransferEvent` interface.

package/Controls/Components/Primitives/DropZone/Events/IDropZoneDataEventDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IDropZoneDataEventDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Events/IDropZoneDataEventDetail.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI1D;;;;GAIG;AACH,MAAM,WAAW,gCAAiC,SAAQ,YAAY,CAAC,eAAe,CAAC;IAInF,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;CAI/B;AAED;;;;GAIG;AACH,MAAM,WAAW,0BAA2B,SAAQ,WAAW,CAAC,gCAAgC,CAAC;IAI7F,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC;CAIpC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,mBAAmB;QACzB,eAAe,EAAE,0BAA0B,CAAC;KAC/C;CACJ"}
+{"version":3,"file":"IDropZoneDataEventDetail.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Events/IDropZoneDataEventDetail.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI1D;;;;GAIG;AACH,MAAM,WAAW,gCAAiC,SAAQ,YAAY,CAAC,eAAe,CAAC;IAInF,QAAQ,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;CAItC;AAED;;;;GAIG;AACH,MAAM,WAAW,0BAA2B,SAAQ,WAAW,CAAC,gCAAgC,CAAC;IAI7F,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC;CAIpC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,mBAAmB;QACzB,eAAe,EAAE,0BAA0B,CAAC;KAC/C;CACJ"}

package/Controls/Components/Primitives/DropZone/IDropZoneElementProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IDropZoneElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/DropZone/IDropZoneElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAIxE;;;;GAIG;AAEH,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,EAAE,oBAAoB,EAAE,iBAAiB;CACxG"}
+{"version":3,"file":"IDropZoneElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/DropZone/IDropZoneElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAIxE;;;;GAIG;AAEH,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,EAAE,oBAAoB,EAAE,iBAAiB;CAExG"}

package/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropZoneElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,SAAS,CAwD5D"}
+{"version":3,"file":"DropZoneElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,SAAS,CAiL5D"}

package/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Cosmopolitan.js

@@ -13,6 +13,11 @@ import { css } from '../../../../../Dom/Css';
 export function dropZoneElementCosmopolitanStyle() {
     return css `
 :host {
+  --drop-zone-background-color: var(--cosmopolitan-scheme-background);
+  --drop-zone-border-color: var(--cosmopolitan-scheme-highlight);
+  --drop-zone-border-radius: var(--cosmopolitan-layout-radius);
+  --drop-zone-border-style: solid;
+  --drop-zone-border-width: var(--cosmopolitan-layout-thickness);
   --drop-zone-font-family: unset;
   --drop-zone-font-letter-spacing: unset;
   --drop-zone-font-line-height: unset;
@@ -58,11 +63,127 @@ export function dropZoneElementCosmopolitanStyle() {
 }
 
 :host {
-  border-style: dashed;
+  border-color: var(--drop-zone-border-color);
+  border-radius: var(--drop-zone-border-radius);
+  border-style: var(--drop-zone-border-style);
+  border-width: var(--drop-zone-border-width);
+  --dz-surface: transparent;
+  --dz-accent: #5aa6ff;
+  --dz-border: var(--dz-accent);
+  --dz-radius: 14px;
+  --dz-pad: 1.25rem;
+  --dz-duration: .22s;
+  --dz-shadow: 0 8px 24px #00000047;
+  --dz-dash-size: 16px;
+  --dz-dash-thickness: 2px;
+  --dz-dash-offset: 0px;
 }
 
-:host:hover:not([disabled]:not([disabled="false"])), :host:active:not([disabled]:not([disabled="false"])), :host:focus:not([disabled]:not([disabled="false"])), :host[is-dragging]:not([disabled]:not([disabled="false"])) {
-  border-style: solid;
+@keyframes dz-dash-move {
+  to {
+    --dz-dash-offset: var(--dz-dash-size, 16px);
+  }
+}
+
+@keyframes dz-glow {
+  from {
+    box-shadow: 0 0 0 0 color-mix(in oklab, var(--dz-accent, #5aa6ff) 45%, transparent);
+  }
+
+  to {
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--dz-accent, #5aa6ff) 0%, transparent);
+  }
+}
+
+:host([disabled]:not([disabled="false"])) {
+  transition: opacity var(--dz-duration, .22s) ease, filter var(--dz-duration, .22s) ease, transform var(--dz-duration, .22s) ease;
+  opacity: .6;
+  filter: saturate(.75);
+  cursor: not-allowed;
+  pointer-events: none;
+  transform: scale(.998);
+}
+
+:host([state="none"]) {
+  padding: var(--dz-pad);
+  border: var(--dz-dash-thickness) solid transparent;
+  background: linear-gradient(var(--dz-surface), var(--dz-surface)) padding-box, repeating-linear-gradient(90deg, var(--dz-border) 0 calc(var(--dz-dash-size) / 2), transparent calc(var(--dz-dash-size) / 2) var(--dz-dash-size)) border-box;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  background-position: 0 0, var(--dz-dash-offset) 0;
+  background-size: auto, var(--dz-dash-size) var(--dz-dash-thickness);
+  transition: transform var(--dz-duration) ease, box-shadow var(--dz-duration) ease, background-color var(--dz-duration) ease, opacity var(--dz-duration) ease, filter var(--dz-duration) ease;
+  display: block;
+  position: relative;
+}
+
+:host([state="drag"]) {
+  box-shadow: var(--dz-shadow);
+  transition: transform var(--dz-duration, .22s) ease, box-shadow var(--dz-duration, .22s) ease;
+  background: linear-gradient(var(--dz-surface, transparent), var(--dz-surface, transparent)) padding-box, repeating-linear-gradient(90deg, var(--dz-border) 0 calc(var(--dz-dash-size, 16px) / 2), transparent calc(var(--dz-dash-size, 16px) / 2) var(--dz-dash-size, 16px)) border-box;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  background-position: 0 0, var(--dz-dash-offset) 0;
+  background-size: auto, var(--dz-dash-size, 16px) var(--dz-dash-thickness, 2px);
+  animation: .7s linear infinite dz-dash-move;
+  transform: scale(1.01);
+}
+
+:host([state="dragover"]) {
+  transition: transform var(--dz-duration, .22s) ease;
+  background: linear-gradient(var(--dz-surface, transparent), var(--dz-surface, transparent)) padding-box, linear-gradient(var(--dz-accent, #5aa6ff), var(--dz-accent, #5aa6ff)) border-box;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  animation: .5s linear infinite dz-dash-move, .9s ease-in-out infinite alternate dz-glow;
+  transform: scale(1.02);
+}
+
+:host([state="dragstart"]) {
+  transition: transform var(--dz-duration, .22s) ease;
+  background: linear-gradient(var(--dz-surface, transparent), var(--dz-surface, transparent)) padding-box, repeating-linear-gradient(90deg, var(--dz-border) 0 calc(var(--dz-dash-size, 16px) / 2), transparent calc(var(--dz-dash-size, 16px) / 2) var(--dz-dash-size, 16px)) border-box;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  background-position: 0 0, var(--dz-dash-offset) 0;
+  background-size: auto, var(--dz-dash-size, 16px) var(--dz-dash-thickness, 2px);
+  animation: .65s linear infinite dz-dash-move;
+  transform: scale(1.012);
+}
+
+:host([state="dragend"]) {
+  opacity: .92;
+  transition: opacity var(--dz-duration, .22s) ease, transform var(--dz-duration, .22s) ease;
+  background: linear-gradient(var(--dz-surface, transparent), var(--dz-surface, transparent)) padding-box, linear-gradient(var(--dz-border), var(--dz-border)) border-box;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  transform: scale(1);
+}
+
+:host([state="dragenter"]) {
+  transition: transform var(--dz-duration, .22s) ease;
+  background: linear-gradient(var(--dz-surface, transparent), var(--dz-surface, transparent)) padding-box, linear-gradient(var(--dz-accent, #5aa6ff), var(--dz-accent, #5aa6ff)) border-box;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  animation: .6s linear infinite dz-dash-move;
+  transform: scale(1.015);
+}
+
+:host([state="dragleave"]) {
+  transition: transform var(--dz-duration, .22s) ease;
+  background: linear-gradient(var(--dz-surface, transparent), var(--dz-surface, transparent)) padding-box, repeating-linear-gradient(90deg, var(--dz-border) 0 calc(var(--dz-dash-size, 16px) / 2), transparent calc(var(--dz-dash-size, 16px) / 2) var(--dz-dash-size, 16px)) border-box;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  background-position: 0 0, var(--dz-dash-offset) 0;
+  background-size: auto, var(--dz-dash-size, 16px) var(--dz-dash-thickness, 2px);
+  animation: .6s linear infinite dz-dash-move;
+  transform: scale(1.005);
+}
+
+:host([state="drop"]) {
+  transition: transform var(--dz-duration, .22s) ease;
+  background: linear-gradient(var(--dz-surface, transparent), var(--dz-surface, transparent)) padding-box, linear-gradient(var(--dz-accent, #5aa6ff), var(--dz-accent, #5aa6ff)) border-box;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box;
+  transform: scale(1.005);
 }
 
     `;

package/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZoneElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,gCAAgC;IAC5C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DropZoneElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,gCAAgC;IAC5C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+KT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropZoneElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,SAAS,CA8DnD"}
+{"version":3,"file":"DropZoneElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,uBAAuB,IAAI,SAAS,CAqNnD"}