@breadstone/mosaik-elements-foundation 0.0.136 → 0.0.137

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

@@ -13,6 +13,11 @@ import { css } from '../../../../../Dom/Css';
 export function dropZoneElementJoyStyle() {
     return css `
 :host {
+  --drop-zone-background-color: var(--joy-scheme-background);
+  --drop-zone-border-color: var(--joy-scheme-highlight);
+  --drop-zone-border-radius: var(--joy-layout-radius);
+  --drop-zone-border-style: solid;
+  --drop-zone-border-width: var(--joy-layout-thickness);
   --drop-zone-font-family: unset;
   --drop-zone-font-letter-spacing: unset;
   --drop-zone-font-line-height: unset;
@@ -58,17 +63,163 @@ export function dropZoneElementJoyStyle() {
 }
 
 :host {
-  background-color: var(--joy-scheme-transparent);
-  border-style: dashed;
-  border-color: var(--joy-scheme-highlight);
-  border-width: var(--joy-layout-thickness);
-  border-radius: var(--joy-layout-radius);
+  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;
-  border-color: var(--joy-color-primary-500);
-  background-color: var(--joy-scheme-background);
+@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);
+}
+
+:host :host([variant="primary"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-primary-500);
+}
+
+:host :host([variant="secondary"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-secondary-500);
+}
+
+:host :host([variant="tertiary"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-tertiary-500);
+}
+
+:host :host([variant="danger"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-danger-500);
+}
+
+:host :host([variant="warning"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-warning-500);
+}
+
+:host :host([variant="success"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-success-500);
+}
+
+:host :host([variant="info"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-info-500);
+}
+
+:host :host([variant="highlight"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-highlight-500);
+}
+
+:host :host([variant="neutral"]:not([disabled]:not([disabled="false"]))) {
+  --drop-zone-background-color: var(--joy-color-neutral-500);
 }
 
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"DropZoneElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Joy.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,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DropZoneElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Joy.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,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmNT,CAAC;AACN,CAAC"}

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

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

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

@@ -13,6 +13,11 @@ import { css } from '../../../../../Dom/Css';
 export function dropZoneElementRetroStyle() {
     return css `
 :host {
+  --drop-zone-background-color: var(--retro-scheme-background);
+  --drop-zone-border-color: var(--retro-scheme-highlight);
+  --drop-zone-border-radius: var(--retro-layout-radius);
+  --drop-zone-border-style: solid;
+  --drop-zone-border-width: var(--retro-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 dropZoneElementRetroStyle() {
 }
 
 :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.Retro.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZoneElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Retro.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,yBAAyB;IACrC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDT,CAAC;AACN,CAAC"}
+{"version":3,"file":"DropZoneElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/DropZone/Themes/DropZoneElement.Retro.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,yBAAyB;IACrC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+KT,CAAC;AACN,CAAC"}

package/Controls/Types/DropZoneState.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Defines the possible states of a DropZoneElement.
+ *
+ * @public
+ */
+export declare const DropZoneState: {
+    readonly None: "none";
+    readonly Drag: "drag";
+    readonly DragOver: "dragover";
+    readonly DragStart: "dragstart";
+    readonly DragEnd: "dragend";
+    readonly DragEnter: "dragenter";
+    readonly DragLeave: "dragleave";
+    readonly Drop: "drop";
+};
+/**
+ * @public
+ */
+export type DropZoneState = (typeof DropZoneState)[keyof typeof DropZoneState];
+//# sourceMappingURL=DropZoneState.d.ts.map

package/Controls/Types/DropZoneState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropZoneState.d.ts","sourceRoot":"","sources":["../../../src/Controls/Types/DropZoneState.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;;;;;;CAShB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC"}

package/Controls/Types/DropZoneState.js

@@ -0,0 +1,16 @@
+/**
+ * Defines the possible states of a DropZoneElement.
+ *
+ * @public
+ */
+export const DropZoneState = {
+    None: 'none',
+    Drag: 'drag',
+    DragOver: 'dragover',
+    DragStart: 'dragstart',
+    DragEnd: 'dragend',
+    DragEnter: 'dragenter',
+    DragLeave: 'dragleave',
+    Drop: 'drop'
+};
+//# sourceMappingURL=DropZoneState.js.map

package/Controls/Types/DropZoneState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropZoneState.js","sourceRoot":"","sources":["../../../src/Controls/Types/DropZoneState.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,MAAM;CACN,CAAC"}

package/Routing/PathToRegexp.d.ts

@@ -91,7 +91,7 @@ export interface Options {
      */
     encode?: (value: string) => string;
 }
-export declare function modifierToString(modifier: Modifier): "" | "?" | "*" | "+";
+export declare function modifierToString(modifier: Modifier): "" | "*" | "?" | "+";
 /**
  * Expose a function for taking tokens and returning a RegExp.
  */

package/custom-elements.json

@@ -38833,7 +38833,7 @@
               "module": "./../src/Controls/Behaviors/Disableable.ts"
             }
           ],
-          "description": "[object Object],[object Object],[object Object]",
+          "description": "File Picker - A user interface component that allows users to select files from their device.",
           "name": "FilePickerElement",
           "members": [
             {
@@ -39091,7 +39091,7 @@
           "tagName": "mosaik-file-picker",
           "events": [
             {
-              "description": "Fired when a file is picked.",
+              "description": "Fired when one or multiple files are selected by the user.",
               "name": "filePicked",
               "type": "Event"
             },
@@ -39123,6 +39123,12 @@
               "type": "Event"
             }
           ],
+          "slots": [
+            {
+              "description": "The default slot for custom trigger content (e.g., a button or icon).",
+              "name": ""
+            }
+          ],
           "attributes": [
             {
               "name": "multiple",
@@ -39221,7 +39227,7 @@
               "module": "./../src/Controls/Behaviors/Valueable.ts"
             }
           ],
-          "description": "[object Object],[object Object],[object Object]",
+          "description": "File Upload - A user interface component that provides a complete workflow for uploading files.",
           "name": "FileUploadElement",
           "members": [
             {
@@ -39680,12 +39686,12 @@
           "tagName": "mosaik-file-upload",
           "events": [
             {
-              "description": "Fired when a file is added.",
+              "description": "Fired when a file is added to the upload list.",
               "name": "fileUploadAdded",
               "type": "Event"
             },
             {
-              "description": "Fired when a file is removed.",
+              "description": "Fired when a file is removed from the upload list.",
               "name": "fileUploadRemoved",
               "type": "Event"
             },
@@ -39695,7 +39701,7 @@
               "type": "Event"
             },
             {
-              "description": "Fired when the files are changed.",
+              "description": "Fired when the set of files has changed.",
               "name": "fileUploadChanged",
               "type": "Event"
             },
@@ -39727,6 +39733,12 @@
               "type": "Event"
             }
           ],
+          "slots": [
+            {
+              "description": "The default slot for custom UI, such as buttons, instructions, or drop zones.",
+              "name": ""
+            }
+          ],
           "attributes": [
             {
               "name": "autoUpload",
@@ -39875,7 +39887,7 @@
               "module": "./../src/Controls/Behaviors/Themeable.ts"
             }
           ],
-          "description": "[object Object],[object Object],[object Object]",
+          "description": "File Upload Item - A subcomponent that represents a single file within a file upload list.",
           "name": "FileUploadItemElement",
           "members": [
             {
@@ -40156,6 +40168,16 @@
               "type": "Event"
             }
           ],
+          "slots": [
+            {
+              "description": "The slot for custom label content (e.g., file name or description).",
+              "name": "label"
+            },
+            {
+              "description": "The slot for custom action content (e.g., remove or retry buttons).",
+              "name": "actions"
+            }
+          ],
           "attributes": [
             {
               "name": "view",
@@ -89398,15 +89420,15 @@
               "module": "./../src/Controls/Behaviors/Variantable.ts"
             }
           ],
-          "description": "[object Object],[object Object],[object Object]",
+          "description": "DropZoneElement - An interactive component that defines a target area for drag-and-drop operations.",
           "name": "DropZoneElement",
           "members": [
             {
               "kind": "field",
-              "name": "isDragging",
+              "name": "state",
               "privacy": "public",
-              "description": "[object Object],[object Object],[object Object]",
-              "type": "boolean"
+              "description": "Gets or sets the `state` property.",
+              "type": "DropZoneState"
             },
             {
               "kind": "field",
@@ -89670,12 +89692,18 @@
               "type": "Event"
             }
           ],
+          "slots": [
+            {
+              "description": "The default slot for content displayed inside the drop zone.",
+              "name": ""
+            }
+          ],
           "attributes": [
             {
-              "name": "isDragging",
-              "fieldName": "isDragging",
-              "description": "[object Object],[object Object],[object Object]",
-              "type": "boolean"
+              "name": "state",
+              "fieldName": "state",
+              "description": "Gets or sets the `state` property.",
+              "type": "DropZoneState"
             },
             {
               "name": "disabled",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-foundation",
-    "version": "0.0.136",
+    "version": "0.0.137",
     "description": "Mosaik elements components package.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -14,8 +14,8 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "^0.0.136",
-        "@breadstone/mosaik-themes": "^0.0.136",
+        "@breadstone/mosaik-elements": "^0.0.137",
+        "@breadstone/mosaik-themes": "^0.0.137",
         "@ctrl/tinycolor": "^4.1.0",
         "@floating-ui/dom": "^1.7.3",
         "@lit-labs/virtualizer": "^2.1.1",