@breadstone/mosaik-elements-foundation 0.0.135 → 0.0.137

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"}

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/BannerGroupDismissBehavior.d.ts

@@ -0,0 +1,7 @@
+export declare const BannerGroupDismissBehavior: {
+    readonly Remove: "remove";
+    readonly Hide: "hide";
+    readonly None: "none";
+};
+export type BannerGroupDismissBehavior = typeof BannerGroupDismissBehavior[keyof typeof BannerGroupDismissBehavior];
+//# sourceMappingURL=BannerGroupDismissBehavior.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupDismissBehavior.d.ts","sourceRoot":"","sources":["../../../src/Controls/Types/BannerGroupDismissBehavior.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B;;;;CAI7B,CAAC;AAEX,MAAM,MAAM,0BAA0B,GAAG,OAAO,0BAA0B,CAAC,MAAM,OAAO,0BAA0B,CAAC,CAAC"}

package/Controls/Types/BannerGroupDismissBehavior.js

@@ -0,0 +1,6 @@
+export const BannerGroupDismissBehavior = {
+    Remove: 'remove',
+    Hide: 'hide',
+    None: 'none'
+};
+//# sourceMappingURL=BannerGroupDismissBehavior.js.map

package/Controls/Types/BannerGroupDismissBehavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupDismissBehavior.js","sourceRoot":"","sources":["../../../src/Controls/Types/BannerGroupDismissBehavior.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACtC,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;CACN,CAAC"}

package/Controls/Types/BannerGroupStacking.d.ts

@@ -0,0 +1,6 @@
+export declare const BannerGroupStacking: {
+    readonly Vertical: "vertical";
+    readonly Depth: "depth";
+};
+export type BannerGroupStacking = typeof BannerGroupStacking[keyof typeof BannerGroupStacking];
+//# sourceMappingURL=BannerGroupStacking.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupStacking.d.ts","sourceRoot":"","sources":["../../../src/Controls/Types/BannerGroupStacking.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC"}

package/Controls/Types/BannerGroupStacking.js

@@ -0,0 +1,5 @@
+export const BannerGroupStacking = {
+    Vertical: 'vertical',
+    Depth: 'depth'
+};
+//# sourceMappingURL=BannerGroupStacking.js.map

package/Controls/Types/BannerGroupStacking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerGroupStacking.js","sourceRoot":"","sources":["../../../src/Controls/Types/BannerGroupStacking.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;CACR,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/Index.d.ts

@@ -36,6 +36,7 @@ export { FormElement } from './Controls/Components/Forms/FormElement';
 export { FormFieldElement } from './Controls/Components/Forms/FormFieldElement';
 export { TitleBarElement } from './Controls/Components/Grouping//TitleBar/TitleBarElement';
 export { BannerElement } from './Controls/Components/Grouping/Banner/BannerElement';
+export { BannerGroupElement } from './Controls/Components/Grouping/BannerGroup/BannerGroupElement';
 export { BannerHeaderElement } from './Controls/Components/Grouping/Banner/BannerHeaderElement';
 export { BannerSubHeaderElement } from './Controls/Components/Grouping/Banner/BannerSubHeaderElement';
 export { BreadcrumbElement } from './Controls/Components/Grouping/Breadcrumb/BreadcrumbElement';
@@ -568,6 +569,8 @@ export { ExpansionMode } from './Controls/Types/ExpansionMode';
 export { FabGroupDirection } from './Controls/Types/FabGroupDirection';
 export { FileUploadView } from './Controls/Types/FileUploadView';
 export { Fit } from './Controls/Types/Fit';
+export { BannerGroupDismissBehavior } from './Controls/Types/BannerGroupDismissBehavior';
+export { BannerGroupStacking } from './Controls/Types/BannerGroupStacking';
 export { FlowDirection } from './Controls/Types/FlowDirection';
 export { HorizontalAlignment } from './Controls/Types/HorizontalAlignment';
 export { HyperlinkUnderline } from './Controls/Types/HyperlinkUnderline';